Feat/125/my page profile #134

HaeJungg · 2024-11-18T04:19:46Z

🔖 Issue Ticket

#125

✍️ Description

프로필 이미지 가져오기(헤더), 마이페이지 정보 가져오기
프로필 이미지 수정 api 연결
처음에는 zustand로 연결했는데 수정했을때 바로 반영이 안되서 캐시 문제를 해결한 api 패치를 사용했습니다
zustand에 rehydration 추가(상태 복원이 비동기적으로 이루어지는 동안 인증 상태를 정확히 확인하지 못해 발생하는 인증 관련 문제를 해결)
200인데 빈 응답으로 오는 경우 처리했습니다(api.ts)
기본 프로필 UI로 되돌리는 api는 백앤드 추가되면 수정하겠습니다 -> 추가완료!

✅ Checklist

PR

Branch Convention 확인

feat/ 피쳐, fix/ 버그 수정, refactor/ 개선
Base Branch 확인
적절한 Label 지정
Assignee 및 Reviewer 지정

Test

로컬 작동 확인

Summary by CodeRabbit

릴리스 노트

새로운 기능
- 사용자 프로필 업데이트 기능 추가.
- 사용자 데이터 가져오기 기능 개선.
- 프로필 카드 및 리뷰 섹션을 포함한 새로운 사용자 페이지 구성.
- 헤더에 사용자 프로필 이미지 표시 기능 추가.
- 새로운 MyPage 컴포넌트 추가.
- 사용자 프로필 이미지 리셋 기능 추가.
버그 수정
- 사용자 인증 상태에 따른 리디렉션 오류 수정.
스타일
- 프로필 카드와 헤더의 스타일 개선.
- 새로운 CSS 클래스 .editable-gradient-border 추가.
문서화
- API 오류 처리 및 응답 처리 개선에 대한 문서 업데이트.

coderabbitai · 2024-11-18T04:19:52Z

Caution

Review failed

The pull request is closed.

Walkthrough

이 변경 사항은 사용자 API와 프로필 관리 기능을 개선하는 여러 가지 수정을 포함합니다. user-apis.ts 파일에서 getUser 함수의 반환 유형이 단순화되었고, 사용자 프로필을 업데이트하는 새로운 비동기 함수 updateUserProfile와 사용자 데이터를 가져오는 fetchUpdatedUser가 추가되었습니다. 또한, 새로운 React 컴포넌트 ProfileCard와 ProfileCardPresenter가 도입되어 사용자 프로필을 관리하고 표시하는 기능이 향상되었습니다. 기존의 ReviewSection 컴포넌트는 이름이 변경되었고, 새로운 MyPage 컴포넌트가 추가되었습니다.

Changes

파일 경로	변경 요약
`src/_apis/auth/user-apis.ts`	`getUser` 함수의 반환 유형을 `Promise<User>`로 변경; `updateUserProfile`, `fetchUpdatedUser`, `resetUserProfileImage` 함수 추가.
`src/app/(crew)/my-page/_components/profile-card/container.tsx`	새로운 `ProfileCard` 컴포넌트 추가, 사용자 인증 상태 확인 및 사용자 데이터 비동기 가져오기 기능 포함.
`src/app/(crew)/my-page/_components/profile-card/presenter.tsx`	새로운 `ProfileCardPresenter` 컴포넌트 추가, 사용자 프로필 정보를 표시하는 기능 포함.
`src/app/(crew)/my-page/_components/review-section.tsx`	`MyPage`에서 `ReviewSection`으로 이름 변경, API 모듈에서 데이터 가져오기 기능 추가.
`src/app/(crew)/my-page/page.tsx`	새로운 `MyPage` 컴포넌트 추가, `ProfileCardContainer` 및 `ReviewSection` 포함.
`src/app/(crew)/mypage/_components/profile-card/container.tsx`	`ProfileCardContainer` 컴포넌트 삭제.
`src/app/(crew)/mypage/_components/profile-card/presenter.tsx`	`ProfileCard` 컴포넌트 삭제.
`src/components/common/header/container.tsx`	`Header` 컴포넌트에서 `user` 객체를 가져오도록 수정, `HeaderPresenter`에 `profileImageUrl` 추가.
`src/components/common/header/presenter.tsx`	내비게이션 링크의 간격 및 URL 수정.
`src/components/common/profile/index.tsx`	`ProfileProps` 인터페이스에서 `onEdit` 속성 제거, 기본 `size` 값 변경.
`src/styles/globals.css`	새로운 CSS 클래스 `.editable-gradient-border` 추가.
`src/utils/api.ts`	`ApiError` 클래스와 `fetchApi` 함수 수정, 빈 응답 처리 로직 추가.

Possibly related PRs

Feat/67/mypage #76: getUser 함수의 반환 유형과 새로운 사용자 관련 함수 추가가 관련되어 있습니다.
🚑 Hotfix: 엔드포인트 변경 #86: HeaderPresenter의 사용자 정보 포함 수정이 관련되어 있습니다.
Hofix/index page : 파일샘플 컴포넌트 수정 #88: 사용자 데이터 처리와 관련된 변경 사항이 있습니다.
Hofix/index page #91: 사용자 프로필 관리와 관련된 업데이트가 포함되어 있습니다.
Feat/98/crew api 연결 #104: 사용자 관련 데이터 처리와 관련된 수정이 포함되어 있습니다.
Feat/101/login signup api #106: 사용자 인증 및 데이터 처리와 관련된 변경 사항이 있습니다.
Feat/107/my gathering api #117: 사용자 선호도 관리와 관련된 새로운 API 함수가 추가되었습니다.
Feat/128/edit crew api 연결 #129: 사용자 프로필 관리 기능과 관련된 변경 사항이 포함되어 있습니다.
Feat/127/update detail page #130: 사용자 데이터 표시 및 관리와 관련된 수정이 포함되어 있습니다.

Suggested reviewers

yulrang
minkyung5x5
Rangbyeolang

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/components/common/profile/index.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't determine the plugin "react-hooks" uniquely.

/node_modules/eslint-plugin-react-hooks/index.js (loaded in ".eslintrc.js")
/node_modules/eslint-config-next/node_modules/eslint-plugin-react-hooks/index.js (loaded in ".eslintrc.js » eslint-config-next/core-web-vitals » /node_modules/eslint-config-next/index.js » plugin:react-hooks/recommended")

Please remove the "plugins" setting from either config or remove either plugin installation.

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

github-actions · 2024-11-18T04:23:26Z

🚀storybook: https://67206cc6ff9d7a05a3528ff8-mwaiwvsttw.chromatic.com/

coderabbitai

Actionable comments posted: 11

🧹 Outside diff range and nitpick comments (12)

src/app/(crew)/my-page/page.tsx (2)
6-8: 시맨틱 HTML 요소 사용을 권장드립니다.

접근성 향상을 위해 최상위 div 대신 main 태그를 사용하는 것이 좋습니다.

다음과 같이 수정하는 것을 제안드립니다:
-    <div className="container mx-auto my-0 min-h-screen max-w-pc bg-gray-50 px-3 py-11 md:px-8 lg:px-11">
+    <main className="container mx-auto my-0 min-h-screen max-w-pc bg-gray-50 px-3 py-11 md:px-8 lg:px-11">
4-14: 에러 처리와 로딩 상태 관리를 고려해주세요.

프로필 페이지의 안정성과 사용자 경험 향상을 위해 다음 사항들을 고려해보시기 바랍니다:

ErrorBoundary 추가하여 컴포넌트 크래시 방지

프로필 데이터 로딩 중 상태 표시

프로필 이미지 로드 실패 시 대체 UI 제공

필요하시다면 위 기능들의 구현 예시를 제공해드릴 수 있습니다.
src/styles/globals.css (2)
44-53: 구현이 잘 되어있으나 몇 가지 개선사항이 있습니다.

현재 구현은 기술적으로 정확하며 Safari 브라우저 호환성도 고려되어 있습니다. 하지만 성능 최적화를 위해 하드웨어 가속을 활성화하는 것이 좋습니다.

다음과 같이 변경해보세요:
 .editable-gradient-border {
   position: relative;
   border: 4px solid transparent;
   border-radius: 50%;
   background: linear-gradient(180deg, rgba(59, 130, 246, 0.71) 0%, rgba(59, 130, 246, 1) 100%);
   background-clip: border-box;
   -webkit-background-clip: border-box;
   background-origin: border-box;
   z-index: 0;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
 }
44-53: 사용자 경험 향상을 위한 호버 효과 추가를 제안드립니다.

프로필 이미지가 편집 가능하다는 것을 시각적으로 더 잘 표현하기 위해 호버 상태를 추가하면 좋을 것 같습니다.

다음과 같은 호버 효과를 추가해보세요:
 .editable-gradient-border {
   position: relative;
   border: 4px solid transparent;
   border-radius: 50%;
   background: linear-gradient(180deg, rgba(59, 130, 246, 0.71) 0%, rgba(59, 130, 246, 1) 100%);
   background-clip: border-box;
   -webkit-background-clip: border-box;
   background-origin: border-box;
   z-index: 0;
+  transition: all 0.3s ease;
+ }
+
+ .editable-gradient-border:hover {
+  background: linear-gradient(180deg, rgba(59, 130, 246, 0.8) 0%, rgba(59, 130, 246, 1) 100%);
+  cursor: pointer;
 }
src/components/common/profile/index.tsx (2)
26-31: 스타일링 로직이 개선되었습니다.

cn 유틸리티를 사용하여 조건부 클래스 적용이 더 명확해졌습니다. 다만, editable-gradient-border의 스타일 정의가 어디에 있는지 명시적이지 않습니다.

다음과 같이 주석을 추가하는 것을 제안합니다:
 <div
   className={cn(
     'relative inline-block rounded-full',
     sizeClasses[size],
+    // editable-gradient-border는 globals.css에 정의된 스타일입니다
     editable && 'editable-gradient-border shadow-sm',
   )}
 >
55-57: 편집 버튼의 크기와 위치가 조정되었습니다.

버튼과 아이콘의 크기가 증가되어 터치 영역이 개선되었습니다. 다만, 반응형 위치 조정이 복잡해 보입니다.

다음과 같이 클래스를 정리하는 것을 제안합니다:
-className="absolute -bottom-1 -right-1 z-20 h-8 w-8 cursor-pointer rounded-full md:-right-1 md:bottom-2 lg:-right-1 lg:bottom-2"
+className={cn(
+  'absolute z-20 h-8 w-8 cursor-pointer rounded-full',
+  '-bottom-1 -right-1',
+  'md:bottom-2 md:-right-1',
+  'lg:bottom-2 lg:-right-1'
+)}
src/app/(crew)/my-page/_components/profile-card/presenter.tsx (2)
7-10: 인터페이스 문서화 추가 필요

인터페이스의 목적과 각 속성에 대한 설명을 JSDoc으로 추가하면 컴포넌트의 사용성이 향상될 것 같습니다.
+/**
+ * 프로필 카드 컴포넌트의 속성을 정의합니다.
+ */
 export interface ProfileCardProps {
+  /** 사용자 정보 데이터 */
   data: UserType;
+  /** 프로필 수정 버튼 클릭 핸들러 */
   onEdit: () => void;
 }
30-30: 메뉴 위치 지정 방식 개선 필요

현재 transform 클래스를 사용한 메뉴 위치 지정이 복잡합니다. Mantine의 position prop을 활용하여 간단화할 수 있습니다.
-<Menu.Dropdown className="translate-x-16 translate-y-2 transform md:translate-x-24 md:translate-y-0 lg:translate-x-24 lg:translate-y-0">
+<Menu.Dropdown>
그리고 Menu 컴포넌트의 position prop을 조정:
 <Menu
   shadow="sm"
   width={170}
   offset={-5}
   withArrow
   arrowPosition="side"
-  position="bottom-start"
+  position="bottom-end"
 >
src/app/(crew)/my-page/_components/profile-card/container.tsx (2)
11-17: 로딩 상태 처리 개선을 제안드립니다.

현재 단순 로딩 텍스트 대신 사용자 경험을 향상시킬 수 있는 스켈레톤 UI를 적용하는 것이 좋을 것 같습니다.

다음과 같이 스켈레톤 컴포넌트를 추가하는 것을 고려해보세요:
+import { Skeleton } from '@/components/ui/skeleton';
...
-if (isLoading) return <div>로딩 중...</div>;
+if (isLoading) return (
+  <div className="space-y-3">
+    <Skeleton className="h-12 w-12 rounded-full" />
+    <Skeleton className="h-4 w-[250px]" />
+  </div>
+);
74-74: 컴포넌트 렌더링 최적화를 제안드립니다.

불필요한 리렌더링을 방지하기 위해 메모이제이션을 적용하는 것이 좋을 것 같습니다.

다음과 같이 개선하는 것을 제안드립니다:
+import { useMemo } from 'react';

-return <ProfileCardPresenter data={{ ...user, profileImageUrl }} onEdit={handleEdit} />;
+const memoizedData = useMemo(() => ({ ...user, profileImageUrl }), [user, profileImageUrl]);
+return <ProfileCardPresenter data={memoizedData} onEdit={handleEdit} />;
src/app/(crew)/my-page/_components/review-section.tsx (2)
Line range hint 22-41: 무한 스크롤 로직 개선 제안

중복된 설정과 매직 넘버를 개선할 수 있습니다.

다음과 같은 리팩토링을 제안합니다:
+const ITEMS_PER_PAGE = 3;
+const createInfiniteScrollConfig = (queryKey: string, fetchFn: Function) => ({
+  queryKey: [queryKey],
+  queryFn: ({ pageParam = 0 }) => fetchFn(pageParam, ITEMS_PER_PAGE),
+  getNextPageParam: (lastPage, allPages) =>
+    lastPage.hasNextPage ? allPages.length + 1 : undefined,
+});

 const {
   data: reviewData,
   ref: reviewRef,
   isFetchingNextPage: isFetchingReviewNextPage,
-} = useInfiniteScroll<ReviewInformResponse>({
-  queryKey: ['review'],
-  queryFn: ({ pageParam = 0 }) => fetchMyReviewData(pageParam, 3),
-  getNextPageParam: (lastPage, allPages) =>
-    lastPage.hasNextPage ? allPages.length + 1 : undefined,
-});
+} = useInfiniteScroll<ReviewInformResponse>(
+  createInfiniteScrollConfig('review', fetchMyReviewData)
+);
67-78: Tailwind 클래스 추상화 제안

현재 Tailwind 클래스들이 직접 사용되고 있습니다. 재사용성과 유지보수성을 위해 이를 추상화하는 것이 좋겠습니다.

다음과 같은 방식을 제안합니다:
+// styles/review-section.ts
+export const styles = {
+  container: 'mt-12 flex flex-col',
+  title: 'text-2xl font-semibold text-gray-900',
+  tabContainer: 'flex justify-start',
+  content: 'pt-12'
+};

-<div className="mt-12 flex flex-col">
+<div className={styles.container}>
-  <h3 className="text-2xl font-semibold text-gray-900">
+  <h3 className={styles.title}>
   나의 리뷰 모아보기
   </h3>
   <Divider mt={16} mb={24} size={2} />
-  <div className="flex justify-start">
+  <div className={styles.tabContainer}>
     <Tabs
       variant="review"
       tabs={myPageTabs}
       activeTab={currentTab}
       onTabClick={(id) => setCurrentTab(id)}
     />
   </div>
-  <div className="pt-12">{renderTabContent()}</div>
+  <div className={styles.content}>{renderTabContent()}</div>
 </div>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between ab16aad and 8b87010.

⛔ Files ignored due to path filters (2)

public/assets/icons/ic-edit.svg is excluded by !**/*.svg
public/assets/icons/profile-edit.svg is excluded by !**/*.svg

📒 Files selected for processing (12)

src/_apis/auth/user-apis.ts (1 hunks)
src/app/(crew)/my-page/_components/profile-card/container.tsx (1 hunks)
src/app/(crew)/my-page/_components/profile-card/presenter.tsx (1 hunks)
src/app/(crew)/my-page/_components/review-section.tsx (3 hunks)
src/app/(crew)/my-page/page.tsx (1 hunks)
src/app/(crew)/mypage/_components/profile-card/container.tsx (0 hunks)
src/app/(crew)/mypage/_components/profile-card/presenter.tsx (0 hunks)
src/components/common/header/container.tsx (2 hunks)
src/components/common/header/presenter.tsx (2 hunks)
src/components/common/profile/index.tsx (3 hunks)
src/styles/globals.css (1 hunks)
src/utils/api.ts (1 hunks)

💤 Files with no reviewable changes (2)

src/app/(crew)/mypage/_components/profile-card/container.tsx
src/app/(crew)/mypage/_components/profile-card/presenter.tsx

🔇 Additional comments (11)

src/app/(crew)/my-page/page.tsx (2)

1-2: 임포트 구문이 깔끔하게 구성되어 있습니다!

절대 경로를 사용하여 컴포넌트를 가져오는 방식이 일관성 있게 적용되어 있습니다.

11-11: 빈 div 요소의 용도를 확인해주세요.

목적이 없는 빈 div 요소는 DOM을 불필요하게 차지할 수 있습니다. 특별한 용도가 없다면 제거하는 것이 좋습니다.

스타일링이나 다른 특별한 목적이 있다면, 주석으로 용도를 명시해주시기 바랍니다:

-      <div />
+      {/* 스페이싱을 위한 여백 */}
+      <div />

src/components/common/header/container.tsx (2)

15-15: 스토어에서 user 정보를 가져오도록 개선되었습니다.

사용자 프로필 이미지 표시를 위해 useAuthStore에서 user 정보를 가져오도록 수정된 부분이 적절해 보입니다.

26-30: HeaderPresenter 구현 검증이 필요합니다.

profileImageUrl prop이 추가되었습니다. HeaderPresenter 컴포넌트에서 이 값을 올바르게 처리하는지 확인이 필요합니다.

✅ Verification successful

Let me check the Profile component implementation to ensure it properly handles the profileImageUrl prop.

profileImageUrl prop이 올바르게 구현되어 있습니다.

Profile 컴포넌트가 다음과 같이 올바르게 구현되어 있음을 확인했습니다:

Profile 컴포넌트는 imageUrl prop을 받아 처리하도록 정의되어 있습니다
HeaderPresenter에서 profileImageUrl을 Profile 컴포넌트의 imageUrl prop으로 올바르게 전달하고 있습니다
size="header" prop과 함께 적절히 사용되고 있습니다

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# HeaderPresenter에서 profileImageUrl prop 처리 확인

# presenter.tsx 파일에서 profileImageUrl prop 타입 정의 확인
rg -A 5 "interface.*Props" src/components/common/header/presenter.tsx

# profileImageUrl 사용 부분 확인
rg "profileImageUrl" src/components/common/header/presenter.tsx

Length of output: 371

Script:

#!/bin/bash
# Profile 컴포넌트의 구현 확인
rg -A 10 "Profile.*Props" "src/**/*.tsx"

# Profile 컴포넌트에서 imageUrl prop 사용 확인
rg "imageUrl.*=" "src/**/*.tsx"

Length of output: 182

Script:

#!/bin/bash
# Profile 컴포넌트 찾기
fd "Profile" --type f

# Profile 컴포넌트의 구현 확인
rg -A 10 "Profile.*Props" 

# Profile 컴포넌트에서 imageUrl prop 사용 확인
rg "imageUrl.*="

Length of output: 6715

src/_apis/auth/user-apis.ts (1)

4-11: 반환 타입 단순화가 잘 되었습니다!

불필요한 중첩을 제거하고 타입을 더 명확하게 만든 변경이 적절합니다.

src/components/common/profile/index.tsx (1)

4-4: Props 인터페이스가 간소화되었습니다.

onEdit prop이 제거되고 필수적인 props만 남아있어 컴포넌트의 책임이 더 명확해졌습니다. 또한 cn 유틸리티의 도입으로 조건부 클래스 적용이 더 체계적으로 변경되었습니다.

Also applies to: 8-13

src/app/(crew)/my-page/_components/profile-card/container.tsx (1)

1-10: 코드가 깔끔하고 필요한 import들이 잘 구성되어 있습니다!

필요한 모든 의존성이 명확하게 import되어 있으며, client-side 렌더링 지시자가 올바르게 배치되어 있습니다.

src/components/common/header/presenter.tsx (2)

64-64: URL 경로 변경이 적절합니다.

'/my-page'로의 경로 변경은 일관된 URL 형식을 따르고 있어 적절합니다. 다만, 이 변경으로 인한 기존 북마크나 링크의 영향을 고려하여 리다이렉트 처리가 필요할 수 있습니다.

#!/bin/bash
# Description: Check for any hardcoded references to the old URL path

# Search for old path references
rg "/mypage"

# Search for route configurations
fd -g "*route*" -g "*navigation*" -x rg "mypage|my-page"

36-36: 네비게이션 간격 조정이 모바일 화면에 영향을 줄 수 있습니다.

space-x-2로의 간격 조정이 모바일 화면에서 네비게이션 항목들을 너무 밀착시킬 수 있습니다. 모바일 기기에서의 사용성을 확인해주세요.

✅ Verification successful

네비게이션 간격 조정이 적절합니다

검토 결과, space-x-2에서 md:space-x-6로의 반응형 간격 조정이 기존 디자인 패턴과 일치합니다. 다른 컴포넌트들도 유사한 패턴을 사용하고 있으며, 모바일(space-x-2)에서 태블릿(md:space-x-6)으로의 전환이 자연스럽게 구현되어 있습니다.

header 컴포넌트의 다른 요소들도 동일한 반응형 패턴 사용 (flex space-x-2 md:space-x-5)
모바일 화면에서의 space-x-2는 적절한 간격을 제공합니다

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if there are any related responsive design tests or documentation

# Search for responsive design tests
rg -g '*.test.*' -g '*.spec.*' "space-x-[0-9].*mobile|responsive"

# Search for design documentation
fd -g "*.md" -x rg "모바일|반응형|responsive"

Length of output: 302

Script:

#!/bin/bash
# Let's check the actual spacing values used in other responsive components
rg "space-x-[0-9].*md:" -A 2 -B 2

# Check for any mobile-specific styling patterns
rg "sm:|mobile" -g "*.tsx" -g "*.css"

# Look for any design system documentation
fd "design-system|styles|theme" -e md -x cat {}

# Check other navigation components for spacing patterns
fd -e tsx -e jsx --full-path "nav|header" -x rg "space-x-[0-9]" {}

Length of output: 3345

src/app/(crew)/my-page/_components/review-section.tsx (2)

Line range hint 14-20: 컴포넌트 이름 변경이 적절합니다

MyPage에서 ReviewSection으로의 이름 변경이 컴포넌트의 실제 책임을 더 잘 반영합니다. 탭 상태 관리도 간단하고 명확하게 구현되었습니다.

Line range hint 43-63: 탭 컨텐츠 렌더링 로직이 깔끔합니다

조건부 렌더링이 명확하게 구현되었고, 무한 스크롤의 로딩 상태도 적절하게 처리되었습니다.

coderabbitai · 2024-11-18T04:28:53Z

src/_apis/auth/user-apis.ts

+export async function updateUserProfile(file: File): Promise<void> {
+  const url = `/auths/user`;
+
+  const formData = new FormData();
+  formData.append('file', file);
+
+  await fetchApi(url, {
+    method: 'PUT',
+    body: formData,
  });
 }


⚠️ Potential issue

파일 업로드 구현에 몇 가지 개선이 필요합니다.

다음 사항들을 고려해 주세요:

multipart/form-data Content-Type 헤더가 누락되었습니다.

오류 처리가 구현되어 있지 않습니다.

다음과 같이 수정을 제안드립니다:

export async function updateUserProfile(file: File): Promise<void> { const url = `/auths/user`; const formData = new FormData(); formData.append('file', file); await fetchApi(url, { method: 'PUT', + headers: { + 'Content-Type': 'multipart/form-data', + }, body: formData, - }); + }).catch((error) => { + console.error('프로필 업데이트 중 오류 발생:', error); + throw error; + }); }

Committable suggestion skipped: line range outside the PR's diff.

coderabbitai · 2024-11-18T04:28:54Z

src/_apis/auth/user-apis.ts

+export async function fetchUpdatedUser() {
+  return fetchApi<{ data: User }>('/auths/user', {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      'Cache-Control': 'no-cache',
+    },
+  })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      throw error;
+    });
+}


🛠️ Refactor suggestion

코드 중복을 제거하고 재사용성을 높일 수 있습니다.

getUser와 fetchUpdatedUser 함수가 상당 부분 중복되어 있습니다. 공통 로직을 추출하여 재사용하는 것이 좋겠습니다.

다음과 같은 리팩토링을 제안드립니다:

+interface GetUserOptions { + skipCache?: boolean; +} + +async function getUserBase(options: GetUserOptions = {}): Promise<User> { + const headers: Record<string, string> = { + 'Content-Type': 'application/json', + }; + + if (options.skipCache) { + headers['Cache-Control'] = 'no-cache'; + } + + return fetchApi<{ data: User }>('/auths/user', { + method: 'GET', + headers, + }) + .then((response) => response.data) + .catch((error) => { + console.error('사용자 정보 조회 중 오류 발생:', error); + throw error; + }); +} + -export function getUser(): Promise<User> { - return fetchApi<{ data: User }>('/auths/user', { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - }, - }).then((response) => response.data); +export function getUser(): Promise<User> { + return getUserBase(); } -export async function fetchUpdatedUser() { - return fetchApi<{ data: User }>('/auths/user', { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - 'Cache-Control': 'no-cache', - }, - }) - .then((response) => { - return response.data; - }) - .catch((error) => { - throw error; - }); +export async function fetchUpdatedUser(): Promise<User> { + return getUserBase({ skipCache: true }); }

📝 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.

Suggested change

export async function fetchUpdatedUser() {

return fetchApi<{ data: User }>('/auths/user', {

method: 'GET',

headers: {

'Content-Type': 'application/json',

'Cache-Control': 'no-cache',

},

})

.then((response) => {

return response.data;

})

.catch((error) => {

throw error;

});

}

interface GetUserOptions {

skipCache?: boolean;

}

async function getUserBase(options: GetUserOptions = {}): Promise<User> {

const headers: Record<string, string> = {

'Content-Type': 'application/json',

};

if (options.skipCache) {

headers['Cache-Control'] = 'no-cache';

}

return fetchApi<{ data: User }>('/auths/user', {

method: 'GET',

headers,

})

.then((response) => response.data)

.catch((error) => {

console.error('사용자 정보 조회 중 오류 발생:', error);

throw error;

});

}

export function getUser(): Promise<User> {

return getUserBase();

}

export async function fetchUpdatedUser(): Promise<User> {

return getUserBase({ skipCache: true });

}

coderabbitai · 2024-11-18T04:28:54Z

src/components/common/profile/index.tsx

+        className={cn(
+          'relative overflow-hidden rounded-full',
+          sizeClasses[finalSize],
+          size !== 'header' && 'pointer-events-none',
+        )}
+        onClick={size === 'header' ? onClick : undefined}


🛠️ Refactor suggestion

클릭 핸들링 로직이 변경되었습니다.

header 크기일 때만 클릭이 가능하도록 변경되었습니다. 이러한 제한적인 동작은 명확한 설명이 필요합니다.

다음과 같이 주석을 추가하여 의도를 명확히 하는 것을 제안합니다:

+// header 크기일 때만 클릭 이벤트를 활성화합니다. +// 다른 크기에서는 이미지 표시 용도로만 사용됩니다. <button type="button" className={cn( 'relative overflow-hidden rounded-full', sizeClasses[finalSize], size !== 'header' && 'pointer-events-none', )} onClick={size === 'header' ? onClick : undefined} >

📝 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.

Suggested change

className={cn(

'relative overflow-hidden rounded-full',

sizeClasses[finalSize],

size !== 'header' && 'pointer-events-none',

)}

onClick={size === 'header' ? onClick : undefined}

// header 크기일 때만 클릭 이벤트를 활성화합니다.

// 다른 크기에서는 이미지 표시 용도로만 사용됩니다.

className={cn(

'relative overflow-hidden rounded-full',

sizeClasses[finalSize],

size !== 'header' && 'pointer-events-none',

)}

onClick={size === 'header' ? onClick : undefined}

coderabbitai · 2024-11-18T04:28:54Z

src/components/common/profile/index.tsx

+export function Profile({ size = 'full', imageUrl, editable = false, onClick }: ProfileProps) {
+  const finalSize = editable ? 'full' : size;


💡 Codebase verification

기본 size prop 변경이 기존 코드에 영향을 미칠 수 있습니다.

git 히스토리와 현재 사용처를 분석한 결과, 다음과 같은 중요한 변경사항이 확인되었습니다:

size prop의 기본값이 'large'에서 'full'로 변경됨

editable이 true일 때의 동작이 'large'에서 'full'로 변경됨

실제 사용처에서 size prop을 명시적으로 지정하지 않은 컴포넌트들이 발견됨:

src/app/(crew)/my-page/_components/profile-card/presenter.tsx

src/app/(crew)/crew/_components/gathering-detail-modal/presenter.tsx

이러한 변경은 size prop을 명시적으로 지정하지 않은 컴포넌트들의 렌더링 결과에 영향을 미칠 수 있습니다.

🔗 Analysis chain

기본 size prop 변경에 대한 검증이 필요합니다.

size prop의 기본값이 'large'에서 'full'로 변경되었습니다. 이는 기존 사용처에 영향을 줄 수 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash # Description: Find all usage of Profile component without explicit size prop rg -l "Profile\s*\{[^}]*\}" | xargs rg "<Profile(?![^>]*size=)[^>]*>"

Length of output: 311

Script:

#!/bin/bash # Search for Profile component usage patterns with PCRE2 rg --pcre2 "<Profile(?![^>]*size=)[^>]*>" -l # Also search for Profile component imports to understand usage rg "import.*Profile.*from.*components/common/profile" -l # Search for Profile component usage with AST ast-grep --pattern 'JSXElement { JSXOpeningElement { JSXIdentifier: "Profile" $$$ } $$$ }'

Length of output: 783

Script:

#!/bin/bash # Check actual Profile component usage in files where it's used without size prop for file in src/components/common/crew-list/detail-crew-card.tsx src/app/$crew$/my-page/page.tsx src/components/common/writable-gathering-card/writable-gathering-card.tsx src/app/$crew$/my-page/_components/profile-card/container.tsx src/app/$crew$/my-page/_components/profile-card/presenter.tsx src/app/$crew$/crew/_components/gathering-detail-modal/presenter.tsx; do echo "=== $file ===" rg -A 2 "<Profile" "$file" || true done # Check if there was a previous default value git log -p src/components/common/profile/index.tsx | rg -A 5 -B 5 "size = "

Length of output: 5198

coderabbitai · 2024-11-18T04:28:54Z

src/app/(crew)/my-page/_components/profile-card/presenter.tsx

+          >
+            <Menu.Target>
+              <div className="h-full w-full">
+                <Profile editable imageUrl={data?.profileImageUrl ?? ''} />


🛠️ Refactor suggestion

프로필 이미지 로딩 및 에러 상태 처리 필요

프로필 이미지 URL이 없거나 로딩 중일 때의 상태 처리가 필요합니다.

-<Profile editable imageUrl={data?.profileImageUrl ?? ''} /> +<Profile + editable + imageUrl={data?.profileImageUrl ?? ''} + loading={!data} + onError={() => {/* 에러 처리 로직 */}} +/>

Committable suggestion skipped: line range outside the PR's diff.

coderabbitai · 2024-11-18T04:28:54Z

src/app/(crew)/my-page/_components/profile-card/presenter.tsx

+              <Menu.Item onClick={onEdit}>프로필 이미지 수정하기</Menu.Item>
+              <Menu.Item color="red" onClick={() => alert('Delete Profile')}>
+                기본 프로필로 돌아가기
+              </Menu.Item>


🛠️ Refactor suggestion

접근성 및 국제화 개선 필요

메뉴 아이템에 aria-label 추가

문자열을 국제화 처리

-<Menu.Item onClick={onEdit}>프로필 이미지 수정하기</Menu.Item> +<Menu.Item onClick={onEdit} aria-label="프로필 이미지 수정"> + {t('profile.edit')} +</Menu.Item> -<Menu.Item color="red" onClick={() => alert('Delete Profile')}> - 기본 프로필로 돌아가기 +<Menu.Item + color="red" + onClick={() => alert('Delete Profile')} + aria-label="기본 프로필로 복원" +> + {t('profile.reset')} +</Menu.Item>

Committable suggestion skipped: line range outside the PR's diff.

coderabbitai · 2024-11-18T04:28:54Z

src/app/(crew)/my-page/_components/profile-card/presenter.tsx

+              <Menu.Item color="red" onClick={() => alert('Delete Profile')}>
+                기본 프로필로 돌아가기
+              </Menu.Item>


💡 Codebase verification

⚠️ Potential issue

기본 프로필 복원 API 구현 및 연동 필요

현재 프로필 관리 기능 중 이미지 업로드 API(updateUserProfile)만 구현되어 있고, 기본 프로필 복원 API가 구현되어 있지 않습니다. 다음 작업이 필요합니다:

/auths/user 엔드포인트에 기본 프로필 복원 API 추가

user-apis.ts에 기본 프로필 복원 함수 구현

ProfileCard 컴포넌트에서 복원 API 연동 및 로딩/에러 상태 처리

🔗 Analysis chain

기본 프로필 복원 기능 구현 필요

현재 alert로 임시 구현된 기본 프로필 복원 기능을 실제 API와 연동하여 구현해야 합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash # API 구현 여부 확인 rg -g "*.ts" "resetProfile|defaultProfile|removeProfile"

Length of output: 58

Script:

#!/bin/bash # API 관련 파일 검색을 위해 더 넓은 범위의 키워드로 검색 rg -g "*.ts*" -i "profile.*api|api.*profile" # 프로필 관련 서비스나 훅 검색 rg -g "*.ts*" -i "useProfile|ProfileService" # API 엔드포인트 정의 검색 ast-grep --pattern 'interface $_ { $$$ profile$_: $_ $$$ }'

Length of output: 305

Script:

#!/bin/bash # user-apis 파일의 내용 확인 cat src/app/$crew$/my-page/_components/profile-card/container.tsx # auth API 관련 파일 확인 rg -g "*.ts*" "updateUserProfile" -A 5 -B 5 # 프로필 관련 타입 정의 검색 ast-grep --pattern 'type $_ = { $$$ profile$_: $_ $$$ }'

Length of output: 5133

coderabbitai · 2024-11-18T04:28:54Z

src/utils/api.ts

+
+    // 빈 응답 처리
+    const contentLength = response.headers.get('Content-Length');
+    if (contentLength === '0' || response.status === 204) {
+      return {} as T; // 빈 객체 반환
+    }
+


🛠️ Refactor suggestion

빈 응답 처리 로직에 대한 타입 안전성 개선 필요

빈 응답을 처리하는 로직이 추가된 것은 좋은 개선사항입니다. 하지만 현재 구현에서 잠재적인 타입 안전성 문제가 있을 수 있습니다.

{} as T와 같은 타입 캐스팅은 T 타입이 필수 속성을 가지고 있을 경우 런타임 에러를 발생시킬 수 있습니다.

다음과 같이 개선하는 것을 제안드립니다:

const contentLength = response.headers.get('Content-Length'); if (contentLength === '0' || response.status === 204) { - return {} as T; + // T 타입이 유효한지 확인 + const emptyResponse = {} as T; + if (!validateResponseType<T>(emptyResponse)) { + throw new ApiError(500, '빈 응답이 예상된 타입과 일치하지 않습니다'); + } + return emptyResponse; }

타입 검증을 위한 유틸리티 함수도 추가해주세요:

function validateResponseType<T>(response: T): boolean { // T 타입의 필수 속성 검증 로직 구현 return true; // 실제 검증 로직으로 대체 필요 }

coderabbitai · 2024-11-18T04:28:55Z

src/app/(crew)/my-page/_components/profile-card/container.tsx

+  // 파일 선택 핸들러
+  const handleEdit = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.png,.jpg,.jpeg';
+    input.onchange = async (event) => {
+      const file = (event.target as HTMLInputElement)?.files?.[0];
+      if (file) {
+        if (file.size > 5 * 1024 * 1024) {
+          alert('5MB 이하의 파일만 업로드 가능합니다.');
+          return;
+        }
+
+        try {
+          await updateUserProfile(file);
+
+          const tempUrl = URL.createObjectURL(file);
+          setProfileImageUrl(tempUrl);
+
+          const updatedUser = await fetchUpdatedUser();
+
+          const newProfileImageUrl = `${updatedUser.profileImageUrl}?timestamp=${new Date().getTime()}`;
+          setProfileImageUrl(newProfileImageUrl);
+          setUser({ ...updatedUser, profileImageUrl: newProfileImageUrl });
+        } catch (error) {
+          toast.error('파일 업로드에 실패했습니다.');
+        }
+      }
+    };
+    input.click();
+  };


⚠️ Potential issue

파일 업로드 처리 로직의 보안 및 사용자 경험 개선이 필요합니다.

현재 구현에서 다음과 같은 개선이 필요합니다:

파일 형식 검증 강화

업로드 진행 상태 표시

URL.createObjectURL 메모리 정리

다음과 같이 개선하는 것을 제안드립니다:

+const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/jpg', 'image/png']; +const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB const handleEdit = () => { const input = document.createElement('input'); input.type = 'file'; input.accept = '.png,.jpg,.jpeg'; input.onchange = async (event) => { const file = (event.target as HTMLInputElement)?.files?.[0]; if (file) { - if (file.size > 5 * 1024 * 1024) { + if (!ALLOWED_FILE_TYPES.includes(file.type)) { + toast.error('지원하지 않는 파일 형식입니다.'); + return; + } + + if (file.size > MAX_FILE_SIZE) { alert('5MB 이하의 파일만 업로드 가능합니다.'); return; } try { + setIsLoading(true); await updateUserProfile(file); const tempUrl = URL.createObjectURL(file); + // Clean up the temporary URL when we're done with it + setTimeout(() => URL.revokeObjectURL(tempUrl), 1000); setProfileImageUrl(tempUrl); const updatedUser = await fetchUpdatedUser(); const newProfileImageUrl = `${updatedUser.profileImageUrl}?timestamp=${new Date().getTime()}`; setProfileImageUrl(newProfileImageUrl); setUser({ ...updatedUser, profileImageUrl: newProfileImageUrl }); + toast.success('프로필 이미지가 업데이트되었습니다.'); } catch (error) { toast.error('파일 업로드에 실패했습니다.'); + } finally { + setIsLoading(false); } } }; input.click(); };

Committable suggestion skipped: line range outside the PR's diff.

coderabbitai · 2024-11-18T04:28:55Z

src/app/(crew)/my-page/_components/profile-card/container.tsx

+  useEffect(() => {
+    const timer = setTimeout(async () => {
+      if (!isAuth) {
+        router.push('/login');
+      } else {
+        try {
+          const updatedUser = await fetchUpdatedUser();
+          setLocalUser(updatedUser);
+          setUser(updatedUser);
+          setProfileImageUrl(updatedUser.profileImageUrl);
+          setIsLoading(false);
+        } catch (error) {
+          toast.error('유저 정보를 가져오는 데 실패했습니다.');
+        }
+      }
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [isAuth, router, setUser]);


⚠️ Potential issue

useEffect 내 타이머 사용과 에러 처리 개선이 필요합니다.

다음과 같은 문제점들이 있습니다:

불필요한 500ms 지연은 사용자 경험을 저하시킬 수 있습니다.

비동기 작업 중 컴포넌트가 언마운트될 경우 메모리 누수가 발생할 수 있습니다.

에러 처리가 너무 일반적입니다.

다음과 같이 개선하는 것을 제안드립니다:

useEffect(() => { - const timer = setTimeout(async () => { + let isMounted = true; + + const fetchUser = async () => { if (!isAuth) { router.push('/login'); } else { try { const updatedUser = await fetchUpdatedUser(); + if (!isMounted) return; setLocalUser(updatedUser); setUser(updatedUser); setProfileImageUrl(updatedUser.profileImageUrl); setIsLoading(false); } catch (error) { - toast.error('유저 정보를 가져오는 데 실패했습니다.'); + if (!isMounted) return; + if (error instanceof Error) { + toast.error(`유저 정보 조회 실패: ${error.message}`); + } else { + toast.error('유저 정보를 가져오는 데 실패했습니다.'); + } } } - }, 500); + }; + + fetchUser(); - return () => clearTimeout(timer); + return () => { + isMounted = false; + }; }, [isAuth, router, setUser]);

📝 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.

Suggested change

useEffect(() => {

const timer = setTimeout(async () => {

if (!isAuth) {

router.push('/login');

} else {

try {

const updatedUser = await fetchUpdatedUser();

setLocalUser(updatedUser);

setUser(updatedUser);

setProfileImageUrl(updatedUser.profileImageUrl);

setIsLoading(false);

} catch (error) {

toast.error('유저 정보를 가져오는 데 실패했습니다.');

}

}

}, 500);

return () => clearTimeout(timer);

}, [isAuth, router, setUser]);

useEffect(() => {

let isMounted = true;

const fetchUser = async () => {

if (!isAuth) {

router.push('/login');

} else {

try {

const updatedUser = await fetchUpdatedUser();

if (!isMounted) return;

setLocalUser(updatedUser);

setUser(updatedUser);

setProfileImageUrl(updatedUser.profileImageUrl);

setIsLoading(false);

} catch (error) {

if (!isMounted) return;

if (error instanceof Error) {

toast.error(`유저 정보 조회 실패: ${error.message}`);

} else {

toast.error('유저 정보를 가져오는 데 실패했습니다.');

}

}

}

};

fetchUser();

return () => {

isMounted = false;

};

}, [isAuth, router, setUser]);

github-actions · 2024-11-18T04:32:59Z

🚀storybook: https://67206cc6ff9d7a05a3528ff8-meoogabxbr.chromatic.com/

coderabbitai

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)

src/components/common/profile/Profile.stories.tsx (1)
20-26: 데코레이터 구현이 적절합니다.

반응형 디자인을 고려한 Tailwind 클래스 사용이 좋습니다. 하지만 magic number(h-20, w-20 등)를 사용하고 있어 유지보수성이 떨어질 수 있습니다.

다음과 같이 상수로 분리하는 것을 고려해보세요:
+ const PROFILE_SIZES = {
+   base: 'h-20 w-20',
+   md: 'md:h-30 md:w-30',
+   lg: 'lg:h-30 lg:w-30',
+ };

  decorators: [
    (Story) => (
-     <figure className="flex h-20 w-20 items-center justify-center md:h-30 md:w-30 lg:h-30 lg:w-30">
+     <figure className={`flex items-center justify-center ${PROFILE_SIZES.base} ${PROFILE_SIZES.md} ${PROFILE_SIZES.lg}`}>
        <Story />
      </figure>
    ),
  ],
src/components/common/header/header.stories.tsx (1)
24-24: 테스트 데이터의 이미지 URL을 내부 리소스로 변경하는 것이 좋습니다

Pinterest의 이미지 URL을 테스트 데이터로 사용하는 것은 다음과 같은 문제가 있을 수 있습니다:

외부 리소스의 가용성에 의존하게 됩니다

이미지가 삭제되거나 변경될 수 있습니다

저작권 문제가 발생할 수 있습니다

테스트용 이미지는 프로젝트 내부의 정적 리소스를 사용하는 것이 좋습니다. 예시:
-    profileImageUrl: 'https://i.pinimg.com/736x/3f/e4/f4/3fe4f4f3aee36ec57aa072cce2e016b3.jpg',
+    profileImageUrl: '/images/test-profile.jpg',

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 8b87010 and 843083e.

📒 Files selected for processing (2)

src/components/common/header/header.stories.tsx (1 hunks)
src/components/common/profile/Profile.stories.tsx (2 hunks)

🔇 Additional comments (3)

src/components/common/profile/Profile.stories.tsx (2)

42-58: 스토리 구성이 개선되었습니다.

스토리의 이름과 구조가 더 명확해졌습니다. 특히 SmallWithImage와 Editable 스토리는 컴포넌트의 다양한 상태를 잘 보여주고 있습니다.

하나 제안드리고 싶은 점은, 각 스토리에 대한 설명 주석을 좀 더 자세히 작성하면 좋을 것 같습니다. 예를 들어:

- // Small 크기와 외부 이미지
+ // Small 크기의 프로필 이미지 표시 예시
+ // imageUrl prop을 통해 외부 이미지를 사용하는 경우를 보여줍니다.

14-14: 사이즈 옵션이 확장되었습니다.

'header'와 'full' 사이즈가 추가되었네요. 이는 프로필 컴포넌트의 사용성을 향상시킬 것 같습니다. 다만, 각 사이즈의 용도와 차이점을 문서화하면 좋을 것 같습니다.

✅ Verification successful

사이즈 옵션이 적절하게 구현되어 있습니다.

컴포넌트 코드를 확인한 결과, 'header'와 'full' 사이즈가 다음과 같이 올바르게 구현되어 있습니다:

각 사이즈별 명확한 스타일링 클래스 정의
'header' 사이즈의 경우 반응형 디자인 적용
'full' 사이즈는 컨테이너 크기에 맞춰 조정

스토리북 설정과 실제 구현이 일치하며, 모든 사이즈 옵션이 적절하게 동작합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 새로운 사이즈 옵션이 컴포넌트에서 제대로 구현되었는지 확인

# Profile 컴포넌트에서 size prop 타입 정의 확인
ast-grep --pattern 'interface ProfileProps {
  $$$
  size?: $_;
  $$$
}'

Length of output: 472

Script:

#!/bin/bash
# Profile 컴포넌트에서 size prop이 실제로 어떻게 사용되는지 확인
ast-grep --pattern 'const Profile = ({ size = $_, $$$}) => {
  $$$
}'

# size 관련 스타일링 로직 확인
rg "size === ('small'|'header'|'large'|'full')" -A 3

Length of output: 455

Script:

#!/bin/bash
# Profile 컴포넌트의 전체 구현 확인
rg -U "const Profile.*?^}" -A 10 --multiline src/components/common/profile/index.tsx

# size에 따른 스타일링 클래스 확인
rg "className=.*size.*" -A 2 src/components/common/profile/index.tsx

Length of output: 157

Script:

#!/bin/bash
# Profile 컴포넌트 파일의 전체 내용 확인
cat src/components/common/profile/index.tsx

# Stories 파일에서 size 관련 설정 확인
cat src/components/common/profile/Profile.stories.tsx

Length of output: 3260

src/components/common/header/header.stories.tsx (1)

Line range hint 1-90: AI 요약에서 언급된 스토리 삭제 확인이 필요합니다

AI 요약에 따르면 WithToggleCookie와 LoginPage 스토리가 삭제되었다고 하지만, 이러한 변경사항을 확인할 수 없습니다.

삭제된 스토리의 존재 여부를 확인하기 위해 다음 스크립트를 실행합니다:

✅ Verification successful

The git log output confirms that both WithToggleCookie and LoginPage stories were indeed removed in previous commits. Let me generate the final response in Korean:

스토리 삭제가 확인되었습니다

Git 히스토리를 통해 WithToggleCookie와 LoginPage 스토리가 실제로 삭제된 것이 확인되었습니다. AI 요약은 정확했으며 현재 코드베이스의 상태와 일치합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: git 히스토리에서 삭제된 스토리 확인

# 이전 커밋에서 해당 스토리들의 존재 여부 확인
git log -p -- "src/components/common/header/header.stories.tsx" | grep -A 5 "WithToggleCookie\|LoginPage"

Length of output: 2136

github-actions · 2024-11-18T05:24:39Z

🚀storybook: https://67206cc6ff9d7a05a3528ff8-ivmjdtdfmm.chromatic.com/

coderabbitai

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (4)

src/store/use-auth-store.tsx (1)
34-39: 상태 업데이트 로직을 더 함수형으로 개선할 수 있습니다.

현재 구현은 파라미터를 직접 수정하고 있어 eslint 규칙을 비활성화해야 했습니다. 이를 함수형으로 개선하면 더 깔끔한 코드가 될 것 같습니다.

다음과 같은 방식으로 개선을 고려해보세요:
-onRehydrateStorage: () => (state) => {
-  if (state) {
-    // eslint-disable-next-line no-param-reassign
-    state.rehydrated = true; // 상태 복원 완료
-  }
-},
+onRehydrateStorage: () => (state) => {
+  if (!state) return;
+  return {
+    ...state,
+    rehydrated: true, // 상태 복원 완료
+  };
+},
src/app/(crew)/my-page/_components/profile-card/container.tsx (3)
8-8: 타입 임포트 최적화가 필요합니다.

User 타입만 사용하므로, 더 구체적인 타입 임포트를 사용하는 것이 좋습니다.
-import { User } from '@/src/types/auth';
+import type { User } from '@/src/types/auth';
46-46: 로딩 상태의 접근성 개선이 필요합니다.

현재 로딩 상태는 단순한 div로 표시되어 있습니다. 스크린 리더 사용자를 위한 접근성 개선이 필요합니다.
-if (isLoading) return <div>로딩 중...</div>;
+if (isLoading) return (
+  <div role="status" aria-live="polite">
+    <span className="sr-only">로딩 중...</span>
+    로딩 중...
+  </div>
+);
79-79: 프로퍼티 전달 방식 최적화가 필요합니다.

객체 스프레드와 프로퍼티 재정의를 단순화할 수 있습니다.
-return <ProfileCardPresenter data={{ ...user, profileImageUrl }} onEdit={handleEdit} />;
+return <ProfileCardPresenter data={user} profileImageUrl={profileImageUrl} onEdit={handleEdit} />;
이렇게 수정하면 ProfileCardPresenter의 props 타입도 더 명확해집니다.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 843083e and 6168d99.

📒 Files selected for processing (2)

src/app/(crew)/my-page/_components/profile-card/container.tsx (1 hunks)
src/store/use-auth-store.tsx (2 hunks)

🔇 Additional comments (3)

src/store/use-auth-store.tsx (1)

9-9: 상태 복원 추적을 위한 속성 추가가 적절합니다!

rehydrated 속성의 추가로 상태 복원 여부를 명확하게 추적할 수 있게 되었습니다.

src/app/(crew)/my-page/_components/profile-card/container.tsx (2)

18-42: 이전 리뷰 의견이 여전히 유효합니다.

useEffect 내의 타이머 사용과 에러 처리에 대한 이전 리뷰 의견이 아직 반영되지 않았습니다.

49-77: 🛠️ Refactor suggestion

이전 리뷰 의견이 여전히 유효하며, 추가 개선이 필요합니다.

파일 업로드 처리 로직의 보안 관련 이전 리뷰 의견이 아직 반영되지 않았습니다.
파일 업로드 중 로딩 상태가 사용자에게 표시되지 않습니다.

파일 업로드 중 로딩 상태를 추가하기 위해 다음과 같이 수정하는 것을 제안합니다:

 const handleEdit = () => {
+  const [isUploading, setIsUploading] = useState(false);
   ...
   input.onchange = async (event) => {
     const file = (event.target as HTMLInputElement)?.files?.[0];
     if (file) {
       ...
       try {
+        setIsUploading(true);
         await updateUserProfile(file);
         ...
       } catch (error) {
         toast.error('파일 업로드에 실패했습니다.');
+      } finally {
+        setIsUploading(false);
       }
     }
   };
   input.click();
 };

coderabbitai · 2024-11-18T05:33:45Z

src/store/use-auth-store.tsx

+      rehydrated: false,
+      login: (token) => set({ isAuth: true, token }),


🛠️ Refactor suggestion

토큰 유효성 검증 로직 추가를 고려해주세요.

login 메서드에서 토큰의 유효성을 검증하는 로직이 없습니다. 잘못된 토큰으로 인한 문제를 방지하기 위해 기본적인 검증이 필요할 것 같습니다.

다음과 같은 방식으로 구현을 고려해보세요:

-login: (token) => set({ isAuth: true, token }), +login: (token) => { + if (!token || typeof token !== 'string' || token.length === 0) { + throw new Error('유효하지 않은 토큰입니다.'); + } + set({ isAuth: true, token }); +},

Also applies to: 29-29

github-actions · 2024-11-18T05:38:03Z

🚀storybook: https://67206cc6ff9d7a05a3528ff8-ibtcgdaxzp.chromatic.com/

github-actions · 2024-11-19T00:25:35Z

🚀storybook: https://67206cc6ff9d7a05a3528ff8-qbcgmzvofa.chromatic.com/

coderabbitai

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (4)

src/_apis/auth/user-apis.ts (2)
4-11: 오류 처리를 추가하는 것이 좋겠습니다.

사용자 데이터 조회 실패 시 적절한 오류 처리가 없습니다. 오류 발생 시 로깅과 함께 적절한 처리가 필요합니다.

다음과 같은 수정을 제안드립니다:
 export function getUser(): Promise<User> {
   return fetchApi<{ data: User }>('/auths/user', {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
     },
-  }).then((response) => response.data);
+  })
+    .then((response) => response.data)
+    .catch((error) => {
+      console.error('사용자 정보 조회 실패:', error);
+      throw error;
+    });
 }
1-50: API 응답 처리에 대한 일관된 패턴이 필요합니다.

현재 각 API 함수마다 응답 처리와 오류 처리 방식이 다릅니다. 다음과 같은 아키텍처 개선을 제안드립니다:

공통 응답 인터페이스 정의

중앙화된 오류 처리 유틸리티 구현

API 응답 타입의 일관성 유지

예시 구현:
interface ApiResponse<T> {
  data: T;
  message: string;
  success: boolean;
}

function handleApiError(error: unknown, context: string) {
  console.error(`${context} 실패:`, error);
  throw error;
}

// 사용 예시
export function getUser(): Promise<User> {
  return fetchApi<ApiResponse<User>>('/auths/user', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((response) => response.data)
    .catch((error) => handleApiError(error, '사용자 정보 조회'));
}
src/app/(crew)/my-page/_components/profile-card/presenter.tsx (2)
31-31: 메뉴 위치 지정 방식 개선 필요

현재 transform translate를 사용한 메뉴 위치 지정은 유지보수가 어렵고 브라우저 호환성 문제가 발생할 수 있습니다. Mantine의 position 및 offset 속성을 활용하여 개선할 수 있습니다.
-<Menu.Dropdown className="translate-x-16 translate-y-2 transform md:translate-x-24 md:translate-y-0 lg:translate-x-24 lg:translate-y-0">
+<Menu.Dropdown>
40-42: 인사말 접근성 개선 필요

이모지를 포함한 인사말 텍스트의 접근성을 개선해야 합니다.
-<p className="text-xl font-semibold text-gray-900 md:text-2xl lg:text-2xl">
-  {data?.nickname} 님, 안녕하세요🙌
-</p>
+<p className="text-xl font-semibold text-gray-900 md:text-2xl lg:text-2xl">
+  <span>{data?.nickname} 님, 안녕하세요</span>
+  <span role="img" aria-label="환영 인사">🙌</span>
+</p>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between d157a7e and 8cd3ccd.

📒 Files selected for processing (3)

src/_apis/auth/user-apis.ts (1 hunks)
src/app/(crew)/my-page/_components/profile-card/container.tsx (1 hunks)
src/app/(crew)/my-page/_components/profile-card/presenter.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

src/app/(crew)/my-page/_components/profile-card/container.tsx

🔇 Additional comments (6)

src/_apis/auth/user-apis.ts (2)

14-24: 이전 리뷰 의견이 아직 반영되지 않았습니다.

이전 리뷰에서 지적된 multipart/form-data Content-Type 헤더 누락 및 오류 처리 관련 수정사항이 아직 반영되지 않았습니다.

26-40: 이전 리뷰의 리팩토링 제안이 아직 반영되지 않았습니다.

이전 리뷰에서 제안된 getUser와 fetchUpdatedUser 함수의 중복 제거 관련 리팩토링이 아직 반영되지 않았습니다.

src/app/(crew)/my-page/_components/profile-card/presenter.tsx (4)

1-11: 인터페이스 정의가 명확하고 깔끔합니다!

필요한 모든 의존성이 잘 정의되어 있고, ProfileCardProps 인터페이스가 명확하게 타입을 정의하고 있습니다.

28-28: 프로필 이미지 상태 처리 개선 필요

이전 리뷰에서 지적된 로딩 및 에러 상태 처리가 아직 구현되지 않았습니다.

32-35: 접근성 및 국제화 처리 필요

메뉴 아이템에 다음 사항들이 누락되어 있습니다:

스크린 리더를 위한 aria-label 속성
다국어 지원을 위한 i18n 처리

13-13: API 통합 검증 필요

onEdit와 onDelete 핸들러가 PR에서 언급된 API 패치와 올바르게 통합되어 있는지 확인이 필요합니다.

✅ Verification successful

Based on the search results, I can now generate the final response since I have sufficient information about the API integration. The code shows that:

updateUserProfile API is properly integrated in the container component
onEdit handler (handleEdit) uses this API to update the profile image
onDelete handler (handleDeleteProfile) uses resetUserProfileImage API
Both handlers are correctly passed to the presenter component

프로필 이미지 API가 올바르게 통합되어 있습니다

프로필 카드의 API 통합이 정상적으로 구현되어 있습니다:

onEdit: 프로필 이미지 업데이트 API (updateUserProfile)를 호출
onDelete: 기본 프로필 이미지로 초기화 API (resetUserProfileImage)를 호출

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# API 통합 검증
rg -g "*.ts*" "updateUserProfile|onEdit|onDelete" -A 5 -B 5

Length of output: 19388

coderabbitai · 2024-11-19T00:31:45Z

src/_apis/auth/user-apis.ts

+export async function resetUserProfileImage(): Promise<void> {
+  const url = `/auths/profile-image/reset`;
+
+  await fetchApi(url, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },


🛠️ Refactor suggestion

응답 처리와 오류 처리를 개선해야 합니다.

프로필 이미지 초기화 API에 다음 개선사항이 필요합니다:

응답 타입이 정의되어 있지 않습니다

오류 처리가 누락되었습니다

다음과 같은 수정을 제안드립니다:

-export async function resetUserProfileImage(): Promise<void> { +interface ResetProfileResponse { + message: string; + success: boolean; +} + +export async function resetUserProfileImage(): Promise<ResetProfileResponse> { const url = `/auths/profile-image/reset`; - await fetchApi(url, { + return fetchApi<ResetProfileResponse>(url, { method: 'PUT', headers: { 'Content-Type': 'application/json', }, - }); + }).catch((error) => { + console.error('프로필 이미지 초기화 실패:', error); + throw error; + }); }

📝 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.

Suggested change

export async function resetUserProfileImage(): Promise<void> {

const url = `/auths/profile-image/reset`;

await fetchApi(url, {

method: 'PUT',

headers: {

'Content-Type': 'application/json',

},

interface ResetProfileResponse {

message: string;

success: boolean;

}

export async function resetUserProfileImage(): Promise<ResetProfileResponse> {

const url = `/auths/profile-image/reset`;

return fetchApi<ResetProfileResponse>(url, {

method: 'PUT',

headers: {

'Content-Type': 'application/json',

},

}).catch((error) => {

console.error('프로필 이미지 초기화 실패:', error);

throw error;

});

}

minkyung5x5

최고에요!! 끝이보이네요 👍

yulrang

수고하셨습니다! 화이팅!

github-actions · 2024-11-19T03:09:18Z

🚀storybook: https://67206cc6ff9d7a05a3528ff8-sdljhluqxw.chromatic.com/

HaeJungg added 14 commits November 14, 2024 17:48

✨ feat: 마이페이지 이름변경, 페이지 서버로 변경

ffe3017

Merge branch 'develop' into Feat/125/MyPageProfile

15249d9

🐛 fix: User 데이터를 직접 할당하도록 수정

a0a4aef

✨ feat: 데이터 연결

79105a1

✨ feat: 회원정보 수정 api추가

fe90461

🚑 fix: getuser 수정

7c7efbd

📦 chore: 이미지 파일 변경

a54e378

✨ feat: 200이 빈 객체로 올 경우 처리

0250543

💄 design: 프로필 테두리 디자인 추가

f867559

✨ feat: 캐시를 지우고 새로 프로필 패치를 하기 위한 api 추가

92b1af1

✨ feat: 프로필 컴포넌트 개선, edit 경우 추가 및 수정

20522d6

💄 design: 헤더 360에서도 깨지지 않도록 수정

7a72219

✨ feat: 헤더 프로필 이미지 연결

8e373cf

✨ feat: 프로필 이미지 수정 api 추가, 드롭다운 추가

8b87010

HaeJungg added pages api fix labels Nov 18, 2024

HaeJungg self-assigned this Nov 18, 2024

HaeJungg linked an issue Nov 18, 2024 that may be closed by this pull request

마이페이지 프로필 #125

Closed

2 tasks

🐛 fix: 스토리북 수정

f92e139

coderabbitai bot reviewed Nov 18, 2024

View reviewed changes

🐛 fix: 헤더 스토리북 수정

843083e

CodeitFESI4-Team1 deleted a comment from coderabbitai bot Nov 18, 2024

coderabbitai bot reviewed Nov 18, 2024

View reviewed changes

HaeJungg added 2 commits November 18, 2024 14:20

✨ feat: auth store에 rehydration 처리 추가

47b8c5f

🐛 fix: rehydration 후 인증 및 데이터 로드 처리 추가

6168d99

Merge branch 'develop' into Feat/125/MyPageProfile

d157a7e

coderabbitai bot reviewed Nov 18, 2024

View reviewed changes

HaeJungg added 2 commits November 19, 2024 09:22

✨ feat: 기본 프로필로 돌아가는 api 추가

2b952f8

✨ feat: 초기 이미지로 넘어가는 api 연결

8cd3ccd

coderabbitai bot reviewed Nov 19, 2024

View reviewed changes

minkyung5x5 approved these changes Nov 19, 2024

View reviewed changes

yulrang approved these changes Nov 19, 2024

View reviewed changes

HaeJungg added 2 commits November 19, 2024 12:05

Merge branch 'develop' into Feat/125/MyPageProfile

92f9509

🐛 fix: lint error 수정

edbb817

HaeJungg merged commit 5e60ec4 into develop Nov 19, 2024
2 checks passed

This was referenced Nov 19, 2024

Feat/118/auth api #137

Merged

Feat/138/profile card #140

Merged

Fix/170/storybook build err #176

Merged

		export function Profile({ size = 'full', imageUrl, editable = false, onClick }: ProfileProps) {
		const finalSize = editable ? 'full' : size;

		rehydrated: false,
		login: (token) => set({ isAuth: true, token }),

Feat/125/my page profile #134

Feat/125/my page profile #134

Uh oh!

Conversation

HaeJungg commented Nov 18, 2024 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔖 Issue Ticket

✍️ Description

✅ Checklist

PR

Test

Summary by CodeRabbit

릴리스 노트

Uh oh!

coderabbitai bot commented Nov 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Possibly related PRs

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

github-actions bot commented Nov 18, 2024

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 18, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 18, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 18, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 18, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 18, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 18, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 18, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 18, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 18, 2024

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 18, 2024

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 18, 2024

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 18, 2024

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 18, 2024

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 18, 2024

Uh oh!

github-actions bot commented Nov 19, 2024

Uh oh!

HaeJungg commented Nov 18, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 18, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)