feat: Text,Space 컴포넌트로 변경

GDSC-Hongik · Aug 14, 2024 · 60d925f · 60d925f
1 parent a34a1fd
commit 60d925f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 27 deletions.
diff --git a/apps/client/app/(afterLogin)/study-apply/page.tsx b/apps/client/app/(afterLogin)/study-apply/page.tsx
@@ -1,16 +1,16 @@
 import { css } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
-import { Space, Table } from "@wow-class/ui";
+import { Space, Table, Text } from "@wow-class/ui";
 import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
 
 const StudyApplyPage = () => {
   const array = [0, 1, 2];
   return (
     <>
-      <styled.h1 color="textBlack" textStyle="h1">
+      <Text as="h1" typo="h1">
         신청 가능한 스터디
-      </styled.h1>
+      </Text>
       <Space height={19} />
       {array.map(() => (
         <Table

diff --git a/apps/client/components/my-homework/DefaultHomeworkBox.tsx b/apps/client/components/my-homework/DefaultHomeworkBox.tsx
@@ -1,32 +1,31 @@
 import { css } from "@styled-system/css";
 import { Flex, styled } from "@styled-system/jsx";
+import { Space, Text } from "@wow-class/ui";
 import Image from "next/image";
 import Box from "wowds-ui/Box";
 import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
 import TextButton from "wowds-ui/TextButton";
 
-import dotImageUrl from "../../public/images/dot.svg";
-
 export const DefaultHomeworkBox = () => {
   return (
     <Box
       text={
         <>
-          <styled.p color="primary" textStyle="label2">
+          <Text color="primary" typo="label2">
             4주차
-          </styled.p>
-          <div style={{ height: "16px" }} />
+          </Text>
+          <Space height={16} />
           <Flex gap="xs">
-            <styled.p color="textBlack" textStyle="h2">
+            <Text as="h2" typo="h2">
               HTTP 통신 코드 작성하기
-            </styled.p>
+            </Text>
             <Tag color="blue" variant="solid2">
               제출 완료
             </Tag>
           </Flex>
           <TextButton style={{ paddingLeft: "0px" }} text="과제 명세 확인" />
-          <div style={{ height: "8px" }} />
+          <Space height="xs" />
           <div className={descriptionStyle}>
             종료 일시 : 2024년 5월 23일 23:59
           </div>
@@ -37,14 +36,14 @@ export const DefaultHomeworkBox = () => {
                 2024-1-Web-Study/Week4
               </styled.span>
             </div>
-            <Image alt="dot" src={dotImageUrl} />
+            <Image alt="dot" height={6} src="/images/dot.svg" width={6} />
             <styled.div color="primary">글자수 충족</styled.div>
           </Flex>
-          <div style={{ height: "26px" }} />
+          <Space height={26} />
           <Button style={{ maxWidth: "100%" }} variant="outline">
             제출하러 가기
           </Button>
-          <div style={{ height: "8px" }} />
+          <Space height={8} />
           <Button style={{ maxWidth: "100%" }}>제출 완료</Button>
         </>
       }

diff --git a/apps/client/components/my-homework/TextFieldHomeworkBox.tsx b/apps/client/components/my-homework/TextFieldHomeworkBox.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { Flex, styled } from "@styled-system/jsx";
+import { Flex } from "@styled-system/jsx";
+import { Space, Text } from "@wow-class/ui";
 import { useState } from "react";
 import Box from "wowds-ui/Box";
 import Button from "wowds-ui/Button";
@@ -20,23 +21,23 @@ export const TextFieldHomeworkBox = () => {
     <Box
       text={
         <>
-          <styled.p color="primary" textStyle="label2">
+          <Text color="primary" typo="label2">
             레포지토리
-          </styled.p>
-          <div style={{ height: "1rem" }} />
+          </Text>
+          <Space height={16} />
           <Flex gap="xs">
-            <styled.h2 color="textBlack" textStyle="h2">
+            <Text as="h2" typo="h2">
               과제 제출을 위한 레포지토리 URL 입력하기
-            </styled.h2>
+            </Text>
             <Tag color="blue" variant="solid2">
               제출 완료
             </Tag>
           </Flex>
-          <div style={{ height: "0.25rem" }} />
-          <styled.p color="error" textStyle="body1">
+          <Space height={4} />
+          <Text color="error" typo="body1">
             입력하지 않으면 앞으로의 과제를 제출할 수 없어요.
-          </styled.p>
-          <div style={{ height: "1.63rem" }} />
+          </Text>
+          <Space height={26} />
           {!isSubmit && (
             <TextField
               label=""
@@ -48,9 +49,10 @@ export const TextFieldHomeworkBox = () => {
           {isSubmit && (
             <Flex
               backgroundColor="backgroundAlternative"
+              borderRadius="5px"
               color="sub"
-              paddingLeft="1.5rem"
-              paddingY="1.1rem"
+              paddingLeft="24px"
+              paddingY="18px"
               textStyle="h2"
             >
               {value}
@@ -63,7 +65,7 @@ export const TextFieldHomeworkBox = () => {
               </button>
             </Flex>
           )}
-          <div style={{ height: "3.87rem" }} />
+          <Space height={62} />
           <Button
             style={{ maxWidth: "100%" }}
             onClick={() => {