Feature: 선택배경색상 프리뷰 기능 추가

8-Sprinters · Nov 18, 2024 · 18037b7 · 18037b7
1 parent f018cbb
commit 18037b7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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} />}