feat: 이미지 업로드 로직

softeerbootcamp4th · Aug 12, 2024 · a411b4d · a411b4d
1 parent 5b8c4f6
commit a411b4d
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 36 deletions.
diff --git a/admin/src/apis/rushAPI.ts b/admin/src/apis/rushAPI.ts
@@ -5,7 +5,6 @@ import {
     GetRushParticipantListParams,
     GetRushParticipantListResponse,
     GetRushWinnerListParams,
-    PutRushEventParams,
     PutRushEventResponse,
 } from "@/types/rushApi";
 import { fetchWithTimeout } from "@/utils/fetchWithTimeout";
@@ -110,7 +109,7 @@ export const RushAPI = {
             throw error;
         }
     },
-    async putRush(body: PutRushEventParams): Promise<PutRushEventResponse> {
+    async putRush(body: FormData[]): Promise<PutRushEventResponse> {
         try {
             return new Promise((resolve) => resolve([]));
             const response = await fetchWithTimeout(`${baseURL}`, {

diff --git a/admin/src/components/FileInput/index.tsx b/admin/src/components/FileInput/index.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 
 interface FileInputProps {
     selectedFile: File | string | null;
-    setSelectedFile: (file: File | null) => void;
+    setSelectedFile: (file: File) => void;
 }
 
 export default function FileInput({ selectedFile, setSelectedFile }: FileInputProps) {

diff --git a/admin/src/features/Rush/EventList.tsx b/admin/src/features/Rush/EventList.tsx
@@ -24,7 +24,7 @@ export default function EventList() {
     const dispatch = useRushEventDispatchContext();
 
     const { isSuccess: isSuccessPutRush, fetchData: putRush } = useFetch<PutRushEventResponse>(() =>
-        RushAPI.putRush([])
+        RushAPI.putRush(getFormData())
     );
 
     useEffect(() => {
@@ -36,7 +36,34 @@ export default function EventList() {
     const getFormData = () => {
         return rushList.map((rush) => {
             const formData = new FormData();
-            // formData.append("image", selectedFile);
+
+            formData.append("rushEventId", rush.rushEventId.toString());
+            formData.append("eventDate", rush.eventDate);
+            formData.append("openTime", rush.openTime);
+            formData.append("closeTime", rush.closeTime);
+            formData.append("winnerCount", rush.winnerCount.toString());
+            formData.append("prizeDescription", rush.prizeDescription);
+            formData.append("status", rush.status);
+
+            formData.append("prizeImageUrl", rush.prizeImageUrl);
+
+            formData.append("leftOption[rushOptionId]", rush.leftOption.rushOptionId.toString());
+            formData.append("leftOption[mainText]", rush.leftOption.mainText);
+            formData.append("leftOption[subText]", rush.leftOption.subText);
+            formData.append("leftOption[resultMainText]", rush.leftOption.resultMainText);
+            formData.append("leftOption[resultSubText]", rush.leftOption.resultSubText);
+
+            formData.append("leftOption[imageUrl]", rush.leftOption.imageUrl);
+
+            formData.append("rightOption[rushOptionId]", rush.rightOption.rushOptionId.toString());
+            formData.append("rightOption[mainText]", rush.rightOption.mainText);
+            formData.append("rightOption[subText]", rush.rightOption.subText);
+            formData.append("rightOption[resultMainText]", rush.rightOption.resultMainText);
+            formData.append("rightOption[resultSubText]", rush.rightOption.resultSubText);
+
+            formData.append("rightOption[imageUrl]", rush.rightOption.imageUrl);
+
+            return formData;
         });
     };
 

diff --git a/admin/src/features/Rush/RushPrizeForm.tsx b/admin/src/features/Rush/RushPrizeForm.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import Button from "@/components/Button";
+import FileInput from "@/components/FileInput";
 import SelectForm from "@/components/SelectForm";
 import TextField from "@/components/TextField";
 import useRushEventDispatchContext from "@/hooks/useRushEventDispatchContext";
@@ -47,7 +48,13 @@ export default function RushPrizeForm() {
     };
 
     const option = [
-        ["이미지", <input type="file" />],
+        [
+            "이미지",
+            <FileInput
+                selectedFile={prizeState.prizeImageUrl}
+                setSelectedFile={(file) => setPrizeState({ ...prizeState, prizeImageUrl: file })}
+            />,
+        ],
         [
             "경품 이름 (20자 이내)",
             <TextField

diff --git a/admin/src/features/Rush/RushSelectForm.tsx b/admin/src/features/Rush/RushSelectForm.tsx
@@ -21,15 +21,10 @@ export default function RushSelectForm() {
     const { showToast, ToastComponent } = useToast("입력한 내용이 임시 저장되었습니다!");
 
     const [selectOptionState, setSelectOptionState] = useState<RushOptionType[]>([]);
-    const [selectedFile, setSelectedFile] = useState<(File | string | null)[]>([]);
 
     useEffect(() => {
         if (rushIdx !== undefined) {
             setSelectOptionState([rushList[rushIdx].leftOption, rushList[rushIdx].rightOption]);
-            setSelectedFile([
-                rushList[rushIdx].leftOption.imageUrl,
-                rushList[rushIdx].rightOption.imageUrl,
-            ]);
         }
     }, [rushList]);
 
@@ -53,7 +48,7 @@ export default function RushSelectForm() {
         showToast();
     };
 
-    const handleChangeItem = (key: string, changeIdx: number, text: string) => {
+    const handleChangeItem = (key: string, changeIdx: number, text: string | File) => {
         const updatedItem = selectOptionState.map((item, idx) => {
             if (idx === changeIdx) {
                 return { ...item, [key]: text };
@@ -64,16 +59,6 @@ export default function RushSelectForm() {
         setSelectOptionState(updatedItem);
     };
 
-    const handleSelectFile = (idx: number, file: File | null) => {
-        const updatedSelectedFile = selectedFile.map((selected, selectedIdx) => {
-            if (selectedIdx === idx) {
-                return file;
-            }
-            return selected;
-        });
-        setSelectedFile(updatedSelectedFile);
-    };
-
     const getSelectOption = (idx: number) => {
         if (selectOptionState.length >= 2) {
             return [
@@ -101,8 +86,8 @@ export default function RushSelectForm() {
                 [
                     "이미지",
                     <FileInput
-                        selectedFile={selectedFile[idx]}
-                        setSelectedFile={(file) => handleSelectFile(idx, file)}
+                        selectedFile={selectOptionState[idx].imageUrl}
+                        setSelectedFile={(file) => handleChangeItem("imageUrl", idx, file)}
                     />,
                 ],
                 [

diff --git a/admin/src/types/rush.ts b/admin/src/types/rush.ts
@@ -8,7 +8,7 @@ export interface RushEventType {
     openTime: string;
     closeTime: string;
     winnerCount: number;
-    prizeImageUrl: string;
+    prizeImageUrl: File | string;
     prizeDescription: string;
     status: RushEventStatusType;
     leftOption: RushOptionType;
@@ -21,11 +21,11 @@ export interface RushOptionType {
     subText: string;
     resultMainText: string;
     resultSubText: string;
-    imageUrl: string;
+    imageUrl: File | string;
 }
 
 export interface RushPrizeType {
-    prizeImageUrl: string;
+    prizeImageUrl: File | string;
     prizeDescription: string;
 }
 
@@ -57,12 +57,3 @@ export interface RushParticipantType {
     createdAt: string;
     rank: number;
 }
-
-export interface RushOptionType {
-    rushOptionId: number;
-    mainText: string;
-    subText: string;
-    resultMainText: string;
-    resultSubText: string;
-    imageUrl: string;
-}