[Feat] Image Input(모임 생성 페이지 Thumbnail Field) 제작

[Chiman2937]

📝 변경 사항

프로필 Image Input은 추후 제작 예정입니다.

💡 components/ui/imageinput/index.tsx

image input Headless(core 로직) 컴포넌트입니다.

💡 components/pages/post-meetup/fields/thumbnails-field/index.tsx

imageinput 컴포넌트에 디자인 적용된 컴포넌트입니다.
아래와 같이 사용 가능합니다.

• zod schema 예시

const schema = z.object({
  images: z
    .record(z.string(), z.instanceof(File).nullable())
    .refine((record) => Object.keys(record).length >= 1, {
      message: '최소 1개의 이미지가 필요합니다.',
    }),
});

• Tanstack Form - 사용 예시

defaultValue에 ImageRecord Type 적용 필요합니다.

const form = useForm({
    defaultValues: {
      images: {} as ImageRecord,
    },
    ...
  });


...

        {/* images 필드 */}
        <form.Field name='images'>
          {(field) => {
            const hint = field.state.meta.errors[0]?.message || '최대 3개까지 업로드할 수 있어요.';

            return (
              <>
                <MeetupImageInput value={field.state.value} onChange={field.handleChange} />
                <span>{hint}</span>
              </>
            );
          }}
        </form.Field>

• value type
  ImageRecord의 Type은 아래와 같습니다.

(alias) type ImageRecord = {
    [x: string]: File | null;
}

즉, 아래와 같이 url(blob 포함)이 key가 되고 File 객체가 값이 됩니다.

{
  blob Url(string): File객체
}

---

🔗 관련 이슈

Closes #

---

🧪 테스트 방법

테스트와 스토리는 추후 추가하겠습니다.

• 수동 테스트 검증(로컬 환경)
• 유닛 테스트 검증
• 통합 테스트 검증

---

📸 스크린샷 (선택)

---

📋 체크리스트

• 관련 문서를 업데이트했습니다 (필요한 경우)
• 테스트를 추가/수정했습니다 (필요한 경우)
• Breaking change가 있다면 명시했습니다

---

💬 추가 코멘트

---

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review

---

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chiyoung-feat/image-field

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎨 Storybook Report

ℹ️ Story 변경사항이 감지되지 않았습니다

이 PR에는 Story 변경이 없어서 빌드를 스킵했습니다.

Status	Storybook	Build Log	Updated (UTC)
⏭️ Skipped	-	-	2025-12-05 07:47:03

[github-actions]

📊 Coverage Report

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-05 07:47:22

📉 #84을 main에 병합하면 coverage가 1.94% 감소합니다.

Coverage 요약

@@             Coverage Diff             @@
##             main      #84       +/-   ##
===========================================
- Coverage   36.85%   34.91%    -1.94%     
===========================================
  Files          80       81        +1     
  Lines        2491     2692      +201     
  Branches      158      158         0     
===========================================
+ Hits          918      940       +22     
+ Misses       1573     1752      +179     

영향받은 파일

파일	Coverage 변화
/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/ui/imageinput/index.tsx	15.15% (+15.15%) ⬆️

[github-actions]

🚀 PR Preview Report

✨ Build가 성공적으로 완료되었습니다.

Preview에서 변경사항을 확인하세요.

Status	Preview	Build Log	Updated (UTC)
✅ Ready	Visit Preview	View Logs	2025-12-05 07:48:33

[wooktori]

스타일 별로 묶어서 작성하니까 보기 좋아요!👍

[wooktori]

replace 모드는 이미 추가되어 있는 이미지를 누르면 적용되는건가요?

[Chiman2937]

이렇게 말씀하시니까 그렇게 보이기도 하네요 ...
제 의도는 예를들어 이미지가 이미 선택되어있는 상태에서 추가로 이미지를 선택하면 이게 교체될꺼냐(replace), 아니면 쌓일거냐(append)를 결정하려고 했어요!

[wooktori]

고생하셨습니다!