[Fix/#139] 메시지 작성 완료 페이지 로그인 상태 확인 추가

[hyesngy]

Summary

관련 있는 Issue를 태그해주세요. (e.g. > - #100)
closed #139
메시지 작성 완료 페이지 로그인 상태 확인 추가

Tasks

• 메시지 작성 완료 페이지 로그인 상태 확인 추가

Summary by CodeRabbit

• 버그 수정
  • 페이지 로드 시 인증 정보가 올바르게 확인되고 초기화되도록 개선했습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
2025-seasonthon-team-80-fe	Ready	Preview, Comment	Dec 21, 2025 3:30pm

[coderabbitai]

Walkthrough

메시지 작성 완료 페이지에서 로그인 상태 확인 기능을 추가했습니다. useEffect 훅을 사용하여 페이지 마운트 시 hasFetchedAuth 상태를 확인한 후 checkAuth를 호출하는 방식으로 인증 상태를 자동 검증합니다.

Changes

코호트 / 파일	요약
인증 상태 검증 src/pages/letterPage/pages/letter-complete-page.tsx	useEffect 훅 추가, useAuthStore의 hasFetchedAuth와 checkAuth 활용하여 페이지 마운트 시 인증 상태 자동 검사 구현

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10분

• useEffect 의존성 배열 구성이 올바른지 확인 필요
• checkAuth 호출 시점과 hasFetchedAuth 상태 관리 로직 검증

Possibly related PRs

• [Fix/#135] 비회원 메시지 작성 api 수정 #136: useAuthStore.checkAuth 함수 변경사항과 직접 연관되어 있는 PR
• [Fix/#137] 메시지 작성 후 버튼 리다이렉트 수정 #138: 동일한 파일(letter-complete-page.tsx)의 인증 관련 로직 수정과 연관된 PR

Poem

🐰 편지를 완성한 후, 누구인지 확인하고,
useEffect의 따뜻한 손길로 로그인을 점검하네.
안전한 페이지, 인증된 마음! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목은 '[Fix/#139] 메시지 작성 완료 페이지 로그인 상태 확인 추가'로 변경사항의 주요 내용을 명확하게 요약하고 있으며, 저장소의 제목 형식 규칙을 따르고 있습니다.
Description check	✅ Passed	PR 설명은 Summary, Tasks 섹션이 작성되어 있으며, 관련 이슈(#139)가 명시되어 있고 작업 내용이 기재되어 있습니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항은 Issue #139의 요구사항인 '메시지 작성 완료 페이지에서 로그인 상태 확인 추가'를 충족합니다. useAuthStore에서 checkAuth와 hasFetchedAuth를 활용한 useEffect 구현으로 로그인 상태 확인 로직이 적절히 추가되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항은 letter-complete-page.tsx 파일의 로그인 상태 확인 기능 추가에만 집중되어 있으며, Issue #139의 범위 내에서 벗어난 변경이 없습니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/139

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

✨ Storybook: 🔗 https://690458540424857aa71aec97-yenrxdqcqv.chromatic.com/

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/pages/letterPage/pages/letter-complete-page.tsx (2)

18-18: 의존성 배열 최적화를 고려해보세요.

Zustand 스토어의 함수는 안정적인 참조를 유지하므로, checkAuth를 의존성 배열에서 제외할 수 있습니다. 현재 구현은 안전하게 작동하지만, 불필요한 의존성입니다.

🔎 제안하는 수정 사항

  useEffect(() => {
    if (!hasFetchedAuth) {
      void checkAuth();
    }
- }, [hasFetchedAuth, checkAuth]);
+ }, [hasFetchedAuth]);

또는 ESLint 규칙을 명시적으로 비활성화:

  useEffect(() => {
    if (!hasFetchedAuth) {
      void checkAuth();
    }
+   // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [hasFetchedAuth]);

---

14-18: 로딩 상태 표시를 고려해보세요.

인증 확인 중에는 isCheckingAuth 상태를 활용하여 로딩 인디케이터를 표시하는 것이 사용자 경험 측면에서 좋습니다. 현재는 인증 확인이 완료되기 전에 페이지가 렌더링되는데, 짧은 시간이지만 로딩 상태를 보여주면 더 나은 UX를 제공할 수 있습니다.

🔎 제안하는 구현 방식

- const { isLoggedIn, hasFetchedAuth, checkAuth } = useAuthStore();
+ const { isLoggedIn, isCheckingAuth, hasFetchedAuth, checkAuth } = useAuthStore();

  useEffect(() => {
    if (!hasFetchedAuth) {
      void checkAuth();
    }
  }, [hasFetchedAuth, checkAuth]);

+ if (isCheckingAuth) {
+   return (
+     <div className="flex h-full w-full items-center justify-center">
+       <p className="text-center font-primary text-lg text-red-200">
+         인증 확인 중...
+       </p>
+     </div>
+   );
+ }

  const isJoinPage = location.pathname.startsWith("/join/");

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 30160aa and 4b39da4.

📒 Files selected for processing (1)

• src/pages/letterPage/pages/letter-complete-page.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/pages/letterPage/pages/letter-complete-page.tsx (1)

src/stores/useAuthStore.ts (1)

• useAuthStore (20-75)

🔇 Additional comments (3)

src/pages/letterPage/pages/letter-complete-page.tsx (3)

2-2: LGTM!

useEffect 임포트가 올바르게 추가되었습니다.

---

12-12: LGTM!

인증 상태 확인을 위한 hasFetchedAuth와 checkAuth 추가가 적절합니다.

---

14-18: 로그인 상태 확인 로직이 올바르게 구현되었습니다.

인증 상태가 아직 가져오지 않은 경우에만 checkAuth를 호출하는 로직이 정확합니다. PR 목표를 성공적으로 달성했습니다.