[SRLT-135] 에러 수정

[parknari02]

#️⃣ 관련 이슈

• SRLT-135

✍️ 작업 내용 요약

qa 이슈 반영

💡 작업 내용

기능

• 비회원 로그인 모달 추가
• 토큰 리프레쉬 로직 수정

🖥️ 구현 화면

스크린샷 또는 gif 파일로 올려주시면 됩니다.

기타 사항

기타 안건이나 개인적으로 추가한 사항 적어주시면 됩니다.

Summary by CodeRabbit

• 새로운 기능

  • 콘텐츠 작성·평가·비즈니스 생성 등 인증 필요 작업에서 로그인 모달이 표시되어 인증 유도
  • 헤더 및 상세 사이드바의 작업 버튼들이 인증 상태에 따라 동작을 제어

• 버그 수정 / 동작 변경

  • 로그아웃 처리 방식이 중앙화되어 일관된 로그아웃 동작 적용
  • 사용자 정보 조회 실패 시 저장된 사용자 정보가 초기화되도록 개선

[coderabbitai]

Walkthrough

API 토큰 갱신 실패와 401 처리에서 localStorage 직접 제거를 중앙화된 useAuthStore.getState().logout() 호출로 전환하고, Header와 ExpertDetailSidebar에 미인증 사용자에 대한 로그인 게이팅(로그인 모달 표시 및 네비게이션 차단)을 추가했습니다. 또한 fetchUser 실패 시 사용자 상태를 null로 초기화하고 tsconfig의 JSX 런타임을 react-jsx로 변경했습니다.

Changes

Cohort / File(s)	Summary
API / Auth 중앙화 src/api/api.ts	토큰 리프레시 실패 및 401 처리에서 localStorage 제거 대신 useAuthStore.getState().logout() 호출로 변경.
사용자 상태 관리 src/store/user.store.ts	fetchUser 실패 시 user 상태를 null로 설정하도록 추가.
헤더 인증 게이팅 src/app/_components/common/Header.tsx	로그아웃 처리에서 로컬 클리어/네비게이션 제거; "작성하기"/"채점하기" 액션에 인증 검사 추가하여 미인증 시 로그인 모달을 연다.
상세 사이드바 인증 게이팅 src/app/expert/detail/components/ExpertDetailSidebar.tsx	isAuthenticated 기반으로 로그인 모달 제어 추가, create 버튼 누를 때 인증 요구(미인증이면 로그인 모달 오픈 및 네비게이션 차단).
빌드 설정 tsconfig.json	JSX 런타임을 "preserve"에서 "react-jsx"로 변경(자동 JSX 런타임 활성화).

Sequence Diagram(s)

sequenceDiagram
    participant UI as Client(UI)
    participant Header as Header/Sidebar
    participant Auth as useAuthStore
    participant API as API Layer
    participant Modal as LoginModal

    UI->>Header: 클릭("작성하기"/"채점하기"/"create")
    Header->>Auth: isAuthenticated? (read)
    alt authenticated
        Header->>UI: open Upload/Business (navigate)
    else not authenticated
        Header->>Modal: open LoginModal
        Modal->>Auth: 로그인 시도 -> API (credentials)
        API->>Auth: 토큰 수신 -> set auth state
        Auth->>Header: auth state updated
        Header->>UI: now navigate (if applicable)
    end

    Note over API,Auth: 토큰 갱신 실패 또는 401 발생 시
    API->>Auth: useAuthStore.getState().logout()
    Auth->>UI: clear auth/user state (centralized)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• [SRLT-37] 로그인 연동 #13: Header 인증 게이팅 및 useAuthStore 통합 변경과 관련.
• [SRLT-121] 전문가 상세페이지 왼쪽 사이드바 전문가 피드백 부분 연결  #90: ExpertDetailSidebar의 인증/네비게이션 로직 변경과 중복 영역 존재.
• dev 최신화 #92: Header 및 ExpertDetailSidebar의 인증 흐름 조정과 관련 변경.

Suggested labels

🐞 FIX

Suggested reviewers

• Chasyuss

Poem

🐰 토큰이 흔들릴 땐 중앙 문을 열고,
미인증이면 모달로 살며시 껴안네.
상태는 깔끔히 null로 정리하고,
JSX는 새 옷 입고 춤추네. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	PR 제목이 매우 일반적이며 구체적인 변경 사항을 명확히 전달하지 못합니다. '에러 수정'은 실제 변경 내용(토큰 리프레시 로직 수정, 비회원 로그인 모달 추가)을 충분히 설명하지 않습니다.	PR 제목을 더 구체적으로 수정하세요. 예: 'SRLT-135 토큰 리프레시 로직 수정 및 비회원 로그인 모달 추가' 또는 'SRLT-135 인증 플로우 개선 및 에러 처리 최적화'

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 SRLT-135-에러-수정

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/app/_components/common/Header.tsx (1)

73-79: handleAuthClick의 isAuthenticated 분기는 도달 불가능한 코드입니다.

이 함수를 호출하는 버튼(Line 229-236)은 !isAuthenticated일 때만 렌더링되므로, if (isAuthenticated) 분기의 logout() 호출은 실행될 수 없습니다. 불필요한 분기를 제거하면 코드의 의도가 더 명확해집니다.

♻️ 제안

- const handleAuthClick = () => {
-   if (isAuthenticated) {
-     logout();
-   } else {
-     setOpenLogin(true);
-   }
- };
+ const handleAuthClick = () => {
+   setOpenLogin(true);
+ };

---

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.}

[Chasyuss]

확인했어용

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/app/expert/detail/components/ExpertDetailSidebar.tsx`:
- Around line 28-30: The current hasAccessToken/isMember logic in
ExpertDetailSidebar uses localStorage.getItem (hasAccessToken) which is not
reactive; replace that with the auth store's reactive flag: import and call
useAuthStore() and derive hasAccessToken (or better, isAuthenticated) from
useAuthStore().isAuthenticated, then compute isMember from that and user (update
the symbols hasAccessToken and isMember inside ExpertDetailSidebar accordingly);
also apply the same change to the other block around the second occurrence
(lines 69-73) so both places use the reactive useAuthStore().isAuthenticated
instead of localStorage.

🧹 Nitpick comments (1)

src/app/_components/common/Header.tsx (1)

81-87: clearUser() 중복 호출

handleLogout에서 clearUser()를 직접 호출하고 있지만, logout()이 isAuthenticated를 false로 변경하면 Line 25-31의 useEffect에서도 clearUser()가 다시 호출됩니다. 동작에 문제는 없으나 불필요한 중복입니다.

♻️ 제안

 const handleLogout = () => {
   logout();
-  clearUser();
   router.push('/');
   setIsProfileOpen(false);
 };