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" /> 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(getValues('backgroundPalette')); - const [selectedColorID, setSelectedColorID] = useState(getValues('backgroundColor')); + const [selectedColorID, setSelectedColorID] = useState(getValues('backgroundColor')); + const [selectedColorHex, setSelectedColorHex] = useState(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} ))} +
{/** end-tapContainer(팔레트) */}
@@ -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 && }