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/globals.css

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

src/app/layout.tsx

@@ -24,7 +24,9 @@ export default function RootLayout({
         <BdsRegistry>
           <QueryProvider>
             <ModalProvider />
-            {children}
+            <div className="xl:pb-14">
+              <main className="xl:pb-22.5 box-border">{children}</main>
+            </div>
           </QueryProvider>
         </BdsRegistry>
       </body>

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;

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

@@ -0,0 +1,100 @@
+"use client";
+
+import { Checkpoint } from "@/entities/checkpoints/types";
+import { Button, TextInput } from "@bds-web/ui";
+import { useUpdateCheckpoint } from "../hooks/useUpdateCheckpoint";
+import { useDeleteCheckpoint } from "../hooks/useDeleteCheckpoint";
+
+interface Props {
+  data: Checkpoint;
+}
+
+const MobileUpdateCheckpointModal = ({ data }: Props) => {
+  const {
+    name,
+    setName,
+    startAt,
+    setStartAt,
+    endAt,
+    setEndAt,
+    attendanceStartAt,
+    setAttendanceStartAt,
+    attendanceEndAt,
+    setAttendanceEndAt,
+    disabled,
+    onSubmit,
+  } = useUpdateCheckpoint(data);
+
+  const deleteCheckpoint = useDeleteCheckpoint(data.id);
+
+  return (
+    <form className="w-full flex flex-col gap-4" onSubmit={onSubmit}>
+      <TextInput
+        label="실 이름 설정"
+        placeholder="실 이름을 설정해주세요."
+        width="100%"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+      <div className="space-y-1">
+        <span className="text-caption1 text-static-black">
+          체크포인트 기간 설정
+        </span>
+        <div className="w-full flex items-center justify-between">
+          <TextInput
+            placeholder="HH:MM"
+            width="144px"
+            value={startAt}
+            onChange={(e) => setStartAt(e.target.value)}
+          />
+          <span>-</span>
+          <TextInput
+            placeholder="HH:MM"
+            width="144px"
+            value={endAt}
+            onChange={(e) => setEndAt(e.target.value)}
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <span className="text-caption1 text-static-black">
+          출석 가능 기간 설정
+        </span>
+        <div className="w-full flex items-center justify-between">
+          <TextInput
+            placeholder="HH:MM"
+            width="144px"
+            value={attendanceStartAt}
+            onChange={(e) => setAttendanceStartAt(e.target.value)}
+          />
+          <span>-</span>
+          <TextInput
+            placeholder="HH:MM"
+            width="144px"
+            value={attendanceEndAt}
+            onChange={(e) => setAttendanceEndAt(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <Button
+        buttonSize="large"
+        buttonType="primary"
+        type="submit"
+        disabled={disabled}
+      >
+        체크포인트 추가하기
+      </Button>
+      <Button
+        buttonType="danger"
+        buttonSize="medium"
+        onClick={deleteCheckpoint}
+        style={{ flex: 1 }}
+      >
+        삭제
+      </Button>
+    </form>
+  );
+};
+
+export default MobileUpdateCheckpointModal;

src/features/manage-limited-users/ui/CreateLimitedUser.tsx

@@ -14,7 +14,8 @@ const CreateLimitedUser = () => {
           content: <CreateLimitedUserModal />,
         })
       }>
-      제한된 사용자 추가하기
+      <p className="xl:hidden">제한된 사용자 추가</p>
+      <p className="hidden xl:inline">제한된 사용자 추가하기</p>
     </Button>
   );
 };