Conversation
- alias mypage 추가 - 컴포넌트 분리(BackButton, layout, PasswordInput) - 이메일 Input readOnly 추가
- alias mypagem util 추가 - 컴포넌트 분리(BackButton, layout, PasswordInput) - 이메일 Input readOnly 추가 - 의미와 맞지 않는 파일 수정
…into refactor/insung
- SSR 환경과 클라이언트 환경 불일치 해결
- 레이아웃 수정 - 공통 컴포넌트 반영
- 미적용된 파일 경로 변경
|
Caution Review failedThe pull request is closed. """ Walkthrough이 변경사항은 입력 컴포넌트의 구조적 리팩토링, 인증 및 대시보드 API의 HTTP 클라이언트 일원화, 환경 변수 기반 엔드포인트 적용, 테마별 로딩/에러/404 UI 도입, 마이페이지 및 랜딩 페이지 구조 개선, 타입 및 유틸리티 함수 명확화, 경로 alias 추가 등 전반적인 코드베이스의 일관성 및 유지보수성을 높이는 대규모 리팩토링을 포함합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UIComponent
participant API
participant AuthStore
participant Router
User->>UIComponent: 입력 폼 제출/버튼 클릭
UIComponent->>API: 인증/대시보드/마이페이지 API 요청 (authHttpClient)
API-->>UIComponent: 응답 (환경 변수 체크 포함)
UIComponent->>AuthStore: 상태 갱신(로그인/로그아웃 등)
UIComponent->>Router: 라우팅(성공 시 setTimeout 등으로 딜레이)
Router-->>User: 페이지 전환
Note over UIComponent: 입력 컴포넌트는 Input/PasswordInput으로 분리 사용
Note over UIComponent: 에러/로딩/404는 테마별 동적 UI 표시
Possibly related PRs
Suggested reviewers
Poem
""" Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (6)
src/app/features/landing/components/Header.tsx (1)
13-13: CSS 클래스 추가 검토 필요
items-center justify-center클래스가 추가되었지만,justify-center는 부모 nav 요소에서 이미justify-between으로 레이아웃이 설정되어 있어 의도한 대로 동작하지 않을 수 있습니다.items-center는 수직 정렬에 적절하지만,justify-center의 필요성을 확인해 보세요.src/app/shared/hooks/useDashboardForm.ts (1)
8-8: 사용하지 않는 import를 정리해주세요.
axiosimport는 에러 처리에서만 사용되고 있는데,authHttpClient도 axios 인스턴스이므로 동일한 에러 처리가 가능합니다. 불필요한 import를 정리하는 것을 고려해보세요.-import axios from 'axios'에러 처리 부분도 다음과 같이 수정할 수 있습니다:
- const message = axios.isAxiosError(error) + const message = authHttpClient.isAxiosError?.(error) || error?.responsesrc/app/shared/components/common/BackButton/BackButton.tsx (1)
10-10: 불필요한 Fragment 제거 필요외부 Fragment(
<>,</>)가 불필요합니다. 단일 div를 반환하므로 Fragment를 제거할 수 있습니다.- <> - <div> + <div> <button //... 기존 코드 </button> - </div> - </> + </div>Also applies to: 21-21
src/app/mypage/layout.tsx (1)
1-3: import 경로 스타일을 일관되게 통일하세요.Header는
@components별칭을 사용하고 Sidebar는 절대 경로를 사용하고 있습니다. 일관성을 위해 동일한 스타일을 사용하는 것이 좋겠습니다.import Header from '@components/common/header/Header' -import Sidebar from '@/app/shared/components/common/sidebar/Sidebar' +import Sidebar from '@components/common/sidebar/Sidebar'src/app/loading.tsx (1)
23-31: 로고 이미지 처리 방식 개선 제안현재 테마에 따라 다른 로고를 로드하는 방식이 좋습니다. 다만 이미지 로드 실패에 대한 fallback 처리를 고려해보세요.
<Image src={isDark ? '/images/logo-dark.svg' : '/images/logo-light.svg'} alt="logo" fill priority className="object-contain" + onError={(e) => { + e.currentTarget.src = '/images/logo-fallback.svg' + }} />src/app/shared/components/common/Input/PasswordInput.tsx (1)
47-59: 접근성 개선을 위한 제안비밀번호 토글 버튼의 접근성을 향상시키기 위해 aria-label을 추가하는 것을 고려해보세요.
<button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-16 top-1/2 translate-y-[-50%]" + aria-label={showPassword ? '비밀번호 숨기기' : '비밀번호 보기'} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (64)
src/app/(auth)/layout.tsx(1 hunks)src/app/error.tsx(1 hunks)src/app/features/auth/api/authApi.ts(1 hunks)src/app/features/auth/api/authEndpoint.ts(1 hunks)src/app/features/auth/components/LoginForm.tsx(2 hunks)src/app/features/auth/components/SignupForm.tsx(4 hunks)src/app/features/auth/hooks/useLoginMutation.ts(1 hunks)src/app/features/auth/hooks/useSignupMutation.ts(1 hunks)src/app/features/dashboard/api/invitation.ts(1 hunks)src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx(2 hunks)src/app/features/dashboard/components/edit/EditInvitation.tsx(3 hunks)src/app/features/dashboard/components/edit/EditMember.tsx(1 hunks)src/app/features/dashboard_Id/api/deleteCard.ts(1 hunks)src/app/features/dashboard_Id/api/deleteColumn.ts(1 hunks)src/app/features/dashboard_Id/api/deleteComment.ts(1 hunks)src/app/features/dashboard_Id/api/fetchCards.ts(1 hunks)src/app/features/dashboard_Id/api/fetchColumns.ts(1 hunks)src/app/features/dashboard_Id/api/fetchComments.ts(1 hunks)src/app/features/dashboard_Id/api/fetchMembers.ts(1 hunks)src/app/features/dashboard_Id/api/postCard.ts(1 hunks)src/app/features/dashboard_Id/api/postCardImage.ts(1 hunks)src/app/features/dashboard_Id/api/postColumn.ts(1 hunks)src/app/features/dashboard_Id/api/postComment.ts(1 hunks)src/app/features/dashboard_Id/api/putCard.ts(1 hunks)src/app/features/dashboard_Id/api/putComment.ts(1 hunks)src/app/features/dashboard_Id/api/updateCardColumn.ts(1 hunks)src/app/features/dashboard_Id/api/updateColumn.ts(1 hunks)src/app/features/landing/components/Footer.tsx(1 hunks)src/app/features/landing/components/Header.tsx(1 hunks)src/app/features/landing/components/Landing.tsx(1 hunks)src/app/features/landing/components/Main.tsx(1 hunks)src/app/features/mypage/api/mypageApi.ts(2 hunks)src/app/features/mypage/components/PasswordChangeForm.tsx(5 hunks)src/app/features/mypage/components/ProfileEditForm.tsx(3 hunks)src/app/features/mypage/components/ProfileImageUpload.tsx(4 hunks)src/app/features/mypage/hook/useUserQurey.ts(1 hunks)src/app/features/mypage/util/getNewPasswordValidation.ts(1 hunks)src/app/layout.tsx(2 hunks)src/app/loading.tsx(1 hunks)src/app/mydashboard/api/dashboardApi.ts(1 hunks)src/app/mydashboard/page.tsx(1 hunks)src/app/mypage/layout.tsx(1 hunks)src/app/mypage/page.tsx(1 hunks)src/app/not-found.tsx(1 hunks)src/app/page.tsx(1 hunks)src/app/shared/components/Input.tsx(0 hunks)src/app/shared/components/Redirect.tsx(2 hunks)src/app/shared/components/common/BackButton/BackButton.tsx(1 hunks)src/app/shared/components/common/Input/Input.tsx(1 hunks)src/app/shared/components/common/Input/PasswordInput.tsx(1 hunks)src/app/shared/components/common/header/UserDropdown.tsx(1 hunks)src/app/shared/components/common/modal/CreateDashboardModal.tsx(1 hunks)src/app/shared/components/common/sidebar/DashboardItem.tsx(1 hunks)src/app/shared/components/common/sidebar/Sidebar.tsx(2 hunks)src/app/shared/components/dashboard/DashboardForm.tsx(1 hunks)src/app/shared/hooks/useDashboard.ts(2 hunks)src/app/shared/hooks/useDashboardForm.ts(2 hunks)src/app/shared/hooks/useDashboardInfinite.ts(2 hunks)src/app/shared/hooks/useFirstDashboardIdQuery.ts(1 hunks)src/app/shared/hooks/useMembers.ts(1 hunks)src/app/shared/lib/cn.ts(1 hunks)src/app/shared/types/input.type.ts(1 hunks)src/app/shared/util/getConfirmPasswordValidation.ts(1 hunks)tsconfig.json(1 hunks)
💤 Files with no reviewable changes (1)
- src/app/shared/components/Input.tsx
🧰 Additional context used
🧠 Learnings (1)
src/app/features/auth/components/SignupForm.tsx (1)
Learnt from: Insung-Jo
PR: CoPlay-FE/coplan#57
File: src/app/features/auth/hooks/useSignupSubmit.ts:12-0
Timestamp: 2025-06-16T09:44:38.218Z
Learning: In src/app/features/auth/hooks/useSignupSubmit.ts, the developer intentionally uses SignupRequest type instead of SignupFormData for the submit function parameter to prevent sending unnecessary confirmPassword field to the API, aligning the function signature with server expectations.
🧬 Code Graph Analysis (19)
src/app/features/landing/components/Header.tsx (1)
src/app/features/landing/components/Logo.tsx (1)
Logo(8-50)
src/app/page.tsx (1)
src/app/features/landing/components/Landing.tsx (1)
Landing(7-15)
src/app/features/dashboard/components/edit/EditInvitation.tsx (1)
src/app/shared/types/dashboard.ts (1)
Invitation(50-67)
src/app/features/landing/components/Landing.tsx (3)
src/app/features/landing/components/Header.tsx (1)
Header(8-21)src/app/features/landing/components/Main.tsx (1)
Main(7-17)src/app/features/landing/components/Footer.tsx (1)
Footer(5-12)
src/app/shared/hooks/useDashboardInfinite.ts (1)
src/app/shared/types/dashboard.ts (1)
DashboardListResponse(13-17)
src/app/shared/hooks/useDashboard.ts (1)
src/app/shared/types/dashboard.ts (1)
DashboardListResponse(13-17)
src/app/features/mypage/hook/useUserQurey.ts (1)
src/app/features/mypage/api/mypageApi.ts (1)
fetchUser(12-15)
src/app/shared/hooks/useFirstDashboardIdQuery.ts (2)
src/app/features/auth/store/useAuthStore.ts (1)
useAuthStore(6-21)src/app/shared/types/dashboard.ts (1)
DashboardListResponse(13-17)
src/app/shared/components/common/Input/Input.tsx (2)
src/app/shared/types/input.type.ts (1)
InputProps(3-11)src/app/shared/lib/cn.ts (1)
cn(4-6)
src/app/mypage/layout.tsx (1)
src/app/shared/components/common/sidebar/Sidebar.tsx (1)
Sidebar(17-158)
src/app/features/auth/components/SignupForm.tsx (1)
src/app/shared/util/getConfirmPasswordValidation.ts (1)
getConfirmPasswordValidation(1-7)
src/app/shared/components/common/sidebar/Sidebar.tsx (1)
src/app/shared/components/common/sidebar/CreateDashboardButton.tsx (1)
CreateDashboardButton(7-27)
src/app/loading.tsx (1)
src/app/shared/hooks/useMounted.ts (1)
useMounted(3-11)
src/app/error.tsx (1)
src/app/shared/hooks/useMounted.ts (1)
useMounted(3-11)
src/app/not-found.tsx (1)
src/app/shared/hooks/useMounted.ts (1)
useMounted(3-11)
src/app/shared/components/common/Input/PasswordInput.tsx (2)
src/app/shared/types/input.type.ts (1)
InputProps(3-11)src/app/shared/lib/cn.ts (1)
cn(4-6)
src/app/mydashboard/page.tsx (1)
src/app/mydashboard/components/MyDashboardGrid/MyDashboardGrid.tsx (1)
MyDashboardGrid(10-120)
src/app/shared/components/Redirect.tsx (3)
src/app/shared/hooks/useMounted.ts (1)
useMounted(3-11)src/app/features/auth/store/useAuthStore.ts (1)
useAuthStore(6-21)src/app/shared/hooks/useFirstDashboardIdQuery.ts (1)
useFirstDashboardIdQuery(8-30)
src/app/features/mypage/components/ProfileImageUpload.tsx (1)
src/app/shared/lib/cn.ts (1)
cn(4-6)
🪛 Biome (1.9.4)
src/app/error.tsx
[error] 7-7: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
src/app/features/mypage/components/ProfileImageUpload.tsx
[error] 63-66: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (96)
src/app/features/landing/components/Footer.tsx (1)
1-2: 클라이언트 컴포넌트 지시어 추가 확인
'use client'지시어가 추가되었습니다. Footer 컴포넌트가 정적 콘텐츠만 렌더링하는 것으로 보이는데, GithubIcon 컴포넌트나 다른 클라이언트 측 기능이 필요한지 확인해 보세요. 불필요한 클라이언트 렌더링은 성능에 영향을 줄 수 있습니다.src/app/features/landing/components/Main.tsx (1)
1-2: 클라이언트 컴포넌트 지시어 적절히 추가됨
'use client'지시어가 추가되었습니다. Main 컴포넌트가 여러 자식 컴포넌트들(HeroSection, PointSection, FeatureCardSection)을 포함하고 있어, 이들 중 일부가 클라이언트 측 기능을 필요로 할 가능성이 높으므로 적절한 변경입니다.src/app/page.tsx (2)
1-1: 좋은 리팩토링 - 컴포넌트 구조 개선새로운
Landing컴포넌트로 랜딩 페이지 구조를 통합한 것은 훌륭한 개선입니다. 이는 코드의 가독성과 유지보수성을 향상시킵니다.
6-6: 페이지 구조 단순화 완료개별 컴포넌트들을 단일
Landing컴포넌트로 대체하여 페이지 구조가 깔끔하게 정리되었습니다.src/app/features/landing/components/Landing.tsx (1)
1-15: 잘 구현된 컴포지션 컴포넌트
Landing컴포넌트가 Header, Main, Footer를 깔끔하게 조합하는 좋은 패턴으로 구현되었습니다.'use client'지시어도 적절하게 사용되었고, 코드 구조가 명확하고 유지보수하기 쉽습니다. 이러한 컴포지션 패턴은 재사용성과 모듈성을 높이는 좋은 방법입니다.src/app/shared/lib/cn.ts (1)
1-1: 타입 임포트 순서 개선이 좋습니다.타입을 함수보다 먼저 임포트하는 것은 TypeScript의 좋은 관례입니다. 코드의 일관성을 높이는 변경사항입니다.
src/app/shared/components/common/modal/CreateDashboardModal.tsx (1)
63-64: Tailwind CSS 클래스 순서 정리가 좋습니다.클래스 순서를 일관되게 정리하여 코드의 가독성과 유지보수성을 향상시키는 변경사항입니다.
tsconfig.json (1)
30-35: 새로운 경로 별칭 추가가 프로젝트 구조 개선에 도움이 됩니다.
@api/*,@util/*,@mypage/*별칭 추가로 임포트 경로가 더 명확하고 일관성 있게 개선됩니다. 이는 코드베이스 전반의 리팩토링을 지원하는 기초적인 변경사항입니다.src/app/shared/types/input.type.ts (1)
1-11: InputProps 인터페이스 정의가 잘 설계되었습니다.React의 기본 HTML 속성을 확장하면서 애플리케이션별 속성들을 적절히 추가했습니다. 필수/선택 필드 구분과 타입 제한이 명확하여 입력 컴포넌트의 타입 안전성을 크게 향상시킬 것입니다.
src/app/features/dashboard/components/edit/EditMember.tsx (1)
3-3: HTTP 클라이언트 임포트 경로 통일이 좋습니다.
@lib/axios에서@api/axios로 변경하여 API 클라이언트 관리를 중앙화하고 라이브러리 유틸리티와 API 클라이언트를 명확히 분리했습니다. 이는 코드베이스 전반의 일관성을 높이는 변경사항입니다.src/app/shared/hooks/useMembers.ts (1)
3-3: 인증 HTTP 클라이언트 import 경로 일관화
authHttpClient를 기존@lib/axios대신@api/axios에서 가져오도록 표준화한 점이 적절합니다.src/app/mydashboard/api/dashboardApi.ts (1)
1-1: HTTP 클라이언트 import 경로 표준화
authHttpClient를@api/axios로 통일해 코드 일관성과 유지보수성을 높인 점을 승인합니다.src/app/features/dashboard_Id/api/fetchCards.ts (1)
1-1: HTTP 클라이언트 import 경로 표준화
authHttpClientimport를@api/axios로 변경해 여러 모듈 간 일관된 사용을 보장한 점이 좋습니다.src/app/features/dashboard_Id/api/postCard.ts (1)
1-1: HTTP 클라이언트 import 경로 표준화
authHttpClient를@api/axios에서 가져오도록 경로를 통일한 변경이 적절합니다.src/app/features/dashboard_Id/api/deleteComment.ts (1)
1-1: HTTP 클라이언트 import 경로 표준화
authHttpClientimport를@api/axios로 일괄 수정해 일관성을 확보한 점을 승인합니다.src/app/features/dashboard_Id/api/fetchColumns.ts (1)
1-1:authHttpClientimport 경로 통일
@api/axios로 변경하여 HTTP 클라이언트 import를 통일했습니다. 해당 alias가tsconfig.json의paths에 올바르게 설정되어 있는지, 컴파일 및 런타임에서 문제없는지 확인해주세요.src/app/features/dashboard_Id/api/fetchComments.ts (1)
1-1:authHttpClientimport 경로 일관성 확보
이전 상대경로 대신@api/axios로 통일됐습니다.tsconfig.json또는 빌드 설정에 해당 alias가 정확히 매핑되어 있는지 검증해주세요.src/app/features/dashboard_Id/api/fetchMembers.ts (1)
1-1: HTTP 클라이언트 import 경로 통일 확인
authHttpClient를@api/axios로 변경함으로써 일관성을 높였습니다. 해당 alias의 설정(예:tsconfig.jsonpaths)이 올바른지 확인 바랍니다.src/app/features/dashboard_Id/api/postComment.ts (1)
1-1:authHttpClientalias 경로 변경 검증
HTTP 요청 모듈 import를@api/axios로 표준화했습니다. 빌드/런타임에서 alias가 문제없이 해석되는지 확인해주세요.src/app/features/dashboard_Id/api/putComment.ts (1)
1-1: HTTP 클라이언트 import 경로 확인
상대 경로 대신@api/axiosalias를 사용해 통일했습니다.tsconfig.json의 alias 매핑 설정을 재확인하고, 관련 CI/CD 빌드가 통과하는지 검증해주세요.src/app/features/dashboard_Id/api/deleteColumn.ts (1)
1-1:authHttpClientimport 경로 표준화
@api/axiosalias를 사용해 HTTP 클라이언트 경로를 통일했습니다. 적절한 변경으로 보입니다.
tsconfig.json의@api/axiosalias 설정이 올바른지 확인해주세요.src/app/shared/components/dashboard/DashboardForm.tsx (1)
3-3: Input 컴포넌트 모듈 경로 업데이트
@components/common/Input/Input로 경로를 변경하여 공통 컴포넌트 구조를 개선했습니다. 적절한 변경입니다.
tsconfig.json의 해당 경로 alias 설정이 올바른지 확인 부탁드립니다.src/app/features/dashboard_Id/api/postCardImage.ts (1)
1-1:authHttpClientimport 경로 표준화
API 모듈 간 일관성을 위해@api/axiosalias로 HTTP 클라이언트를 통일했습니다. 변경 내용은 문제 없어 보입니다.
tsconfig.json의@api/axiosalias가 정확히 등록되었는지 검증해주세요.src/app/features/dashboard_Id/api/deleteCard.ts (1)
1-1:authHttpClientimport 경로 표준화
@api/axiosalias 적용으로 API 호출 경로가 일관화되었습니다. 올바른 리팩토링입니다.
tsconfig.json의 alias 매핑을 재확인해 주세요.src/app/features/dashboard_Id/api/putCard.ts (1)
1-1:authHttpClientimport 경로 표준화
기존 상대 경로 대신@api/axiosalias를 사용하여 HTTP 클라이언트 호출을 일관화했습니다. 적절한 변경입니다.
tsconfig.json에 해당 alias가 정확히 설정되었는지 확인 부탁드립니다.src/app/features/dashboard_Id/api/updateColumn.ts (1)
1-1:authHttpClientimport 경로 일관화
기존 상대 경로에서 새로운 절대 alias(@api/axios)로 변경되어 전체 API 모듈에서 HTTP 클라이언트 import가 통일되었습니다.src/app/features/dashboard_Id/api/updateCardColumn.ts (1)
1-1:authHttpClientimport 경로 업데이트
@api/axiosalias 사용으로 모듈 간 일관성이 유지되며, tsconfig.json 경로 매핑이 올바르게 설정되어 있는지 재확인해주세요.src/app/features/dashboard_Id/api/postColumn.ts (1)
1-1: HTTP 클라이언트 import 표준화
authHttpClient를 절대 alias(@api/axios)로 변경하여 코드베이스 전반의 가독성과 유지보수성이 향상되었습니다.src/app/features/auth/api/authApi.ts (1)
1-1: 인증 API import 경로 통일
인증 관련 API에서도@api/axiosalias를 일관 적용하여 모듈 간 종속성 관리가 깔끔해졌습니다.src/app/(auth)/layout.tsx (1)
7-7: 레이아웃 높이 변경 승인
기존h-full에서h-screen으로 수정하여 뷰포트 전체 높이를 차지하도록 변경되었습니다. 다른 레이아웃 파일과 일관되며, 실제 화면에서 스크롤 및 중앙 정렬이 의도대로 동작하는지 확인해주세요.src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx (2)
3-3: 인증된 HTTP 클라이언트 사용으로 개선됨대시보드 삭제와 같은 민감한 작업에
authHttpClient를 사용하는 것은 보안 측면에서 올바른 접근입니다.
27-29: API 호출 클라이언트 변경 확인됨
authHttpClient.delete사용으로 변경되어 인증이 필요한 대시보드 삭제 작업이 올바르게 처리됩니다.src/app/features/mypage/api/mypageApi.ts (2)
1-1: HTTP 클라이언트 import 경로 표준화
@api/axios로 import 경로를 통일하여 프로젝트 전체의 일관성을 개선했습니다.
12-15: 함수명 개선으로 가독성 향상
loadUser에서fetchUser로 변경하여 더 명확하고 일반적인 네이밍 컨벤션을 따르게 되었습니다.src/app/shared/util/getConfirmPasswordValidation.ts (1)
1-7: React Hook 네이밍 컨벤션 준수
useConfirmPasswordValidation에서getConfirmPasswordValidation으로 변경하여 React Hook 네이밍 규칙을 올바르게 적용했습니다. 이 함수는 hook이 아닌 일반 유틸리티 함수이므로 'get' 접두사가 더 적절합니다.src/app/features/dashboard/components/edit/EditInvitation.tsx (3)
3-3: 인증된 HTTP 클라이언트로 보안 강화초대 관련 기능에
authHttpClient를 사용하여 인증이 필요한 작업의 보안을 강화했습니다.
46-49: 초대 목록 조회 API 클라이언트 변경
authHttpClient.get을 사용하여 인증된 사용자만 초대 목록을 조회할 수 있도록 보안이 강화되었습니다.
69-71: 초대 취소 API 클라이언트 변경
authHttpClient.delete를 사용하여 초대 취소 작업의 보안을 강화했습니다.src/app/shared/hooks/useDashboard.ts (2)
4-4: 대시보드 훅에 인증 클라이언트 적용사용자별 대시보드 데이터를 조회하는 훅에
authHttpClient를 사용하여 적절한 인증 수준을 적용했습니다.
17-19: 대시보드 목록 API 호출 보안 강화
authHttpClient.get을 사용하여 인증된 사용자만 대시보드 목록에 접근할 수 있도록 보안이 강화되었습니다.src/app/features/mypage/util/getNewPasswordValidation.ts (1)
3-3: 함수명 변경이 적절합니다.
useNewPasswordValidation에서getNewPasswordValidation으로 변경한 것이 올바릅니다. React의 hook 명명 규칙에 따르면 "use" 접두사는 실제 hook에만 사용해야 하는데, 이 함수는 validation 객체를 반환하는 utility 함수이므로 현재 명명이 더 적합합니다.src/app/features/mypage/hook/useUserQurey.ts (1)
3-3: API 함수명 변경에 따른 일관성 있는 업데이트입니다.
loadUser에서fetchUser로의 변경과 queryKey 업데이트가 일관성 있게 적용되었습니다. 관련 API 파일에서fetchUser함수가 올바르게 구현되어 있음을 확인했습니다.Also applies to: 7-8
src/app/shared/components/common/header/UserDropdown.tsx (1)
20-24: 상태 동기화를 위한 적절한 처리입니다.
setTimeout을 사용하여 상태 변경이 완료된 후 라우팅을 수행하는 것은 올바른 접근 방식입니다. 주석으로 의도가 명확히 설명되어 있어 유지보수성도 좋습니다. 로그아웃 후 홈페이지('/')로 리다이렉트하는 것도 적절한 UX입니다.src/app/shared/hooks/useDashboardForm.ts (2)
2-2: HTTP 클라이언트 일원화가 적절합니다.인증이 필요한 대시보드 작업에
authHttpClient를 사용하는 것은 올바른 선택입니다.
73-76: 일관성 있는 HTTP 클라이언트 사용이 적용되었습니다.대시보드 생성과 수정 모두에서
authHttpClient를 일관성 있게 사용하고 있어 좋습니다.Also applies to: 79-79
src/app/shared/components/common/sidebar/DashboardItem.tsx (1)
21-32: CSS 클래스 순서 정리 작업 승인합니다.코드 일관성을 위한 CSS 클래스 순서 정리가 잘 되었습니다. 기능적 변경 없이 가독성과 유지보수성이 향상되었습니다.
Also applies to: 36-36
src/app/features/auth/components/LoginForm.tsx (2)
3-4: 새로운 Input 컴포넌트 구조 도입이 적절합니다.Generic Input 컴포넌트에서 전용 PasswordInput 컴포넌트로 분리한 것은 훌륭한 리팩토링입니다. 관심사의 분리와 컴포넌트의 재사용성이 향상되었습니다.
41-48: PasswordInput 컴포넌트 사용으로 개선되었습니다.비밀번호 입력을 위한 전용 컴포넌트 사용으로 코드가 더 명확하고 유지보수하기 쉬워졌습니다.
type="password"prop을 제거하고 내장 기능을 활용하는 것이 적절합니다.src/app/shared/hooks/useDashboardInfinite.ts (1)
3-3: HTTP 클라이언트 일원화 작업이 적절합니다.인증이 필요한 대시보드 API에
authHttpClient를 사용하는 것은 적절한 개선입니다. 클라이언트 역할이 명확해지고 인증 처리가 일관성 있게 적용됩니다.다른 대시보드 관련 파일들에서도 동일한 패턴으로 변경되었는지 확인해보겠습니다:
#!/bin/bash # Description: 대시보드 관련 파일들의 HTTP 클라이언트 사용 패턴 확인 # authHttpClient 사용 현황 확인 echo "=== authHttpClient 사용 현황 ===" rg "authHttpClient" --type ts -A 2 -B 1 echo -e "\n=== 기존 api 클라이언트 잔존 확인 ===" rg "from '@lib/axios'" --type tsAlso applies to: 26-28
src/app/features/dashboard/api/invitation.ts (1)
2-2: 인증 클라이언트 사용이 적절합니다.대시보드 초대 기능은 인증이 필요한 API이므로
authHttpClient사용이 적절합니다. HTTP 클라이언트 일원화 작업이 일관성 있게 적용되었습니다.Also applies to: 10-16
src/app/shared/hooks/useFirstDashboardIdQuery.ts (2)
1-1: 절대 경로 import 표준화 승인HTTP 클라이언트와 auth store의 import 경로를 절대 경로로 변경한 것은 코드베이스 전반의 일관성을 높이는 좋은 변경입니다.
Also applies to: 4-4
13-13: 조건부 쿼리 실행 로직 승인로그인 상태에 따른 조건부 쿼리 실행은 불필요한 API 호출을 방지하는 좋은 접근 방식입니다. 다만 위에서 언급한 상태 접근 방식이 수정되면 더욱 효과적으로 작동할 것입니다.
src/app/shared/components/common/BackButton/BackButton.tsx (2)
6-23: 재사용 가능한 컴포넌트 구현 승인뒤로가기 기능을 재사용 가능한 컴포넌트로 분리한 것은 코드 중복을 줄이고 일관성을 높이는 좋은 접근입니다.
17-17: 이미지 크기 및 접근성 검토 필요이미지의 width={8} height={4} 크기가 매우 작습니다. 사용자 경험을 위해 적절한 크기인지 확인해주세요. 또한 alt 텍스트가 잘 설정되어 있어 접근성 측면에서 좋습니다.
src/app/features/auth/hooks/useLoginMutation.ts (2)
18-20: 환경 변수 검증 추가 승인런타임에서 필수 환경 변수를 검증하는 것은 좋은 방어적 프로그래밍 접근입니다.
31-33: 비동기 상태 처리 개선
setTimeout(0)을 사용하여 상태 업데이트 후 라우팅을 지연하는 것은 상태 반영을 보장하는 좋은 접근입니다.src/app/features/mypage/components/PasswordChangeForm.tsx (3)
1-1: import 경로 표준화 및 컴포넌트 모듈화 승인절대 경로 import 사용과 전용 PasswordInput 컴포넌트 도입은 코드베이스의 일관성과 재사용성을 높이는 좋은 변경입니다.
Also applies to: 3-7
32-37: 검증 로직 리팩토링 승인훅에서 유틸리티 함수로 변경한 것은 더 순수하고 테스트하기 쉬운 구조를 만드는 좋은 접근입니다.
66-72: PasswordInput 컴포넌트 사용 승인모든 비밀번호 필드에 일관되게 PasswordInput 컴포넌트를 사용한 것은 UI 일관성과 보안성을 높이는 좋은 변경입니다.
Also applies to: 74-87, 89-102
src/app/layout.tsx (5)
10-17: 메타데이터 기본 설정 개선 승인metadataBase URL 설정과 다양한 아이콘 경로 추가, 한국어 description 설정은 SEO와 브랜딩 측면에서 좋은 개선입니다.
18-32: Open Graph 메타데이터 추가 승인소셜 미디어 공유 시 표시될 Open Graph 메타데이터가 잘 구성되어 있습니다. 이미지 차원과 alt 텍스트도 적절히 설정되었습니다.
33-39: Twitter 메타데이터 추가 승인Twitter 카드 메타데이터가 적절히 설정되어 소셜 미디어 공유 최적화에 도움이 됩니다.
48-48: 언어 설정 한국어 변경 승인HTML lang 속성을 한국어로 변경한 것은 앱의 주요 언어에 맞는 적절한 설정입니다.
25-25: 배너 이미지 파일 존재 여부 확인 필요주석에서도 언급하고 있듯이
/banner.png파일이 실제로 존재하는지 확인해야 합니다. 존재하지 않는 이미지 경로는 소셜 미디어 공유 시 문제를 일으킬 수 있습니다.다음 스크립트로 이미지 파일 존재 여부를 확인해보세요:
#!/bin/bash # 배너 이미지 파일 존재 여부 확인 if [ -f "public/banner.png" ]; then echo "✅ 배너 이미지 파일이 존재합니다." ls -la public/banner.png else echo "❌ 배너 이미지 파일이 존재하지 않습니다." echo "public 디렉토리의 이미지 파일들:" find public -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" | head -10 fisrc/app/mypage/page.tsx (2)
3-5: 잘 구조화된 import와 컴포넌트 사용입니다.재사용 가능한
BackButton컴포넌트 도입과 절대 경로 별칭 사용으로 코드 가독성과 유지보수성이 향상되었습니다.
10-19: 깔끔하고 직관적인 페이지 구조입니다.복잡한 중첩 레이아웃을 제거하고 단순하고 명확한 구조로 개선되었습니다. 섹션별로 명확한 주석도 포함되어 있어 좋습니다.
src/app/features/mypage/components/ProfileEditForm.tsx (3)
3-8: 절대 경로 별칭 도입으로 import 가독성이 향상되었습니다.
@components,@mypage,@util등의 별칭 사용으로 import 경로가 더 명확하고 유지보수하기 쉬워졌습니다.
114-114: 반응형 레이아웃 개선이 잘 적용되었습니다.
mobile-wide:flex-col tablet-wide:flex-col클래스 추가로 작은 화면에서의 사용자 경험이 개선되었습니다.
128-128: 추가 검증: 프로젝트 전역의 JSX 요소에서readOnly와disabled속성이 함께 사용된 모든 사례를 확인하려면 아래 스크립트를 실행해 보세요.#!/bin/bash # JSX 내 readOnly와 disabled 속성 함께 사용 여부 확인 rg -n "<[A-Za-z0-9_]+[^>]*readOnly[^>]*disabled[^>]*>"src/app/shared/components/common/Input/Input.tsx (4)
8-9: forwardRef 사용으로 참조 전달을 올바르게 구현했습니다.
forwardRef를 사용하여 ref를 underlying input 엘리먼트로 전달할 수 있도록 구현되어 있어, React Hook Form 등과의 통합이 원활합니다.
22-25: 접근성을 고려한 라벨 구현이 우수합니다.
htmlFor와id속성을 통해 라벨과 input이 올바르게 연결되어 있어 스크린 리더 사용자에게 좋은 경험을 제공합니다.
29-33: 조건부 스타일링이 잘 구현되었습니다.
cn유틸리티를 사용한 조건부 클래스 적용과 에러 상태 및 읽기 전용 상태에 따른 적절한 스타일링이 구현되어 있습니다.
41-43: 에러 메시지 표시 로직이 적절합니다.
hasError와errorMessage모두 존재할 때만 에러 메시지를 표시하는 조건문이 정확합니다.src/app/shared/components/common/sidebar/Sidebar.tsx (2)
58-58: 로고 링크 대상 업데이트가 적절합니다.링크 대상을
"/mydashboard"로 변경한 것은 인증 관련 리다이렉트 로직과 일관성을 유지하는 좋은 개선사항입니다.
55-157: CSS 클래스 재정렬로 일관성이 향상되었습니다.반응형 유틸리티 클래스들의 순서를 일관되게 재정렬하여 코드 가독성과 유지보수성이 향상되었습니다. 핵심 기능에는 영향을 주지 않는 좋은 개선사항입니다.
src/app/loading.tsx (1)
8-14: 테마 감지 로직이 깔끔하게 구현되었습니다
useTheme와useMounted훅을 적절히 활용하여 하이드레이션 불일치를 방지하고 테마에 따른 동적 렌더링을 구현했습니다. 시스템 테마 처리도 올바르게 되어 있습니다.src/app/features/auth/components/SignupForm.tsx (3)
3-6: 컴포넌트 분리로 코드 구조가 개선되었습니다
PasswordInput전용 컴포넌트 분리와 유틸리티 함수 사용으로 코드의 재사용성과 유지보수성이 향상되었습니다. 경로 별칭 사용도 적절합니다.
33-33: 비밀번호 검증 로직 개선훅에서 유틸리티 함수로 변경된 비밀번호 확인 검증 로직이 더 깔끔하고 재사용 가능한 구조로 개선되었습니다.
64-82: PasswordInput 컴포넌트 적용 완료비밀번호 필드들이 전용
PasswordInput컴포넌트로 교체되어 일관된 UI와 기능을 제공합니다.type="password"프로퍼티 제거도 적절합니다.src/app/error.tsx (2)
8-14: 테마 감지 구현이 다른 컴포넌트와 일관됩니다
Loading과NotFound컴포넌트와 동일한 패턴으로 테마 감지 및 하이드레이션 안전성을 구현했습니다.
50-59: 유연한 리셋 기능 구현
reset콜백이 제공되면 사용하고, 그렇지 않으면 브라우저 히스토리 백으로 폴백하는 로직이 잘 구현되었습니다.src/app/shared/components/common/Input/PasswordInput.tsx (2)
9-25: forwardRef 패턴과 상태 관리가 올바르게 구현되었습니다Ref 전달을 위한
forwardRef사용과 비밀번호 표시/숨김을 위한 상태 관리가 깔끔하게 구현되었습니다. 타입 안전성도 잘 확보되어 있습니다.
69-71: displayName 설정으로 디버깅 편의성 확보컴포넌트에
displayName설정으로 React DevTools에서의 디버깅 편의성을 높였습니다.src/app/not-found.tsx (4)
7-14: 일관된 테마 구현 패턴다른 UI 피드백 컴포넌트들(
Loading,Error)과 동일한 테마 감지 및 클라이언트 사이드 렌더링 패턴을 사용하여 일관성을 유지했습니다.
23-31: 적절한 로고 크기와 우선순위 로딩404 페이지에 맞는 적절한 로고 크기(size-300)와
priority설정으로 사용자 경험을 최적화했습니다.
39-49: 한국어 현지화와 명확한 메시지"404 Not Found"와 "요청하신 페이지를 찾을 수 없습니다" 메시지로 사용자에게 명확한 상황 설명을 제공합니다.
50-59: 직관적인 네비게이션 버튼"이전 페이지로" 버튼과
window.history.back()기능으로 사용자가 쉽게 이전 페이지로 돌아갈 수 있도록 했습니다.src/app/mydashboard/page.tsx (1)
16-16: CSS 클래스 순서 정리가 잘 되었습니다.기본 스타일을 먼저 배치하고 반응형 수정자를 나중에 배치하는 방식으로 Tailwind CSS 클래스를 정리한 것이 코드 일관성과 가독성 향상에 도움이 됩니다.
Also applies to: 21-21, 25-26
src/app/shared/components/Redirect.tsx (4)
23-25: 중복 계산을 제거하는 좋은 리팩토링입니다.
isRoot와isPublic플래그를 도입하여 pathname 비교를 반복하지 않도록 개선한 것이 성능과 가독성 향상에 도움이 됩니다.
18-19: 리다이렉트 중복 방지 로직이 잘 구현되었습니다.
redirecting상태와prevPathref를 활용하여 중복 리다이렉트를 방지하고 경로 변경 시 상태를 적절히 초기화하는 로직이 견고합니다.Also applies to: 27-33
39-67: 명확한 케이스 분리로 리다이렉트 로직이 개선되었습니다.5가지 케이스를 명시적으로 분리하고 early return을 활용하여 로직의 가독성과 유지보수성이 크게 향상되었습니다. 각 케이스별 주석도 이해를 돕습니다.
79-80: 깜빡임 방지 로직이 적절히 구현되었습니다.루트 경로는 즉시 렌더링을 허용하고 다른 경로는 마운트 후 렌더링하도록 하여 사용자 경험을 개선한 것이 좋습니다.
src/app/features/mypage/components/ProfileImageUpload.tsx (4)
11-11: 인터페이스 이름이 더 명확해졌습니다.
Props에서ProfileImageUploadProps로 변경하여 컴포넌트별 타입의 구분이 명확해졌습니다.Also applies to: 21-21
24-24: 호버 상태 관리가 잘 구현되었습니다.
isHover상태를 도입하여 사용자 인터랙션에 대한 시각적 피드백을 개선하고, 함수 선언 방식을 일관되게 통일한 것이 좋습니다.Also applies to: 32-49, 52-60
62-83: 크로스 플랫폼 이벤트 처리가 훌륭합니다.데스크톱의 호버와 모바일의 터치 이벤트를 구분하여 처리하고, 미디어 쿼리를 활용해 충돌을 방지한 구현이 매우 전문적입니다.
91-107: 동적 스타일링이 효과적으로 적용되었습니다.CSS의
group-hover대신 상태 기반 스타일링을 사용하여 더 정확한 제어가 가능해졌고,cn유틸리티를 활용한 조건부 클래스 적용이 깔끔합니다.
1 participant
📌 변경 사항 개요
✨ 요약
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷
✅ 체크리스트
💡 참고 사항
Summary by CodeRabbit
신규 기능
버그 수정
리팩터
문서화
기타