Team-Growing · BaekSeungHa · Dec 9, 2023 · Dec 9, 2023 · Jan 16, 2024 · Jan 16, 2024
diff --git a/apps/admin/src/components/Absence/index.tsx b/apps/admin/src/components/Absence/index.tsx
@@ -42,7 +42,7 @@ const Absence = () => {
       />
       <DateInput onChange={onChangeDate} value={date} />
       <S.Wrap>
-        {data?.data.map((data) => (
+        {data?.data.absences.map((data) => (
           <S.ItemBox key={data.lectureId.value}>
             <Flex gap={30} align="center">
               <Flex gap={20} align="center">

diff --git a/apps/user/next.config.js b/apps/user/next.config.js
@@ -1,10 +1,8 @@
 /** @type {import('next').NextConfig} */
 
-const { withSentryConfig } = require("@sentry/nextjs");
-
 const ENV = {
   ENV: process.env.NODE_ENV ?? "",
-  API_HOST: process.env.API_HOST ?? process.env.REACT_APP_API_KEY,
+  API_HOST: process.env.API_HOST ?? process.env.NEXT_PUBLIC_BASE_URL,
 };
 
 const nextConfig = {
@@ -19,12 +17,6 @@ const nextConfig = {
   publicRuntimeConfig: { ...ENV },
 };
 
-const sentryWebpackPluginOptions = {
-  org: "checkin",
-  project: "checkin-user",
-  slient: true,
-};
-
-module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);
+module.exports = nextConfig;
 
 // Injected content via Sentry wizard below
diff --git a/apps/user/package.json b/apps/user/package.json
@@ -16,7 +16,8 @@
     "@checkin/types": "workspace:*",
     "@checkin/ui": "workspace:*",
     "@checkin/util": "workspace:*",
-    "@sentry/nextjs": "^7.82.0",
+    "@suspensive/react": "^1.23.2",
+    "@suspensive/react-query": "^1.23.2",
     "axios": "^1.4.0",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.12",

diff --git a/apps/user/sentry.client.config.ts b/apps/user/sentry.client.config.ts
diff --git a/apps/user/sentry.server.config.ts b/apps/user/sentry.server.config.ts
diff --git a/apps/user/src/app/layout.tsx b/apps/user/src/app/layout.tsx
@@ -0,0 +1,34 @@
+import Providers from "@/components/common/Provider";
+import StyledComponentsRegistry from "@/libs/Style/registry";
+import type { ReactNode } from "react";
+import PageLayout from "@/components/common/Layout";
+import "@/styles/font.css";
+import "@/styles/reset.css";
+import QueryClientProvider from "@/components/common/Provider/QueryClientProvider";
+
+export const metadata = {
+  title: "교내 방과후 관리 시스템 | 체크인",
+  description: "교내 방과후 관리 시스템 체크인 입니다.",
+};
+
+interface Props {
+  children: ReactNode;
+}
+
+const Layout = ({ children }: Props) => {
+  return (
+    <html lang="ko">
+      <body>
+        <StyledComponentsRegistry>
+          <QueryClientProvider>
+            <Providers>
+              <PageLayout>{children} </PageLayout>
+            </Providers>
+          </QueryClientProvider>
+        </StyledComponentsRegistry>
+      </body>
+    </html>
+  );
+};
+
+export default Layout;
diff --git a/apps/user/src/app/page.tsx b/apps/user/src/app/page.tsx
@@ -0,0 +1,15 @@
+import Home from "@/components/Home";
+import Head from "next/head";
+
+function HomePage() {
+  return (
+    <>
+      <Head>
+        <title>홈 | check-in</title>
+      </Head>
+      <Home />
+    </>
+  );
+}
+
+export default HomePage;
diff --git a/apps/user/src/app/profile/page.tsx b/apps/user/src/app/profile/page.tsx
@@ -0,0 +1,8 @@
+import Mypage from "@/components/Mypage";
+import React from "react";
+
+const ProfilePage = () => {
+  return <Mypage />;
+};
+
+export default ProfilePage;
diff --git a/apps/user/src/app/register/[grade]/page.tsx b/apps/user/src/app/register/[grade]/page.tsx
@@ -0,0 +1,8 @@
+import Register from "@/components/Register";
+import React from "react";
+
+const RegisterPage = () => {
+  return <Register />;
+};
+
+export default RegisterPage;
diff --git a/apps/user/src/pages/sign.tsx → apps/user/src/app/sign/page.tsx b/apps/user/src/pages/sign.tsx → apps/user/src/app/sign/page.tsx
@@ -1,4 +1,4 @@
-import Auth from "../components/Auth";
+import Auth from "@/components/Auth";
 
 const Signup = () => {
   return <Auth />;

diff --git a/apps/user/src/pages/suggestion.tsx → apps/user/src/app/suggestion/page.tsx b/apps/user/src/pages/suggestion.tsx → apps/user/src/app/suggestion/page.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Suggestion from "@/components/Suggestion";
 
 const SuggestionPage = () => {

diff --git a/apps/user/src/components/Auth/index.tsx b/apps/user/src/components/Auth/index.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import AuthImg from "../../assets/Image/AuthImg.svg";
 import Login from "./Login";

diff --git a/apps/user/src/components/Home/Attend/AttendList/index.tsx b/apps/user/src/components/Home/Attend/AttendList/index.tsx
@@ -1,15 +1,16 @@
 import React from "react";
 import * as S from "./style";
 import { EnrolLectureBox } from "@checkin/ui";
-import { LecturesResponse } from "@checkin/types";
+import { useGetTodayMyLecturesQuery } from "@/queries/Lectures/query";
 
 interface Props {
-  data: LecturesResponse;
   lectureId: number;
   onClickSetId: (value: number) => void;
 }
 
-const AttendList = ({ data, lectureId, onClickSetId }: Props) => {
+const AttendList = ({ lectureId, onClickSetId }: Props) => {
+  const { data } = useGetTodayMyLecturesQuery();
+
   return (
     <S.EnrolLectureListContainer>
       {data?.data.map((data) => (

diff --git a/apps/user/src/components/Home/Attend/index.tsx b/apps/user/src/components/Home/Attend/index.tsx
@@ -1,10 +1,11 @@
+"use client";
+
 import { Card, CardTitle, Flex } from "@checkin/ui";
 import React from "react";
-import { CalendarIcon } from "@checkin/icon";
 import useAttendance from "@/hooks/Attendance/useAttendance";
 import AttendList from "./AttendList";
 import AttendLectureForm from "./AttendLectureForm";
-import { useGetTodayMyLecturesQuery } from "@/queries/Lectures/query";
+import { CalendarIcon } from "@checkin/icon";
 
 const Attend = () => {
   const {
@@ -14,31 +15,24 @@ const Attend = () => {
     onClickSetId,
     onChangeAttendanceCode,
   } = useAttendance();
-  const { data } = useGetTodayMyLecturesQuery();
 
   return (
-    <Card type="Enrol">
-      <CardTitle>
-        <CalendarIcon />
-        출석코드 입력
-      </CardTitle>
-      {data?.data.length === 0 ? (
-        <>오늘은 방과후가 없습니다</>
-      ) : (
+    <>
+      <Card type="Enrol">
+        <CardTitle>
+          <CalendarIcon />
+          출석코드 입력
+        </CardTitle>
         <Flex gap={20} customStyle={{ width: "100%", height: "100%" }}>
-          <AttendList
-            data={data!}
-            lectureId={lectureId}
-            onClickSetId={onClickSetId}
-          />
+          <AttendList lectureId={lectureId} onClickSetId={onClickSetId} />
           <AttendLectureForm
             attendanceCode={attendanceCode}
             onAttendanceLecture={onAttendanceLecture}
             onChangeAttendanceCode={onChangeAttendanceCode}
           />
         </Flex>
-      )}
-    </Card>
+      </Card>
+    </>
   );
 };
 

diff --git a/apps/user/src/components/Home/Notifiction/index.tsx b/apps/user/src/components/Home/Notifiction/index.tsx
@@ -1,11 +1,13 @@
+"use client";
+
 import { CardTitle } from "@checkin/ui";
 import React, { useState } from "react";
 import { NotifictionIcon } from "@checkin/icon";
 import { useGetActiveNoticeQuery } from "@/queries/Notice/query";
 import { NoticeContainer, NoticeContent } from "./style";
 
 const Notifiction = () => {
-  const { data } = useGetActiveNoticeQuery();
+  const { data } = useGetActiveNoticeQuery({ suspense: true });
   const [noticeLength, setNoticeLength] = useState(data?.data.length! - 1);
 
   setTimeout(() => {

diff --git a/apps/user/src/components/Home/TodayLectures/index.tsx b/apps/user/src/components/Home/TodayLectures/index.tsx
@@ -1,21 +1,36 @@
-import { Card, CardTitle } from "@checkin/ui";
 import React from "react";
 import TodayLaectureList from "./TodayLectureList";
-import { LectureIcon } from "@checkin/icon";
 import { useGetTodayLectures } from "@/queries/Lectures/query";
+import { LectureListWrapper } from "./TodayLectureList/style";
+import { LectureBox } from "@checkin/ui";
 
 const TodayLectures = () => {
-  const { data } = useGetTodayLectures();
+  const { data } = useGetTodayLectures({ suspense: true });
 
   return (
-    <Card type="Lecture">
-      <CardTitle>
-        <LectureIcon />
-        오늘의 방과후
-      </CardTitle>
-      {data?.data.length === 0 && <div>오늘의 방과후는 없습니다 </div>}
-      {data?.data && <TodayLaectureList data={data} />}
-    </Card>
+    <>
+      {data?.data.length === 0 ? (
+        <div>오늘의 방과후는 없습니다 </div>
+      ) : (
+        <div style={{ overflowX: "auto" }}>
+          <LectureListWrapper>
+            <div style={{ display: "flex", columnGap: "20px" }}>
+              {data?.data.map((data) => (
+                <LectureBox
+                  key={data.lectureId.value}
+                  grade={data.acceptableStudent.targetGrade}
+                  lectureTag={data.lectureTag}
+                  people={data.enrollStudent}
+                  place={data.placeType}
+                  teacher={data.lectureTeacher.name}
+                  title={data.lectureName}
+                />
+              ))}
+            </div>
+          </LectureListWrapper>
+        </div>
+      )}
+    </>
   );
 };
 

diff --git a/apps/user/src/components/Home/index.tsx b/apps/user/src/components/Home/index.tsx
@@ -1,16 +1,37 @@
+"use client";
+
 import React from "react";
 import * as S from "./style";
-import { Flex } from "@checkin/ui";
+import { Card, CardTitle, Flex } from "@checkin/ui";
 import TodayLectures from "./TodayLectures";
 import Notifiction from "./Notifiction";
 import Absence from "./Absence";
 import Attend from "./Attend";
+import { Suspense } from "@suspensive/react";
+import { CalendarIcon, LectureIcon } from "@checkin/icon";
+import Token from "@/libs/token/Token";
+import { ACCESS_TOKEN_KEY } from "@/constant/Token/Token.constant";
 
 const Home = () => {
   return (
     <S.HomeContainer>
-      <TodayLectures />
-      <Notifiction />
+      <Card type="Lecture">
+        <CardTitle>
+          <LectureIcon />
+          오늘의 방과후
+        </CardTitle>
+        <Suspense
+          fallback={<span style={{ backgroundColor: "red" }}>loading...</span>}
+        >
+          <TodayLectures />
+        </Suspense>
+      </Card>
+
+      <Suspense
+        fallback={<span style={{ backgroundColor: "red" }}>loading</span>}
+      >
+        <Notifiction />
+      </Suspense>
       <Flex
         customStyle={{
           width: "100%",

diff --git a/apps/user/src/components/Mypage/MyCancelLecture/index.tsx b/apps/user/src/components/Mypage/MyCancelLecture/index.tsx
@@ -3,26 +3,21 @@ import { MyCancelLecturesContainer } from "./style";
 import { useGetMyAbsenceQuery } from "@/queries/Absence/query";
 import { CheckMyAbsense } from "@checkin/ui";
 
-interface Props {
-  grade: number;
-  number: number;
-  room: number;
-  name: string;
-}
+const MyCancelLectures = () => {
+  const { data: myAbsenceData } = useGetMyAbsenceQuery({ suspense: true });
 
-const MyCancelLectures = ({ grade, name, number, room }: Props) => {
-  const { data: myAbsenceData } = useGetMyAbsenceQuery();
   return (
     <MyCancelLecturesContainer>
-      {myAbsenceData?.data.map((data) => (
+      {myAbsenceData?.data.absences[0] === undefined && <span>없다</span>}
+      {myAbsenceData?.data.absences.map((data) => (
         <CheckMyAbsense
           key={data.absenceId.value}
-          grade={grade}
+          grade={myAbsenceData.data.info.studentInfo.grade}
           isCheck={data.absenceStatus === "ABSENCE_PENDING" ? false : true}
-          name={name}
-          number={number}
+          name={myAbsenceData.data.info.name}
+          number={myAbsenceData.data.info.studentInfo.number}
           reason={data.reason}
-          room={room}
+          room={myAbsenceData.data.info.studentInfo.room}
         />
       ))}
     </MyCancelLecturesContainer>

diff --git a/apps/user/src/components/Mypage/MyLectures/index.tsx b/apps/user/src/components/Mypage/MyLectures/index.tsx
@@ -2,19 +2,19 @@ import { LectureTagBox } from "@checkin/ui";
 import React from "react";
 import { MyLectusContainer } from "./style";
 import { LecturesResponse } from "@checkin/types";
+import { useGetMyLectures } from "@/queries/Lectures/query";
 
-interface Props {
-  serverMemberLecturesData: LecturesResponse;
-}
-
-const MyLectures = ({ serverMemberLecturesData }: Props) => {
+const MyLectures = () => {
+  const { data: serverMemberLecturesData } = useGetMyLectures({
+    suspense: true,
+  });
   return (
     <>
       <MyLectusContainer>
-        {serverMemberLecturesData.data.length === 0 && (
+        {serverMemberLecturesData?.data.lectures.length === 0 && (
           <div>신청된 방과후가 없습니다</div>
         )}
-        {serverMemberLecturesData.data.map((data) => (
+        {serverMemberLecturesData?.data.lectures.map((data) => (
           <LectureTagBox
             key={data.lectureId.value}
             lectureTag={data.lectureTag}