From 304c30a96c25497b2abeecbee31476e4067730a6 Mon Sep 17 00:00:00 2001 From: eunbeann Date: Thu, 12 Sep 2024 14:30:27 +0900 Subject: [PATCH 1/9] feat: make card with category --- .../my-recruit/[id]/components/AddRecruitCardDialog.tsx | 5 +++-- .../(sidebar)/my-recruit/[id]/components/DetailContent.tsx | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/(sidebar)/my-recruit/[id]/components/AddRecruitCardDialog.tsx b/src/app/(sidebar)/my-recruit/[id]/components/AddRecruitCardDialog.tsx index ed1d55c..0d9300f 100644 --- a/src/app/(sidebar)/my-recruit/[id]/components/AddRecruitCardDialog.tsx +++ b/src/app/(sidebar)/my-recruit/[id]/components/AddRecruitCardDialog.tsx @@ -14,9 +14,10 @@ import { usePostCardInRecruit } from '../api/usePostCardInRecurit'; interface AddRecruitCardDialogProps { recruitId: string; + category: RecruitType; } -export function AddRecruitCardDialog({ children, recruitId }: PropsWithChildren) { +export function AddRecruitCardDialog({ children, recruitId, category }: PropsWithChildren) { const router = useRouter(); const [selectedTagList, setSelectedTagList] = useState([]); @@ -46,9 +47,9 @@ export function AddRecruitCardDialog({ children, recruitId }: PropsWithChildren< return ( { + setSelectedType(open && category !== '내_정보_복사' ? category : null); if (!open) { setSelectedTagList([]); - setSelectedType(null); } }}> {children} diff --git a/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx b/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx index 75b4fd2..5e89c34 100644 --- a/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx +++ b/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx @@ -52,6 +52,7 @@ export function DetailContent({ recruitId }: { recruitId: string }) { } }; }, []); + const scrollToTop = () => { if (contentRef.current) { contentRef.current.scrollTop = 0; @@ -96,7 +97,7 @@ export function DetailContent({ recruitId }: { recruitId: string }) { })} - + Date: Thu, 12 Sep 2024 15:08:35 +0900 Subject: [PATCH 2/9] feat: drag To Progress --- .../AllRecruitment/AllRecruitList.tsx | 4 ++-- .../ProgressingRecruitList.tsx | 19 ++++++++++++------- .../containers/components/Card/BoxCard.tsx | 8 +++++++- 3 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitList.tsx b/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitList.tsx index 63b397e..fb39994 100644 --- a/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitList.tsx +++ b/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitList.tsx @@ -40,10 +40,10 @@ export function AllRecruitList({ selectedSeason }: Props) { {allRecruits.map((cardInfo) => ( { diff --git a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx index a1d5798..255cd32 100644 --- a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx +++ b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx @@ -53,14 +53,19 @@ export function ProgressingRecruitList() {
{recruitCardForShow.map((cardInfo) => ( - { - patchRecruitStatus({ id, recruitStatus: status }); - }} - /> + id={`box-${cardInfo.id}`} + dataForOverlay={{ title: cardInfo.title }}> + { + 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 index 72900b5..4118a15 100644 --- a/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx +++ b/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx @@ -6,11 +6,13 @@ 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 { cn } from '@/utils'; import { dday } from '@/utils/date'; import { useRouter } from 'next/navigation'; import { DueDateDialog } from '../DueDateDialog/DueDateDialog'; interface BoxCardProps extends RecruitCard { + highlighted?: boolean; onRecruitDelete: (id: number) => void; onRecruitStatusChange: (id: number, status: string) => void; } @@ -23,6 +25,7 @@ export function BoxCard({ recruitStatus, season, nearestSchedule, + highlighted = false, onRecruitStatusChange, onRecruitDelete, }: BoxCardProps) { @@ -57,7 +60,10 @@ export function BoxCard({ )}
router.push(`/my-recruit/${id}`)}>
{season}
From 4e6c513f3406dc160ff031c6b29790b39b567acd Mon Sep 17 00:00:00 2001 From: eunbeann Date: Thu, 12 Sep 2024 15:19:46 +0900 Subject: [PATCH 3/9] style: arrange import --- .../ProgressingRecruitList.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx index 255cd32..2078853 100644 --- a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx +++ b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx @@ -1,17 +1,18 @@ -import { BoxCard, MIN_CARD_WIDTH } from '@/app/(sidebar)/my-recruit/containers/components/Card/BoxCard'; import { useGetProgressingRecruits } from '@/app/(sidebar)/my-recruit/api/useGetProgressingRecruits'; +import { BoxCard, MIN_CARD_WIDTH } from '@/app/(sidebar)/my-recruit/containers/components/Card/BoxCard'; +import { TouchButton } from '@/components/TouchButton'; +import { useResizeObserver } from '@/hooks/useResizeObserver'; +import { Droppable } from '@/lib/dnd-kit/Droppable'; import { Dialog } from '@/system/components/Dialog/ShadcnDialog'; -import { motion } from 'framer-motion'; import { color } from '@/system/token/color'; -import { Spacing } from '@/system/utils/Spacing'; -import { TouchButton } from '@/components/TouchButton'; -import { useState } from 'react'; +import { AnimateHeight } from '@/system/utils/AnimateHeight'; import { If } from '@/system/utils/If'; +import { Spacing } from '@/system/utils/Spacing'; import { SwitchCase } from '@/system/utils/SwitchCase'; -import { usePatchRecruitStatus } from '../../api/usePatchRecruitStatus'; +import { motion } from 'framer-motion'; +import { useState } from 'react'; import { useDeleteRecruit } from '../../api/useDeleteRecruit'; -import { useResizeObserver } from '@/hooks/useResizeObserver'; -import { AnimateHeight } from '@/system/utils/AnimateHeight'; +import { usePatchRecruitStatus } from '../../api/usePatchRecruitStatus'; const 최초_노출_카드_갯수 = 1; const CARD_GAP = 16; From eac3ffffcfed2143288c9a20370a0349d12ed208 Mon Sep 17 00:00:00 2001 From: eunbeann Date: Thu, 12 Sep 2024 15:23:03 +0900 Subject: [PATCH 4/9] fix: import over --- .../ProgressingRecruitment/ProgressingRecruitList.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx index 2078853..c6f38ca 100644 --- a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx +++ b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx @@ -3,6 +3,7 @@ import { BoxCard, MIN_CARD_WIDTH } from '@/app/(sidebar)/my-recruit/containers/c import { TouchButton } from '@/components/TouchButton'; import { useResizeObserver } from '@/hooks/useResizeObserver'; import { Droppable } from '@/lib/dnd-kit/Droppable'; +import { useDndContext } from '@/lib/dnd-kit/dnd-kit'; import { Dialog } from '@/system/components/Dialog/ShadcnDialog'; import { color } from '@/system/token/color'; import { AnimateHeight } from '@/system/utils/AnimateHeight'; @@ -21,6 +22,7 @@ export function ProgressingRecruitList() { const recruitCards = useGetProgressingRecruits().data; const [shouldShowMore, setShouldShowMore] = useState(false); + const { over } = useDndContext(); const { mutate: patchRecruitStatus } = usePatchRecruitStatus(); const { mutate: deleteRecruit } = useDeleteRecruit(); From 75e45bfe5c6d7fd9e4abb15585a1cf5692991867 Mon Sep 17 00:00:00 2001 From: eunbeann Date: Thu, 12 Sep 2024 15:40:55 +0900 Subject: [PATCH 5/9] style: deleteMeaningless component --- .../my-recruit/[id]/components/DetailContent.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx b/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx index 5e89c34..3425a4c 100644 --- a/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx +++ b/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx @@ -3,7 +3,7 @@ import { InfoCard } from '@/components/InfoCard'; import { TouchButton } from '@/components/TouchButton'; import { Droppable } from '@/lib/dnd-kit/Droppable'; -import { Icon, Text } from '@/system/components'; +import { Icon } from '@/system/components'; import { If } from '@/system/utils/If'; import { InfoCardType } from '@/types'; import { RECRUIT_TYPES, RecruitType } from '@/types/recruit'; @@ -140,14 +140,6 @@ export function DetailContent({ recruitId }: { recruitId: string }) { TOP - - - 내 정보 가져오기 - - )} From db63569416f632eb1db17bcac572fc91795ed4b3 Mon Sep 17 00:00:00 2001 From: eunbeann Date: Thu, 12 Sep 2024 17:03:49 +0900 Subject: [PATCH 6/9] style: set a color --- .../my-recruit/containers/components/Card/BoxCard.tsx | 10 +++++++--- .../containers/components/Card/common/MoreButton.tsx | 8 ++++---- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx b/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx index 4118a15..f53c38a 100644 --- a/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx +++ b/src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx @@ -34,7 +34,11 @@ export function BoxCard({ return (
-
+
{nearestSchedule == null ? ( @@ -50,12 +54,12 @@ export function BoxCard({ ) : ( <>
- + {nearestSchedule.recruitScheduleStage} D-{dday(nearestSchedule.deadLine) || 'DAY'}
- onRecruitDelete(id)} /> + onRecruitDelete(id)} /> )}
diff --git a/src/app/(sidebar)/my-recruit/containers/components/Card/common/MoreButton.tsx b/src/app/(sidebar)/my-recruit/containers/components/Card/common/MoreButton.tsx index 808df95..113546c 100644 --- a/src/app/(sidebar)/my-recruit/containers/components/Card/common/MoreButton.tsx +++ b/src/app/(sidebar)/my-recruit/containers/components/Card/common/MoreButton.tsx @@ -1,16 +1,16 @@ -import { Icon } from '@/system/components'; -import { Dropdown } from '@/system/components'; +import { Dropdown, Icon } from '@/system/components'; import { color } from '@/system/token/color'; interface MoreButtonProps { onDeleteClick: () => void; + highlighted?: boolean; } -export function MoreButton({ onDeleteClick }: MoreButtonProps) { +export function MoreButton({ onDeleteClick, highlighted }: MoreButtonProps) { return ( - + From bead492b2d70dc6a725d7fdd5e5a2dee81815f9f Mon Sep 17 00:00:00 2001 From: eunbeann Date: Thu, 12 Sep 2024 17:34:56 +0900 Subject: [PATCH 7/9] style: shorten --- src/app/(sidebar)/my-recruit/components/DraggableInfoCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/(sidebar)/my-recruit/components/DraggableInfoCard.tsx b/src/app/(sidebar)/my-recruit/components/DraggableInfoCard.tsx index b1973e4..84a145b 100644 --- a/src/app/(sidebar)/my-recruit/components/DraggableInfoCard.tsx +++ b/src/app/(sidebar)/my-recruit/components/DraggableInfoCard.tsx @@ -6,7 +6,8 @@ import { ComponentProps } from 'react'; export function DraggableInfoCard(props: ComponentProps) { const { over } = useDndContext(); - const overTitle = over?.data.current?.title; + const title = over?.data.current?.title; + const overTitle = title?.length > 12 ? `${title.slice(0, 12)}...` : title; return (
From 0b54c325f858260fa74c55e9ae2b36509d6e5e0b Mon Sep 17 00:00:00 2001 From: eunbeann Date: Thu, 12 Sep 2024 18:25:30 +0900 Subject: [PATCH 8/9] feat: close when choose --- .../NewRecruitDialogContent/NewRecruitDialogContent.tsx | 7 ++++++- .../containers/components/DueDateDialog/Form.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx b/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx index 55e9b8a..9bf8ed3 100644 --- a/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx +++ b/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx @@ -34,11 +34,16 @@ export function NewRecruitDialogContent({ onSubmit }: NewRecruitDialogContentPro const [siteUrl, setSiteUrl] = useState(''); const [selectedDate, setSelectedDate] = useState(); const [currentRecruitStage, setCurrentRecruitStage] = useState(recruitScheduleStageList[0]); + const [isOpen, setIsOpen] = useState(false); const [selectedSeason, setSelectedSeason] = useState(); const seasonList = useGetSeasons()?.data ?? []; const isDateSelected = selectedDate != null; + useEffect(() => { + setIsOpen(false); + }, [selectedDate]); + useEffect(() => { if (selectedSeason == null) { setSelectedSeason(seasonList[0]?.name); @@ -110,7 +115,7 @@ export function NewRecruitDialogContent({ onSubmit }: NewRecruitDialogContentPro ))} - + { + setIsOpen(false); + }, [selectedDate]); + return (
@@ -53,7 +58,7 @@ export function Form({
- + Date: Thu, 12 Sep 2024 18:25:55 +0900 Subject: [PATCH 9/9] style: arrange import --- .../NewRecruitDialogContent.tsx | 18 ++++++++---------- .../components/DueDateDialog/Form.tsx | 6 +++--- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx b/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx index 9bf8ed3..2701022 100644 --- a/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx +++ b/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx @@ -1,19 +1,17 @@ -import { Spacing } from '@/system/utils/Spacing'; +import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant'; import { TouchButton } from '@/components/TouchButton'; +import { Dropdown, Icon } from '@/system/components'; +import { Calendar } from '@/system/components/Calendar/Calendar'; import { Dialog } from '@/system/components/Dialog/ShadcnDialog'; +import { Popover, PopoverContent, PopoverTrigger } from '@/system/components/Popover/Popover'; import { color } from '@/system/token/color'; -import { InputField } from './InputField'; -import { useEffect, useState } from 'react'; -import { Icon } from '@/system/components'; -import { Dropdown } from '@/system/components'; +import { Spacing } from '@/system/utils/Spacing'; 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 { motion } from 'framer-motion'; +import { useEffect, useState } from 'react'; import { useGetSeasons } from '../../api/useGetSeasons'; -import { recruitStatusList } from '../../constant'; -import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant'; +import { InputField } from './InputField'; export interface CardData { season: string; diff --git a/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/Form.tsx b/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/Form.tsx index 0e0e755..189d373 100644 --- a/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/Form.tsx +++ b/src/app/(sidebar)/my-recruit/containers/components/DueDateDialog/Form.tsx @@ -1,13 +1,13 @@ +import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant'; import { Dropdown, Icon } from '@/system/components'; import { Calendar } from '@/system/components/Calendar/Calendar'; import { Popover, PopoverContent, PopoverTrigger } from '@/system/components/Popover/Popover'; import { color } from '@/system/token/color'; +import { If } from '@/system/utils/If'; import clsx from 'clsx'; import { format } from 'date-fns/format'; import { motion } from 'framer-motion'; -import { recruitScheduleStageList } from '@/app/(sidebar)/my-recruit/constant'; -import { useState } from 'react'; -import { If } from '@/system/utils/If'; +import { useEffect, useState } from 'react'; interface Props { selectedDate?: Date;