Merge pull request #78 from Team-INSERT/feat/meal

급식 페이지 작업 완료
Team-INSERT · Oct 2, 2023 · 3713afb · 3713afb
2 parents 82c7b2b + 41cf3d4
commit 3713afb
Show file tree

Hide file tree

Showing 22 changed files with 379 additions and 73 deletions.
diff --git a/src/apis/httpClient/httpClient.ts b/src/apis/httpClient/httpClient.ts
@@ -168,4 +168,5 @@ export default {
   admin: new HttpClient("api/bamboo/admin", axiosConfig),
   like: new HttpClient("api/likes/update", axiosConfig),
   image: new HttpClient("api/image/save", axiosConfig),
+  meal: new HttpClient("api/meal", axiosConfig),
 };
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,16 +1,20 @@
+import Provider from "@/provider/Provider";
+
 export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
-}
+  title: "BSM",
+  description: "부산소마고 학생 정보 관리 서비스 BSM입니다.",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <Provider>{children}</Provider>
+      </body>
     </html>
-  )
+  );
 }
diff --git a/src/assets/data/emptyMealList.ts b/src/assets/data/emptyMealList.ts
@@ -0,0 +1,21 @@
+import { IMealList } from "@/interfaces";
+
+const emptyMealList: IMealList = {
+  data: {
+    MORNING: {
+      content: "",
+      cal: 0,
+    },
+    LUNCH: {
+      content: "",
+      cal: 0,
+    },
+    DINNER: {
+      content: "",
+      cal: 0,
+    },
+  },
+  keys: [],
+};
+
+export default emptyMealList;
diff --git a/src/assets/data/index.ts b/src/assets/data/index.ts
@@ -3,3 +3,4 @@ export { default as emptyClassInfo } from "./emptyClassInfo";
 export { default as emptyClassLevel } from "./emptyClassLevel";
 export { default as emptyTimetable } from "./emptyTimetable";
 export { default as emptyInputPost } from "./emptyInputPost";
+export { default as emptyMealList } from "./emptyMealList";
diff --git a/src/constants/key.constant.ts b/src/constants/key.constant.ts
@@ -6,6 +6,7 @@ const KEY = {
   RECOMMENT: "useRecomment",
   BAMBOO: "useBamboo",
   BAMBOO_ADMIN: "useBambooAdmin",
+  MEAL: "useMeal",
 } as const;
 
 export default KEY;
diff --git a/src/helpers/getMealName.helper.ts b/src/helpers/getMealName.helper.ts
@@ -0,0 +1,14 @@
+const getMealName = (meal: string) => {
+  switch (meal) {
+    case "MORNING":
+      return "조식";
+    case "LUNCH":
+      return "중식";
+    case "DINNER":
+      return "석식";
+    default:
+      return meal;
+  }
+};
+
+export default getMealName;
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
@@ -8,3 +8,4 @@ export { default as getWriteContentLabel } from "./getWriteContentLabel.helper";
 export { default as checkPostValid } from "./checkPostValid.helper";
 export { default as checkTextOverflow } from "./checkTextOverflow.helper";
 export { default as getTextDepth } from "./getTextDepth.helper";
+export { default as getMealName } from "./getMealName.helper";
diff --git a/src/hooks/useDate.ts b/src/hooks/useDate.ts
@@ -59,6 +59,22 @@ const useDate = () => {
     return formattedDate;
   };
 
+  const getMealDate = () => {
+    return dayjs().format("YYMMDD");
+  };
+
+  const getDayOfWeek = (date: string) => {
+    return dayjs(date, "YYMMDD").locale("ko").format("dddd");
+  };
+
+  const getMealDateTitle = (date: string) => {
+    return dayjs(date, "YYMMDD").locale("ko").format("M월 D일 dddd");
+  };
+
+  const setMealDate = (date: string, day: number) => {
+    return dayjs(date, "YYMMDD").add(day, "day").format("YYMMDD");
+  };
+
   const getNowWeekDay = ({ type }: DateType) => {
     const today = dayjs().day();
 
@@ -107,6 +123,10 @@ const useDate = () => {
     formatDate,
     getHMSDate,
     getDate,
+    getDayOfWeek,
+    getMealDate,
+    getMealDateTitle,
+    setMealDate,
     getNowWeekDay,
     translateDay,
     getDiffDayTime,

diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
@@ -3,7 +3,7 @@ export type { default as IClassInfo } from "./classInfo.interface";
 export type { default as IClassLevel } from "./classLevel.interface";
 export type { default as IEmojiState } from "./emoji.interface";
 export type { default as IMealList } from "./mealList.interface";
-export type { default as IMealListItem } from "./mealListItem.interface";
+export type { default as IMeal } from "./meal.interface";
 export type { default as IModalState } from "./modal.interface";
 export type { default as IPost } from "./post.interface";
 export type { default as IPostQuery } from "./postQuery.interface";

diff --git a/src/interfaces/meal.interface.ts b/src/interfaces/meal.interface.ts
@@ -0,0 +1,4 @@
+export default interface IMeal {
+  content: string;
+  cal: number;
+}
diff --git a/src/interfaces/mealList.interface.ts b/src/interfaces/mealList.interface.ts
@@ -1,3 +1,8 @@
+import IMeal from "./meal.interface";
+
 export default interface MealListType {
-  mealList: Array<object>;
+  data: {
+    [meal: string]: IMeal;
+  };
+  keys: Array<string>;
 }
diff --git a/src/interfaces/mealListItem.interface.ts b/src/interfaces/mealListItem.interface.ts
diff --git a/src/page/meal/index.tsx b/src/page/meal/index.tsx
@@ -1,18 +1,69 @@
+import React from "react";
 import styled from "styled-components";
-import { Aside } from "@/components/common";
+import { emptyMealList } from "@/assets/data";
+import { IMealList } from "@/interfaces";
+import { color, flex, font } from "@/styles";
 import { Column } from "@/components/Flex";
-import { font } from "@/styles";
-import MealSlider from "./layouts/MealSlider";
+import useDate from "@/hooks/useDate";
+import MealListItem from "./layouts/MealListItem";
+import { useMealQuery } from "./services/query.service";
 
 const MealPage = () => {
+  const { getMealDate, getDayOfWeek, setMealDate, getMealDateTitle } =
+    useDate();
+  const [currentDate, setCurrentDate] = React.useState(getMealDate());
+  const [mealList, setMealList] = React.useState<IMealList>(emptyMealList);
+  const { refetch } = useMealQuery({ date: currentDate });
+
+  React.useEffect(() => {
+    const handleSetDateKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft")
+        setCurrentDate((p) => {
+          if (getDayOfWeek(p) === "월요일") return setMealDate(p, -3);
+          return setMealDate(p, -1);
+        });
+      if (e.key === "ArrowRight")
+        setCurrentDate((p) => {
+          if (getDayOfWeek(p) === "금요일") return setMealDate(p, 3);
+          return setMealDate(p, 1);
+        });
+    };
+
+    window.addEventListener("keydown", handleSetDateKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleSetDateKeyDown);
+    };
+    // eslint-disable-next-line
+  }, []);
+
+  React.useEffect(() => {
+    refetch().then(({ data }) => {
+      if (data.keys) return setMealList(data);
+      return setMealList(emptyMealList);
+    });
+    // eslint-disable-next-line
+  }, [currentDate]);
+
   return (
     <Layout>
       <Container>
-        <Column gap="8px" width="67%">
+        <Column gap="8px">
           <Title />
-          <MealSlider />
+          <Description />
         </Column>
-        <Aside />
+        <MealDate>{getMealDateTitle(currentDate)}</MealDate>
+        <MealList>
+          {mealList.keys.map((mealName) => (
+            <MealListItem
+              key={mealName}
+              mealName={mealName}
+              meal={mealList.data[mealName]}
+            />
+          ))}
+          {!mealList.keys.length && (
+            <NoMealText>{getMealDateTitle(currentDate)}</NoMealText>
+          )}
+        </MealList>
       </Container>
     </Layout>
   );
@@ -26,7 +77,8 @@ const Layout = styled.div`
 
 const Container = styled.div`
   width: 76%;
-  display: flex;
+  ${flex.COLUMN};
+  gap: 12px;
 `;
 
 const Title = styled.span`
@@ -36,4 +88,37 @@ const Title = styled.span`
   }
 `;
 
+const Description = styled.span`
+  color: ${color.gray};
+  &:after {
+    content: "좌우 화살표 방향키를 탭해 날짜를 조정해보세요.";
+  }
+`;
+
+const MealList = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60vh;
+  gap: 30px;
+`;
+
+const MealDate = styled.span`
+  width: 100%;
+  ${flex.CENTER};
+  ${font.H4};
+`;
+
+const NoMealText = styled.span`
+  width: 100%;
+  ${flex.CENTER};
+  ${font.p2};
+  color: ${color.gray};
+
+  &:after {
+    content: "에 등록된 급식이 없어요.";
+  }
+`;
+
 export default MealPage;
diff --git a/src/page/meal/layouts/BlinkerBox.tsx b/src/page/meal/layouts/BlinkerBox.tsx
@@ -0,0 +1,39 @@
+import { color, flex } from "@/styles";
+import React from "react";
+import styled from "styled-components";
+
+const BlinkerBox = () => {
+  return (
+    <Container>
+      <Red />
+      <Yellow />
+      <Green />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  ${flex.VERTICAL};
+  gap: 6px;
+  margin-right: auto;
+`;
+
+const Circle = styled.div`
+  width: 12px;
+  height: 12px;
+  border-radius: 25px;
+`;
+
+const Red = styled(Circle)`
+  background-color: ${color.primary_red};
+`;
+
+const Yellow = styled(Circle)`
+  background-color: ${color.primary_yellow};
+`;
+
+const Green = styled(Circle)`
+  background-color: ${color.primary_mint};
+`;
+
+export default BlinkerBox;