#29 feat: calander Modal api & UI 구현

team-Ollie · Jul 2, 2024 · eb32533 · eb32533
1 parent b2ea71e
commit eb32533
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 56 deletions.
diff --git 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
@@ -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
@@ -18,7 +18,6 @@ const NavBar = () => {
 
   return (
     <>
-      <div className="w-full min-h-[4rem]" />
       <div
         className="flex flex-basis h-[4rem] w-full fixed inset-x-0 bottom-0 "
         style={{

diff --git a/components/calendar/CalendarModal.tsx b/components/calendar/CalendarModal.tsx
@@ -1,9 +1,85 @@
-const CalendarModal = ({ filterName }) => {
+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 (
-    <div className="w-fit h-[1.9rem] flex justify-center items-center bg-main-color rounded-3xl text-white py-[0.31rem] pl-[0.94rem] pr-[0.44rem] gap-0.5">
-      <div>{filterName}</div>
+    <div
+      className="w-screen h-full flex flex-col items-center justify-center fixed bg-[rgba(1,0,0,0.4)] z-10"
+      key={programIdx}
+    >
+      <div className="flex flex-col relative items-center justify-center w-[80%] h-[60%] bg-white z-10 rounded-xl py-5 px-8 gap-3">
+        <Close className="absolute right-3 top-3" onClick={toggleModal} />
+        <div className="h0 text-main-color h-fit">{data.name}</div>
+        <div className="flex flex-col mt-3 flex-grow h-full w-full gap-3 overflow-auto scrollbar-hide">
+          {data.locatedPlace && (
+            <TextLine title="위치" className="" children={data.locatedPlace} />
+          )}
+
+          <TextLine title="기간">
+            {data.openDate.year}년 {data.openDate.month}월 {data.openDate.day}일
+            {" ~ "}
+            {data.dueDate.year}년 {data.dueDate.month}월 {data.dueDate.day}일
+          </TextLine>
+
+          <TextLine title="주관센터" className="" children={data.host} />
+          <TextLine
+            title="활동 요일"
+            className=""
+            children={data.schedule}
+            addExpFront="매주 "
+            addExpBack="요일마다"
+          />
+          {data.location && (
+            <TextLine title="지역" className="" children={data.location} />
+          )}
+          <TextLine
+            title="기타 사항"
+            className=""
+            children={data.description}
+          />
+        </div>
+      </div>
     </div>
   );
 };
 
 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 (
+    <div className="flex flex-col gap-1">
+      <div className="h3">{title}</div>
+      <div className={`flex h4 ${className}`}>
+        {addExpFront}
+        {children}
+        {addExpBack}
+      </div>
+    </div>
+  );
+}
diff --git 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 (
                 <div key={index} className="flex flex-row items-center gap-1">
                   <Dot color={isOpen ? "#F06459" : "#8E8E93"} />
@@ -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}
         />
       </StyledCalendarWrapper>
     </div>
@@ -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
@@ -1,42 +1,42 @@
-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<DropProps>({
-    categoryDrop: false,
-    regionDrop: false,
-  });
-  const [isIndex, setIsIndex] = useState<number>(-1);
   const [selected, setSelected] = useState("");
 
   const handleSelect = (e) => {
     console.log(selected);
     setSelected(e.target.value);
   };
 
-  const toggleDrop = (dropName: string) => {
-    setIsDrop((prev: DropProps) => ({ ...prev, [dropName]: !prev[dropName] }));
+  //프로그램 상세 모달 용
+  const [isModal, setIsModal] = useState<Boolean>(false);
+  const [modalIdx, setModalIdx] = useState<number>(0);
+  const toggleModalHandler = (programIdx: number) => {
+    setModalIdx(programIdx);
+    setIsModal(!isModal);
   };
 
   return (
-    <div className="flex flex-col w-full h-screen pb-[4rem]">
-      <HeadFunction title="캘린더" />
-      <div className="flex flex-col flex-grow pt-[1.5rem] items-center overflow-auto scrollbar-hide">
-        <div className="h-fit w-full flex flex-row justify-start items-end px-[1rem] gap-3">
-          {isDrop && (
+    <>
+      {isModal ? (
+        <CalendarModal
+          programIdx={modalIdx}
+          toggleModal={() => setIsModal(false)}
+        />
+      ) : null}
+      <div className="flex flex-col w-full h-screen pb-[4rem]">
+        <HeadFunction title="캘린더" />
+        <div className="flex flex-col flex-grow pt-[1.5rem] items-center overflow-auto scrollbar-hide">
+          <div className="h-fit w-full flex flex-row justify-start items-end px-[1rem] gap-3">
             <select
               value={selected}
               onChange={handleSelect}
@@ -52,32 +52,35 @@ const CalendarPage: NextPage = () => {
                 </option>
               ))}
             </select>
-          )}
 
-          <select
-            value={selected}
-            onChange={handleSelect}
-            className="dropdown w-fit h-[1.9rem] flex justify-center items-center text-center bg-main-color rounded-3xl text-white py-[0.31rem] pl-[0.94rem] pr-[0.44rem] gap-0.5"
-          >
-            {locations.map((opt, index) => (
-              <option
-                key={index}
-                className="h3 cursor-pointer hover:bg-gray-100"
-                value={opt}
-              >
-                {opt}
-              </option>
-            ))}
-          </select>
-        </div>
+            <select
+              value={selected}
+              onChange={handleSelect}
+              className="dropdown w-fit h-[1.9rem] flex justify-center items-center text-center bg-main-color rounded-3xl text-white py-[0.31rem] pl-[0.94rem] pr-[0.44rem] gap-0.5"
+            >
+              {locations.map((opt, index) => (
+                <option
+                  key={index}
+                  className="h3 cursor-pointer hover:bg-gray-100"
+                  value={opt}
+                >
+                  {opt}
+                </option>
+              ))}
+            </select>
+          </div>
 
-        <div className="flex w-full">
-          <InfoCalendar filterTag={selected} />
+          <div className="flex w-full">
+            <InfoCalendar
+              filterTag={selected}
+              toggleModalHandler={toggleModalHandler}
+            />
+          </div>
         </div>
-      </div>
 
-      <NavBar />
-    </div>
+        <NavBar />
+      </div>
+    </>
   );
 };