✨Feat: AuthLogo 컴포넌트 구현 #46
Conversation
Walkthrough새로운 React 함수형 컴포넌트 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AuthLogo(Component)
participant ThemeProvider
participant NextImage
participant NextLink
User->>AuthLogo: text prop 전달
AuthLogo->>ThemeProvider: 현재 테마 조회
ThemeProvider-->>AuthLogo: 'dark' 또는 'light' 반환
AuthLogo->>NextImage: 테마에 따라 로고 이미지 선택
AuthLogo->>NextLink: "/" 링크로 로고 감싸기
AuthLogo->>User: 로고와 텍스트 렌더링
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! ✨ 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: 2
🧹 Nitpick comments (1)
src/app/features/auth/components/AuthLogo.tsx (1)
11-15:resolvedTheme초기값으로 인한 FOUC(Flash of Unstyled Content) 가능성
useTheme()가 클라이언트-사이드에서만 값을 설정하므로, 첫 렌더링 시resolvedTheme가undefined일 수 있습니다. 그 경우 라이트 로고가 잠깐 표시됐다가 다크로 바뀌는 화면 번쩍임이 발생할 수 있습니다.isMounted플래그로 초기 렌더를 건너뛰거나,resolvedTheme ? … : null방식으로 처리해 깔끔한 전환을 보장해 주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/logo-dark.svgis excluded by!**/*.svg
📒 Files selected for processing (1)
src/app/features/auth/components/AuthLogo.tsx(1 hunks)
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/app/features/auth/components/AuthLogo.tsx (3)
11-15: 테마 감지 로직
useTheme훅의resolvedTheme을 기반으로isDark플래그를 설정하는 로직이 직관적입니다.- 초기 hydration 시
resolvedTheme가undefined가 될 수 있어 테마 플래시(FOUC)를 방지하려면 마운트 여부를 체크하는 추가 로직도 고려해보세요.
17-26: 이미지 최적화 사용
fill과priority속성으로 LCP 개선을 잘 처리했습니다.- 추가로
placeholder="blur"와blurDataURL설정을 적용하면 로고 로딩 UX가 더욱 부드러워집니다.
11-30: 접근성과 테스트 보강 제안
- alt 텍스트(
"CoPlan 로고")를 언어별로 분리하거나 prop으로 전달해 i18n을 지원할 수 있습니다.- React Testing Library와 Jest를 활용해 컴포넌트 스냅샷 및 렌더링 검증 테스트를 추가하면 안정성이 높아집니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/logo-dark.svgis excluded by!**/*.svg
📒 Files selected for processing (1)
src/app/features/auth/components/AuthLogo.tsx(1 hunks)
🔇 Additional comments (2)
src/app/features/auth/components/AuthLogo.tsx (2)
1-5: 클라이언트 컴포넌트 선언 및 임포트 구성 적절
- 'use client' 지시자로 컴포넌트를 클라이언트 전용으로 지정했고,
next/image,next/link,next-themes임포트 순서도 깔끔합니다.
7-9: Props 타입 선언이 명확합니다
AuthLogoProps인터페이스로textprop의 타입을 강제해 타입 안전성을 보장합니다.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/app/features/auth/components/AuthLogo.tsx (2)
11-15: 초기 테마 로딩 처리 고려 필요
resolvedTheme은 클라이언트 마운트 후에야 결정되므로, 초기 렌더링 시undefined로 나타나 플래시(flash)가 발생할 수 있습니다. 로고가 깜빡거리는 UX를 방지하려면if (!resolvedTheme) return null;또는 로딩 스켈레톤 처리를 검토하세요.
17-26: 정적 이미지 import 활용 제안
문자열 경로 대신public폴더에서 로고 SVG를 직접 import하면 타입 안전성과 번들링 최적화를 얻을 수 있습니다. 예를 들어:-import Image from 'next/image' +import Image from 'next/image' +import darkLogo from 'public/images/logo-dark.svg' +import lightLogo from 'public/images/logo-light.svg' ... - <Image - src={isDark ? '/images/logo-dark.svg' : '/images/logo-light.svg'} + <Image + src={isDark ? darkLogo : lightLogo} ...이렇게 변경하면 빌드 타임에 이미지 크기도 자동으로 추출됩니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/logo-dark.svgis excluded by!**/*.svg
📒 Files selected for processing (1)
src/app/features/auth/components/AuthLogo.tsx(1 hunks)
🔇 Additional comments (2)
src/app/features/auth/components/AuthLogo.tsx (2)
1-5: 'use client' 지시어 및 import 확인
'AuthLogo'가 클라이언트 컴포넌트로 동작하도록'use client'를 잘 선언하셨습니다.next/image,next/link,next-themes의 import 순서도 적절합니다.
7-9: Props 타입 정의가 명확합니다
AuthLogoProps에서text: string을 명시하신 부분이 간결하고 이해하기 쉽습니다. 불필요한 prop이 없고 확장성도 좋습니다.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/app/features/auth/components/AuthLogo.tsx (1)
11-15:resolvedTheme초기값 처리 및 FOUC 방지 고려 필요
resolvedTheme가 클라이언트 마운트 이전에undefined가 될 수 있어 잠재적 플리커(Flicker)가 발생할 수 있습니다. 마운트 완료 후 렌더링하거나 기본 테마를 설정해 초기값을 고정하는 로직(useEffect+mounted상태,resolvedTheme ?? 'light'등) 도입을 권장합니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/logo-dark.svgis excluded by!**/*.svg
📒 Files selected for processing (1)
src/app/features/auth/components/AuthLogo.tsx(1 hunks)
🔇 Additional comments (4)
src/app/features/auth/components/AuthLogo.tsx (4)
1-6: 초기 설정 및 의존성 임포트: 적절합니다
'use client' 디렉티브와next/image,next/link,next-themes훅의 임포트 구성이 올바릅니다.
7-9: Props 인터페이스 선언이 명확합니다
AuthLogoProps는text: string으로 잘 정의되어 있으며, 컴포넌트 사용 시 타입 안정성을 보장합니다.
17-18: 레이아웃 컨테이너 및 링크 구조: 적절합니다
flex레이아웃과relative컨테이너를 활용해 이미지가 올바르게fill되는 구조를 잘 구성했습니다.
19-25:next/image사용 최적화
fill,priority,object-contain조합으로 로고를 최적화했습니다. 동적src(public/images/...) 사용도 허용되는 패턴입니다.
dkslel1225
left a comment
dkslel1225
left a comment
There was a problem hiding this comment.
테마 상태를 가져와서 체크하면 되는군여, 구현 수고하셨습니다! 로그인 회원가입 페이지에서 로고 밑에 텍스트 들어간다는 걸 지금 알았네요 ㅋㅋㅋ
LeeCh0129
left a comment
LeeCh0129
left a comment
There was a problem hiding this comment.
고생많으셨습니다~ 깔끔하네요👍
resolovedTheme를 사용해서 적용된 테마 상태를 가져오는 것?도 좋구요!
yuj2n
left a comment
yuj2n
left a comment
There was a problem hiding this comment.
인성님 인증 로고 컴포넌트 구현 수고하셨습니다!!
| } | ||
|
|
||
| export default function AuthLogo({ text }: AuthLogoProps): JSX.Element { | ||
| const { resolvedTheme } = useTheme() |
There was a problem hiding this comment.
next-themes의 useTheme 훅으로 resolvedTheme 문자열을 가져올 수 있군용!!
📌 변경 사항 개요
✨ 요약
📝 상세 내용
resolvedTheme을 통하여 현재 브라우저에 실제로 적용된 최종 테마 상태 값을 받아와서 조건부로src경로를 바꿀 수 있게 구현했습니다.props로text를 받아와서 하단부에 텍스트를 작성할 수 있게 구현했습니다.🔗 관련 이슈
#45
🖼️ 스크린샷
light-mode
dark-mode
✅ 체크리스트
💡 참고 사항
Summary by CodeRabbit