Feat/96/form

[yulrang]

🔖 Issue Ticket

#96

✍️ Description

• 드롭다운 값 선택시 포커스 아웃 되도록 수정
• 크루 새로 만들어지면 만들어진 디테일 페이지로 이동시키기
• 약속 잡기 -> 약속 만들기
• 캘린더 사용시 유효성 검사 오류 수정
• 글자 입력시 벨리데이션 오류 수정
• 약속 만들기 스크롤 두개로 보이는 문제
• 히어로 버튼 링크로 교체
• 파일 인풋에서 파일 선택시 형식, 사이즈 제한

노션에 수정사항 체크 표시 했습니다!

✅ Checklist

PR

• Branch Convention 확인

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

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

Test

• 로컬 작동 확인

Summary by CodeRabbit

릴리즈 노트

• 신규 기능

  • CreateCrewForm 및 CreateGatheringForm에서 입력 유효성 검사 개선.
  • CreateCrewPage에서 제출 후 크루 상세 페이지로 리디렉션 기능 추가.
  • GatheringDetailModalPresenter의 모달 제목 변경 및 레이아웃 개선.
  • DateTimePicker에서 과거 날짜 선택 비활성화 기능 추가.

• 버그 수정

  • 입력 필드의 오류 메시지 표시 방식 개선.
  • FileInput 컴포넌트의 미리보기 상태 수정.

• UI/UX 개선

  • 검색 입력란의 플레이스홀더 텍스트 업데이트.
  • 모달 및 버튼 스타일 개선을 통한 사용자 경험 향상.
  • HeroCrew 컴포넌트의 버튼 기능을 링크로 통합하여 사용자 인터페이스 개선.

• 데이터 업데이트

  • 사용자 및 크루 정보의 새로운 샘플 데이터 추가 및 기존 데이터 수정.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

이 풀 리퀘스트는 여러 컴포넌트의 폼 처리 및 유효성 검사 로직을 개선하는 변경 사항을 포함하고 있습니다. CreateCrewForm과 CreateGatheringForm에서 react-hook-form 라이브러리의 trigger 및 Controller 메소드를 사용하여 입력 필드의 유효성을 수동으로 검사하고, 오류 메시지를 각 필드 아래에 표시하도록 업데이트되었습니다. 또한, 모달 제목 변경 및 스타일 조정, 데이터 구조 확장 등의 수정이 포함되어 있습니다.

Changes

파일 경로	변경 요약
src/app/(crew)/crew/_components/create-crew-form/index.tsx	CreateCrewForm 컴포넌트의 유효성 검사 로직 개선, title 필드의 trigger 메소드 사용, subLocation 필드 필수화, 오류 메시지 표시 방식 업데이트, isSubmitting 상태 추가
src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx	initialValue 객체의 totalCount 속성을 0에서 2로 변경, 모달 제목을 "약속 잡기"에서 "약속 만들기"로 변경
src/app/(crew)/crew/_components/create-gathering-form/index.tsx	CreateGatheringForm에서 register 메소드를 Controller로 변경, useForm 훅의 초기값 설정 및 유효성 검사 로직 업데이트, useWatch 훅 추가
src/app/(crew)/crew/_components/create-gathering-modal/presenter.tsx	모달 제목 변경, 스타일 업데이트, scrollAreaComponent prop 추가, 구조 단순화
src/app/(crew)/crew/_components/gathering-detail-modal/presenter.tsx	scrollAreaComponent 추가, 모달 구조 재조정, 날짜 및 시간 포맷 업데이트
src/app/(crew)/crew/create/page.tsx	useRouter 추가, handleSubmit 함수에서 router.push()를 사용하여 제출 후 페이지 이동
src/app/(crew)/crew/detail/[id]/page.tsx	섹션 제목을 "크루 약속 잡기"에서 "크루 약속"으로 변경
src/app/(crew)/page.tsx	TextInput의 플레이스홀더 텍스트 변경, 레이아웃 조정
src/app/_components/hero/hero-crew.tsx	Button 컴포넌트의 import 경로 변경, Link 컴포넌트로 대체
src/components/common/input/drop-down/index.tsx	DropDownProps 인터페이스에 error prop 추가, 로컬 error 상태 제거
src/components/common/input/file-input-wrap/file-input/index.tsx	isBlur prop이 true일 때 미리보기 상태 조정
src/components/common/input/file-input-wrap/file-sample/index.tsx	convertUrlToFile 비동기 함수 제거
tailwind.config.ts	flexBasis 속성 값 변경
mock.json	사용자 가입, 로그인, 크루, 모임 및 리뷰 데이터 구조 확장
src/mock/review-data.ts	리뷰 데이터의 createdAt 타임스탬프 포맷 업데이트
src/utils/is-today.ts	날짜 비교 로직 수정, 한국 시간대 반영
src/components/common/input/date-time-picker/index.tsx	Calendar 컴포넌트에 excludeDate prop 추가, 과거 날짜 선택 비활성화

Possibly related PRs

• Hofix/index page #91: CreateCrewForm 컴포넌트의 폼 유효성 검사 및 상태 관리 업데이트와 관련된 변경 사항.

Suggested labels

pages, api

Suggested reviewers

• HaeJungg
• User850413
• minkyung5x5

🐰 변화의 바람이 불어와
폼이 더욱 똑똑해졌죠!
오류는 이제 안녕,
유효성 검사는 즐거워!
모달도 새롭게 변신,
사용자 경험이 한층 더!
함께 뛰어보아요, 크루와 함께! 🌟

Warning

There were issues while running the following tools:

🔧 eslint

next.config.mjs

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")
- /git/node_modules/eslint-config-next/node_modules/eslint-plugin-react-hooks/index.js (loaded in ".eslintrc.js » eslint-config-next/core-web-vitals » /home/jailuser/git/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-hqggidpeeb.chromatic.com/

[coderabbitai]

Actionable comments posted: 10

🧹 Outside diff range and nitpick comments (10)

src/app/_components/hero/hero-crew.tsx (1)

24-29: Link 컴포넌트로의 전환이 잘 이루어졌습니다.

Button을 Link로 교체한 것은 다음과 같은 장점이 있습니다:

• 시맨틱 HTML 구조 개선
• 인증 상태에 따른 조건부 라우팅
• 스타일링 일관성 유지

하나의 개선 사항을 제안드립니다:

Link 컴포넌트에 aria-label을 추가하여 접근성을 더욱 향상시킬 수 있습니다:

 <Link
   href={isAuth ? '/crew/create' : '/login'}
   className="btn-filled -translate-y-1 items-center rounded-xl px-4 py-2 text-sm font-semibold md:h-11 md:text-lg md:font-bold"
+  aria-label={isAuth ? '새로운 크루 만들기' : '로그인하여 크루 만들기'}
 >
   크루 만들기
 </Link>

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

Line range hint 16-32: 컴포넌트 props에 대한 문서화가 필요합니다.

각 prop의 목적과 사용법을 설명하는 JSDoc 문서를 추가하면 컴포넌트의 재사용성이 향상될 것 같습니다.

예시:

/**
 * @param variant - 드롭다운의 스타일 변형('default' 또는 'sort')
 * @param data - 드롭다운에 표시될 옵션 데이터
 * @param name - 폼 제출 시 사용될 필드 이름
 * ...
 */

---

33-52: 스타일 로직 최적화가 필요합니다.

현재 스타일 로직에 중복된 코드가 있습니다. 상수를 활용하여 다음과 같이 개선할 수 있습니다:

const STYLE_VARIANTS = {
  default: {
    focused: 'bg-black text-white placeholder:text-white',
    normal: 'bg-white text-gray-800 placeholder-gray-800'
  },
  sort: {
    focused: 'bg-black text-white placeholder:text-white sort-bg-on pl-10',
    normal: 'bg-white text-gray-800 placeholder-gray-800 sort-bg pl-10'
  }
} as const;

const getFocusStyle = () => {
  const styles = STYLE_VARIANTS[variant];
  return isFocused ? styles.focused : styles.normal;
};

---

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

현재 구현에 다음과 같은 접근성 관련 속성들이 누락되어 있습니다:

1. aria-label 또는 aria-labelledby 속성 추가
2. aria-invalid 속성을 error prop과 연동
3. 에러 메시지를 위한 aria-describedby 속성 추가

<Select
  error={error}
+ aria-label={placeholder}
+ aria-invalid={!!error}
+ aria-describedby={error ? `${name}-error` : undefined}
  // ... 기존 props
/>

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

Line range hint 1-124: 접근성 및 오류 처리 개선이 필요합니다.

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

1. 파일 크기 제한 및 검증
2. 이미지 업로드 실패 시 사용자 피드백
3. 스크린 리더를 위한 aria-label 추가
4. 로딩 상태 표시

다음과 같이 개선할 수 있습니다:

 export interface FileInputProps {
   value: File | StaticImageData | null;
   onChange: (value: File | StaticImageData | null) => void;
   isBlur: boolean;
+  maxSizeInMB?: number;
+  onError?: (error: string) => void;
 }

-export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
+export default function FileInput({ 
+  value, 
+  isBlur, 
+  onChange, 
+  maxSizeInMB = 5,
+  onError 
+}: FileInputProps) {
   const [preview, setPreview] = useState<string | null>(null);
   const [fileReader, setFileReader] = useState<FileReader | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
   
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
       const file = e.target.files[0];
+      if (file.size > maxSizeInMB * 1024 * 1024) {
+        onError?.(`파일 크기는 ${maxSizeInMB}MB 이하여야 합니다.`);
+        return;
+      }
+      setIsLoading(true);
       onChange(file);
       e.target.value = '';
       debouncedHandleFileLoad(file);
     }
   };

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

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

     reader.onloadend = () => {
       setPreview(reader.result as string);
+      setIsLoading(false);
     };
+    
+    reader.onerror = () => {
+      setIsLoading(false);
+      onError?.('이미지 로드 중 오류가 발생했습니다.');
+    };
     
     reader.readAsDataURL(file);
   };

   return (
     <div className="min-w-1/4 relative flex aspect-square w-1/4 gap-2">
       <label
         htmlFor="item-file"
         className="flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-xl bg-neutral-100"
+        aria-label="이미지 업로드"
       >
         {/* ... */}
       </label>
       {/* ... */}
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-neutral-100/50">
+          <span className="text-sm text-gray-500">로딩중...</span>
+        </div>
+      )}
     </div>
   );
 }

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

45-50: 이미지 최적화를 위한 제안

Next.js의 Image 컴포넌트 사용이 적절하나, 성능 최적화를 위해 몇 가지 속성을 추가하면 좋을 것 같습니다.

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

 <Image
   src={data?.imageUrl}
   alt="모임 이미지"
   fill
   style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+  priority={false}
+  sizes="(max-width: 520px) 100vw, 520px"
+  quality={75}
 />

---

120-146: 조건부 렌더링 로직 개선 필요

현재 버튼들의 조건부 렌더링이 중첩된 조건문으로 구현되어 있어 가독성이 떨어집니다.

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

-{!data?.isParticipant && (
-  <Button /* ... */ >참여하기</Button>
-)}
-{data?.isParticipant && !data?.isGatherCaptain && (
-  <Button /* ... */ >탈퇴하기</Button>
-)}
-{data?.isGatherCaptain && (
-  <Button /* ... */ >삭제하기</Button>
-)}
+{renderActionButton()}

+function renderActionButton() {
+  if (data?.isGatherCaptain) {
+    return <Button onClick={onDelete}>삭제하기</Button>;
+  }
+  if (data?.isParticipant) {
+    return <Button onClick={onExit}>탈퇴하기</Button>;
+  }
+  return <Button onClick={onJoin}>참여하기</Button>;
+}

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

29-39: 폼 초기화 및 상태 관리 개선 필요

useForm의 설정이 적절하나, 다음 사항들을 고려해보시기 바랍니다:

1. defaultValues가 누락된 필드가 있을 경우 controlled/uncontrolled 컴포넌트 경고가 발생할 수 있습니다.
2. mode: 'onBlur'는 사용자 경험 측면에서 즉각적인 피드백이 부족할 수 있습니다.

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

const {
  control,
  handleSubmit,
  trigger,
  formState: { errors, isValid },
} = useForm<CreateGatheringRequestType>({
  defaultValues: {
+   title: data.title || '',
+   location: data.location || '',
+   introduce: data.introduce || '',
+   imageUrl: data.imageUrl || '',
+   dateTime: data.dateTime || '',
+   totalCount: data.totalCount || 4,
  },
-  mode: 'onBlur',
+  mode: 'onChange',
});

---

175-194: 인원 수 입력 필드의 UX 개선 필요

현재 구현에서 다음 사항들이 개선되어야 합니다:

1. 에러 메시지가 사용자에게 표시되지 않습니다.
2. 최소/최대 인원수에 대한 안내가 없습니다.

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

<NumberInput
  {...field}
  id="gathering-totalCount"
  variant="filled"
  min={4}
  max={20}
+ error={errors.totalCount?.message}
+ description="최소 4명, 최대 20명까지 설정 가능합니다."
  classNames={{
    input:
      'h-11 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl',
+   error: 'text-red-500 text-sm mt-1',
+   description: 'text-gray-500 text-sm mt-1'
  }}
- placeholder="자세한 모집 정원을 입력해주세요."
+ placeholder="4-20명"
/>

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

86-91: 제목 유효성 검사 로직 개선을 제안드립니다.

현재 공백 제거 및 실시간 검증이 잘 구현되어 있으나, 다음과 같은 추가 검증을 고려해보시면 좋을 것 같습니다:

• 최소 길이 제한 (예: 2자 이상)
• 특수문자 제한

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

 rules={{
   required: '필수 입력사항입니다.',
   validate: (value) => {
     if (value && value.trim().length > 0) {
+      if (value.trim().length < 2) {
+        return '최소 2자 이상 입력해주세요.';
+      }
+      if (!/^[가-힣a-zA-Z0-9\s]+$/.test(value)) {
+        return '특수문자는 사용할 수 없습니다.';
+      }
       return true;
     }
     return '필수 입력사항입니다.';
   },
 }}

Also applies to: 98-101

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 564317b and 0683f5a.

📒 Files selected for processing (14)

• src/app/(crew)/crew/_components/create-crew-form/index.tsx (6 hunks)
• src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx (2 hunks)
• src/app/(crew)/crew/_components/create-gathering-form/index.tsx (5 hunks)
• src/app/(crew)/crew/_components/create-gathering-modal/presenter.tsx (1 hunks)
• src/app/(crew)/crew/_components/gathering-detail-modal/presenter.tsx (1 hunks)
• src/app/(crew)/crew/create/page.tsx (2 hunks)
• src/app/(crew)/crew/detail/[id]/page.tsx (1 hunks)
• src/app/(crew)/page.tsx (2 hunks)
• src/app/_components/hero/hero-crew.tsx (2 hunks)
• src/components/common/input/drop-down/index.tsx (5 hunks)
• src/components/common/input/file-input-wrap/file-input/index.tsx (1 hunks)
• src/components/common/input/file-input-wrap/file-sample/file-sample.stories.tsx (1 hunks)
• src/components/common/input/file-input-wrap/file-sample/index.tsx (0 hunks)
• tailwind.config.ts (1 hunks)

💤 Files with no reviewable changes (1)

• src/components/common/input/file-input-wrap/file-sample/index.tsx

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

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

🔇 Additional comments (16)

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

25-25: LGTM! 타이틀 변경 및 구조 개선이 잘 되었습니다.

"약속 잡기"에서 "약속 만들기"로의 타이틀 변경과 컴포넌트 구조의 단순화가 잘 이루어졌습니다.

Also applies to: 40-41

---

31-31: 스크롤 동작 개선이 효과적으로 구현되었습니다.

overflow: 'hidden'과 ScrollArea.Autosize 컴포넌트를 활용한 스크롤 처리 방식이 이중 스크롤바 문제를 효과적으로 해결했습니다. 특히:

• Modal content의 overflow: 'hidden'이 외부 스크롤을 제한
• ScrollArea.Autosize가 내부 콘텐츠에 맞춰 자동으로 크기 조절

Also applies to: 38-38

src/app/_components/hero/hero-crew.tsx (2)

4-4: 로컬 Button 컴포넌트로의 마이그레이션이 적절합니다.

Mantine 컴포넌트에서 로컬 컴포넌트로의 전환이 일관성 있게 이루어졌습니다.

---

11-11: cursor-default 스타일 적용이 적절합니다.

섹션 전체에 cursor-default를 적용하여 사용자 경험이 개선되었습니다.

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

4-4: 적절한 라우터 임포트 추가

Next.js의 클라이언트 사이드 네비게이션을 위한 useRouter 임포트가 올바르게 추가되었습니다.

---

10-10: 라우터 초기화 확인

컴포넌트 최상위 레벨에서 useRouter 훅이 올바르게 초기화되었습니다.

---

23-24: 🛠️ Refactor suggestion

API 연동 및 에러 처리 개선 필요

현재 구현에서 다음 사항들을 개선하면 좋겠습니다:

1. 하드코딩된 ID 값은 실제 API 연동 시 제거되어야 합니다.
2. 라우팅 실패 시의 에러 처리가 필요합니다.
3. API 응답 성공/실패에 따른 사용자 피드백이 필요합니다.

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

-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     // TODO : POST API 연결
-    const response = { id: 1 };
-    router.push(`/crew/detail/${response?.id}`);
+    try {
+      // const response = await createCrew(formData);
+      const response = { id: 1 }; // 임시 응답
+      await router.push(`/crew/detail/${response?.id}`);
+    } catch (error) {
+      console.error('크루 생성 중 오류 발생:', error);
+      // 에러 처리 로직 추가 필요
+    }
   };

API 연동 시 다음 스크립트로 관련 코드를 확인할 수 있습니다:

✅ Verification successful

API 구현 패턴 확인 및 리팩토링 제안 검증 완료

기존 코드베이스 분석 결과:

• fetchApi 기반의 API 구현 패턴이 확인됨 (get-crew-list.ts, get-crew-detail.ts)
• 에러 처리가 포함된 API 호출 패턴 존재 (get-crew-list.ts의 try-catch 구문)
• 크루 생성 API는 아직 구현되지 않음

제안된 리팩토링은 적절하며 다음과 같이 보완이 필요합니다:

+  const handleSubmit = async () => {
+    try {
+      const response = await fetchApi('/crews', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData)
+      });
+      await router.push(`/crew/detail/${response.id}`);
+    } catch (error) {
+      console.error('크루 생성 중 오류 발생:', error);
+      // TODO: 토스트 또는 알림으로 사용자에게 에러 피드백 제공
+    }
+  };

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: API 관련 파일 검색
echo "API 관련 파일 검색 중..."
rg -t typescript -t javascript "createCrew|postCrew" 

Length of output: 134

---

Script:

#!/bin/bash
# Search for API-related patterns in all files
echo "Searching for API-related patterns..."
rg "createCrew|postCrew|api.*crew" --type-add 'ts:*.{ts,tsx}' --type ts

# Check for any existing API utility files
echo -e "\nSearching for API utility files..."
fd -e ts -e tsx "api" 

# Look for router.push usage patterns
echo -e "\nSearching for router navigation patterns..."
rg "router\.push.*crew" --type-add 'ts:*.{ts,tsx}' --type ts -A 2

Length of output: 882

---

Script:

#!/bin/bash
# Check the API structure and implementation patterns
echo "Checking API implementation patterns..."
rg -t typescript "get-crew" -A 5

# Look for existing error handling patterns
echo -e "\nChecking error handling patterns..."
ast-grep --pattern 'try {
  $$$
  router.push($$$)
  $$$
} catch (error) {
  $$$
}'

# Check existing API response handling
echo -e "\nChecking API response handling..."
rg "getCrewDetail|getCrewList" -A 5 --type-add 'ts:*.{ts,tsx}' --type ts

Length of output: 3398

src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx (2)

12-12: 초기값으로 더 적절한 인원 수로 변경되었습니다.

모임의 totalCount 초기값을 0에서 2로 변경한 것이 더 현실적입니다. 모임은 최소 2명 이상이어야 하므로 이 변경은 적절합니다.

---

44-44: 용어 통일성 확인이 필요합니다.

"약속 잡기"에서 "약속 만들기"로의 변경이 PR 목표와 일치하며 적절합니다. 다만, 다른 컴포넌트들에서도 동일하게 변경되었는지 확인이 필요합니다.

✅ Verification successful

용어가 일관되게 변경되었음을 확인했습니다.

검색 결과를 통해 "약속 잡기"가 더 이상 코드베이스에 존재하지 않으며, "약속 만들기"로 모든 관련 컴포넌트에서 일관되게 사용되고 있음을 확인했습니다. 변경이 다음 파일들에서 올바르게 이루어졌습니다:

• src/app/(crew)/crew/detail/[id]/page.tsx
• src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx
• src/app/(crew)/crew/detail/[id]/_components/create-gathering.tsx
• src/app/(crew)/crew/_components/create-gathering-modal/presenter.tsx
• src/app/(crew)/crew/_components/create-gathering-modal/container.tsx

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 모든 파일에서 "약속 잡기"가 "약속 만들기"로 올바르게 변경되었는지 확인

# "약속 잡기"라는 텍스트가 남아있는지 확인
echo "검색: 아직 변경되지 않은 '약속 잡기' 텍스트"
rg "약속 잡기"

# "약속 만들기"로 변경된 부분 확인
echo -e "\n검색: 새로 변경된 '약속 만들기' 텍스트"
rg "약속 만들기"

Length of output: 795

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

Line range hint 1-15: 인터페이스 변경사항이 적절해 보입니다!

폼 검증을 위한 error prop의 추가는 PR의 목표와 잘 부합합니다. 타입 정의도 명확하게 되어있습니다.

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

49-51: 검색 필드의 사용성이 개선되었습니다!

검색 placeholder 텍스트가 더 구체적으로 변경되어 사용자가 어떤 내용을 검색할 수 있는지 명확하게 이해할 수 있게 되었습니다.

---

53-53: 레이아웃 및 드롭다운 UI 개선이 적절합니다.

• md:basis-67로의 변경은 tailwind.config.ts의 업데이트와 일치하며 반응형 레이아웃을 개선합니다.
• 드롭다운 너비를 130px로 증가시킨 것은 옵션 텍스트를 더 잘 표시할 수 있게 해줍니다.

Also applies to: 60-60, 72-72

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

80-82: 미리보기 상태 관리 로직이 개선되었습니다.

이전에는 isBlur가 true일 때 항상 미리보기를 제거했지만, 이제는 value가 존재할 때만 제거하도록 수정되어 더 안정적인 동작이 가능해졌습니다.

tailwind.config.ts (1)

60-60: flexBasis 값 변경이 레이아웃에 미치는 영향을 확인해주세요.

flexBasis 값이 228px에서 268px로 40px 증가했습니다. 이 변경이 의도된 것이라면 문제없어 보이나, 다음 사항들을 확인해주시면 좋겠습니다:

• 모든 반응형 레이아웃에서 정상적으로 표시되는지
• 드롭다운이나 모달 등 관련 컴포넌트들의 정렬이 깨지지 않는지

다음 스크립트로 이 값을 사용하는 컴포넌트들을 확인할 수 있습니다:

가능하다면 이 특정 값(268px)을 선택한 이유를 주석으로 문서화하면 좋을 것 같습니다.

✅ Verification successful

The previous command failed because the typescript type wasn't recognized. Let's try a broader search to find any usage of this class or the specific pixel value, and also list UI files to understand what file extensions we should be looking at.

---

이전 검색에서 basis-67 클래스가 src/app/(crew)/page.tsx에서 사용되는 것을 확인했습니다. 이 컴포넌트의 레이아웃 컨텍스트를 더 자세히 파악하기 위해 추가 검색을 실행하겠습니다.

---

flexBasis 값 변경이 안전한 것으로 확인되었습니다.

검색 결과를 분석한 결과, basis-67 클래스는 드롭다운 컴포넌트를 포함하는 컨테이너에서 사용되며, 모바일(md: 미디어 쿼리 이상)에서만 적용됩니다. 이 컨테이너는 다음과 같은 안전한 레이아웃 구조를 가지고 있습니다:

• 부모 요소가 flex-col에서 md:flex-row로 전환되는 반응형 구조
• 형제 요소가 flex-1을 사용하여 남은 공간을 자동으로 조절

따라서 268px로의 변경이 전체 레이아웃에 부정적인 영향을 미치지 않을 것으로 판단됩니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Find components using basis-67 class
# Expected: List of files using this Tailwind class

rg "basis-67" --type=typescript --type=tsx

Length of output: 77

---

Script:

#!/bin/bash
# Search for basis-67 class usage in all files
rg "basis-67"

# Also search for the specific pixel value
rg "268px"

# List all potential UI files to ensure we don't miss any file types
fd -e tsx -e jsx -e vue -e svelte

Length of output: 6640

---

Script:

#!/bin/bash
# Let's check the context of the basis-67 usage in page.tsx
rg "basis-67" src/app/\(crew\)/page.tsx -B 2 -A 2

# Check the parent component structure
rg "flex|grid" src/app/\(crew\)/page.tsx -B 2 -A 2

Length of output: 899

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

41-41: 스크롤 영역 구성이 개선되었습니다.

Modal 컴포넌트에 ScrollArea.Autosize를 적용하여 콘텐츠 크기에 따라 자동으로 조절되는 스크롤 영역을 구현한 것이 좋습니다.

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

34-35: 폼 검증 로직이 적절히 개선되었습니다.

trigger와 clearErrors 메서드를 추가하여 세밀한 폼 검증 제어가 가능해졌습니다.

[coderabbitai]

⚠️ Potential issue

상태 관리 로직에 심각한 오류가 있습니다.

useState 선언에서 selectedFile 상태 변수가 누락되어 있어 파일 선택 기능이 제대로 동작하지 않습니다. handleFileChange 함수에서 setSelectedFile을 호출하고 있지만, 선택된 파일의 상태가 추적되지 않습니다.

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

- const [setSelectedFile] = useState<File | StaticImageData | null>(null);
+ const [selectedFile, setSelectedFile] = useState<File | StaticImageData | null>(null);

📝 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 [setSelectedFile] = useState<File | StaticImageData | null>(null);
	const [selectedFile, setSelectedFile] = useState<File | StaticImageData | null>(null);

[coderabbitai]

🛠️ Refactor suggestion

이벤트 핸들러에 에러 처리 로직 추가가 필요합니다.

handleChange 함수에서 inputRef.current가 null일 경우에 대한 처리가 필요합니다. 또한 onChange 호출 실패 시의 에러 처리도 고려해야 합니다.

const handleChange = (newValue: string | null) => {
  try {
    onChange(newValue);
    setIsFocused(false);
    inputRef.current?.blur();
  } catch (error) {
    console.error('드롭다운 값 변경 중 오류 발생:', error);
    // 에러 처리 로직 추가
  }
};

[coderabbitai]

🛠️ Refactor suggestion

참여자 목록의 성능 최적화 제안

현재 구현은 작동하지만, 참여자 수가 많을 경우 성능 이슈가 발생할 수 있습니다.

다음과 같은 최적화를 제안드립니다:

-<ScrollArea h={152}>
+<ScrollArea h={152} type="always">
   <ul className="grid grid-cols-2 gap-4">
-    {data?.participants.map((participant) => (
+    {data?.participants.slice(0, 20).map((participant) => (
       <li key={participant.id} className="flex items-center gap-2">

추가로 무한 스크롤 구현을 고려해보시면 좋을 것 같습니다.

📝 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

	<ScrollArea h={152}>
	<ul className="grid grid-cols-2 gap-4">
	{data?.participants.map((participant) => (
	<li key={participant.id} className="flex items-center gap-2">
	<figure className="relative h-10 w-10 overflow-hidden rounded-full">
	<Profile imageUrl={participant?.profileImageUrl} />
	</figure>
	<span className="text-base font-medium">{participant?.nickname}</span>
	</li>
	))}
	</ul>
	</ScrollArea>
	<ScrollArea h={152} type="always">
	<ul className="grid grid-cols-2 gap-4">
	{data?.participants.slice(0, 20).map((participant) => (
	<li key={participant.id} className="flex items-center gap-2">
	<figure className="relative h-10 w-10 overflow-hidden rounded-full">
	<Profile imageUrl={participant?.profileImageUrl} />
	</figure>
	<span className="text-base font-medium">{participant?.nickname}</span>
	</li>
	))}
	</ul>
	</ScrollArea>

[coderabbitai]

💡 Codebase verification

시간대 처리 관련 잠재적 문제점 발견

현재 구현에서 다음과 같은 시간대 관련 문제가 있습니다:

• isToday 함수는 단순히 Date 객체의 기본 메서드만 사용하여 날짜를 비교합니다.
• DateTimePicker 컴포넌트에서는 'UTC' 타임존을 명시적으로 설정하고 있습니다.
• 날짜 포맷팅 유틸리티들도 타임존을 고려하지 않은 채 기본 Date 객체 메서드만 사용합니다.

이로 인해:

• 사용자의 로컬 시간과 서버 시간 사이의 불일치가 발생할 수 있습니다.
• 자정 무렵에는 "오늘" 판단이 잘못될 수 있습니다.

🔗 Analysis chain

오늘의 모임 표시 로직 검증 필요

isToday 함수를 통한 날짜 확인은 적절하나, 시간대(timezone) 처리에 대한 검증이 필요해 보입니다.

---

Let me gather more information about the timezone handling in the codebase.

---

Let me check the format-date utility and other date-related implementations.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify timezone handling in isToday function
rg -A 5 "isToday" src/utils/

Length of output: 352

---

Script:

#!/bin/bash
# Search for any timezone related configurations or utilities
rg -i "timezone|getTimezoneOffset|toLocaleString" 

# Search for date utility functions
fd "date" --type f --exec rg -l "new Date"

Length of output: 613

---

Script:

#!/bin/bash
# Check format-date utility implementation
cat src/utils/format-date.ts

# Check date-time-picker implementation for timezone handling
cat src/components/common/input/date-time-picker/index.tsx

Length of output: 4779

[coderabbitai]

🛠️ Refactor suggestion

폼 제출 버튼의 비활성화 조건 개선 필요

현재 isValid 상태만으로 버튼을 비활성화하는 것은 충분하지 않을 수 있습니다. 폼이 제출 중일 때도 버튼을 비활성화해야 합니다.

<Button
  type="submit"
- disabled={!isValid}
+ disabled={!isValid || formState.isSubmitting}
  className="btn-filled h-11 flex-1 text-base font-medium disabled:bg-gray-200"
>

📝 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

	disabled={!isValid}
	disabled={!isValid || formState.isSubmitting}

[coderabbitai]

⚠️ Potential issue

오타 수정 필요

trigger('title')이 trigger('location')으로 수정되어야 합니다.

-if (errors.location) trigger('title');
+if (errors.location) trigger('location');

📝 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

	if (errors.location) trigger('title'); // 입력 중일 때 유효성 검사 트리거
	if (errors.location) trigger('location'); // 입력 중일 때 유효성 검사 트리거

[coderabbitai]

⚠️ Potential issue

잘못된 트리거 대상

trigger('imageUrl')이 trigger('dateTime')으로 수정되어야 합니다.

-trigger('imageUrl');
+trigger('dateTime');

📝 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

	trigger('imageUrl'); // 유효성 검사 실행
	trigger('dateTime'); // 유효성 검사 실행

[coderabbitai]

⚠️ Potential issue

이미지 업로드 컴포넌트의 에러 처리 개선 필요

현재 이미지 업로드 시 발생할 수 있는 다양한 에러 상황(파일 크기, 형식 등)에 대한 처리가 누락되어 있습니다.

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

rules={{ 
-  required: '이미지를 선택해주세요.' 
+  required: '이미지를 선택해주세요.',
+  validate: {
+    fileSize: (file) => 
+      file.size <= 5000000 || '파일 크기는 5MB 이하여야 합니다.',
+    fileType: (file) =>
+      ['image/jpeg', 'image/png'].includes(file.type) || 
+      'JPG, PNG 파일만 업로드 가능합니다.',
+  }
}}

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

[coderabbitai]

🛠️ Refactor suggestion

제목 입력 필드의 유효성 검사 로직 개선 필요

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

1. 공백만 입력된 경우에 대한 처리가 중복되어 있습니다.
2. 최소 길이 제한이 누락되어 있습니다.

다음과 같이 유효성 검사 로직을 개선해보세요:

rules={{
  required: '필수 입력사항입니다.',
  validate: (value) => {
-   if (value && value.trim().length > 0) {
-     return true;
-   }
-   return '필수 입력사항입니다.';
+   if (value.trim().length < 2) {
+     return '최소 2자 이상 입력해주세요.';
+   }
+   return 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

	<span className="text-blue-500">{title.length}</span>/20
	</span>
	</div>
	<TextInput
	id="gathering-title"
	variant="filled"
	value={values.title}
	register={{
	...register('title', {
	required: '필수 입력사항입니다.',
	pattern: /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|A-Z|0-9| ]{1,20}$/,
	onBlur: () => trigger('title'),
	}),
	}}
	error={errors.title?.message?.toString()}
	onChange={(e) =>
	setValues((prevValues) => {
	if (e.target.value.length <= 20) {
	return { ...prevValues, title: e.target.value };
	<Controller
	name="title"
	control={control}
	rules={{
	required: '필수 입력사항입니다.',
	validate: (value) => {
	if (value && value.trim().length > 0) {
	return true; // 입력이 있을 경우 에러 해제
	}
	return prevValues;
	})
	}
	placeholder="약속 이름을 20자 이내로 입력해주세요."
	maxLength={20}
	classNames={{
	input:
	'h-11 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl aria-[invalid=true]:border-none',
	return '필수 입력사항입니다.'; // 입력이 비어있을 경우 에러 메시지 표시
	},
	}}
	render={({ field }) => (
	<TextInput
	{...field}
	id="gathering-title"
	variant="filled"
	onChange={(e) => {
	field.onChange(e);
	if (errors.title) trigger('title'); // 입력 중일 때 유효성 검사 트리거
	}}
	error={errors.title?.message}
	placeholder="약속명을 20자 이내로 입력해주세요."
	maxLength={20}
	classNames={{
	input:
	'h-11 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl aria-[invalid=true]:border-none',
	}}
	/>
	)}
	<span className="text-blue-500">{title.length}</span>/20
	</span>
	</div>
	<Controller
	name="title"
	control={control}
	rules={{
	required: '필수 입력사항입니다.',
	validate: (value) => {
	if (value.trim().length < 2) {
	return '최소 2자 이상 입력해주세요.';
	}
	return true;
	},
	}}
	render={({ field }) => (
	<TextInput
	{...field}
	id="gathering-title"
	variant="filled"
	onChange={(e) => {
	field.onChange(e);
	if (errors.title) trigger('title'); // 입력 중일 때 유효성 검사 트리거
	}}
	error={errors.title?.message}
	placeholder="약속명을 20자 이내로 입력해주세요."
	maxLength={20}
	classNames={{
	input:
	'h-11 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl aria-[invalid=true]:border-none',
	}}
	/>
	)}

[coderabbitai]

🛠️ Refactor suggestion

에러 메시지 표시 방식의 일관성 개선이 필요합니다.

현재 위치 관련 필드들의 에러 메시지 표시 방식이 일관적이지 않습니다:

• mainLocation은 하단에 별도로 표시
• subLocation은 드롭다운 내부에 표시

다음과 같이 통일된 방식으로 수정하는 것을 제안드립니다:

-          {errors.mainLocation && <p className="text-red-500">{errors.mainLocation.message}</p>}
+          <div className="flex flex-col gap-1">
+            {errors.mainLocation && <p className="text-red-500 text-sm">{errors.mainLocation.message}</p>}
+            {errors.subLocation && <p className="text-red-500 text-sm">{errors.subLocation.message}</p>}
+          </div>

Also applies to: 219-219

[github-actions]

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

[coderabbitai]

Actionable comments posted: 6

🧹 Outside diff range and nitpick comments (8)

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

42-52: 스타일 로직 단순화가 필요합니다.

getFocusStyle 함수의 조건문을 단순화하여 가독성을 개선할 수 있습니다.

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

-  const getFocusStyle = () => {
-    if (variant === 'default') {
-      return isFocused
-        ? 'focus:bg-black focus:text-white focus:placeholder:text-white'
-        : 'bg-white text-gray-800 placeholder-gray-800';
-    }
-
-    return isFocused
-      ? 'focus:bg-black focus:text-white focus:placeholder:text-white sort-bg-on pl-10'
-      : 'bg-white text-gray-800 placeholder-gray-800 sort-bg pl-10';
-  };
+  const getFocusStyle = () => {
+    const baseStyle = isFocused
+      ? 'focus:bg-black focus:text-white focus:placeholder:text-white'
+      : 'bg-white text-gray-800 placeholder-gray-800';
+    
+    return variant === 'default'
+      ? baseStyle
+      : `${baseStyle} ${isFocused ? 'sort-bg-on' : 'sort-bg'} pl-10`;
+  };

---

Line range hint 81-87: 스타일 클래스 관리 개선이 필요합니다.

복잡한 classNames 로직을 상수로 분리하여 관리하면 가독성과 유지보수성이 향상될 것 같습니다.

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

const BASE_INPUT_CLASSES = 'font-pretendard h-10 md:h-11 text-base font-medium rounded-xl border-0 py-2.5 px-3';
const BASE_OPTION_CLASSES = 'py-1 m-1 px-2 mr-0 rounded-xl font-pretendard text-gray-800 text-base font-medium hover:bg-blue-100';

// 컴포넌트 내부
classNames={{
  root: className,
  input: `${getFocusStyle()} ${formStyle} ${BASE_INPUT_CLASSES}`,
  section: `end-1 ${variant === 'sort' && 'data-[position=right]:hidden start-1'}`,
  dropdown: 'rounded-xl shadow-xl p-0 border-0 mt-2',
  option: `${BASE_OPTION_CLASSES} ${variant === 'sort' && 'justify-center'}`,
}}

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

37-39: 성능 최적화 제안

useWatch를 사용하여 문자 수를 계산하는 방식은 불필요한 리렌더링을 유발할 수 있습니다. 대신 다음과 같은 최적화된 방법을 고려해보세요:

-const title = useWatch({ control, name: 'title' });
-const location = useWatch({ control, name: 'location' });
-const introduce = useWatch({ control, name: 'introduce' });

+const CharacterCount = ({ control, name }: { control: Control<any>; name: string }) => {
+  const value = useWatch({ control, name });
+  return <span className="text-blue-500">{value.length}</span>;
+};

이렇게 하면 개별 필드의 문자 수가 변경될 때만 해당 카운터 컴포넌트가 리렌더링됩니다.

---

168-170: 모집 정원의 에러 메시지 개선 필요

현재 에러 메시지가 너무 단순합니다. 최소/최대 인원에 대한 안내도 포함되어야 합니다.

rules={{
  required: '모집 정원을 입력해주세요.',
+ min: {
+   value: 4,
+   message: '최소 4명 이상 입력해주세요.'
+ },
+ max: {
+   value: 20,
+   message: '최대 20명까지 입력 가능합니다.'
+ }
}}

mock.json (4)

375-376: 날짜 형식의 미래 시점 설정 문제

모든 createdDate와 updatedDate가 2024년 11월로 설정되어 있습니다. 테스트 데이터의 현실성을 위해 다음과 같이 수정이 필요합니다:

• 현재 시점 기준으로 과거 날짜 사용
• createdDate와 updatedDate 간의 논리적 시간 순서 유지

Also applies to: 395-396, 415-416, 435-436, 455-456, 475-476, 495-496, 515-516, 535-536, 555-556

---

391-391: 이미지 URL의 안정성 문제

외부 이미지 URL을 직접 참조하고 있습니다. 다음과 같은 개선이 권장됩니다:

• 테스트용 로컬 이미지 사용
• CDN을 통한 이미지 제공
• 이미지 URL의 유효성 검증 로직 추가

Also applies to: 411-411, 431-431, 451-451, 471-471, 491-491, 511-511, 531-531, 551-551

---

575-578: 불완전한 사용자 프로필 데이터

CrewMembers 데이터에서 첫 번째 멤버의 프로필 이미지가 누락되었습니다. 데이터 일관성을 위해 다음 사항을 확인해주세요:

• 모든 멤버에 대해 동일한 데이터 구조 유지
• 필수 필드에 대한 기본값 설정

---

695-695: 리뷰 데이터의 시간 정렬 문제

리뷰 데이터의 createdAt 타임스탬프가 시간 순서대로 정렬되어 있지 않습니다. 데이터의 일관성을 위해 다음을 제안합니다:

• 시간 순서대로 리뷰 데이터 정렬
• 리뷰 ID와 생성 시간의 연관성 유지

Also applies to: 707-707, 719-719, 731-731, 743-743, 755-755, 767-767

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 0683f5a and f101987.

📒 Files selected for processing (8)

• mock.json (17 hunks)
• src/app/(crew)/crew/_components/create-crew-form/index.tsx (9 hunks)
• src/app/(crew)/crew/_components/create-gathering-form/index.tsx (5 hunks)
• src/app/(crew)/crew/_components/gathering-detail-modal/presenter.tsx (1 hunks)
• src/app/(crew)/crew/detail/[id]/page.tsx (1 hunks)
• src/components/common/input/drop-down/index.tsx (5 hunks)
• src/mock/review-data.ts (27 hunks)
• src/utils/is-today.ts (1 hunks)

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

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

🔇 Additional comments (5)

src/utils/is-today.ts (1)

4-8: 한국 시간대 처리가 올바르게 구현되었습니다.

UTC 기준으로 변환 후 한국 시간대(UTC+9)로 조정하는 로직이 정확합니다.

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

14-15: Props 인터페이스 개선이 잘 되었습니다!

폼 유효성 검사를 위한 error prop과 입력 요소 참조를 위한 ref prop이 적절하게 추가되었습니다.

---

Line range hint 1-101: 폼 유효성 검사 통합 확인이 필요합니다.

컴포넌트가 react-hook-form의 유효성 검사와 올바르게 통합되는지 확인해주세요.

✅ Verification successful

폼 유효성 검사가 올바르게 구현되어 있음을 확인했습니다.

검색 결과를 통해 다음 사항들을 확인했습니다:

• create-crew-form에서 react-hook-form과 함께 DropDown 컴포넌트가 사용되고 있으며, error prop을 통해 유효성 검사 오류를 표시하고 있습니다.
• Controller 컴포넌트를 통해 폼 컨트롤이 적절히 연동되어 있습니다.
• 세부 카테고리와 위치 선택에서 오류 메시지가 올바르게 표시되도록 구현되어 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check integration with react-hook-form
# Test: Search for DropDown usage within form components
rg -A 5 "DropDown.*error=" src/

Length of output: 33

---

Script:

#!/bin/bash
# Search for any usage of DropDown component in form contexts
rg -A 10 "<DropDown" src/

# Search for form validation related imports
rg "import.*react-hook-form" src/

# Search for form components that might use DropDown
fd -e tsx -e ts -e jsx -e js --full-path ".*form.*" src/

Length of output: 10511

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

213-213: 폼 제출 버튼 상태 처리가 적절합니다

isValid와 isSubmitting 상태를 모두 고려하여 버튼의 비활성화 상태를 관리하고 있습니다.

src/mock/review-data.ts (1)

14-14: 타임스탬프 형식이 올바르게 업데이트되었습니다!

ISO 8601 형식과 타임존 정보를 포함하도록 일관되게 변경되어 있습니다.

Also applies to: 26-26, 38-38, 50-50, 62-62, 74-74, 86-86, 98-98, 110-110, 122-122, 134-134, 146-146, 158-158, 170-170, 182-182, 194-194, 206-206

[coderabbitai]

⚠️ Potential issue

시간 비교 로직에 심각한 오류가 있습니다.

현재 구현된 시간 비교 방식에는 다음과 같은 문제가 있습니다:

• 시간과 분을 개별적으로 비교하면 잘못된 결과가 발생할 수 있습니다.
• 예: 현재 시각이 14:30이고 입력 시각이 15:20인 경우, 분 비교에서 false를 반환합니다.

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

  return (
    date.getDate() === koreaNow.getDate() &&
    date.getMonth() === koreaNow.getMonth() &&
    date.getFullYear() === koreaNow.getFullYear() &&
-   date.getHours() >= koreaNow.getHours() &&
-   date.getMinutes() >= koreaNow.getMinutes()
+   date.getTime() >= koreaNow.getTime()
  );

📝 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

	date.getDate() === koreaNow.getDate() &&
	date.getMonth() === koreaNow.getMonth() &&
	date.getFullYear() === koreaNow.getFullYear() &&
	date.getHours() >= koreaNow.getHours() &&
	date.getMinutes() >= koreaNow.getMinutes()
	date.getDate() === koreaNow.getDate() &&
	date.getMonth() === koreaNow.getMonth() &&
	date.getFullYear() === koreaNow.getFullYear() &&
	date.getTime() >= koreaNow.getTime()

[coderabbitai]

🛠️ Refactor suggestion

제목 필드의 유효성 검사 강화 필요

현재 필수 입력 검사만 되어있습니다. 최소 길이 제한도 추가하는 것이 좋겠습니다.

rules={{
  required: '필수 입력사항입니다.',
+ minLength: {
+   value: 2,
+   message: '최소 2자 이상 입력해주세요.'
+ },
+ validate: {
+   notOnlyWhitespace: (value) =>
+     value.trim().length > 0 || '공백만으로는 제목을 작성할 수 없습니다.'
+ }
}}

📝 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

	rules={{
	required: '필수 입력사항입니다.',
	}}
	rules={{
	required: '필수 입력사항입니다.',
	minLength: {
	value: 2,
	message: '최소 2자 이상 입력해주세요.'
	},
	validate: {
	notOnlyWhitespace: (value) =>
	value.trim().length > 0 || '공백만으로는 제목을 작성할 수 없습니다.'
	}
	}}

[coderabbitai]

🛠️ Refactor suggestion

날짜 선택의 유효성 검사 강화 필요

현재 구현에서는 과거 날짜 선택을 방지하는 로직이 없습니다.

rules={{ 
  required: '날짜와 시간을 선택해주세요.',
+ validate: {
+   isFuture: (value) => {
+     const selectedDate = new Date(value);
+     return selectedDate > new Date() || '현재 시간 이후로 선택해주세요.';
+   }
+ }
}}

📝 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

	rules={{ required: '날짜와 시간을 선택해주세요.' }}
	render={({ field: { onChange, ...field } }) => (
	<DateTimePicker
	{...field}
	fullDate={new Date()}
	onChange={(date) => {
	const formattedDate = date.toLocaleString();
	onChange(formattedDate);
	trigger('dateTime'); // 유효성 검사 실행
	}}
	rules={{
	required: '날짜와 시간을 선택해주세요.',
	validate: {
	isFuture: (value) => {
	const selectedDate = new Date(value);
	return selectedDate > new Date() || '현재 시간 이후로 선택해주세요.';
	}
	}
	}}
	render={({ field: { onChange, ...field } }) => (
	<DateTimePicker
	{...field}
	fullDate={new Date()}
	onChange={(date) => {
	const formattedDate = date.toLocaleString();
	onChange(formattedDate);
	trigger('dateTime'); // 유효성 검사 실행
	}}

[coderabbitai]

⚠️ Potential issue

타임스탬프 형식의 불일치를 수정해 주세요

MyReviewData 내의 일부 타임스탬프가 서로 다른 형식을 사용하고 있습니다:

• 일부는 ISO 8601 형식 사용: 2024-10-31T10:09:12.306+09:00
• 일부는 이전 형식 사용: 2024-10-31T00:56

이러한 불일치는 다음과 같은 문제를 일으킬 수 있습니다:

• 날짜 파싱 오류
• 시간대 처리 문제
• 정렬 및 필터링 오작동

모든 타임스탬프를 다음 ISO 8601 형식으로 통일해 주세요:

-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T00:56:00.000+09:00',

Also applies to: 236-236, 246-246, 276-276, 286-286, 296-296, 306-306, 316-316, 326-326, 336-336

[coderabbitai]

⚠️ Potential issue

민감한 사용자 데이터 노출 문제

회원가입 데이터에 실제 이메일 주소와 비밀번호가 평문으로 저장되어 있습니다. 보안상의 위험이 있으므로 다음과 같이 개선이 필요합니다:

• 실제 이메일 주소 대신 가상의 이메일 사용
• 비밀번호는 해시 처리된 형태로 저장
• 테스트 데이터의 경우 일관된 패턴 사용 (예: [email protected], [email protected])

[coderabbitai]

🛠️ Refactor suggestion

로그인 데이터의 중복 엔트리 발견

동일한 이메일 주소로 여러 개의 로그인 기록이 존재합니다. 테스트 데이터의 품질 향상을 위해 다음을 제안합니다:

• 중복 엔트리 제거
• 각 사용자당 하나의 로그인 기록만 유지
• 테스트 시나리오별로 구분된 데이터셋 구성

[github-actions]

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

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)

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

Line range hint 29-33: 당일 과거 시간 선택 방지 로직 필요

현재 날짜가 선택된 경우, 현재 시간 이전의 시간을 선택할 수 없도록 처리가 필요합니다.

시간 선택 로직을 다음과 같이 개선하는 것을 제안합니다:

const handleTime = () => {
+ const now = dayjs();
+ const selectedDateTime = dayjs(selected).hour(Number(hour)).minute(Number(minute));
+ 
+ if (dayjs(selected).isSame(now, 'day') && selectedDateTime.isBefore(now)) {
+   // 현재 시간보다 이전 시간을 선택한 경우 처리
+   return;
+ }
- const newDate = dayjs(selected).hour(Number(hour)).minute(Number(minute)).toDate();
+ const newDate = selectedDateTime.toDate();
  setSelected(newDate);
  onChange(newDate);
};

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between f101987 and 51cfe2f.

📒 Files selected for processing (3)

• src/components/common/input/date-time-picker/index.tsx (1 hunks)
• src/mock/review-data.ts (28 hunks)
• src/utils/is-today.ts (1 hunks)

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

• src/mock/review-data.ts
• src/utils/is-today.ts

🔇 Additional comments (1)

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

58-58: 과거 날짜 선택 방지 로직 검토 필요

과거 날짜 선택을 방지하는 기능이 추가된 것은 좋은 개선사항입니다. 하지만 몇 가지 고려해야 할 사항이 있습니다:

1. 타임존 차이로 인한 날짜 비교 문제가 발생할 수 있습니다.
2. 서버 측에서도 동일한 유효성 검사가 필요합니다.

다음과 같이 타임존을 명시적으로 처리하는 것을 고려해보세요:

-excludeDate={(date) => dayjs(date).isBefore(dayjs().startOf('day'))}
+excludeDate={(date) => {
+  const localDate = dayjs(date).local();
+  const today = dayjs().local().startOf('day');
+  return localDate.isBefore(today);
+}}

✅ Verification successful

Let's analyze the validation patterns across the codebase to better understand how dates are validated both on client and server side.

---

날짜 선택 제한 기능 검토 완료

클라이언트 측 날짜 유효성 검사가 적절히 구현되어 있습니다. 코드베이스 분석 결과, 현재 구현된 excludeDate 로직이 과거 날짜 선택을 효과적으로 방지하고 있으며, 이는 사용자 경험 측면에서 적절한 접근 방식입니다.

타임존 관련 제안사항은 철회합니다. dayjs().startOf('day')는 이미 로컬 시간을 기준으로 처리하므로 추가적인 타임존 처리가 필요하지 않습니다.

서버 측 유효성 검사는 별도의 PR에서 다루어져야 할 사항으로 판단됩니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if server-side validation exists
rg -A 5 "validateDate|dateValidation" 

Length of output: 39

---

Script:

#!/bin/bash
# Search for date validation patterns in the codebase
rg -A 5 "startOf\('day'\)|isBefore\(|isAfter\(" 

# Search for form validation related to dates
ast-grep --pattern 'const $_ = z.object({
  $$$
  date: $_,
  $$$
})'

# Look for API validation or schema definitions
rg -A 5 "date.*required|date.*validation"

Length of output: 846

---

Script:

#!/bin/bash
# Look for API endpoints or handlers that process dates
rg -A 5 "POST.*gathering|PUT.*gathering|PATCH.*gathering"

# Search for date-related schema or type definitions
ast-grep --pattern 'interface $_ {
  $$$
  date: $_
  $$$
}'

# Check for date validation in form submissions
rg -A 5 "handleSubmit.*date|onSubmit.*date"

Length of output: 168

[User850413]

모르고 답변을 삭제해버렸네요 죄송합니당 🥹

클릭 후 블러시 하위메뉴가 안사라진다고 하셨는데

어떨 때 안사라지는건지 자세하게 말씀해주시겠어요? 문제가 안보입니다 ㅠ

[yulrang]

모르고 답변을 삭제해버렸네요 죄송합니당 🥹

클릭 후 블러시 하위메뉴가 안사라진다고 하셨는데
어떨 때 안사라지는건지 자세하게 말씀해주시겠어요? 문제가 안보입니다 ㅠ

[User850413]

정말수고많으셨습니다🥺😭

[HaeJungg]

수고하셨슴니다! 혹시 위에 클릭시 드롭다운 윗부분?도 색 변경이 가능할까요??👀

[github-actions]

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