diff --git a/src/components/modal/project-status/CreateModalProjectStatus.tsx b/src/components/modal/project-status/CreateModalProjectStatus.tsx index d5937086..570282c7 100644 --- a/src/components/modal/project-status/CreateModalProjectStatus.tsx +++ b/src/components/modal/project-status/CreateModalProjectStatus.tsx @@ -15,6 +15,7 @@ export default function CreateModalProjectStatus({ onClose: handleClose, project const handleSubmit: SubmitHandler = async (data) => { console.log('생성 폼 제출'); console.log(data); + handleClose(); }; return ( diff --git a/src/components/modal/project-status/ModalProjectStatusForm.tsx b/src/components/modal/project-status/ModalProjectStatusForm.tsx index 643e5d7e..21eeba95 100644 --- a/src/components/modal/project-status/ModalProjectStatusForm.tsx +++ b/src/components/modal/project-status/ModalProjectStatusForm.tsx @@ -1,46 +1,32 @@ import { SubmitHandler, useForm } from 'react-hook-form'; +import { PROJECT_STATUS_COLORS } from '@constants/projectStatus'; import { STATUS_VALIDATION_RULES } from '@constants/formValidationRules'; import { GiCheckMark } from 'react-icons/gi'; -import { IoIosClose } from 'react-icons/io'; import { RiProhibited2Fill, RiProhibited2Line } from 'react-icons/ri'; import type { ColorInfo, ProjectStatus, ProjectStatusForm } from '@/types/ProjectStatusType'; type ProjectStatusProps = { - onSubmit: SubmitHandler; formId: string; projectStatus: ProjectStatus[]; + onSubmit: SubmitHandler; }; -const DEFAULT_PROJECT_COLORS = Object.freeze({ - RED: '#c83c00', - YELLOW: '#dab700', - GREEN: '#237700', - BLUE: '#00c2ff', - ORANGE: '#ff7a00', - PURPLE: '#db00ff', - PINK: '#ff0099', - YELLO_GREEN: '#8fff00', -}); - // 색상 정보 취득 function getProjectColors(projectStatus: ProjectStatus[]): ColorInfo[] { const colorMap = new Map(); - - Object.values(DEFAULT_PROJECT_COLORS).forEach((color) => - colorMap.set(color, { color, isDefault: true, isUsable: true }), - ); + Object.values(PROJECT_STATUS_COLORS).forEach((color) => { + colorMap.set(color, { color, isUsable: true }); + }); projectStatus.forEach(({ color }) => { - const colorStatusInfo = colorMap.has(color) - ? { ...colorMap.get(color), isUsable: false } - : { color, isDefault: false, isUsable: false }; - colorMap.set(color, colorStatusInfo); + if (!colorMap.has(color)) throw Error('[Error] 등록되지 않은 색상입니다.'); + colorMap.set(color, { ...colorMap.get(color), isUsable: false }); }); return [...colorMap.values()]; } -export default function ModalProjectStatusForm({ formId, projectStatus }: ProjectStatusProps) { +export default function ModalProjectStatusForm({ formId, projectStatus, onSubmit }: ProjectStatusProps) { const { register, watch, @@ -56,23 +42,10 @@ export default function ModalProjectStatusForm({ formId, projectStatus }: Projec const statusName = watch('name'); const selectedColor = watch('color'); - // ToDo: useMemo, useCallback 고려해보기 const colorList = getProjectColors(projectStatus); const nameList = projectStatus.map((status) => status.name); const colorNameList = projectStatus.map((status) => status.color); - const handleClickDelete = (color: string) => { - // ToDo: 색상 삭제시 등록된 할일 목록이 있는지 확인하는 로직 추가 - // ToDo: 색상 삭제를 위한 네트워크 로직 추가 - console.log(`${color} 삭제`); - }; - - const onSubmit: SubmitHandler = async (data) => { - // ToDo: 색상 생성을 위한 네트워크 로직 추가 - console.log('제출됐다!'); - console.log(data); - }; - return (
+

색상

- {colorList.map(({ color, isUsable, isDefault }, index) => ( + {colorList.map(({ color, isUsable }, index) => (
- {!isDefault && ( - - )}
))}
diff --git a/src/constants/projectStatus.ts b/src/constants/projectStatus.ts new file mode 100644 index 00000000..7e00680c --- /dev/null +++ b/src/constants/projectStatus.ts @@ -0,0 +1,10 @@ +export const PROJECT_STATUS_COLORS = Object.freeze({ + RED: '#c83c00', + YELLOW: '#dab700', + GREEN: '#237700', + BLUE: '#00c2ff', + ORANGE: '#ff7a00', + PURPLE: '#db00ff', + PINK: '#ff0099', + YELLO_GREEN: '#8fff00', +}); diff --git a/src/types/ProjectStatusType.tsx b/src/types/ProjectStatusType.tsx index 9dacb0a8..b2d4be53 100644 --- a/src/types/ProjectStatusType.tsx +++ b/src/types/ProjectStatusType.tsx @@ -13,6 +13,5 @@ export type ProjectStatusForm = { export type ColorInfo = { color: string; - isDefault: boolean; isUsable: boolean; };