update

depromeet · Aug 24, 2024 · b33f245 · b33f245
1 parent 22d1daf
commit b33f245
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 10 deletions.
diff --git a/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx b/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx
@@ -13,7 +13,6 @@ import { Calendar } from '@/system/components/Calendar/Calendar';
 import { format } from 'date-fns/format';
 import { useGetSeasons } from '../../api/useGetSeasons';
 import { recruitStatusList } from '../../constant';
-import { SwitchCase } from '@/system/utils/SwitchCase';
 import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant';
 
 export interface CardData {
@@ -96,7 +95,7 @@ export function NewRecruitDialogContent({ onSubmit }: NewRecruitDialogContentPro
           <Dropdown.Trigger>
             <div className="flex items-center gap-[4px] px-8 py-4">
               <span className="text-label1 text-neutral-95">{currentRecruitStage}</span>
-              <Icon name="down" color="#d9d9d9" />
+              <Dropdown.TriggerArrow />
             </div>
           </Dropdown.Trigger>
           <Dropdown.Content>

diff --git a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx
@@ -13,7 +13,7 @@ import { useDeleteRecruit } from '../../api/useDeleteRecruit';
 import { useResizeObserver } from '@/hooks/useResizeObserver';
 import { AnimateHeight } from '@/system/utils/AnimateHeight';
 
-const 최초_노출_카드_갯수 = 4;
+const 최초_노출_카드_갯수 = 0;
 const CARD_GAP = 16;
 
 export function ProgressingRecruitList() {
@@ -56,6 +56,7 @@ export function ProgressingRecruitList() {
                     <BoxCard
                       key={`${cardInfo.season}-${cardInfo.title}`}
                       {...cardInfo}
+                      onDuedateAppend={() => {}}
                       onRecruitDelete={deleteRecruit}
                       onRecruitStatusChange={(id, status) => {
                         patchRecruitStatus({ id, recruitStatus: status });

diff --git a/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx b/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx
@@ -11,6 +11,7 @@ import { RecruitCard } from '@/app/(sidebar)/my-recruit/type';
 interface BoxCardProps extends RecruitCard {
   onRecruitDelete: (id: number) => void;
   onRecruitStatusChange: (id: number, status: string) => void;
+  onDuedateAppend: () => void;
 }
 
 export const MIN_CARD_WIDTH = 250;
@@ -21,6 +22,7 @@ export function BoxCard({
   recruitStatus,
   season,
   nearestSchedule,
+  onDuedateAppend,
   onRecruitStatusChange,
   onRecruitDelete,
 }: BoxCardProps) {
@@ -36,7 +38,7 @@ export function BoxCard({
               <Icon name="add" size={24} color={color.neutral50} />
             </Dialog.Trigger>
             <Dialog.Content className="w-400">
-              <DueDateDialog title={title} />
+              <DueDateDialog title={title} onDuedateAppend={() => onDuedateAppend()} />
             </Dialog.Content>
           </Dialog>
         ) : (

diff --git a/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog.tsx b/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog.tsx
@@ -1,36 +1,67 @@
 import { Spacing } from '@/system/utils/Spacing';
-import { Button, Icon } from '@/system/components';
+import { Button, Dropdown, Icon } from '@/system/components';
 import { color } from '@/system/token/color';
 import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import { Popover, PopoverContent, PopoverTrigger } from '@/system/components/Popover/Popover';
 import { Calendar } from '@/system/components/Calendar/Calendar';
 import { format } from 'date-fns/format';
 import { useState } from 'react';
+import { recruitScheduleStageList } from '../../constant';
+import { recruitStatusList } from '@/app/(sidebar)/my-recruit/constant';
+import { RecruitCard } from '../../type';
 
 interface DueDateDialogProps {
   title: string;
+  onDuedateAppend: () => void;
 }
 
 export function DueDateDialog({ title }: DueDateDialogProps) {
   const [selectedDate, setSelectedDate] = useState<Date>();
+  const [currentRecruitStage, setCurrentRecruitStage] = useState<string>(recruitStatusList[3].text);
+  const [dueDateList, setDueDateList] = useState<
+    Array<{
+      recruitScheduleStage: string | null;
+      deadLine: `${number}-${number}-${number}` | null;
+    }>
+  >([]);
 
   const isDateSelected = selectedDate != null;
+  const activatedAddButton =
+    dueDateList.length !== 0 && dueDateList[0].deadLine != null && dueDateList[0].recruitScheduleStage != null;
 
   return (
     <div className="p-20">
       <div className="flex items-center w-314">
         <Icon name="folderFill" size={16} color={color.neutral95} />
         <Spacing size={4} direction="row" />
-        <span className="text-body1 font-semibold flex-1 overflow-hidden text-ellipsis line-clamp-1">{title}</span>
+        <span className="text-body1 font-semibold overflow-hidden text-ellipsis line-clamp-1">{title}</span>
         <span className="text-body1">의 공고 일정 등록하기</span>
       </div>
       <Spacing size={4} />
       <span className="text-caption1 text-neutral-35">일정을 등록하면 잊지 않도록 알려드릴게요!</span>
       <Spacing size={24} />
       {/* 마감일 입력 */}
       <div className="w-full flex justify-between items-center p-8 bg-neutral-1 rounded-[8px]">
-        <span className="text-label1 text-neutral-95">서류마감</span>
+        <Dropdown>
+          <Dropdown.Trigger>
+            <div className="flex items-center gap-[4px] px-8 py-4">
+              <span className="text-label1 text-neutral-95">{currentRecruitStage}</span>
+              <Dropdown.TriggerArrow />
+            </div>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            {recruitScheduleStageList.map((item, index) => (
+              <Dropdown.CheckedItem
+                key={index}
+                checked={currentRecruitStage === item}
+                disabled={currentRecruitStage === item}
+                onClick={() => setCurrentRecruitStage(item)}>
+                {item}
+              </Dropdown.CheckedItem>
+            ))}
+          </Dropdown.Content>
+        </Dropdown>
         <Popover>
           <PopoverTrigger>
             <motion.div
@@ -55,7 +86,9 @@ export function DueDateDialog({ title }: DueDateDialogProps) {
         </Popover>
       </div>
       <Spacing size={16} />
-      <Button className="w-full h-46 flex justify-center items-center gap-[4px] border-[1px] border-neutral-35 border-dashed rounded-[6px]">
+      <Button
+        disabled={activatedAddButton === false}
+        className="w-full h-46 flex justify-center items-center gap-[4px] border-[1px] border-neutral-35 border-dashed rounded-[6px]">
         <Icon name="add" color={color.neutral35} />
         <span className="text-caption1 font-medium text-neutral-35">일정 추가하기</span>
       </Button>

diff --git a/src/system/components/Icon/SVG/FolderFill.tsx b/src/system/components/Icon/SVG/FolderFill.tsx
@@ -4,8 +4,8 @@ export function FolderFill({ size, color }: IconBaseType) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none">
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M4.58667 10.5599H11.4133V9.55995H4.58667V10.5599ZM8.14 3.96661L6.63333 2.11328H1.5V13.8866H14.5V3.96661H8.14Z"
         fill={color}
       />