[Feat] 초대페이지 로직 수정 QA_2 #482

Bowoon1216 · 2025-02-21T08:10:31Z

해당 이슈 번호

closed #481

체크리스트

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

💎 PR Point

이전에 올렸던 피알 브랜치에서 스토리북 및 깃헙 액션 이슈가 있어 브랜치를 새로 팠습니다.

대시보드의 height가 늘어나지 않아서 못생긴 이슈가 있었습니다.

이것을 cal(100vh - 어쩌구)로 반응형으로 해결할 수 있었습니다.

팀이 있는 유저가 로그인했을때 토큰만있고 TEAM_ID가 없는 경우에 onboarding으로 이동하는 이슈가 있었습니다. (즉, snb에는 팀이 있는데 대시보드 페이지가 아닌 온보딩페이지로 가는 현상!)

이것을 Onboarding 페이지에서 내가 속한 팀을 가져오고 useEffect를 이용해 팀이 존재하면 로컬스토리지에 TEAM_ID등을 set하고 대시보드로 이동시켜 해결했습니다.

const { data } = $api.useQuery('get', '/api/v1/members/teams');
 const firstTeam = data?.data?.belongTeamGetResponses[0];
useEffect(() => {
    if (firstTeam) {
      localStorage.setItem(STORAGE_KEY.TEAM_ID, String(firstTeam.id));
      localStorage.setItem(STORAGE_KEY.TEAM_NAME, firstTeam.name);
      navigate(PATH.DASHBOARD);
    }

로그인 하지 않은 상태로 초대를 받을 때, 로그인페이지로 인터셉트 당하여 아래 페이지가 나오지 않는 이슈가 있었습니다.

이는 middleware.ts에서 토큰여부확인하는 로직을 수정했습니다.
원래는 accessToken만 없으면 바로 로그인페이지로 이동하게 되어있었는데,
초대를 받으면 로컬스토리지에 INVITATION_ID를 저장하고 그것을 이용해 로컬스토리지에 초대 아이디가 있는지 까지 확인 한 후에 토큰과 초대아이디 모두 없을때 로그인페이지로 이동합니다.

if (!accessToken && !localStorage.getItem(STORAGE_KEY.INVITATION_ID)) {
      window.location.replace(PATH.LOGIN);
      throw new Error('토큰이 존재하지 않습니다.');
    }

(로컬스토리지의 초대아이디는 초대와 관련된 로직이 끝나면 삭제됩니다)

📌스크린샷 (선택)

github-actions · 2025-02-21T08:13:12Z

🚀 Storybook 확인하기 🚀

github-actions · 2025-02-21T08:40:24Z

🚀 Storybook 확인하기 🚀

namdaeun

보우니 고생햇서 !! LGTM ~~

namdaeun · 2025-02-21T12:27:07Z

apps/client/src/page/dashboard/component/ItemAdder/ItemAdder.styles.ts

+    minHeight: path === PATH.ARCHIVING ? 'calc(100vh - 53rem)' : '',
    width: path !== PATH.DRIVE ? '100%' : '',


요거 else의 경우 아무런 값도 지정해주지 않으니 && 사용해줘도 될 것 같아유 !

namdaeun · 2025-02-21T12:28:06Z

apps/client/src/page/invite/constant/index.ts

요거 머지되면 제가 전체적으로 합치겠슴다 !

감사합니당!!

github-actions · 2025-02-21T14:07:22Z

🚀 Storybook 확인하기 🚀

wuzoo

고생하셨습니다 ~!

wuzoo · 2025-02-21T14:06:50Z

apps/client/src/page/invite/index.tsx

          navigate(PATH.ONBOARDING);
        },
      }
    );
+    clearInvitation();


얘는 왜 재귀호출하는거에요 ??

오잉 이거 호출하고있는 함수는 handleApproveInvitation이고
함수 clearInvitation에 대한 정의는 그 위에 있습니다!

wuzoo · 2025-02-21T14:10:08Z

apps/client/src/shared/api/middleware.ts

@@ -17,16 +17,18 @@ interface ErrorResponse {
 /* 토큰 여부 확인 */
 export const authMiddleware: Middleware = {
  async onRequest({ request }) {
-    const accessToken = localStorage.getItem(STORAGE_KEY.ACCESS_TOKEN_KEY);
+    if (localStorage.getItem(STORAGE_KEY.ACCESS_TOKEN_KEY) && !localStorage.getItem(STORAGE_KEY.INVITATION_ID)) {


이건 뭐하는 로직이라서 추가한 것이죠 ?

추가적으로 조건문 안의 로직이 길어지면 읽는 사람 입장에서 가독성이 좀 떨어지는 것 같아요. 어떠한 동작인지 변수 네이밍으로 표시해주고 해당 변수를 넣는게 더 깔끔할듯 !

ㅎㅎ 뭐하는 로직인지 생각해보다가 로직이 잘못됨을 깨달았습니다!!
변경한 로직은

const isInvitationIdNone = !localStorage.getItem(STORAGE_KEY.INVITATION_ID) || localStorage.getItem(STORAGE_KEY.INVITATION_ID) === ''; if (isInvitationIdNone) { //...

요것인데요, 초대 아이디가 존재한다면 로그인을 안해도(토큰이 없어도) 로그인화면으로 가지 않도록 했습니다.
왜냐면 로그인을 안한 상태로 초대를 받았을 경우, '로그인 전 초대 페이지'가 나오지 않고 바로 로그인화면으로 이동되었기 때문에
이 현상을 막기 위해 초대 아이디가 있다면 토큰 확인을 하지 않도록 수정했습니다.

github-actions · 2025-02-21T14:56:32Z

🚀 Storybook 확인하기 🚀

namdaeun

몇 개 궁금한 거 코멘트로 남겨봤슴다 !

namdaeun · 2025-02-22T09:22:55Z

apps/client/src/shared/api/middleware.ts

@@ -17,16 +17,21 @@ interface ErrorResponse {
 /* 토큰 여부 확인 */
 export const authMiddleware: Middleware = {
  async onRequest({ request }) {
-    const accessToken = localStorage.getItem(STORAGE_KEY.ACCESS_TOKEN_KEY);
+    const isInvitationIdNone =
+      !localStorage.getItem(STORAGE_KEY.INVITATION_ID) || localStorage.getItem(STORAGE_KEY.INVITATION_ID) === '';


INVITATION_ID가 ''로 저장될 수도 있나요 ??

빈 경우도 처리를 해봤는데 그럴 경우가 없겠네용 !! ㅎㅎ 감삼다

namdaeun · 2025-02-22T09:29:38Z

apps/client/src/shared/api/middleware.ts

+    const isInvitationIdNone =
+      !localStorage.getItem(STORAGE_KEY.INVITATION_ID) || localStorage.getItem(STORAGE_KEY.INVITATION_ID) === '';


이 반대의 경우에 토큰 검사 하지 않고 얼리 리턴해주면 안대나요 ??

Bowoon1216 added 2 commits February 21, 2025 16:58

style: invite style

9355ddd

feat: page 로직 추가

07702d6

Bowoon1216 added ✨Feature 🤍보운 labels Feb 21, 2025

Bowoon1216 requested review from rtttr1, namdaeun and wuzoo February 21, 2025 08:10

feat: 로그인 전 초대 로직 및 헤더 널 이슈 해결

8382d58

namdaeun approved these changes Feb 21, 2025

View reviewed changes

style: css에서 && 사용하기

3b5aa1e

wuzoo approved these changes Feb 21, 2025

View reviewed changes

wuzoo assigned Bowoon1216 Feb 21, 2025

fix: 초대 id 없있을때 토큰검사 제외

8acc9d8

namdaeun reviewed Feb 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] 초대페이지 로직 수정 QA_2 #482

[Feat] 초대페이지 로직 수정 QA_2 #482

Bowoon1216 commented Feb 21, 2025 •

edited

Loading

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 21, 2025

namdaeun left a comment •

edited

Loading

namdaeun Feb 21, 2025

namdaeun Feb 21, 2025

Bowoon1216 Feb 21, 2025

github-actions bot commented Feb 21, 2025

wuzoo left a comment

wuzoo Feb 21, 2025

Bowoon1216 Feb 21, 2025

wuzoo Feb 21, 2025

Bowoon1216 Feb 21, 2025

github-actions bot commented Feb 21, 2025

namdaeun left a comment

namdaeun Feb 22, 2025

Bowoon1216 Feb 22, 2025

namdaeun Feb 22, 2025

		minHeight: path === PATH.ARCHIVING ? 'calc(100vh - 53rem)' : '',
		width: path !== PATH.DRIVE ? '100%' : '',

		const isInvitationIdNone =
		!localStorage.getItem(STORAGE_KEY.INVITATION_ID) \|\| localStorage.getItem(STORAGE_KEY.INVITATION_ID) === '';

[Feat] 초대페이지 로직 수정 QA_2 #482

Are you sure you want to change the base?

[Feat] 초대페이지 로직 수정 QA_2 #482

Conversation

Bowoon1216 commented Feb 21, 2025 • edited Loading

해당 이슈 번호

체크리스트

💎 PR Point

📌스크린샷 (선택)

github-actions bot commented Feb 21, 2025

github-actions bot commented Feb 21, 2025

namdaeun left a comment • edited Loading

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

github-actions bot commented Feb 21, 2025

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

github-actions bot commented Feb 21, 2025

namdaeun 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

Bowoon1216 commented Feb 21, 2025 •

edited

Loading

namdaeun left a comment •

edited

Loading