Hotfix (#74)

* feat: suspense to * hotfx
depromeet · Aug 31, 2024 · 7ef3ef4 · 7ef3ef4
1 parent d355c35
commit 7ef3ef4
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 30 deletions.
diff --git a/src/app/(sidebar)/my-recruit/[id]/components/TagList.tsx b/src/app/(sidebar)/my-recruit/[id]/components/TagList.tsx
@@ -77,7 +77,7 @@ export default function TagList({ selectedTags, setSelectedTags, tagsData }: Tag
                       className="absolute top-full left-1/2 translate-x-[-50%] mt-[4px] w-max px-[10px] py-[4px] rounded-[6px] bg-[#70737C] pointer-events-none"
                       initial={{ opacity: 0 }}
                       variants={{ hover: { opacity: 1 } }}>
-                      <Text typography="body1" color="white">
+                      <Text typography="label1" color="white">
                         태그 필터 초기화
                       </Text>
                     </motion.div>
@@ -115,7 +115,7 @@ export default function TagList({ selectedTags, setSelectedTags, tagsData }: Tag
                 className="absolute top-full left-1/2 translate-x-[-50%] mt-[4px] w-max px-[10px] py-[4px] rounded-[6px] bg-[#70737C] pointer-events-none"
                 initial={{ opacity: 0 }}
                 variants={{ hover: { opacity: 1 } }}>
-                <Text typography="body1" color="white">
+                <Text typography="label1" color="white">
                   태그 필터 초기화
                 </Text>
               </motion.div>
@@ -165,7 +165,7 @@ export default function TagList({ selectedTags, setSelectedTags, tagsData }: Tag
               className="absolute top-full left-1/2 translate-x-[-50%] mt-[4px] w-max px-[10px] py-[4px] rounded-[6px] bg-[#70737C] pointer-events-none"
               initial={{ opacity: 0 }}
               variants={{ hover: { opacity: 1 } }}>
-              <Text typography="body1" color="white">
+              <Text typography="label1" color="white">
                 모든 태그 보기
               </Text>
             </motion.div>

diff --git a/src/app/(sidebar)/my-recruit/[id]/page.tsx b/src/app/(sidebar)/my-recruit/[id]/page.tsx
@@ -2,6 +2,7 @@
 
 import { InfoCard } from '@/components/InfoCard';
 import { TouchButton } from '@/components/TouchButton';
+import { AsyncBoundaryWithQuery } from '@/lib';
 import { DndContextWithOverlay } from '@/lib/dnd-kit/DndContextWithOverlay';
 import { Dropdown, Icon, Text } from '@/system/components';
 import { color } from '@/system/token/color';
@@ -44,10 +45,9 @@ export default function CompanyDetail({ params: { id: recruitId } }: { params: {
       <div className="flex overflow-hidden max-h-[100vh] h-[100vh] bg-white">
         <div className="flex-1 mx-auto max-w-[1700px]">
           <div className="flex justify-between w-full px-[80px] py-[24px] bg-white border-b-1 border-neutral-5">
-            <Suspense>
+            <AsyncBoundaryWithQuery>
               <DetailHeader recruitId={recruitId} />
-            </Suspense>
-
+            </AsyncBoundaryWithQuery>
 
             <div className={cn('flex items-center gap-[16px]')}>
               <Dropdown>
@@ -69,7 +69,9 @@ export default function CompanyDetail({ params: { id: recruitId } }: { params: {
                   </TouchButton>
                 </Dropdown.Trigger>
                 <Dropdown.Content align="end" className="gap-[8px]">
-                  <DueDateDialog id={Number(recruitId)} />
+                  <AsyncBoundaryWithQuery pendingFallback={<></>}>
+                    <DueDateDialog id={Number(recruitId)} />
+                  </AsyncBoundaryWithQuery>
                 </Dropdown.Content>
               </Dropdown>
 
@@ -84,7 +86,7 @@ export default function CompanyDetail({ params: { id: recruitId } }: { params: {
                   className="absolute top-full left-1/2 translate-x-[-50%] mt-[4px] w-max px-[10px] py-[4px] rounded-[6px] bg-[#70737C] pointer-events-none"
                   initial={{ opacity: 0 }}
                   variants={{ hover: { opacity: 1 } }}>
-                  <Text typography="body1" color="white">
+                  <Text typography="label1" color="white">
                     내 정보 가져오기
                   </Text>
                 </motion.div>

diff --git a/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx b/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx
@@ -1,14 +1,14 @@
-import { Spacing } from '@/system/utils/Spacing';
-import { Icon } from '@/system/components';
-import { color } from '@/system/token/color';
-import { dday } from '@/utils/date';
 import { MoreButton } from '@/app/(sidebar)/my-recruit/containers/components/Card/common/MoreButton';
 import { StatusButton } from '@/app/(sidebar)/my-recruit/containers/components/Card/common/StatusButton';
-import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
-import { DueDateDialog } from '../DueDateDialog/DueDateDialog';
 import { RecruitCard } from '@/app/(sidebar)/my-recruit/type';
-import { useRouter } from 'next/navigation';
 import { AsyncBoundaryWithQuery } from '@/lib';
+import { Icon } from '@/system/components';
+import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
+import { color } from '@/system/token/color';
+import { Spacing } from '@/system/utils/Spacing';
+import { dday } from '@/utils/date';
+import { useRouter } from 'next/navigation';
+import { DueDateDialog } from '../DueDateDialog/DueDateDialog';
 
 interface BoxCardProps extends RecruitCard {
   onRecruitDelete: (id: number) => void;
@@ -36,7 +36,7 @@ export function BoxCard({
           <Dialog>
             <Dialog.Trigger className="flex justify-between items-center w-full">
               <span className="text-label2 text-neutral-50">공고 일정을 등록해주세요</span>
-              <Icon name="add" size={24} color={color.neutral50} />
+              <Icon name="add" size={20} color={color.neutral50} />
             </Dialog.Trigger>
             <Dialog.Content className="w-400">
               <AsyncBoundaryWithQuery pendingFallback={<></>}>

diff --git a/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/DueDateDialog.tsx b/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/DueDateDialog.tsx
@@ -1,18 +1,17 @@
+import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant';
+import { AddIcon } from '@/app/(sidebar)/my-recruit/containers/components/DueDateDialog/AddIcon';
+import { Form } from '@/app/(sidebar)/my-recruit/containers/components/DueDateDialog/Form';
+import { TouchButton } from '@/components/TouchButton';
 import { Icon } from '@/system/components';
+import { DialogClose } from '@/system/components/Dialog/Dialog';
 import { color } from '@/system/token/color';
 import { Spacing } from '@/system/utils/Spacing';
 import { cn } from '@/utils';
+import { immer } from '@/utils/immer';
 import clsx from 'clsx';
+import { format } from 'date-fns/format';
 import { useState } from 'react';
-import { useGetRecruitSchedule } from '../../../api/useGetRecruitSchedule';
-import { Form } from '@/app/(sidebar)/my-recruit/containers/components/DueDateDialog/Form';
-import { TouchButton } from '@/components/TouchButton';
-import { AddIcon } from '@/app/(sidebar)/my-recruit/containers/components/DueDateDialog/AddIcon';
-import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant';
 import { usePostRecruitSchedule } from '../../../api/usePostRecruitSchedule';
-import { format } from 'date-fns/format';
-import { DialogClose } from '@/system/components/Dialog/Dialog';
-import { immer } from '@/utils/immer';
 
 interface DueDateDialogProps {
   id: number;
@@ -33,8 +32,6 @@ export function DueDateDialog({ id, title }: DueDateDialogProps) {
     }>
   >([DEFAULT_FORM]);
 
-  console.log(scheduleList);
-
   const handleDelete = (index: number) => {
     const newList = [...scheduleList];
     newList.splice(index, 1);
@@ -81,7 +78,7 @@ export function DueDateDialog({ id, title }: DueDateDialogProps) {
             currentRecruitStage={schedule.recruitScheduleStage}
             selectedDate={schedule.deadLine != null ? new Date(schedule.deadLine) : schedule.deadLine}
             hasDeleteButton={index !== 0}
-            hasArrow={title != null}
+            hasArrow={title == null}
             onStageClick={(stage) => {
               const newSchedule = immer(scheduleList);
               newSchedule[index].recruitScheduleStage = stage;
@@ -104,13 +101,21 @@ export function DueDateDialog({ id, title }: DueDateDialogProps) {
         <span className="text-neutral-40 text-label2 font-medium">일정 추가</span>
       </TouchButton>
       <Spacing size={8} />
-      <DialogClose className="w-full" asChild>
+      {title ? (
+        <DialogClose className="w-full" asChild>
+          <TouchButton
+            onClick={save}
+            className="bg-neutral-95 w-full h-46 gap-[4px] rounded-[6px] text-white text-body2 font-semibold py-[13px]">
+            저장하기
+          </TouchButton>
+        </DialogClose>
+      ) : (
         <TouchButton
           onClick={save}
           className="bg-neutral-95 w-full h-46 gap-[4px] rounded-[6px] text-white text-body2 font-semibold py-[13px]">
           저장하기
         </TouchButton>
-      </DialogClose>
+      )}
     </div>
   );
 }
diff --git a/src/system/components/Icon/SVG/Add.tsx b/src/system/components/Icon/SVG/Add.tsx
@@ -2,7 +2,7 @@ import { IconBaseType } from './type';
 
 export function Add({ size, color }: IconBaseType) {
   return (
-    <svg width={size} height={size} viewBox={`0 0 17 16`} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
       <mask
         id="mask0_3051_19736"
         style={{ maskType: 'alpha' }}