✨Feat: 공통 사용자 프로필 구현 #40
Conversation
…o feature/Profile
…o feature/Profile
Walkthrough새로운 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Header
participant Profile
User->>Header: 페이지 접근
Header->>Profile: nickname, imageUrl, size 전달
Profile-->>Header: 프로필 UI 반환
Header-->>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: 3
🧹 Nitpick comments (4)
src/app/globals.css (1)
31-33: 이름-의미 불일치:.Text-white클래스가 다크모드에서 흰색이 아님
.Text-white라는 네이밍은 “항상 흰색 텍스트”를 기대하게 만드는데, 다크모드에서는#333236(짙은 회색)으로 설정되어 있습니다.
향후 유지보수를 위해 네이밍을 수정하거나 다크모드에서도 흰색을 유지하도록 색상을 맞춰 주세요.src/app/shared/lib/cn.ts (1)
4-6: 가변 인자 전달 시 배열 대신 전개 연산자 사용 권장
clsx는 rest 파라미터를 받습니다. 배열을 넘겨도 동작하지만, 의도 전달력과 타입 추론을 위해 전개 연산자를 사용하는 편이 좋습니다.-return twMerge(clsx(inputs)) +return twMerge(clsx(...inputs))src/app/shared/components/common/Profile.tsx (1)
65-78: 루트 엘리먼트가 없어 레이아웃 제어가 어려움이미지 미보유 분기에서
<></>프래그먼트로 2개의 형제 요소를 반환하고 있습니다.
헤더 등에서 정렬하려면 상위 래퍼(div.flex.items-center.gap-4등)로 감싸는 편이 안정적입니다.src/app/shared/components/common/header/Header.tsx (1)
64-65: 불필요한 구분 기호|문자 노출
|{/* 내 프로필 이미지 */}구문으로 인해 실제 화면에|가 그대로 렌더링됩니다. 의도된 디자인이 아니라면 제거해주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/app/globals.css(1 hunks)src/app/shared/components/common/Profile.tsx(1 hunks)src/app/shared/components/common/header/Header.tsx(5 hunks)src/app/shared/lib/cn.ts(1 hunks)tsconfig.json(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/app/shared/components/common/header/Header.tsx (2)
src/app/shared/lib/cn.ts (1)
cn(4-6)src/app/shared/components/common/Profile.tsx (1)
Profile(46-80)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: eslint-check
🔇 Additional comments (2)
tsconfig.json (1)
28-30: 경로 별칭 추가 시 ESLint/VSCode 설정도 동기화 필요
"@lib/*"별칭을 추가하셨는데, ESLint(import/resolver)와 VSCodepaths설정이 함께 갱신되지 않으면 IDE에서 경로를 인식하지 못해 경고가 발생할 수 있습니다. 확인 부탁드립니다.src/app/shared/components/common/header/Header.tsx (1)
44-47:rounded-6는 Tailwind 기본 클래스가 아닙니다Tailwind 3.x 기준으로는
rounded-[6px]나rounded-md등을 사용해야 합니다.
커스텀 플러그인을 사용하지 않는다면 클래스명이 무시됩니다.
| import { clsx, type ClassValue } from 'clsx' | ||
| import { twMerge } from 'tailwind-merge' | ||
|
|
There was a problem hiding this comment.
clsx 기본-/명명형 가져오기 오류로 런타임 예외 발생
clsx 는 default export 입니다. 현재 형태로는 clsx 가 undefined 가 되어 twMerge(undefined) 호출 시 크리티컬 런타임 오류가 납니다.
-import { clsx, type ClassValue } from 'clsx'
+import clsx, { type ClassValue } from 'clsx'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { clsx, type ClassValue } from 'clsx' | |
| import { twMerge } from 'tailwind-merge' | |
| import clsx, { type ClassValue } from 'clsx' | |
| import { twMerge } from 'tailwind-merge' |
🤖 Prompt for AI Agents
In src/app/shared/lib/cn.ts at lines 1 to 3, the import of clsx is incorrect
because clsx is a default export, not a named export. This causes clsx to be
undefined and leads to a runtime error when calling twMerge(clsx). Fix this by
importing clsx as the default import without curly braces, ensuring clsx is
properly defined before passing it to twMerge.
| return imageUrl ? ( | ||
| // 프로필 이미지가 있을 때 | ||
| <div className="flex items-center gap-4"> | ||
| <div className="relative size-48 overflow-hidden rounded-full"> | ||
| <Image | ||
| src="/images/profile.gif" | ||
| fill | ||
| alt="프로필 이미지" | ||
| className="size-full object-cover" | ||
| /> | ||
| </div> | ||
| <span className="text-sm font-semibold">사용자</span> | ||
| </div> |
There was a problem hiding this comment.
imageUrl 프롭이 실제로 사용되지 않음
imageUrl 을 받아 놓고 하드코딩된 "/images/profile.gif" 를 렌더링하고 있어 기능이 동작하지 않습니다.
- <Image
- src="/images/profile.gif"
+ <Image
+ src={imageUrl}또한 표시되는 이름이 "사용자" 로 고정되어 있어 nickname 과 불일치합니다.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return imageUrl ? ( | |
| // 프로필 이미지가 있을 때 | |
| <div className="flex items-center gap-4"> | |
| <div className="relative size-48 overflow-hidden rounded-full"> | |
| <Image | |
| src="/images/profile.gif" | |
| fill | |
| alt="프로필 이미지" | |
| className="size-full object-cover" | |
| /> | |
| </div> | |
| <span className="text-sm font-semibold">사용자</span> | |
| </div> | |
| return imageUrl ? ( | |
| // 프로필 이미지가 있을 때 | |
| <div className="flex items-center gap-4"> | |
| <div className="relative size-48 overflow-hidden rounded-full"> | |
| <Image | |
| - src="/images/profile.gif" | |
| + src={imageUrl} | |
| fill | |
| alt="프로필 이미지" | |
| className="size-full object-cover" | |
| /> | |
| </div> | |
| <span className="text-sm font-semibold">사용자</span> | |
| </div> |
🤖 Prompt for AI Agents
In src/app/shared/components/common/Profile.tsx around lines 50 to 62, the
imageUrl prop is not used and the profile image source is hardcoded to
"/images/profile.gif". Replace the hardcoded src with the imageUrl prop to
correctly display the passed profile image. Also, update the displayed name from
the fixed string "사용자" to use the nickname prop so the rendered name matches the
user's nickname.
| <button onClick={goToMypage} className="text-xs"> | ||
| 마이페이지 | ||
| </button> | ||
| <button onClick={logout} className="text-xs"> | ||
| <button onClick={goToMypage} className="text-xs"> | ||
| 로그아웃 | ||
| </button> |
There was a problem hiding this comment.
로그아웃 버튼이 실제 로그아웃을 수행하지 않음
onClick={goToMypage} 로 연결되어 있어 ‘마이페이지’ 와 동일한 동작을 합니다. 로그아웃 로직(세션 제거, redirect 등)을 별도 함수로 분리해 연결해야 합니다.
🤖 Prompt for AI Agents
In src/app/shared/components/common/header/Header.tsx around lines 67 to 72, the
logout button incorrectly uses the goToMypage function for its onClick handler,
causing it to perform the same action as the My Page button. Create a separate
logout handler function that performs the logout logic such as clearing the
session and redirecting the user, then assign this new function to the logout
button's onClick event.
📌 변경 사항 개요
✨ 요약
공통 사용자 프로필 구현 및 추가 사항 반영
📝 상세 내용
🐛Fix: 파일명 변경 사항 미반영 에러 수정
🔧Chore: lib 사용을 위한 alias 설정 추가
🎨Style:
✨Feat:
🔗 관련 이슈
🖼️ 스크린샷
✅ 체크리스트
💡 참고 사항
src/app/shared/lib/cn.ts파일의 clsx + twMerge 방식 반영하여 사용하시면 될 것 같습니다!!Summary by CodeRabbit
신규 기능
.Text-white텍스트 색상 유틸리티 클래스가 추가되었습니다.리팩터링
환경 설정
@lib/*가 추가되어 라이브러리 경로 사용이 편리해졌습니다.