Repository: ICan-5/ICan-Frontend
Pull request #67: [CAN-77/fix] 목표 상세 페이지 테스트 수정
Author: login: jeongeunhq
Labels: name: 🐞 BugFix
description: 버그 수정
name: 🔨 Refactor
description: 코드 리팩토링
Created: 2025-03-13T08:19:16Z | Merged: 2025-03-17T01:22:53Z

## 개요 🔎

`어떤 이유에서 이 PR을 시작하게 됐는지에 대한 히스토리를 남겨주세요.`

## 작업내용 📝

- 수정하는 input창 width가 너무 작은 것 해결
- 모서리 둥근 정도 수정
- 생성 모달창이 모바일일 때 캘린더 페이지와 동일하게 작동
- 할일 생성 시 엔터 연타하면 그 개수만큼 동일한 할일이 생성 해결
- 기존 제목 보이지않고 날짜가 항상 오늘로 표시되는 것 해결
- 달력 아이콘 클릭하고 호버를 치우면 달력만 떠있는데 이 부분 할일 케밥 아이콘 클릭 시 처럼 구현 가능하면 바꾸기
- 달력에 오늘 날짜 강조
- 장바구니 모두 삭제 기능 제거
- default 색상 추가
- 색상 선택 시 부드럽게 이동
- 수정 중에 다른 영역 클릭 시 수정 내용 저장
- 할일 생성 모달창 순서 변경(할일 제목 날짜 목표 순)
- z 폴더 사이즈 모바일일 때 달력 왼쪽이 짤리는 것은 해결하지 못했습니다.....datePicker가 말을 안듣네요.....ㅠ.....
- goal03, 04 색상 변경
## 패키지 설치내용 📦

`적용했던 Package의 install 명령어를 남겨주세요.`


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
	- Todo 생성 및 편집 모달이 미리 채워진 제목과 날짜 필드를 지원하여 작업 효율이 향상되었습니다.
	- 목표 장바구니에 날짜 선택 기능이 추가되어 일정 관리가 개선되었습니다.
	- 목표 색상 테마에 기본 색상 옵션이 추가되었습니다.
	- 목표 편집 시 불필요한 저장을 방지하여 원활한 편집 경험을 제공합니다.

- **Style**
	- 목표 및 Todo 관련 컴포넌트의 둥근 모서리와 레이아웃이 업데이트되어 일관된 디자인을 구현합니다.
	- 취소 아이콘 버튼 등 인터페이스 디자인이 개선되었습니다.

- **Chores**
	- 목표 장바구니의 전체 삭제 기능이 제거되었습니다.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/src/app/(member)/goals/[id]/note/page.tsx b/src/app/(member)/goals/[id]/note/page.tsx
index 1405e123..8daaf863 100644
--- a/src/app/(member)/goals/[id]/note/page.tsx
+++ b/src/app/(member)/goals/[id]/note/page.tsx
@@ -1,11 +1,14 @@
 'use client';
 
+import { config } from '@fortawesome/fontawesome-svg-core';
+import '@fortawesome/fontawesome-svg-core/styles.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { useNoteList } from '@/hooks/useNotes';
 import NoteHeader from '@/components/note/NoteHeader';
 import NoteList from '@/components/note/NoteList';
 
+config.autoAddCss = false;
 export default function Page({ params }: { params: { id: string } }) {
   const goalId = Number(params.id);
   const { data: notes, isLoading, error } = useNoteList(goalId);
diff --git a/src/app/(member)/goals/[id]/page.tsx b/src/app/(member)/goals/[id]/page.tsx
index 46039500..266ec49e 100644
--- a/src/app/(member)/goals/[id]/page.tsx
+++ b/src/app/(member)/goals/[id]/page.tsx
@@ -69,10 +69,10 @@ export default function Page({ params }: { params: { id: string } }) {
   const renderGoal = () => (
     <>
       <div className="mb-[10px] grid gap-[10px] md:grid-cols-[minmax(300px,750px),minmax(200px,440px)]">
-        <div className="h-[162px] rounded-2xl bg-gs00 shadow">
+        <div className="h-[162px] rounded-xl bg-gs00 shadow">
           <GoalHeader id={params.id} setGoalAvailable={setIsGoalAvailable} />
         </div>
-        <div className="h-[162px] rounded-2xl bg-gs00 shadow">
+        <div className="h-[162px] rounded-xl bg-gs00 shadow">
           <GoalProgress
             doneItems={doneItems.length}
             todoItems={todoItems.length}
@@ -85,13 +85,15 @@ export default function Page({ params }: { params: { id: string } }) {
         renderLoading()
       ) : (
         <div className="grid gap-[10px] md:grid-cols-[minmax(300px,750px),minmax(200px,440px)]">
-          <GoalTodoList
-            list={todoItems}
-            onToggle={handleToggleTodo}
-            goalId={params.id}
-            color={getGoalColor(color)}
-          />
-          <div className="flex flex-col gap-[10px]">
+          <div className="min-w-0">
+            <GoalTodoList
+              list={todoItems}
+              onToggle={handleToggleTodo}
+              goalId={params.id}
+              color={getGoalColor(color)}
+            />
+          </div>
+          <div className="flex min-w-0 flex-col gap-[10px]">
             <GoalDoneList
               list={doneItems.map((item) => ({
                 ...item,
diff --git a/src/components/goalDetail/BasketCreateTodo.tsx b/src/components/goalDetail/BasketCreateTodo.tsx
index 87b3e1c8..c25e6e11 100644
--- a/src/components/goalDetail/BasketCreateTodo.tsx
+++ b/src/components/goalDetail/BasketCreateTodo.tsx
@@ -1,12 +1,14 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { z } from 'zod';
 import { useForm, Controller } from 'react-hook-form';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { zodResolver } from '@hookform/resolvers/zod';
 import TextInput from '@/components/common/input/TextInput';
 import Button from '../common/button/Button';
 import { useGoals } from '@/hooks/useGoals';
 import { Goal } from '@/types/goals';
 import { useAddBasketTodo } from '@/hooks/useGoalBasketTodo';
+import IconButton from '@/components/common/button/IconButton';
 
 const createBasketSchema = z.object({
   title: z
@@ -35,6 +37,7 @@ export default function GoalTodoCreateModal({
 }: Props) {
   const { data: goals } = useGoals();
   const { mutate: addBasketTodo } = useAddBasketTodo();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const goalTitle =
     goals?.find((goal: Goal) => goal.goalId === goalId)?.title || '목표 없음';
@@ -63,6 +66,10 @@ export default function GoalTodoCreateModal({
 
   const onSubmit = useCallback(
     (data: BasketFormValues) => {
+      if (isSubmitting) return;
+
+      setIsSubmitting(true);
+
       addBasketTodo(
         { title: data.title, goal: { goalId } },
         {
@@ -72,58 +79,63 @@ export default function GoalTodoCreateModal({
         },
       );
     },
-    [goalId, addBasketTodo, onClose],
+    [goalId, addBasketTodo, onClose, isSubmitting],
   );
 
   if (!isVisible) return null;
 
   return (
-    <div className="w-[520px] flex-col gap-6 rounded-lg bg-white p-6 shadow-lg">
-      <h2 className="mb-4 text-lg font-bold">장바구니 할일 생성</h2>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Controller
-          name="title"
-          control={control}
-          render={({ field }) => (
-            <TextInput
-              value={field.value}
-              onChange={field.onChange}
-              name={field.name}
-              label="할 일 제목"
+    <div className="flex size-full flex-col gap-6 bg-gs00 p-6 md:h-auto md:w-[520px] md:rounded-lg">
+      <div className="flex justify-between">
+        <h2 className="mb-4 text-lg font-bold">장바구니 할일 생성</h2>
+        <IconButton icon={faXmark} className="md:hidden" onClick={onCancel} />
+      </div>
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+        <div className="flex flex-col gap-10">
+          <div className="flex flex-col gap-6">
+            <Controller
+              name="title"
               control={control}
-              errors={errors}
-              placeholder="할 일을 입력하세요."
+              render={({ field }) => (
+                <TextInput
+                  value={field.value}
+                  onChange={field.onChange}
+                  name={field.name}
+                  label="할 일 제목"
+                  control={control}
+                  errors={errors}
+                  placeholder="할 일을 입력하세요."
+                />
+              )}
+            />
+            <p className="mt-4 text-16SB text-gsBk">목표</p>
+            <input
+              type="text"
+              value={goalTitle}
+              readOnly
+              className="mb-3 w-full cursor-not-allowed rounded-lg bg-gs100 p-2 px-4 py-3 text-16R text-gs600"
             />
-          )}
-        />
-        <p className="mt-4 text-16SB text-gsBk">목표</p>
-        <input
-          type="text"
-          value={goalTitle}
-          readOnly
-          className="mb-3 w-full cursor-not-allowed rounded-lg bg-gs100 p-2 px-4 py-3 text-16R text-gs600"
-        />
-        <div className="mt-4 flex w-full flex-row gap-2">
-          <Button
-            type="button"
-            size="full"
-            onClick={onCancel}
-            className="bg-gs100 py-4 text-gs600 hover:bg-gs100"
-          >
-            취소
-          </Button>
-          <Button
-            type="submit"
-            size="full"
-            className={`py-4 ${
-              titleValue
-                ? 'bg-blue-500 text-white'
-                : 'bg-gray-300 text-gray-600'
-            }`}
-            disabled={!titleValue}
-          >
-            추가
-          </Button>
+            <div className="mt-4 flex w-full flex-row gap-2">
+              <Button
+                type="button"
+                size="full"
+                onClick={onCancel}
+                className="bg-gs100 py-4 text-gs600 hover:bg-gs100"
+              >
+                취소
+              </Button>
+              <Button
+                type="submit"
+                size="full"
+                className={`py-4 ${
+                  titleValue ? 'bg-slate500 text-gs00' : 'bg-gs300 text-gs600'
+                }`}
+                disabled={!titleValue}
+              >
+                추가
+              </Button>
+            </div>
+          </div>
         </div>
       </form>
     </div>
diff --git a/src/components/goalDetail/GoalBasket.tsx b/src/components/goalDetail/GoalBasket.tsx
index 8a3fe225..a683d051 100644
--- a/src/components/goalDetail/GoalBasket.tsx
+++ b/src/components/goalDetail/GoalBasket.tsx
@@ -10,10 +10,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { Basket } from '@/types/todos';
 import BasketTodoModal from './BasketTodoModal';
 import { useGoalAddTodo } from '@/hooks/useGoalsTodo';
-import {
-  useDeleteBasketTodo,
-  useDeleteAllBasket,
-} from '@/hooks/useGoalBasketTodo';
+import { useDeleteBasketTodo } from '@/hooks/useGoalBasketTodo';
 import ConfirmModal from '@/components/common/ConfirmModal';
 import IconButton from '../common/button/IconButton';
 
@@ -33,11 +30,12 @@ export default function GoalBasket({ basketItems, goalId, color }: Props) {
     null,
   );
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-  const [isConfirmDeleteAllOpen, setIsConfirmDeleteAllOpen] = useState(false);
+  const [openDatePickerItemId, setOpenDatePickerItemId] = useState<
+    number | null
+  >(null);
 
   const addTodoMutation = useGoalAddTodo();
   const deleteTodoMutation = useDeleteBasketTodo();
-  const deleteAllMutation = useDeleteAllBasket();
 
   const handleDateSelect = (date: Date | null, item: Basket) => {
     if (!date) return;
@@ -67,14 +65,17 @@ export default function GoalBasket({ basketItems, goalId, color }: Props) {
     }
   };
 
-  const handleDeleteAllBasket = () => {
-    deleteAllMutation.mutate(Number(goalId));
-    setIsConfirmDeleteAllOpen(false);
+  const handleCalendarOpen = (itemId: number) => {
+    setOpenDatePickerItemId(itemId);
+  };
+
+  const handleCalendarClose = () => {
+    setOpenDatePickerItemId(null);
   };
 
   return (
-    <div className="relative flex h-[285px] flex-col rounded-2xl shadow">
-      <div className="relative mb-4 flex items-center rounded-t-2xl border-b bg-gs00 p-4">
+    <div className="relative flex h-[285px] flex-col rounded-xl shadow">
+      <div className="relative mb-4 flex items-center rounded-t-xl border-b bg-gs00 p-4">
         <div className="relative flex items-center gap-2">
           <h3 className="text-18SB">할일 장바구니</h3>
           <div
@@ -87,7 +88,7 @@ export default function GoalBasket({ basketItems, goalId, color }: Props) {
               className="relative size-5 text-gs500"
             />
             <div
-              className={`absolute top-full -ml-12 mt-2 min-w-[205px] rounded-md bg-gs00 p-2 text-14M text-gsBk shadow transition-opacity duration-200 ${
+              className={`absolute top-full z-[9999] -ml-16 mt-2 min-w-[205px] rounded-md bg-gs00 p-2 text-14M text-gsBk shadow transition-opacity duration-200 ${
                 isTooltipOpen ? 'opacity-100' : 'pointer-events-none opacity-0'
               }`}
             >
@@ -96,15 +97,6 @@ export default function GoalBasket({ basketItems, goalId, color }: Props) {
             </div>
           </div>
         </div>
-        {basketItems.length > 0 && (
-          <button
-            type="button"
-            className="ml-auto cursor-pointer border-none bg-transparent text-gs500"
-            onClick={() => setIsConfirmDeleteAllOpen(true)}
-          >
-            모두 지우기
-          </button>
-        )}
       </div>
       <div className="flex-1 overflow-y-auto px-6 pb-16">
         <ul className="list-none space-y-2">
@@ -113,28 +105,44 @@ export default function GoalBasket({ basketItems, goalId, color }: Props) {
               <li
                 key={item.id}
                 className={`flex items-center justify-between border-b border-dashed border-gs300 pb-2 text-gs700 transition-colors ${
-                  hoveredItem === item.id ? 'text-slate500' : 'text-gs700'
+                  hoveredItem === item.id || openDatePickerItemId === item.id
+                    ? 'text-slate500'
+                    : 'text-gs700'
                 }`}
                 onMouseEnter={() => setHoveredItem(item.id)}
                 onMouseLeave={() => setHoveredItem(null)}
               >
-                <span>{item.title}</span>
+                <span className="truncate break-words">{item.title}</span>
+
                 <div className="flex items-center space-x-3">
                   <div className="relative flex items-center">
                     <DatePicker
                       dateFormat="yyyy-MM-dd"
-                      selected={null}
+                      selected={new Date()}
                       portalId="root-portal"
+                      popperPlacement="top-start"
                       onChange={(date: Date | null) =>
                         handleDateSelect(date, item)
                       }
+                      onCalendarOpen={() => handleCalendarOpen(item.id)}
+                      onCalendarClose={handleCalendarClose}
+                      popperClassName="z-[9999]"
+                      dayClassName={(d) => {
+                        const today = new Date();
+                        const isToday =
+                          d.toDateString() === today.toDateString();
+                        return isToday
+                          ? 'selected-day react-datepicker__day--today'
+                          : '';
+                      }}
                       customInput={
                         <button
                           type="button"
                           className={`flex size-7 items-center justify-center rounded-full bg-gs00 p-1 shadow-md transition-opacity duration-200 ${
-                            hoveredItem === item.id
+                            hoveredItem === item.id ||
+                            openDatePickerItemId === item.id
                               ? 'opacity-100'
-                              : 'opacity-0'
+                              : 'opacity-100 md:opacity-0'
                           }`}
                         >
                           <FontAwesomeIcon
@@ -148,7 +156,10 @@ export default function GoalBasket({ basketItems, goalId, color }: Props) {
                   <button
                     type="button"
                     className={`flex size-7 items-center justify-center rounded-full bg-gs00 p-1 shadow-md transition-opacity duration-200 ${
-                      hoveredItem === item.id ? 'opacity-100' : 'opacity-0'
+                      hoveredItem === item.id ||
+                      openDatePickerItemId === item.id
+                        ? 'opacity-100'
+                        : 'opacity-100 md:opacity-0'
                     }`}
                     onClick={() => setSelectedDeleteTodo(item.id)}
                   >
@@ -193,16 +204,6 @@ export default function GoalBasket({ basketItems, goalId, color }: Props) {
           onConfirm={handleConfirmDelete}
         />
       )}
-
-      {isConfirmDeleteAllOpen && (
-        <ConfirmModal
-          title="정말 모든 할일을 삭제하시겠어요?"
-          description="모든 할일이 삭제되며 복구할 수 없습니다."
-          confirmText="모두 삭제"
-          onCancel={() => setIsConfirmDeleteAllOpen(false)}
-          onConfirm={handleDeleteAllBasket}
-        />
-      )}
     </div>
   );
 }
diff --git a/src/components/goalDetail/GoalDoneList.tsx b/src/components/goalDetail/GoalDoneList.tsx
index beb5ab7f..efaf84e9 100644
--- a/src/components/goalDetail/GoalDoneList.tsx
+++ b/src/components/goalDetail/GoalDoneList.tsx
@@ -51,8 +51,8 @@ export default function GoalDoneList({ list, onToggle, goalId }: Props) {
   };
 
   return (
-    <div className="relative flex h-[310px] flex-col rounded-2xl bg-gs00 shadow">
-      <div className="sticky top-0 z-10 flex-none rounded-2xl bg-gs50 p-4">
+    <div className="relative flex h-[310px] flex-col rounded-xl bg-gs00 shadow">
+      <div className="sticky top-0 z-10 flex-none rounded-xl bg-gs50 p-4">
         <h3 className="text-18SB">완료된 할일</h3>
       </div>
       <div className="flex-1 overflow-y-auto px-6">
@@ -96,7 +96,9 @@ export default function GoalDoneList({ list, onToggle, goalId }: Props) {
         <GoalTodoModal
           onClose={() => setIsModalOpen(false)}
           goalId={goalId}
-          todoId={editingTodo ? editingTodo.todoId : undefined}
+          todoId={editingTodo?.todoId ?? null}
+          title={editingTodo?.title ?? ''}
+          date={editingTodo?.date ?? ''}
         />
       )}
     </div>
diff --git a/src/components/goalDetail/GoalHeader.tsx b/src/components/goalDetail/GoalHeader.tsx
index 45cb67c1..ddc2cd43 100644
--- a/src/components/goalDetail/GoalHeader.tsx
+++ b/src/components/goalDetail/GoalHeader.tsx
@@ -75,6 +75,15 @@ export default function GoalHeader({ id, setGoalAvailable }: Props) {
   };
 
   const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const trimmedTitle = newTitle.trim();
+    const isTitleChanged = trimmedTitle && trimmedTitle !== goalItem?.title;
+    const isColorChanged = selectedColor !== goalItem?.color;
+
+    if (!isTitleChanged && !isColorChanged) {
+      setIsEditing(false);
+      return;
+    }
+
     if (!e.relatedTarget || !e.relatedTarget.closest('.save-button')) {
       handleSave();
     }
@@ -135,9 +144,9 @@ export default function GoalHeader({ id, setGoalAvailable }: Props) {
   }, [goalItem?.color]);
 
   return (
-    <div className="flex h-[160px] flex-col gap-3 p-6 md:px-6 md:py-5">
-      <div className="flex min-h-[56px] items-start justify-between">
-        <h1 className="flex max-w-full items-center text-16M md:max-w-2xl md:text-20M">
+    <div className="flex h-[160px] flex-col gap-4 p-3 md:px-6 md:py-3 lg:p-6">
+      <div className="flex h-[56px] items-start justify-between md:mb-4 lg:mb-6">
+        <h1 className="flex w-full items-center text-20M md:max-w-2xl">
           <FontAwesomeIcon
             icon={faFontAwesome}
             className="mr-2"
@@ -151,11 +160,11 @@ export default function GoalHeader({ id, setGoalAvailable }: Props) {
                 onBlur={handleBlur}
                 onChange={(e) => setNewTitle(e.target.value)}
                 onKeyDown={handleKeyDown}
-                className="w-full border-b border-gs500"
+                className="w-full border-none bg-transparent outline-none"
               />
             </div>
           ) : (
-            <span className="max-h-[48px] w-full overflow-y-auto whitespace-pre-wrap break-words">
+            <span className="max-h-[40px] w-full overflow-y-auto whitespace-pre-wrap break-words">
               {goalTitle}
             </span>
           )}
@@ -173,21 +182,18 @@ export default function GoalHeader({ id, setGoalAvailable }: Props) {
           </button>
         )}
       </div>
-
-      <div className="flex-1" />
-
-      <div className="mb-[20px] mt-auto flex flex-row items-center justify-between gap-3">
+      <div className="mb-[20px] mt-auto flex max-h-[55px] flex-row items-center justify-between gap-3">
         {isEditing ? (
           <div className="flex flex-wrap items-center gap-2">
-            <span className="text-12M text-gs600 md:text-14M">
-              목표 색상 수정
-            </span>
+            <span className="text-14M text-gs600">목표 색상 수정</span>
             <div className="flex flex-wrap gap-1">
               {colorKeys.map((key) => (
                 <div
                   key={key}
-                  className={`flex size-9 items-center justify-center rounded-lg p-1 ${
-                    selectedColor === key ? 'border-2 border-slate400' : ''
+                  className={`flex size-9 items-center justify-center rounded-lg p-1 transition-all duration-300 ${
+                    selectedColor === key
+                      ? 'border-2 border-slate400'
+                      : 'border-transparent'
                   }`}
                 >
                   <button
@@ -195,7 +201,7 @@ export default function GoalHeader({ id, setGoalAvailable }: Props) {
                     onMouseDown={(e) => e.preventDefault()}
                     onClick={() => handleColorSelect(key)}
                     aria-label={`색상 변경: ${key}`}
-                    className="size-6 rounded-full border border-transparent"
+                    className="size-6 rounded-full border border-transparent transition-transform duration-200 ease-in-out hover:scale-110 active:scale-90"
                     style={{ backgroundColor: goalColors[key].DEFAULT }}
                   />
                 </div>
diff --git a/src/components/goalDetail/GoalTodoCreateModal.tsx b/src/components/goalDetail/GoalTodoCreateModal.tsx
index 60ee2687..95c4ffd5 100644
--- a/src/components/goalDetail/GoalTodoCreateModal.tsx
+++ b/src/components/goalDetail/GoalTodoCreateModal.tsx
@@ -1,13 +1,15 @@
 import { z } from 'zod';
 import { useForm, Controller } from 'react-hook-form';
+import { useState, useCallback, useEffect } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useCallback } from 'react';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import TextInput from '@/components/common/input/TextInput';
 import DateInput from '../common/input/DateInput';
 import Button from '../common/button/Button';
 import { useGoals } from '@/hooks/useGoals';
 import { Goal } from '@/types/goals';
 import { useGoalAddTodo, useUpdateGoalTodo } from '@/hooks/useGoalsTodo';
+import IconButton from '@/components/common/button/IconButton';
 
 const createTodoSchema = z.object({
   title: z
@@ -23,6 +25,8 @@ type TodoFormValues = z.infer<typeof createTodoSchema>;
 interface Props {
   goalId: string;
   todoId?: number | null;
+  title?: string;
+  date?: string;
   onClose: () => void;
   onCancel: () => void;
   isVisible?: boolean;
@@ -31,6 +35,8 @@ interface Props {
 export default function GoalTodoCreateModal({
   goalId,
   todoId,
+  title,
+  date,
   onClose,
   onCancel,
   isVisible = true,
@@ -38,7 +44,9 @@ export default function GoalTodoCreateModal({
   const { data: goals } = useGoals();
   const { mutate: addTodoMutation } = useGoalAddTodo();
   const { mutate: updateTodoMutation } = useUpdateGoalTodo();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // 선택된 목표 가져오기
   const goalTitle = goals?.find(
     (goal: Goal) => goal.goalId === Number(goalId),
   )?.title;
@@ -48,21 +56,30 @@ export default function GoalTodoCreateModal({
     handleSubmit,
     formState: { errors },
     watch,
+    setValue,
   } = useForm<TodoFormValues>({
     mode: 'onChange',
     resolver: zodResolver(createTodoSchema),
     defaultValues: {
-      title: '',
-      date: new Date(),
+      title: title || '',
+      date: date ? new Date(date) : new Date(),
     },
   });
 
+  useEffect(() => {
+    if (title) setValue('title', title);
+    if (date) setValue('date', new Date(date));
+  }, [title, date, setValue]);
+
   const titleValue = watch('title');
 
   const onSubmit = useCallback(
     (data: TodoFormValues) => {
       const formattedDate = data.date ?? new Date();
 
+      if (isSubmitting) return;
+      setIsSubmitting(true);
+
       if (todoId) {
         updateTodoMutation(
           {
@@ -92,59 +109,81 @@ export default function GoalTodoCreateModal({
         );
       }
     },
-    [addTodoMutation, updateTodoMutation, goalId, todoId, onClose],
+    [
+      addTodoMutation,
+      updateTodoMutation,
+      goalId,
+      todoId,
+      onClose,
+      isSubmitting,
+    ],
   );
 
   if (!isVisible) return null;
 
   return (
-    <div className="w-[520px] flex-col gap-6 rounded-lg bg-white p-6 shadow-lg">
-      <h2 className="mb-4 text-lg font-bold">
-        {todoId ? '할 일 수정' : '할 일 생성'}
-      </h2>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Controller
-          name="title"
-          control={control}
-          render={({ field }) => (
-            <TextInput
-              value={field.value}
-              onChange={field.onChange}
-              name={field.name}
-              label="할 일 제목"
+    <div className="flex size-full flex-col gap-6 bg-gs00 p-6 md:h-auto md:w-[520px] md:rounded-lg">
+      <div className="flex justify-between">
+        <h2 className="mb-4 text-lg font-bold">
+          {todoId ? '할 일 수정' : '할 일 생성'}
+        </h2>
+        <IconButton icon={faXmark} className="md:hidden" onClick={onCancel} />
+      </div>
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+        <div className="flex flex-col gap-10">
+          <div className="flex flex-col gap-6">
+            {/* 할 일 제목 입력 */}
+            <Controller
+              name="title"
               control={control}
-              errors={errors}
-              placeholder="할 일을 입력하세요."
+              render={({ field }) => (
+                <TextInput
+                  value={field.value}
+                  onChange={field.onChange}
+                  name={field.name}
+                  label="할 일 제목"
+                  control={control}
+                  errors={errors}
+                  placeholder="할 일을 입력하세요."
+                />
+              )}
             />
-          )}
-        />
-        <p className="mt-4 text-16SB text-gsBk">목표</p>
-        <input
-          type="text"
-          value={goalTitle}
-          readOnly
-          className="mb-3 w-full cursor-not-allowed rounded-lg bg-gs100 p-2 px-4 py-3 text-16R text-gs600"
-        />
-        <div className="relative mt-3">
-          <DateInput name="date" control={control} label="날짜" />
-        </div>
-        <div className="mt-4 flex w-full flex-row gap-2">
-          <Button
-            type="button"
-            size="full"
-            onClick={onCancel}
-            className="bg-gs100 py-4 text-gs600 hover:bg-gs100"
-          >
-            취소
-          </Button>
-          <Button
-            type="submit"
-            size="full"
-            className={`py-4 ${titleValue ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-600'}`}
-            disabled={!titleValue}
-          >
-            {todoId ? '수정' : '추가'}
-          </Button>
+            {/* 날짜 선택 */}
+            <div className="relative mt-3">
+              <DateInput name="date" control={control} label="날짜" />
+            </div>
+
+            {/* 목표 제목 (읽기 전용) */}
+            <p className="mt-4 text-16SB text-gsBk">목표</p>
+            <input
+              type="text"
+              value={goalTitle}
+              readOnly
+              className="mb-3 w-full cursor-not-allowed rounded-lg bg-gs100 p-2 px-4 py-3 text-16R text-gs600"
+            />
+
+            {/* 버튼 영역 */}
+            <div className="mt-4 flex w-full flex-row gap-2">
+              <Button
+                type="button"
+                size="full"
+                onClick={onCancel}
+                className="bg-gs100 py-4 text-gs600 hover:bg-gs100"
+              >
+                취소
+              </Button>
+              <Button
+                type="submit"
+                size="full"
+                className={`py-4 ${
+                  titleValue ? 'bg-slate500 text-gs00' : 'bg-gs300 text-gs600'
+                }`}
+                disabled={!titleValue}
+              >
+                {todoId ? '수정' : '추가'}
+              </Button>
+            </div>
+          </div>
         </div>
       </form>
     </div>
diff --git a/src/components/goalDetail/GoalTodoList.tsx b/src/components/goalDetail/GoalTodoList.tsx
index 9ea1e19d..e5df29b6 100644
--- a/src/components/goalDetail/GoalTodoList.tsx
+++ b/src/components/goalDetail/GoalTodoList.tsx
@@ -108,8 +108,8 @@ export default function GoalTodoList({ list, onToggle, goalId, color }: Props) {
   };
 
   return (
-    <div className="relative flex h-[605px] flex-col rounded-2xl shadow">
-      <div className="sticky top-0 z-10 flex items-center gap-2 rounded-t-2xl bg-gs50 p-4">
+    <div className="relative flex h-[605px] max-w-full flex-col rounded-xl shadow">
+      <div className="sticky top-0 z-10 flex items-center gap-2 rounded-t-xl bg-gs50 p-4">
         <h3 className="text-18SB">남은 할일</h3>
         <h3 className="text-18SB" style={{ color: color.DEFAULT }}>
           {list.length}
@@ -257,7 +257,9 @@ export default function GoalTodoList({ list, onToggle, goalId, color }: Props) {
         <GoalTodoModal
           onClose={handleCloseModal}
           goalId={goalId}
-          todoId={editingTodo ? editingTodo.todoId : null}
+          todoId={editingTodo?.todoId ?? null}
+          title={editingTodo?.title ?? ''}
+          date={editingTodo?.date ?? ''}
         />
       )}
     </div>
diff --git a/src/components/goalDetail/GoalTodoModal.tsx b/src/components/goalDetail/GoalTodoModal.tsx
index b4db1756..fcf77a93 100644
--- a/src/components/goalDetail/GoalTodoModal.tsx
+++ b/src/components/goalDetail/GoalTodoModal.tsx
@@ -8,10 +8,18 @@ import ConfirmModal from '@/components/common/ConfirmModal';
 interface Props {
   goalId: string;
   todoId?: number | null;
+  title?: string;
+  date?: string;
   onClose: () => void;
 }
 
-export default function GoalTodoModal({ goalId, todoId, onClose }: Props) {
+export default function GoalTodoModal({
+  goalId,
+  todoId,
+  onClose,
+  title,
+  date,
+}: Props) {
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   const [isCreateOpen, setIsCreateOpen] = useState(true);
 
@@ -31,6 +39,8 @@ export default function GoalTodoModal({ goalId, todoId, onClose }: Props) {
         <GoalTodoCreateModal
           goalId={goalId}
           todoId={todoId}
+          title={title}
+          date={date}
           onClose={handleFinalClose}
           onCancel={handleCancelCreate}
           isVisible={!isConfirmOpen}
diff --git a/src/hooks/useGoalBasketTodo.ts b/src/hooks/useGoalBasketTodo.ts
index c582402b..00201e83 100644
--- a/src/hooks/useGoalBasketTodo.ts
+++ b/src/hooks/useGoalBasketTodo.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { BasketFormValues } from '@/components/goalDetail/BasketCreateTodo';
-import { addBasket, deleteBasket, deleteAllBasket } from '@/services/basket';
+import { addBasket, deleteBasket } from '@/services/basket';
 import { QUERY_KEY } from '@/constants/queryKey';
 
 export const useAddBasketTodo = () => {
@@ -36,16 +36,3 @@ export const useDeleteBasketTodo = () => {
     },
   });
 };
-
-export const useDeleteAllBasket = () => {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (goalId: number) => deleteAllBasket(goalId),
-    onSuccess: (_, goalId) => {
-      queryClient.invalidateQueries({
-        queryKey: [QUERY_KEY.GOAL_TODOS, goalId],
-      });
-    },
-  });
-};
diff --git a/src/presets/goalColors.ts b/src/presets/goalColors.ts
index d8ce9d7c..5d8e93db 100644
--- a/src/presets/goalColors.ts
+++ b/src/presets/goalColors.ts
@@ -1,11 +1,14 @@
+import colors from '@/presets/colors';
+
 const goalColors: Record<
-  `goal0${1 | 2 | 3 | 4 | 5}`,
+  `goal0${1 | 2 | 3 | 4 | 5}` | 'default',
   { 100: string; DEFAULT: string }
 > = {
+  default: { 100: colors.slate100, DEFAULT: colors.slate500 },
   goal01: { 100: '#FFEEE0', DEFAULT: '#FB923C' },
   goal02: { 100: '#FFF9E1', DEFAULT: '#FACC15' },
-  goal03: { 100: '#E0FFFB', DEFAULT: '#2DD4BF' },
-  goal04: { 100: '#F1EBFF', DEFAULT: '#8B5CF6' },
+  goal03: { 100: '#EFFFFC', DEFAULT: '#1EEABE' },
+  goal04: { 100: '#FCF3FE', DEFAULT: '#C95AEE' },
   goal05: { 100: '#FFECEC', DEFAULT: '#F87171' },
 };
 
diff --git a/src/services/basket.ts b/src/services/basket.ts
index 73063488..0feabeb8 100644
--- a/src/services/basket.ts
+++ b/src/services/basket.ts
@@ -22,16 +22,6 @@ export const addBasket = async (formData: BasketFormValues) => {
   }
 };
 
-/**
- * 장바구니  모두 삭제
- */
-export const deleteAllBasket = async (goalId: number) => {
-  const res = await fetch(`/api/basket?goalId=${goalId}`, {
-    method: 'DELETE',
-  });
-  if (!res.ok) throw new Error(getErrorMessage(res.status));
-};
-
 /**
  * 장바구니 삭제
  * @param basketTodoId 장바구니 할일 id


Reviews:
user: login: kxmmxnzx
body: ![image](https://github.com/user-attachments/assets/42a33d1c-4ac6-4585-86ed-04dc59dd9369)


- 모바일에서 지난 할 일 있을 때 가로길이가 이상합니다 ㅠ

state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T08:21:58Z
user: login: kxmmxnzx
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T08:27:14Z
user: login: kxmmxnzx
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-14T08:28:57Z
user: login: jeongeunhq
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-14T08:30:36Z
user: login: kxmmxnzx
body: 수정 잘 반영된 것 같습니다 :)
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-17T01:09:48Z
user: login: chocorogit
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-17T01:15:56Z

Review comments:
diff_hunk: @@ -1,11 +1,14 @@
 'use client';
 
+import { config } from '@fortawesome/fontawesome-svg-core';
+import '@fortawesome/fontawesome-svg-core/styles.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { useNoteList } from '@/hooks/useNotes';
 import NoteHeader from '@/components/note/NoteHeader';
 import NoteList from '@/components/note/NoteList';
 
+config.autoAddCss = false;
path: src/app/(member)/goals/[id]/note/page.tsx
user: login: kxmmxnzx
body: 궁금해서 그러는데 이게 뭔가용?!?
created_at: 2025-03-14T08:21:31Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,11 +1,14 @@
 'use client';
 
+import { config } from '@fortawesome/fontawesome-svg-core';
+import '@fortawesome/fontawesome-svg-core/styles.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { useNoteList } from '@/hooks/useNotes';
 import NoteHeader from '@/components/note/NoteHeader';
 import NoteList from '@/components/note/NoteList';
 
+config.autoAddCss = false;
path: src/app/(member)/goals/[id]/note/page.tsx
user: login: kxmmxnzx
body: ![image](https://github.com/user-attachments/assets/3528a37b-8739-42b0-8fc4-a789f7ad26ee)


장바구니 제목이 길면 ... 이 되는 게 나을 것같습니다.
제가 직접 만든 text-overflow스타일도 한번 적용해보셔도 좋을 것 같습니다. (그러나 text-overflow는 색상이랑 겹칠 때가 있어서 제대로 적용이 안될 수 있으니, 그러면 text-overflow스타일에 잇는 요소들을 직접 적용하시면 됩니당!!)

그리고 모바일에서는 호버안해도 달력과 쓰레기통이 뜨면 좋을 것 같아요
created_at: 2025-03-14T08:27:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,11 +1,14 @@
 'use client';
 
+import { config } from '@fortawesome/fontawesome-svg-core';
+import '@fortawesome/fontawesome-svg-core/styles.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { useNoteList } from '@/hooks/useNotes';
 import NoteHeader from '@/components/note/NoteHeader';
 import NoteList from '@/components/note/NoteList';
 
+config.autoAddCss = false;
path: src/app/(member)/goals/[id]/note/page.tsx
user: login: kxmmxnzx
body: ![image](https://github.com/user-attachments/assets/469e46eb-8ccd-49bc-96ef-d1002b03722f)

- 모바일일때 헤더부분 패딩 수정해야할 것 같습니다!!
created_at: 2025-03-14T08:28:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,11 +1,14 @@
 'use client';
 
+import { config } from '@fortawesome/fontawesome-svg-core';
+import '@fortawesome/fontawesome-svg-core/styles.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { useNoteList } from '@/hooks/useNotes';
 import NoteHeader from '@/components/note/NoteHeader';
 import NoteList from '@/components/note/NoteList';
 
+config.autoAddCss = false;
path: src/app/(member)/goals/[id]/note/page.tsx
user: login: jeongeunhq
body: 아 이거 그 로딩화면 폰트어썸 아이콘 썼을 때 갑자기 커지는 오류 현상이 있어서 이걸 추가해줬습니당...!
created_at: 2025-03-14T08:30:36Z
author_association: COLLABORATOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-03-13T08:19:26Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough
이 PR은 여러 컴포넌트와 모듈에서 다양한 수정을 포함합니다.  
- Font Awesome 관련 설정이 추가되어 자동 CSS 삽입이 비활성화되었습니다.  
- 일부 페이지와 컴포넌트에서 `rounded-2xl` CSS 클래스가 `rounded-xl`로 수정되어 스타일 통일성을 개선했습니다.  
- Basket 및 Goal 관련 컴포넌트에서는 제출 상태 관리(state)와 프리필드 값(`title`, `date`)이 도입되었으며, 불필요한 '전체 삭제' 기능이 제거되고 날짜 선택자 관련 상태 관리가 추가되었습니다.  
- GoalHeader의 블러 이벤트 처리 로직이 개선되어 변경사항이 없으면 편집 모드에서 미리 나옵니다.

## Changes

| File(s) | Change Summary |
|---------|----------------|
| `src/app/(member)/goals/[id]/note/page.tsx` | Font Awesome 설정을 위해 `config` import 및 CSS 추가, `autoAddCss = false` 설정 추가 |
| `src/app/(member)/goals/[id]/page.tsx`, `src/components/goalDetail/GoalDoneList.tsx` | CSS 클래스 `rounded-2xl`를 `rounded-xl`로 변경하여 모서리 스타일 수정 |
| `src/components/goalDetail/GoalTodoList.tsx`, `src/components/goalDetail/GoalTodoModal.tsx` | Todo 모달에 `title` 및 `date` 속성 추가와 기본값 처리 업데이트 |
| `src/components/goalDetail/BasketCreateTodo.tsx` | `isSubmitting` 상태 변수 도입, IconButton 추가, 레이아웃 개선으로 다중 제출 방지 |
| `src/components/goalDetail/GoalBasket.tsx`, `src/hooks/useGoalBasketTodo.ts`, `src/services/basket.ts` | 전체 삭제(delete-all) 관련 hook, 서비스, UI 삭제 및 대신 날짜 선택자 상태(`openDatePickerItemId`)와 캘린더 open/close 함수 추가 |
| `src/components/goalDetail/GoalHeader.tsx` | `handleBlur` 함수 수정: 제목 및 색상 변경 여부 확인 후 변경사항 없으면 편집 모드 종료 |
| `src/components/goalDetail/GoalTodoCreateModal.tsx` | 새로운 props `title`, `date` 도입, useEffect로 폼 기본값 업데이트 및 제출 상태 관리(`isSubmitting`) 추가 |
| `src/presets/goalColors.ts` | `default` 색상 항목 추가와 타입 정의 업데이트 |

## Possibly related PRs
- ICan-5/ICan-Frontend#20: Font Awesome 아이콘을 가져오고 CSS 설정을 구성하는 변경 사항이 포함되어 있으며, 같은 파일에서 `Page` 컴포넌트의 구조를 수정하는 PR과 직접적인 코드 수준 관계가 있습니다.
- ICan-5/ICan-Frontend#15: Font Awesome 아이콘을 사용하고 CSS 설정을 구성하는 변경 사항이 포함되어 있어, 새로운 `NoteHeader` 컴포넌트와 관련이 있습니다.
- ICan-5/ICan-Frontend#47: `page.tsx` 파일에서 Font Awesome 아이콘의 임포트와 관련된 수정 사항이 포함되어 있으며, 같은 파일의 기능 리팩토링과 관련이 있습니다.

## Suggested labels
`✨ Feature`

## Suggested reviewers
- kxmmxnzx
- chocorogit

## Poem
> 풀밭을 누비며 나는 토끼,  
> 코드 숲 속 새롭게 춤추네.  
> 둥근 모서리처럼 부드러운 변화,  
> 제출 방지의 지혜로 멈춤 없이 달려요.  
> 당근 한 입의 기쁨 속, 모두에게 환영을! 🐰🥕

<!-- walkthrough_end -->

<!-- announcements_start -->

> [!TIP]
> <details>
> <summary>⚡🧪 Multi-step agentic review comment chat (experimental)</summary>
> 
> - We're introducing multi-step agentic chat in review comments. This experimental feature enhances review discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments.
> 						- To enable this feature, set early_access to true under in the settings.
> 
> </details>

<!-- announcements_end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between d19d1a9fde628685fbfb4f2612553c2724b28471 and 6d921ae78fa7aec57da6e4ed033ad28721a35e26.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/components/goalDetail/GoalBasket.tsx` (6 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* src/components/goalDetail/GoalBasket.tsx

</details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=ICan-5/ICan-Frontend&utm_content=67):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: chocorogit
created_at: 2025-03-13T09:26:13Z
body: 완료된 할일에서는 할일 수정하기할 때, 인풋창에 값이 안보이는 것 같습니다!!
author_association: COLLABORATOR
user: login: jeongeunhq
created_at: 2025-03-13T09:28:30Z
body: > 완료된 할일에서는 할일 수정하기할 때, 인풋창에 값이 안보이는 것 같습니다!!

아이코 수정하겟습니당
author_association: COLLABORATOR