feature/responsive web

src/app/(root)/attend-types/page.tsx

@@ -1,6 +1,8 @@
 import { AttendTypeApi } from "@/entities/attend-types/api";
 import CreateAttendType from "@/features/manage-attend-types/ui/CreateAttendType";
 import DeleteAttendType from "@/features/manage-attend-types/ui/DeleteAttendType";
+import MobileCreateAttendType from "@/features/manage-attend-types/ui/MobileCreateAttendType";
+import MobileDeleteAttendType from "@/features/manage-attend-types/ui/MobileDeleteAttendType";
 import OkIcon from "@/shared/icons/OkIcon";
 import Section from "@/widgets/section/ui/Section";
 import Table from "@/widgets/table/ui/Table";
@@ -9,18 +11,39 @@ export default async function AttendTypesPage() {
   const { data } = await AttendTypeApi.getAttendTypes();
 
   return (
-    <Section
-      title="출석 종류"
-      description="출석 종류를 추가해보세요!"
-      icon={<OkIcon size={24} />}
-      headerOptions={<CreateAttendType />}>
-      <Table
-        header={[{ title: "종류명" }, { title: "", width: "117px" }]}
-        rows={data.map((type) => [
-          type.name,
-          <DeleteAttendType key={type.id} attendTypeId={type.id} />,
-        ])}
-      />
-    </Section>
+    <div className="overflow-hidden">
+      <div className="w-full h-full flex xl:hidden">
+        <Section
+          title="출석 종류"
+          description="출석 종류를 추가해보세요!"
+          icon={<OkIcon size={24} />}
+          headerOptions={<MobileCreateAttendType />}
+        >
+          <Table
+            header={[{ title: "종류명" }, { title: "", width: "117px" }]}
+            rows={data.map((type) => [
+              type.name,
+              <MobileDeleteAttendType key={type.id} attendTypeId={type.id} />,
+            ])}
+          />
+        </Section>
+      </div>
+      <div className="w-full h-full hidden xl:flex">
+        <Section
+          title="출석 종류"
+          description="출석 종류를 추가해보세요!"
+          icon={<OkIcon size={24} />}
+          headerOptions={<CreateAttendType />}
+        >
+          <Table
+            header={[{ title: "종류명" }, { title: "", width: "117px" }]}
+            rows={data.map((type) => [
+              type.name,
+              <DeleteAttendType key={type.id} attendTypeId={type.id} />,
+            ])}
+          />
+        </Section>
+      </div>
+    </div>
   );
 }

src/app/(root)/checkpoints/page.tsx

@@ -1,6 +1,7 @@
 import { CheckpointApi } from "@/entities/checkpoints/api";
 import CreateCheckpoint from "@/features/manage-checkpoints/ui/CreateCheckpoint";
 import ManageCheckpoint from "@/features/manage-checkpoints/ui/ManageCheckpoint";
+import MobileManageCheckpoint from "@/features/manage-checkpoints/ui/MobileManageCheckpoint";
 import CalendarIcon from "@/shared/icons/CalendarIcon";
 import Section from "@/widgets/section/ui/Section";
 import Table from "@/widgets/table/ui/Table";
@@ -9,27 +10,57 @@ export default async function CheckpointsPage() {
   const { data } = await CheckpointApi.getCheckpoints();
 
   return (
-    <Section
-      title="체크포인트 조정"
-      description="출석 시간을 수정해 보세요!"
-      icon={<CalendarIcon size={24} />}
-      headerOptions={<CreateCheckpoint />}>
-      <Table
-        header={[
-          { title: "체크포인트 이름", width: "202px" },
-          { title: "체크포인트 기간", width: "202px" },
-          { title: "출석 가능 기간", width: "202px" },
-          { title: "" },
-          { title: "", width: "202px" },
-        ]}
-        rows={data.map((checkpoint) => [
-          checkpoint.name,
-          `${checkpoint.startAt.slice(0, 5)} ~ ${checkpoint.endAt.slice(0, 5)}`,
-          `${checkpoint.attendanceStartAt.slice(0, 5)} ~ ${checkpoint.attendanceEndAt.slice(0, 5)}`,
-          "",
-          <ManageCheckpoint key={checkpoint.id} data={checkpoint} />,
-        ])}
-      />
-    </Section>
+    <div className="overflow-hidden">
+      <div className="w-full h-full flex xl:hidden">
+        <Section
+          title="체크포인트 조정"
+          description="출석 시간을 수정해 보세요!"
+          icon={<CalendarIcon size={24} />}
+          headerOptions={<CreateCheckpoint />}
+        >
+          <Table
+            header={[
+              { title: "체크포인트 이름", width: "202px" },
+              { title: "체크포인트 기간", width: "202px" },
+              { title: "출석 가능 기간", width: "202px" },
+              { title: "" },
+              { title: "", width: "100px" },
+            ]}
+            rows={data.map((checkpoint) => [
+              checkpoint.name,
+              `${checkpoint.startAt.slice(0, 5)} ~ ${checkpoint.endAt.slice(0, 5)}`,
+              `${checkpoint.attendanceStartAt.slice(0, 5)} ~ ${checkpoint.attendanceEndAt.slice(0, 5)}`,
+              "",
+              <MobileManageCheckpoint key={checkpoint.id} data={checkpoint} />,
+            ])}
+          />
+        </Section>
+      </div>
+      <div className="w-full h-full hidden xl:flex ">
+        <Section
+          title="체크포인트 조정"
+          description="출석 시간을 수정해 보세요!"
+          icon={<CalendarIcon size={24} />}
+          headerOptions={<CreateCheckpoint />}
+        >
+          <Table
+            header={[
+              { title: "체크포인트 이름", width: "202px" },
+              { title: "체크포인트 기간", width: "202px" },
+              { title: "출석 가능 기간", width: "202px" },
+              { title: "" },
+              { title: "", width: "202px" },
+            ]}
+            rows={data.map((checkpoint) => [
+              checkpoint.name,
+              `${checkpoint.startAt.slice(0, 5)} ~ ${checkpoint.endAt.slice(0, 5)}`,
+              `${checkpoint.attendanceStartAt.slice(0, 5)} ~ ${checkpoint.attendanceEndAt.slice(0, 5)}`,
+              "",
+              <ManageCheckpoint key={checkpoint.id} data={checkpoint} />,
+            ])}
+          />
+        </Section>
+      </div>
+    </div>
   );
 }

src/app/(root)/layout.tsx

@@ -1,17 +1,21 @@
 import SearchBar from "@/features/search/ui/SearchBar";
 import AuthProvider from "@/shared/provider/AuthProvider";
+import Header from "@/widgets/header/ui/Header";
 import Sidebar from "@/widgets/sidebar/ui/Sidebar";
+import Tabbar from "@/widgets/tabbar/ui/Tabbar";
 import { PropsWithChildren } from "react";
 
 export default function MainLayout({ children }: PropsWithChildren) {
   return (
-    <div className="w-full h-screen flex items-start">
+    <div className="w-full h-svh flex items-start flex-col xl:flex-row overflow-hidden">
       <AuthProvider />
       <Sidebar />
-      <div className="flex-1 px-13 pt-13 flex flex-col gap-4.5">
+      <Header />
+      <main className="w-full flex-1 h-[calc(100%-147px)] xl:h-full xl:px-[70px] xl:pt-13 pb-1 xl:pb-5 flex flex-col gap-4.5 overflow-y-auto">
         <SearchBar />
-        <main className="w-full h-[calc(100vh-114px)]">{children}</main>
-      </div>
+        {children}
+      </main>
+      <Tabbar />
     </div>
   );
 }

src/app/(root)/students/page.tsx

@@ -1,5 +1,6 @@
 import { StudentApi } from "@/entities/students/api";
 import FilterStudent from "@/features/filter/ui/FilterStudent";
+import MobileManageStudent from "@/features/manage-students/ui/MobileManageStudent";
 import ManageStudent from "@/features/manage-students/ui/ManageStudent";
 import PersonIcon from "@/shared/icons/PersonIcon";
 import { SearchParams } from "@/shared/types/search-params";
@@ -17,25 +18,52 @@ export default async function StudentsPage({
   );
 
   return (
-    <Section
-      title="학생 관리"
-      description="학생 정보를 관리해 보세요!"
-      icon={<PersonIcon size={24} />}
-      headerOptions={<FilterStudent />}>
-      <Table
-        header={[
-          { title: "학번", width: "124px" },
-          { title: "이름", width: "112px" },
-          { title: "이메일" },
-          { title: "", width: "240px" },
-        ]}
-        rows={data.map((student) => [
-          `${student.studentInfo.grade}${student.studentInfo.classNumber}${pad(student.studentInfo.num, 2)}`,
-          student.username,
-          student.email,
-          <ManageStudent key={student.id} data={student} />,
-        ])}
-      />
-    </Section>
+    <div className="overflow-hidden">
+      <div className="w-full h-full flex xl:hidden">
+        <Section
+          title="학생 관리"
+          description="학생 정보를 관리해 보세요!"
+          icon={<PersonIcon size={24} />}
+          headerOptions={<FilterStudent />}>
+          <Table
+            header={[
+              { title: "학번", width: "124px" },
+              { title: "이름", width: "112px" },
+              { title: "이메일" },
+              { title: "", width: "240px" },
+            ]}
+            rows={data.map((student) => [
+              `${student.studentInfo.grade}${student.studentInfo.classNumber}${pad(student.studentInfo.num, 2)}`,
+              student.username,
+              student.email,
+              <MobileManageStudent key={student.id} data={student} />,
+            ])}
+          />
+        </Section>
+      </div>
+
+      <div className="w-full h-full hidden xl:flex">
+        <Section
+          title="학생 관리"
+          description="학생 정보를 관리해 보세요!"
+          icon={<PersonIcon size={24} />}
+          headerOptions={<FilterStudent />}>
+          <Table
+            header={[
+              { title: "학번", width: "124px" },
+              { title: "이름", width: "112px" },
+              { title: "이메일" },
+              { title: "", width: "240px" },
+            ]}
+            rows={data.map((student) => [
+              `${student.studentInfo.grade}${student.studentInfo.classNumber}${pad(student.studentInfo.num, 2)}`,
+              student.username,
+              student.email,
+              <ManageStudent key={student.id} data={student} />,
+            ])}
+          />
+        </Section>
+      </div>
+    </div>
   );
 }

src/app/globals.css

@@ -77,4 +77,4 @@
   overscroll-behavior: none;
   user-select: none;
   font-family: "Pretendard", sans-serif;
-}
+}

src/app/layout.tsx

@@ -24,6 +24,10 @@ export default function RootLayout({
         <BdsRegistry>
           <QueryProvider>
             <ModalProvider />
+            <div id="__next" className="xl:pb-[56px]">
+              <main className="xl:pb-[90px] box-border">{children}</main>
+            </div>
+
             {children}
           </QueryProvider>
         </BdsRegistry>

src/features/manage-attend-types/ui/MobileCreateAttendType.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { Button, modal } from "@bds-web/ui";
+import CreateAttendTypeModal from "./CreateAttendTypeModal";
+
+const MobileCreateAttendType = () => {
+  return (
+    <Button buttonSize="medium" buttonType="primary" onClick={() => modal.open({ title: "출석 종류 추가하기", content: <CreateAttendTypeModal /> })}>출석 종류 추가</Button>
+  )
+}
+
+export default MobileCreateAttendType

src/features/manage-attend-types/ui/MobileDeleteAttendType.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Button, modal } from "@bds-web/ui";
+import DeleteAttendTypeModal from "./DeleteAttendTypeModal";
+import { colors } from "@bds-web/colors";
+
+interface Props {
+  attendTypeId: number;
+}
+
+const MobileDeleteAttendType = ({ attendTypeId }: Props) => {
+  return (
+    <Button
+      buttonSize="small"
+      buttonType="text"
+      style={{color: colors.red.dark}} // 임시방편
+      onClick={() =>
+        modal.open({
+          title: "출석 종류를 삭제하시겠습니까?",
+          content: <DeleteAttendTypeModal attendTypeId={attendTypeId} />,
+        })
+      }>
+      삭제
+    </Button>
+  );
+};
+
+export default MobileDeleteAttendType;

src/features/manage-checkpoints/ui/MobileCreateCheckpoint.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { Button, modal } from "@bds-web/ui";
+import CreateCheckpointModal from "./CreateCheckpointModal";
+
+const CreateCheckpoint = () => {
+  return (
+    <Button buttonSize="medium" buttonType="primary" onClick={() => modal.open({ title: "체크포인트 추가하기", content: <CreateCheckpointModal /> })}>
+      체크포인트 추가하기
+    </Button>
+  )
+}
+
+export default CreateCheckpoint

src/features/manage-checkpoints/ui/MobileManageCheckpoint.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Button, modal } from "@bds-web/ui";
+import { Checkpoint } from "@/entities/checkpoints/types";
+import MobileUpdateCheckpointModal from "./MobileUpdateCheckpointModal";
+
+interface Props {
+  data: Checkpoint;
+}
+
+const MobileManageCheckpoint = ({ data }: Props) => {
+  return (
+    <div className="flex gap-2">
+      <Button
+        buttonType="text"
+        buttonSize="small"
+        onClick={() =>
+          modal.open({
+            title: "체크포인트 정보 수정",
+            content: <MobileUpdateCheckpointModal data={data} />,
+          })
+        }
+      >
+        수정
+      </Button>
+    </div>
+  );
+};
+
+export default MobileManageCheckpoint;