From eb32533854a464575f37c427c59684918618703f Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Tue, 2 Jul 2024 16:23:35 +0900 Subject: [PATCH 1/3] =?UTF-8?q?#29=20feat:=20calander=20Modal=20api=20&=20?= =?UTF-8?q?UI=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} +
+ +
+
- )} - -
+ +
-
- +
+ +
-
- -
+ +
+ ); }; From f1966520555b74c86f2f4f16093b7e5a2bbca29c Mon Sep 17 00:00:00 2001 From: leejin_rho Date: Tue, 2 Jul 2024 16:24:44 +0900 Subject: [PATCH 2/3] =?UTF-8?q?#29=20fix:=20console.log=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/calendar/CalendarModal.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/calendar/CalendarModal.tsx b/components/calendar/CalendarModal.tsx index 76db198..a65d991 100644 --- a/components/calendar/CalendarModal.tsx +++ b/components/calendar/CalendarModal.tsx @@ -9,10 +9,8 @@ const CalendarModal = ({ programIdx: number; toggleModal: () => {}; }) => { - console.log(programIdx); const { data }: { data: GetProgramDetailBody } = useGetProgramDetail(programIdx); - console.log(data); return (
Date: Tue, 2 Jul 2024 16:26:41 +0900 Subject: [PATCH 3/3] =?UTF-8?q?#29=20fix:=20=ED=83=80=EC=9E=85=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/calendar/CalendarModal.tsx | 2 +- components/calendar/InfoCalendar.tsx | 1 - pages/calendar.tsx | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/components/calendar/CalendarModal.tsx b/components/calendar/CalendarModal.tsx index a65d991..8cc70f8 100644 --- a/components/calendar/CalendarModal.tsx +++ b/components/calendar/CalendarModal.tsx @@ -7,7 +7,7 @@ const CalendarModal = ({ toggleModal, }: { programIdx: number; - toggleModal: () => {}; + toggleModal: () => void; }) => { const { data }: { data: GetProgramDetailBody } = useGetProgramDetail(programIdx); diff --git a/components/calendar/InfoCalendar.tsx b/components/calendar/InfoCalendar.tsx index 629f3dd..8a08804 100644 --- a/components/calendar/InfoCalendar.tsx +++ b/components/calendar/InfoCalendar.tsx @@ -32,7 +32,6 @@ export default function InfoCalendar({ const customTileContent = ({ date, view }: { date: Date; view: string }) => { if (Array.isArray(data) && view === "month") { let filteredData = data.filter((dayData: MonthCalendarProps) => { - console.log(filterTag); return dayData.category === filterTag || dayData.location === filterTag; }); diff --git a/pages/calendar.tsx b/pages/calendar.tsx index d3d7a5b..9136505 100644 --- a/pages/calendar.tsx +++ b/pages/calendar.tsx @@ -13,7 +13,6 @@ const CalendarPage: NextPage = () => { const [selected, setSelected] = useState(""); const handleSelect = (e) => { - console.log(selected); setSelected(e.target.value); };