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;
@@ -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)/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/index.tsx

@@ -1,10 +1,10 @@
 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;
+  value: File | StaticImageData | null;
   onChange: (value: File | null) => void;
   isBlur: boolean;
 }

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

@@ -1,13 +1,13 @@
 import { useEffect, useRef } from 'react';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 
 export interface FileSampleProps {
-  imgUrl: string;
+  image: StaticImageData;
   isBlur: boolean;
-  onChange: (inputValue: File | null) => void;
+  onChange: (inputValue: StaticImageData) => void;
 }
 
-export default function FileSample({ imgUrl, isBlur, onChange }: FileSampleProps) {
+export default function FileSample({ image, isBlur, onChange }: FileSampleProps) {
   const radioInput = useRef<HTMLInputElement>(null);
 
   const convertUrlToFile = async (
@@ -21,8 +21,7 @@ export default function FileSample({ imgUrl, isBlur, onChange }: FileSampleProps
   };
 
   const handleClick = async () => {
-    const file = await convertUrlToFile(imgUrl, 'crew-01.webp', 'image/webp');
-    onChange(file);
+    onChange(image);
   };
 
   useEffect(() => {
@@ -41,7 +40,7 @@ export default function FileSample({ imgUrl, isBlur, onChange }: FileSampleProps
         className="absolute inset-0 hidden"
       />
       <Image
-        src={imgUrl}
+        src={image}
         width={282}
         height={282}
         alt="샘플 이미지 1"

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

@@ -1,20 +1,22 @@
 'use client';
 
 import { useState } from 'react';
+import { StaticImageData } from 'next/image';
 import FileInput from './file-input';
 import FileSample from './file-sample';
 
 export interface FileInputProps {
   value: File | null;
-  onChange: (newValue: File | null) => void;
+  sample: StaticImageData[];
+  onChange: (newValue: File | StaticImageData | null) => void;
 }
 
-export default function FileInputWrap({ value, onChange }: FileInputProps) {
-  const [fileValue, setFileValue] = useState<File | null>(value);
+export default function FileInputWrap({ value, sample, onChange }: FileInputProps) {
+  const [fileValue, setFileValue] = useState<File | StaticImageData | null>(value);
   const [isOtherSelected, setIsOtherSelected] = useState(false);
   const [isSampleSelected, setIsSampleSelected] = useState(false);
 
-  const handleChange = (inputValue: File | null) => {
+  const handleChange = (inputValue: StaticImageData) => {
     setIsOtherSelected(false);
     setIsSampleSelected(true);
     setFileValue(inputValue);
@@ -30,21 +32,9 @@ export default function FileInputWrap({ value, onChange }: FileInputProps) {
 
   return (
     <div className="container flex max-w-[1200px] gap-4">
-      <FileSample
-        imgUrl="https://images.stockcake.com/public/a/7/6/a768d87b-1f99-4b50-9286-f1583af33522_large/team-huddle-celebration-stockcake.jpg"
-        onChange={handleChange}
-        isBlur={isOtherSelected}
-      />
-      <FileSample
-        imgUrl="https://images.stockcake.com/public/a/a/0/aa0e5e46-987b-43ab-9e14-0012148d4d47_large/joyful-sports-gathering-stockcake.jpg"
-        onChange={handleChange}
-        isBlur={isOtherSelected}
-      />
-      <FileSample
-        imgUrl="https://images.stockcake.com/public/2/4/0/240c891a-9e35-4490-8714-a1c135b0c645_large/team-celebration-time-stockcake.jpg"
-        onChange={handleChange}
-        isBlur={isOtherSelected}
-      />
+      <FileSample image={sample[0]} onChange={handleChange} isBlur={isOtherSelected} />
+      <FileSample image={sample[1]} onChange={handleChange} isBlur={isOtherSelected} />
+      <FileSample image={sample[2]} onChange={handleChange} isBlur={isOtherSelected} />
       <FileInput value={fileValue} onChange={handleFileInput} isBlur={isSampleSelected} />
     </div>
   );

src/types/create-crew.d.ts

@@ -3,7 +3,7 @@ export interface CreateCrewRequestTypes {
   title: string;
   mainCategory: string | null;
   subCategory: string | null;
-  imageUrl: File | null;
+  imageUrl: File | StaticImageData | null;
   mainLocation: string | null;
   subLocation: string | null;
   totalCount: number;

src/types/gathering-data.d.ts

@@ -31,7 +31,7 @@ export interface CreateGatheringRequestType {
   dateTime: string;
   location: string;
   totalCount: number;
-  imageUrl: File | null; // NOTE : 임시로 File로 설정
+  imageUrl: File | StaticImageData | null; // NOTE : 임시로 File로 설정
 }
 
 export interface GatheringCardProps {