From 18037b7b762d27fe70368d4152f94e87ab2ee38d Mon Sep 17 00:00:00 2001
From: Seoyoung <seoyoungiyo@gmail.com>
Date: Mon, 18 Nov 2024 18:38:31 +0900
Subject: [PATCH] =?UTF-8?q?Feature:=20=EC=84=A0=ED=83=9D=EB=B0=B0=EA=B2=BD?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=ED=94=84=EB=A6=AC=EB=B7=B0=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/list/create/_components/ItemAccordion.tsx |  2 ++
 src/app/list/create/_components/Step.css.ts       |  8 ++++++++
 src/app/list/create/_components/StepThree.tsx     | 13 +++++++++----
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/app/list/create/_components/ItemAccordion.tsx b/src/app/list/create/_components/ItemAccordion.tsx
index f84d0940..41119336 100644
--- a/src/app/list/create/_components/ItemAccordion.tsx
+++ b/src/app/list/create/_components/ItemAccordion.tsx
@@ -100,6 +100,7 @@ export default function ItemAccordion({
           className={styles.titleInput}
           placeholder="아이템명을 작성해 주세요."
           readOnly={type === 'edit' && listDetailData?.items.some((item) => item.id === getValues(`items.${index}.id`))}
+          autoComplete="off"
           onClick={() => {
             if (type === 'edit' && listDetailData?.items.some((item) => item.id === getValues(`items.${index}.id`))) {
               toasting({ type: 'default', txt: '이미 등록한 아이템명은 수정이 불가능해요' });
@@ -152,6 +153,7 @@ export default function ItemAccordion({
                     onChange={(e) => {
                       handleImageChange(e);
                     }}
+                    autoComplete="off"
                   />
                 </ItemImageUploader>
                 <ItemLinkUploader index={index} />
diff --git a/src/app/list/create/_components/Step.css.ts b/src/app/list/create/_components/Step.css.ts
index a9ff5bb6..16816fe9 100644
--- a/src/app/list/create/_components/Step.css.ts
+++ b/src/app/list/create/_components/Step.css.ts
@@ -189,9 +189,17 @@ export const labelChip = style([
 ]);
 
 //배경색상
+
+export const colorPreview = style({
+  width: '6rem',
+  height: '2.5rem',
+  borderRadius: '2rem',
+});
+
 export const tapContainer = style({
   display: 'flex',
   alignItems: 'center',
+  justifyContent: 'space-between',
 });
 
 export const tapButton = style([
diff --git a/src/app/list/create/_components/StepThree.tsx b/src/app/list/create/_components/StepThree.tsx
index 24f6d833..19cb2766 100644
--- a/src/app/list/create/_components/StepThree.tsx
+++ b/src/app/list/create/_components/StepThree.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useFieldArray, useForm, useFormContext, useWatch } from 'react-hook-form';
 import { useLanguage } from '@/store/useLanguage';
 import { vars } from '@/styles/theme.css';
-import { BACKGROUND_COLOR_CREATE, BACKGROUND_COLOR_PALETTE_TYPE } from '@/styles/Color';
+import { BACKGROUND_COLOR_CREATE, BACKGROUND_COLOR_PALETTE_TYPE, BACKGROUND_COLOR_READ } from '@/styles/Color';
 import { listPlaceholder } from '@/lib/constants/placeholder';
 import Header from '@/components/Header/Header';
 import { listLocale } from '@/app/list/create/locale';
@@ -106,14 +106,17 @@ export default function StepThree({ onBeforeClick, onNextClick, type, isSubmitti
   };
 
   /** 배경색상*/
+  type BackgroundColorKeys = keyof typeof BACKGROUND_COLOR_READ;
+
   const [selectedPalette, setSelectedPalette] = useState<BACKGROUND_COLOR_PALETTE_TYPE>(getValues('backgroundPalette'));
-  const [selectedColorID, setSelectedColorID] = useState(getValues('backgroundColor'));
+  const [selectedColorID, setSelectedColorID] = useState<BackgroundColorKeys>(getValues('backgroundColor'));
+  const [selectedColorHex, setSelectedColorHex] = useState<string>(BACKGROUND_COLOR_READ[selectedColorID]);
 
   const handleClickPalette = (palette: string) => {
     setSelectedPalette(palette as BACKGROUND_COLOR_PALETTE_TYPE);
   };
 
-  const handleClickColor = (colorID: string) => {
+  const handleClickColor = (colorID: BackgroundColorKeys) => {
     setSelectedColorID(colorID);
     setValue('backgroundPalette', selectedPalette);
     setValue('backgroundColor', colorID);
@@ -194,6 +197,7 @@ export default function StepThree({ onBeforeClick, onNextClick, type, isSubmitti
                 {palette}
               </div>
             ))}
+            <div className={styles.colorPreview} style={{ backgroundColor: selectedColorHex }} />
           </div>
           {/** end-tapContainer(팔레트) */}
           <div className={styles.colorChipContainer}>
@@ -203,7 +207,8 @@ export default function StepThree({ onBeforeClick, onNextClick, type, isSubmitti
                 className={styles.colorChip}
                 style={{ backgroundColor: hex }}
                 onClick={() => {
-                  handleClickColor(colorID);
+                  handleClickColor(colorID as BackgroundColorKeys);
+                  setSelectedColorHex(hex);
                 }}
               >
                 {selectedColorID === colorID && <SelectIcon width={27} height={19} stroke={vars.color.deepblue10} />}