diff --git a/src/components/addTravel/Details.tsx b/src/components/addTravel/Details.tsx index ea58531..0250f9b 100644 --- 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) => { + > ) : ( <> diff --git a/src/components/addTravel/Thumbnail.tsx b/src/components/addTravel/Thumbnail.tsx index 67f53f8..b66f80e 100644 --- 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) => { 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 ( - + document.getElementById('thumbnailUpload')?.click()}> diff --git a/src/pages/AddTravel.tsx b/src/pages/AddTravel.tsx index c7aec24..3cd7ad4 100644 --- a/src/pages/AddTravel.tsx +++ b/src/pages/AddTravel.tsx @@ -60,7 +60,7 @@ const AddTravel = () => { placeholder="30자 내외로 작성해주세요." /> - + diff --git a/src/stores/useImageStore.ts b/src/stores/useImageStore.ts index 68d7a0d..745f4c7 100644 --- 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((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((set) => ({ images: { thumbnail: '', introSrcs: [], + meetingSpace: '', }, }), }));