[FEAT] 유저 정보 관리 cookie로 변경 #368

novice0840 · 2024-10-23T16:56:16Z

Issue Number

#348

As-Is

기존에는 유저 정보를 recoil에서 전역상태로 관리하고 있었기 때문에 새로 고침 시 유저 정보가 사라져 게임이 진행이 되지 않는 상황 발생.

To-Be

쿠키를 사용하여 유저정보를 관리해 새로고침을 하더라도 게임을 지속할 수 있게 한다.
닉네임 페이지에서 recoil의 isMaster 값을 사용해 방을 접속할지 방을 만들지를 분기 처리하고 있었는데 이를 현재 URL에 roomUuid 값의 존재 유무를 통해 처리하는 방식으로 변경
Test-util에서 유저 정보를 방장으로 세팅해 주는 함수를 recoil에서 API mocking 방식으로 변경

Check List

테스트가 전부 통과되었나요?
모든 commit이 push 되었나요?
merge할 branch를 확인했나요?
Assignee를 지정했나요?
Label을 지정했나요?

Test Screenshot

(Optional) Additional Description

recoil 상태들이 사라지면서 여기저기 변경사항이 생겼습니다. 특히 테스트 쪽 유틸 함수들로 recoil을 없앴기 때문에 변경사항이 발생했습니다.

RoomSetting 컴포넌트 텍스트 위아래도 맞춤 되었습니다.

🌸 Storybook 배포 주소

https://woowacourse-teams.github.io/2024-ddangkong/storybook/

🌸 Storybook 배포 주소

https://woowacourse-teams.github.io/2024-ddangkong/storybook/

rbgksqkr

코멘트 완료했습니다 포메~!! 쿠키로 마이그레이션하느라 힘들었을 것 같은데 잘 바꿔주셔서 감사합니다 😁 몇가지 코멘트 남겨봤습니다 같이 얘기해봐요!!!!!!!

rbgksqkr · 2024-10-24T02:02:01Z

frontend/src/apis/fetcher.ts

@@ -16,6 +16,7 @@ const fetcher = {
        method,
        body: body && JSON.stringify(body),
        headers: headers && headers,
+        credentials: 'include',


💭 질문 💭

오호 이 속성을 붙여야 쿠키를 주고받을 수 있는건가요??

네, 이 속성이 있어야 쿠키가 전송이 되더라고요!

rbgksqkr · 2024-10-24T02:03:51Z

frontend/src/apis/room.ts

@@ -136,3 +142,12 @@ export const isJoinableRoom = async (roomUuid: string): Promise<{ isJoinable: bo

  return data;
 };
+
+// 사용자 정보 조회
+export const getMember = async (): Promise<RoomAndMember> => {


🙏 제안 🙏

getMember하면 뭔가 string 값이 반환될 것 같다고 느껴지는데 getUserInfo 이런 느낌은 어떤가요?? getMember는 객체로 반환하는데 객체 키값에 member가 있어서 어색하다고 느낀 것 같아요.

네, 그렇게 수정하겠습니다!

rbgksqkr · 2024-10-24T02:07:27Z

frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.tsx

-    }
-  }, [master.memberId, memberInfo, setMemberInfo]);
+    queryClient.invalidateQueries({ queryKey: ['getMember'] });
+  }, [master.memberId]);


🌸 칭찬 🌸

오 유저정보를 서버에서 관리하니까 해당 처리가 가능하군요!!! 될 것 같긴 한데 잘 동작하는지 영상이 있으면 더 이해가 빠를 것 같아용

rbgksqkr · 2024-10-24T02:09:38Z

frontend/src/components/common/Spinner/Spinner.styled.ts

@@ -11,7 +11,7 @@ export const spinnerWrapper = css`

 export const rotatingImage = (size: number) => css`
  width: ${size}rem;
-  height: 20vh;
+  height: ${size * 2}rem;


💭 질문 💭

너비의 2배 높이 비율로 해도 괜찮았나요??

기존에 가로, 세로 비율을 1대1로 하니까 납작해진 이미지가 나오더라고요. 그래서 조절 한 건데 정확한 비율을 몰라서 제가 화면에서 눈으로 보며대략적으로 정했습니다! 정확한 비율이 몇 인지 알면 수정해도 돼요!

rbgksqkr · 2024-10-24T02:10:47Z

frontend/src/hooks/useGetmember.ts

+  const { data } = useQuery({
+    queryKey: [QUERY_KEYS.getMember],
+    queryFn: getMember,
+    staleTime: 30000,


💭 질문 💭

staleTime을 30초로 잡은 이유가 궁금합니다! 30초면 한 게임도 아니고, 한 라운드를 고려한 것도 아니라는 생각이 들어서 어떤 기준인지 궁금해요!

제가 생각하기에 게임이 가장 빠르게 끝났을 때를 기준으로 잡았습니다! 임시로 정한 값이라 논의 후 수정해도 좋을 것 같아요

서비스 정책상 변경이 없는 방에서 2시간 방이 유지되는 것으로 서버와 얘기가 되었습니다~! 그래서 그 시간에 맞춰 staleTIme도 2시간으로 정하면 좋을 것 같아요!!

rbgksqkr · 2024-10-24T02:15:08Z

frontend/src/pages/MainPage/useCreateRoom.ts

-  const goToNicknamePage = () => {
-    navigate(ROUTES.nickname);
-  };
-
  const handleRoomCreate = () => {


🙏 제안 🙏

줄바꿈 부탁드려요~!

수정했습니다!

rbgksqkr · 2024-10-24T02:15:34Z

frontend/src/pages/MainPage/useCreateRoom.ts

  const handleRoomCreate = () => {
-    goToNicknamePage();
-    setMemberInfo((memberInfo) => ({ ...memberInfo, isMaster: true }));
+    navigate(ROUTES.nickname);


🌸 칭찬 🌸

와우 방생성 로직이 많이 간단해졌네요!!!

💭 질문 💭

원래 이 함수로 닉네임페이지에서 방장과 초대받은 유저를 구분했는데, 쿠키로 그게 가능해진건가요??
홈에서 방 만들기 클릭 후 닉네임 페이지에서 새로고침 후 확인 눌러도 방 생성으로 잘 동작하는 건가요??

방을 만들기 전에는 URL에 roomUuid의 유무를 기준으로 방장 여부를 판단하고 있습니다!

rbgksqkr · 2024-10-24T02:18:28Z

frontend/src/pages/NicknamePage/useMakeOrEnterRoom.ts

  const { roomUuid } = useParams();

+  // roomUuId가 없다 -> 초대링크를 받지 않은 master이다.
+  const isMaster = !roomUuid;


💭 질문 💭

파라미터로 방장을 판단해도 괜찮을까요?? 사용자가 의도적으로 아무런 값만 추가해도 문제가 안생기나요? 엇 joinable API로 에러 페이지로 가니까 문제가 없을 수도 있겠네용

유저가 URL을 조작하지 않고 정상적으로 서비스를 실행했다면 괜찮을 것 같습니다. URL을 변조한 경우에도 joinable API가 있기 때문에 에러 감지가 될 것으로 보입니다

rbgksqkr · 2024-10-24T02:19:58Z

frontend/src/utils/test-utils.tsx

-  const initializeState = (snap: MutableSnapshot) => {
-    snap.set(memberInfoState, { memberId: 1, nickname: 'Test User', isMaster });
-  };
+const customRenderWithMaster = (Component: React.ReactNode) => {


🙏 제안 🙏

아하 응답값을 바꾸기 위해 이렇게 작성했군요! 그런데 제 생각엔 util 함수에 server.use를 사용하는 건 애매한 것 같아요! 테스트 코드에서 server.use를 사용하는 게 유지보수 관점에서 적절하다고 생각합니다. 어떻게 생각하시나용

server.use에서 방장 여부를 변경하는 함수가 여기저기 사용되어서 따로 함수로 만들긴 해야 할 것 같은데 그럼 테스트 코드용 공통 함수를 만드는 걸 생각하신건가요?

server.use( http.get(MOCK_API_URL.getMember, async () => { return HttpResponse.json(ROOM_AND_MASTER, { status: 200 }); }), );

rbgksqkr · 2024-10-24T02:21:54Z

frontend/src/components/layout/Header/hooks/useExit.ts

  const navigate = useNavigate();
  const { roomId } = useParams();

  const exitRoomMutation = useMutation<void, Error, { roomId: number; memberId: number }>({
    mutationFn: ({ roomId, memberId }) => exitRoom(roomId, memberId),
-    onSuccess: () => {
+    onSettled: () => {


💭 질문 💭

오호 성공하든 실패하든 쿠키지우고 홈으로 보내기 위해 onSettled를 사용한 것 같은데, 제가 이해한 게 맞을까용?
방나가기할 때 이렇게 처리하도록 바꾼건 좋은 것 같아요!

네, 맞아요! 성공, 실패 상관없이 홈으로 보내는 게 맞다고 생각했어요!

novice0840 added 18 commits October 18, 2024 17:43

feat: 방 재접속 API 함수 생성 #348

aa638a9

feat: 방 재접속 API mocking 함수 생성 #348

a5e76ac

feat: rejoinRoom hook 구현 #348

702eadd

feat: 대기 페이지 쿠키 적용 #348

a190311

feat: 게임 시작 시 방장 판단 여부 recoil -> cookie 로 변경 #348

94088a1

refactor: button 태그 닫힌 태그로 변경 #348

ec120fc

feat: API 함수 getMember로 변경 #348

50de4c5

feat: 멤버가 바뀔 경우 멤버 정보 초기화 #348

400fbee

refactor: 방 시작 방장 판단 cookie로 변경 #348

4cea2b5

refactor: 다음 라운드로 넘어가기 기능 recoil -> cookie로 변경 #348

63119df

refactor: 게임 진행 시 유저정보조회 recoil -> cookie로 변경 #348

275eda1

refactor: 이미지 비율 깨짐 해결 #348

7038f9b

fix: git conflict 해결 #348

443646c

fix: 땅콩이미지 비율 안 맞는 문제 해결 #348

a0e75c7

fix: git conflict 해결 #348

4327bbc

fix: 닉네임 페이지 isMaster 오류 해결 #348

3a8ed76

refactor: RoomSetting 텍스트 위아래 정렬 맞춤 #348

da1ff91

refactor: RoomSetting 글자 간격 넓힘 #348

7a4ae56

novice0840 added ♻️ refactor 리팩토링 ✨ feat 기능 추가 🫧 FE front end labels Oct 23, 2024

novice0840 added this to the FE Sprint6 milestone Oct 23, 2024

novice0840 requested review from rbgksqkr and useon October 23, 2024 16:56

novice0840 self-assigned this Oct 23, 2024

novice0840 linked an issue Oct 23, 2024 that may be closed by this pull request

[FEAT] 유저 정보 관리 cookie로 변경 #348

Closed

2 tasks

novice0840 added 4 commits October 24, 2024 02:43

refactor: 사용하지 않는 recoil 파일 제거 #348

3028de5

feat: getMember 함수 response 예제 json 생성 #348

890335e

refactor: queryKey, example JSON 적용 #348

77b0cd1

refactor: test 함수 변경 #348

7532140

rbgksqkr reviewed Oct 24, 2024

View reviewed changes

refactor: 함수 아래 줄바꿈 추가 #348

2c5b394

rbgksqkr approved these changes Oct 24, 2024

View reviewed changes

novice0840 added 2 commits October 24, 2024 13:36

fix: git conflict 해결 #348

0698012

fix: RoomSetting test 함수명 에러 수정 #348

d86a41c

novice0840 merged commit 8855ab8 into develop Oct 24, 2024
2 checks passed

novice0840 deleted the feat/#348 branch October 24, 2024 04:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEAT] 유저 정보 관리 cookie로 변경 #368

[FEAT] 유저 정보 관리 cookie로 변경 #368

novice0840 commented Oct 23, 2024 •

edited by rbgksqkr

Loading

rbgksqkr left a comment

rbgksqkr Oct 24, 2024

novice0840 Oct 24, 2024

rbgksqkr Oct 24, 2024

novice0840 Oct 24, 2024

rbgksqkr Oct 24, 2024

rbgksqkr Oct 24, 2024

novice0840 Oct 24, 2024

rbgksqkr Oct 24, 2024

novice0840 Oct 24, 2024

rbgksqkr Oct 24, 2024

rbgksqkr Oct 24, 2024

novice0840 Oct 24, 2024

rbgksqkr Oct 24, 2024

rbgksqkr Oct 24, 2024

novice0840 Oct 24, 2024

rbgksqkr Oct 24, 2024

novice0840 Oct 24, 2024

rbgksqkr Oct 24, 2024

novice0840 Oct 24, 2024

rbgksqkr Oct 24, 2024

novice0840 Oct 24, 2024

[FEAT] 유저 정보 관리 cookie로 변경 #368

[FEAT] 유저 정보 관리 cookie로 변경 #368

Conversation

novice0840 commented Oct 23, 2024 • edited by rbgksqkr Loading

Issue Number

As-Is

To-Be

Check List

Test Screenshot

(Optional) Additional Description

🌸 Storybook 배포 주소

🌸 Storybook 배포 주소

rbgksqkr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

Choose a reason for hiding this comment

🙏 제안 🙏

Choose a reason for hiding this comment

Choose a reason for hiding this comment

🌸 칭찬 🌸

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

🙏 제안 🙏

Choose a reason for hiding this comment

Choose a reason for hiding this comment

🌸 칭찬 🌸

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

Choose a reason for hiding this comment

🙏 제안 🙏

Choose a reason for hiding this comment

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

novice0840 commented Oct 23, 2024 •

edited by rbgksqkr

Loading