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..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'; @@ -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 }) { })} - + TOP - - - 내 정보 가져오기 - - )} 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 (
diff --git a/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx b/src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx index 55e9b8a..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; @@ -34,11 +32,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 +113,7 @@ export function NewRecruitDialogContent({ onSubmit }: NewRecruitDialogContentPro ))} - + ( { diff --git a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx index a1d5798..c6f38ca 100644 --- a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx +++ b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitList.tsx @@ -1,17 +1,19 @@ -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 { useDndContext } from '@/lib/dnd-kit/dnd-kit'; 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; @@ -20,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(); @@ -53,14 +56,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..f53c38a 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) { @@ -31,7 +34,11 @@ export function BoxCard({ return (
-
+
{nearestSchedule == null ? ( @@ -47,17 +54,20 @@ export function BoxCard({ ) : ( <>
- + {nearestSchedule.recruitScheduleStage} D-{dday(nearestSchedule.deadLine) || 'DAY'}
- onRecruitDelete(id)} /> + onRecruitDelete(id)} /> )}
router.push(`/my-recruit/${id}`)}>
{season}
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 ( - + 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 d337093..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; @@ -29,8 +29,13 @@ export function Form({ onDeadLineClick, onDeleteClick, }: Props) { + const [isOpen, setIsOpen] = useState(false); const isDateSelected = selectedDate != null; + useEffect(() => { + setIsOpen(false); + }, [selectedDate]); + return (
@@ -53,7 +58,7 @@ export function Form({
- +