feat/"만나는장소"에도 이미지업로드기능추가

resistance2 · Oct 22, 2024 · 9238812 · 9238812
1 parent bfb633b
commit 9238812
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/src/components/addTravel/Details.tsx b/src/components/addTravel/Details.tsx
@@ -4,6 +4,7 @@ import { css } from '@emotion/react';
 import useFieldStore, { Options } from '@/stores/useFieldStore';
 import { useRef, useState } from 'react';
 import DetailsList from '@/components/addTravel/DetailsList';
+import Thumbnail from '@/components/addTravel/Thumbnail';
 
 interface DetailsProps {
   title: string;
@@ -70,6 +71,7 @@ const Details = ({ title }: DetailsProps) => {
               <CirclePlus size={24} />
             </button>
           </div>
+          <Thumbnail thumbnailComponent={false} />
         </>
       ) : (
         <>

diff --git a/src/components/addTravel/Thumbnail.tsx b/src/components/addTravel/Thumbnail.tsx
@@ -4,9 +4,14 @@ import { css } from '@emotion/react';
 import { ImagePlus } from 'lucide-react';
 import { ChangeEvent } from 'react';
 
-const Thumbnail = () => {
+interface ThumnailProps {
+  thumbnailComponent: boolean;
+}
+
+const Thumbnail = ({ thumbnailComponent }: ThumnailProps) => {
   const thumbnail = useImageStore((state) => state.images.thumbnail);
   const setThumbnail = useImageStore((state) => state.setThumbnail);
+  const setMeetingSpace = useImageStore((state) => state.setMeetingSpace);
 
   const handleThumbnailChange = async (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
@@ -15,14 +20,18 @@ const Thumbnail = () => {
 
       reader.onloadend = async () => {
         const imageData = reader.result as string;
-        setThumbnail(imageData);
+        if (thumbnailComponent) {
+          setThumbnail(imageData);
+        } else {
+          setMeetingSpace(imageData);
+        }
       };
       reader.readAsDataURL(file);
     }
   };
 
   return (
-    <GrayBack title={'대표 이미지'}>
+    <GrayBack title={thumbnailComponent ? '대표 이미지' : '만나는장소'}>
       <div css={thumnailSize(thumbnail)}>
         <button onClick={() => document.getElementById('thumbnailUpload')?.click()}>
           <ImagePlus size={100} css={{ color: '#fff' }} />

diff --git a/src/pages/AddTravel.tsx b/src/pages/AddTravel.tsx
@@ -60,7 +60,7 @@ const AddTravel = () => {
             placeholder="30자 내외로 작성해주세요."
           />
         </GrayBack>
-        <Thumbnail />
+        <Thumbnail thumbnailComponent={true} />
         <Introduction />
         <Course />
         <ChoiceTags />

diff --git a/src/stores/useImageStore.ts b/src/stores/useImageStore.ts
@@ -2,6 +2,7 @@ import { create } from 'zustand';
 
 interface ImageStore {
   thumbnail: string;
+  meetingSpace: string;
   introSrcs: string[];
 }
 
@@ -12,18 +13,24 @@ interface State {
 interface Action {
   setThumbnail: (thumbnail: string) => void;
   setIntroSrcs: (introSrcs: string[]) => void;
+  setMeetingSpace: (meetingSpace: string) => void;
   resetImages: () => void;
 }
 
 const useImageStore = create<State & Action>((set) => ({
   images: {
     thumbnail: '',
+    meetingSpace: '',
     introSrcs: [],
   },
   setThumbnail: (thumbnail: string) =>
     set((state) => {
       return { images: { ...state.images, thumbnail } };
     }),
+  setMeetingSpace: (meetingSpace: string) =>
+    set((state) => {
+      return { images: { ...state.images, meetingSpace } };
+    }),
   setIntroSrcs: (introSrcs: string[]) =>
     set((state) => {
       return { images: { ...state.images, introSrcs } };
@@ -33,6 +40,7 @@ const useImageStore = create<State & Action>((set) => ({
       images: {
         thumbnail: '',
         introSrcs: [],
+        meetingSpace: '',
       },
     }),
 }));