diff --git a/src/schedule/components/All.tsx b/src/schedule/components/All.tsx index 8a223d5c..8aa1a3a3 100644 --- a/src/schedule/components/All.tsx +++ b/src/schedule/components/All.tsx @@ -1,8 +1,8 @@ // 모든 일정 import { defaultCardList } from "@schedule/const"; import React, { useEffect, useState } from "react"; +import AllContent, { CardItemType } from "./AllContent"; import InputCalender from "./InputCalender"; -import ScheduleCard from "./ScheduleCard"; import ScheduleHeader from "./ScheduleHeader"; import ScheduleTab from "./ScheduleTab"; @@ -12,25 +12,9 @@ interface DateProps { end: Date | undefined; } -interface CardItemType { - theme: string; - img?: string; - title: string; - content?: string; - writer: string; - status: boolean; - location: string; - durationStart: string; - durationEnd: string; - createdAt: string; - like: number; - comment: number; - marked: number; -} - const All = () => { const [tab, setTab] = useState("전체"); - const [CardList, setCardList] = useState(defaultCardList); + const [cardList, setCardList] = useState(defaultCardList); const [title, setTitle] = useState(""); const [date, setDate] = useState({ // TODO: 초기값을 undefined로 설정하면 warning이 발생 @@ -41,7 +25,6 @@ const All = () => { start: false, end: false, }); - const [isMySchedule, setIsMySchedule] = useState(false); const handleCalendarClick = (type: "start" | "end") => { setShowCalendar((prev) => ({ @@ -86,16 +69,6 @@ const All = () => { // TODO: API 요청 추가 ??? 아님 프론트에서 다시 필터 ??? <- 확인해야 함 }; - // TODO: 내가 만든 일정만 필터 로직 추가 - const onClickMySchedule = () => setIsMySchedule((prev) => !prev); - - // TODO: 삭제 요청 추가 - const onClickDelete = (i: number) => { - const updatedCardList = [...CardList]; - updatedCardList.splice(i, 1); - setCardList(updatedCardList); - }; - // tab으로 필터링 const filteredInTab = (tab: string, dataList: CardItemType[]) => { const currentDate = new Date(); @@ -175,53 +148,7 @@ const All = () => { -
-
-
- 전체 {CardList.length}개 -
-
- -
-
- -
- {CardList.map((card, i) => ( - - ))} -
-
+ ); diff --git a/src/schedule/components/AllContent.tsx b/src/schedule/components/AllContent.tsx new file mode 100644 index 00000000..be40b25f --- /dev/null +++ b/src/schedule/components/AllContent.tsx @@ -0,0 +1,88 @@ +import React, { Dispatch, SetStateAction, useState } from "react"; +import ScheduleCard from "./ScheduleCard"; + +interface AllContentProps { + cardList: CardItemType[]; + setCardList: Dispatch>; +} + +export interface CardItemType { + theme: string; + img?: string; + title: string; + content?: string; + writer: string; + status: boolean; + location: string; + durationStart: string; + durationEnd: string; + createdAt: string; + like: number; + comment: number; + marked: number; +} + +const AllContent = ({ cardList, setCardList }: AllContentProps) => { + const [isMySchedule, setIsMySchedule] = useState(false); + + // TODO: 내가 만든 일정만 필터 로직 추가 + const onClickMySchedule = () => setIsMySchedule((prev) => !prev); + + // TODO: 삭제 요청 추가 + const onClickDelete = (i: number) => { + const updatedCardList = [...cardList]; + updatedCardList.splice(i, 1); + setCardList(updatedCardList); + }; + return ( +
+
+
+ 전체 {cardList.length}개 +
+
+ +
+
+ +
+ {cardList.map((card, i) => ( + + ))} +
+
+ ); +}; + +export default AllContent;