[Feat] teamId 전역 상태로 구현 #322

namdaeun · 2024-11-11T08:02:50Z

해당 이슈 번호

closed #311

체크리스트

🔀 PR 제목의 형식을 잘 작성했나요? e.g. [feat] PR을 등록한다.
💯 테스트는 잘 통과했나요?
🏗️ 빌드는 성공했나요?
🧹 불필요한 코드는 제거했나요?
✅ 컨벤션을 지켰나요?
💭 이슈는 등록했나요?
🏷️ 라벨은 등록했나요?
💻 git rebase를 사용했나요?
🙇‍♂️ 리뷰어를 지정했나요?

📌 내가 알게 된 부분

💎 PR Point

수정했습니다 !!!
기존의 zustand를 활용한 teamId store 파일을 활용한 커스텀 훅을 구현했습니다.

team.ts

const useTeamStore = create<TeamStore>((set) => ({
  teamId: Number(localStorage.getItem('teamId')),

  actions: {
    setTeamId: (teamId: number) =>
      set({
        teamId,
      }),
  },
}));

useInitializeTeamId.tsx

export const useInitializeTeamId = () => {
  const { data, isSuccess } = useClubInfoQuery();
  const { setTeamId } = useTeamIdAction();

  if (isSuccess && !localStorage.getItem('teamId')) {
    const teamId = data.belongTeamGetResponses[0].id;
    localStorage.setItem('teamId', teamId.toString());

    setTeamId(teamId);

    return teamId;
  }

  return Number(localStorage.getItem('teamId'));
};

조건문을 통해 로컬 스토리지에 teamId 값이 없을 때, 즉 앞의 쿼리가 success됐을 때 localStorage의 teamId값을 확인하고 없다면 쿼리에서의 data teamId의 첫 번째 아이디 값을 teamStore의 action 함수와 localStorage의 값을 설정해준 다음 리턴해줬고, 반대로 teamId가 localStorage에 있다면 해당 값을 리턴해주었습니다.

📌스크린샷 (선택)

2024-11-11.4.42.35.mov

github-actions · 2024-11-11T08:04:37Z

🚀 Storybook 확인하기 🚀

wuzoo

고생하셨습니다 !

teamId 커스텀 훅에서 고민해볼 지점이 조금 있는 것 같아요. 라우트마다 effect로 teamId 상태를 갈아껴주는 것은 결국 그냥 기존의 방법인 global state로 쉽게 해결되는 것 같다고 느꼈습니다.

글로벌 변수 + 로컬스토리지를 활용하는 것은 어떨까요 ? globalState가 있으면 해당 변수로, 없으면 localstorage를 조회해서 그 값으로 상태를 변경해주고, 로컬스토리지마저 없다면 clubQuery의 첫번째 아이디로 하는 식 ??

wuzoo · 2024-11-11T12:44:37Z

package.json

+    "build-storybook": "storybook build",
+    "check": "concurrently \"pnpm lint\" \"pnpm typeCheck\"",
+    "chromatic": "npx chromatic --project-token=chpt_f4088febbfb82b7",


왜 위로 빼신건지.. ㅋㅋㅋㅋㅋㅋㅋ

주기적으로 package.json을 정렬해주는 게 좋다고 어디서 들었는데 .... 이유 찾아올게요

그렇다고 합니다
저희는 프로젝트 규모가 크진 않아서 소팅 안해도 괜찮겠네요 하하

wuzoo · 2024-11-11T12:48:57Z

src/shared/hook/common/useTeamId.ts

+  useEffect(() => {
+    setTeamId(localStorage.getItem('teamId'));
+  }, [location]);


url path가 바뀔때마다 teamId를 갈아껴주기 위함인가요 ??

네 맞습니다 !

rtttr1

?? 연산자는 처음 알게 되었네요! 덕분에 하나 배워갑니다~~ 미천한 저는 딱히 고칠점이 없어 보여서 이만 퇴장합니다 LGTM!

github-actions · 2024-11-12T07:30:47Z

🚀 Storybook 확인하기 🚀

Bowoon1216

오 요거머지되면 대시보드에도 적용하러 가겠습니다💨💨
LGTM !! ❤️

github-actions · 2024-11-14T05:45:21Z

🚀 Storybook 확인하기 🚀

wuzoo · 2024-11-17T14:11:21Z

src/shared/hook/common/useInitializeTeamId.tsx

+  const { data } = useClubInfoQuery();
+  const { setTeamId } = useTeamIdAction();
+
+  if (data && !localStorage.getItem('teamId')) {
+    localStorage.setItem('teamId', data.belongTeamGetResponses[0].id.toString());
+    setTeamId(data.belongTeamGetResponses[0].id);
+
+    return data.belongTeamGetResponses[0].id;
+  }


여기서 그냥 useClubInfoQuery로 불러오지말고 useQuery로 바로 사용해서 enable에 localstorage 값이 있는지 없는지의 여부를 적용해준다면, 로컬스토리지 값이 있을 때 불필요한 호출을 줄일 수도 있을 것 같아요 !

또한 네이밍은 왜 initialize 인가용 ?

새로운 값으로 초기화하는 역할을 한다고 생각해서 그렇게 명명했습니다. 다른 좋은 이름이 있을까요?

주용님 말씀처럼 enabled속성 써보는 방법이 불필요한 호출을 막을 수 있겠네요. 이 방법으로 함 수정해볼게요!

음 나쁘지 않은 것 같아요 !! 좋습니당

여기서 그냥 useClubInfoQuery로 불러오지말고 useQuery로 바로 사용해서 enable에 localstorage 값이 있는지 없는지의 여부를 적용해준다면, 로컬스토리지 값이 있을 때 불필요한 호출을 줄일 수도 있을 것 같아요 !

enabled 속성을 사용하려고 했으나
enabled: !localStorage.getItem('teamId')
와 같이 코드를 작성할 경우 localStorage에 teamId가 있을 때 쿼리를 실행하지 않게 되어 사이드 바에 저장된 워크스페이스를 불러오지 않게 되는 문제가 있었습니다. 그래서 해당 쿼리는 항상 실행되어야 하는 방향으로 다시 변경했습니다.

그리고 isSuccess값을 받아와서 데이터를 정상적으로 불러왔을 때 localStorage의 값을 다시 검사해서 teamId가 없는 경우 할당해주는 방식으로 수정했습니다.

rtttr1

확인했습니다!!

wuzoo · 2024-11-18T11:47:47Z

src/shared/hook/common/useInitializeTeamId.tsx

+  const { data } = useClubInfoQuery();
+  const { setTeamId } = useTeamIdAction();
+
+  if (data && !localStorage.getItem('teamId')) {
+    localStorage.setItem('teamId', data.belongTeamGetResponses[0].id.toString());
+    setTeamId(data.belongTeamGetResponses[0].id);
+
+    return data.belongTeamGetResponses[0].id;
+  }


음 나쁘지 않은 것 같아요 !! 좋습니당

github-actions · 2024-11-18T15:25:32Z

🚀 Storybook 확인하기 🚀

github-actions · 2024-11-18T15:28:17Z

🚀 Storybook 확인하기 🚀

github-actions · 2024-11-18T15:45:35Z

🚀 Storybook 확인하기 🚀

github-actions · 2024-11-19T10:53:02Z

🚀 Storybook 확인하기 🚀

github-actions · 2024-11-19T10:57:47Z

🚀 Storybook 확인하기 🚀

github-actions · 2024-11-19T15:46:37Z

🚀 Storybook 확인하기 🚀

wuzoo · 2024-11-20T05:42:55Z

src/shared/hook/common/useInitializeTeamId.tsx

+
+  if (isSuccess && data?.data?.teams) {
+    // localStorage에 teamId가 없는 경우
+    const team = data.data.teams.find((team) => team);


요게 어떤 로직인가요 ? 그냥 데이터 값이 있는 첫 번째 요소를 찾는다라는 의미인가요 ?

data.teams의 length가 0보다 크다면 첫 번째 요소를 가져온다는 로직으로 단순화해도 좋을 것 같아요 !

현재 teams 배열이 있는지 확인 -> 요소가 있는 지 확인, 두 과정을 거치고 있는데 그냥 배열의 값이 있는지만 확인하면 한 번에 충족되지 않을까요 ?

현재 로직 충분히 좋은 것 같고, 정상 동작하는지 로컬에서 제대로 다시 한번 확인해주시면 감사하겠슴다 !

데이터 값이 있는 첫 번째 요소를 찾는다라는 의미 맞습니다 ..ㅎㅎ

넵 로컬에서 확인했고 두 개의 조건문 대신 하나의 조건문으로 수정했습니다. 확인 부탁드려용 감사합니다 :)

github-actions · 2024-11-20T06:43:48Z

🚀 Storybook 확인하기 🚀

github-actions · 2024-11-20T08:17:22Z

🚀 Storybook 확인하기 🚀

github-actions · 2024-11-20T08:20:30Z

🚀 Storybook 확인하기 🚀

namdaeun added 9 commits November 5, 2024 18:05

feat: teamId nullable 방지하는 커스텀 훅 구현

92f0d60

fix: state로 teamId 관리

200b4f6

Merge branch 'develop' into feature/archiving/#311-manage-teamId

9478895

chore: sort package.json

ca84d47

feat: useTeamId 훅으로 teamId값 관리

83c0ded

chore: useTeamId 훅 적용

914015c

chore: 주석 삭제

d432d8f

fix: undefined일 경우 0으로 저장

9cbc977

fix: 워크스페이스 data undefined 방지

05df437

namdaeun added ♻️Refactor 🫧다은 ✨Feature labels Nov 11, 2024

namdaeun requested review from rtttr1, cindy-chaewon, Bowoon1216 and wuzoo November 11, 2024 08:02

namdaeun self-assigned this Nov 11, 2024

wuzoo approved these changes Nov 11, 2024

View reviewed changes

rtttr1 approved these changes Nov 12, 2024

View reviewed changes

feat: TeamId 전역 상태로 관리

56d14f5

Bowoon1216 approved these changes Nov 12, 2024

View reviewed changes

fix: context 파일 제거

fb317bf

namdaeun changed the title ~~[Feat] teamId 관리 커스텀 훅 구현~~ [Feat] teamId 전역으로 관리 Nov 14, 2024

namdaeun changed the title ~~[Feat] teamId 전역으로 관리~~ [Feat] teamId 전역 상태 관리 구현 Nov 14, 2024

feat: teamId 커스텀 훅 구현 및 적용

6e83522

namdaeun changed the title ~~[Feat] teamId 전역 상태 관리 구현~~ [Feat] teamId 전역 상태로 구현 Nov 14, 2024

wuzoo reviewed Nov 17, 2024

View reviewed changes

rtttr1 approved these changes Nov 18, 2024

View reviewed changes

wuzoo approved these changes Nov 18, 2024

View reviewed changes

feat: enabled 옵션 활용해서 데이터 효율적으로 호출

b6aeef2

chore: 변수 설정

2af5842

fix: enabled 옵션 값 변경

117d042

Merge branch 'develop' into feature/archiving/#311-manage-teamId

2d2cce0

fix: solve build error

c6bdc21

fix: 훅 내에서 useQuery 사용해서 처리

08345a5

wuzoo reviewed Nov 20, 2024

View reviewed changes

refactor: 조건문 단순화

a485f2c

namdaeun added 2 commits November 20, 2024 17:15

fix: teamId 없을시 에러페이지로 라우팅되는 이슈 해결

7cce44a

chore: 절대경로로 수정

3dc58f9

chore: 줄 바꿈 수정

4d2a4fd

namdaeun merged commit 0285fb0 into develop Nov 20, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] teamId 전역 상태로 구현 #322

[Feat] teamId 전역 상태로 구현 #322

namdaeun commented Nov 11, 2024 •

edited

Loading

github-actions bot commented Nov 11, 2024

wuzoo left a comment

wuzoo Nov 11, 2024

namdaeun Nov 11, 2024

namdaeun Nov 14, 2024

wuzoo Nov 11, 2024

namdaeun Nov 11, 2024

rtttr1 left a comment

github-actions bot commented Nov 12, 2024

Bowoon1216 left a comment

github-actions bot commented Nov 14, 2024

wuzoo Nov 17, 2024

namdaeun Nov 18, 2024 •

edited

Loading

wuzoo Nov 18, 2024

namdaeun Nov 18, 2024 •

edited

Loading

rtttr1 left a comment

wuzoo Nov 18, 2024

github-actions bot commented Nov 18, 2024

github-actions bot commented Nov 18, 2024

github-actions bot commented Nov 18, 2024

github-actions bot commented Nov 19, 2024

github-actions bot commented Nov 19, 2024

github-actions bot commented Nov 19, 2024

wuzoo Nov 20, 2024

namdaeun Nov 20, 2024 •

edited

Loading

github-actions bot commented Nov 20, 2024

github-actions bot commented Nov 20, 2024

github-actions bot commented Nov 20, 2024

[Feat] teamId 전역 상태로 구현 #322

[Feat] teamId 전역 상태로 구현 #322

Conversation

namdaeun commented Nov 11, 2024 • edited Loading

해당 이슈 번호

체크리스트

📌 내가 알게 된 부분

💎 PR Point

📌스크린샷 (선택)

github-actions bot commented Nov 11, 2024

wuzoo 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

rtttr1 left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 12, 2024

Bowoon1216 left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 14, 2024

Choose a reason for hiding this comment

namdaeun Nov 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

namdaeun Nov 18, 2024 • edited Loading

Choose a reason for hiding this comment

rtttr1 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 18, 2024

github-actions bot commented Nov 18, 2024

github-actions bot commented Nov 18, 2024

github-actions bot commented Nov 19, 2024

github-actions bot commented Nov 19, 2024

github-actions bot commented Nov 19, 2024

Choose a reason for hiding this comment

namdaeun Nov 20, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Nov 20, 2024

github-actions bot commented Nov 20, 2024

github-actions bot commented Nov 20, 2024

namdaeun commented Nov 11, 2024 •

edited

Loading

namdaeun Nov 18, 2024 •

edited

Loading

namdaeun Nov 18, 2024 •

edited

Loading

namdaeun Nov 20, 2024 •

edited

Loading