Fix/youl bug fix

[yulrang]

🔖 Issue Ticket

✍️ Description

자잘한 수정사항 수정해서 올리겠습니다~!

• 접근성 개선
• 파일인풋 동작 개선 : 5MB이상, JPG, PNG, JPEG 이외의 파일 올린 경우 블락
• 플레이스홀더 오타 수정
• 이미지 sizes 입력

✅ Checklist

PR

• Branch Convention 확인

  feat/ 피쳐, fix/ 버그 수정, refactor/ 개선

• Base Branch 확인
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test

• 로컬 작동 확인

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 접근성을 개선하기 위해 여러 폼 컴포넌트의 레이블 및 속성을 업데이트했습니다.
  • 데이터 로딩 시 사용자 경험을 개선하는 CrewSkeletonList 컴포넌트를 추가했습니다.
  • 이미지 업로드 시 오류 처리 및 유효성 검사를 강화했습니다.

• 버그 수정

  • 이미지 업로드 및 텍스트 필드의 유효성 검사 규칙을 조정했습니다.

• 문서화

  • 메타데이터를 업데이트하여 SEO 및 소셜 미디어 통합을 향상시켰습니다.

• 스타일

  • 여러 이미지 컴포넌트의 스타일을 개선하여 반응성을 높였습니다.

[coderabbitai]

Caution

Review failed

The head commit changed during the review from 0a5ab41 to 5e014cf.

Walkthrough

이 풀 리퀘스트는 여러 컴포넌트의 접근성과 사용자 인터페이스를 개선하는 변경 사항을 포함하고 있습니다. 주요 변경 사항으로는 CreateCrewForm, CreateGatheringForm, HomePage, CrewCard, DropDown, CreateCrewPage, DetailCrewPresenter, GatheringDetailModalPresenter, EditCrewPage, GatheringCardPresenter, ScheduledGatheringCardPresenter, FileInput, Profile, ReviewableGatheringCard와 같은 컴포넌트에서 이미지 속성과 레이블의 접근성을 향상시키는 업데이트가 포함됩니다. 또한, 메타데이터와 샘플 이미지 URL의 수정도 포함되어 있습니다.

Changes

파일 경로	변경 요약
src/app/(crew)/crew/create/_components/create-crew-form/index.tsx	접근성 향상: 레이블의 htmlFor 속성 및 id 업데이트, 스크린 리더 지원을 위한 sr-only 레이블 추가.
src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx	레이블을 <span>으로 변경, 접근성을 위한 id 속성 추가.
src/app/(crew)/page.tsx	로딩 상태 처리 변경: Loader 대신 CrewSkeletonList 사용. 접근성 향상.
src/components/common/crew-list/crew-card.tsx	<Image> 컴포넌트에 sizes 및 className 속성 추가.
src/components/common/input/drop-down/index.tsx	DropDownProps 인터페이스에 id 속성 추가.
src/app/(crew)/crew/create/page.tsx	<Image> 속성 업데이트: sizes 및 className 속성으로 변경.
src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx	<Image> 속성 업데이트: fill 및 sizes 속성으로 변경.
src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx	<Image> 속성 업데이트: sizes 속성 추가.
src/app/(crew)/crew/detail/[id]/edit/page.tsx	<Image> 속성 업데이트: sizes 및 className 속성으로 변경.
src/components/common/gathering-card/presenter.tsx	<Image> 속성 업데이트: fill 및 sizes 속성으로 변경.
src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx	<Image> 속성 업데이트: fill 및 sizes 속성으로 변경.
src/components/common/input/file-input-wrap/file-input/index.tsx	<Image> 컴포넌트에 sizes 속성 추가.
src/components/common/profile/index.tsx	<Image> 속성 업데이트 및 ProfileProps 인터페이스에 새로운 size 옵션 추가.
public/assets/images/crew-sample/index.tsx	ImgCrewSampleUrls 배열의 URL 수정.
public/assets/images/gathering-sample/index.tsx	ImgGatheringSampleUrls 배열의 URL 변경.
src/app/layout.tsx	metadata 객체 업데이트 및 Open Graph 메타 태그 추가.
src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx	<Image> 속성에 sizes 및 className 추가.

Possibly related PRs

• Hofix/index page #91: CreateCrewForm 컴포넌트의 변경 사항은 사용자 입력 처리를 개선하는 것과 관련이 있습니다.
• Feat/98/crew api 연결 #104: CreateCrewForm 컴포넌트의 업데이트는 이미지 업로드 및 데이터 처리와 관련이 있습니다.
• Feat/128/edit crew api 연결 #129: CreateCrewForm의 수정은 크루 데이터 생성 및 편집과 관련이 있습니다.
• Feat/153/detail page loading #155: CrewDetailSkeleton 컴포넌트의 도입은 데이터 로딩 상태 개선과 관련이 있습니다.

Suggested labels

components

Suggested reviewers

• HaeJungg
• minkyung5x5
• Rangbyeolang

🐇 변화의 바람이 불어와
크루와 함께하는 즐거운 날,
접근성 높이고, 이미지 빛나,
새로운 모습으로 다가와!
함께하는 이 순간, 기쁨 가득,
우리 크루의 꿈이 자라나! 🌟

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/app/(crew)/crew/create/_components/create-crew-form/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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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]

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

[coderabbitai]

Actionable comments posted: 10

🧹 Outside diff range and nitpick comments (21)

src/components/common/skeleton/my-review-skeleton-list/index.tsx (1)

9-14: 성능 최적화와 반응형 레이아웃 개선이 필요합니다.

1. Array 생성 방식을 최적화하고
2. 반응형 그리드 레이아웃을 적용하면 좋을 것 같습니다.

다음과 같이 수정하는 것을 제안합니다:

- <div className="grid grid-cols-1 gap-6" aria-label="콘텐츠 로딩 중">
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" aria-label="콘텐츠 로딩 중">
  {[...Array(num)].map((_, index) => (

그리고 Array 생성을 다음과 같이 최적화할 수 있습니다:

- {[...Array(num)].map((_, index) => (
+ {Array.from({ length: num }, (_, index) => (

src/components/common/skeleton/reviewable-review-skeleton-list/index.tsx (2)

10-13: 배열 인덱스를 key로 사용하는 것을 재고해 주세요.

React의 재조정(reconciliation) 과정에서 문제가 발생할 수 있으므로, 인덱스를 key로 사용하는 것은 권장되지 않습니다. 스켈레톤 컴포넌트의 특성상 큰 문제가 되지 않을 수 있지만, 더 안정적인 구현을 위해 고유한 식별자를 사용하는 것이 좋습니다.

다음과 같이 수정하는 것을 고려해보세요:

- <ReviewableReviewSkeleton key={index} />
+ <ReviewableReviewSkeleton key={`skeleton-${index}`} />

---

9-9: 접근성 개선을 위한 제안

현재 aria-label이 잘 구현되어 있지만, 로딩 중인 아이템의 수를 명시하면 더 나은 사용자 경험을 제공할 수 있습니다.

다음과 같이 수정하는 것을 제안합니다:

- <div className="grid grid-cols-1 gap-12" aria-label="콘텐츠 로딩 중">
+ <div className="grid grid-cols-1 gap-12" aria-label={`${num}개의 리뷰 콘텐츠 로딩 중`}>

src/components/common/skeleton/gathering-skeleton-list/index.tsx (1)

3-5: 인터페이스 프로퍼티 이름을 더 명확하게 개선하세요

num 프로퍼티 이름이 다소 모호합니다. 의도를 더 명확하게 전달하기 위해 skeletonCount 또는 itemCount와 같은 이름을 사용하는 것이 좋습니다.

interface GatheringSkeletonListProps {
-  num: number;
+  skeletonCount: number;
}

src/components/common/skeleton/my-gathering-skeleton/index.tsx (2)

1-1: 타입 안전성을 위해 타입 임포트 사용을 고려해보세요

더 나은 타입 안전성을 위해 다음과 같이 변경하는 것을 추천드립니다:

-import { Skeleton } from '@mantine/core';
+import type { SkeletonProps } from '@mantine/core';
+import { Skeleton } from '@mantine/core';

---

5-15: 스타일 구성 개선이 필요합니다

현재 스타일링에 대해 몇 가지 개선사항을 제안드립니다:

1. 재사용 가능한 클래스들을 상수로 분리
2. 반응형 디자인 브레이크포인트 일관성 확보
3. 절대 위치 지정 대신 Flexbox나 Grid 사용 고려

+const CONTAINER_CLASSES = 'flex gap-6 p-6';
+const IMAGE_CLASSES = 'h-28 w-28 rounded-xl md:h-32 md:w-32';
+const CONTENT_CLASSES = 'flex flex-col gap-3';
+
 export default function MyGatheringSkeleton() {
   return (
-    <div className="flex gap-6 p-6">
-      <Skeleton className="h-28 w-28 rounded-xl md:h-32 md:w-32" />
-      <div className="relative flex flex-col gap-3">
+    <div className={CONTAINER_CLASSES}>
+      <Skeleton className={IMAGE_CLASSES} />
+      <div className={CONTENT_CLASSES}>

src/components/common/skeleton/crew-skeleton-list/index.tsx (2)

9-9: 타입 안정성 개선이 필요합니다.

column 값에 대한 타입 제한이 없어 예상치 못한 값이 들어올 수 있습니다.

다음과 같이 개선해보세요:

-interface CrewSkeletonListProps {
-  num: number;
-  column?: number;
-}
+interface CrewSkeletonListProps {
+  num: number;
+  column?: 1 | 2;
+}

---

11-11: 접근성 개선이 필요합니다.

현재 aria-label이 로딩 상태만 알려주고 있습니다. 전체 아이템 수도 함께 제공하면 더 좋을 것 같습니다.

다음과 같이 개선해보세요:

-<div className={`grid grid-cols-1 gap-x-4 gap-y-6 ${columnStyle}`} aria-label="콘텐츠 로딩 중">
+<div 
+  className={`grid grid-cols-1 gap-x-4 gap-y-6 ${columnStyle}`} 
+  aria-label={`콘텐츠 로딩 중: ${num}개의 항목`}
+  role="status"
+>

src/app/(crew)/my-crew/hosted/page.tsx (1)

Line range hint 3-3: 사용하지 않는 Loader import를 제거해주세요.

CrewSkeletonList로 대체되어 더 이상 사용되지 않는 Loader import를 제거하면 좋겠습니다.

-import { Loader } from '@mantine/core';

src/app/(crew)/my-crew/joined/page.tsx (1)

19-19: 스켈레톤 UI 구현이 개선되었습니다.

기존의 단순한 로더를 더 세련된 스켈레톤 UI로 교체한 것이 좋은 개선입니다. 특히:

• num={6}이 쿼리의 페이지 크기와 일치하여 일관성이 있습니다
• column={1}로 레이아웃이 적절히 유지됩니다

다만, 사용자 경험을 더욱 향상시키기 위해 다음 사항을 고려해보시면 좋겠습니다.

스켈레톤 UI에 애니메이션 효과를 추가하여 더 자연스러운 로딩 상태를 표현하는 것을 고려해보세요. 예시:

-<CrewSkeletonList num={6} column={1} />
+<CrewSkeletonList num={6} column={1} animate={true} />

src/components/common/skeleton/my-gathering-skeleton-list/index.tsx (1)

14-19: 하드코딩된 너비값 개선이 필요합니다.

현재 하드코딩된 width 값들을 테마 시스템이나 설정으로 관리하면 좋을 것 같습니다.

CSS 변수나 테마 상수를 사용하여 관리하는 것을 고려해 보세요:

-          <div className="w-1/6">
+          <div className="w-[var(--gathering-sidebar-width)]">

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

16-18: useQuery 훅의 구현이 개선되었습니다.

isLoading 상태를 추가하여 데이터 로딩 상태를 추적할 수 있게 되었습니다. 이는 사용자 경험 향상에 도움이 됩니다.

다음과 같이 에러 처리를 추가하는 것을 고려해보세요:

-  const { data, isLoading, refetch } = useQuery(
+  const { data, isLoading, error, refetch } = useQuery(
     useGetHostedGatheringListQuery(formatDateToRequest(selectedDate)),
   );

---

Line range hint 1-37: 접근성 개선이 필요합니다.

로딩 상태에 대한 스크린 리더 지원이 누락되어 있습니다.

다음과 같이 aria-live 영역을 추가하는 것을 추천드립니다:

   return (
-    <div>
+    <div role="region" aria-live="polite">
       <div className="py-4 md:py-6">
         <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
       </div>

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

16-18: useQuery 훅 수정 승인 및 제안

isLoading 상태 추가는 적절하나, 에러 처리가 누락되어 있습니다.

다음과 같이 에러 처리를 추가하는 것을 고려해보세요:

- const { data, isLoading, refetch } = useQuery(
+ const { data, isLoading, error, refetch } = useQuery(
  useGetJoinedGatheringListQuery(formatDateToRequest(selectedDate)),
);

---

Line range hint 13-35: 성능 최적화 제안

컴포넌트의 불필요한 리렌더링을 방지하기 위해 다음 최적화를 고려해보세요:

1. React.memo를 사용하여 컴포넌트 메모이제이션
2. useCallback을 사용하여 onChange 핸들러 메모이제이션
3. useMemo를 사용하여 joinedGatheringList 메모이제이션

src/components/gathering-list/liked-list-container.tsx (1)

41-46: 로딩 상태 UI가 개선되었습니다만, 접근성 개선이 필요합니다.

스켈레톤 UI를 통해 로딩 상태의 시각적 피드백이 향상되었습니다. 하지만 스크린 리더 사용자를 위한 접근성 개선이 필요합니다.

다음과 같이 aria-label을 추가하는 것을 제안드립니다:

  if (isLoading)
    return (
-     <div className="mx-auto max-w-[1200px] px-4">
+     <div className="mx-auto max-w-[1200px] px-4" aria-label="모임 목록을 불러오는 중입니다">
        <GatheringSkeletonList num={6} />
      </div>
    );

src/components/common/crew-list/crew-card-list.tsx (1)

Line range hint 44-49: 이미지 URL 처리 방식 개선이 필요합니다.

현재 구현에서 몇 가지 개선이 필요한 부분이 있습니다:

1. 'string'을 특수값으로 사용하는 것은 타입 안정성을 해칩니다
2. 긴 플레이스홀더 이미지 URL을 상수로 분리하는 것이 좋습니다

다음과 같이 개선해보세요:

+const PLACEHOLDER_IMAGE_URL = 'https://media.istockphoto.com/id/1396814518/vector/image-coming-soon-no-photo-no-thumbnail-image-available-vector-illustration.jpg?s=612x612&w=0&k=20&c=hnh2OZgQGhf0b46-J2z7aHbIWwq8HNlSDaNp2wn_iko=';

export default function CrewCardList({ data, inWhere }: CrewCardListProps) {
  // ...
            imageUrl={
-              inform?.imageUrl === 'string'
-                ? 'https://media.istockphoto.com/id/1396814518/vector/image-coming-soon-no-photo-no-thumbnail-image-available-vector-illustration.jpg?s=612x612&w=0&k=20&c=hnh2OZgQGhf0b46-J2z7aHbIWwq8HNlSDaNp2wn_iko='
-                : inform?.imageUrl
+              !inform?.imageUrl || inform.imageUrl === 'string'
+                ? PLACEHOLDER_IMAGE_URL
+                : inform.imageUrl
            }

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

42-42: 로딩 상태 UI 개선이 잘 이루어짐

텍스트 기반 로딩 표시를 스켈레톤 컴포넌트로 대체한 것이 사용자 경험 측면에서 더 나은 접근입니다. 기존 로직을 유지하면서 시각적 피드백만 개선한 점이 좋습니다.

선택적 개선사항: 스켈레톤 로딩 시간이 길어질 경우를 대비하여 다음과 같은 타임아웃 처리를 고려해보세요:

  if (userLoading || !isAuthChecked) {
+   const [showTimeout, setShowTimeout] = useState(false);
+   useEffect(() => {
+     const timer = setTimeout(() => setShowTimeout(true), 5000);
+     return () => clearTimeout(timer);
+   }, []);
+   
+   if (showTimeout) {
+     return <div>로딩이 지연되고 있습니다. 잠시만 기다려주세요.</div>;
+   }
    return <ProfileSkeleton />;
  }

src/components/common/input/drop-down/index.tsx (1)

20-22: 매개변수 순서 개선 제안

필수 props를 선택적 props보다 먼저 배치하는 것이 좋습니다. id와 inWhere를 다른 선택적 props와 함께 마지막에 배치하는 것을 고려해보세요.

 export default function DropDown({
-  id,
-  inWhere = 'default',
   name,
   variant,
   data,
   value,
   onChange,
   placeholder,
+  id,
+  inWhere = 'default',
   className,
   error,
   ...rest
 }: DropDownProps)

src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx (1)

폼 레이블 패턴의 일관성 개선 필요

현재 폼에서 다음과 같은 일관성 문제가 확인되었습니다:

• 약속 이름, 장소, 모집 정원, 모집 설명/공지는 <label> 태그를 올바르게 사용
• 이미지 선택/첨부와 날짜는 <span> 태그를 사용하여 레이블링하고 있음

접근성 향상을 위해 다음 요소들의 <span> 태그를 <label> 태그로 변경하고 적절한 htmlFor 속성을 추가해야 합니다:

• 이미지 선택/첨부 필드
• 날짜 필드

이는 스크린 리더 사용자의 폼 탐색 경험을 개선하고 웹 접근성 표준을 준수하는데 도움이 될 것입니다.

🔗 Analysis chain

Line range hint 1-248: 전반적인 접근성 패턴 검토 필요

폼 전체적으로 레이블 처리가 일관성이 없습니다. 일부는 <label>을 사용하고 일부는 <span>을 사용하고 있어 혼란스럽습니다. 모든 입력 필드에 대해 일관된 접근성 패턴을 적용하는 것이 좋습니다.

다음 스크립트로 프로젝트 전체의 폼 레이블 패턴을 확인할 수 있습니다:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 프로젝트 전체의 폼 레이블 패턴 검사

# label 태그 사용 패턴 검색
echo "Label 태그 사용 패턴:"
rg '<label' -A 2

# span 태그를 레이블로 사용하는 패턴 검색
echo "\nSpan 태그를 레이블로 사용하는 패턴:"
rg '<span[^>]*>(?:[^<]*(?:<(?!\/span>)[^<]*)*)?(?:이름|날짜|시간|설명|제목|장소)' -A 2

Length of output: 5765

---

Script:

#!/bin/bash
# Description: 프로젝트 전체의 폼 레이블 패턴 검사 (수정된 버전)

# span 태그를 레이블로 사용하는 패턴 검색 (수정된 정규식)
echo "Span 태그를 레이블로 사용하는 패턴:"
rg '<span[^>]*class="[^"]*text-base[^"]*font-semibold[^"]*">' -A 2

# 특정 파일에서 span 태그 검색
echo "\n모임 생성 폼의 span 태그 사용:"
rg '<span' src/app/\(crew\)/crew/detail/\[id\]/_components/create-gathering/create-gathering-form/index.tsx -A 2

Length of output: 949

src/app/(crew)/crew/create/_components/create-crew-form/index.tsx (1)

327-330: 소개글 입력 필드의 문자 수 표시 및 접근성이 개선되었습니다.

• 레이블과 입력 필드의 연결이 적절히 구현되었습니다.
• 문자 수 표시가 동적으로 업데이트되어 사용자 경험이 향상되었습니다.

하나의 작은 제안사항이 있습니다:

문자 수 표시에 스크린 리더를 위한 설명을 추가하면 좋을 것 같습니다:

            <span>
-              <span className="text-blue-500">{introduce.length}</span>/100
+              <span className="text-blue-500" aria-label={`현재 ${introduce.length}자 입력됨, 최대 100자`}>
+                {introduce.length}
+              </span>/100
            </span>

Also applies to: 334-334, 343-343

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between a16dc81 and fef8165.

📒 Files selected for processing (25)

• src/app/(crew)/crew/create/_components/create-crew-form/index.tsx (9 hunks)
• src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx (3 hunks)
• src/app/(crew)/my-crew/hosted/page.tsx (2 hunks)
• src/app/(crew)/my-crew/joined/page.tsx (2 hunks)
• src/app/(crew)/my-gathering/hosted/page.tsx (2 hunks)
• src/app/(crew)/my-gathering/joined/page.tsx (2 hunks)
• src/app/(crew)/my-page/_components/profile-card/container.tsx (2 hunks)
• src/app/(crew)/page.tsx (5 hunks)
• src/components/common/crew-list/crew-card-list.tsx (1 hunks)
• src/components/common/crew-list/crew-card.tsx (1 hunks)
• src/components/common/input/date-time-picker/index.tsx (2 hunks)
• src/components/common/input/drop-down/index.tsx (3 hunks)
• src/components/common/skeleton/crew-skeleton-list/index.tsx (1 hunks)
• src/components/common/skeleton/crew-skeleton/index.tsx (1 hunks)
• src/components/common/skeleton/gathering-skeleton-list/index.tsx (1 hunks)
• src/components/common/skeleton/gathering-skeleton/index.tsx (1 hunks)
• src/components/common/skeleton/my-gathering-skeleton-list/index.tsx (1 hunks)
• src/components/common/skeleton/my-gathering-skeleton/index.tsx (1 hunks)
• src/components/common/skeleton/my-review-skeleton-list/index.tsx (1 hunks)
• src/components/common/skeleton/my-review-skeleton/index.tsx (1 hunks)
• src/components/common/skeleton/profile-skeleton/index.tsx (1 hunks)
• src/components/common/skeleton/reviewable-review-skeleton-list/index.tsx (1 hunks)
• src/components/common/skeleton/reviewable-review-skeleton/index.tsx (1 hunks)
• src/components/gathering-list/liked-list-container.tsx (2 hunks)
• tailwind.config.ts (1 hunks)

✅ Files skipped from review due to trivial changes (6)

• src/components/common/crew-list/crew-card.tsx
• src/components/common/skeleton/crew-skeleton/index.tsx
• src/components/common/skeleton/gathering-skeleton/index.tsx
• src/components/common/skeleton/my-review-skeleton/index.tsx
• src/components/common/skeleton/profile-skeleton/index.tsx
• src/components/common/skeleton/reviewable-review-skeleton/index.tsx

🔇 Additional comments (28)

src/components/common/skeleton/my-review-skeleton-list/index.tsx (2)

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

타입스크립트 컨벤션을 잘 따르고 있으며, props 인터페이스가 적절하게 정의되어 있습니다.

---

10-13: 🛠️ Refactor suggestion

배열 인덱스를 key로 사용하는 것을 개선해주세요.

배열 인덱스를 key로 사용하면 React의 재조정(reconciliation) 과정에서 문제가 발생할 수 있습니다. 더 안정적인 key 생성 방식을 도입하는 것이 좋습니다.

다음과 같이 수정하는 것을 제안합니다:

- <MyReviewSkeleton key={index} />
+ <MyReviewSkeleton key={`skeleton-${index}-${Date.now()}`} />

Likely invalid or redundant comment.

src/components/common/skeleton/reviewable-review-skeleton-list/index.tsx (1)

1-5: 인터페이스 구현이 깔끔합니다!

타입스크립트 네이밍 컨벤션을 잘 따르고 있으며, Props 인터페이스가 명확하게 정의되어 있습니다.

src/components/common/skeleton/gathering-skeleton-list/index.tsx (1)

9-12: 접근성과 반응형 디자인이 잘 구현되었습니다

• aria-label을 통한 로딩 상태 전달
• grid-cols-* 클래스를 활용한 효과적인 반응형 레이아웃 구현

src/components/common/skeleton/crew-skeleton-list/index.tsx (1)

1-6: 인터페이스 정의가 잘 되어있습니다!

타입스크립트 인터페이스가 명확하게 정의되어 있으며, props의 필수/선택 여부가 적절하게 지정되어 있습니다.

src/app/(crew)/my-crew/hosted/page.tsx (1)

19-19: 스켈레톤 로딩 UI 구현이 잘 되었습니다!

페이지 크기와 일치하는 적절한 수의 스켈레톤 아이템을 표시하여 사용자 경험이 향상되었습니다.

src/app/(crew)/my-crew/joined/page.tsx (1)

7-7: 스켈레톤 컴포넌트 임포트가 적절히 추가되었습니다.

새로운 로딩 상태 UI를 위한 컴포넌트 임포트가 올바르게 구현되었습니다.

src/components/common/skeleton/my-gathering-skeleton-list/index.tsx (2)

1-6: 깔끔한 타입 정의와 import 구문입니다!

인터페이스 정의가 명확하고 필요한 의존성만 가져오고 있습니다.

---

11-13: 🛠️ Refactor suggestion

배열 인덱스를 key로 사용하는 것을 재고해 주세요.

ESLint 규칙을 비활성화하는 대신, 더 안정적인 key 생성 방법을 고려해 보세요.

다음과 같이 수정하는 것을 제안합니다:

-        // eslint-disable-next-line react/no-array-index-key
-        <div key={index} className="md:flex">
+        <div key={`skeleton-${index}-${Date.now()}`} className="md:flex">

Likely invalid or redundant comment.

src/app/(crew)/my-gathering/hosted/page.tsx (1)

9-9: 스켈레톤 컴포넌트 임포트가 적절히 추가되었습니다.

로딩 상태를 시각적으로 표시하기 위한 스켈레톤 컴포넌트의 임포트가 잘 구현되었습니다.

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

9-9: 스켈레톤 컴포넌트 추가 승인

로딩 상태를 시각적으로 표현하기 위한 스켈레톤 컴포넌트 import가 적절하게 추가되었습니다.

---

33-34: 스켈레톤 UI 구현 검증 필요

스켈레톤 리스트의 개수(6개)가 실제 데이터 표시 패턴과 일치하는지 확인이 필요합니다.

✅ Verification successful

스켈레톤 UI의 아이템 개수가 적절합니다

페이지네이션 설정과 API 호출 결과를 확인한 결과, 실제 데이터도 페이지당 6개씩 로드되도록 구현되어 있습니다. 따라서 스켈레톤 UI의 6개 아이템은 실제 데이터 표시 패턴과 정확히 일치합니다.

• src/_apis/liked/liked-apis.ts에서 페이지 크기가 6으로 설정
• src/mock/gathering-data.ts에서도 limit: 6 확인
• 호스트된 모임과 참여한 모임 모두 동일한 패턴 사용

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 실제 데이터 표시 패턴 확인
rg -A 5 "GatheringListWithDate" --type tsx

Length of output: 70

---

Script:

#!/bin/bash
# Search for GatheringListWithDate component usage
rg "GatheringListWithDate" -A 5

# Search for any pagination or list size limits
rg "limit|size|per_page" --type ts

Length of output: 12137

---

Script:

#!/bin/bash
# Check MyGatheringSkeletonList implementation and any pagination settings
rg -A 10 "MyGatheringSkeletonList" --type-add 'tsx:*.{tsx,ts}'

# Check actual list size in the mock or API data
rg "joinedGatheringList" -B 5 -A 5 --type-add 'tsx:*.{tsx,ts}'

Length of output: 6104

src/components/gathering-list/liked-list-container.tsx (2)

8-8: 스켈레톤 컴포넌트 임포트가 적절히 추가되었습니다.

로딩 상태 UI 개선을 위한 GatheringSkeletonList 컴포넌트 임포트가 잘 되어있습니다.

---

41-46: 스켈레톤 아이템 개수 검증이 필요합니다.

고정된 스켈레톤 아이템 개수(6)가 실제 데이터의 페이지 크기와 일치하는지 확인이 필요합니다.

✅ Verification successful

Based on the search results, I can see that the pageSize is consistently set to 6 in the codebase, particularly in the gathering list components. Let me verify if this is the actual page size used in the API calls and container component.

---

Let me try a different approach to find the API calls and hooks:

---

Let me check the API query implementation:

---

스켈레톤 아이템 개수가 API 페이지 크기와 일치합니다.

API 호출 시 size=6으로 고정되어 있고, 스켈레톤 UI도 동일하게 6개의 아이템을 표시하고 있어 적절합니다. stories 파일에서도 pageSize: 6으로 일관되게 사용되고 있는 것을 확인했습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 페이지당 아이템 수 확인

# API 응답이나 설정 파일에서 페이지 크기 확인
rg -A 5 'pageSize|itemsPerPage|per_page' 

Length of output: 3902

---

Script:

#!/bin/bash
# Check API calls and container implementation
rg -A 5 "useGetGatherings|useGetLikedGatherings" 

Length of output: 50

---

Script:

#!/bin/bash
# Search for gathering API related files and hooks
rg -g "**/{api,hooks}/**" -l "gathering"

# Also check the container component implementation
cat src/components/gathering-list/liked-list-container.tsx

Length of output: 1953

---

Script:

#!/bin/bash
# Check the liked queries implementation
cat src/\_queries/liked/liked-queries.ts

# Also check the API implementation
cat src/\_apis/liked/liked-apis.ts

Length of output: 1318

src/components/common/crew-list/crew-card-list.tsx (1)

36-36: 그리드 간격 조정이 적절해 보입니다!

카드 사이의 간격을 늘려 시각적 계층 구조가 개선되었습니다.

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

13-13: 스켈레톤 컴포넌트 추가 적절함

로딩 상태의 시각적 표현을 위한 ProfileSkeleton 컴포넌트 import가 잘 추가되었습니다.

src/components/common/input/drop-down/index.tsx (2)

6-6: 접근성 향상을 위한 id 속성 추가 승인

선택적 id 속성을 추가함으로써 컴포넌트의 접근성이 향상되었습니다. 이는 ARIA 레이블링과 폼 연결에 도움이 됩니다.

---

78-78: 접근성 구현 확인 필요

id 속성이 올바르게 전달되었습니다. 연관된 label 요소들이 이 id를 참조하고 있는지 확인이 필요합니다.

✅ Verification successful

접근성 구현이 적절히 되어있음을 확인했습니다

DropDown 컴포넌트의 id 속성이 모든 사용처에서 적절하게 htmlFor와 연결되어 있습니다. 특히:

• 크루 생성 폼에서 crew-mainCategory, crew-subCategory 등의 id가 해당 label과 올바르게 연결
• 메인 페이지의 region, sort 드롭다운도 스크린리더를 위한 label과 정확히 연결

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 해당 컴포넌트의 사용처에서 label과 id가 올바르게 연결되어 있는지 확인

# htmlFor 속성에서 이 컴포넌트의 id 사용 여부 확인
rg -l "htmlFor.*id.*DropDown" 

Length of output: 31

---

Script:

#!/bin/bash
# 1. DropDown 컴포넌트의 사용처 검색
rg -A 5 "<DropDown" 

# 2. label과 htmlFor 속성 사용 검색 (더 넓은 범위)
rg -A 3 'htmlFor.*=.*["'\''].*["'\'']'

# 3. aria-labelledby 속성 검색
rg -A 3 'aria-labelledby.*=.*["'\''].*["'\'']'

# 4. id prop이 전달되는 패턴 검색
ast-grep --pattern 'id={$_}'

Length of output: 11818

src/components/common/input/date-time-picker/index.tsx (1)

64-64: 선택된 날짜의 스타일링이 개선되었습니다.

둥근 모서리 스타일을 추가하여 선택된 날짜의 시각적 피드백이 향상되었습니다. 다만, 접근성을 위해 색상 대비를 확인하는 것이 좋겠습니다.

src/app/(crew)/page.tsx (3)

5-5: 스켈레톤 UI 도입을 통한 사용자 경험 개선을 승인합니다!

로딩 상태를 표시하기 위한 스켈레톤 UI 패턴의 도입은 사용자 경험을 크게 향상시킬 것으로 보입니다.

Also applies to: 14-14

---

106-108: 접근성 개선을 위한 레이블 추가를 승인합니다!

스크린 리더 사용자를 위한 레이블 추가와 id 속성 설정은 웹 접근성 표준을 준수하는 좋은 개선사항입니다.

Also applies to: 110-110, 121-123, 125-125

---

145-145: 스켈레톤 리스트 구성이 실제 컨텐츠와 일치하는지 확인이 필요합니다.

스켈레톤 UI의 열 수와 아이템 수가 실제 CrewCardList 컴포넌트의 레이아웃과 일치하는지 확인해주세요.

✅ Verification successful

스켈레톤 UI 구성이 실제 컨텐츠 레이아웃과 일치합니다

CrewCardList 컴포넌트가 lg:grid-cols-2 스타일을 사용하여 2열 그리드 레이아웃을 구현하고 있으며, 실제 데이터 로딩 시 표시되는 CrewSkeletonList의 column={2} 설정과 일치합니다. 따라서 로딩 상태의 시각적 표현이 실제 컨텐츠와 자연스럽게 전환될 것입니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify if CrewCardList uses the same layout configuration

# Check CrewCardList implementation
rg -A 10 "CrewCardList.*=.*{" src/components/common/crew-list/crew-card-list.tsx

Length of output: 182

---

Script:

#!/bin/bash
# Search for CrewCardList component implementation
rg -A 10 "CrewCardList" src/components/common/crew-list/crew-card-list.tsx

# Search for actual usage of CrewCardList in the crew page
rg -A 10 "CrewCardList" src/app/\(crew\)/page.tsx

# Find any grid or column related styles
rg "grid|column" src/components/common/crew-list/crew-card-list.tsx

Length of output: 1846

tailwind.config.ts (1)

124-124: 새로운 카드 그림자 스타일이 추가되었습니다!

새로운 card 그림자 설정이 적절하게 구현되었습니다. 은은한 파란색 색조와 적당한 깊이로 카드 컴포넌트의 시각적 계층을 잘 표현할 것으로 보입니다.

다음 파일들에서 새로운 그림자 스타일의 사용을 확인해보세요:

✅ Verification successful

새로운 그림자 스타일이 크루 카드 컴포넌트에서 적절히 사용되고 있습니다

shadow-card 스타일이 crew-card.tsx 컴포넌트의 호버 효과로 구현되어 있으며, 카드의 시각적 상호작용을 자연스럽게 강화하고 있습니다. 트랜지션 효과(transition-shadow)와 함께 사용되어 부드러운 사용자 경험을 제공합니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 설명: card 그림자 스타일을 사용하는 컴포넌트 검색

# card 그림자를 사용하는 모든 파일 검색
rg "shadow-card" --type tsx

Length of output: 55

---

Script:

#!/bin/bash
# 파일 확장자를 지정하지 않고 전체 검색
rg "shadow-card"

# TypeScript/JavaScript 파일에서 shadow 관련 클래스 검색
rg "shadow.*card|card.*shadow" -g "*.{ts,tsx,js,jsx}"

# Tailwind 클래스 사용 패턴 검색
rg "class.*shadow.*card|class.*card.*shadow" -g "*.{ts,tsx,js,jsx}"

Length of output: 865

src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx (1)

222-225: Textarea에 id 속성 추가는 좋은 개선입니다

Textarea 컴포넌트에 id를 추가한 것은 레이블과의 연결성을 높여 접근성을 개선하는 좋은 변경입니다.

src/app/(crew)/crew/create/_components/create-crew-form/index.tsx (4)

157-157: 메인 카테고리 접근성 개선이 적절히 구현되었습니다.

htmlFor와 id 속성이 일치하도록 수정되어 스크린 리더 사용자의 접근성이 향상되었습니다.

Also applies to: 170-170

---

184-186: 세부 카테고리 레이블 추가로 접근성이 개선되었습니다.

sr-only 클래스를 사용한 레이블 추가는 시각적 디자인을 해치지 않으면서 스크린 리더 사용자를 위한 접근성을 제공하는 좋은 방법입니다.

Also applies to: 193-193

---

245-245: 메인 위치 선택 접근성 개선이 적절히 구현되었습니다.

htmlFor와 id 속성이 일치하도록 수정되어 스크린 리더 사용자의 접근성이 향상되었습니다.

Also applies to: 258-258

---

272-274: 세부 위치 레이블 추가로 접근성이 개선되었습니다.

sr-only 클래스를 사용한 레이블 추가는 시각적 디자인을 해치지 않으면서 스크린 리더 사용자를 위한 접근성을 제공하는 좋은 방법입니다.

Also applies to: 282-282

[coderabbitai]

🛠️ Refactor suggestion

성능 최적화를 위한 개선사항이 있습니다

1. Array 스프레드 연산자 대신 Array.from을 사용하면 더 효율적입니다.
2. index를 key로 사용하는 것은 권장되지 않습니다.

- {[...Array(num)].map((_, index) => (
-   // eslint-disable-next-line react/no-array-index-key
-   <GatheringSkeleton key={index} />
- ))}
+ {Array.from({ length: num }, (_, index) => (
+   <GatheringSkeleton key={`skeleton-${index}`} />
+ ))}

📝 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

	{[...Array(num)].map((_, index) => (
	// eslint-disable-next-line react/no-array-index-key
	<GatheringSkeleton key={index} />
	))}
	{Array.from({ length: num }, (_, index) => (
	<GatheringSkeleton key={`skeleton-${index}`} />
	))}

[coderabbitai]

🛠️ Refactor suggestion

컴포넌트 문서화 및 타입 정의가 필요합니다

컴포넌트의 목적과 사용법을 명확히 하기 위해 JSDoc 문서화와 타입 정의를 추가하는 것이 좋습니다:

+interface MyGatheringSkeletonProps {
+  className?: string;
+}
+
+/**
+ * 모임 정보가 로딩중일 때 표시되는 스켈레톤 UI 컴포넌트
+ */
-export default function MyGatheringSkeleton() {
+export default function MyGatheringSkeleton({ className }: MyGatheringSkeletonProps) {

📝 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 default function MyGatheringSkeleton() {
	interface MyGatheringSkeletonProps {
	className?: string;
	}
	/**
	* 모임 정보가 로딩중일 때 표시되는 스켈레톤 UI 컴포넌트
	*/
	export default function MyGatheringSkeleton({ className }: MyGatheringSkeletonProps) {

[coderabbitai]

⚠️ Potential issue

접근성 개선이 필요합니다

스크린 리더 사용자를 위한 접근성 개선이 필요합니다:

 export default function MyGatheringSkeleton() {
   return (
-    <div className="flex gap-6 p-6">
+    <div 
+      className="flex gap-6 p-6"
+      role="status"
+      aria-label="모임 정보 로딩 중"
+    >
       <Skeleton className="h-28 w-28 rounded-xl md:h-32 md:w-32" />

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

[coderabbitai]

🛠️ Refactor suggestion

배열 인덱스를 key로 사용하는 것은 권장되지 않습니다.

React의 재조정(reconciliation) 과정에서 문제가 발생할 수 있습니다. 더 안정적인 key 생성 방법을 고려해보세요.

다음과 같이 개선해보세요:

-{[...Array(num)].map((_, index) => (
-  // eslint-disable-next-line react/no-array-index-key
-  <CrewSkeleton key={index} />
-))}
+{[...Array(num)].map((_, index) => (
+  <CrewSkeleton key={`crew-skeleton-${index}-${Date.now()}`} />
+))}

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

[coderabbitai]

🛠️ Refactor suggestion

접근성 개선이 필요합니다.

스켈레톤 UI에 적절한 ARIA 속성을 추가하여 스크린 리더 사용자의 경험을 개선해 주세요.

다음과 같이 수정하는 것을 제안합니다:

-        <div className="md:flex">
+        <div 
+          className="md:flex"
+          role="status"
+          aria-label="모임 정보 로딩 중"
+        >
           <div className="w-1/6">
             <div className="flex flex-col gap-2">
-              <Skeleton className="h-4 w-36" />
-              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-4 w-36" aria-hidden="true" />
+              <Skeleton className="h-4 w-20" aria-hidden="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

	<div key={index} className="md:flex">
	<div className="w-1/6">
	<div className="flex flex-col gap-2">
	<Skeleton className="h-4 w-36" />
	<Skeleton className="h-4 w-20" />
	</div>
	</div>
	<div className="relative -mb-3.5 w-0.5 bg-gray-200">
	<div className="md:corner-dot" />
	</div>
	<div className="flex-1 pb-6 md:pl-8">
	<MyGatheringSkeleton />
	</div>
	</div>
	<div
	key={index}
	className="md:flex"
	role="status"
	aria-label="모임 정보 로딩 중"
	>
	<div className="w-1/6">
	<div className="flex flex-col gap-2">
	<Skeleton className="h-4 w-36" aria-hidden="true" />
	<Skeleton className="h-4 w-20" aria-hidden="true" />
	</div>
	</div>
	<div className="relative -mb-3.5 w-0.5 bg-gray-200">
	<div className="md:corner-dot" />
	</div>
	<div className="flex-1 pb-6 md:pl-8">
	<MyGatheringSkeleton />
	</div>
	</div>

[coderabbitai]

🛠️ Refactor suggestion

로딩 상태 UI가 적절히 구현되었습니다.

스켈레톤 로딩 상태와 데이터 표시가 조건부 렌더링으로 잘 구현되었습니다. 하지만 에러 상태 처리가 누락되어 있습니다.

다음과 같이 에러 상태 처리를 추가하는 것을 추천드립니다:

   {isLoading && <MyGatheringSkeletonList num={6} />}
+  {error && <div className="text-red-500">데이터를 불러오는 중 오류가 발생했습니다.</div>}
   {hostedGatheringList && <GatheringListWithDate gatheringList={hostedGatheringList} />}

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

[coderabbitai]

🛠️ Refactor suggestion

날짜 선택 로직 개선이 필요합니다.

현재 구현에서 몇 가지 잠재적인 문제점이 있습니다:

1. isSelected 변수가 항상 true를 반환하여 조건문이 불필요합니다
2. 시간대 변환 시 중복 코드가 발생할 수 있습니다

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

- const newDate = new Date(selected);
- const isSelected = selected;
+ const newDate = new Date(selected);

  newDate.setFullYear(Number(date.getFullYear()));
  newDate.setMonth(Number(date.getMonth()));
  newDate.setDate(Number(date.getDate()));

  const kstDate = new Date(newDate.getTime() - newDate.getTimezoneOffset() * 60000).toISOString();

- if (isSelected) {
-   setSelected(newDate);
-   onChange(kstDate);
- }
+ setSelected(newDate);
+ onChange(kstDate);

또한 시간대 변환 로직을 별도의 유틸리티 함수로 분리하여 재사용성을 높이는 것을 고려해보세요.

📝 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

	const newDate = new Date(selected);
	const isSelected = selected;
	newDate.setFullYear(Number(date.getFullYear()));
	newDate.setMonth(Number(date.getMonth()));
	newDate.setDate(Number(date.getDate()));
	const kstDate = new Date(newDate.getTime() - newDate.getTimezoneOffset() * 60000).toISOString();
	if (isSelected) {
	setSelected(date);
	setSelected(newDate);
	onChange(kstDate);
	const newDate = new Date(selected);
	newDate.setFullYear(Number(date.getFullYear()));
	newDate.setMonth(Number(date.getMonth()));
	newDate.setDate(Number(date.getDate()));
	const kstDate = new Date(newDate.getTime() - newDate.getTimezoneOffset() * 60000).toISOString();
	setSelected(newDate);
	onChange(kstDate);

[coderabbitai]

⚠️ Potential issue

날짜 선택 레이블의 의미론적 마크업 개선 필요

날짜 선택 레이블도 <span> 태그로 변경되어 접근성이 저하되었습니다. 스크린 리더 사용자를 위해 <label> 태그를 사용해야 합니다.

다음과 같이 수정하는 것을 제안합니다:

-<span className="text-base font-semibold text-gray-800">날짜</span>
+<label htmlFor="gathering-datetime" className="text-base font-semibold text-gray-800">날짜</label>

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

[coderabbitai]

⚠️ Potential issue

접근성 개선을 위해 의미론적 태그 사용 필요

이미지 선택 레이블이 <span> 태그로 변경되어 접근성이 저하되었습니다. 스크린 리더 사용자를 위해 <label> 태그로 되돌리는 것이 좋습니다.

다음과 같이 수정하는 것을 제안합니다:

-<span className="text-base font-semibold text-gray-800">이미지 선택/첨부</span>
+<label htmlFor="gathering-image" className="text-base font-semibold text-gray-800">이미지 선택/첨부</label>

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

[coderabbitai]

🛠️ Refactor suggestion

이미지 선택 UI의 시맨틱 마크업 개선이 필요합니다.

label 엘리먼트를 span으로 변경하면 접근성이 저하될 수 있습니다.

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

-          <span className="text-base font-semibold text-gray-800 md:text-xl">
+          <label htmlFor="crew-image" className="text-base font-semibold text-gray-800 md:text-xl">
            대표이미지를 선택하거나 첨부해주세요.
-          </span>
+          </label>

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

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (8)

src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx (1)

60-66: 이미지 컴포넌트 속성이 적절하게 업데이트되었습니다.

Next.js의 Image 컴포넌트 사용이 모범 사례를 잘 따르고 있습니다. 반응형 이미지 처리를 위한 sizes 속성과 fill 속성이 적절하게 적용되었습니다.

접근성 향상을 위해 다음과 같은 수정을 제안합니다:

 <Image
   src={imageUrl}
   alt={title}
   fill
   sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
-  className="h-full w-full object-cover"
+  className="h-full w-full object-cover transition-opacity duration-300"
+  loading="lazy"
+  quality={85}
 />

• transition-opacity와 duration-300을 추가하여 이미지 로딩 시 부드러운 전환 효과를 제공
• loading="lazy"를 추가하여 성능 최적화
• quality={85}를 추가하여 이미지 품질과 성능의 적절한 균형을 유지

src/components/common/gathering-card/presenter.tsx (2)

Line range hint 71-76: 접근성 개선을 위한 제안사항이 있습니다.

타이머 아이콘 관련 개선사항:

1. 아이콘의 alt 텍스트를 더 명확하게 작성하면 좋을 것 같습니다 (예: "마감 임박 타이머 아이콘")
2. 반복되는 아이콘 크기 값을 상수로 분리하면 유지보수가 더 용이할 것 같습니다

다음과 같이 수정해보시는 건 어떨까요?

+ const ICON_SIZE = 16;
// ... 
- <Image src={IcoTimer} alt="timer icon" width={16} height={16} />
+ <Image src={IcoTimer} alt="마감 임박 타이머 아이콘" width={ICON_SIZE} height={ICON_SIZE} />

---

Line range hint 13-28: Props 타입 정의를 개선할 수 있습니다.

현재 isWithin24Hours와 deadlineMessage가 독립적으로 optional로 정의되어 있어, 타입 안정성이 완벽하지 않습니다. 또한 각 prop의 용도에 대한 문서화가 있으면 좋을 것 같습니다.

다음과 같은 개선을 제안드립니다:

export interface GatheringCardPresenterProps {
  /** 모임 고유 식별자 */
  id: number;
  /** 모임 대표 이미지 URL */
  imageUrl: string;
  /** 모임 제목 */
  title: string;
  // ... 기타 필수 props

  /** 24시간 이내 마감 여부 */
  isWithin24Hours?: boolean;
  /** 마감 시간 메시지 (isWithin24Hours가 true일 때 필수) */
  deadlineMessage?: string;
  /** 추가 스타일 클래스 */
  className?: string;
}

src/components/common/input/file-input-wrap/file-input/index.tsx (1)

122-128: 이미지 미리보기 컴포넌트의 속성이 개선되었습니다.

다음 사항들이 적절히 구현되었습니다:

• 반응형 이미지를 위한 sizes 속성
• 접근성을 위한 적절한 alt 텍스트
• Tailwind CSS를 활용한 일관된 스타일링

하나의 제안사항이 있습니다:

이미지 로딩 중 사용자 경험을 개선하기 위해 blur나 loading 속성 추가를 고려해보세요:

 <Image
   src={preview}
   fill
   sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
   alt="이미지 미리보기"
   className="h-full w-full object-cover"
+  loading="lazy"
+  placeholder="blur"
+  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..."
 />

src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx (1)

95-97: 아이콘 이미지에도 동일한 최적화가 적용되었습니다.

작은 아이콘 이미지에도 동일한 반응형 처리가 적용되었습니다. 하지만 아이콘의 경우 고정된 크기(20x20)로 사용되므로, sizes 속성이 불필요할 수 있습니다.

다음과 같이 수정하는 것을 고려해보세요:

<Image
  src={IcoUser}
  fill
- sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="아이콘"
  className="h-full w-full object-cover"
/>

src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx (3)

62-68: 이미지 컴포넌트 구성이 개선되었습니다! 👍

Next.js Image 컴포넌트의 최신 권장 사항에 맞게 업데이트되었습니다:

• fill 속성으로 컨테이너를 채우도록 설정
• sizes 속성으로 반응형 동작 최적화
• 스타일링이 className으로 깔끔하게 통합

성능 최적화를 위해 priority 속성 추가를 고려해보세요. 이 이미지는 페이지 상단에 있는 주요 컨텐츠이므로 우선순위를 높이면 LCP(Largest Contentful Paint) 성능이 향상될 수 있습니다.

 <Image
   src={imageUrl}
   alt={title}
   fill
   sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
   className="h-full w-full rounded-lg object-cover"
+  priority
 />

---

Line range hint 89-93: 접근성 개선이 필요합니다

현재 버튼들의 접근성이 부족합니다:

• 공유 버튼과 더보기 버튼에 스크린 리더를 위한 적절한 레이블이 없습니다
• 메뉴 아이템들의 역할이 명확하게 정의되어 있지 않습니다

다음과 같이 접근성을 개선해주세요:

-<button type="button" className="bg-transparent" onClick={onShareClick}>
+<button
+  type="button"
+  className="bg-transparent"
+  onClick={onShareClick}
+  aria-label="크루 정보 공유하기"
+>
   <Image src={ShareIco} alt="공유하기" className="h-6 w-6" />
 </button>

 <Menu.Target>
-  <div className="cursor-pointer">
+  <button
+    type="button"
+    className="cursor-pointer"
+    aria-label="크루 관리 메뉴 열기"
+  >
     <Image src={KebabIcon} alt="더보기" width={20} height={20} />
-  </div>
+  </button>
 </Menu.Target>

Also applies to: 94-98

---

62-68: 이미지 로딩 에러 처리가 필요합니다

현재 이미지 로딩 실패 시의 대체 동작이 정의되어 있지 않습니다.

다음과 같이 에러 처리를 추가해주세요:

 <Image
   src={imageUrl}
   alt={title}
   fill
   sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
   className="h-full w-full rounded-lg object-cover"
+  onError={(e) => {
+    e.currentTarget.src = '/assets/images/default-crew-image.jpg'
+  }}
 />

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between fef8165 and fea5c28.

📒 Files selected for processing (10)

• src/app/(crew)/crew/create/page.tsx (1 hunks)
• src/app/(crew)/crew/detail/[id]/_components/detail-crew-presenter.tsx (1 hunks)
• src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx (2 hunks)
• src/app/(crew)/crew/detail/[id]/edit/page.tsx (1 hunks)
• src/components/common/crew-list/crew-card.tsx (1 hunks)
• src/components/common/gathering-card/presenter.tsx (1 hunks)
• src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx (1 hunks)
• src/components/common/input/file-input-wrap/file-input/index.tsx (2 hunks)
• src/components/common/profile/index.tsx (1 hunks)
• src/components/common/writable-gathering-card/writable-gathering-card.tsx (2 hunks)

✅ Files skipped from review due to trivial changes (2)

• src/app/(crew)/crew/create/page.tsx
• src/app/(crew)/crew/detail/[id]/edit/page.tsx

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

• src/components/common/crew-list/crew-card.tsx

🧰 Additional context used

🪛 Biome

src/components/common/profile/index.tsx

[error] 71-71: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

🔇 Additional comments (7)

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

70-72: Image 컴포넌트의 최신 속성으로 업데이트되었습니다.

Next.js Image 컴포넌트의 최신 권장 사항에 맞게 속성이 업데이트되었습니다. fill과 sizes 속성을 사용하여 반응형 이미지 처리가 개선되었고, className을 통한 스타일링도 더 명확해졌습니다.

🧰 Tools

🪛 Biome

[error] 71-71: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

---

Line range hint 1-95: 전반적인 구현이 잘 되어있습니다.

• 컴포넌트 문서화가 잘 되어있습니다.
• 타입 정의가 명확합니다.
• 조건부 렌더링과 스타일링이 깔끔하게 구현되어 있습니다.
• 접근성을 고려한 alt 텍스트가 적절히 사용되었습니다.

🧰 Tools

🪛 Biome

[error] 71-71: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

src/components/common/writable-gathering-card/writable-gathering-card.tsx (2)

51-57: 이미지 최적화가 잘 구현되었습니다!

반응형 이미지 처리와 성능 최적화가 적절하게 구현되었습니다. sizes 속성을 통한 뷰포트 기반의 이미지 크기 조정과 object-cover를 통한 비율 유지는 좋은 접근입니다.

---

68-74: 아이콘 이미지 처리가 적절합니다.

아이콘에 object-contain을 사용한 것이 적절합니다. 접근성을 위한 대체 텍스트도 잘 제공되어 있습니다.

src/components/common/gathering-card/presenter.tsx (1)

63-65: Next.js Image 컴포넌트 속성이 최신 방식으로 업데이트되었습니다.

이미지 최적화와 반응형 처리가 적절하게 구현되었습니다. sizes 속성을 통해 뷰포트 크기에 따른 이미지 크기 조정이 잘 설정되어 있으며, fill과 함께 object-cover 스타일을 사용하여 이미지 비율이 올바르게 유지됩니다.

src/components/common/input/file-input-wrap/file-input/index.tsx (1)

101-104: 이미지 최적화 속성이 적절히 추가되었습니다.

반응형 이미지 처리를 위한 sizes 속성과 Tailwind CSS 클래스 기반 스타일링으로의 전환이 잘 이루어졌습니다.

src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx (1)

49-50: 이미지 반응형 처리가 개선되었습니다!

sizes 속성과 Tailwind의 object-cover 클래스를 사용하여 이미지의 반응형 처리가 더욱 효과적으로 개선되었습니다.

[github-actions]

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

[github-actions]

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

[coderabbitai]

Actionable comments posted: 2

🧹 Outside diff range and nitpick comments (3)

public/assets/images/gathering-sample/index.tsx (1)

Line range hint 1-5: 로컬 이미지 임포트와 S3 URL 사용의 불일치

현재 로컬 이미지를 임포트하고 있지만 실제로는 사용되지 않고 있습니다. 사용하지 않는 임포트는 제거하거나, 의도한 대로 사용해야 합니다.

불필요한 임포트를 제거하는 것을 추천드립니다:

-import ImgGatheringSample01 from './gathering-sample-1.jpg';
-import ImgGatheringSample02 from './gathering-sample-2.jpg';
-import ImgGatheringSample03 from './gathering-sample-3.jpg';
-
-const ImgGatheringSamples = [ImgGatheringSample01, ImgGatheringSample02, ImgGatheringSample03];
const ImgGatheringSampleUrls = [

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

73-74: 반응형 이미지 사이즈 최적화 제안

현재 sizes 속성이 일반적인 값으로 설정되어 있습니다. Profile 컴포넌트의 실제 크기에 맞게 더 구체적인 값을 지정하면 좋을 것 같습니다.

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

-            sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            sizes={
+              size === 'small' ? '24px' :
+              size === 'header' ? '40px' :
+              size === 'large' ? '56px' :
+              size === 'full' ? '100vw' :
+              '80px'  // captain size
+            }

🧰 Tools

🪛 Biome

[error] 73-73: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx (1)

53-59: 이미지 최적화 제안

이미지 컴포넌트의 반응형 처리가 잘 되어있습니다. 하지만 성능 최적화를 위해 다음과 같은 속성들을 추가하는 것을 고려해보세요:

• priority: 뷰포트에 바로 표시되는 이미지의 경우
• loading="lazy": 뷰포트 밖에 있는 이미지의 경우
• quality: 이미지 품질 조정 (기본값 75)

 <Image
   src={imageUrl}
   alt={gatheringName}
   fill
   sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
   className="h-full w-full object-cover"
+  loading="lazy"
+  quality={85}
 />

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between de86036 and 43fd284.

⛔ Files ignored due to path filters (5)

• public/assets/images/crew-sample/crew-sample-2.jpg is excluded by !**/*.jpg
• public/assets/images/gathering-sample/gathering-sample-1.jpg is excluded by !**/*.jpg
• public/assets/images/gathering-sample/gathering-sample-2.jpg is excluded by !**/*.jpg
• public/assets/images/gathering-sample/gathering-sample-3.jpg is excluded by !**/*.jpg
• public/assets/images/og.png is excluded by !**/*.png

📒 Files selected for processing (8)

• public/assets/images/crew-sample/index.tsx (1 hunks)
• public/assets/images/gathering-sample/index.tsx (1 hunks)
• src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx (1 hunks)
• src/app/layout.tsx (2 hunks)
• src/components/common/gathering-card/presenter.tsx (1 hunks)
• src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx (1 hunks)
• src/components/common/profile/index.tsx (1 hunks)
• src/components/my-page/reviewable-gatherings/reviewable-gathering-card.tsx (2 hunks)

✅ Files skipped from review due to trivial changes (1)

• public/assets/images/crew-sample/index.tsx

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

• src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx
• src/components/common/gathering-card/presenter.tsx
• src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx

🧰 Additional context used

🪛 Biome

src/components/common/profile/index.tsx

[error] 73-73: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

🔇 Additional comments (3)

public/assets/images/gathering-sample/index.tsx (1)

7-9: S3 URL 구조 및 접근성 검증이 필요합니다

S3 URL이 직접 하드코딩되어 있어 다음과 같은 잠재적인 문제가 있을 수 있습니다:

• 환경에 따른 버킷 이름 변경 시 코드 수정이 필요
• URL 노출로 인한 보안 위험

다음과 같은 개선을 제안드립니다:

1. S3 버킷 이름을 환경 변수로 관리
2. URL 생성 로직을 별도의 유틸리티 함수로 분리

src/app/layout.tsx (1)

12-12: 메타데이터 설명이 적절하게 업데이트되었습니다!

웹사이트의 목적을 명확하게 설명하는 한글 설명으로 변경되어 SEO 최적화에 도움이 될 것 같습니다.

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

Line range hint 19-25: 인터페이스 변경이 적절히 구현되었습니다!

'header' 사이즈 옵션이 추가되었고, 이에 대한 스타일링이 sizeClasses 객체에 올바르게 정의되어 있습니다.

🧰 Tools

🪛 Biome

[error] 73-73: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

[coderabbitai]

💡 Codebase verification

Open Graph 메타 태그 설정이 부분적으로 확인되었습니다.

1. /assets/images/og.png 이미지 파일이 public 디렉토리에 정상적으로 존재함을 확인했습니다.
2. og:url은 현재 하드코딩되어 있으며, 환경 변수를 통한 URL 설정이 이루어지지 않고 있습니다. 다음과 같은 개선이 필요합니다:
   • 배포 환경에 따라 다른 URL을 사용할 수 있도록 환경 변수 기반으로 수정
   • NEXT_PUBLIC_API_BASE_URL과 같이 환경별 URL 설정 방식 활용 권장

🔗 Analysis chain

Open Graph 메타 태그 설정을 확인해주세요.

다음 사항들을 검증해주시기 바랍니다:

1. /assets/images/og.png 이미지 파일이 실제로 존재하는지 확인
2. og:url이 환경(개발/스테이징/프로덕션)에 따라 올바르게 설정되는지 확인

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# og:image 파일 존재 여부 확인
fd "og.png" public/assets/images

# og:url 설정 관련 환경 변수 사용 여부 확인
rg -A 2 "NEXT_PUBLIC.*URL|VERCEL_URL" .env*

Length of output: 154

---

Script:

#!/bin/bash
# Check if there are any environment-related configurations in the codebase
rg -g "!{.git,node_modules}" "process\.env|NEXT_PUBLIC|VERCEL_URL" 

# Check if there are any URL configurations in Next.js config files
fd -e config.js -e config.ts | xargs cat

# Look for any environment configuration patterns in the codebase
ast-grep --pattern 'process.env.$_'

Length of output: 6571

[coderabbitai]

🛠️ Refactor suggestion

아이콘 이미지 최적화 필요

작은 아이콘 이미지에 불필요한 반응형 속성이 적용되어 있습니다. 고정 크기의 아이콘이므로 sizes 속성은 제거하는 것이 좋습니다.

 <Image
   alt="참여 인원"
   src={person}
   fill
-  sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
   className="h-full w-full object-contain"
 />

📝 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

	<Image
	alt="참여 인원"
	src={person}
	fill
	sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
	className="h-full w-full object-contain"
	/>
	<Image
	alt="참여 인원"
	src={person}
	fill
	className="h-full w-full object-contain"
	/>

[github-actions]

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

[coderabbitai]

Actionable comments posted: 5

🧹 Outside diff range and nitpick comments (6)

src/_apis/image/get-image-url.ts (1)

Line range hint 28-30: 불필요한 catch 블록 제거 권장

현재 catch 블록은 단순히 에러를 다시 throw하는 역할만 하고 있어 불필요합니다. 에러 변환이나 로깅 등의 추가 처리가 없다면 catch 블록을 제거하는 것이 코드를 더 간결하게 만들 것입니다.

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

-    } catch (error) {
-      throw error;
-    }
+    }

src/_queries/crew/crew-detail-queries.ts (1)

27-28: localStorage 정리 로직이 적절히 배치되었습니다.

성공적인 크루 생성 후 localStorage를 정리하는 것은 좋은 접근입니다. 다만, 다음 사항들을 고려해보시면 좋을 것 같습니다:

1. 라우팅 실패 시에도 localStorage 정리가 필요할 수 있습니다.
2. 에러 발생 시에도 불필요한 데이터가 남지 않도록 정리하는 것을 고려해보세요.

다음과 같이 개선해보시는 건 어떨까요?:

  onSuccess: (data) => {
    if (data === null || data === undefined) {
+     localStorage.removeItem('createCrew');
      return;
    }
    queryClient.invalidateQueries({ queryKey: ['crewLists', 'crewDetail'] });
    toast.success('크루가 생성되었습니다.');
    localStorage.removeItem('createCrew');

    router.push(`/crew/detail/${data.crewId}`);
  },
  onError: (error) => {
+   localStorage.removeItem('createCrew');
    toast.error(error.message);
  },

src/app/layout.tsx (1)

34-47: ToastContainer 설정이 잘 되어있습니다.

알림 제한, 위치 설정, 테마 등이 적절하게 구성되어 있습니다. 다만, 접근성 향상을 위한 설정을 추가하면 좋을 것 같습니다.

다음과 같이 접근성 관련 속성을 추가해보세요:

 <ToastContainer
   position="bottom-right"
   autoClose={3000}
   hideProgressBar={false}
   newestOnTop={false}
   closeOnClick
   rtl={false}
   pauseOnFocusLoss
   draggable
   pauseOnHover
   theme="light"
   transition={Bounce}
   limit={1}
+  role="alert"
+  aria-live="polite"
 />

src/components/common/input/file-input-wrap/index.tsx (2)

58-63: FileInput 컴포넌트에 에러 처리 기능이 구현되었습니다.

하지만 몇 가지 개선사항을 제안드립니다:

1. 에러가 발생했을 때 사용자에게 시각적 피드백을 제공하는 것이 좋을 것 같습니다
2. 에러 상태에서 파일 선택 UI의 접근성을 고려해야 합니다

다음과 같은 개선을 제안드립니다:

 <FileInput
   value={fileValue}
   onChange={handleFileInput}
   isBlur={isSampleSelected}
   error={error}
+  aria-invalid={error ? 'true' : 'false'}
+  aria-errormessage={error?.message}
 />

---

Line range hint 35-56: 반복되는 FileSample 컴포넌트 코드를 개선할 수 있습니다.

동일한 FileSample 컴포넌트가 세 번 반복되고 있습니다. 이를 배열을 사용하여 리팩토링하면 코드의 유지보수성이 향상될 것 같습니다.

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

-      <FileSample
-        isEdit={isEdit}
-        value={isEdit ? (value as string) : sample[0]}
-        image={sample[0]}
-        onChange={handleChange}
-        isBlur={isOtherSelected}
-      />
-      <FileSample
-        isEdit={isEdit}
-        value={isEdit ? (value as string) : sample[0]}
-        image={sample[1]}
-        onChange={handleChange}
-        isBlur={isOtherSelected}
-      />
-      <FileSample
-        isEdit={isEdit}
-        value={isEdit ? (value as string) : sample[0]}
-        image={sample[2]}
-        onChange={handleChange}
-        isBlur={isOtherSelected}
-      />
+      {sample.map((image, index) => (
+        <FileSample
+          key={index}
+          isEdit={isEdit}
+          value={isEdit ? (value as string) : sample[0]}
+          image={image}
+          onChange={handleChange}
+          isBlur={isOtherSelected}
+        />
+      ))}

src/components/common/input/file-input-wrap/file-input/index.tsx (1)

71-74: 에러 상태 변경 시 정리(cleanup) 로직을 추가해주세요.

에러 발생 시 미리보기를 초기화하는 것은 좋지만, 이전 상태에 대한 정리가 필요합니다.

다음과 같은 개선을 제안드립니다:

  useEffect(() => {
    if (error) {
+     if (preview) {
+       URL.revokeObjectURL(preview);
+     }
      setPreview(null);
    }
  }, [error]);

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 43fd284 and 96f1e22.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (10)

• src/_apis/image/get-image-url.ts (1 hunks)
• src/_queries/crew/crew-detail-queries.ts (1 hunks)
• src/app/(crew)/crew/create/_components/create-crew-form/index.tsx (13 hunks)
• src/app/(crew)/crew/create/page.tsx (1 hunks)
• src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx (7 hunks)
• src/app/(crew)/crew/detail/[id]/edit/page.tsx (1 hunks)
• src/app/(crew)/layout.tsx (0 hunks)
• src/app/layout.tsx (3 hunks)
• src/components/common/input/file-input-wrap/file-input/index.tsx (7 hunks)
• src/components/common/input/file-input-wrap/index.tsx (2 hunks)

💤 Files with no reviewable changes (1)

• src/app/(crew)/layout.tsx

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

• src/app/(crew)/crew/create/_components/create-crew-form/index.tsx
• src/app/(crew)/crew/create/page.tsx
• src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx
• src/app/(crew)/crew/detail/[id]/edit/page.tsx

🔇 Additional comments (6)

src/app/layout.tsx (2)

13-13: 메타데이터 설명이 적절하게 업데이트되었습니다.

웹사이트의 목적을 명확하게 설명하는 한글 설명으로 잘 수정되었습니다.

---

24-24: Open Graph 이미지 최적화를 확인해주세요.

소셜 미디어 공유 시 최적의 표시를 위해 og:image의 크기가 적절한지 확인이 필요합니다.

권장 이미지 크기:

• Facebook: 1200 x 630 pixels
• Twitter: 1200 x 675 pixels
• LinkedIn: 1200 x 627 pixels

src/components/common/input/file-input-wrap/index.tsx (2)

4-4: 타입 정의와 에러 처리 기능이 추가되었습니다.

react-hook-form의 FieldError 타입을 활용하여 파일 입력의 유효성 검사 기능이 강화되었습니다. 이는 사용자 경험 향상에 도움이 될 것으로 보입니다.

Also applies to: 12-12

---

16-16: 컴포넌트 시그니처가 적절히 업데이트되었습니다.

error 프롭이 추가되어 상위 컴포넌트로부터 에러 상태를 전달받을 수 있게 되었습니다.

src/components/common/input/file-input-wrap/file-input/index.tsx (2)

2-2: 타입 안전성과 에러 처리가 적절히 구현되었습니다.

react-hook-form의 FieldError 타입을 활용하여 폼 유효성 검사와 에러 처리를 체계적으로 구현한 것이 좋습니다.

Also applies to: 12-12, 22-22

---

99-102: Next.js Image 컴포넌트가 최적화되어 구현되었습니다.

반응형 이미지 처리를 위한 sizes 속성과 Tailwind CSS 클래스 사용이 적절합니다.

Also applies to: 120-126

[coderabbitai]

🛠️ Refactor suggestion

validateFile 함수 호출 최적화 필요

validateFile 함수가 두 번 호출되고 있어 성능상 비효율적이며, 함수가 부작용을 가질 경우 일관성 문제가 발생할 수 있습니다.

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

-      if (!validateFile(file)) {
-        throw new Error(validateFile(file) as string);
+      const validationResult = validateFile(file);
+      if (!validationResult) {
+        throw new Error(validationResult as string);

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

[coderabbitai]

💡 Codebase verification

createCrew localStorage 정리 코드가 두 곳에서 발견되었습니다

localStorage.removeItem('createCrew')가 다음 두 위치에서 발견되었습니다:

• src/app/(crew)/crew/create/_components/create-crew-form/index.tsx
• src/_queries/crew/crew-detail-queries.ts

동일한 cleanup 작업이 두 곳에서 수행되고 있어 중복 코드가 존재합니다. 한 곳으로 통합하는 것이 좋겠습니다.

🔗 Analysis chain

CreateCrewPage에서 중복 cleanup 코드 확인이 필요합니다.

이전 위치인 CreateCrewPage 컴포넌트에서 동일한 cleanup 코드가 완전히 제거되었는지 확인이 필요합니다.

다음 스크립트로 확인해보세요:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# CreateCrewPage에서 localStorage.removeItem('createCrew') 사용 여부 확인
rg "localStorage\.removeItem\('createCrew'\)" "src/app/(crew)/crew/create/page.tsx"

Length of output: 91

---

Script:

#!/bin/bash
# Check for any usage of 'createCrew' in localStorage operations within CreateCrewPage
rg "localStorage.*createCrew" "src/app/(crew)/crew/create/page.tsx"

# Also check the entire codebase for any remaining cleanup of 'createCrew' in localStorage
rg "localStorage.*createCrew"

# Use ast-grep to find any useEffect hooks that might contain cleanup
ast-grep --pattern 'useEffect(() => { $$$ }, $$$)'  "src/app/(crew)/crew/create/page.tsx"

Length of output: 543

[coderabbitai]

⚠️ Potential issue

react-toastify CSS 파일을 import 해주세요.

ToastContainer를 사용하기 위해서는 react-toastify의 CSS 파일도 함께 import 해야 합니다.

다음과 같이 수정해주세요:

import { Bounce, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';

📝 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

	import { Bounce, ToastContainer } from 'react-toastify';
	import { Bounce, ToastContainer } from 'react-toastify';
	import 'react-toastify/dist/ReactToastify.css';

[coderabbitai]

🛠️ Refactor suggestion

파일 처리 로직의 에러 처리를 개선해주세요.

파일 처리 과정에서 발생할 수 있는 예외 상황에 대한 처리가 부족합니다.

다음과 같은 개선을 제안드립니다:

  const handleFileLoad = (file: File) => {
    if (fileReader) {
      fileReader.abort();
    }

    const reader = new FileReader();
    setFileReader(reader);

+   reader.onerror = () => {
+     console.error('파일 읽기 오류:', reader.error);
+     setPreview(null);
+   };

    reader.onloadend = () => {
      if (reader.result) {
        setPreview(reader.result as string);
      }
    };
    reader.readAsDataURL(file);
  };

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0];
+     if (file.size > 5 * 1024 * 1024) {
+       console.error('파일 크기는 5MB를 초과할 수 없습니다.');
+       return;
+     }
      onChange(file);
      handleFileLoad(file);
    }
  };

Also applies to: 48-49

[coderabbitai]

⚠️ Potential issue

메모리 누수 가능성이 있는 상태 관리 로직을 수정해주세요.

현재 구현에는 다음과 같은 문제가 있습니다:

1. 불필요한 상태 업데이트가 발생할 수 있습니다
2. 이전 미리보기 URL이 제대로 정리되지 않을 수 있습니다

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

  useEffect(() => {
+   let mounted = true;
    if (!isBlur && value) {
      if (typeof value === 'string') {
+       if (preview) {
+         URL.revokeObjectURL(preview);
+       }
-       setPreview(value);
+       if (mounted) setPreview(value);
      } else {
        handleFileLoad(value);
-       onChange(value);  // 불필요한 상태 업데이트 제거
      }
    }
    if (isBlur && value) {
+     if (preview) {
+       URL.revokeObjectURL(preview);
+     }
      setPreview(null);
    }
+   return () => {
+     mounted = false;
+   };
-  }, [isBlur, value]);
+  }, [isBlur, value, preview]);

📝 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(() => {
	if (!isBlur && value) {
	if (typeof value === 'string') {
	setPreview(value);
	} else {
	handleFileLoad(value);
	onChange(value);
	}
	}
	useEffect(() => {
	let mounted = true;
	if (!isBlur && value) {
	if (typeof value === 'string') {
	if (preview) {
	URL.revokeObjectURL(preview);
	}
	if (mounted) setPreview(value);
	} else {
	handleFileLoad(value);
	}
	}
	if (isBlur && value) {
	if (preview) {
	URL.revokeObjectURL(preview);
	}
	setPreview(null);
	}
	return () => {
	mounted = false;
	};
	}, [isBlur, value, preview]);

[github-actions]

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

[github-actions]

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

[ChoYenii]

수고 많으셨습니다!