diff --git a/src/components/modal/ModalTodoStatus.tsx b/src/components/modal/ModalTaskStatus.tsx similarity index 86% rename from src/components/modal/ModalTodoStatus.tsx rename to src/components/modal/ModalTaskStatus.tsx index 7e802b78..f75b477a 100644 --- a/src/components/modal/ModalTodoStatus.tsx +++ b/src/components/modal/ModalTaskStatus.tsx @@ -3,14 +3,14 @@ import { IoIosClose } from 'react-icons/io'; import { RiProhibited2Fill, RiProhibited2Line } from 'react-icons/ri'; import { SubmitHandler, useForm } from 'react-hook-form'; import { STATUS_VALIDATION_RULES } from '@constants/formValidationRules'; -import type { ColorInfo, TodoStatus, TodoStatusForm } from '@/types/TodoStatusType'; +import type { ColorInfo, TaskStatus, TaskStatusForm } from '@/types/TaskStatusType'; -type TodoStatusProps = { - todoStatus: TodoStatus[]; +type TaskStatusProps = { + taskStatus: TaskStatus[]; onClose: () => void; }; -const DEFAULT_TODO_COLORS = Object.freeze({ +const DEFAULT_TASK_COLORS = Object.freeze({ RED: '#c83c00', YELLOW: '#dab700', GREEN: '#237700', @@ -22,14 +22,14 @@ const DEFAULT_TODO_COLORS = Object.freeze({ }); // 색상 정보 취득 -function getTodoColors(todoStatus: TodoStatus[]): ColorInfo[] { +function getTaskColors(taskStatus: TaskStatus[]): ColorInfo[] { const colorMap = new Map(); - Object.values(DEFAULT_TODO_COLORS).forEach((color) => + Object.values(DEFAULT_TASK_COLORS).forEach((color) => colorMap.set(color, { color, isDefault: true, isUsable: true }), ); - todoStatus.forEach(({ color }) => { + taskStatus.forEach(({ color }) => { const colorStatusInfo = colorMap.has(color) ? { ...colorMap.get(color), isUsable: false } : { color, isDefault: false, isUsable: false }; @@ -39,13 +39,13 @@ function getTodoColors(todoStatus: TodoStatus[]): ColorInfo[] { return [...colorMap.values()]; } -export default function ModalTodoStatus({ todoStatus, onClose }: TodoStatusProps) { +export default function ModalTodoStatus({ taskStatus, onClose }: TaskStatusProps) { const { register, watch, handleSubmit, formState: { errors }, - } = useForm({ + } = useForm({ mode: 'onChange', defaultValues: { name: '', @@ -56,9 +56,9 @@ export default function ModalTodoStatus({ todoStatus, onClose }: TodoStatusProps const selectedColor = watch('color'); // ToDo: useMemo, useCallback 고려해보기 - const colorList = getTodoColors(todoStatus); - const nameList = todoStatus.map((status) => status.name); - const colorNameList = todoStatus.map((status) => status.color); + const colorList = getTaskColors(taskStatus); + const nameList = taskStatus.map((status) => status.name); + const colorNameList = taskStatus.map((status) => status.color); const handleClickDelete = (color: string) => { // ToDo: 색상 삭제시 등록된 할일 목록이 있는지 확인하는 로직 추가 @@ -66,7 +66,7 @@ export default function ModalTodoStatus({ todoStatus, onClose }: TodoStatusProps console.log(`${color} 삭제`); }; - const onSubmit: SubmitHandler = async (data) => { + const onSubmit: SubmitHandler = async (data) => { // ToDo: 색상 생성을 위한 네트워크 로직 추가 console.log(data); }; diff --git a/src/globals.css b/src/globals.css index 657b5d61..966354ce 100644 --- a/src/globals.css +++ b/src/globals.css @@ -42,17 +42,6 @@ --color-button: #efefef; --color-kakao: #f6e04b; - /* todo color */ - --color-todo-red: #c83c00; - --color-todo-yellow: #dab700; - --color-todo-green: #237700; - --color-todo-blue: #00c2ff; - --color-todo-orange: #ff7a00; - --color-todo-purple: #db00ff; - --color-todo-pink: #ff0099; - --color-todo-yellow-green: #8fff00; - --color-todo-gray: #d9d9d9; - /* text color */ --text-color-default: #2c2c2c; --text-color-emphasis: #5e5e5e; diff --git a/src/layouts/page/ProjectLayout.tsx b/src/layouts/page/ProjectLayout.tsx index 57099a61..f35a0d64 100644 --- a/src/layouts/page/ProjectLayout.tsx +++ b/src/layouts/page/ProjectLayout.tsx @@ -7,7 +7,7 @@ import ListProject from '@components/sidebar/ListProject'; import ModalPortal from '@components/common/ModalPortal'; import ModalLayout from '@layouts/ModalLayout'; -import ModalTodoStatus from '@components/modal/ModalTodoStatus'; +import ModalTaskStatus from '@components/modal/ModalTaskStatus'; const dummy = { teamName: '김찌와 소주', @@ -84,7 +84,7 @@ export default function ProjectLayout() { {showStateModal && ( setShowStateModal(false)}> - setShowStateModal(false)} todoStatus={dummyColor.state} /> + setShowStateModal(false)} taskStatus={dummyColor.state} /> )} diff --git a/src/mocks/mockData.ts b/src/mocks/mockData.ts index 20b85a53..453855ed 100644 --- a/src/mocks/mockData.ts +++ b/src/mocks/mockData.ts @@ -1,5 +1,5 @@ -import type { TodoStatus } from '@/types/TodoStatusType'; -import type { TodoWithStatus } from '@/types/TodoType'; +import type { TaskStatus } from '@/types/TaskStatusType'; +import type { TaskWithStatus } from '@/types/TaskType'; export const USER_DUMMY = [ { @@ -22,7 +22,7 @@ export const USER_DUMMY = [ }, ]; -export const STATUS_DUMMY: TodoStatus[] = [ +export const STATUS_DUMMY: TaskStatus[] = [ { statusId: 1, name: 'To Do', @@ -43,7 +43,7 @@ export const STATUS_DUMMY: TodoStatus[] = [ }, ]; -export const TODO_DUMMY: TodoWithStatus[] = [ +export const TASK_DUMMY: TaskWithStatus[] = [ { statusId: 1, name: 'To Do', @@ -113,7 +113,7 @@ export const TODO_DUMMY: TodoWithStatus[] = [ tasks: [ { taskId: 1, - name: 'todo 상태 추가 모달 작업하기', + name: 'task 상태 추가 모달 작업하기', order: 1, userId: 2, files: [], diff --git a/src/pages/project/KanbanPage.tsx b/src/pages/project/KanbanPage.tsx index 8f0abff1..ce7ab408 100644 --- a/src/pages/project/KanbanPage.tsx +++ b/src/pages/project/KanbanPage.tsx @@ -3,9 +3,9 @@ import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'; import { BsPencil } from 'react-icons/bs'; import deepClone from '@utils/deepClone'; -import { TODO_DUMMY } from '@mocks/mockData'; +import { TASK_DUMMY } from '@mocks/mockData'; import type { DropResult } from '@hello-pangea/dnd'; -import type { Todo, TodoWithStatus } from '@/types/TodoType'; +import type { Task, TaskWithStatus } from '@/types/TaskType'; // ToDo: 유틸리티로 분리할지 고려하기 function generatorPrefixId(id: number | string, prefix: string, delimiter: string = '-') { @@ -17,7 +17,7 @@ function parserPrefixId(prefixId: string, delimiter: string = '-') { return result[result.length - 1]; } -function createChangedTodo(todo: TodoWithStatus[], dropResult: DropResult, isSameStatus: boolean) { +function createChangedTask(tasks: TaskWithStatus[], dropResult: DropResult, isSameStatus: boolean) { const { source, destination, draggableId } = dropResult; // ToDo: 메세지 포맷 정하고 수정하기 @@ -27,12 +27,12 @@ function createChangedTodo(todo: TodoWithStatus[], dropResult: DropResult, isSam const destinationStatusId = Number(parserPrefixId(destination.droppableId)); const taskId = Number(parserPrefixId(draggableId)); - const newTodo = deepClone(todo); - const { tasks: sourceTasks } = newTodo.find((data) => data.statusId === sourceStatusId)! as TodoWithStatus; + const newTask = deepClone(tasks); + const { tasks: sourceTasks } = newTask.find((data) => data.statusId === sourceStatusId)! as TaskWithStatus; const { tasks: destinationTasks } = isSameStatus ? { tasks: sourceTasks } - : (newTodo.find((data) => data.statusId === destinationStatusId)! as TodoWithStatus); - const task = sourceTasks.find((data) => data.taskId === taskId)! as Todo; + : (newTask.find((data) => data.statusId === destinationStatusId)! as TaskWithStatus); + const task = sourceTasks.find((data) => data.taskId === taskId)! as Task; sourceTasks.splice(source.index, 1); destinationTasks.splice(destination.index, 0, task); @@ -40,14 +40,14 @@ function createChangedTodo(todo: TodoWithStatus[], dropResult: DropResult, isSam sourceTasks.forEach((task, index) => (task.order = index + 1)); if (!isSameStatus) destinationTasks.forEach((task, index) => (task.order = index + 1)); - return newTodo; + return newTask; } // ToDo: 할일 상태 Vertical DnD 추가할 것 // ToDo: DnD시 가시성을 위한 애니메이션 처리 추가할 것 // ToDo: 칸반보드 ItemList, Item 컴포넌트로 분리할 것 export default function KanbanPage() { - const [todo, setTodo] = useState(TODO_DUMMY); + const [task, setTask] = useState(TASK_DUMMY); const handleDragEnd = (dropResult: DropResult) => { const { source, destination } = dropResult; @@ -55,17 +55,17 @@ export default function KanbanPage() { if (!destination) return; const isSameStatus = source.droppableId === destination.droppableId; - const isSameTodo = source.index === destination.index; - if (isSameStatus && isSameTodo) return; + const isSameTask = source.index === destination.index; + if (isSameStatus && isSameTask) return; - const newTodo = createChangedTodo(todo, dropResult, isSameStatus); - setTodo(newTodo); + const newTask = createChangedTask(task, dropResult, isSameStatus); + setTask(newTask); }; return (
- {todo.map((data) => { + {task.map((data) => { const { statusId, name, color, tasks } = data; const droppableId = generatorPrefixId(statusId, 'status'); return ( @@ -77,7 +77,7 @@ export default function KanbanPage() {
- + {(dropProvided) => { return (