feat: Table, Table.Content 컴포넌트로 추상화

GDSC-Hongik · Aug 14, 2024 · a34a1fd · a34a1fd
2 parents 3f72228 + 0f11e37
commit a34a1fd
Show file tree

Hide file tree

Showing 20 changed files with 1,053 additions and 111 deletions.
diff --git a/apps/admin/app/layout.tsx b/apps/admin/app/layout.tsx
@@ -1,5 +1,6 @@
 import "./global.css";
 import "wowds-ui/styles.css";
+import "@wow-class/ui/styles.css";
 
 import Navbar from "components/Navbar";
 import type { Metadata } from "next";

diff --git a/apps/admin/app/page.tsx b/apps/admin/app/page.tsx
@@ -1,11 +1,15 @@
 import { styled } from "@styled-system/jsx";
+import { Text } from "@wow-class/ui";
 
 const Home = () => {
   return (
     <div>
       Home
       <styled.div color="red.300">sdf</styled.div>
       <styled.div color="mono.100">sdf</styled.div>
+      <Text color="error" typo="h1">
+        헤딩1
+      </Text>
     </div>
   );
 };

diff --git a/apps/client/app/(afterLogin)/my-study/my-homework/page.tsx b/apps/client/app/(afterLogin)/my-study/my-homework/page.tsx
@@ -1,33 +1,37 @@
 import { Flex, styled } from "@styled-system/jsx";
+import { Space } from "@wow-class/ui";
 import {
   DefaultHomeworkBox,
   HomeworkHistory,
   TextFieldHomeworkBox,
 } from "components/my-homework";
+import Image from "next/image";
 
-const MyHomework = () => {
+const MyHomeworkPage = () => {
   return (
     <>
-      <styled.h1 color="textBlack" textStyle="h1">
-        나의 스터디
-      </styled.h1>
-      <div style={{ height: "8px" }} />
+      <Flex gap="sm" textStyle="h1">
+        <styled.h1 color="textBlack">나의 과제</styled.h1>
+        <Image alt="dot" height={6} src="/images/dot.svg" width={6} />
+        <styled.h1 color="primary">기초 웹 스터디</styled.h1>
+      </Flex>
+      <Space height={8} />
       <div>
         제출 완료하기 버튼을 누르면 등록한
-        <styled.span color="blueHover">GitHub 레포지토리</styled.span>의 main
+        <styled.span color="blueHover"> GitHub 레포지토리</styled.span>의 main
         브랜치에서 가장 최신 상태의 WIL.md 파일이 제출돼요. <br />
         과제는 기한 내에 여러 번 제출할 수 있으나, 가장 마지막 제출만 최종
         제출로 인정해요.
       </div>
-      <div style={{ height: "48px" }} />
+      <Space height={48} />
       <Flex gap="lg">
         <TextFieldHomeworkBox />
         <DefaultHomeworkBox />
       </Flex>
-      <div style={{ height: "64px" }} />
+      <Space height={64} />
       <HomeworkHistory />
     </>
   );
 };
 
-export default MyHomework;
+export default MyHomeworkPage;
diff --git a/apps/client/app/(afterLogin)/study-apply/page.tsx b/apps/client/app/(afterLogin)/study-apply/page.tsx
@@ -1,18 +1,51 @@
+import { css } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
-import { Table } from "components/study-apply/Table";
+import { Space, Table } from "@wow-class/ui";
+import Button from "wowds-ui/Button";
+import Tag from "wowds-ui/Tag";
 
-const StudyApply = () => {
+const StudyApplyPage = () => {
+  const array = [0, 1, 2];
   return (
     <>
       <styled.h1 color="textBlack" textStyle="h1">
         신청 가능한 스터디
       </styled.h1>
-      <div style={{ height: "19px" }} />
-      <Table />
-      <Table />
-      <Table />
+      <Space height={19} />
+      {array.map(() => (
+        <Table
+          center={
+            <>
+              <Table.Content
+                subText="(스터디 한 줄 소개-스터디 상세 설명 노션 링크로 연결)"
+                text="기초 웹 스터디"
+                textRight={
+                  <Tag color="yellow" variant="solid1">
+                    신규
+                  </Tag>
+                }
+              />
+              <p className={textCellStyle}>강가은 멘토</p>
+              <p className={textCellStyle}>화 18:00-19:00</p>
+              <p className={textCellStyle}>4주 코스</p>
+              <p className={textCellStyle}>06.18 개강</p>
+              <styled.div paddingX="24px">
+                <Button size="sm" variant="solid">
+                  수강 신청
+                </Button>
+              </styled.div>
+            </>
+          }
+        />
+      ))}
     </>
   );
 };
 
-export default StudyApply;
+export default StudyApplyPage;
+
+const textCellStyle = css({
+  color: "textBlack",
+  paddingX: "28px",
+  textStyle: "body1",
+});
diff --git a/apps/client/app/layout.tsx b/apps/client/app/layout.tsx
@@ -1,5 +1,6 @@
 import "./global.css";
 import "wowds-ui/styles.css";
+import "@wow-class/ui/styles.css";
 
 import type { Metadata } from "next";
 

diff --git a/apps/client/components/my-homework/HomeworkHistory.tsx b/apps/client/components/my-homework/HomeworkHistory.tsx
@@ -1,18 +1,51 @@
 import { styled } from "@styled-system/jsx";
-
-import { Table } from "./Table";
+import { Space, Table } from "@wow-class/ui";
+import Button from "wowds-ui/Button";
+import Tag from "wowds-ui/Tag";
+import TextButton from "wowds-ui/TextButton";
 
 export const HomeworkHistory = () => {
+  const array = [0, 1, 2];
   return (
     <>
       <styled.h2 textStyle="h2">과제 히스토리</styled.h2>
       <styled.div color="sub" textStyle="body1">
         지난 과제의 제출 내역을 확인해요.
       </styled.div>
       <div style={{ height: "24px" }} />
-      <Table />
-      <Table />
-      <Table />
+      {array.map(() => (
+        <Table
+          left={
+            <>
+              <styled.h3 color="textBlack" textStyle="h3">
+                1주차
+              </styled.h3>
+              <Space width={50} />
+              <Table.Content
+                subText="종료 : 2024년 5월 23일 23:59"
+                text="(과제 제목) HTTP 통신 코드 작성하기"
+              />
+            </>
+          }
+          right={
+            <>
+              <styled.div paddingX="36px">
+                <TextButton text="과제 명세 확인" />
+              </styled.div>
+              <styled.div paddingX="32px">
+                <Tag color="grey" variant="solid2">
+                  과제 휴강
+                </Tag>
+              </styled.div>
+              <styled.div paddingX="25px">
+                <Button size="sm" variant="outline">
+                  제출한 과제 확인
+                </Button>
+              </styled.div>
+            </>
+          }
+        />
+      ))}
     </>
   );
 };
diff --git a/apps/client/components/my-homework/Table.tsx b/apps/client/components/my-homework/Table.tsx
diff --git a/apps/client/components/study-apply/Table.tsx b/apps/client/components/study-apply/Table.tsx
diff --git a/package.json b/package.json
@@ -42,6 +42,8 @@
     "node": ">=18"
   },
   "dependencies": {
-    "wowds-ui": "^0.1.10"
+    "wowds-ui": "^0.1.10",
+    "clsx": "^2.1.1",
+    "wowds-tokens": "^0.1.1"
   }
 }
diff --git a/packages/panda-config/common-config.ts b/packages/panda-config/common-config.ts
@@ -5,9 +5,23 @@ import {
   removeUnusedCssVars,
   removeUnusedKeyframes,
 } from "wowds-theme";
+import { typography } from "wowds-tokens";
 
 const commonConfig: Config = {
   presets: [pandaPreset],
+  //TODO: wowds-theme의 preset에서 staticCss 를 정의하도록 수정
+  staticCss: {
+    css: [
+      {
+        properties: {
+          ...(pandaPreset?.staticCss?.css?.[0]?.properties?.color && {
+            color: pandaPreset.staticCss.css[0].properties.color,
+          }),
+          textStyle: Object.keys(typography),
+        },
+      },
+    ],
+  },
   preflight: true,
   minify: true,
   watch: true,

diff --git a/packages/ui/src/components/NavItem/NavItem.stories.tsx b/packages/ui/src/components/NavItem/NavItem.stories.tsx
@@ -5,7 +5,7 @@ import homeImageUrl from "../../assets/home.svg";
 import Navbar from ".";
 
 const meta = {
-  title: "Client/Navbar",
+  title: "UI/Navbar",
   component: Navbar,
   tags: ["autodocs"],
   parameters: {

diff --git a/packages/ui/src/components/NavItem/index.tsx b/packages/ui/src/components/NavItem/index.tsx
@@ -8,6 +8,7 @@ import { useSelectedLayoutSegments } from "next/navigation";
 import { useState } from "react";
 
 import arrowImageUrl from "../../assets/arrow.svg";
+import Text from "../Text";
 
 /**
  * @description 내비게이션 바에서 사용하는 내비게이션 아이템 컴포넌트입니다.
@@ -66,7 +67,9 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => {
           src={imageUrl}
           width={20}
         />
-        <div className={navItemTextStyle}>{name}</div>
+        <Text as="div" typo="body1">
+          {name}
+        </Text>
         {items?.length && items?.length > 1 && (
           <Image
             alt="toggle-icon"
@@ -102,7 +105,9 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => {
                   src={item.imageUrl}
                   width={20}
                 />
-                <div className={navItemTextStyle}>{item.name}</div>
+                <Text as="div" typo="body1">
+                  {item.name}
+                </Text>
               </Link>
             </li>
           ))}
@@ -133,10 +138,3 @@ const navItemStyle = cva({
     },
   },
 });
-
-const navItemTextStyle = css({
-  fontSize: "16px",
-  fontWeight: 500,
-  lineHeight: "160%",
-  letterSpacing: "-0.16px",
-});
diff --git a/packages/ui/src/components/Space/index.tsx b/packages/ui/src/components/Space/index.tsx
@@ -0,0 +1,33 @@
+import { space as wowSpace } from "wowds-tokens";
+
+type SpaceKey = keyof typeof wowSpace;
+type SpaceType = number | string | SpaceKey;
+
+/**
+ * @description Space 컴포넌트
+ * @params {SpaceType} width - 가로 여백입니다.
+ * @params {SpaceType} height - 세로 여백입니다.
+ */
+interface SpaceProps {
+  width?: SpaceType;
+  height?: SpaceType;
+}
+
+const getSpace = (space?: SpaceType) => {
+  if (typeof space === "number") {
+    return `${space}px`;
+  } else if (typeof space === "string" && space in wowSpace) {
+    return wowSpace[space as SpaceKey];
+  }
+  return space || "";
+};
+
+const Space = ({ width, height }: SpaceProps) => {
+  return (
+    <>
+      <div style={{ width: getSpace(width), height: getSpace(height) }} />
+    </>
+  );
+};
+
+export default Space;