Merge branch 'feat/meal', remote-tracking branch 'origin'

.github/workflows/lint.yaml

@@ -12,7 +12,19 @@ jobs:
       matrix:
         node-version: [18.x]
     env:
-      NEXT_PUBLIC_SERVER_URL: ${{ secrets.NEXT_PUBLIC_SERVER_URL }}
+      NEXT_PUBLIC_BASE_URL: ${{ secrets.NEXT_PUBLIC_BASE_URL }}
+      NEXT_PUBLIC_FILE_SERVER_URL: ${{ secrets.NEXT_PUBLIC_FILE_SERVER_URL }}
+      NEXT_PUBLIC_TEST_DOMAIN_KEYWORD: ${{ secrets.NEXT_PUBLIC_TEST_DOMAIN_KEYWORD }}
+      NEXT_PUBLIC_MAIN_DOMAIN_KEYWORD: ${{ secrets.NEXT_PUBLIC_MAIN_DOMAIN_KEYWORD }}
+      NEXT_PUBLIC_DOMAIN: ${{ secrets.NEXT_PUBLIC_DOMAIN }}
+      NEXT_PUBLIC_TEST_DOMAIN: ${{ secrets.NEXT_PUBLIC_TEST_DOMAIN }}
+      NEXT_PUBLIC_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_AUTH_DOMAIN }}
+      NEXT_PUBLIC_OAUTH_URL: ${{ secrets.NEXT_PUBLIC_OAUTH_URL }}
+      NEXT_PUBLIC_GA_TRACKING_ID: ${{ secrets.NEXT_PUBLIC_GA_TRACKING_ID }}
+      NEXT_PUBLIC_BANNER_BASE_PATH: ${{ secrets.NEXT_PUBLIC_BANNER_BASE_PATH }}
+      NEXT_PUBLIC_DEFAULT_BACKGROUND_IMAGE_URL: ${{ secrets.NEXT_PUBLIC_DEFAULT_BACKGROUND_IMAGE_URL }}
+      NEXT_PUBLIC_DEFAULT_USER_IMAGE: ${{ secrets.NEXT_PUBLIC_DEFAULT_USER_IMAGE }}
+      NEXT_PUBLIC_USER_IMAGE_URL: ${{ secrets.NEXT_PUBLIC_USER_IMAGE_URL }}
 
     steps:
       - uses: actions/checkout@v3
@@ -25,7 +37,20 @@ jobs:
       - name: create env file
         run: |
           touch .env
-          echo NEXT_PUBLIC_SERVER_URL=${{ secrets.NEXT_PUBLIC_SERVER_URL }} >> .env
+          echo NEXT_PUBLIC_BASE_URL=${{ secrets.NEXT_PUBLIC_BASE_URL }} >> .env
+          echo NEXT_PUBLIC_BASE_URL=${{ secrets.NEXT_PUBLIC_BASE_URL }} >> .env
+          echo NEXT_PUBLIC_FILE_SERVER_URL=${{ secrets.NEXT_PUBLIC_FILE_SERVER_URL }} >> .env
+          echo NEXT_PUBLIC_TEST_DOMAIN_KEYWORD=${{ secrets.NEXT_PUBLIC_TEST_DOMAIN_KEYWORD }} >> .env
+          echo NEXT_PUBLIC_MAIN_DOMAIN_KEYWORD=${{ secrets.NEXT_PUBLIC_MAIN_DOMAIN_KEYWORD }} >> .env
+          echo NEXT_PUBLIC_DOMAIN=${{ secrets.NEXT_PUBLIC_DOMAIN }} >> .env
+          echo NEXT_PUBLIC_TEST_DOMAIN=${{ secrets.NEXT_PUBLIC_TEST_DOMAIN }} >> .env
+          echo NEXT_PUBLIC_AUTH_DOMAIN=${{ secrets.NEXT_PUBLIC_AUTH_DOMAIN }} >> .env
+          echo NEXT_PUBLIC_OAUTH_URL=${{ secrets.NEXT_PUBLIC_OAUTH_URL }} >> .env
+          echo NEXT_PUBLIC_GA_TRACKING_ID=${{ secrets.NEXT_PUBLIC_GA_TRACKING_ID }} >> .env
+          echo NEXT_PUBLIC_BANNER_BASE_PATH=${{ secrets.NEXT_PUBLIC_BANNER_BASE_PATH }} >> .env
+          echo NEXT_PUBLIC_DEFAULT_BACKGROUND_IMAGE_URL=${{ secrets.NEXT_PUBLIC_DEFAULT_BACKGROUND_IMAGE_URL }} >> .env
+          echo NEXT_PUBLIC_DEFAULT_USER_IMAGE=${{ secrets.NEXT_PUBLIC_DEFAULT_USER_IMAGE }} >> .env
+          echo NEXT_PUBLIC_USER_IMAGE_URL=${{ secrets.NEXT_PUBLIC_USER_IMAGE_URL }} >> .env
 
       - run: yarn
       - run: yarn build

src/apis/httpClient/httpClient.ts

@@ -170,4 +170,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),
 };

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;

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";

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;

src/helpers/getMealName.helper.ts

@@ -0,0 +1,14 @@
+const getMealName = (mealName: string) => {
+  switch (mealName) {
+    case "MORNING":
+      return "조식";
+    case "LUNCH":
+      return "중식";
+    case "DINNER":
+      return "석식";
+    default:
+      return mealName;
+  }
+};
+
+export default getMealName;

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";

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,

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 IMealListItem } 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";

src/interfaces/meal.interface.ts

@@ -0,0 +1,4 @@
+export default interface IMeal {
+  content: string;
+  cal: number;
+}

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>;
 }

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,36 @@ const Title = styled.span`
   }
 `;
 
+const Description = styled.span`
+  color: ${color.gray};
+  &:after {
+    content: "좌우 화살표 방향키를 탭해 날짜를 조정해보세요.";
+  }
+`;
+
+const MealList = styled.div`
+  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;

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;