Feat/110/create crew api 연결

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

@@ -3,5 +3,10 @@ import ImgCrewSample02 from './crew-sample-2.jpg';
 import ImgCrewSample03 from './crew-sample-3.jpg';
 
 const ImgCrewSamples = [ImgCrewSample01, ImgCrewSample02, ImgCrewSample03];
+const ImgCrewSampleUrls = [
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/0e05d971-15a8-4a32-bf03-80d12cae392e',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/eb35c35d-829a-402b-8019-29e42f91589f',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/471b3b3b-b23c-48e8-8e6b-9a7ec31e1917',
+];
 
-export default ImgCrewSamples;
+export default ImgCrewSampleUrls;

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

@@ -3,5 +3,10 @@ import ImgGatheringSample02 from './gathering-sample-2.jpg';
 import ImgGatheringSample03 from './gathering-sample-3.jpg';
 
 const ImgGatheringSamples = [ImgGatheringSample01, ImgGatheringSample02, ImgGatheringSample03];
+const ImgGatheringSampleUrls = [
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/1ff61110-e238-4fd6-8736-e6f03483f4df',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/85ad6a48-a1cb-4c8f-b713-94b9e18b023a',
+  'https://crewcrew.s3.ap-northeast-2.amazonaws.com/crew/60bc093c-cb3a-4628-93b9-fbf19e47a1ac',
+];
 
-export default ImgGatheringSamples;
+export default ImgGatheringSampleUrls;

src/_apis/crew/crew.ts

@@ -0,0 +1,28 @@
+import { fetchApi } from '@/src/utils/api';
+import { CreateCrewRequestTypes, CreateCrewResponseTypes } from '@/src/types/create-crew';
+
+export async function createCrew(data: CreateCrewRequestTypes) {
+  try {
+    const response: { data: CreateCrewResponseTypes; status: number } = await fetchApi(
+      `/api/crews`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include', // Include authentication credentials
+        body: JSON.stringify(data),
+      },
+    );
+
+    if (!response.data) {
+      throw new Error('Failed to create crew: No data received');
+    }
+
+    return response.data;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+  return null;
+}

src/_apis/image/get-image-url.ts

@@ -0,0 +1,42 @@
+import { fetchApi } from '@/src/utils/api';
+import Toast from '@/src/components/common/toast';
+import { GetImageUrlResponseTypes } from '@/src/types/create-crew';
+
+export async function getImageUrl(
+  file: File | string | null,
+  type: 'MEMBER' | 'CREW' | 'GATHERING',
+) {
+  const formData = new FormData();
+  if (file instanceof File) {
+    try {
+      const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+      const ALLOWED_TYPES = ['image/jpeg', 'image/png'];
+
+      if (file.size > MAX_FILE_SIZE) {
+        Toast({ message: '파일 크기는 5MB를 초과할 수 없습니다.', type: 'error' });
+        throw new Error('파일 크기 초과');
+      }
+      if (!ALLOWED_TYPES.includes(file.type)) {
+        Toast({ message: '지원하지 않는 파일 형식입니다.', type: 'error' });
+        throw new Error('지원하지 않는 파일 형식');
+      }
+      formData.append('file', file);
+
+      const response: { data: GetImageUrlResponseTypes } = await fetchApi(
+        `/api/images?type=${type}`,
+        {
+          method: 'POST',
+          body: formData,
+        },
+      );
+      if (!response.data) {
+        throw new Error('Failed to get image: No data received');
+      }
+      return response.data;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  }
+  return null;
+}

src/_queries/crew/crew-list-queries.tsx

@@ -11,6 +11,7 @@ export function useGetCrewListQuery({
   const { size, sort = ['string'] } = pageable;
   return {
     queryKey: [
+      'crewLists',
       condition.keyword,
       condition.mainLocation,
       condition.mainCategory,

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

@@ -1,15 +1,16 @@
 import { Meta, StoryFn } from '@storybook/react';
-import { CreateCrewRequestTypes } from '@/src/types/create-crew';
-import CreateCrewForm, { CreateCrewFormTypes } from '.';
+import { CreateCrewFormTypes, CreateCrewRequestTypes } from '@/src/types/create-crew';
+import CreateCrewForm from '.';
 
 const initialValue: CreateCrewRequestTypes = {
   title: '',
   mainCategory: '',
   subCategory: '',
-  imageUrl: null,
+  imageUrl: '',
   mainLocation: '',
   subLocation: '',
   totalCount: 0,
+  introduce: '',
 };
 
 export default {

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

@@ -10,22 +10,23 @@ import Button from '@/src/components/common/input/button';
 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';
+import Textarea from '@/src/components/common/input/textarea';
+import { CreateCrewFormTypes } from '@/src/types/create-crew';
+import ImgCrewSampleUrls from '@/public/assets/images/crew-sample';
 
-export interface CreateCrewFormTypes {
-  data: CreateCrewRequestTypes;
+export interface CreateCrewFormProps {
+  data: CreateCrewFormTypes;
   isEdit?: boolean;
-  onEdit?: (data: CreateCrewRequestTypes) => void;
-  onSubmit?: (data: CreateCrewRequestTypes) => void;
+  onEdit?: (data: CreateCrewFormTypes) => void;
+  onSubmit?: (data: CreateCrewFormTypes) => void;
 }
 
 export default function CreateCrewForm({
   isEdit = false,
   onEdit = () => {},
   onSubmit = () => {},
   data,
-}: CreateCrewFormTypes) {
+}: CreateCrewFormProps) {
   const router = useRouter();
   const {
     control,
@@ -34,7 +35,7 @@ export default function CreateCrewForm({
     trigger,
     clearErrors,
     formState: { errors, isValid, isSubmitting },
-  } = useForm<CreateCrewRequestTypes>({
+  } = useForm<CreateCrewFormTypes>({
     defaultValues: data,
     mode: 'onBlur',
   });
@@ -43,24 +44,24 @@ export default function CreateCrewForm({
   const [regionIndex, setRegionIndex] = useState(0);
 
   const title = useWatch({ control, name: 'title' });
-  // mainCategory와 mainLocation 값의 변화를 감지하여 인덱스를 설정
   const mainCategory = useWatch({ control, name: 'mainCategory' });
   const mainLocation = useWatch({ control, name: 'mainLocation' });
+  const introduce = useWatch({ control, name: 'introduce' });
 
   const handleMainCategoryChange = (newValue: string | null) => {
-    setValue('mainCategory' as const, newValue as CreateCrewRequestTypes['mainCategory']);
-    setValue('subCategory' as const, null as CreateCrewRequestTypes['subCategory']);
+    setValue('mainCategory', newValue || '');
+    setValue('subCategory', null);
     clearErrors('subCategory');
   };
 
   const handleMainLocationChange = (newValue: string | null) => {
-    setValue('mainLocation' as const, newValue as CreateCrewRequestTypes['mainLocation']);
-    setValue('subLocation' as const, null as CreateCrewRequestTypes['subLocation']);
+    setValue('mainLocation', newValue || '');
+    setValue('subLocation', null);
     clearErrors('subLocation');
   };
   useEffect(() => {
-    setCategoryIndex(categoryData.findIndex((category) => category.title.value === mainCategory));
-    setRegionIndex(regionData.findIndex((region) => region.main.value === mainLocation));
+    setCategoryIndex(categoryData.findIndex((category) => category.title.label === mainCategory));
+    setRegionIndex(regionData.findIndex((region) => region.main.label === mainLocation));
   }, [mainCategory, mainLocation]);
 
   return (
@@ -162,24 +163,24 @@ export default function CreateCrewForm({
               required: '이미지를 선택해주세요.',
               validate: {
                 fileSize: (file) =>
-                  file && file instanceof File && file.size <= 5242880
-                    ? true
-                    : '파일 크기는 5MB 이하여야 합니다.',
+                  file && file instanceof File
+                    ? file.size <= 5242880 || '파일 크기는 5MB 이하여야 합니다.'
+                    : true, // 문자열인 경우 크기 검사를 건너뜁니다.
                 fileType: (file) =>
-                  file &&
-                  file instanceof File &&
-                  ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type)
-                    ? true
-                    : 'JPG, PNG 파일만 업로드 가능합니다.',
+                  file && file instanceof File
+                    ? ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type) ||
+                      'JPG, PNG 파일만 업로드 가능합니다.'
+                    : true, // 문자열인 경우 파일 타입 검사를 건너뜁니다.
               },
             }}
             render={({ field }) => (
               <FileInputWrap
                 {...field}
-                sample={ImgCrewSamples}
+                isEdit={isEdit}
+                sample={ImgCrewSampleUrls}
                 onChange={(newValue) => {
                   field.onChange(newValue);
-                  if (newValue instanceof File) trigger('imageUrl');
+                  trigger('imageUrl');
                 }}
               />
             )}
@@ -264,7 +265,28 @@ export default function CreateCrewForm({
             )}
           />
         </div>
-
+        <div className="flex flex-col gap-3">
+          <div className="flex justify-between">
+            <label htmlFor="gathering-introduce" className="text-base font-semibold text-gray-800">
+              크루 소개
+            </label>
+            <span>
+              <span className="text-blue-500">{introduce.length}</span>/100
+            </span>
+          </div>
+          <Controller
+            name="introduce"
+            control={control}
+            render={({ field }) => (
+              <Textarea
+                {...field}
+                placeholder="크루 소개글을 100자 이내로 입력해주세요."
+                maxLength={100}
+                inputClassNames="h-40 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl"
+              />
+            )}
+          />
+        </div>
         <div className="flex justify-between gap-4 pt-18">
           <Button
             type="submit"

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

@@ -1,10 +1,10 @@
 import { Button, Modal, ScrollArea } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { Meta, StoryFn } from '@storybook/react';
-import { CreateGatheringRequestType } from '@/src/types/gathering-data';
+import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
 import CreateGatheringForm from '.';
 
-const initialValue: CreateGatheringRequestType = {
+const initialValue: CreateGatheringFormTypes = {
   title: '',
   introduce: '',
   dateTime: '',
@@ -30,7 +30,7 @@ export default {
   },
 } as Meta<typeof CreateGatheringForm>;
 
-const Template: StoryFn<CreateGatheringRequestType> = function CreateCrewPageStory() {
+const Template: StoryFn<CreateGatheringFormTypes> = function CreateCrewPageStory() {
   const [createModalOpened, { open: openCreateModal, close: closeCreateModal }] =
     useDisclosure(false);
 

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

@@ -7,14 +7,14 @@ import DateTimePicker from '@/src/components/common/input/date-time-picker';
 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';
+import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
+import ImgGatheringSampleUrls from '@/public/assets/images/gathering-sample';
 
-export interface CreateGatheringFormTypes {
-  data: CreateGatheringRequestType;
+export interface CreateGatheringFormProps {
+  data: CreateGatheringFormTypes;
   isEdit?: boolean;
-  onEdit?: (data: CreateGatheringRequestType) => void;
-  onSubmit?: (data: CreateGatheringRequestType) => void;
+  onEdit?: (data: CreateGatheringFormTypes) => void;
+  onSubmit?: (data: CreateGatheringFormTypes) => void;
   onClose: () => void;
 }
 
@@ -24,13 +24,13 @@ export default function CreateGatheringForm({
   onSubmit = () => {},
   onClose,
   data,
-}: CreateGatheringFormTypes) {
+}: CreateGatheringFormProps) {
   const {
     control,
     handleSubmit,
     trigger,
     formState: { errors, isValid, isSubmitting },
-  } = useForm<CreateGatheringRequestType>({
+  } = useForm<CreateGatheringFormTypes>({
     defaultValues: data,
     mode: 'onBlur',
   });
@@ -88,24 +88,23 @@ export default function CreateGatheringForm({
                 required: '이미지를 선택해주세요.',
                 validate: {
                   fileSize: (file) =>
-                    file && file instanceof File && file.size <= 5242880
-                      ? true
-                      : '파일 크기는 5MB 이하여야 합니다.',
+                    file && file instanceof File
+                      ? file.size <= 5242880 || '파일 크기는 5MB 이하여야 합니다.'
+                      : true, // 문자열인 경우 크기 검사를 건너뜁니다.
                   fileType: (file) =>
-                    file &&
-                    file instanceof File &&
-                    ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type)
-                      ? true
-                      : 'JPG, PNG 파일만 업로드 가능합니다.',
+                    file && file instanceof File
+                      ? ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type) ||
+                        'JPG, PNG 파일만 업로드 가능합니다.'
+                      : true, // 문자열인 경우 파일 타입 검사를 건너뜁니다.
                 },
               }}
               render={({ field }) => (
                 <FileInputWrap
                   {...field}
-                  sample={ImgGatheringSamples}
+                  sample={ImgGatheringSampleUrls}
                   onChange={(newValue) => {
                     field.onChange(newValue);
-                    if (newValue instanceof File) trigger('imageUrl');
+                    trigger('imageUrl');
                   }}
                 />
               )}

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

@@ -1,12 +1,12 @@
 'use client';
 
-import { CreateGatheringRequestType } from '@/src/types/gathering-data';
+import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
 import CreateGatheringModalPresenter from './presenter';
 
 export interface CreateGatheringModalContainerProps {
   opened: boolean;
   close: () => void;
-  data: CreateGatheringRequestType;
+  data: CreateGatheringFormTypes;
 }
 
 export default function CreateGatheringModalContainer({

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

@@ -1,13 +1,13 @@
 import { Modal, ScrollArea } from '@mantine/core';
 import CreateGatheringForm from '@/src/app/(crew)/crew/_components/create-gathering-form';
-import { CreateGatheringRequestType } from '@/src/types/gathering-data';
+import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
 
 export interface GatheringDetailModalProps {
   opened: boolean;
   onClose: () => void;
   onSubmit: () => void;
   onEdit: () => void;
-  data: CreateGatheringRequestType;
+  data: CreateGatheringFormTypes;
 }
 
 export default function CreateGatheringModalPresenter({