[ Feat ] my page - study 관리 탭 구현

src/app/user/setting/page.tsx

@@ -2,8 +2,10 @@
 import Sidebar from "@/common/component/Sidebar";
 import { sidebarWrapper } from "@/styles/shared.css";
 import SettingStep from "@/view/user/setting/SettingStep";
+import StudyList from "@/view/user/setting/StudyList";
 import type { SettingSteps } from "@/view/user/setting/type";
 import { useState } from "react";
+import { match } from "ts-pattern";
 
 const UserSettingPage = () => {
   const [step, setStep] = useState<SettingSteps>("my-profile");
@@ -12,7 +14,12 @@ const UserSettingPage = () => {
       <Sidebar>
         <SettingStep step={step} setStep={setStep} />
       </Sidebar>
-      {/* children */}
+      {match(step)
+        .with("my-profile", () => <></>)
+        .with("study-setting", () => <StudyList />)
+        .with("account-setting", () => <></>)
+        .with("alarm-setting", () => <></>)
+        .exhaustive()}
     </main>
   );
 };

src/common/component/Menu/Menu.tsx

@@ -41,12 +41,18 @@ const Menu = ({ label, renderTriggerButton, renderList }: MenuProps) => {
         aria-controls={menuId}
         onClick={handleClick}
         onKeyDown={handleA11yClick(handleClick)}
+        tabIndex={0}
       >
         {renderTriggerButton}
       </Slot>
 
       {showMenu && (
-        <Slot id={menuId} aria-labelledby={triggerId} onClick={handleClose}>
+        <Slot
+          id={menuId}
+          aria-labelledby={triggerId}
+          onClick={handleClose}
+          onKeyDown={handleA11yClick(handleClose)}
+        >
           {renderList}
         </Slot>
       )}

src/shared/component/Table/Table.stories.tsx

@@ -1,9 +1,8 @@
 import { StudyListData, alarmSettingsData } from "@/shared/constant/example";
 import { theme } from "@/styles/themes.css";
-import {
-  ALARM_SETTINGS_COLUMNS,
-  STUDY_LIST_COLUMNS,
-} from "@/view/user/setting/constant";
+
+import { STUDY_LIST_COLUMNS } from "@/view/user/setting/StudyList/StudyListTable/constant";
+import { ALARM_SETTINGS_COLUMNS } from "@/view/user/setting/constant";
 import type { Meta } from "@storybook/react";
 import { DataTable } from ".";
 

src/shared/component/Table/TableElements/Body.tsx

@@ -1,6 +1,6 @@
 import type { TableDataType, TableType } from "@/shared/type/table";
 import TableCell from "./TableCell";
-import { tableCellTextStyle } from "./index.css";
+import { tableCellTextStyle, tableRowStyle } from "./index.css";
 
 type BodyProps<T> = {
   type: TableType;
@@ -13,7 +13,7 @@ const Body = <T,>({ rows, cols, type }: BodyProps<T>) => {
     <tbody>
       {rows.map((row, idx) => (
         // TODO: api 연결 후, raw data에 고유 id값 추가 등의 방안으로 key 교체하기
-        <tr key={idx}>
+        <tr key={idx} className={tableRowStyle}>
           {cols.map(({ key, align, Cell }) => (
             <TableCell
               key={key?.toString()}

src/shared/component/Table/TableElements/index.css.ts

@@ -5,12 +5,15 @@ import { recipe } from "@vanilla-extract/recipes";
 export const wrapperStyle = style({
   position: "relative",
   display: "flex",
+  alignItems: "flex-start",
   justifyContent: "center",
 
   overflow: "auto",
 
   width: "100%",
-  height: "100%",
+  "::-webkit-scrollbar": {
+    width: 0,
+  },
 });
 
 export const tableHeadStyle = recipe({
@@ -49,7 +52,7 @@ export const withdrawTextStyle = style({
 
 export const tableStyle = recipe({
   base: {
-    width: "100rem",
+    width: "90%",
 
     captionSide: "top",
   },
@@ -77,7 +80,12 @@ export const tableCaptionStyle = recipe({
   variants: {
     type: {
       스터디리스트: {
+        position: "sticky",
+        top: 0,
+        zIndex: theme.zIndex.bottom,
+
         padding: "1.5rem 0",
+        background: theme.color.bg,
       },
       알림설정: {
         padding: "1.5rem 2rem",
@@ -93,8 +101,11 @@ export const tableHeaderStyle = recipe({
   variants: {
     type: {
       스터디리스트: {
-        height: "3.6rem",
+        position: "sticky",
+        top: "6.6rem",
+        zIndex: theme.zIndex.bottom,
 
+        height: "3.6rem",
         verticalAlign: "top",
         ":after": {
           content: "",
@@ -120,6 +131,13 @@ export const tableHeaderStyle = recipe({
   },
 });
 
+export const tableRowStyle = style({
+  borderRadius: ".4rem",
+  ":hover": {
+    backgroundColor: theme.color.mg5,
+  },
+});
+
 export const tableCellStyle = recipe({
   base: {
     height: "4.6rem",

src/shared/component/Table/index.css.ts

@@ -1,5 +1,4 @@
 import { theme } from "@/styles/themes.css";
-import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
 export const headWrapper = recipe({
@@ -35,7 +34,7 @@ export const pinStyle = recipe({
     active: {
       true: {
         ["path" as string]: {
-          fill: "#6659FF",
+          fill: theme.color.purple,
         },
       },
       false: {
@@ -46,7 +45,3 @@ export const pinStyle = recipe({
     },
   },
 });
-
-export const sortIconStyle = style({
-  cursor: "pointer",
-});

src/shared/constant/example.ts

@@ -1,5 +1,5 @@
 import IcnNew from "@/asset/svg/icn_new.svg?url";
-import type { AlarmSettingsDataType, StudyListDataType } from "../type/table";
+import type { AlarmSettingsDataType, StudyListType } from "../type/table";
 
 export const alarms = [
   {
@@ -44,78 +44,78 @@ export const alarms = [
   },
 ];
 
-export const StudyListData: StudyListDataType[] = [
+export const StudyListData: StudyListType[] = [
   {
-    pin: true,
-    groupName: "soongsil univ algorithm",
-    startDate: new Date("2024-08-10"),
+    isBookmarked: true,
+    name: "soongsil univ algorithm",
+    startDate: new Date("2024-01-10"),
     endDate: new Date("2024-09-10"),
-    role: "스터디장",
-    isPublic: true,
-    status: "Favorites",
+    isOwner: true,
+    status: "bookmarked",
   },
   {
-    pin: true,
-    groupName: "soongsil univ algorithm",
-    startDate: new Date("2024-08-10"),
+    isBookmarked: true,
+    name: "soongsil univ algorithm",
+    startDate: new Date("2024-05-10"),
     endDate: new Date("2024-09-10"),
-    role: "스터디장",
-    isPublic: true,
-    status: "Queued",
+    isOwner: true,
+    status: "queued",
   },
   {
-    pin: true,
-    groupName: "soongsil univ algorithm",
-    startDate: new Date("2024-08-10"),
+    isBookmarked: true,
+    name: "soongsil univ algorithm",
+    startDate: new Date("2024-03-10"),
     endDate: new Date("2024-09-10"),
-    role: "스터디장",
-    isPublic: true,
-    status: "Queued",
+    isOwner: true,
+    status: "bookmarked",
   },
   {
-    pin: true,
-    groupName: "soongsil univ algorithm",
+    isBookmarked: true,
+    name: "soongsil univ algorithm",
     startDate: new Date("2024-08-10"),
     endDate: new Date("2024-09-10"),
-    role: "스터디장",
-    isPublic: true,
-    status: "Progress",
+    isOwner: true,
+    status: "inProgress",
   },
   {
-    pin: false,
-    groupName: "soongsil univ algorithm",
-    startDate: new Date("2024-08-10"),
+    isBookmarked: false,
+    name: "soongsil univ algorithm",
+    startDate: new Date("2024-04-10"),
     endDate: new Date("2024-09-10"),
-    role: "스터디장",
-    isPublic: true,
-    status: "Queued",
+    isOwner: true,
+    status: "queued",
   },
   {
-    pin: false,
-    groupName: "soongsil univ algorithm",
-    startDate: new Date("2024-08-10"),
+    isBookmarked: false,
+    name: "soongsil univ algorithm",
+    startDate: new Date("2024-04-05"),
     endDate: new Date("2024-09-10"),
-    role: "스터디장",
-    isPublic: false,
-    status: "Queued",
+    isOwner: true,
+    status: "inProgress",
   },
   {
-    pin: true,
-    groupName: "soongsil univ algorithm",
-    startDate: new Date("2024-08-10"),
+    isBookmarked: true,
+    name: "soongsil univ algorithm",
+    startDate: new Date("2024-01-10"),
     endDate: new Date("2024-09-10"),
-    role: "스터디장",
-    isPublic: false,
-    status: "Queued",
+    isOwner: true,
+    status: "inProgress",
   },
   {
-    pin: false,
-    groupName: "soongsil univ algorithm",
-    startDate: new Date("2024-08-10"),
+    isBookmarked: false,
+    name: "soongsil univ algorithm",
+    startDate: new Date("2024-07-10"),
+    endDate: new Date("2024-09-10"),
+    isOwner: true,
+    status: "queued",
+  },
+  {
+    isBookmarked: false,
+    name: "soongsil univ algorithm",
+    startDate: new Date("2023-11-10"),
     endDate: new Date("2024-09-10"),
-    role: "스터디장",
-    isPublic: true,
-    status: "Queued",
+    isOwner: true,
+    status: "queued",
   },
 ];
 

src/shared/type/table.ts

@@ -1,4 +1,4 @@
-import type { GroupStatusLabel } from "@/api/user/type";
+import type { GroupListItem, GroupStatus } from "@/api/user/type";
 import type { ComponentProps, FC } from "react";
 import type TableHead from "../component/Table/TableElements/TableHead";
 
@@ -13,15 +13,19 @@ export type TableDataType<T> = {
   width: number;
 };
 
-export type StudyListDataType = {
-  pin: boolean;
-  groupName: string;
+export type StudyListType = {
+  status: GroupStatus;
   startDate: Date;
   endDate: Date;
-  role: string;
-  isPublic: boolean;
-  status: GroupStatusLabel;
-};
+} & Omit<
+  GroupListItem,
+  | "introduction"
+  | "groupImage"
+  | "ownerNickname"
+  | "id"
+  | "startDate"
+  | "endDate"
+>;
 
 export type AlarmSettingsDataType = {
   alarm: boolean;

src/view/user/setting/StudyList/SortIcon/index.css.ts

@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+
+export const sortIconStyle = style({
+  cursor: "pointer",
+});
+
+export const ascIconStyle = style([
+  sortIconStyle,
+  {
+    transform: "rotate(180deg)",
+  },
+]);