diff --git a/.pnp.cjs b/.pnp.cjs index e95a8833..54d13ad6 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -63,6 +63,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["prettier", "npm:3.0.3"],\ ["prettier-plugin-tailwindcss", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:0.5.6"],\ ["react", "npm:18.2.0"],\ + ["react-calendar", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:4.6.1"],\ ["react-dom", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:18.2.0"],\ ["react-query", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:3.39.3"],\ ["recoil", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:0.7.7"],\ @@ -7190,6 +7191,16 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["@types/lodash.memoize", [\ + ["npm:4.1.8", {\ + "packageLocation": "./.yarn/cache/@types-lodash.memoize-npm-4.1.8-e79e24b861-dc2812ffeb.zip/node_modules/@types/lodash.memoize/",\ + "packageDependencies": [\ + ["@types/lodash.memoize", "npm:4.1.8"],\ + ["@types/lodash", "npm:4.14.200"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@types/mdx", [\ ["npm:2.0.8", {\ "packageLocation": "./.yarn/cache/@types-mdx-npm-2.0.8-2f7694e8cf-4a7c2241c3.zip/node_modules/@types/mdx/",\ @@ -7997,6 +8008,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["@wojtekmaj/date-utils", [\ + ["npm:1.5.1", {\ + "packageLocation": "./.yarn/cache/@wojtekmaj-date-utils-npm-1.5.1-e21d58f022-ba28a0ba10.zip/node_modules/@wojtekmaj/date-utils/",\ + "packageDependencies": [\ + ["@wojtekmaj/date-utils", "npm:1.5.1"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@xtuc/ieee754", [\ ["npm:1.2.0", {\ "packageLocation": "./.yarn/cache/@xtuc-ieee754-npm-1.2.0-ec0ce4e025-ac56d4ca6e.zip/node_modules/@xtuc/ieee754/",\ @@ -9620,6 +9640,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["prettier", "npm:3.0.3"],\ ["prettier-plugin-tailwindcss", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:0.5.6"],\ ["react", "npm:18.2.0"],\ + ["react-calendar", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:4.6.1"],\ ["react-dom", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:18.2.0"],\ ["react-query", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:3.39.3"],\ ["recoil", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:0.7.7"],\ @@ -9861,6 +9882,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["clsx", [\ + ["npm:2.0.0", {\ + "packageLocation": "./.yarn/cache/clsx-npm-2.0.0-afafbbe44a-a2cfb2351b.zip/node_modules/clsx/",\ + "packageDependencies": [\ + ["clsx", "npm:2.0.0"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["co", [\ ["npm:4.6.0", {\ "packageLocation": "./.yarn/cache/co-npm-4.6.0-03f2d1feb6-5210d92230.zip/node_modules/co/",\ @@ -12786,6 +12816,17 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["get-user-locale", [\ + ["npm:2.3.1", {\ + "packageLocation": "./.yarn/cache/get-user-locale-npm-2.3.1-3a88ff749b-9c6b254ea0.zip/node_modules/get-user-locale/",\ + "packageDependencies": [\ + ["get-user-locale", "npm:2.3.1"],\ + ["@types/lodash.memoize", "npm:4.1.8"],\ + ["lodash.memoize", "npm:4.1.2"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["giget", [\ ["npm:1.1.2", {\ "packageLocation": "./.yarn/cache/giget-npm-1.1.2-5a01fa1d39-76ad0f7e79.zip/node_modules/giget/",\ @@ -15142,6 +15183,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["lodash.memoize", [\ + ["npm:4.1.2", {\ + "packageLocation": "./.yarn/cache/lodash.memoize-npm-4.1.2-0e6250041f-9ff3942fee.zip/node_modules/lodash.memoize/",\ + "packageDependencies": [\ + ["lodash.memoize", "npm:4.1.2"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["lodash.merge", [\ ["npm:4.6.2", {\ "packageLocation": "./.yarn/cache/lodash.merge-npm-4.6.2-77cb4416bf-ad580b4bdb.zip/node_modules/lodash.merge/",\ @@ -17522,6 +17572,37 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["react-calendar", [\ + ["npm:4.6.1", {\ + "packageLocation": "./.yarn/cache/react-calendar-npm-4.6.1-86ff8fbeeb-54e9414a79.zip/node_modules/react-calendar/",\ + "packageDependencies": [\ + ["react-calendar", "npm:4.6.1"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:4.6.1", {\ + "packageLocation": "./.yarn/__virtual__/react-calendar-virtual-78eaecb2d7/0/cache/react-calendar-npm-4.6.1-86ff8fbeeb-54e9414a79.zip/node_modules/react-calendar/",\ + "packageDependencies": [\ + ["react-calendar", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:4.6.1"],\ + ["@types/react", "npm:18.2.24"],\ + ["@types/react-dom", "npm:18.2.9"],\ + ["@wojtekmaj/date-utils", "npm:1.5.1"],\ + ["clsx", "npm:2.0.0"],\ + ["get-user-locale", "npm:2.3.1"],\ + ["prop-types", "npm:15.8.1"],\ + ["react", "npm:18.2.0"],\ + ["react-dom", "virtual:5c27e03dae35d0976fad331e8fffa55eb62b5bc849583336ab59ba9f7c56861263fd0502a76a9335956f901566959f012bae9b45f34a60bde556a5b21d514601#npm:18.2.0"],\ + ["tiny-warning", "npm:1.0.3"]\ + ],\ + "packagePeers": [\ + "@types/react-dom",\ + "@types/react",\ + "react-dom",\ + "react"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["react-colorful", [\ ["npm:5.6.1", {\ "packageLocation": "./.yarn/cache/react-colorful-npm-5.6.1-ba0c706357-e432b7cb0d.zip/node_modules/react-colorful/",\ @@ -19664,6 +19745,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["tiny-warning", [\ + ["npm:1.0.3", {\ + "packageLocation": "./.yarn/cache/tiny-warning-npm-1.0.3-750b7a07c4-da62c4acac.zip/node_modules/tiny-warning/",\ + "packageDependencies": [\ + ["tiny-warning", "npm:1.0.3"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["titleize", [\ ["npm:3.0.0", {\ "packageLocation": "./.yarn/cache/titleize-npm-3.0.0-7deac2f3a3-71fbbeabbf.zip/node_modules/titleize/",\ diff --git a/.yarn/cache/@types-lodash.memoize-npm-4.1.8-e79e24b861-dc2812ffeb.zip b/.yarn/cache/@types-lodash.memoize-npm-4.1.8-e79e24b861-dc2812ffeb.zip new file mode 100644 index 00000000..5568a87f Binary files /dev/null and b/.yarn/cache/@types-lodash.memoize-npm-4.1.8-e79e24b861-dc2812ffeb.zip differ diff --git a/.yarn/cache/@wojtekmaj-date-utils-npm-1.5.1-e21d58f022-ba28a0ba10.zip b/.yarn/cache/@wojtekmaj-date-utils-npm-1.5.1-e21d58f022-ba28a0ba10.zip new file mode 100644 index 00000000..c068ba73 Binary files /dev/null and b/.yarn/cache/@wojtekmaj-date-utils-npm-1.5.1-e21d58f022-ba28a0ba10.zip differ diff --git a/.yarn/cache/clsx-npm-2.0.0-afafbbe44a-a2cfb2351b.zip b/.yarn/cache/clsx-npm-2.0.0-afafbbe44a-a2cfb2351b.zip new file mode 100644 index 00000000..0671b4f4 Binary files /dev/null and b/.yarn/cache/clsx-npm-2.0.0-afafbbe44a-a2cfb2351b.zip differ diff --git a/.yarn/cache/get-user-locale-npm-2.3.1-3a88ff749b-9c6b254ea0.zip b/.yarn/cache/get-user-locale-npm-2.3.1-3a88ff749b-9c6b254ea0.zip new file mode 100644 index 00000000..1d7f8d64 Binary files /dev/null and b/.yarn/cache/get-user-locale-npm-2.3.1-3a88ff749b-9c6b254ea0.zip differ diff --git a/.yarn/cache/lodash.memoize-npm-4.1.2-0e6250041f-9ff3942fee.zip b/.yarn/cache/lodash.memoize-npm-4.1.2-0e6250041f-9ff3942fee.zip new file mode 100644 index 00000000..e443a77a Binary files /dev/null and b/.yarn/cache/lodash.memoize-npm-4.1.2-0e6250041f-9ff3942fee.zip differ diff --git a/.yarn/cache/react-calendar-npm-4.6.1-86ff8fbeeb-54e9414a79.zip b/.yarn/cache/react-calendar-npm-4.6.1-86ff8fbeeb-54e9414a79.zip new file mode 100644 index 00000000..1849e9c1 Binary files /dev/null and b/.yarn/cache/react-calendar-npm-4.6.1-86ff8fbeeb-54e9414a79.zip differ diff --git a/.yarn/cache/tiny-warning-npm-1.0.3-750b7a07c4-da62c4acac.zip b/.yarn/cache/tiny-warning-npm-1.0.3-750b7a07c4-da62c4acac.zip new file mode 100644 index 00000000..035c99ee Binary files /dev/null and b/.yarn/cache/tiny-warning-npm-1.0.3-750b7a07c4-da62c4acac.zip differ diff --git a/package.json b/package.json index 79d33f0a..b783a5aa 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "lodash": "^4.17.21", "next": "12.3.2", "react": "18.2.0", + "react-calendar": "^4.6.1", "react-dom": "18.2.0", "react-query": "^3.39.3", "recoil": "^0.7.7", diff --git a/pages/schedule/all.tsx b/pages/schedule/all.tsx new file mode 100644 index 00000000..11eb8479 --- /dev/null +++ b/pages/schedule/all.tsx @@ -0,0 +1,8 @@ +//모든 일정 페이지 +import All from "@schedule/components/All"; + +const create = () => { + return ; +}; + +export default create; diff --git a/pages/schedule/index.tsx b/pages/schedule/index.tsx new file mode 100644 index 00000000..f8cb5030 --- /dev/null +++ b/pages/schedule/index.tsx @@ -0,0 +1,9 @@ +// 내 일정 페이지 +import Main from "@schedule/components/Main"; +import React from "react"; + +const index = () => { + return
; +}; + +export default index; diff --git a/public/assets/schedule/calender.svg b/public/assets/schedule/calender.svg new file mode 100644 index 00000000..db3a1985 --- /dev/null +++ b/public/assets/schedule/calender.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/schedule/comment.svg b/public/assets/schedule/comment.svg new file mode 100644 index 00000000..9a45a69d --- /dev/null +++ b/public/assets/schedule/comment.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/schedule/delete_icon.svg b/public/assets/schedule/delete_icon.svg new file mode 100644 index 00000000..ec988b5c --- /dev/null +++ b/public/assets/schedule/delete_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/schedule/like.png b/public/assets/schedule/like.png new file mode 100644 index 00000000..b1be5d09 Binary files /dev/null and b/public/assets/schedule/like.png differ diff --git a/public/assets/schedule/location.svg b/public/assets/schedule/location.svg new file mode 100644 index 00000000..a28d4a6e --- /dev/null +++ b/public/assets/schedule/location.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/assets/schedule/marked.svg b/public/assets/schedule/marked.svg new file mode 100644 index 00000000..8ad6022e --- /dev/null +++ b/public/assets/schedule/marked.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/schedule/sample_img.png b/public/assets/schedule/sample_img.png new file mode 100644 index 00000000..3dfa1079 Binary files /dev/null and b/public/assets/schedule/sample_img.png differ diff --git a/src/schedule/components/All.tsx b/src/schedule/components/All.tsx new file mode 100644 index 00000000..8aa1a3a3 --- /dev/null +++ b/src/schedule/components/All.tsx @@ -0,0 +1,163 @@ +// 모든 일정 +import { defaultCardList } from "@schedule/const"; +import React, { useEffect, useState } from "react"; +import AllContent, { CardItemType } from "./AllContent"; +import InputCalender from "./InputCalender"; +import ScheduleHeader from "./ScheduleHeader"; +import ScheduleTab from "./ScheduleTab"; + +type TabType = "전체" | "진행 예정" | "진행중/완료 일정"; +interface DateProps { + start: Date | undefined; + end: Date | undefined; +} + +const All = () => { + const [tab, setTab] = useState("전체"); + const [cardList, setCardList] = useState(defaultCardList); + const [title, setTitle] = useState(""); + const [date, setDate] = useState({ + // TODO: 초기값을 undefined로 설정하면 warning이 발생 + start: undefined, + end: undefined, + }); + const [showCalendar, setShowCalendar] = useState({ + start: false, + end: false, + }); + + const handleCalendarClick = (type: "start" | "end") => { + setShowCalendar((prev) => ({ + start: type === "start" ? !prev.start : false, + end: type === "end" ? !prev.end : false, + })); + }; + + const handleStartDateChange = (newDate: Date) => { + setDate((prevDate) => ({ + ...prevDate, + start: newDate, + })); + handleCalendarClick("start"); + }; + + const handleEndDateChange = (newDate: Date) => { + setDate((prevDate) => ({ + ...prevDate, + end: newDate, + })); + handleCalendarClick("end"); + }; + + const onClickTab = (tab: string) => { + setTab(tab); + setShowCalendar({ + start: false, + end: false, + }); + setDate({ start: undefined, end: undefined }); + }; + + const onClickSearch = () => { + const searchData = { + title: title, + startDate: date.start, + endDate: date.end ?? new Date(), + }; + + console.log("searchData", searchData); + // TODO: API 요청 추가 ??? 아님 프론트에서 다시 필터 ??? <- 확인해야 함 + }; + + // tab으로 필터링 + const filteredInTab = (tab: string, dataList: CardItemType[]) => { + const currentDate = new Date(); + + if (tab === "진행 예정") { + return dataList.filter((item) => { + return new Date(item.durationStart) > currentDate; + }); + } else if (tab === "진행중/완료 일정") { + return dataList.filter((item) => { + return new Date(item.durationStart) <= currentDate; + }); + } else { + return dataList; + } + }; + + useEffect(() => { + setCardList(filteredInTab(tab, defaultCardList)); + }, [tab]); + + return ( + <> +
+ {/* 탭 */} + +
+ +
+ {/* 일정 탭 */} +
+ +
+
+ + {/* 일정 */} +
+ {/* 필터링 */} +
+
일정 제목
+
+ setTitle(e.target.value)} + /> +
+
+ 모집 기간 +
+ handleCalendarClick("start")} + handleDateChange={handleStartDateChange} + /> +
-
+ handleCalendarClick("end")} + handleDateChange={handleEndDateChange} + /> + +
+ + +
+ + ); +}; + +export default All; + +const allTabItems: Record<"title", TabType>[] = [ + { title: "전체" }, + { title: "진행 예정" }, + { title: "진행중/완료 일정" }, +]; 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; diff --git a/src/schedule/components/InputCalender.tsx b/src/schedule/components/InputCalender.tsx new file mode 100644 index 00000000..60b9ba84 --- /dev/null +++ b/src/schedule/components/InputCalender.tsx @@ -0,0 +1,45 @@ +import Image from "next/image"; +import Calendar from "react-calendar"; +import "react-calendar/dist/Calendar.css"; + +interface InputCalenderProps { + date: Date | undefined; + visible: boolean; + placeholder: string; + handleCalendarClick: () => void; + handleDateChange: (newDate: Date) => void; +} + +const InputCalender = ({ + date, + visible, + placeholder, + handleCalendarClick, + handleDateChange, +}: InputCalenderProps) => { + return ( +
+ +
+ calender +
+ {visible && ( +
+ +
+ )} +
+ ); +}; + +export default InputCalender; diff --git a/src/schedule/components/Main.tsx b/src/schedule/components/Main.tsx new file mode 100644 index 00000000..3a32aa40 --- /dev/null +++ b/src/schedule/components/Main.tsx @@ -0,0 +1,51 @@ +import React, { useState } from "react"; +import ScheduleHeader from "./ScheduleHeader"; +import ScheduleTab from "./ScheduleTab"; + +type TabType = + | "진행 예정" + | "진행 중" + | "진행 완료" + | "모집 중" + | "참여 신청" + | "보관"; + +const Main = () => { + const [tab, setTab] = useState("진행 예정"); + + const onClickTab = (tab: string) => { + setTab(tab); + }; + + return ( +
+
+ {/* 탭 */} + +
+ +
+ {/* 일정 탭 */} +
+ +
+
+
+ ); +}; + +export default Main; + +const allTabItems: Record<"title", TabType>[] = [ + { title: "진행 예정" }, + { title: "진행 중" }, + { title: "진행 완료" }, + { title: "모집 중" }, + { title: "참여 신청" }, + { title: "보관" }, +]; diff --git a/src/schedule/components/ScheduleCard.tsx b/src/schedule/components/ScheduleCard.tsx new file mode 100644 index 00000000..5b0ba1d0 --- /dev/null +++ b/src/schedule/components/ScheduleCard.tsx @@ -0,0 +1,151 @@ +// 일정 카드 컴포넌트 +import Image from "next/image"; +import { useState } from "react"; + +interface ScheduleCardProps { + idx: number; + 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; + onClickDelete: (i: number) => void; +} + +const ScheduleCard = ({ + idx, + theme, + img, + title, + content, + writer, + status, + location, + durationStart, + durationEnd, + createdAt, + like, + comment, + marked, + onClickDelete, +}: ScheduleCardProps) => { + const [isDelete, setIsDelete] = useState(false); + const handleDelete = () => { + setIsDelete((prev) => !prev); + }; + + return ( +
+ {isDelete && ( +
+
+
+
+ 취소 +
+
+
{ + handleDelete(); + onClickDelete(idx); + }} + > +
+ 삭제하기 +
+
+
+
+ )} + {/* 사진 및 테마 */} +
+
+
+ {theme} +
+
+ delete icon +
+
+ + {img ? ( + sample img + ) : ( +
+ 대표 이미지가 없어요 +
+ )} +
+ + {/* Content */} +
+
{title}
+
+ {durationStart}~{durationEnd} +
+
+ location + {location} +
+
작성일: {createdAt}
+
+ like + {like} + like + {comment} + like + {marked} +
+
+ {/* TODO: 일정 만들기로 라우팅 */} +
+ 일정 만들기 바로가기 +
+
+ ); +}; + +export default ScheduleCard; diff --git a/src/schedule/components/ScheduleHeader.tsx b/src/schedule/components/ScheduleHeader.tsx new file mode 100644 index 00000000..5c81b94a --- /dev/null +++ b/src/schedule/components/ScheduleHeader.tsx @@ -0,0 +1,52 @@ +import { useRouter } from "next/router"; + +const ScheduleHeader = () => { + const router = useRouter(); + + return ( +
+ {tabs.map((tab, i) => ( +
router.push(tab.path)} + > + {tab.title} +
+ ))} +
+ ); +}; + +export default ScheduleHeader; + +const tabs = [ + { + title: "내 일정", + path: "/schedule", + }, + { + title: "모든 일정", + path: "/schedule/all", + }, + { + title: "모집 일정", + path: "/schedule/recruitment", + }, + { + title: "참여 일정", + path: "/schedule/participation", + }, + { + title: "스크랩", + path: "/schedule/scrap", + }, + { + title: "나만의 아이템", + path: "/schedule/items", + }, +]; diff --git a/src/schedule/components/ScheduleTab.tsx b/src/schedule/components/ScheduleTab.tsx new file mode 100644 index 00000000..3fc085e2 --- /dev/null +++ b/src/schedule/components/ScheduleTab.tsx @@ -0,0 +1,41 @@ +// 일정 탭 컴포넌트 +import React from "react"; + +interface ScheduleTab { + tabTitle: string; + tabItems: Record<"title", string>[]; + currentTab: string; + onClickTab: (tab: string) => void; +} + +const ScheduleTab = ({ + tabTitle, + tabItems, + currentTab, + onClickTab, +}: ScheduleTab) => { + return ( + <> +
+ {tabTitle} +
+
+ {tabItems.map((tab, i) => ( +
onClickTab(tab.title)} + > + {tab.title} +
+ ))} +
+ + ); +}; + +export default ScheduleTab; diff --git a/src/schedule/const/index.ts b/src/schedule/const/index.ts new file mode 100644 index 00000000..d58d915c --- /dev/null +++ b/src/schedule/const/index.ts @@ -0,0 +1,20 @@ +export const defaultCardList = [ + { + theme: "캠핑 레져", + img: "/assets/schedule/sample_img.png", + title: "단풍구경 관악산 등반 하실 분?", + content: ` 관악산으로 토요일 오전 10시에 등산 일정 + + 연주대 12시 도착 및 12시부터 30분간 사진촬영 예정 / 2시에 서울대 + 방향으로 하산`, + writer: "명란마요", + status: true, + location: "관악구", + durationStart: "2023/11/07", + durationEnd: "2023/1", + createdAt: "2023/10/24", + like: 13, + comment: 5, + marked: 7, + }, +]; diff --git a/tsconfig.json b/tsconfig.json index 12b5292e..c272985f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,6 +20,7 @@ "@shared/*": ["shared/*"], "@login/*": ["login/*"], "@findid/*": ["findid/*"], + "@schedule/*": ["schedule/*"], "@notice/*": ["notice/*"], "@faq/*": ["faq/*"], "@mypage/*": ["mypage/*"] diff --git a/yarn.lock b/yarn.lock index ad0d4109..f08690f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4795,20 +4795,29 @@ __metadata: languageName: node linkType: hard -"@types/lodash@npm:^4.14.167": - version: 4.14.199 - resolution: "@types/lodash@npm:4.14.199" - checksum: e68d1fcbbfce953ed87b296a628573f62939227bcda0c934954e862b421e8a34c5e71cad6fea27b9980567909e6a4698f09025692958e36d64ea9ed99ec6fb2e +"@types/lodash.memoize@npm:^4.1.7": + version: 4.1.8 + resolution: "@types/lodash.memoize@npm:4.1.8" + dependencies: + "@types/lodash": "*" + checksum: dc2812ffebfd516965fc2713bb1fd97babf7672986b3c0785eaaf9e8d3e7d148b597399250d367a8ab32e66b4e1facd0ebea1d2b3e86e36eeb45aade8504a648 languageName: node linkType: hard -"@types/lodash@npm:^4.14.200": +"@types/lodash@npm:*, @types/lodash@npm:^4.14.200": version: 4.14.200 resolution: "@types/lodash@npm:4.14.200" checksum: 6471f8bb5da692a6ecf03a8da4935bfbc341e67ee9bcb4f5730bfacff0c367232548f0a01e8ac5ea18c6fe78fb085d502494e33ccb47a7ee87cbdee03b47d00d languageName: node linkType: hard +"@types/lodash@npm:^4.14.167": + version: 4.14.199 + resolution: "@types/lodash@npm:4.14.199" + checksum: e68d1fcbbfce953ed87b296a628573f62939227bcda0c934954e862b421e8a34c5e71cad6fea27b9980567909e6a4698f09025692958e36d64ea9ed99ec6fb2e + languageName: node + linkType: hard + "@types/mdx@npm:^2.0.0": version: 2.0.8 resolution: "@types/mdx@npm:2.0.8" @@ -5431,6 +5440,13 @@ __metadata: languageName: node linkType: hard +"@wojtekmaj/date-utils@npm:^1.1.3": + version: 1.5.1 + resolution: "@wojtekmaj/date-utils@npm:1.5.1" + checksum: ba28a0ba107838cabbef0bceccdb748cb4bfa75e7e7cebe8a5f711f475b4bc5e28b7f394cc6e650826fcec232ee98b39d02fe6a5df32e0526d4eca68609bab9a + languageName: node + linkType: hard + "@xtuc/ieee754@npm:^1.2.0": version: 1.2.0 resolution: "@xtuc/ieee754@npm:1.2.0" @@ -6718,6 +6734,7 @@ __metadata: prettier: ^3.0.3 prettier-plugin-tailwindcss: ^0.5.6 react: 18.2.0 + react-calendar: ^4.6.1 react-dom: 18.2.0 react-query: ^3.39.3 recoil: ^0.7.7 @@ -6937,6 +6954,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:^2.0.0": + version: 2.0.0 + resolution: "clsx@npm:2.0.0" + checksum: a2cfb2351b254611acf92faa0daf15220f4cd648bdf96ce369d729813b85336993871a4bf6978ddea2b81b5a130478339c20d9d0b5c6fc287e5147f0c059276e + languageName: node + linkType: hard + "co@npm:^4.6.0": version: 4.6.0 resolution: "co@npm:4.6.0" @@ -9374,6 +9398,16 @@ __metadata: languageName: node linkType: hard +"get-user-locale@npm:^2.2.1": + version: 2.3.1 + resolution: "get-user-locale@npm:2.3.1" + dependencies: + "@types/lodash.memoize": ^4.1.7 + lodash.memoize: ^4.1.1 + checksum: 9c6b254ea0eeb3ecc9e02140d5c3442b71cee76b6e0ed38ce2dffdc04fdc2286dd149aec06da3a69d8be3ed7b951cfc2aa1b95d4552b0b29541e418a6f2b6be0 + languageName: node + linkType: hard + "giget@npm:^1.0.0": version: 1.1.2 resolution: "giget@npm:1.1.2" @@ -11423,6 +11457,13 @@ __metadata: languageName: node linkType: hard +"lodash.memoize@npm:^4.1.1": + version: 4.1.2 + resolution: "lodash.memoize@npm:4.1.2" + checksum: 9ff3942feeccffa4f1fafa88d32f0d24fdc62fd15ded5a74a5f950ff5f0c6f61916157246744c620173dddf38d37095a92327d5fd3861e2063e736a5c207d089 + languageName: node + linkType: hard + "lodash.merge@npm:^4.6.2": version: 4.6.2 resolution: "lodash.merge@npm:4.6.2" @@ -13239,7 +13280,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": +"prop-types@npm:^15.6.0, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -13451,6 +13492,26 @@ __metadata: languageName: node linkType: hard +"react-calendar@npm:^4.6.1": + version: 4.6.1 + resolution: "react-calendar@npm:4.6.1" + dependencies: + "@wojtekmaj/date-utils": ^1.1.3 + clsx: ^2.0.0 + get-user-locale: ^2.2.1 + prop-types: ^15.6.0 + tiny-warning: ^1.0.0 + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 54e9414a79f9b113493c44caf4d6770b7c331acfaed255a1bbc68067ae0bb6ca3a5f2021e02686e178310f132a43d5eff9b11f4a28bcdbabd1d0675e72ba18f8 + languageName: node + linkType: hard + "react-colorful@npm:^5.1.2": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -15188,6 +15249,13 @@ __metadata: languageName: node linkType: hard +"tiny-warning@npm:^1.0.0": + version: 1.0.3 + resolution: "tiny-warning@npm:1.0.3" + checksum: da62c4acac565902f0624b123eed6dd3509bc9a8d30c06e017104bedcf5d35810da8ff72864400ad19c5c7806fc0a8323c68baf3e326af7cb7d969f846100d71 + languageName: node + linkType: hard + "titleize@npm:^3.0.0": version: 3.0.0 resolution: "titleize@npm:3.0.0"