From 9680cfae982c483b248934da22d08fa100de57d2 Mon Sep 17 00:00:00 2001
From: Jungu Lee <1zzangjun@gmail.com>
Date: Fri, 15 Dec 2023 00:38:31 +0900
Subject: [PATCH] =?UTF-8?q?Refactor=20:=20IntialValue=20=EB=A5=BC=20?=
 =?UTF-8?q?=EB=B0=9B=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/newpost/SearchAlcoholInput.tsx | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/client/src/components/newpost/SearchAlcoholInput.tsx b/client/src/components/newpost/SearchAlcoholInput.tsx
index 1d2ceb1..f2dc595 100644
--- a/client/src/components/newpost/SearchAlcoholInput.tsx
+++ b/client/src/components/newpost/SearchAlcoholInput.tsx
@@ -10,7 +10,7 @@ import {
   Typography,
   InputAdornment,
 } from "@mui/material";
-import { Dispatch, SetStateAction, memo, useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import AlcholeSearchIcon from "@/assets/icons/AlcholeSearchIcon.svg";
 import InputSearchIcon from "@/assets/icons/InputSearchIcon.svg";
 import useGetAlcoholListQuery from "@/queries/alcohol/useGetAlcoholListQuery";
@@ -20,11 +20,18 @@ import useDebounce from "@/hooks/useDebounce";
 import { NewPostRequestAlCohol } from "@/types/newPost/NewPostInterface";
 
 interface SearchAlcoholInputInterface {
-  setAlcoholNo: Dispatch<SetStateAction<NewPostRequestAlCohol["alcoholNo"]>>;
+  setAlcoholNo: (alcoholNo: NewPostRequestAlCohol["alcoholNo"]) => void;
+  initialValue?: Pick<
+    AlcoholDetailInterface,
+    "alcoholName" | "alcoholNo" | "alcoholType"
+  >;
 }
-const SearchAlcoholInput = ({ setAlcoholNo }: SearchAlcoholInputInterface) => {
+const SearchAlcoholInput = ({
+  setAlcoholNo,
+  initialValue,
+}: SearchAlcoholInputInterface) => {
   // 유저가 검색한 키워드
-  const [searchKeyword, setSearchKeyword] = useState<string>();
+  const [searchKeyword, setSearchKeyword] = useState<string>("");
   // 검색한 키워드의 Debounced 값
   const debouncedValue = useDebounce(searchKeyword, 300);
   const [isSearchingAlcohol, setIsSearchingAlCohol] = useState(false);
@@ -32,11 +39,13 @@ const SearchAlcoholInput = ({ setAlcoholNo }: SearchAlcoholInputInterface) => {
   // 검색결과
   const { data, isLoading, isSuccess } = useGetAlcoholListQuery(debouncedValue);
   // 유저가 검색후 최종적으로 선택한 값
-  const [selectedAlcohol, setSelectedAlcohol] =
-    useState<AlcoholDetailInterface>();
+  const [selectedAlcohol, setSelectedAlcohol] = useState<
+    | Pick<AlcoholDetailInterface, "alcoholName" | "alcoholNo" | "alcoholType">
+    | undefined
+  >(initialValue);
 
   useEffect(() => {
-    setSearchKeyword(selectedAlcohol?.alcoholName);
+    setSearchKeyword(selectedAlcohol?.alcoholName ?? "");
     setAlcoholNo(selectedAlcohol?.alcoholNo);
   }, [selectedAlcohol]);