Merge pull request #125 from CoPlay-FE/feature/dashboard_id

🐛 fix: 반응형 수정, 댓글UI에 줄바꿈 반영, 카드수정모달-이미지 변경 시 shouldDirty

Author: dkslel1225

src/app/dashboard/[id]/page.tsx

@@ -147,17 +147,19 @@ export default function DashboardID() {
     <>
       <div className="h-screen select-none">
         <div
-          className="flex min-h-screen mobile:flex-col tablet:flex-col"
+          className="BG-gray flex min-h-screen mobile:flex-col tablet:flex-col"
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
           onTouchEnd={handleTouchEnd}
         >
           {columns?.map((column) => (
             <Column key={column.id} column={column} dashboardId={dashboardId} />
           ))}{' '}
-          <div className="BG-gray Border-column p-20 mobile:h-full mobile:w-308 mobile:border-t-2 tablet:h-full tablet:w-584 tablet:border-t-2">
+          {/* <div className="BG-gray Border-column p-20 mobile:h-full mobile:w-308 mobile:border-t-2 tablet:h-full tablet:w-584 tablet:border-t-2"> */}
+          <div className="BG-gray Border-column p-20 pt-84 mobile:size-full mobile:border-t-2 mobile:pt-20 tablet:size-full tablet:border-t-2 tablet:pt-20">
             <button
-              className="BG-white Border-btn m flex justify-center gap-12 whitespace-nowrap rounded-8 px-85 pb-20 pt-24 text-18 font-bold mobile:flex mobile:w-full mobile:justify-center mobile:px-50 mobile:py-20 mobile:text-16 tablet:flex tablet:w-full tablet:items-center"
+              // className="BG-white Border-btn m flex justify-center gap-12 whitespace-nowrap rounded-8 px-85 pb-20 pt-24 text-18 font-bold mobile:flex mobile:w-full mobile:justify-center mobile:px-50 mobile:py-20 mobile:text-16 tablet:flex tablet:w-full tablet:items-center"
+              className="BG-white Border-btn m flex justify-center gap-12 whitespace-nowrap rounded-8 px-85 pb-20 pt-24 text-18 font-bold mobile:flex mobile:size-full mobile:justify-center mobile:px-50 mobile:py-20 mobile:text-16 tablet:flex tablet:w-full tablet:items-center"
               onClick={handleCreateColumn}
             >
               <span>새로운 컬럼 추가하기</span>

src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx

@@ -76,9 +76,13 @@ export default function ModifyCardForm({
   })
 
   // React Hook Form 과 tags 값 연결
+  // 💥 트러블슈팅: 태그수정해도 isDirty가 잡히지 않아서, shouldDirty를 추가하여 해결(배열 주소는 그대로니까..)
   useEffect(() => {
     setValue('tags', tags, { shouldDirty: true })
   }, [tags, tags.length, setValue])
+  //   useEffect(() => {
+  //    {shouldDirty: true }
+  // }, [preview])
 
   // 상태(컬럼) 선택 시 / assignee 선택 시 드롭다운 닫기
   useEffect(() => {
@@ -99,7 +103,7 @@ export default function ModifyCardForm({
       { columnId, file },
       {
         onSuccess: ({ imageUrl }) => {
-          setValue('imageUrl', imageUrl)
+          setValue('imageUrl', imageUrl, { shouldDirty: true })
           setPreview(imageUrl)
         },
       },

src/app/features/dashboard_Id/Card/cardModal/Comment.tsx

@@ -44,7 +44,7 @@ export default function Comment({ comment }: { comment: CommentType }) {
             content={comment.content}
           />
         ) : (
-          <p className="text-14">{comment.content}</p>
+          <p className="whitespace-pre-line text-14">{comment.content}</p>
         )}
         {!modifyComment && (
           <div className="Text-gray-light active:Text-btn flex gap-14 text-12 font-normal underline underline-offset-2 mobile:gap-8 tablet:gap-12">

src/app/features/dashboard_Id/Column/Column.tsx

@@ -53,7 +53,7 @@ export default function Column({
 
   if (isLoading)
     return (
-      <div className="BG-gray Border-column w-354 shrink-0 p-20 pt-103 mobile:w-308 tablet:w-584">
+      <div className="BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20 pt-104 mobile:h-190 mobile:w-full tablet:h-190 tablet:w-full">
         <div className="BG-white size-full"></div>
       </div>
     ) // 스켈레톤 적용???⭐️
@@ -87,7 +87,9 @@ export default function Column({
       }}
       data-column-id={id}
       className={cn(
-        'BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20 mobile:w-308 tablet:w-584',
+        // 'BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20 mobile:w-308 tablet:w-584',
+        'BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20 mobile:w-full tablet:w-full',
+
         {
           'BG-drag-hovered': isDraggingover,
         },