홈 레이아웃에 API를 연결하고 버그를 수정했습니다.

src/components/common/Aside/InfomationBox.tsx

@@ -18,7 +18,6 @@ interface IInfomationBoxProps {
 
 const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => {
   const router = useRouter();
-  const isLoginedStudent = isLogined && user.role === USER.STUDENT;
   const { openModal } = useModal();
 
   const handleLoginButtonClick = () => {
@@ -40,24 +39,20 @@ const InfomationBox = ({ user, isLogined }: IInfomationBoxProps) => {
           rounded
         />
       )}
-      {isLoginedStudent && (
-        <>
-          <Column>
-            <UserInfoBox>
-              <UserGrade>{user.grade}</UserGrade>
-              <UserClass>{user.classNum}</UserClass>
-              <UserStudentNumber>{user.studentNumber}</UserStudentNumber>
-            </UserInfoBox>
-            <Row gap="4px">
-              <UserName>{user.name}</UserName>
-              <UserType>{getUserRole(user.role)}</UserType>
-            </Row>
-          </Column>
-          <InfomationButton onClick={handleLoginButtonClick}>
-            내 정보
-          </InfomationButton>
-        </>
-      )}
+      <Column>
+        <UserInfoBox>
+          <UserGrade>{user.grade}</UserGrade>
+          <UserClass>{user.classNum}</UserClass>
+          <UserStudentNumber>{user.studentNumber}</UserStudentNumber>
+        </UserInfoBox>
+        <Row gap="4px">
+          <UserName>{user.name}</UserName>
+          <UserType>{getUserRole(user.role)}</UserType>
+        </Row>
+      </Column>
+      <InfomationButton onClick={handleLoginButtonClick}>
+        내 정보
+      </InfomationButton>
       {!isLogined && (
         <>
           <LoginText>로그인이 필요해요</LoginText>

src/components/common/Aside/MeisterBox.tsx

@@ -1,31 +1,24 @@
 import styled from "styled-components";
 import { color, font } from "@/styles";
-import { SERVICE } from "@/constants";
 import { Row } from "@/components/Flex";
-
-const scores = [
-  {
-    name: SERVICE.MEISTER.NAME,
-    type: SERVICE.MEISTER.TYPE,
-  },
-  {
-    name: SERVICE.REWARD_POINTS.NAME,
-    type: SERVICE.REWARD_POINTS.TYPE,
-  },
-];
+import useMeister from "@/hooks/useMeister";
 
 const MeisterBox = () => {
+  const { meister } = useMeister();
   return (
     <Container>
-      {scores.map((score) => (
-        <ScoreHGroup key={score.type}>
-          <ScoreName>{score.name}</ScoreName>
-          <Row gap="4px">
-            <Score>{score.name === SERVICE.MEISTER.NAME ? 159.8 : 26}</Score>
-            <Rank>{score.name === SERVICE.MEISTER.NAME ? 11 : 4}</Rank>
-          </Row>
-        </ScoreHGroup>
-      ))}
+      <ScoreHGroup>
+        <ScoreName>인증제 점수</ScoreName>
+        <Row gap="4px">
+          <Score>{meister.score}</Score>
+        </Row>
+      </ScoreHGroup>
+      <ScoreHGroup>
+        <ScoreName>상벌점</ScoreName>
+        <Row gap="4px">
+          <Score>{meister.positivePoint - meister.negativePoint}</Score>
+        </Row>
+      </ScoreHGroup>
     </Container>
   );
 };

src/constants/key.constant.ts

@@ -11,6 +11,7 @@ const KEY = {
   RESERVE: "useReserve",
   MEISTER: "useMeister",
   MEISTER_DETAIL: "useMeisterDetail",
+  MEISTER_ME: "useMeisterMe",
   RANKING: "useRanking",
   MAIN: "useMain",
 } as const;

src/hooks/useMeal.ts

@@ -0,0 +1,21 @@
+import dayjs from "dayjs";
+
+const useMeal = () => {
+  const getMealTime = () => {
+    const now = dayjs();
+    const dinnerTime = now.add(1, "hour").add(20, "minute");
+    const morningTime = now.add(7, "hour");
+    const lunchTime = now.add(8, "hour");
+
+    if (now.isAfter(dinnerTime)) return "DINNER";
+    if (now.isAfter(morningTime)) return "MORNING";
+    if (now.isAfter(lunchTime)) return "LUNCH";
+    return "MORNING";
+  };
+
+  return {
+    getMealTime,
+  };
+};
+
+export default useMeal;

src/hooks/useMeister.ts

@@ -0,0 +1,29 @@
+import httpClient from "@/apis/httpClient";
+import Storage from "@/apis/storage";
+import { authorization } from "@/apis/token";
+import { KEY, TOKEN } from "@/constants";
+import { meisterStore } from "@/store/meister.store";
+import { useQuery } from "@tanstack/react-query";
+import React from "react";
+import { useRecoilState } from "recoil";
+
+const useMeister = () => {
+  const [meister, setMeister] = useRecoilState(meisterStore);
+
+  const { data: meisterInfo } = useQuery(
+    [KEY.MEISTER_ME],
+    async () => {
+      const { data } = await httpClient.meister.get(authorization());
+      return data;
+    },
+    { enabled: !!Storage.getItem(TOKEN.ACCESS) },
+  );
+
+  React.useEffect(() => {
+    if (meisterInfo) setMeister(meisterInfo.meister);
+  }, [setMeister, meisterInfo]);
+
+  return { meister };
+};
+
+export default useMeister;

src/store/meister.store.ts

@@ -0,0 +1,17 @@
+import { atom } from "recoil";
+
+export const emptyMeister = {
+  score: 0,
+  positivePoint: 0,
+  negativePoint: 0,
+  basicJobSkills: 0,
+  professionalTech: 0,
+  workEthic: 0,
+  humanities: 0,
+  foreignScore: 0,
+};
+
+export const meisterStore = atom({
+  key: "meisterStore",
+  default: emptyMeister,
+});

src/templates/home/index.tsx

@@ -2,41 +2,50 @@ import React from "react";
 import styled from "styled-components";
 import { Aside } from "@/components/common";
 import { flex } from "@/styles";
+import { getMealName } from "@/helpers";
 import { Column, Row } from "@/components/Flex";
+import useMeal from "@/hooks/useMeal";
 import { useMainQuery } from "./services/query.service";
 import HomeMeal from "./layouts/HomeMeal";
 import HomeReserve from "./layouts/HomeReserve";
 import HomeMainBanner from "./layouts/HomeMainBanner";
 import HomeCalender from "./layouts/HomeCalender";
 import HomePost from "./layouts/HomePost";
 import HomeRadarChart from "./layouts/HomeRadarChart";
+import HomeMiniBanner from "./layouts/HomeMiniBanner";
+import HomeBamboo from "./layouts/HomeBamboo";
 
 const HomePage = () => {
-  const { data } = useMainQuery();
-
-  React.useEffect(() => {
-    if (data) console.log(data);
-  }, [data]);
+  const { isSuccess, data } = useMainQuery();
+  const { getMealTime } = useMeal();
 
   return (
     <Layout>
-      <Container>
-        <Row gap="8px" width="100%">
-          <HomeMeal />
-          <HomeReserve />
-          <Aside />
-        </Row>
-        <Row gap="8px" width="100%">
-          <Column gap="8px" width="100%">
-            <HomeMainBanner href="/post" />
-            <Row gap="8px" width="100%">
-              <HomeCalender />
-              <HomePost />
-            </Row>
-          </Column>
-          <HomeRadarChart />
-        </Row>
-      </Container>
+      {isSuccess && (
+        <Container>
+          <Row gap="8px" width="100%">
+            <HomeMeal
+              {...data.meal.data[getMealTime()]}
+              name={getMealName(getMealTime())}
+            />
+            <HomeReserve />
+            <Aside />
+          </Row>
+          <Row gap="8px" width="100%">
+            <Column gap="8px" width="100%">
+              <HomeMainBanner href="/post" />
+              <Row gap="8px" width="100%">
+                <HomeCalender {...data.calender} />
+                <HomePost notice={data.notice} common={data.common} />
+              </Row>
+            </Column>
+            <Column gap="8px">
+              <HomeMiniBanner href="https://buma.wiki" />
+              <HomeBamboo {...data.bamboo} />
+            </Column>
+          </Row>
+        </Container>
+      )}
     </Layout>
   );
 };

src/templates/home/layouts/HomeBamboo.tsx

@@ -4,33 +4,29 @@ import styled from "styled-components";
 import { BambooIcon } from "@/assets/icons";
 import HomeHead from "./HomeHead";
 
-const HomeBamboo = () => {
+interface IHomeBambooProps {
+  allowedId: number;
+  content: string;
+}
+
+const HomeBamboo = ({ allowedId, content }: IHomeBambooProps) => {
   return (
     <Container>
       <HomeHead
         icon={<BambooIcon />}
-        title="#34번째 부마숲 이야기"
+        title={`#${allowedId}번째 부마숲 이야기`}
         href="/bamboo"
       />
       <StyledContent>
-        코로나 정책이 완화된 요즘, 인프런에서 주최하는 컨퍼런스 ‘인프콘’,
-        안드로이드 개발자를 위한 ‘드로이드 나이츠’, … 그 외 많은 IT인들을 위한
-        행사들이 곳곳에서 열리고 있습니다. 여러분은 컨퍼런스, IT 대회 등 각종 IT
-        행사들에 관심이 있으신가요? 특히 컨퍼런스는 IT 업계의 능력있는 사람들이
-        모여 지식을 공유하고, 네트워킹하며 지식의 뿌리를 넓힐 수 있는 매력적인
-        행사입니다. 공모전과 같은 대회 역시 자신의 역량을 시험하고 경험을 넓힐
-        수 있는 귀중한 기회가 되기도 합니다. 여러분은 개발자 컨퍼런스, 대회를
-        찾을 때 어떻게 찾으시나요? 어쩌다가 생각나서 행사 모음 사이트를
-        검색하거나 지인에게 건너 듣진 않으신가요? 이런 IT 행사 정보를 간편하게
-        한 데 모아볼 수 있다면 좋지 않을까요?
+        {content.length > 30 ? `${content}...` : content}
       </StyledContent>
     </Container>
   );
 };
 
 const Container = styled.div`
   width: 100%;
-  height: 20vh;
+  height: 100%;
   background-color: ${color.white};
   border-radius: 4px;
 `;
@@ -42,7 +38,7 @@ const StyledContent = styled.p`
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 180%;
-  -webkit-line-clamp: 3; /* 라인수 */
+  -webkit-line-clamp: 2; /* 라인수 */
   -webkit-box-orient: vertical;
   word-wrap: break-word;
 `;

src/templates/home/layouts/HomeCalender.tsx

@@ -4,20 +4,24 @@ import React from "react";
 import styled from "styled-components";
 import HomeHead from "./HomeHead";
 
-const HomeCalender = () => {
+interface IHomeCalenderProps {
+  calenders: Array<{
+    id: number;
+    title: string;
+    type: string;
+  }>;
+}
+
+const HomeCalender = ({ calenders }: IHomeCalenderProps) => {
   return (
     <Container>
       <HomeHead icon={<CalenderIcon />} title="오늘의 일정" href="/Calender" />
       <CalenderBody>
-        <CalenderType>학년일정</CalenderType>
-        <CalenderContent>
-          - asdmlkasnl
-          <br />
-          - asdmlkasnl
-          <br />
-          - asdmlkasnl
-          <br />- asdmlkasnl
-        </CalenderContent>
+        {calenders.map((calender) => (
+          <CalenderContent>
+            - {calender.title} ({calender.type})
+          </CalenderContent>
+        ))}
       </CalenderBody>
     </Container>
   );
@@ -38,11 +42,6 @@ const CalenderBody = styled.div`
   ${flex.COLUMN};
 `;
 
-const CalenderType = styled.span`
-  ${font.p3};
-  font-weight: 500;
-`;
-
 const CalenderContent = styled.p`
   ${font.p3};
   padding-left: 6px;

src/templates/home/layouts/HomeMeal.tsx

@@ -4,21 +4,21 @@ import React from "react";
 import styled from "styled-components";
 import HomeHead from "./HomeHead";
 
-const HomeMeal = () => {
+interface IHomeMealProps {
+  content: string;
+  cal: string;
+  name: string;
+}
+
+const HomeMeal = ({ content, cal, name }: IHomeMealProps) => {
   return (
     <Container>
       <HomeHead icon={<MealIcon />} title="오늘의 급식" href="/meal" />
       <MealBody>
-        <MealContent>
-          asdmlkasnl
-          <br />
-          asdmlkasnl
-          <br />
-          asdmlkasnl
-          <br />
-          asdmlkasnl
-        </MealContent>
-        <MealCalorie>852.1</MealCalorie>
+        <MealContent dangerouslySetInnerHTML={{ __html: content }} />
+        <MealCalorie>
+          {name}, {cal}
+        </MealCalorie>
       </MealBody>
     </Container>
   );
@@ -42,7 +42,8 @@ const MealBody = styled.div`
 const MealContent = styled.p`
   ${font.p3};
   white-space: pre;
-  line-height: 160%;
+  font-size: 12px;
+  line-height: 180%;
 `;
 
 const MealCalorie = styled.span`

src/templates/home/layouts/HomeMiniBanner.tsx

@@ -17,7 +17,8 @@ const HomeMiniBanner = ({ href }: IHomeMiniBanner) => {
 };
 
 const Container = styled(Link)`
-  width: 31.2vw;
+  width: 20vw;
+  height: 100%;
 `;
 
 const StyledBanner = styled(Image)`