From eb32533854a464575f37c427c59684918618703f Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Tue, 2 Jul 2024 16:23:35 +0900 Subject: [PATCH] =?UTF-8?q?#29=20feat:=20calander=20Modal=20api=20&=20UI?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/calendar.ts | 3 +- apis/hooks/calendar.ts | 4 +- components/NavBar.tsx | 1 - components/calendar/CalendarModal.tsx | 82 ++++++++++++++++++++++++- components/calendar/InfoCalendar.tsx | 17 ++++-- pages/calendar.tsx | 87 ++++++++++++++------------- 6 files changed, 138 insertions(+), 56 deletions(-) diff --git a/apis/calendar.ts b/apis/calendar.ts index 142ccb8..aa748c7 100644 --- a/apis/calendar.ts +++ b/apis/calendar.ts @@ -27,12 +27,13 @@ export type CalendarDate = { day: number; }; -interface GetProgramDetailBody { +export interface GetProgramDetailBody { programIdx: number; name: string; openDate: CalendarDate; dueDate: CalendarDate; location: string; + locatedPlace: string; host: string; schedule: string; description: string; diff --git a/apis/hooks/calendar.ts b/apis/hooks/calendar.ts index 4d35644..b615fb2 100644 --- a/apis/hooks/calendar.ts +++ b/apis/hooks/calendar.ts @@ -9,8 +9,6 @@ const useGetMonthCalendar = () => { return { data }; }; -export { useGetMonthCalendar }; - const useGetProgramDetail = (programIdx: number) => { const { data } = useQuery({ queryKey: ["getProgramDetail"], @@ -19,4 +17,4 @@ const useGetProgramDetail = (programIdx: number) => { return { data }; }; -export { useGetProgramDetail }; +export { useGetMonthCalendar, useGetProgramDetail }; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index ab19362..ed5274b 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -18,7 +18,6 @@ const NavBar = () => { return ( <> -
{ +import { GetProgramDetailBody } from "@/apis/calendar"; +import { useGetProgramDetail } from "@/apis/hooks/calendar"; +import Close from "@/public/svgs/Close.svg"; + +const CalendarModal = ({ + programIdx, + toggleModal, +}: { + programIdx: number; + toggleModal: () => {}; +}) => { + console.log(programIdx); + const { data }: { data: GetProgramDetailBody } = + useGetProgramDetail(programIdx); + console.log(data); + return ( -
-
{filterName}
+
+
+ +
{data.name}
+
+ {data.locatedPlace && ( + + )} + + + {data.openDate.year}년 {data.openDate.month}월 {data.openDate.day}일 + {" ~ "} + {data.dueDate.year}년 {data.dueDate.month}월 {data.dueDate.day}일 + + + + + {data.location && ( + + )} + +
+
); }; export default CalendarModal; + +interface TextProps { + title?: string; + className?: string; + children?: React.ReactNode; + addExpFront?: string; + addExpBack?: string; +} + +function TextLine({ + title, + className, + children, + addExpFront, + addExpBack, +}: TextProps) { + return ( +
+
{title}
+
+ {addExpFront} + {children} + {addExpBack} +
+
+ ); +} diff --git a/components/calendar/InfoCalendar.tsx b/components/calendar/InfoCalendar.tsx index 844eae7..629f3dd 100644 --- a/components/calendar/InfoCalendar.tsx +++ b/components/calendar/InfoCalendar.tsx @@ -6,7 +6,13 @@ import { useGetMonthCalendar } from "@/apis/hooks/calendar"; import { MonthCalendarProps } from "@/apis/calendar"; import Dot from "@/public/svgs/Dot.svg"; -export default function InfoCalendar({ filterTag }: { filterTag: string }) { +export default function InfoCalendar({ + filterTag, + toggleModalHandler, +}: { + filterTag: string; + toggleModalHandler: (programIdx: number) => void; +}) { type DatePiece = Date | null; type SelectedDate = DatePiece | [DatePiece, DatePiece]; @@ -20,7 +26,7 @@ export default function InfoCalendar({ filterTag }: { filterTag: string }) { const { data } = useGetMonthCalendar(); const handleDayDataClick = (programIdx: number) => { - console.log("API 호출: ", programIdx); + toggleModalHandler(programIdx); }; const customTileContent = ({ date, view }: { date: Date; view: string }) => { @@ -65,7 +71,7 @@ export default function InfoCalendar({ filterTag }: { filterTag: string }) { day.openDate.month - 1, day.openDate.day, ).getTime(); - // console.log(day); + return (
@@ -101,7 +107,6 @@ export default function InfoCalendar({ filterTag }: { filterTag: string }) { minDate={new Date(2024, 4, 1)} formatDay={(locale, date) => moment(date).format("DD")} tileContent={customTileContent} - tileDisabled={disableAllDates} />
@@ -232,8 +237,8 @@ const StyledCalendarWrapper = styled.div` .react-calendar__tile:enabled:hover, .react-calendar__tile:enabled:focus, .react-calendar__tile--active { - background: #f06459; - color: white; + background-color: #fff2f1; + color: #f06459; } /* 현재 날짜 */ diff --git a/pages/calendar.tsx b/pages/calendar.tsx index 09ec7d7..d3d7a5b 100644 --- a/pages/calendar.tsx +++ b/pages/calendar.tsx @@ -1,25 +1,15 @@ -import FlexBox from "@/components/Flexbox"; import HeadFunction from "@/components/HeadFunction"; import NavBar from "@/components/NavBar"; -import { useState, useEffect, useCallback, useRef } from "react"; -import FilterBox from "@/components/calendar/FilterBox"; +import { useState } from "react"; import InfoCalendar from "@/components/calendar/InfoCalendar"; import { NextPage } from "next"; +import CalendarModal from "@/components/calendar/CalendarModal"; -interface DropProps { - categoryDrop: boolean; - regionDrop: boolean; -} - +// tag 종류 const categories = ["카테고리", "운동", "예술", "학술", "기타"]; const locations = ["지역", "서울", "경기", "그 외"]; const CalendarPage: NextPage = () => { - const [isDrop, setIsDrop] = useState({ - categoryDrop: false, - regionDrop: false, - }); - const [isIndex, setIsIndex] = useState(-1); const [selected, setSelected] = useState(""); const handleSelect = (e) => { @@ -27,16 +17,26 @@ const CalendarPage: NextPage = () => { setSelected(e.target.value); }; - const toggleDrop = (dropName: string) => { - setIsDrop((prev: DropProps) => ({ ...prev, [dropName]: !prev[dropName] })); + //프로그램 상세 모달 용 + const [isModal, setIsModal] = useState(false); + const [modalIdx, setModalIdx] = useState(0); + const toggleModalHandler = (programIdx: number) => { + setModalIdx(programIdx); + setIsModal(!isModal); }; return ( -
- -
-
- {isDrop && ( + <> + {isModal ? ( + setIsModal(false)} + /> + ) : null} +
+ +
+
- )} - -
+ +
-
- +
+ +
-
- -
+ +
+ ); };