[design] 마이페이지 퍼블리싱 #32
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 4 commits
January 10, 2025 01:06
Closed
Walkthrough이 풀 리퀘스트는 사용자 프로필, 주문 이력, 개인정보 수정 등과 관련된 여러 페이지와 컴포넌트를 추가하는 변경 사항을 포함하고 있습니다. Changes
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 8
🧹 Nitpick comments (8)
src/app/(user)/profile/page.tsx (1)
5-5: 컴포넌트 구조를 개선해주세요
- 컴포넌트 이름을 'App'에서 'ProfilePage'로 변경하여 목적을 명확히 해주세요.
- 빈 return문은
return null로 명시적으로 표현해주세요.-const App = () => { +const ProfilePage = () => { const router = useRouter() useEffect(() => { router.replace('/profile/editInfo') }, []) - return + return null }Also applies to: 10-11
src/app/_components/ui/banner/Banner.tsx (1)
Line range hint
11-15: 접근성 개선이 필요합니다배너 컴포넌트에 적절한 ARIA 레이블과 역할을 추가하여 스크린 리더 사용자의 접근성을 향상시켜주세요.
- <div className="flex h-[200px] w-full items-center justify-center bg-blue-primary text-white"> + <div + role="banner" + aria-label="메인 배너" + className="flex h-[200px] w-full items-center justify-center bg-blue-primary text-white" + >src/app/(user)/profile/layout.tsx (1)
17-20: 인라인 스타일을 Tailwind 클래스로 변경해주세요인라인 스타일 대신 Tailwind의 pt-20 클래스를 사용하면 일관된 스타일링이 가능합니다.
<main className="flex-1 overflow-hidden bg-blue-secondary" - style={{ paddingTop: '80' }} + className="flex-1 overflow-hidden bg-blue-secondary pt-20" >src/app/(user)/layout.tsx (1)
14-17: 스타일 관련 매직 넘버를 상수화하는 것을 고려해보세요z-index와 padding-top 값을 상수나 CSS 변수로 추출하면 유지보수성이 향상될 것 같습니다.
다음과 같은 방식을 제안합니다:
+ // 상단에 상수 추가 + const HEADER_HEIGHT = '90px' + const HEADER_Z_INDEX = 50 <div className="relative flex min-h-screen flex-col"> - <div className="fixed left-0 top-0 z-50 w-full"> + <div className={`fixed left-0 top-0 z-[${HEADER_Z_INDEX}] w-full`}> <Header type="default" /> </div> - <main className="flex-1 overflow-hidden" style={{ paddingTop: '90px' }}> + <main className="flex-1 overflow-hidden" style={{ paddingTop: HEADER_HEIGHT }}>또는 CSS 변수를 사용하는 방법:
:root { --header-height: 90px; --header-z-index: 50; }src/app/_components/ui/OrderCard.tsx (3)
21-24: 진행 단계를 동적으로 관리하는 것이 좋겠습니다현재 하드코딩된 진행 단계를 동적으로 관리할 수 있도록 개선이 필요합니다.
다음과 같은 개선을 제안합니다:
+ const DELIVERY_STAGES = ['발송완료', '업체도착', '스캔진행', '작업완료'] as const + type DeliveryStage = typeof DELIVERY_STAGES[number] + + interface OrderInfo { + // ... 기존 필드들 + currentStage: DeliveryStage + } <nav className="mb-4 text-sm text-gray-500"> - 발송완료 > 업체도착 > 스캔진행 >{' '} - <span className="text-blue-500">작업완료</span> + {DELIVERY_STAGES.map((stage, index) => ( + <React.Fragment key={stage}> + <span className={stage === data.currentStage ? 'text-blue-500' : ''}> + {stage} + </span> + {index < DELIVERY_STAGES.length - 1 && ' > '} + </React.Fragment> + ))} </nav>
62-67: 중복된 버튼 스타일을 컴포넌트로 분리하면 좋겠습니다동일한 스타일이 적용된 버튼이 반복되고 있습니다.
다음과 같은 개선을 제안합니다:
+ const OrderButton = ({ children }: { children: React.ReactNode }) => ( + <button className="border-1 h-[38px] w-[262px] rounded border border-blue-500 px-4 py-2 text-blue-500 transition hover:bg-blue-50"> + {children} + </button> + ) <div className="space-x-2"> - <button className="border-1 h-[38px] w-[262px] rounded border border-blue-500 px-4 py-2 text-blue-500 transition hover:bg-blue-50"> - 배송조회 - </button> - <button className="border-1 h-[38px] w-[262px] rounded border border-blue-500 px-4 py-2 text-blue-500 transition hover:bg-blue-50"> - 주문 상세 - </button> + <OrderButton>배송조회</OrderButton> + <OrderButton>주문 상세</OrderButton> </div>
58-60: 가격 포맷팅을 더 견고하게 처리하면 좋겠습니다
toLocaleString()만으로는 다양한 로케일과 통화 형식을 처리하기에 충분하지 않을 수 있습니다.다음과 같은 개선을 제안합니다:
+ const formatPrice = (price: number) => { + return new Intl.NumberFormat('ko-KR', { + style: 'currency', + currency: 'KRW', + maximumFractionDigits: 0 + }).format(price) + } <div className="text-lg font-bold text-red-500"> - {data.price.toLocaleString()}원 + {formatPrice(data.price)} </div>src/app/(user)/profile/(order)/orderHistory/page.tsx (1)
94-96: 배열 인덱스를 key로 사용하고 있습니다.React의 재조정(reconciliation) 과정에서 문제가 발생할 수 있으므로, 주문번호와 같은 고유한 값을 key로 사용하는 것이 좋습니다.
-<OrderCard key={idx} data={order} /> +<OrderCard key={order.orderNumber} data={order} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
package.json(1 hunks)src/app/(user)/layout.tsx(2 hunks)src/app/(user)/privacy/page.tsx(1 hunks)src/app/(user)/profile/(order)/orderHistory/page.tsx(1 hunks)src/app/(user)/profile/(userInfo)/changePassword/page.tsx(1 hunks)src/app/(user)/profile/(userInfo)/editInfo/page.tsx(1 hunks)src/app/(user)/profile/(userInfo)/layout.tsx(1 hunks)src/app/(user)/profile/(userInfo)/page.tsx(1 hunks)src/app/(user)/profile/layout.tsx(1 hunks)src/app/(user)/profile/page.tsx(1 hunks)src/app/_components/ui/OrderCard.tsx(1 hunks)src/app/_components/ui/banner/Banner.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/app/(user)/profile/(userInfo)/layout.tsx
- src/app/(user)/profile/(userInfo)/page.tsx
🔇 Additional comments (4)
src/app/(user)/profile/(userInfo)/editInfo/page.tsx (2)
35-48: 전화번호 인증 로직 구현이 필요합니다인증받기 버튼 클릭 시 실행될 로직과 인증 상태 관리가 필요합니다.
인증 로직 구현이 필요하시다면 도움을 드릴 수 있습니다. GitHub 이슈를 생성해드릴까요?
67-85: 주소 검색 기능 구현이 필요합니다카카오 주소 검색 API 등을 활용하여 주소 검색 기능을 구현해주세요.
주소 검색 API 연동이 필요하시다면 도움을 드릴 수 있습니다. GitHub 이슈를 생성해드릴까요?
src/app/(user)/profile/(order)/orderHistory/page.tsx (1)
1-4: import 문 구성이 적절합니다.Next.js 13+ App Router에서 필요한 'use client' 지시문과 필수 의존성들이 올바르게 임포트되어 있습니다.
package.json (1)
45-47: 패키지 구성이 단순화되었습니다.MSW 워커 디렉토리 설정이 배열에서 문자열로 변경되었고, 패키지 매니저 버전에서 해시가 제거되었습니다. 이는 구성을 단순화하는 긍정적인 변경사항입니다.
다만, 다음 사항을 확인해주시기 바랍니다:
- MSW 워커가 public 디렉토리에서 정상적으로 동작하는지
- yarn 버전 변경으로 인한 호환성 문제가 없는지
✅ Verification successful
구성 변경사항이 안전하게 적용되었습니다
- MSW 워커 파일이
public디렉토리에 정상적으로 존재하며 올바르게 구성되어 있습니다- yarn 버전 변경과 관련된 의존성 충돌이 발견되지 않았습니다
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # MSW 워커 파일 존재 여부 확인 echo "Checking MSW worker file..." ls public/mockServiceWorker.js || echo "Warning: MSW worker file not found" # yarn.lock 파일에서 의존성 충돌 확인 echo "Checking for dependency conflicts..." cat yarn.lock | grep -i "conflict" || echo "No conflicts found in yarn.lock"Length of output: 316
Script:
#!/bin/bash # Check MSW worker file content (first few lines should be enough) echo "=== MSW Worker Content ===" head -n 5 public/mockServiceWorker.js # Check previous package.json configuration echo -e "\n=== Previous Package.json Configuration ===" git log -p package.json | grep -A 5 -B 5 "workerDirectory" | head -n 20Length of output: 276
jinoo0306
reviewed
Jan 14, 2025
jinoo0306
approved these changes
Jan 14, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
#️⃣연관된 이슈
📝작업 내용
스크린샷 (선택)
💬리뷰 요구사항(선택)
이 있을까요?
Summary by CodeRabbit
새로운 기능
버그 수정
기타 변경사항