feat(my-recruit): 우측 사이드바 및 dnd구현 (#23)

* feat(my-recruit): 우측 사이드바 및 dnd구현

* dnd animation

package.json

@@ -17,6 +17,7 @@
     "node": "20.2.0"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.1",

src/app/(sidebar)/(my-info)/components/InfoCardList.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { mockInfoCount, mockInfoList } from '../mock';
 import { cn } from '@/utils/tailwind-util';
 import { Icon } from '@/system/components';
-import { InfoCardItem } from './InfoCardItem';
+import { InfoCard } from '@/components/InfoCard';
 
 const INFO_OPTIONS = ['경험 정리', '자기소개서', '면접 질문'] as const;
 
@@ -46,11 +46,13 @@ export function InfoCardList() {
           <Icon name="add" color="#08F29B" />
         </button>
       </div>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(343px,1fr))] gap-[16px]">
+      <ul className="grid grid-cols-[repeat(auto-fill,minmax(343px,1fr))] gap-[16px]">
         {infoList.map((info) => (
-          <InfoCardItem key={info.id} {...info} />
+          <li className="min-w-[343px]">
+            <InfoCard key={info.id} {...info} />
+          </li>
         ))}
-      </div>
+      </ul>
     </section>
   );
 }

src/app/(sidebar)/(my-info)/mock.ts

@@ -1,12 +1,12 @@
-import { InfoCard } from '@/types/info';
+import { InfoCardType } from '@/types/info';
 
 export const mockInfoCount = {
   '경험 정리': 1,
   자기소개서: 3,
   '면접 질문': 2,
 };
 
-export const mockInfoList: InfoCard[] = [
+export const mockInfoList: InfoCardType[] = [
   {
     id: 1,
     title: '제목',

src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/InputField.tsx

@@ -1,4 +1,4 @@
-import { If } from '@/components/If';
+import { If } from '@/system/utils/If';
 import { ComponentProps, ReactNode } from 'react';
 
 interface Props extends ComponentProps<'input'> {

src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx

@@ -1,4 +1,4 @@
-import { Spacing } from '@/components/Spacing';
+import { Spacing } from '@/system/utils/Spacing';
 import { TouchButton } from '@/components/TouchButton';
 import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
 import { color } from '@/system/token/color';
@@ -17,7 +17,7 @@ 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 { If } from '@/components/If';
+import { If } from '@/system/utils/If';
 
 interface Props {
   onSubmit: () => void;

src/app/(sidebar)/my-recruit/containers/AllRecruitment.tsx

@@ -2,7 +2,7 @@
 
 import { Icon } from '@/system/components';
 import { RocketIcon } from './components/RocketIcon';
-import { Spacing } from '@/components/Spacing';
+import { Spacing } from '@/system/utils/Spacing';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,8 +14,11 @@ import { color } from '@/system/token/color';
 import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
 import { cardList } from '../mock';
 import { RowCard } from './components/Card/RowCard';
+import { Droppable, useDndContext } from '@/lib/dnd-kit/dnd-kit';
 
 export function AllRecruitment() {
+  const { over } = useDndContext();
+
   return (
     <>
       <DropdownMenu>
@@ -48,7 +51,9 @@ export function AllRecruitment() {
 
       <div className="flex flex-col gap-[12px]">
         {cardList.map((cardInfo) => (
-          <RowCard key={`${cardInfo.period}-${cardInfo.title}`} {...cardInfo} />
+          <Droppable key={`${cardInfo.period}-${cardInfo.title}`} id={cardInfo.id}>
+            <RowCard highlighted={cardInfo.id === over?.id} {...cardInfo} />
+          </Droppable>
         ))}
       </div>
     </>

src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment.tsx

@@ -1,4 +1,4 @@
-import { Spacing } from '@/components/Spacing';
+import { Spacing } from '@/system/utils/Spacing';
 import { ShoeIcon } from './components/ShoeIcon';
 import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
 import { motion } from 'framer-motion';

src/app/(sidebar)/my-recruit/containers/RightSidebar.tsx

@@ -0,0 +1,71 @@
+import { Spacing } from '@/system/utils/Spacing';
+import { TouchButton } from '@/components/TouchButton';
+import { Icon } from '@/system/components';
+import { color } from '@/system/token/color';
+import { mockInfoList } from '../mock';
+import { InfoCard } from '@/components/InfoCard';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/system/components/DropdownMenu/DropdownMenu';
+import { Draggable } from '@/lib/dnd-kit/dnd-kit';
+import { motion } from 'framer-motion';
+
+interface Props {
+  onCloseButtonClick: () => void;
+}
+
+const infoCategoryList = ['경험 정리', '자기소개서', '면접 질문'];
+
+export function RightSidebar({ onCloseButtonClick }: Props) {
+  return (
+    <motion.div
+      initial={{ width: 0 }}
+      animate={{ width: 400 }}
+      exit={{ width: 0 }}
+      transition={{ duration: 0.4 }}
+      className="w-400 relative">
+      <motion.div
+        initial={{ x: 400, opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        exit={{ x: 400, opacity: 0 }}
+        transition={{ duration: 0.4 }}
+        className="flex flex-col fixed top-[16px] bottom-[16px] right-[16px] p-20 bg-neutral-3 w-370 rounded-[20px] shadow-[0px_3px_8px_0px_rgba(0,0,0,0.24)]">
+        <TouchButton className="self-end" onClick={onCloseButtonClick}>
+          <Icon name="close" size={24} color={color.neutral40} />
+        </TouchButton>
+        <Spacing size={25} />
+        <div className="flex justify-between items-center">
+          <span className="text-neutral-95 text-heading2 font-semibold">내 정보 가져오기</span>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <div className="flex gap-[4px] items-center">
+                <span className="text-label2 font-semibold">경험 정리</span>
+                <Icon name="down" color={color.neutral40} />
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {infoCategoryList.map((item) => (
+                <DropdownMenuItem key={item}>{item}</DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <Spacing size={4} />
+        <span className="text-label2 text-neutral-40">카드를 공고 폴더로 드래그해보세요</span>
+        <Spacing size={24} />
+        <ul className="flex flex-col items-center gap-[8px] overflow-auto">
+          {mockInfoList.map((info) => (
+            <li key={info.id} className="w-full">
+              <Draggable id={info.id} dataForOverlay={info}>
+                <InfoCard key={info.id} {...info} />
+              </Draggable>
+            </li>
+          ))}
+        </ul>
+      </motion.div>
+    </motion.div>
+  );
+}

src/app/(sidebar)/my-recruit/containers/components/Card/BoxCard.tsx

@@ -1,4 +1,4 @@
-import { Spacing } from '@/components/Spacing';
+import { Spacing } from '@/system/utils/Spacing';
 import { Icon } from '@/system/components';
 import { color } from '@/system/token/color';
 import { dday } from '@/utils/date';
@@ -8,6 +8,7 @@ import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
 import { DueDateDialog } from '../DueDateDialog';
 
 export type ProgressingCardType = {
+  id: number;
   type: '서류 마감' | '1차 면접' | '2차 면접';
   status: '지원 완료' | '서류 통과' | '서류 탈락';
   dueDate: Date | null;
@@ -52,17 +53,3 @@ export function BoxCard({ type, title, status, dueDate, period }: ProgressingCar
     </div>
   );
 }
-
-const statusList = [
-  { variant: 'text', text: '지원 준비' },
-  { variant: 'text', text: '지원 완료' },
-  { variant: 'border' },
-  { variant: 'text', text: '서류 통과' },
-  { variant: 'text', text: '서류 탈락' },
-  { variant: 'border' },
-  { variant: 'text', text: '면접 통과' },
-  { variant: 'text', text: '면접 탈락' },
-  { variant: 'border' },
-  { variant: 'text', text: '최종 합격' },
-  { variant: 'text', text: '최종 탈락' },
-] as const;

src/app/(sidebar)/my-recruit/containers/components/Card/RowCard.tsx

@@ -1,24 +1,31 @@
-import { If } from '@/components/If';
-import { Spacing } from '@/components/Spacing';
+import { If } from '@/system/utils/If';
+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 './common/StatusButton';
+import { cn } from '@/utils';
 
 interface RowCardProps {
+  id: number;
   type: '서류 마감' | '1차 면접' | '2차 면접';
   status: '지원 완료' | '서류 통과' | '서류 탈락';
   dueDate: Date | null;
   period: string;
   title: string;
+  highlighted?: boolean;
 }
 
-export function RowCard({ type, title, status, dueDate, period }: RowCardProps) {
+export function RowCard({ type, title, status, dueDate, period, highlighted = false }: RowCardProps) {
   return (
     <div className="rounded-[10px] overflow-hidden flex cursor-pointer">
-      <div className="w-12 bg-neutral-95" />
-      <div className="px-24 py-22 flex-1 flex items-center border-1 border-neutral-5 border-l-neutral-95 rounded-r-[10px] justify-between">
+      <div className={cn('w-12', highlighted ? 'bg-mint-40' : 'bg-neutral-95')} />
+      <div
+        className={cn(
+          'px-24 py-22 flex-1 flex items-center border-1 border-l-transparent rounded-r-[10px] justify-between',
+          highlighted ? 'border-mint-10 bg-[rgba(221,243,235,0.50)]' : 'border-neutral-5',
+        )}>
         <div className="flex items-center">
           <span className="text-neutral-50 text-label2 font-medium">{period}</span>
           <Spacing size={24} direction="row" />

src/app/(sidebar)/my-recruit/containers/components/Card/common/StatusButton.tsx

@@ -1,4 +1,4 @@
-import { SwitchCase } from '@/components/SwitchCase';
+import { SwitchCase } from '@/system/utils/SwitchCase';
 import { Icon } from '@/system/components';
 import {
   DropdownMenu,
@@ -24,8 +24,9 @@ export function StatusButton({ currentStatus }: Props) {
         </div>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
-        {statusList.map((item) => (
+        {statusList.map((item, index) => (
           <SwitchCase
+            key={index}
             value={item.variant}
             caseBy={{
               text:

src/app/(sidebar)/my-recruit/containers/components/DueDateDialog.tsx

@@ -1,4 +1,4 @@
-import { Spacing } from '@/components/Spacing';
+import { Spacing } from '@/system/utils/Spacing';
 import { Button, Icon } from '@/system/components';
 import { color } from '@/system/token/color';
 import clsx from 'clsx';