중간 배포

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/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/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)/crew/detail/[id]/_components/create-gathering.tsx

@@ -1,13 +1,25 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
 import { useDisclosure } from '@mantine/hooks';
+import { useAuthStore } from '@/src/store/use-auth-store';
 import CreateGatheringModalContainer from '@/src/app/(crew)/crew/_components/create-gathering-modal/container';
 import Button from '@/src/components/common/input/button';
 import { CreateGatheringRequestType } from '@/src/types/gathering-data';
 
 export default function CreateGathering() {
+  const { isAuth } = useAuthStore();
+  const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
 
+  const handleButtonClick = () => {
+    if (isAuth) {
+      open(); // 로그인 상태일 경우 모달 열기
+    } else {
+      router.push('/login'); // 비로그인 상태일 경우 로그인 페이지로 이동
+    }
+  };
+
   const initialValue: CreateGatheringRequestType = {
     title: '',
     introduce: '',
@@ -19,7 +31,7 @@ export default function CreateGathering() {
 
   return (
     <>
-      <Button type="button" className="btn-filled px-4" onClick={open}>
+      <Button type="button" className="btn-filled px-4" onClick={handleButtonClick}>
         약속 만들기
       </Button>
       <CreateGatheringModalContainer opened={opened} close={close} data={initialValue} />

src/app/_components/hero/hero-crew.tsx

@@ -1,9 +1,12 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { Button } from '@mantine/core';
+import { useAuthStore } from '@/src/store/use-auth-store';
 import ImgHeroCrew from '@/public/assets/icons/ic-dumbbell.svg';
 
 export default function HeroCrew() {
+  const { isAuth } = useAuthStore();
+
   return (
     <section className="pb-3 md:pb-4 lg:pb-12.5">
       <div className="flex items-end justify-between">
@@ -20,7 +23,7 @@ export default function HeroCrew() {
         </div>
         <Button
           component={Link}
-          href="/crew/create"
+          href={isAuth ? '/crew/create' : '/login'}
           className="-translate-y-1 items-center rounded-xl bg-blue-500 py-2 text-sm font-semibold md:h-11 md:text-lg md:font-bold"
         >
           크루 만들기

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

@@ -37,7 +37,9 @@ export default function CrewCard({
   inWhere,
 }: CrewCardProps) {
   const [prefetched, setPrefetched] = useState(new Set());
-  const CREWPAGE = `/crew/detail/${id}`;
+  // NOTE: api연결 후 되돌리기
+  // const CREWPAGE = `/crew/detail/${id}`;
+  const CREWPAGE = `/crew/detail/1`;
   const router = useRouter();
 
   const handleCardClick = () => {

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');

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,27 +1,29 @@
 '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;
+  value: File | StaticImageData | null;
+  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);
     onChange(inputValue);
   };
 
-  const handleFileInput = (inputValue: File | null) => {
+  const handleFileInput = (inputValue: File | StaticImageData | null) => {
     setIsOtherSelected(true);
     setIsSampleSelected(false);
     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

@@ -1,10 +1,12 @@
+import { StaticImageData } from 'next/image';
+
 // NOTE : imageURL 임시로 File로 지정
 export interface CreateCrewRequestTypes {
   title: string;
-  mainCategory: string | null;
+  mainCategory: string;
   subCategory: string | null;
-  imageUrl: File | null;
-  mainLocation: string | null;
+  imageUrl: File | StaticImageData | null;
+  mainLocation: string;
   subLocation: string | null;
   totalCount: number;
 }

src/types/gathering-data.d.ts

@@ -1,3 +1,4 @@
+import { StaticImageData } from 'next/image';
 import { UserType } from './user';
 
 export interface GatheringType {
@@ -31,7 +32,7 @@ export interface CreateGatheringRequestType {
   dateTime: string;
   location: string;
   totalCount: number;
-  imageUrl: File | null; // NOTE : 임시로 File로 설정
+  imageUrl: File | StaticImageData | null; // NOTE : 임시로 File로 설정
 }
 
 export interface GatheringCardProps {