feat: header UI 추가 #9
Conversation
chore : 환경 세팅
fix: 폴더 이동시키기
fix: 레포지토리 이름 수정
chore: 이슈 닫기 워크플로우 추가
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughThis PR introduces a new header component with navigation and integrates it into the main application layout through a MainLayout wrapper. It adds a Header component with logo, navigation menu items, and action icons, along with a NavItem sub-component for individual navigation links, and updates TypeScript configuration to include Next.js generated type files. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Router as Next.js Router
participant MainLayout
participant Header
participant NavItem
User->>Router: Navigate to route
Router->>MainLayout: Render with pathname context
MainLayout->>Header: Mount Header component
Header->>Header: Call usePathname() to get current path
loop For each NAV item
Header->>NavItem: Render with href, label, active state
Note over NavItem: Determine if href matches pathname<br/>("/" → exact match, others → startsWith)
NavItem->>NavItem: Apply active or inactive styles
end
NavItem-->>Header: Render styled link
Header-->>User: Display navigation bar with active indicator
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
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. Comment |
Summary of ChangesHello @bini0918, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 애플리케이션의 핵심 헤더 UI를 구현하여 사용자 인터페이스의 기반을 마련합니다. 로고, 주요 내비게이션 링크, 그리고 검색, 알림, 프로필과 같은 사용자 액션 아이콘을 포함하는 헤더가 추가되었습니다. 또한, 새로운 레이아웃 구조를 도입하고 필요한 SVG 에셋을 추가하여 향후 페이지 개발을 위한 준비를 마쳤습니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
헤더 UI를 추가하는 PR 잘 보았습니다. 전반적으로 Next.js와 Tailwind CSS를 사용하여 깔끔하게 컴포넌트를 구성해주셨습니다. 몇 가지 코드의 유지보수성과 재사용성을 높일 수 있는 부분을 중심으로 리뷰를 남겼습니다. 하드코딩된 스타일 값을 tailwind.config.js로 옮겨 관리하는 것과, 반복되는 아이콘 링크를 데이터 기반으로 렌더링하여 가독성과 접근성을 개선하는 방안을 제안드렸습니다. 피그마 화면 크기에 맞춰 w-[1440px]로 작업하신 부분은 좋은 접근 방식이며, 이 값을 테마 설정에 추가하면 프로젝트 전반에서 일관되게 사용할 수 있어 더욱 좋을 것 같습니다. 앞으로의 작업도 기대하겠습니다!
| <header className="w-full bg-[#7B6154]"> | ||
| <div className="mx-auto w-full max-w-[1440px] px-3 py-7"> |
There was a problem hiding this comment.
하드코딩된 스타일 값(bg-[#7B6154], max-w-[1440px])을 사용하고 있습니다. 이러한 값들을 tailwind.config.js에 테마 값으로 등록하여 사용하면 일관성을 유지하고 재사용하기 용이해집니다.
예를 들어, tailwind.config.js에 다음과 같이 추가할 수 있습니다:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#7B6154',
},
maxWidth: {
'desktop': '1440px',
}
},
},
// ...
}이렇게 하면 코드에서는 bg-brand-primary, max-w-desktop과 같이 의미 있는 클래스 이름을 사용할 수 있어 가독성과 유지보수성이 향상됩니다.
| {/*아이콘*/} | ||
| <div className="flex items-center gap-4"> | ||
| <Link href="/search" aria-label="검색" className="relative h-6 w-6"> | ||
| <Image | ||
| src="/search.svg" | ||
| alt="" | ||
| fill | ||
| className="object-contain" | ||
| priority | ||
| /> | ||
| </Link> | ||
|
|
||
| <Link | ||
| href="/notification" | ||
| aria-label="알림" | ||
| className="relative h-6 w-6" | ||
| > | ||
| <Image | ||
| src="/notification.svg" | ||
| alt="" | ||
| fill | ||
| className="object-contain" | ||
| priority | ||
| /> | ||
| </Link> | ||
|
|
||
| <Link | ||
| href="/profile" | ||
| aria-label="프로필" | ||
| className="relative h-6 w-6" | ||
| > | ||
| <Image | ||
| src="/profile.svg" | ||
| alt="" | ||
| fill | ||
| className="object-contain" | ||
| priority | ||
| /> | ||
| </Link> | ||
| </div> |
There was a problem hiding this comment.
아이콘 링크들이 반복적으로 작성되어 있고, 이미지에 alt 속성이 비어있습니다. 가독성, 유지보수성, 접근성을 개선하기 위해 아이콘 링크 데이터를 배열로 관리하고 map을 사용해 렌더링하는 것을 권장합니다. 또한, 이미지가 로드되지 않거나 스크린 리더 사용자를 위해 각 이미지에 의미 있는 alt 텍스트를 추가해야 합니다.
{/*아이콘*/}
<div className="flex items-center gap-4">
{[
{ href: "/search", label: "검색", src: "/search.svg" },
{ href: "/notification", label: "알림", src: "/notification.svg" },
{ href: "/profile", label: "프로필", src: "/profile.svg" },
].map((icon) => (
<Link
key={icon.href}
href={icon.href}
aria-label={icon.label}
className="relative h-6 w-6"
>
<Image
src={icon.src}
alt={`${icon.label} 아이콘`}
fill
className="object-contain"
priority
/>
</Link>
))}
</div>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/components/layout/NavItem.tsx (1)
9-28: Consider using a className utility for cleaner conditional styling.The
array.join(" ")pattern works but is verbose. Consider using a utility likeclsxorcn(classnames helper) for more maintainable conditional className construction.📘 Example refactor using clsx
First, install clsx:
npm install clsxThen refactor the component:
+import clsx from 'clsx'; import Link from "next/link"; interface NavItemProps { href: string; label: string; active: boolean; } export function NavItem({ href, label, active }: NavItemProps) { return ( <Link href={href} - className={[ - "flex w-32 items-center justify-center gap-2.5 p-2.5", - active ? "border-b-2 border-white" : "border-b-2 border-transparent", - ].join(" ")} + className={clsx( + "flex w-32 items-center justify-center gap-2.5 p-2.5 border-b-2", + active ? "border-white" : "border-transparent" + )} > <span - className={[ - "text-center text-xl font-semibold leading-7", - active ? "text-white" : "text-gray-200", - ].join(" ")} + className={clsx( + "text-center text-xl font-semibold leading-7", + active ? "text-white" : "text-gray-200" + )} > {label} </span> </Link> ); }src/components/layout/Header.tsx (1)
19-32: Consider moving hard-coded color to theme configuration.The arbitrary color value
bg-[#7B6154]works but could be defined in your Tailwind theme for better maintainability and consistency across the application.Regarding the
max-w-[1440px]width you mentioned in the PR description: this approach is acceptable for matching a fixed design width, though you may want to consider responsive breakpoints for smaller screens in future iterations.💡 Example: Adding to Tailwind theme
In
tailwind.config.ts:export default { theme: { extend: { colors: { brand: { brown: '#7B6154', }, }, }, }, };Then use it as:
-<header className="w-full bg-[#7B6154]"> +<header className="w-full bg-brand-brown">
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
public/logo.svgis excluded by!**/*.svgpublic/notification.svgis excluded by!**/*.svgpublic/profile.svgis excluded by!**/*.svgpublic/search.svgis excluded by!**/*.svg
📒 Files selected for processing (6)
src/app/(main)/layout.tsxsrc/app/(main)/page.tsxsrc/app/page.backup.tsxsrc/components/layout/Header.tsxsrc/components/layout/NavItem.tsxtsconfig.json
🧰 Additional context used
🧬 Code graph analysis (2)
src/app/(main)/layout.tsx (1)
src/components/layout/Header.tsx (1)
Header(15-97)
src/components/layout/Header.tsx (1)
src/components/layout/NavItem.tsx (1)
NavItem(9-28)
🔇 Additional comments (9)
tsconfig.json (1)
4-43: LGTM! Standard Next.js TypeScript configuration improvements.The formatting changes improve readability, and including
.next/types/**/*.tsaligns with Next.js 15+ conventions for TypeScript type generation.src/components/layout/NavItem.tsx (1)
1-7: LGTM! Clean prop interface.The interface is well-defined with appropriate types for the navigation item component.
src/app/(main)/page.tsx (1)
1-3: LGTM! Placeholder for upcoming home screen implementation.The empty component serves as a valid placeholder, aligning with the PR's stated plan to implement the home screen in a follow-up.
src/app/(main)/layout.tsx (1)
1-11: LGTM! Clean layout composition.The MainLayout correctly integrates the new Header component and follows Next.js 15+ layout conventions.
src/components/layout/Header.tsx (5)
1-6: LGTM! Correct client directive and imports.The
"use client"directive is properly placed for theusePathnamehook usage, and all imports are appropriate for the header implementation.
8-13: LGTM! Well-structured navigation data.The navigation items are clearly defined with appropriate labels and routes.
34-50: LGTM! Correct active state logic.The navigation active state handling properly addresses the common edge case where "/" would match all routes. The special condition ensures the home item only activates on the exact "/" path while other items use prefix matching.
54-92: LGTM! Excellent accessibility implementation.The icon links properly use
aria-labelattributes with emptyalt=""on images, which is the correct WCAG pattern when the link itself is labeled. Thepriorityflag on these above-the-fold images is also appropriate.
24-91: All required image assets (logo.svg,search.svg,notification.svg,profile.svg) are present in thepublicdirectory. No action needed.
💡 To Reviewers
🔥 작업 내용 (가능한 구체적으로 작성해 주세요)
🤔 추후 작업 예정
📸 작업 결과 (스크린샷)
🔗 관련 이슈
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.