From d1b7ac79ce7940d4984c912a761d580aa490e908 Mon Sep 17 00:00:00 2001
From: leejin_rho <tbdpapdl@gmail.com>
Date: Sun, 30 Jun 2024 18:00:45 +0900
Subject: [PATCH 01/14] =?UTF-8?q?fix:=20InfoCalendar=20UI=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/calendar/FilterBox.tsx    | 13 ++++++--
 components/calendar/InfoCalendar.tsx | 16 ++++++++--
 pages/calendar.tsx                   | 44 +++++++++++++++++++++++++---
 pages/login.tsx                      |  2 +-
 4 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/components/calendar/FilterBox.tsx b/components/calendar/FilterBox.tsx
index 40f728f..b0d1088 100644
--- a/components/calendar/FilterBox.tsx
+++ b/components/calendar/FilterBox.tsx
@@ -1,8 +1,17 @@
 import FilterArrow from "@/public/svgs/FilterArrow.svg";
 
-const FilterBox = ({ filterName }) => {
+const FilterBox = ({
+  filterName,
+  onClick,
+}: {
+  filterName: string;
+  onClick: () => void;
+}) => {
   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
+      onClick={onClick}
+      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>
       <FilterArrow />
     </div>
diff --git a/components/calendar/InfoCalendar.tsx b/components/calendar/InfoCalendar.tsx
index 381d1c5..e2f6dcc 100644
--- a/components/calendar/InfoCalendar.tsx
+++ b/components/calendar/InfoCalendar.tsx
@@ -80,7 +80,7 @@ export default function InfoCalendar() {
   };
 
   return (
-    <div className="flex justify-center items-center">
+    <div className="flex justify-center items-center flex-grow w-full h-full">
       <StyledCalendarWrapper>
         <Calendar
           onChange={onChangeToday}
@@ -113,9 +113,10 @@ const StyledCalendarWrapper = styled.div`
     /* position: absolute; */
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     z-index: 1;
     gap: 1px;
+    height: 100%;
   }
 
   .custom-tile-text {
@@ -124,6 +125,13 @@ const StyledCalendarWrapper = styled.div`
     flex-wrap: wrap;
   }
 
+  .react-calendar__viewContainer {
+    display: flex;
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
+  }
+
   /* 년도, 월 */
   .react-calendar__navigation {
     display: flex;
@@ -158,6 +166,7 @@ const StyledCalendarWrapper = styled.div`
 
   .react-calendar__month-view__days {
     border: 0.5px rgba(244, 138, 130, 0.16) solid;
+    height: 100%;
   }
 
   .react-calendar__month-view__days__day--neighboringMonth
@@ -184,6 +193,7 @@ const StyledCalendarWrapper = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 100%;
   }
 
   .react-calendar__month-view__weekdays {
@@ -197,7 +207,7 @@ const StyledCalendarWrapper = styled.div`
   .react-calendar__tile {
     text-align: center;
     width: 2.5rem;
-    height: 6.6rem;
+    height: 5.69rem;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
diff --git a/pages/calendar.tsx b/pages/calendar.tsx
index 303a9bb..d94862d 100644
--- a/pages/calendar.tsx
+++ b/pages/calendar.tsx
@@ -1,24 +1,60 @@
 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 InfoCalendar from "@/components/calendar/InfoCalendar";
 import { NextPage } from "next";
 
+interface DropProps {
+  categoryDrop: boolean;
+  regionDrop: boolean;
+}
+
+const options = ["Option 1", "Option 2", "Option 3"];
+
 const CalendarPage: NextPage = () => {
   const date = new Date();
   console.log(date);
+
+  const [isDrop, setIsDrop] = useState<DropProps>({
+    categoryDrop: false,
+    regionDrop: false,
+  });
+
   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-[2rem] gap-3">
-          <FilterBox filterName="카테고리" />
-          <FilterBox filterName="지역" />
+          <FilterBox
+            filterName="카테고리"
+            onClick={() => {
+              setIsDrop(!isDrop);
+            }}
+          />
+          {isDrop ? (
+            <ul className="absolute">
+              {options.map((option, index) => (
+                <li
+                  key={index}
+                  className="cursor-pointer hover:bg-gray-200 p-2"
+                  onClick={() => {}}
+                >
+                  {option}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+          <FilterBox
+            filterName="지역"
+            onClick={() => {
+              console.log("지역");
+            }}
+          />
         </div>
 
-        <div className="flex mt-[0rem]">
+        <div className="flex w-full">
           <InfoCalendar />
         </div>
       </div>
diff --git a/pages/login.tsx b/pages/login.tsx
index 6543f99..dcfdb24 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -92,7 +92,7 @@ const Login: NextPage = () => {
           <Button
             text="로그인"
             style="w-full bg-main-100 py-[0.8rem] h2 text-gray-700"
-            onClick={() => {}}
+            onClick={onSubmit}
           />
         </button>
       </form>

From ef75a707a9cfc6474afd170234221779704f96fa Mon Sep 17 00:00:00 2001
From: leejin_rho <tbdpapdl@gmail.com>
Date: Mon, 1 Jul 2024 16:23:19 +0900
Subject: [PATCH 02/14] =?UTF-8?q?feat:=20challengeDetail=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20calendar=20api=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/calendar.ts                           |  1 -
 apis/challenge.ts                          | 20 +++++-
 apis/hooks/challenge.ts                    | 12 +++-
 components/challenge/ChallengeCalendar.tsx | 39 +++++++----
 pages/calendar.tsx                         | 77 ++++++++++++++--------
 5 files changed, 105 insertions(+), 44 deletions(-)

diff --git a/apis/calendar.ts b/apis/calendar.ts
index 19d1183..49181e3 100644
--- a/apis/calendar.ts
+++ b/apis/calendar.ts
@@ -48,6 +48,5 @@ export const getProgramDetail = async (
 ): Promise<GetProgramDetailBody> => {
   // const response = await client.get(`/programs/${programIdx}`);
   const response = await client.get(`/programs/2`);
-  // console.log("calenderDetail", response.data.result);
   return response.data.result;
 };
diff --git a/apis/challenge.ts b/apis/challenge.ts
index 4eea8ac..ff79fbf 100644
--- a/apis/challenge.ts
+++ b/apis/challenge.ts
@@ -18,4 +18,22 @@ async function getMyChallengeList(): Promise<GetMyChallengeListResponse> {
   return data;
 }
 
-export { getMyChallengeList };
+type AttendanceDate = {
+  year: number;
+  month: number;
+  day: number;
+};
+
+export interface GetChallengeDetailBody {
+  attendanceDate: AttendanceDate;
+}
+
+async function getChallengDetail(): Promise<GetChallengeDetailBody> {
+  const response = await client.get(
+    `/challenges/attendance/2?year=2024&month=6`,
+  );
+  // console.log("challengeData", response.data.result);
+  return response.data.result;
+}
+
+export { getMyChallengeList, getChallengDetail };
diff --git a/apis/hooks/challenge.ts b/apis/hooks/challenge.ts
index 0ab0369..80128a4 100644
--- a/apis/hooks/challenge.ts
+++ b/apis/hooks/challenge.ts
@@ -1,4 +1,4 @@
-import { getMyChallengeList } from "../challenge";
+import { getMyChallengeList, getChallengDetail } from "../challenge";
 import { useQuery } from "@tanstack/react-query";
 
 function useGetMyChallengeList() {
@@ -10,4 +10,12 @@ function useGetMyChallengeList() {
   return { data };
 }
 
-export { useGetMyChallengeList };
+function useGetChallengeDetail() {
+  const { data } = useQuery({
+    queryKey: ["getChallengeDetail"],
+    queryFn: getChallengDetail,
+  });
+  return { data };
+}
+
+export { useGetMyChallengeList, useGetChallengeDetail };
diff --git a/components/challenge/ChallengeCalendar.tsx b/components/challenge/ChallengeCalendar.tsx
index 0e78857..ccc5287 100644
--- a/components/challenge/ChallengeCalendar.tsx
+++ b/components/challenge/ChallengeCalendar.tsx
@@ -2,6 +2,8 @@ import Calendar from "react-calendar";
 import { useState } from "react";
 import styled from "styled-components";
 import LogoMark from "@/public/svgs/LogoMark.svg";
+import { useGetChallengeDetail } from "@/apis/hooks/challenge";
+import { GetChallengeDetailBody } from "@/apis/challenge";
 
 export default function ChallengeCalendar() {
   type DatePiece = Date | null;
@@ -13,18 +15,29 @@ export default function ChallengeCalendar() {
     setClickedDate(clickedDate);
   };
 
-  const customTileContent = ({ date, view }) => {
-    // if (view === 'month' && DatesList.some(d => d.getTime() === date.getTime())) {
-
-    const customDate = new Date(2024, 5, 19);
-    if (view === "month" && date.getTime() === customDate.getTime()) {
-      return (
-        <div className="custom-tile-content">
-          <div className="custom-image">
-            <LogoMark width="2.75rem" height="2.75rem" />
+  // API 관리
+  const { data } = useGetChallengeDetail();
+
+  const customTileContent = ({ date, view }: { date: Date; view: string }) => {
+    if (Array.isArray(data) && view === "month") {
+      const matchedData = data.find((challenge: GetChallengeDetailBody) => {
+        const attendanceDate = new Date(
+          challenge.attendanceDate.year,
+          challenge.attendanceDate.month - 1,
+          challenge.attendanceDate.day,
+        );
+        return attendanceDate.getTime() === date.getTime();
+      });
+
+      if (matchedData) {
+        return (
+          <div className="custom-tile-content">
+            <div className="custom-image">
+              <LogoMark width="2.75rem" height="2.75rem" />
+            </div>
           </div>
-        </div>
-      );
+        );
+      }
     }
     return null;
   };
@@ -158,8 +171,8 @@ const StyledCalendarWrapper = styled.div`
   /* 일 */
   .react-calendar__tile {
     text-align: center;
-    width: 2.5rem;
-    height: 3.75rem;
+    width: 3.25rem;
+    height: 3.25rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/pages/calendar.tsx b/pages/calendar.tsx
index d94862d..b071487 100644
--- a/pages/calendar.tsx
+++ b/pages/calendar.tsx
@@ -11,7 +11,8 @@ interface DropProps {
   regionDrop: boolean;
 }
 
-const options = ["Option 1", "Option 2", "Option 3"];
+const categories = ["운동", "예술", "학술"];
+const locations = ["서울", "경기", "그 외"];
 
 const CalendarPage: NextPage = () => {
   const date = new Date();
@@ -22,36 +23,58 @@ const CalendarPage: NextPage = () => {
     regionDrop: false,
   });
 
+  const toggleDrop = (dropName: string) => {
+    setIsDrop((prev: DropProps) => ({ ...prev, [dropName]: !prev[dropName] }));
+  };
+
   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-[2rem] gap-3">
-          <FilterBox
-            filterName="카테고리"
-            onClick={() => {
-              setIsDrop(!isDrop);
-            }}
-          />
-          {isDrop ? (
-            <ul className="absolute">
-              {options.map((option, index) => (
-                <li
-                  key={index}
-                  className="cursor-pointer hover:bg-gray-200 p-2"
-                  onClick={() => {}}
-                >
-                  {option}
-                </li>
-              ))}
-            </ul>
-          ) : null}
-          <FilterBox
-            filterName="지역"
-            onClick={() => {
-              console.log("지역");
-            }}
-          />
+        <div className="h-fit w-full flex flex-row justify-start items-end px-[1rem] gap-3">
+          <div>
+            <FilterBox
+              filterName="카테고리"
+              onClick={() => {
+                toggleDrop("categoryDrop");
+                console.log("category");
+              }}
+            />
+            {isDrop.categoryDrop ? (
+              <ul className="absolute top-[8rem]">
+                {categories.map((option, index) => (
+                  <li
+                    key={index}
+                    className="cursor-pointer hover:bg-gray-200 p-2"
+                    onClick={() => {}}
+                  >
+                    {option}
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
+          <div>
+            <FilterBox
+              filterName="지역"
+              onClick={() => {
+                setIsDrop({ ...isDrop, regionDrop: !isDrop.regionDrop });
+              }}
+            />
+            {isDrop.regionDrop ? (
+              <ul className="absolute top-[8rem]">
+                {locations.map((option, index) => (
+                  <li
+                    key={index}
+                    className="cursor-pointer hover:bg-gray-200 p-2"
+                    onClick={() => {}}
+                  >
+                    {option}
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
         </div>
 
         <div className="flex w-full">

From aa897e94ec3d42424fa443229369270b4332c94d Mon Sep 17 00:00:00 2001
From: leejin_rho <tbdpapdl@gmail.com>
Date: Mon, 1 Jul 2024 16:29:36 +0900
Subject: [PATCH 03/14] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=98=A4=EB=A5=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/login.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/login.tsx b/pages/login.tsx
index dcfdb24..6543f99 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -92,7 +92,7 @@ const Login: NextPage = () => {
           <Button
             text="로그인"
             style="w-full bg-main-100 py-[0.8rem] h2 text-gray-700"
-            onClick={onSubmit}
+            onClick={() => {}}
           />
         </button>
       </form>

From 72767d6b95280d5a1e9f2e9632683a59f37c4aff Mon Sep 17 00:00:00 2001
From: iOdiO89 <117376841+iOdiO89@users.noreply.github.com>
Date: Mon, 1 Jul 2024 21:31:41 +0900
Subject: [PATCH 04/14] =?UTF-8?q?fix:=20=ED=94=84=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EB=9E=A8=20=EB=93=B1=EB=A1=9D=EC=8B=9C=20=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?Dropdown=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/challenge/ChallengeInput.tsx | 23 ++++++++++++++----
 package.json                            |  1 +
 pages/_app.tsx                          |  1 +
 styles/dropdown.css                     | 31 +++++++++++++++++++++++++
 yarn.lock                               | 20 ++++++++++++++++
 5 files changed, 71 insertions(+), 5 deletions(-)
 create mode 100644 styles/dropdown.css

diff --git a/components/challenge/ChallengeInput.tsx b/components/challenge/ChallengeInput.tsx
index b4abce2..2592b19 100644
--- a/components/challenge/ChallengeInput.tsx
+++ b/components/challenge/ChallengeInput.tsx
@@ -1,10 +1,15 @@
 import FlexBox from "../Flexbox";
 import TextInput, { TextInputProps } from "../Input";
 import TextArea from "../TextArea";
+import Dropdown from "react-dropdown";
+import "react-dropdown/style.css";
+
+const locationOptions = ["서울", "경기", "그 외"];
+const typeOptions = ["학술", "운동", "예술", "기타"];
 
 interface ChallengeInputProps extends TextInputProps {
   title: string;
-  inputType: "text" | "calendar" | "textarea";
+  inputType: "text" | "calendar" | "textarea" | "dropdown";
   value2?: string;
   setValue2?: React.Dispatch<React.SetStateAction<string>>;
 }
@@ -42,16 +47,24 @@ export default function ChallengeInput({
               isError={false}
               type="date"
             />
-            <span className="h3 text-gray-700">~</span>
+            <span className="h3 text-grey-700">~</span>
             <TextInput
-              value={value}
-              setValue={setValue}
+              value={value2}
+              setValue={setValue2}
               isError={false}
               type="date"
             />
           </FlexBox>
         );
         break;
+      case "dropdown":
+        return (
+          <FlexBox className="w-full justify-between gap-2 text-Black">
+            <Dropdown options={locationOptions} placeholder="지역" />
+            <Dropdown options={typeOptions} placeholder="종류" />
+          </FlexBox>
+        );
+        break;
       default:
         return (
           <TextArea
@@ -66,7 +79,7 @@ export default function ChallengeInput({
   };
 
   return (
-    <FlexBox className="w-full gap-1 items-start" direction="col">
+    <FlexBox className="w-full items-start" direction="col">
       <div className="h4">{title}</div>
       {returnInput()}
     </FlexBox>
diff --git a/package.json b/package.json
index 4fa7dec..5548edc 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "react": "^18.2.0",
     "react-calendar": "^5.0.0",
     "react-dom": "^18.2.0",
+    "react-dropdown": "^1.11.0",
     "react-modal": "^3.16.1",
     "react-query": "^3.39.3",
     "react-toastify": "^10.0.5",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 31bfd2f..3d16134 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,5 @@
 import "@/styles/globals.css";
+import "@/styles/dropdown.css";
 import "@/styles/toast.css";
 import "public/fonts/font.css";
 // import "@/styles/Calendar.css";
diff --git a/styles/dropdown.css b/styles/dropdown.css
new file mode 100644
index 0000000..f3a382e
--- /dev/null
+++ b/styles/dropdown.css
@@ -0,0 +1,31 @@
+.Dropdown-root {
+  width: 100%;
+
+  .Dropdown-control {
+    border-radius: 12px;
+    border: none;
+    background-color: #f2f2f7;
+    font-family: "Pretendard";
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 400;
+  }
+
+  .Dropdown-placeholder {
+    color: #aeaeb2;
+  }
+
+  .is-selected {
+    color: #000;
+  }
+
+  .Dropdown-menu {
+    font-family: "Pretendard";
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 400;
+    border-radius: 12px;
+    margin-top: 0;
+    border: 1px solid #c7c7cc;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 0bf0778..318bbd2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3110,6 +3110,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classnames@npm:^2.2.3":
+  version: 2.5.1
+  resolution: "classnames@npm:2.5.1"
+  checksum: 10c0/afff4f77e62cea2d79c39962980bf316bacb0d7c49e13a21adaadb9221e1c6b9d3cdb829d8bb1b23c406f4e740507f37e1dcf506f7e3b7113d17c5bab787aa69
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -6517,6 +6524,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dropdown@npm:^1.11.0":
+  version: 1.11.0
+  resolution: "react-dropdown@npm:1.11.0"
+  dependencies:
+    classnames: "npm:^2.2.3"
+  peerDependencies:
+    react: ^0.14.7 || ^15.0.0-0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^0.14.7 || ^15.0.0-0 || ^16.0.0 || ^17.0.0|| ^18.0.0
+  checksum: 10c0/3a4e64443ac19aef4fd9500197706143e0b421670d56a874d164edd200446c194787f4f30040c1f4e2df2a540ea08db0eb1dd718b8985bc6da41dc4029c719d0
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -7687,6 +7706,7 @@ __metadata:
     react: "npm:^18.2.0"
     react-calendar: "npm:^5.0.0"
     react-dom: "npm:^18.2.0"
+    react-dropdown: "npm:^1.11.0"
     react-modal: "npm:^3.16.1"
     react-query: "npm:^3.39.3"
     react-toastify: "npm:^10.0.5"

From 4d6e8e9693ea7cd894b758862eefdab439f86f07 Mon Sep 17 00:00:00 2001
From: iOdiO89 <117376841+iOdiO89@users.noreply.github.com>
Date: Mon, 1 Jul 2024 21:32:11 +0900
Subject: [PATCH 05/14] =?UTF-8?q?fix:=20navbar=20absolute=20>=20fixed?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9E=AC=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/NavBar.tsx | 71 ++++++++++++++++++++++---------------------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 0b58248..ab19362 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -9,50 +9,51 @@ import FlexBox from "./Flexbox";
 const NavBar = () => {
   const router = useRouter();
   const pathname = router.pathname;
-
   const handleNavigate = (path: string) => {
     router.push(path);
   };
-
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
 
   return (
-    <div
-      className="flex flex-basis h-[4rem] w-full absolute inset-x-0 bottom-0 z-50"
-      style={{
-        borderTop: "0.5px solid rgba(112, 115, 124, 0.16)",
-        backgroundColor: "#ffffff",
-      }}
-    >
-      <div className="flex flex-basis h-full w-full flex-row justify-between items-center ">
-        <NavBarItem
-          isActive={pathname === "/"}
-          text="홈"
-          onClick={() => handleNavigate("/")}
-          iconType="home"
-        >
-          <HomeIcon />
-        </NavBarItem>
-        <NavBarItem
-          isActive={pathname === "/calendar"}
-          text="캘린더"
-          onClick={() => handleNavigate("/calendar")}
-          iconType="calendar"
-        >
-          <CalenderIcon />
-        </NavBarItem>
-        <NavBarItem
-          isActive={pathname === "/mypage"}
-          text="마이페이지"
-          onClick={() => handleNavigate("/mypage")}
-          iconType="mypage"
-        >
-          <MypageIcon />
-        </NavBarItem>
+    <>
+      <div className="w-full min-h-[4rem]" />
+      <div
+        className="flex flex-basis h-[4rem] w-full fixed inset-x-0 bottom-0 "
+        style={{
+          borderTop: "0.5px solid rgba(112, 115, 124, 0.16)",
+          backgroundColor: "#ffffff",
+        }}
+      >
+        <FlexBox className="w-full justify-between">
+          <NavBarItem
+            isActive={pathname === "/"}
+            text="홈"
+            onClick={() => handleNavigate("/")}
+            iconType="home"
+          >
+            <HomeIcon />
+          </NavBarItem>
+          <NavBarItem
+            isActive={pathname === "/calendar"}
+            text="캘린더"
+            onClick={() => handleNavigate("/calendar")}
+            iconType="calendar"
+          >
+            <CalenderIcon />
+          </NavBarItem>
+          <NavBarItem
+            isActive={pathname === "/mypage"}
+            text="마이페이지"
+            onClick={() => handleNavigate("/mypage")}
+            iconType="mypage"
+          >
+            <MypageIcon />
+          </NavBarItem>
+        </FlexBox>
       </div>
-    </div>
+    </>
   );
 };
 

From 065fc84764a4b8a6da0cc54b72d7725bf29337d0 Mon Sep 17 00:00:00 2001
From: iOdiO89 <117376841+iOdiO89@users.noreply.github.com>
Date: Mon, 1 Jul 2024 21:41:27 +0900
Subject: [PATCH 06/14] =?UTF-8?q?refactor:=20admin=20=EC=97=AC=EB=B6=80?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20challenge=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/home/adminChallenge.tsx | 58 ++++++++++++++++++++++++++++++
 components/home/challenge.tsx      | 25 +++++--------
 components/home/challengeBox.tsx   | 29 ++++++++++-----
 3 files changed, 87 insertions(+), 25 deletions(-)
 create mode 100644 components/home/adminChallenge.tsx

diff --git a/components/home/adminChallenge.tsx b/components/home/adminChallenge.tsx
new file mode 100644
index 0000000..1fde549
--- /dev/null
+++ b/components/home/adminChallenge.tsx
@@ -0,0 +1,58 @@
+import { NextPage } from "next";
+import FlexBox from "../Flexbox";
+import { useRouter } from "next/router";
+import { Challenge as ChallengeType } from "@/apis/challenge";
+import { usePostAttendanceCode } from "@/apis/hooks/admin";
+
+interface ChallengeProps {
+  setIsModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  challengeInfo: ChallengeType;
+}
+
+const AdminChallenge: NextPage<ChallengeProps> = ({
+  setIsModalVisible,
+  challengeInfo,
+}) => {
+  const router = useRouter();
+  const { mutate } = usePostAttendanceCode(challengeInfo.challengeIdx);
+
+  const showAttendanceCode = () => mutate();
+
+  return (
+    <FlexBox direction="col" className="p-4 w-full rounded-lg border gap-4">
+      <FlexBox direction="col" className="w-full gap-1">
+        <FlexBox className="w-full justify-between items-start">
+          <div className="h2">{challengeInfo.name}</div>
+        </FlexBox>
+        <div className="h4 self-start">
+          {challengeInfo.location} | {challengeInfo.schedule}
+        </div>
+      </FlexBox>
+      <FlexBox direction="col" className="w-full gap-2">
+        <FlexBox className="gap-1 w-full">
+          <div className="h5 text-gray-500">전체달성률</div>
+          <div className="h3">
+            {challengeInfo.totalAttendanceRate}%(
+            {challengeInfo.participantsNum}명)
+          </div>
+        </FlexBox>
+        <FlexBox className="w-full gap-2">
+          <div
+            className="w-full border border-main-color rounded-lg py-2 text-center text-main-color h3"
+            onClick={showAttendanceCode}
+          >
+            인증번호 보기
+          </div>
+          <div
+            className="w-full border border-main-color rounded-lg py-2 text-center text-main-color h3"
+            onClick={() => router.push("/challenge")}
+          >
+            현황 보러가기
+          </div>
+        </FlexBox>
+      </FlexBox>
+    </FlexBox>
+  );
+};
+
+export default AdminChallenge;
diff --git a/components/home/challenge.tsx b/components/home/challenge.tsx
index 29f068d..7e7383c 100644
--- a/components/home/challenge.tsx
+++ b/components/home/challenge.tsx
@@ -1,8 +1,6 @@
 import { NextPage } from "next";
 import FlexBox from "../Flexbox";
 import { useRouter } from "next/router";
-import { useAtom } from "jotai";
-import { isAdminAtom } from "@/utils/atom";
 import { Challenge as ChallengeType } from "@/apis/challenge";
 
 interface ChallengeProps {
@@ -15,14 +13,13 @@ const Challenge: NextPage<ChallengeProps> = ({
   challengeInfo,
 }) => {
   const router = useRouter();
-  const [isAdmin] = useAtom(isAdminAtom);
 
   return (
     <FlexBox direction="col" className="p-4 w-full rounded-lg border gap-4">
       <FlexBox
         direction="col"
         className="w-full gap-1"
-        onClick={isAdmin ? null : () => router.push("/challenge")}
+        onClick={() => router.push("/challenge")}
       >
         <FlexBox className="w-full justify-between items-start">
           <div className="h2">{challengeInfo.name}</div>
@@ -37,14 +34,12 @@ const Challenge: NextPage<ChallengeProps> = ({
       <FlexBox direction="col" className="w-full gap-1">
         <FlexBox
           className="w-full items-start justify-between"
-          onClick={isAdmin ? null : () => router.push("/challenge")}
+          onClick={() => router.push("/challenge")}
         >
-          {!isAdmin && (
-            <FlexBox className="gap-1">
-              <div className="h5 text-gray-500">개인달성률</div>
-              <div className="h3">{challengeInfo.attendanceRate}%</div>
-            </FlexBox>
-          )}
+          <FlexBox className="gap-1">
+            <div className="h5 text-gray-500">개인달성률</div>
+            <div className="h3">{challengeInfo.attendanceRate}%</div>
+          </FlexBox>
           <FlexBox className="gap-1">
             <div className="h5 text-gray-500">전체달성률</div>
             <div className="h3">{challengeInfo.totalAttendanceRate}%</div>
@@ -52,13 +47,9 @@ const Challenge: NextPage<ChallengeProps> = ({
         </FlexBox>
         <div
           className="w-full border border-main-color rounded-lg py-2 text-center text-main-color h2"
-          onClick={
-            isAdmin
-              ? () => router.push("/challenge")
-              : () => setIsModalVisible(true)
-          }
+          onClick={() => setIsModalVisible(true)}
         >
-          {isAdmin ? "현황 보러가기" : "인증하기"}
+          인증하기
         </div>
       </FlexBox>
     </FlexBox>
diff --git a/components/home/challengeBox.tsx b/components/home/challengeBox.tsx
index aae9041..f9970cf 100644
--- a/components/home/challengeBox.tsx
+++ b/components/home/challengeBox.tsx
@@ -10,6 +10,7 @@ import { useState } from "react";
 import ReactModal from "react-modal";
 import Image from "next/image";
 import { useGetMyChallengeList } from "@/apis/hooks/challenge";
+import AdminChallenge from "./adminChallenge";
 
 interface HomeChallengeProps {
   onNotify: (msg: string) => void;
@@ -30,17 +31,29 @@ const HomeChallenge: NextPage<HomeChallengeProps> = ({ onNotify }) => {
       <HomeCarousel />
       <div
         className="w-full text-center bg-main-100 rounded-lg py-2 h2 text-gray-700"
-        onClick={() => router.push("/challenge/join")}
+        onClick={() =>
+          isAdmin
+            ? router.push("/challenge/add")
+            : router.push("/challenge/join")
+        }
       >
         {isAdmin ? "새 프로그램 등록" : "참여 프로그램 추가"}
       </div>
-      {challengeInfo?.result.map((info) => (
-        <Challenge
-          setIsModalVisible={setIsOpen}
-          challengeInfo={info}
-          key={info.challengeIdx}
-        />
-      ))}
+      {challengeInfo?.result.map((info) =>
+        isAdmin ? (
+          <AdminChallenge
+            setIsModalVisible={setIsOpen}
+            challengeInfo={info}
+            key={info.challengeIdx}
+          />
+        ) : (
+          <Challenge
+            setIsModalVisible={setIsOpen}
+            challengeInfo={info}
+            key={info.challengeIdx}
+          />
+        ),
+      )}
       <ReactModal
         isOpen={isOpen}
         style={modalStyle}

From 6968ffa98c8dfb3390411a6b1e1037c721e904c9 Mon Sep 17 00:00:00 2001
From: iOdiO89 <117376841+iOdiO89@users.noreply.github.com>
Date: Mon, 1 Jul 2024 21:49:12 +0900
Subject: [PATCH 07/14] =?UTF-8?q?fix:=20gray=20>=20grey=20=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Divider.tsx              |  2 +-
 components/Input.tsx                |  4 ++--
 components/TextArea.tsx             |  4 ++--
 components/home/adminChallenge.tsx  |  2 +-
 components/home/challenge.tsx       |  6 +++---
 components/home/challengeBox.tsx    |  2 +-
 components/home/popular.tsx         |  4 ++--
 components/home/searchBar.tsx       |  4 ++--
 components/home/searchResult.tsx    |  2 +-
 components/mypage/NicknameInput.tsx |  4 ++--
 components/mypage/profile.tsx       |  2 +-
 pages/404.tsx                       |  2 +-
 pages/login.tsx                     |  2 +-
 pages/main.tsx                      |  4 ++--
 pages/mypage/nickname/index.tsx     |  2 +-
 pages/mypage/nickname/success.tsx   |  4 ++--
 pages/mypage/password/index.tsx     |  2 +-
 pages/mypage/password/success.tsx   |  4 ++--
 pages/mypage/profile.tsx            | 12 ++++++------
 pages/mypage/quit.tsx               |  2 +-
 pages/signup.tsx                    |  2 +-
 21 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/components/Divider.tsx b/components/Divider.tsx
index 1e77b17..5d8e953 100644
--- a/components/Divider.tsx
+++ b/components/Divider.tsx
@@ -5,7 +5,7 @@ interface DividerProps {
 export default function Divider({ height }: DividerProps) {
   return (
     <div
-      className="border-t border-gray-100 bg-gray-100 w-full"
+      className="border-t border-grey-100 bg-grey-100 w-full"
       style={{ height: `${height}px` }}
     />
   );
diff --git a/components/Input.tsx b/components/Input.tsx
index 1f77be0..3c1a2eb 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -26,11 +26,11 @@ export default function TextInput({
       <div
         className={`w-full border ${
           isError ? "border-red-500" : "border-transparent"
-        } bg-gray-100 rounded-lg p-2`}
+        } bg-grey-100 rounded-lg p-2`}
       >
         <input
           type={type}
-          className="w-full outline-none border-none bg-gray-100 h4"
+          className="w-full outline-none border-none bg-grey-100 h4 placeholder:text-grey-400"
           value={value}
           onChange={(event) => onChangeText(event)}
           placeholder={placeholder}
diff --git a/components/TextArea.tsx b/components/TextArea.tsx
index 9b152a8..77ac9c2 100644
--- a/components/TextArea.tsx
+++ b/components/TextArea.tsx
@@ -24,10 +24,10 @@ export default function TextArea({
       <div
         className={`w-full border ${
           isError ? "border-red-500" : "border-transparent"
-        } bg-gray-100 rounded-lg p-2`}
+        } bg-grey-100 rounded-lg p-2`}
       >
         <textarea
-          className="w-full outline-none border-none bg-gray-100 h4"
+          className="w-full outline-none border-none bg-grey-100 h4"
           value={value}
           onChange={(event) => onChangeText(event)}
           placeholder={placeholder}
diff --git a/components/home/adminChallenge.tsx b/components/home/adminChallenge.tsx
index 1fde549..ea9ecdf 100644
--- a/components/home/adminChallenge.tsx
+++ b/components/home/adminChallenge.tsx
@@ -30,7 +30,7 @@ const AdminChallenge: NextPage<ChallengeProps> = ({
       </FlexBox>
       <FlexBox direction="col" className="w-full gap-2">
         <FlexBox className="gap-1 w-full">
-          <div className="h5 text-gray-500">전체달성률</div>
+          <div className="h5 text-grey-500">전체달성률</div>
           <div className="h3">
             {challengeInfo.totalAttendanceRate}%(
             {challengeInfo.participantsNum}명)
diff --git a/components/home/challenge.tsx b/components/home/challenge.tsx
index 7e7383c..fa16c5c 100644
--- a/components/home/challenge.tsx
+++ b/components/home/challenge.tsx
@@ -23,7 +23,7 @@ const Challenge: NextPage<ChallengeProps> = ({
       >
         <FlexBox className="w-full justify-between items-start">
           <div className="h2">{challengeInfo.name}</div>
-          <div className="h4 text-gray-500">
+          <div className="h4 text-grey-500">
             {challengeInfo.participantsNum}명 참여 중
           </div>
         </FlexBox>
@@ -37,11 +37,11 @@ const Challenge: NextPage<ChallengeProps> = ({
           onClick={() => router.push("/challenge")}
         >
           <FlexBox className="gap-1">
-            <div className="h5 text-gray-500">개인달성률</div>
+            <div className="h5 text-grey-500">개인달성률</div>
             <div className="h3">{challengeInfo.attendanceRate}%</div>
           </FlexBox>
           <FlexBox className="gap-1">
-            <div className="h5 text-gray-500">전체달성률</div>
+            <div className="h5 text-grey-500">전체달성률</div>
             <div className="h3">{challengeInfo.totalAttendanceRate}%</div>
           </FlexBox>
         </FlexBox>
diff --git a/components/home/challengeBox.tsx b/components/home/challengeBox.tsx
index f9970cf..98f6262 100644
--- a/components/home/challengeBox.tsx
+++ b/components/home/challengeBox.tsx
@@ -30,7 +30,7 @@ const HomeChallenge: NextPage<HomeChallengeProps> = ({ onNotify }) => {
       </div>
       <HomeCarousel />
       <div
-        className="w-full text-center bg-main-100 rounded-lg py-2 h2 text-gray-700"
+        className="w-full text-center bg-main-100 rounded-lg py-2 h2 text-grey-700"
         onClick={() =>
           isAdmin
             ? router.push("/challenge/add")
diff --git a/components/home/popular.tsx b/components/home/popular.tsx
index 354c03b..e12c382 100644
--- a/components/home/popular.tsx
+++ b/components/home/popular.tsx
@@ -33,9 +33,9 @@ export default function PopularChallenge({
   return (
     <FlexBox
       direction="col"
-      className="w-full bg-gray-100 items-start p-4 min-w-0 flex-[0_0_100%]"
+      className="w-full bg-grey-100 items-start p-4 min-w-0 flex-[0_0_100%]"
     >
-      <div className="h5 text-gray-700">{returnTitle()}</div>
+      <div className="h5 text-grey-700">{returnTitle()}</div>
       <div className="h2">{challengeInfo?.name}</div>
     </FlexBox>
   );
diff --git a/components/home/searchBar.tsx b/components/home/searchBar.tsx
index ced82e2..c8b3b25 100644
--- a/components/home/searchBar.tsx
+++ b/components/home/searchBar.tsx
@@ -19,11 +19,11 @@ export default function SearchBar({ value, setValue }: SearchBarProps) {
 
   return (
     <div className="w-full px-4 pb-4">
-      <FlexBox className="rounded-lg bg-gray-100 py-2 px-4 gap-2">
+      <FlexBox className="rounded-lg bg-grey-100 py-2 px-4 gap-2">
         <Image src={"/svgs/Search.svg"} width={24} height={24} />
         <input
           type="text"
-          className="w-full outline-none border-none bg-gray-100 h4"
+          className="w-full outline-none border-none bg-grey-100 h4"
           value={value}
           onChange={(event) => onChangeText(event)}
           placeholder="프로그램 이름을 검색해보세요!"
diff --git a/components/home/searchResult.tsx b/components/home/searchResult.tsx
index eafaf19..fc067e7 100644
--- a/components/home/searchResult.tsx
+++ b/components/home/searchResult.tsx
@@ -23,7 +23,7 @@ export default function SearchResult({
     <FlexBox className="w-full border-b p-2 justify-between">
       <FlexBox direction="col" className="gap-1 items-start">
         <div className="h3">{challengeInfo.name}</div>
-        <div className="h4 text-gray-700">
+        <div className="h4 text-grey-700">
           {challengeInfo.location} | {challengeInfo.schedule}
         </div>
       </FlexBox>
diff --git a/components/mypage/NicknameInput.tsx b/components/mypage/NicknameInput.tsx
index a3ef322..959d61b 100644
--- a/components/mypage/NicknameInput.tsx
+++ b/components/mypage/NicknameInput.tsx
@@ -30,10 +30,10 @@ export default function NicknameInput({
   return (
     <div className="w-full relative">
       <div
-        className={`w-full border ${borderStyle()} bg-gray-100 rounded-lg p-2`}
+        className={`w-full border ${borderStyle()} bg-grey-100 rounded-lg p-2`}
       >
         <input
-          className="w-full outline-none border-none bg-gray-100 h4"
+          className="w-full outline-none border-none bg-grey-100 h4"
           value={value}
           onChange={(event) => onChangeText(event)}
           placeholder={placeholder}
diff --git a/components/mypage/profile.tsx b/components/mypage/profile.tsx
index 9b1a25f..18870f3 100644
--- a/components/mypage/profile.tsx
+++ b/components/mypage/profile.tsx
@@ -46,7 +46,7 @@ export default function Profile({ nickname, level }: ProfileProps) {
       onClick={() => router.push("/mypage/profile")}
     >
       <FlexBox className="gap-2">
-        <div className="w-10 h-10 rounded-full bg-gray-200" />
+        <div className="w-10 h-10 rounded-full bg-grey-200" />
         <div className="h2">{nickname}</div>
         {returnBadge()}
       </FlexBox>
diff --git a/pages/404.tsx b/pages/404.tsx
index 23a2f7e..0470c93 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -27,7 +27,7 @@ const ErrorPage: NextPage = () => {
       <div className="w-full px-6">
         <Button
           text="홈으로"
-          style="bg-main-100 text-gray-900"
+          style="bg-main-100 text-grey-900"
           onClick={() => router.push("/")}
         />
       </div>
diff --git a/pages/login.tsx b/pages/login.tsx
index 6543f99..817858f 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -91,7 +91,7 @@ const Login: NextPage = () => {
         <button type="submit" className="w-full">
           <Button
             text="로그인"
-            style="w-full bg-main-100 py-[0.8rem] h2 text-gray-700"
+            style="w-full bg-main-100 py-[0.8rem] h2 text-grey-700"
             onClick={() => {}}
           />
         </button>
diff --git a/pages/main.tsx b/pages/main.tsx
index 315d8e9..689ed86 100644
--- a/pages/main.tsx
+++ b/pages/main.tsx
@@ -12,12 +12,12 @@ const OnBoardingMain: NextPage = () => {
       <div className="flex w-[80%] flex-col h-fit absolute gap-[0.5rem] bottom-12">
         <Button
           text="회원가입"
-          style="w-full bg-main-100 py-[0.8rem] h2 text-gray-700"
+          style="w-full bg-main-100 py-[0.8rem] h2 text-grey-700"
           onClick={() => router.push("./signup")}
         />
         <Button
           text="로그인"
-          style="w-full bg-main-100 py-[0.8rem] h2 text-gray-700"
+          style="w-full bg-main-100 py-[0.8rem] h2 text-grey-700"
           onClick={() => router.push("./login")}
         />
       </div>
diff --git a/pages/mypage/nickname/index.tsx b/pages/mypage/nickname/index.tsx
index 774d1ee..3b7b61c 100644
--- a/pages/mypage/nickname/index.tsx
+++ b/pages/mypage/nickname/index.tsx
@@ -85,7 +85,7 @@ const ChangeNickName: NextPage = () => {
         <Button
           text="변경하기"
           onClick={onClickChangeBtn}
-          style="bg-main-color text-white mt-6 disabled:bg-gray-300 disabled:text-gray-500"
+          style="bg-main-color text-white mt-6 disabled:bg-grey-300 disabled:text-grey-500"
           disabled={
             tempName.length === 0 || nameError.status || newName.length === 0
           }
diff --git a/pages/mypage/nickname/success.tsx b/pages/mypage/nickname/success.tsx
index efe84e4..4bab0a4 100644
--- a/pages/mypage/nickname/success.tsx
+++ b/pages/mypage/nickname/success.tsx
@@ -28,12 +28,12 @@ const NicknameChangeSuccess: NextPage = () => {
       <div className="grid grid-cols-2 gap-2 w-full px-6">
         <Button
           text="홈"
-          style="bg-main-100 text-gray-900"
+          style="bg-main-100 text-grey-900"
           onClick={() => router.push("/")}
         />
         <Button
           text="마이페이지"
-          style="bg-main-100 text-gray-900"
+          style="bg-main-100 text-grey-900"
           onClick={() => router.push("/mypage")}
         />
       </div>
diff --git a/pages/mypage/password/index.tsx b/pages/mypage/password/index.tsx
index d41df57..63cb278 100644
--- a/pages/mypage/password/index.tsx
+++ b/pages/mypage/password/index.tsx
@@ -125,7 +125,7 @@ const Password: NextPage = () => {
           disabled={isBtnDisabled}
           style={`${
             isBtnDisabled
-              ? "bg-gray-300 text-gray-500"
+              ? "bg-grey-300 text-grey-500"
               : "bg-main-color text-white"
           }`}
           onClick={changePassword}
diff --git a/pages/mypage/password/success.tsx b/pages/mypage/password/success.tsx
index 199b6c1..9fd77fd 100644
--- a/pages/mypage/password/success.tsx
+++ b/pages/mypage/password/success.tsx
@@ -28,12 +28,12 @@ const PasswordChangeSuccess: NextPage = () => {
       <div className="grid grid-cols-2 gap-2 w-full px-6">
         <Button
           text="홈"
-          style="bg-main-100 text-gray-900"
+          style="bg-main-100 text-grey-900"
           onClick={() => router.push("/")}
         />
         <Button
           text="마이페이지"
-          style="bg-main-100 text-gray-900"
+          style="bg-main-100 text-grey-900"
           onClick={() => router.push("/mypage")}
         />
       </div>
diff --git a/pages/mypage/profile.tsx b/pages/mypage/profile.tsx
index 9631acd..5d35da4 100644
--- a/pages/mypage/profile.tsx
+++ b/pages/mypage/profile.tsx
@@ -13,32 +13,32 @@ const Profile: NextPage = () => {
     <FlexBox direction="col">
       <HeadFunction title="계정 정보" />
       <FlexBox className="w-full pt-3 pb-8 justify-center">
-        <div className="w-[88px] h-[88px] rounded-full bg-gray-100" />
+        <div className="w-[88px] h-[88px] rounded-full bg-grey-100" />
       </FlexBox>
       <FlexBox className="w-full px-6 py-4 justify-between">
         <div className="h4">닉네임</div>
-        <div className="h4 text-gray-700">{data?.result.nickname}</div>
+        <div className="h4 text-grey-700">{data?.result.nickname}</div>
       </FlexBox>
       <FlexBox className="w-full px-6 py-4 justify-between">
         <div className="h4">아이디</div>
-        <div className="h4 text-gray-700">{data?.result.loginId}</div>
+        <div className="h4 text-grey-700">{data?.result.loginId}</div>
       </FlexBox>
       <Divider height={8} />
       <FlexBox direction="col" className="w-full items-end gap-2 px-6">
         <div
-          className="underline h5 text-gray-500 pt-4 pb-2"
+          className="underline h5 text-grey-500 pt-4 pb-2"
           onClick={() => router.push("/mypage/nickname")}
         >
           닉네임 변경
         </div>
         <div
-          className="underline h5 text-gray-500 py-2"
+          className="underline h5 text-grey-500 py-2"
           onClick={() => router.push("/mypage/password")}
         >
           비밀번호 변경
         </div>
         <div
-          className="underline h5 text-gray-500 py-2"
+          className="underline h5 text-grey-500 py-2"
           onClick={() => router.push("/mypage/quit")}
         >
           회원 탈퇴하기
diff --git a/pages/mypage/quit.tsx b/pages/mypage/quit.tsx
index 2c1cb72..76fc17d 100644
--- a/pages/mypage/quit.tsx
+++ b/pages/mypage/quit.tsx
@@ -44,7 +44,7 @@ const QuitAccount: NextPage = () => {
           onClick={onClickQuitBtn}
           style={`${
             password.length === 0
-              ? "bg-gray-300 text-gray-500"
+              ? "bg-grey-300 text-grey-500"
               : "bg-main-color text-white"
           }`}
           disabled={password.length === 0}
diff --git a/pages/signup.tsx b/pages/signup.tsx
index 9bb1c4d..754f122 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -74,7 +74,7 @@ const SignUp: NextPage = () => {
         <button type="submit">
           <Button
             text="로그인"
-            style="w-[20rem] bg-main-100 py-[0.8rem] h2 text-gray-700"
+            style="w-[20rem] bg-main-100 py-[0.8rem] h2 text-grey-700"
             onClick={() => {}}
           />
         </button>

From 254862699c16446f93c8149c1e4a778d242f4824 Mon Sep 17 00:00:00 2001
From: iOdiO89 <117376841+iOdiO89@users.noreply.github.com>
Date: Mon, 1 Jul 2024 21:50:16 +0900
Subject: [PATCH 08/14] =?UTF-8?q?feat:=20/program=20post=20API=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/admin.ts           | 17 +++++++++++++
 apis/calendar.ts        |  2 +-
 apis/hooks/admin.ts     | 19 ++++++++++++++
 package.json            |  1 +
 pages/challenge/add.tsx | 55 ++++++++++++++++++++++++++++++++++++++---
 yarn.lock               |  8 ++++++
 6 files changed, 97 insertions(+), 5 deletions(-)
 create mode 100644 apis/admin.ts
 create mode 100644 apis/hooks/admin.ts

diff --git a/apis/admin.ts b/apis/admin.ts
new file mode 100644
index 0000000..8bf15f1
--- /dev/null
+++ b/apis/admin.ts
@@ -0,0 +1,17 @@
+import { CalendarDate } from "./calendar";
+import client, { ResponseBody } from "./client";
+export interface Program {
+  name: string;
+  dueDate: CalendarDate;
+  startDate: CalendarDate;
+  location: string;
+  host: string;
+  schedule: string;
+  description: string;
+}
+async function postProgram(body: Program): Promise<ResponseBody> {
+  const { data } = await client.post(`/programs`, body);
+  return data;
+}
+
+export { postAttendanceCode, postProgram };
diff --git a/apis/calendar.ts b/apis/calendar.ts
index 19d1183..eea67bc 100644
--- a/apis/calendar.ts
+++ b/apis/calendar.ts
@@ -19,7 +19,7 @@ export interface MonthCalendarProps {
   };
 }
 
-type CalendarDate = {
+export type CalendarDate = {
   year: number;
   month: number;
   day: number;
diff --git a/apis/hooks/admin.ts b/apis/hooks/admin.ts
new file mode 100644
index 0000000..c22e57d
--- /dev/null
+++ b/apis/hooks/admin.ts
@@ -0,0 +1,19 @@
+import { useMutation } from "@tanstack/react-query";
+import { Program, postAttendanceCode, postProgram } from "../admin";
+import { useRouter } from "next/router";
+
+function usePostProgram() {
+  const router = useRouter();
+  const { mutate } = useMutation({
+    mutationKey: ["postProgram"],
+    mutationFn: (body: Program) => postProgram(body),
+    onSuccess: () => {
+      window.alert("프로그램이 성공적으로 등록되었습니다.");
+      router.push("/");
+    },
+  });
+
+  return { mutate };
+}
+
+export { usePostAttendanceCode, usePostProgram };
diff --git a/package.json b/package.json
index 5548edc..7255eb2 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@types/styled-components": "^5.1.34",
     "autoprefixer": "^10.4.19",
     "axios": "^1.6.2",
+    "dayjs": "^1.11.11",
     "embla-carousel-autoplay": "^8.1.3",
     "embla-carousel-react": "^8.1.3",
     "gh-pages": "^6.1.1",
diff --git a/pages/challenge/add.tsx b/pages/challenge/add.tsx
index 9e89c51..c15745d 100644
--- a/pages/challenge/add.tsx
+++ b/pages/challenge/add.tsx
@@ -1,11 +1,15 @@
+import { usePostProgram } from "@/apis/hooks/admin";
 import Button from "@/components/Button";
 import FlexBox from "@/components/Flexbox";
 import HeadFunction from "@/components/HeadFunction";
 import TextInput from "@/components/Input";
 import NavBar from "@/components/NavBar";
 import ChallengeInput from "@/components/challenge/ChallengeInput";
+import dayjs from "dayjs";
 import { NextPage } from "next";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import "dayjs/locale/ko";
+dayjs.locale("ko");
 
 const AddChallenge: NextPage = () => {
   const [name, setName] = useState<string>("");
@@ -14,12 +18,38 @@ const AddChallenge: NextPage = () => {
   const [detail, setDetail] = useState<string>("");
   const [startDate, setStartDate] = useState<string>("");
   const [endDate, setEndDate] = useState<string>("");
+  const [host, setHost] = useState<string>("");
+
+  const { mutate } = usePostProgram();
+
+  const registerProgram = () => {
+    mutate({
+      name,
+      dueDate: {
+        year: Number(dayjs(endDate).format("YYYY")),
+        month: Number(dayjs(endDate).format("M")),
+        day: Number(dayjs(endDate).format("D")),
+      },
+      startDate: {
+        year: Number(dayjs(startDate).format("YYYY")),
+        month: Number(dayjs(startDate).format("M")),
+        day: Number(dayjs(startDate).format("D")),
+      },
+      location: location,
+      host: "임시host",
+      schedule: dayjs(endDate).format("ddd"),
+      description:
+        detail.trim().length === 0
+          ? `담당자 전화번호: ${phoneNum}`
+          : detail.concat("\n담당자 전화번호: ${phoneNum}"),
+    });
+  };
 
   return (
     <div className="w-full">
       <HeadFunction title="프로그램 등록" />
       <FlexBox className="w-full px-4 gap-8 pb-8" direction="col">
-        <FlexBox className="w-full gap-8 mt-4" direction="col">
+        <FlexBox className="w-full gap-4 mt-4" direction="col">
           <ChallengeInput
             title="프로그램 이름"
             inputType="text"
@@ -44,6 +74,23 @@ const AddChallenge: NextPage = () => {
             isError={false}
             placeholder="기관명 또는 도로명주소"
           />
+          <ChallengeInput
+            title="태그"
+            inputType="dropdown"
+            value={location}
+            setValue={setLocation}
+            value2={endDate}
+            setValue2={setEndDate}
+            isError={false}
+            placeholder="기관명 또는 도로명주소"
+          />
+          <ChallengeInput
+            title="주최 기관"
+            inputType="text"
+            value={host}
+            setValue={setHost}
+            isError={false}
+          />
           <ChallengeInput
             title="담당자 전화번호"
             inputType="text"
@@ -64,8 +111,8 @@ const AddChallenge: NextPage = () => {
         </FlexBox>
         <Button
           text="등록하기"
-          onClick={() => console.log(1)}
-          style="bg-main-color text-white h3 disabled:bg-gray-300 disabled:text-gray-500"
+          onClick={registerProgram}
+          style="bg-main-color text-white h3 disabled:bg-grey-300 disabled:text-grey-500"
           disabled={
             name.length === 0 ||
             startDate.length === 0 ||
diff --git a/yarn.lock b/yarn.lock
index 318bbd2..be40653 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3394,6 +3394,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dayjs@npm:^1.11.11":
+  version: 1.11.11
+  resolution: "dayjs@npm:1.11.11"
+  checksum: 10c0/0131d10516b9945f05a57e13f4af49a6814de5573a494824e103131a3bbe4cc470b1aefe8e17e51f9a478a22cd116084be1ee5725cedb66ec4c3f9091202dc4b
+  languageName: node
+  linkType: hard
+
 "debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4":
   version: 4.3.5
   resolution: "debug@npm:4.3.5"
@@ -7692,6 +7699,7 @@ __metadata:
     "@yarnpkg/pnpify": "npm:^4.1.0"
     autoprefixer: "npm:^10.4.19"
     axios: "npm:^1.6.2"
+    dayjs: "npm:^1.11.11"
     embla-carousel-autoplay: "npm:^8.1.3"
     embla-carousel-react: "npm:^8.1.3"
     eslint: "npm:8.54.0"

From c0655be5fdd0433b759f7e5915a66e00651937f5 Mon Sep 17 00:00:00 2001
From: leejin_rho <tbdpapdl@gmail.com>
Date: Mon, 1 Jul 2024 21:55:39 +0900
Subject: [PATCH 09/14] feat: set isAdmin atom

---
 apis/calendar.ts   | 4 +++-
 pages/calendar.tsx | 8 ++++----
 pages/index.tsx    | 6 ++++++
 pages/login.tsx    | 6 ++++++
 utils/atom.tsx     | 5 ++++-
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/apis/calendar.ts b/apis/calendar.ts
index 49181e3..2be6699 100644
--- a/apis/calendar.ts
+++ b/apis/calendar.ts
@@ -7,6 +7,8 @@ interface GetMonthCalendarResponse extends ResponseBody {
 export interface MonthCalendarProps {
   programIdx: number;
   name: string;
+  category: string | null;
+  location: string | null;
   openDate: {
     year: number;
     month: number;
@@ -38,7 +40,7 @@ interface GetProgramDetailBody {
 
 // 챌린지 월별 조회
 export const getMonthCalendar = async (): Promise<GetMonthCalendarResponse> => {
-  const response = await client.get("/programs");
+  const response = await client.get("/programs/list");
   // console.log("calenderData", response.data.result);
   return response.data.result;
 };
diff --git a/pages/calendar.tsx b/pages/calendar.tsx
index b071487..90b856f 100644
--- a/pages/calendar.tsx
+++ b/pages/calendar.tsx
@@ -11,7 +11,7 @@ interface DropProps {
   regionDrop: boolean;
 }
 
-const categories = ["운동", "예술", "학술"];
+const categories = ["운동", "예술", "학술", "기타"];
 const locations = ["서울", "경기", "그 외"];
 
 const CalendarPage: NextPage = () => {
@@ -32,7 +32,7 @@ const CalendarPage: NextPage = () => {
       <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">
-          <div>
+          <div className="">
             <FilterBox
               filterName="카테고리"
               onClick={() => {
@@ -41,11 +41,11 @@ const CalendarPage: NextPage = () => {
               }}
             />
             {isDrop.categoryDrop ? (
-              <ul className="absolute top-[8rem]">
+              <ul className="absolute bg-white w-[5rem] text-center top-[7rem]">
                 {categories.map((option, index) => (
                   <li
                     key={index}
-                    className="cursor-pointer hover:bg-gray-200 p-2"
+                    className="cursor-pointer hover:bg-gray-200"
                     onClick={() => {}}
                   >
                     {option}
diff --git a/pages/index.tsx b/pages/index.tsx
index d5b3001..55531bd 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,6 +10,8 @@ import { ToastContainer, Zoom, toast } from "react-toastify";
 import Image from "next/image";
 import "react-toastify/dist/ReactToastify.css";
 import CheckIcon from "@/public/svgs/Check.svg";
+import { atom, useAtomValue } from "jotai";
+import { isAdminAtom } from "@/utils/atom";
 
 const Home: NextPage = () => {
   const notify = (msg: string) => {
@@ -19,6 +21,10 @@ const Home: NextPage = () => {
     });
   };
 
+  //isAdmin
+  const isAdmin = useAtomValue(isAdminAtom);
+  console.log("atom: ", isAdmin);
+
   return (
     <FlexBox direction="col" className="w-full h-full justify-between">
       <HomeChallenge onNotify={notify} />
diff --git a/pages/login.tsx b/pages/login.tsx
index 6543f99..2af7d8c 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -7,6 +7,8 @@ import LogoLetterIcon from "@/public/svgs/LogoLetter.svg";
 import { useMutation } from "@tanstack/react-query";
 import { ResponseBody, setTokenFromLocalStorage } from "@/apis/client";
 import { SignIn } from "@/apis/auth";
+import { atom, useAtom } from "jotai";
+import { isAdminAtom } from "@/utils/atom";
 
 interface userProps {
   loginId: string;
@@ -15,6 +17,7 @@ interface userProps {
 
 const Login: NextPage = () => {
   const router = useRouter();
+  const [isAdmin, setIsAdmin] = useAtom(isAdminAtom);
 
   const [userInfo, setUserInfo] = useState<userProps>({
     loginId: "",
@@ -50,7 +53,10 @@ const Login: NextPage = () => {
       console.log(data);
       const accessToken = data.result.accessToken;
       const refreshToken = data.result.refreshToken;
+      const isAdmin = data.result.isAdmin;
+      setIsAdmin(isAdmin);
       setTokenFromLocalStorage(accessToken);
+
       router.push("/");
       alert("로그인에 성공하였습니다");
     },
diff --git a/utils/atom.tsx b/utils/atom.tsx
index 1524799..b59f5f2 100644
--- a/utils/atom.tsx
+++ b/utils/atom.tsx
@@ -1,3 +1,6 @@
 import { atom } from "jotai";
 
-export const isAdminAtom = atom<boolean>(false);
+export const isAdminAtom = atom<boolean>({
+  key: "isAdminState",
+  default: false,
+});

From ada7aaa38eed9b033fbe0dd8fea36a7261f4782b Mon Sep 17 00:00:00 2001
From: leejin_rho <tbdpapdl@gmail.com>
Date: Mon, 1 Jul 2024 21:58:45 +0900
Subject: [PATCH 10/14] feat: set isAdmin atom

---
 utils/atom.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/utils/atom.tsx b/utils/atom.tsx
index b59f5f2..1524799 100644
--- a/utils/atom.tsx
+++ b/utils/atom.tsx
@@ -1,6 +1,3 @@
 import { atom } from "jotai";
 
-export const isAdminAtom = atom<boolean>({
-  key: "isAdminState",
-  default: false,
-});
+export const isAdminAtom = atom<boolean>(false);

From 796b5fcd86a1a4788f755d2b2292f95b44a1045e Mon Sep 17 00:00:00 2001
From: leejin_rho <tbdpapdl@gmail.com>
Date: Mon, 1 Jul 2024 22:01:47 +0900
Subject: [PATCH 11/14] feat: set isAdmin atom at localStorage

---
 apis/client.ts  | 12 ++++++++++++
 pages/login.tsx |  7 ++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/apis/client.ts b/apis/client.ts
index 04a1d94..3e200f3 100644
--- a/apis/client.ts
+++ b/apis/client.ts
@@ -22,6 +22,18 @@ const getTokenFromLocalStorage = () => {
   return accessToken;
 };
 
+export const setIsAdminAtLocalStorage = (is_admin: string) => {
+  localStorage.setItem("is_admin", is_admin);
+};
+
+const getIsAdminFromLocalStorage = () => {
+  const isAdmin = localStorage.getItem("is_admin");
+  if (!isAdmin) {
+    return null;
+  }
+  return isAdmin;
+};
+
 const client = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,
   withCredentials: true,
diff --git a/pages/login.tsx b/pages/login.tsx
index 2af7d8c..981c1a4 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -5,7 +5,11 @@ import { useRouter } from "next/router";
 import Button from "@/components/Button";
 import LogoLetterIcon from "@/public/svgs/LogoLetter.svg";
 import { useMutation } from "@tanstack/react-query";
-import { ResponseBody, setTokenFromLocalStorage } from "@/apis/client";
+import {
+  ResponseBody,
+  setIsAdminAtLocalStorage,
+  setTokenFromLocalStorage,
+} from "@/apis/client";
 import { SignIn } from "@/apis/auth";
 import { atom, useAtom } from "jotai";
 import { isAdminAtom } from "@/utils/atom";
@@ -55,6 +59,7 @@ const Login: NextPage = () => {
       const refreshToken = data.result.refreshToken;
       const isAdmin = data.result.isAdmin;
       setIsAdmin(isAdmin);
+      setIsAdminAtLocalStorage(isAdmin);
       setTokenFromLocalStorage(accessToken);
 
       router.push("/");

From 188db7bc80516f30980ee185af8d50bf9988a369 Mon Sep 17 00:00:00 2001
From: iOdiO89 <117376841+iOdiO89@users.noreply.github.com>
Date: Tue, 2 Jul 2024 00:54:52 +0900
Subject: [PATCH 12/14] =?UTF-8?q?fix:=20/programs=20request=20body,=20?=
 =?UTF-8?q?=ED=95=AD=EB=AA=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/admin.ts                           |  4 +++-
 apis/hooks/admin.ts                     |  8 ++++++-
 components/challenge/ChallengeInput.tsx | 16 +++++++++++---
 pages/challenge/add.tsx                 | 29 ++++++++++---------------
 utils/atom.tsx                          |  2 +-
 5 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/apis/admin.ts b/apis/admin.ts
index 8bf15f1..7da91b8 100644
--- a/apis/admin.ts
+++ b/apis/admin.ts
@@ -1,10 +1,12 @@
 import { CalendarDate } from "./calendar";
 import client, { ResponseBody } from "./client";
+
 export interface Program {
   name: string;
   dueDate: CalendarDate;
-  startDate: CalendarDate;
+  openDate: CalendarDate;
   location: string;
+  category: string;
   host: string;
   schedule: string;
   description: string;
diff --git a/apis/hooks/admin.ts b/apis/hooks/admin.ts
index c22e57d..2f040c7 100644
--- a/apis/hooks/admin.ts
+++ b/apis/hooks/admin.ts
@@ -1,16 +1,22 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Program, postAttendanceCode, postProgram } from "../admin";
 import { useRouter } from "next/router";
 
 function usePostProgram() {
   const router = useRouter();
+  const queryclient = useQueryClient();
+
   const { mutate } = useMutation({
     mutationKey: ["postProgram"],
     mutationFn: (body: Program) => postProgram(body),
     onSuccess: () => {
+      queryclient.invalidateQueries({
+        queryKey: ["getMyChallengeList"],
+      });
       window.alert("프로그램이 성공적으로 등록되었습니다.");
       router.push("/");
     },
+    onError: () => router.push("/404"),
   });
 
   return { mutate };
diff --git a/components/challenge/ChallengeInput.tsx b/components/challenge/ChallengeInput.tsx
index 2592b19..88b0a4b 100644
--- a/components/challenge/ChallengeInput.tsx
+++ b/components/challenge/ChallengeInput.tsx
@@ -59,9 +59,19 @@ export default function ChallengeInput({
         break;
       case "dropdown":
         return (
-          <FlexBox className="w-full justify-between gap-2 text-Black">
-            <Dropdown options={locationOptions} placeholder="지역" />
-            <Dropdown options={typeOptions} placeholder="종류" />
+          <FlexBox className="w-full justify-between gap-2 text-black">
+            <Dropdown
+              options={locationOptions}
+              placeholder="지역"
+              value={value}
+              onChange={(arg) => setValue(arg.value)}
+            />
+            <Dropdown
+              options={typeOptions}
+              placeholder="분야"
+              value={value2}
+              onChange={(arg) => setValue2(arg.value)}
+            />
           </FlexBox>
         );
         break;
diff --git a/pages/challenge/add.tsx b/pages/challenge/add.tsx
index c15745d..e10f9d5 100644
--- a/pages/challenge/add.tsx
+++ b/pages/challenge/add.tsx
@@ -13,12 +13,13 @@ dayjs.locale("ko");
 
 const AddChallenge: NextPage = () => {
   const [name, setName] = useState<string>("");
-  const [location, setLocation] = useState<string>("");
-  const [phoneNum, setPhoneNum] = useState<string>("");
-  const [detail, setDetail] = useState<string>("");
   const [startDate, setStartDate] = useState<string>("");
   const [endDate, setEndDate] = useState<string>("");
+  const [location, setLocation] = useState<string>("");
+  const [category, setCategory] = useState<string>("");
   const [host, setHost] = useState<string>("");
+  const [phoneNum, setPhoneNum] = useState<string>("");
+  const [detail, setDetail] = useState<string>("");
 
   const { mutate } = usePostProgram();
 
@@ -30,13 +31,14 @@ const AddChallenge: NextPage = () => {
         month: Number(dayjs(endDate).format("M")),
         day: Number(dayjs(endDate).format("D")),
       },
-      startDate: {
+      openDate: {
         year: Number(dayjs(startDate).format("YYYY")),
         month: Number(dayjs(startDate).format("M")),
         day: Number(dayjs(startDate).format("D")),
       },
       location: location,
-      host: "임시host",
+      category: category,
+      host: host,
       schedule: dayjs(endDate).format("ddd"),
       description:
         detail.trim().length === 0
@@ -67,22 +69,13 @@ const AddChallenge: NextPage = () => {
             isError={false}
           />
           <ChallengeInput
-            title="위치"
-            inputType="text"
-            value={location}
-            setValue={setLocation}
-            isError={false}
-            placeholder="기관명 또는 도로명주소"
-          />
-          <ChallengeInput
-            title="태그"
+            title="지역 및 분야"
             inputType="dropdown"
             value={location}
             setValue={setLocation}
-            value2={endDate}
-            setValue2={setEndDate}
+            value2={category}
+            setValue2={setCategory}
             isError={false}
-            placeholder="기관명 또는 도로명주소"
           />
           <ChallengeInput
             title="주최 기관"
@@ -118,6 +111,8 @@ const AddChallenge: NextPage = () => {
             startDate.length === 0 ||
             endDate.length === 0 ||
             location.length === 0 ||
+            category.length === 0 ||
+            host.length === 0 ||
             phoneNum.length === 0
           }
         />
diff --git a/utils/atom.tsx b/utils/atom.tsx
index 1524799..00faa57 100644
--- a/utils/atom.tsx
+++ b/utils/atom.tsx
@@ -1,3 +1,3 @@
 import { atom } from "jotai";
 
-export const isAdminAtom = atom<boolean>(false);
+export const isAdminAtom = atom<boolean>(true);

From 6a7587c599d5b55a282722933ba6a5c42403b025 Mon Sep 17 00:00:00 2001
From: iOdiO89 <117376841+iOdiO89@users.noreply.github.com>
Date: Tue, 2 Jul 2024 01:24:00 +0900
Subject: [PATCH 13/14] =?UTF-8?q?feat:=20/challenges/attendance=20post=20A?=
 =?UTF-8?q?PI=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/admin.ts       |  6 ++++++
 apis/hooks/admin.ts | 11 +++++++++++
 2 files changed, 17 insertions(+)

diff --git a/apis/admin.ts b/apis/admin.ts
index 7da91b8..73a36b5 100644
--- a/apis/admin.ts
+++ b/apis/admin.ts
@@ -11,6 +11,12 @@ export interface Program {
   schedule: string;
   description: string;
 }
+
+async function postAttendanceCode(challengeIdx: number): Promise<ResponseBody> {
+  const { data } = await client.post(`/challenges/attendance/${challengeIdx}`);
+  return data;
+}
+
 async function postProgram(body: Program): Promise<ResponseBody> {
   const { data } = await client.post(`/programs`, body);
   return data;
diff --git a/apis/hooks/admin.ts b/apis/hooks/admin.ts
index 2f040c7..6e9d0af 100644
--- a/apis/hooks/admin.ts
+++ b/apis/hooks/admin.ts
@@ -2,6 +2,17 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Program, postAttendanceCode, postProgram } from "../admin";
 import { useRouter } from "next/router";
 
+function usePostAttendanceCode(challengeIdx: number) {
+  const { mutate } = useMutation({
+    mutationKey: ["postAttendanceCode", challengeIdx],
+    mutationFn: () => postAttendanceCode(challengeIdx),
+    onSuccess: (data) => window.alert(`인증번호: ${data}`),
+    onError: () => window.alert("에러 발생. 앱 관리자에게 문의해주세요."),
+  });
+
+  return { mutate };
+}
+
 function usePostProgram() {
   const router = useRouter();
   const queryclient = useQueryClient();

From 6cfb786e52b01da8394b167aa9d76ad1561c39a2 Mon Sep 17 00:00:00 2001
From: iOdiO89 <117376841+iOdiO89@users.noreply.github.com>
Date: Tue, 2 Jul 2024 01:45:27 +0900
Subject: [PATCH 14/14] =?UTF-8?q?fix:=20yml=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/build-test.yml             | 91 ++++++++++++++++++++
 .github/workflows/{nextjs.yml => deploy.yml} |  9 +-
 2 files changed, 95 insertions(+), 5 deletions(-)
 create mode 100644 .github/workflows/build-test.yml
 rename .github/workflows/{nextjs.yml => deploy.yml} (97%)

diff --git a/.github/workflows/build-test.yml b/.github/workflows/build-test.yml
new file mode 100644
index 0000000..7b8b73a
--- /dev/null
+++ b/.github/workflows/build-test.yml
@@ -0,0 +1,91 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Test Next Build
+
+on:
+  pull_request:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+
+    env:
+      NEXT_PUBLIC_API_URL: ${{secrets.NEXT_PUBLIC_API_URL}}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Check environment variable
+        run: echo NEXT_PUBLIC_API_URL
+      - name: Create .env file
+        run: |
+          echo NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }} >> .env
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Export with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next export
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
diff --git a/.github/workflows/nextjs.yml b/.github/workflows/deploy.yml
similarity index 97%
rename from .github/workflows/nextjs.yml
rename to .github/workflows/deploy.yml
index bc11cdd..d9e111e 100644
--- a/.github/workflows/nextjs.yml
+++ b/.github/workflows/deploy.yml
@@ -9,7 +9,7 @@ on:
   push:
     branches: ["deploy"]
   pull_request:
-    branches: ["deploy", "main"]
+    branches: ["deploy"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -31,9 +31,9 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
-    env: 
-       NEXT_PUBLIC_API_URL: ${{secrets.NEXT_PUBLIC_API_URL}}
-       
+    env:
+      NEXT_PUBLIC_API_URL: ${{secrets.NEXT_PUBLIC_API_URL}}
+
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -93,7 +93,6 @@ jobs:
         with:
           path: ./out
 
-
   # Deployment job
   deploy:
     environment: