style: description 및 subtask 스타일 수정

boostcampwm-2024 · Nov 26, 2024 · bba9050 · bba9050
1 parent f454de9
commit bba9050
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/apps/client/src/features/task/components/TaskDescription.tsx b/apps/client/src/features/task/components/TaskDescription.tsx
@@ -13,7 +13,7 @@ export function TaskDescription({ initialDescription = '' }: TaskDescriptionProp
     from: '/_auth/$project/board/$taskId',
   });
   const [isEdit, setIsEdit] = useState(false);
-  const [description, setDescription] = useState(initialDescription);
+  const [description, setDescription] = useState<string>(initialDescription);
   const prevDescriptionRef = useRef(description);
 
   const { updateDescription } = useTaskMutations(taskId);
@@ -32,15 +32,15 @@ export function TaskDescription({ initialDescription = '' }: TaskDescriptionProp
   };
 
   return (
-    <div>
-      <h3 className="mb-2 text-lg font-medium">Description</h3>
+    <div className="max-h-[calc(50vh-58px)]">
+      <h3 className="text-lg font-medium">Description</h3>
       {isEdit ? (
-        <div className="space-y-2">
+        <div className="max-h-[calc(50vh-86px)] space-y-2">
           <Textarea
             value={description}
             placeholder="Description should be here..."
             onChange={(e) => setDescription(e.target.value)}
-            className="min-h-[100px]"
+            className="max-h-[calc(50vh-126px)] min-h-32 w-full overflow-y-auto"
             autoFocus
           />
           <div className="flex justify-end gap-2">
@@ -53,12 +53,12 @@ export function TaskDescription({ initialDescription = '' }: TaskDescriptionProp
           </div>
         </div>
       ) : (
-        <p
-          className="cursor-pointer rounded p-2 text-gray-700 hover:bg-gray-50"
+        <div
+          className="max-h-[calc(50vh-86px)] max-w-full cursor-pointer overflow-y-auto whitespace-pre-wrap break-words rounded p-2 text-gray-700 hover:bg-gray-50"
           onDoubleClick={handleDoubleClick}
         >
           {description.length === 0 ? 'Double click to edit' : description}
-        </p>
+        </div>
       )}
     </div>
   );

diff --git a/apps/client/src/features/task/subtask/components/Subtasks.tsx b/apps/client/src/features/task/subtask/components/Subtasks.tsx
@@ -78,9 +78,9 @@ export function Subtasks({ initialSubtasks = [] }: SubtasksProps) {
   }, [subtasks.length]);
 
   return (
-    <div>
+    <div className="max-h-[calc(50vh-58px)]">
       <h3 className="mb-2 text-lg font-medium">Subtasks</h3>
-      <div className="max-h-96 space-y-0.5 overflow-y-auto" ref={subtasksRef}>
+      <div className="max-h-[calc(50vh-166px)] space-y-0.5 overflow-y-auto" ref={subtasksRef}>
         {subtasks.map((subtask) => (
           <SubtaskItem
             key={subtask.id}