Hofix/index page : 파일샘플 컴포넌트 수정

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

@@ -0,0 +1,11 @@
+import ImgCrewSample01 from './crew-sample-1.jpg';
+import ImgCrewSample02 from './crew-sample-2.jpg';
+import ImgCrewSample03 from './crew-sample-3.jpg';
+
+const ImgCrewSamples = [
+  ImgCrewSample01,
+  ImgCrewSample02,
+  ImgCrewSample03,
+];
+
+export default ImgCrewSamples;

public/assets/images/gathering-sample/index.tsx

@@ -0,0 +1,11 @@
+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,
+];
+
+export default ImgGatheringSamples;

src/_apis/crew/get-crew-list.ts

@@ -0,0 +1,25 @@
+import { fetchApi } from '@/src/utils/api';
+import { CrewCardInform, CrewCardInformResponse } from '@/src/types/crew-card';
+
+export async function getCrewList(page: number, limit: number): Promise<CrewCardInformResponse> {
+  try {
+    const response = await fetchApi<CrewCardInformResponse>(
+      `/crews?_page=${page + 1}&_limit=${limit}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+    if (!Array.isArray(response)) {
+      throw new Error('서버 응답이 올바른 형식이 아닙니다.');
+    }
+    const data = response as CrewCardInform[];
+    const hasNextPage = data.length === limit;
+
+    return { data, hasNextPage };
+  } catch (error) {
+    throw new Error('크루 리스트를 불러오는데 실패했습니다.');
+  }
+}

src/_queries/crew-queries.tsx

@@ -1,5 +1,5 @@
-import { getCrewData } from '@/src/app/api/mock-api/crew';
 import { CrewCardInform } from '@/src/types/crew-card';
+import { getCrewList } from '../_apis/crew/get-crew-list';
 
 // Crew data 변환 로직을 간소화한 helper 함수
 const mapCrewData = (crew: CrewCardInform) => ({
@@ -31,7 +31,7 @@ export function useGetCrewQuery() {
 
   return {
     queryKey: ['crew'],
-    queryFn: ({ pageParam = 0 }: QueryParams) => getCrewData(pageParam, 3),
+    queryFn: ({ pageParam = 0 }: QueryParams) => getCrewList(pageParam, 3),
     getNextPageParam: (lastPage: Page, allPages: Page[]) =>
       lastPage.hasNextPage ? allPages.length + 1 : undefined,
     select: (data: CrewCardInform[]) => data.map(mapCrewData),

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

@@ -11,6 +11,7 @@ import DropDown from '@/src/components/common/input/drop-down';
 import FileInputWrap from '@/src/components/common/input/file-input-wrap';
 import TextInput from '@/src/components/common/input/text-input';
 import { CreateCrewRequestTypes } from '@/src/types/create-crew';
+import ImgCrewSamples from '@/public/assets/images/crew-sample';
 
 export interface CreateCrewFormTypes {
   data: CreateCrewRequestTypes;
@@ -37,7 +38,8 @@ export default function CreateCrewForm({
     mode: 'onBlur',
   });
 
-  const isFormValid = Object.keys(errors).length === 0;
+  const isFormValid = Object.keys(errors).length === 0 && Object.values(data).every(Boolean);
+
   const [categoryIndex, setCategoryIndex] = useState(0);
   const [regionIndex, setRegionIndex] = useState(0);
 
@@ -46,17 +48,16 @@ export default function CreateCrewForm({
   const mainLocation = useWatch({ control, name: 'mainLocation' });
 
   const handleMainCategoryChange = (newValue: string | null) => {
-    setValue('mainCategory', newValue);
-    setValue('subCategory', null);
+    setValue('mainCategory' as const, newValue as CreateCrewRequestTypes['mainCategory']);
+    setValue('subCategory' as const, null as CreateCrewRequestTypes['subCategory']);
     clearErrors('subCategory');
   };
 
   const handleMainLocationChange = (newValue: string | null) => {
-    setValue('mainLocation', newValue);
-    setValue('subLocation', null);
+    setValue('mainLocation' as const, newValue as CreateCrewRequestTypes['mainLocation']);
+    setValue('subLocation' as const, null as CreateCrewRequestTypes['subLocation']);
     clearErrors('subLocation');
   };
-
   useEffect(() => {
     setCategoryIndex(categoryData.findIndex((category) => category.title.value === mainCategory));
     setRegionIndex(regionData.findIndex((region) => region.main.value === mainLocation));
@@ -154,7 +155,11 @@ export default function CreateCrewForm({
             control={control}
             rules={{ required: '이미지를 선택해주세요.' }}
             render={({ field }) => (
-              <FileInputWrap {...field} onChange={(newValue) => field.onChange(newValue)} />
+              <FileInputWrap
+                {...field}
+                sample={ImgCrewSamples}
+                onChange={(newValue) => field.onChange(newValue)}
+              />
             )}
           />
           {errors.imageUrl && <p className="text-red-500">{errors.imageUrl.message}</p>}

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

@@ -9,6 +9,7 @@ import FileInputWrap from '@/src/components/common/input/file-input-wrap';
 import TextInput from '@/src/components/common/input/text-input';
 import Textarea from '@/src/components/common/input/textarea';
 import { CreateGatheringRequestType } from '@/src/types/gathering-data';
+import ImgGatheringSamples from '@/public/assets/images/gathering-sample';
 
 export interface CreateGatheringFormTypes {
   data: CreateGatheringRequestType;
@@ -89,6 +90,7 @@ export default function CreateGatheringForm({
           </label>
           <div className="flex">
             <FileInputWrap
+              sample={ImgGatheringSamples}
               value={values.imageUrl}
               onChange={(newValue) =>
                 setValues((prevValues) => ({ ...prevValues, imageUrl: newValue }))

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

@@ -25,15 +25,18 @@ export default function CreateGatheringModalPresenter({
       title="약속 잡기"
       styles={{
         root: { '--modal-size': '520px' },
-        content: { boxShadow: '0 25px 50px -12px rgba(0,0,0,0.1)', borderRadius: '12px' },
+        content: {
+          boxShadow: '0 25px 50px -12px rgba(0,0,0,0.1)',
+          borderRadius: '12px',
+        },
       }}
       classNames={{
         body: 'p-0',
         title: 'text-xl font-semibold text-gray-900',
       }}
     >
       <div>
-        <ScrollArea h={640}>
+        <ScrollArea h={760}>
           <div className="flex flex-col gap-8 p-6">
             <CreateGatheringForm
               data={data}

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

@@ -40,7 +40,7 @@ export default function GatheringDetailModalPresenter({
       }}
     >
       <div>
-        <ScrollArea h={640}>
+        <ScrollArea h={760}>
           <figure className="relative aspect-video w-full overflow-hidden">
             <Image
               src={data?.imageUrl}

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

@@ -9,11 +9,11 @@ export default function CreateCrewPage() {
   const initialValue: CreateCrewRequestTypes = {
     title: '',
     mainCategory: '',
-    subCategory: '',
+    subCategory: null,
     imageUrl: null,
     mainLocation: '',
-    subLocation: '',
-    totalCount: 0,
+    subLocation: null,
+    totalCount: 4,
   };
 
   const handleSubmit = () => {

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState } from 'react';
+import { useGetCrewQuery } from '@/src/_queries/crew-queries';
 import { useInfiniteScroll } from '@/src/hooks/useInfiniteScroll';
-import { fetchCrewData } from '@/src/app/api/mock-api/crew';
 import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
 import Tabs from '@/src/components/common/tab';
 import { CrewCardInformResponse } from '@/src/types/crew-card';
@@ -15,14 +15,9 @@ export default function MyCrewPage() {
   const [currentTab, setCurrentTab] = useState(myPageTabs[0].id);
 
   // TODO: fetchCrewData 함수를 사용하여 데이터를 불러오기 : 파라미터 수정 필요
-  const { data, ref, isFetchingNextPage } = useInfiniteScroll<CrewCardInformResponse>({
-    queryKey: ['crew'],
-    queryFn: ({ pageParam = 0 }) => {
-      return fetchCrewData(pageParam, 3);
-    },
-    getNextPageParam: (lastPage, allPages) =>
-      lastPage.hasNextPage ? allPages.length + 1 : undefined,
-  });
+  const { data, ref, isFetchingNextPage } =
+    useInfiniteScroll<CrewCardInformResponse>(useGetCrewQuery());
+
   return (
     <div className="py-8 md:py-12.5">
       <div className="px-3 md:px-8 lg:px-11.5">

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

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { useGetCrewQuery } from '@/src/_queries/crew-queries';
 import { useInfiniteScroll } from '@/src/hooks/useInfiniteScroll';
-import { fetchCrewData } from '@/src/app/api/mock-api/crew';
+import ClientProvider from '@/src/components/client-provider';
 import { CrewCardInformResponse } from '@/src/types/crew-card';
-import ClientProvider from '../../client-provider';
 import CrewCardList from './crew-card-list';
 
 const meta: Meta = {
@@ -28,14 +28,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 function RenderCrewCardList() {
-  const { data, ref, isFetchingNextPage } = useInfiniteScroll<CrewCardInformResponse>({
-    queryKey: ['crew'],
-    queryFn: ({ pageParam = 0 }) => {
-      return fetchCrewData(pageParam, 3);
-    },
-    getNextPageParam: (lastPage, allPages) =>
-      lastPage.hasNextPage ? allPages.length + 1 : undefined,
-  });
+  const { data, ref, isFetchingNextPage } =
+    useInfiniteScroll<CrewCardInformResponse>(useGetCrewQuery());
 
   return <CrewCardList data={data} ref={ref} isFetchingNextPage={isFetchingNextPage} />;
 }

src/components/common/input/file-input-wrap/file-input/file-input.stories.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { StaticImageData } from 'next/image';
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
 import FileInput, { FileInputProps } from '.';
@@ -25,7 +26,7 @@ const meta: Meta = {
 export default meta;
 
 const Template: StoryFn<FileInputProps> = function FileInputStory() {
-  const [fileValue, setFileValue] = useState<File | null>(null);
+  const [fileValue, setFileValue] = useState<File | StaticImageData | null>(null);
   const [isBlur, setIsBlur] = useState(false);
 
   return (
@@ -54,7 +55,7 @@ export const FileInput01 = Template.bind({});
 FileInput01.args = {
   value: null,
   isBlur: false,
-  onChange: (newValue: File | null) => {
+  onChange: (newValue: File | StaticImageData | null) => {
     action('onChange')({ image: newValue });
   },
 };

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

@@ -1,11 +1,11 @@
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 import IcoPlus from '@/public/assets/icons/ic-plus.svg';
 import IcoX from '@/public/assets/icons/ic-x.svg';
 
 export interface FileInputProps {
-  value: File | null;
-  onChange: (value: File | null) => void;
+  value: File | StaticImageData | null;
+  onChange: (value: File | StaticImageData | null) => void;
   isBlur: boolean;
 }
 

src/components/common/input/file-input-wrap/file-sample/file-sample.stories.tsx

@@ -1,13 +1,15 @@
 import { useState } from 'react';
+import { StaticImageData } from 'next/image';
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
+import ImgCrewSamples from '@/public/assets/images/crew-sample';
 import FileSample, { FileSampleProps } from '.';
 
 const meta: Meta = {
   title: 'Components/input/file-sample',
   component: FileSample,
   argTypes: {
-    imgUrl: {
+    image: {
       control: 'text',
       description: '샘플 이미지 URL',
     },
@@ -24,13 +26,11 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: StoryFn<FileSampleProps> = function FileInputStory(
-  args: FileSampleProps = { isBlur: false, imgUrl: '', onChange: () => {} },
-) {
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+const Template: StoryFn<FileSampleProps> = function FileInputStory(args: FileSampleProps) {
+  const [selectedFile, setSelectedFile] = useState<File | StaticImageData | null>(null);
   const [isBlur, setIsBlur] = useState(false);
 
-  const handleFileChange = (file: File | null) => {
+  const handleFileChange = (file: File | StaticImageData | null) => {
     setSelectedFile(file);
     setIsBlur(false); // 파일 선택 시 블러 해제
   };
@@ -47,14 +47,12 @@ const Template: StoryFn<FileSampleProps> = function FileInputStory(
       >
         블러 토글
       </button>
-      {!isBlur && <p>{selectedFile?.name}</p>}
     </div>
   );
 };
 export const FileSample01 = Template.bind({});
 FileSample01.args = {
-  imgUrl:
-    'https://images.stockcake.com/public/a/7/6/a768d87b-1f99-4b50-9286-f1583af33522_large/team-huddle-celebration-stockcake.jpg',
+  image: ImgCrewSamples[0],
   isBlur: false,
   onChange: () => {
     action('onChange');