+
+
+ 전체 {cardList?.length}개
+
+ {scheduleType === "all" && (
+
+
+
+ )}
+
+
+ {/* TODO: 무한 스크롤 추가 */}
+
+ {cardList?.map((card, i) => (
+
+ ))}
+
+ {[...Array(3 - (cardList.length % 3)).keys()].map((i) => (
+
+ ))}
+
+
router.push(tab.path)}
@@ -35,16 +35,20 @@ const tabs = [
},
{
title: "모집 일정",
- path: "/schedule/recruitment",
+ path: "/schedule/recruit",
},
{
- title: "참여 일정",
- path: "/schedule/participation",
+ title: "참여 신청",
+ path: "/schedule/participate",
},
{
title: "스크랩",
path: "/schedule/scrap",
},
+ {
+ title: "임시저장",
+ path: "/schedule/temporary",
+ },
{
title: "나만의 아이템",
path: "/schedule/items",
diff --git a/src/schedule/components/ScheduleSmallCard.tsx b/src/schedule/components/ScheduleSmallCard.tsx
new file mode 100644
index 00000000..7060a034
--- /dev/null
+++ b/src/schedule/components/ScheduleSmallCard.tsx
@@ -0,0 +1,150 @@
+// 일정 작은 카드
+import Image from "next/image";
+import React, { useState } from "react";
+import { getDaysDifference, stringToDate } from "@shared/utils";
+import cardToggle from "/public/assets/schedule/card_toggle.svg";
+
+export type scheduleSmallCardType = "다가오는 일정" | "모집 중" | "참여 신청";
+
+interface ScheduleSmallCardProps {
+ type: scheduleSmallCardType;
+ idx: number;
+ title: string;
+ location: string;
+ durationStart: string;
+ durationEnd: string;
+ participateNum: number;
+ participateCapacity: number;
+ onClickDelete: (i: number) => void;
+}
+
+const ScheduleSmallCard = ({
+ type,
+ idx,
+ title,
+ location,
+ durationStart,
+ durationEnd,
+ participateNum,
+ participateCapacity,
+ onClickDelete,
+}: ScheduleSmallCardProps) => {
+ const [isToggle, setIsToggle] = useState(false);
+
+ const handleClickToggle = (e: React.MouseEvent
) => {
+ e.stopPropagation();
+ setIsToggle((prev) => !prev);
+ };
+
+ const handleClickShare = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ // TODO: 공유 로직 추가
+ };
+
+ const handleClickUpdate = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ // TODO: 일정 수정으로 라우팅
+ };
+
+ const handleClickSettingChange = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ // TODO: 설정 변경으로 라우팅
+ };
+
+ const handleDelete = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ setIsToggle((prev) => !prev);
+ onClickDelete(idx);
+ };
+
+ const smallCardToggleItems = [
+ {
+ title: "공유",
+ onClick: handleClickShare,
+ },
+ {
+ title: "일정 수정",
+ onClick: handleClickUpdate,
+ },
+ {
+ title: "설정 변경",
+ onClick: handleClickSettingChange,
+ },
+ {
+ title: "삭제하기",
+ onClick: handleDelete,
+ },
+ ];
+
+ return (
+
+ {isToggle && (
+
+
+ {smallCardToggleItems.map((item, i) => (
+
+ ))}
+
+
+ )}
+
+
+
+
+ {title}
+
+
+
+ {location}
+
+
+
+ {stringToDate(durationStart)} ~ {stringToDate(durationEnd)}
+
+
+ {type === "다가오는 일정" ? (
+
+ D
+ {getDaysDifference(durationStart) === 0
+ ? "-DAY"
+ : getDaysDifference(durationStart)}
+
+ ) : (
+
+
+
+ {participateNum}
+ /{participateCapacity}
+
+
+ )}
+
+
- {tabItems.map((tab, i) => (
+ {tabItems.map(({ title }, i) => (
onClickTab(tab.title)}
+ onClick={() => onClickTab(title)}
>
- {tab.title}
+ {title}
))}