Merge branch 'main' of https://github.com/depromeet/bbo-gak-client in…

…to feat/tempLoogin

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,
@@ -12,8 +12,13 @@ import {
 import { motion } from 'framer-motion';
 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>
@@ -43,6 +48,14 @@ export function AllRecruitment() {
           <span className="text-neutral-30 text-label1">등록된 공고가 없어요</span>
         </motion.button>
       </Dialog.Trigger>
+
+      <div className="flex flex-col gap-[12px]">
+        {cardList.map((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,8 +1,11 @@
-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';
 import { color } from '@/system/token/color';
+import { cardList } from '../mock';
+import { BoxCard } from './components/Card/BoxCard';
+import { TouchButton } from '@/components/TouchButton';
 
 export function ProgressingRecruitment() {
   return (
@@ -21,6 +24,22 @@ export function ProgressingRecruitment() {
           <span className="text-neutral-30 text-label1">진행중인 공고가 없어요</span>
         </motion.button>
       </Dialog.Trigger>
+
+      <div className="flex gap-[16px]">
+        {cardList.map((cardInfo) => (
+          <BoxCard key={`${cardInfo.period}-${cardInfo.title}`} {...cardInfo} />
+        ))}
+      </div>
+
+      <Spacing size={32} />
+      <div className="flex justify-center">
+        <TouchButton className="px-12 py-8 bg-neutral-5 rounded-[6px] text-caption1 text-neutral-50">
+          더보기
+        </TouchButton>
+        <TouchButton className="px-12 py-8 bg-neutral-5 rounded-[6px] text-caption1 text-neutral-50">
+          간략히 보기
+        </TouchButton>
+      </div>
     </>
   );
 }

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

@@ -0,0 +1,55 @@
+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';
+
+export type ProgressingCardType = {
+  id: number;
+  type: '서류 마감' | '1차 면접' | '2차 면접';
+  status: '지원 완료' | '서류 통과' | '서류 탈락';
+  dueDate: Date | null;
+  period: string;
+  title: string;
+};
+
+export function BoxCard({ type, title, status, dueDate, period }: ProgressingCardType) {
+  return (
+    <div className="w-[320px] rounded-[10px] overflow-hidden cursor-pointer">
+      <div className="h-38 pr-12 pl-20 bg-neutral-95 flex justify-between items-center">
+        {dueDate == null ? (
+          <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} />
+            </Dialog.Trigger>
+            <Dialog.Content className="w-400">
+              <DueDateDialog title={title} />
+            </Dialog.Content>
+          </Dialog>
+        ) : (
+          <>
+            <div className="flex items-center gap-[4px]">
+              <Icon name="clover" size={20} color={color.mint30} />
+              <span className="text-white text-label2 ">
+                {type} D-{dday(dueDate)}
+              </span>
+            </div>
+            <MoreButton />
+          </>
+        )}
+      </div>
+      <div className="p-20 pt-16 bg-white border-neutral-5 border-1 rounded-b-[10px] hover:border-neutral-95">
+        <div className="flex justify-between items-center">
+          <div className="bg-mint-1 text-mint-50 text-label1 px-8 py-4 rounded-4">{period}</div>
+          <StatusButton currentStatus={status} />
+        </div>
+        <Spacing size={16} />
+        <span className="text-nuetral-95 font-semibold font-body1 text-ellipsis line-clamp-1">{title}</span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+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, highlighted = false }: RowCardProps) {
+  return (
+    <div className="rounded-[10px] overflow-hidden flex cursor-pointer">
+      <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" />
+          <If condition={dueDate != null}>
+            <div className="px-6 py-4 rounded-[4px] bg-neutral-95 flex gap-[2px]">
+              <Icon name="clover" size={20} color={color.mint30} />
+              <span className="text-white text-label2 ">
+                {type} D-{dday(dueDate!)}
+              </span>
+            </div>
+          </If>
+          <Spacing size={12} direction="row" />
+          <span className="font-semibold font-body1">{title}</span>
+        </div>
+        <div className="flex items-center">
+          <StatusButton currentStatus={status} />
+          <Spacing size={32} direction="row" />
+          <MoreButton />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { Icon } from '@/system/components';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/system/components/DropdownMenu/DropdownMenu';
+import { color } from '@/system/token/color';
+
+export function MoreButton() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="outline-none">
+        <Icon name="more" size={24} color={color.neutral40} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem className="gap-[8px]">
+          <Icon name="delete" color="#FF5C5C" />
+          <div className="text-red-50 text-[15px] font-normal">삭제하기</div>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}