Merge branch 'develop' of https://github.com/GU-99/grow-up-fe into fe…

…ature/#80-local-login
GU-99 · Aug 31, 2024 · 125ee96 · 125ee96
2 parents 1cee168 + a5b61e4
commit 125ee96
Show file tree

Hide file tree

Showing 16 changed files with 142 additions and 132 deletions.
diff --git a/src/components/common/CustomMarkdown.tsx b/src/components/common/CustomMarkdown.tsx
@@ -137,10 +137,25 @@ const component: Partial<Components> = {
 };
 
 function getChangedMarkdownForLineBreak(markdown: string) {
-  return markdown
-    .split('\n')
-    .map((sentence) => (sentence === '' ? '\n<br />\n' : sentence))
-    .join('\n');
+  const lines = markdown.split('\n');
+
+  let inCodeBlock = false;
+  const resultLines: string[] = [];
+  lines.forEach((line) => {
+    if (line.trim().startsWith('```')) {
+      inCodeBlock = !inCodeBlock;
+      resultLines.push(line);
+      return;
+    }
+
+    if (!inCodeBlock && line.trim() === '') {
+      resultLines.push('\n<br/>\n');
+    } else {
+      resultLines.push(line);
+    }
+  });
+
+  return resultLines.join('\n');
 }
 
 export default function CustomMarkdown({ markdown }: CustomMarkdownProps) {

diff --git a/src/components/modal/project-status/ModalProjectStatusForm.tsx b/src/components/modal/project-status/ModalProjectStatusForm.tsx
@@ -39,27 +39,27 @@ export default function ModalProjectStatusForm({ formId, project, statusId, onSu
       />
       <h3 className="text-large">색상</h3>
       <section className="grid grid-cols-8 gap-4">
-        {usableColorList.map(({ color, isUsable }, index) => (
+        {usableColorList.map(({ colorCode, isUsable }, index) => (
           <div className="group relative m-auto" key={index}>
             <label
-              htmlFor={color}
-              style={{ backgroundColor: color }}
-              className={`inline-block size-20 cursor-pointer rounded-full ${isUsable && watch('color') === color ? 'border-4 border-selected' : ''}`}
+              htmlFor={colorCode}
+              style={{ backgroundColor: colorCode }}
+              className={`inline-block size-20 cursor-pointer rounded-full ${isUsable && watch('colorCode') === colorCode ? 'border-4 border-selected' : ''}`}
             >
               <input
                 type="radio"
-                id={color}
-                value={color}
+                id={colorCode}
+                value={colorCode}
                 className="hidden"
                 disabled={!isUsable}
-                {...register('color', STATUS_VALIDATION_RULES.COLOR(colorList))}
+                {...register('colorCode', STATUS_VALIDATION_RULES.COLOR(colorList))}
               />
               {!isUsable && <RiProhibited2Fill className="size-20 text-white" />}
             </label>
           </div>
         ))}
       </section>
-      {errors.color && <div className="mt-5 text-xs text-error">{errors.color.message}</div>}
+      {errors.colorCode && <div className="mt-5 text-xs text-error">{errors.colorCode.message}</div>}
     </form>
   );
 }
diff --git a/src/components/modal/project/ModalProjectForm.tsx b/src/components/modal/project/ModalProjectForm.tsx
@@ -5,10 +5,11 @@ import type { Project } from '@/types/ProjectType';
 
 type ModalProjectFormProps = {
   formId: string;
+  projectId?: Project['projectId'];
   onSubmit: SubmitHandler<Project>;
 };
 
-export default function ModalProjectForm({ formId, onSubmit }: ModalProjectFormProps) {
+export default function ModalProjectForm({ formId, projectId, onSubmit }: ModalProjectFormProps) {
   const { handleSubmit } = useForm<Project>();
   return (
     <form id={formId} className="mb-10 flex grow flex-col justify-center" onSubmit={handleSubmit(onSubmit)}>

diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx
@@ -167,7 +167,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
       {/* ToDo: 상태 선택 리팩토링 할 것 */}
       <div className="flex items-center justify-start gap-4">
         {statusList.map((status) => {
-          const { statusId, name, color } = status;
+          const { statusId, name, colorCode } = status;
           const isChecked = +watch('statusId') === statusId;
           return (
             <label
@@ -183,7 +183,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
                 checked={isChecked}
                 {...register('statusId', TASK_VALIDATION_RULES.STATUS)}
               />
-              <div style={{ borderColor: color }} className="mr-3 h-8 w-8 rounded-full border" />
+              <div style={{ borderColor: colorCode }} className="mr-3 h-8 w-8 rounded-full border" />
               <h3 className="text-xs">{name}</h3>
             </label>
           );

diff --git a/src/components/modal/team/ModalTeamForm.tsx b/src/components/modal/team/ModalTeamForm.tsx
@@ -5,7 +5,7 @@ import type { Team } from '@/types/TeamType';
 
 type ModalTeamFormProps = {
   formId: string;
-  teamId: Team['teamId'];
+  teamId?: Team['teamId'];
   onSubmit: SubmitHandler<Team>;
 };
 

diff --git a/src/components/task/calendar/CustomEventWrapper.tsx b/src/components/task/calendar/CustomEventWrapper.tsx
@@ -27,7 +27,7 @@ export default function CustomEventWrapper(props: EventWrapperProps<CustomEvent>
 
   return (
     <div
-      style={{ backgroundColor: event.task.color }}
+      style={{ backgroundColor: event.task.colorCode }}
       className={`overflow-hidden text-ellipsis rounded-md px-3 py-1 ${continuesClass}`}
     >
       {children}

diff --git a/src/components/task/kanban/ProjectStatusContainer.tsx b/src/components/task/kanban/ProjectStatusContainer.tsx
@@ -16,9 +16,9 @@ type TaskStatusContainerProps = {
 export default function TaskStatusContainer({ statusTask }: TaskStatusContainerProps) {
   const { project } = useProjectContext();
   const { showModal, openModal, closeModal } = useModal();
-  const { statusId, name, color, order, tasks } = statusTask;
+  const { statusId, name, colorCode, sortOrder, tasks } = statusTask;
   const draggableId = useMemo(() => generatePrefixId(statusId, DND_DRAGGABLE_PREFIX.STATUS), [statusId]);
-  const index = useMemo(() => order - 1, [order]);
+  const index = useMemo(() => sortOrder - 1, [sortOrder]);
 
   return (
     <>
@@ -38,7 +38,7 @@ export default function TaskStatusContainer({ statusTask }: TaskStatusContainerP
                 />
               </span>
             </header>
-            <TaskItemList statusId={statusId} color={color} tasks={tasks} />
+            <TaskItemList statusId={statusId} colorCode={colorCode} tasks={tasks} />
           </article>
         )}
       </Draggable>

diff --git a/src/components/task/kanban/TaskItem.tsx b/src/components/task/kanban/TaskItem.tsx
@@ -3,11 +3,11 @@ import { Draggable, DraggableId } from '@hello-pangea/dnd';
 type TaskItemProps = {
   draggableId: DraggableId;
   name: string;
-  color: string;
+  colorCode: string;
   index: number;
 };
 
-export default function TaskItem({ draggableId, name, color, index }: TaskItemProps) {
+export default function TaskItem({ draggableId, name, colorCode, index }: TaskItemProps) {
   return (
     <Draggable draggableId={draggableId} index={index}>
       {(dragProvided) => (
@@ -17,7 +17,7 @@ export default function TaskItem({ draggableId, name, color, index }: TaskItemPr
           {...dragProvided.draggableProps}
           {...dragProvided.dragHandleProps}
         >
-          <div style={{ borderColor: color }} className="h-8 w-8 rounded-full border" />
+          <div style={{ borderColor: colorCode }} className="h-8 w-8 rounded-full border" />
           <div className="select-none overflow-hidden text-ellipsis text-nowrap">{name}</div>
         </div>
       )}

diff --git a/src/components/task/kanban/TaskItemList.tsx b/src/components/task/kanban/TaskItemList.tsx
@@ -7,26 +7,26 @@ import type { Task } from '@/types/TaskType';
 
 type TaskItemListProps = {
   statusId: number;
-  color: string;
+  colorCode: string;
   tasks: Task[];
 };
 
-export default function TaskItemList({ statusId, color, tasks }: TaskItemListProps) {
+export default function TaskItemList({ statusId, colorCode, tasks }: TaskItemListProps) {
   const droppableId = useMemo(() => generatePrefixId(statusId, DND_DROPPABLE_PREFIX.TASK), [statusId]);
   return (
     <Droppable droppableId={droppableId} type={DND_TYPE.TASK}>
       {(taskDropProvided) => (
         <article
-          style={{ borderColor: color }}
+          style={{ borderColor: colorCode }}
           className="h-full w-full grow border-l-[3px] bg-scroll"
           ref={taskDropProvided.innerRef}
           {...taskDropProvided.droppableProps}
         >
           {tasks.map((task) => {
-            const { taskId, name, order } = task;
+            const { taskId, name, sortOrder } = task;
             const draggableId = generatePrefixId(taskId, DND_DRAGGABLE_PREFIX.TASK);
-            const index = order - 1;
-            return <TaskItem key={taskId} draggableId={draggableId} color={color} index={index} name={name} />;
+            const index = sortOrder - 1;
+            return <TaskItem key={taskId} draggableId={draggableId} colorCode={colorCode} index={index} name={name} />;
           })}
           {taskDropProvided.placeholder}
         </article>

diff --git a/src/hooks/query/useStatusQuery.ts b/src/hooks/query/useStatusQuery.ts
@@ -14,8 +14,8 @@ function getStatusNameList(statusList: ProjectStatus[], excludedName?: ProjectSt
   return [...statusNameSet.values()];
 }
 
-function getStatusColorList(statusList: ProjectStatus[], excludedColor?: ProjectStatus['color']) {
-  const statusColorList = statusList.map((projectStatus) => projectStatus.color);
+function getStatusColorList(statusList: ProjectStatus[], excludedColor?: ProjectStatus['colorCode']) {
+  const statusColorList = statusList.map((projectStatus) => projectStatus.colorCode);
 
   const statusColorSet = new Set(statusColorList);
   if (excludedColor && statusColorSet.has(excludedColor)) {
@@ -25,17 +25,20 @@ function getStatusColorList(statusList: ProjectStatus[], excludedColor?: Project
   return [...statusColorSet.values()];
 }
 
-function getUsableStatusColorList(statusList: ProjectStatus[], excludedColor?: ProjectStatus['color']): UsableColor[] {
+function getUsableStatusColorList(
+  statusList: ProjectStatus[],
+  excludedColor?: ProjectStatus['colorCode'],
+): UsableColor[] {
   const statusColorMap = new Map();
   Object.values(PROJECT_STATUS_COLORS).forEach((color) => {
     statusColorMap.set(color, { color, isUsable: true });
   });
 
-  statusList.forEach(({ color }) => {
-    if (!statusColorMap.has(color)) throw Error('[Error] 등록되지 않은 색상입니다.');
+  statusList.forEach(({ colorCode }) => {
+    if (!statusColorMap.has(colorCode)) throw Error('[Error] 등록되지 않은 색상입니다.');
 
-    if (excludedColor === color) return;
-    statusColorMap.set(color, { ...statusColorMap.get(color), isUsable: false });
+    if (excludedColor === colorCode) return;
+    statusColorMap.set(colorCode, { ...statusColorMap.get(colorCode), isUsable: false });
   });
 
   return [...statusColorMap.values()];
@@ -47,10 +50,10 @@ export default function useStatusQuery(projectId: Project['projectId'], statusId
   const statusList = STATUS_DUMMY;
 
   const status = statusList.find((status) => status.statusId === statusId);
-  const initialValue = { name: status?.name || '', color: status?.color || '' };
+  const initialValue = { name: status?.name || '', color: status?.colorCode || '' };
   const nameList = getStatusNameList(statusList, status?.name);
-  const colorList = getStatusColorList(statusList, status?.color);
-  const usableColorList = getUsableStatusColorList(statusList, status?.color);
+  const colorList = getStatusColorList(statusList, status?.colorCode);
+  const usableColorList = getUsableStatusColorList(statusList, status?.colorCode);
 
   return { statusList, initialValue, nameList, colorList, usableColorList };
 }