From 60d925f425626110f5b821668e8642086862fa20 Mon Sep 17 00:00:00 2001
From: SeieunYoo <isho48239@gmail.com>
Date: Wed, 14 Aug 2024 18:59:28 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Text,Space=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/(afterLogin)/study-apply/page.tsx     |  6 ++--
 .../my-homework/DefaultHomeworkBox.tsx        | 21 +++++++-------
 .../my-homework/TextFieldHomeworkBox.tsx      | 28 ++++++++++---------
 3 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/apps/client/app/(afterLogin)/study-apply/page.tsx b/apps/client/app/(afterLogin)/study-apply/page.tsx
index 61bde5fd..bf639501 100644
--- a/apps/client/app/(afterLogin)/study-apply/page.tsx
+++ b/apps/client/app/(afterLogin)/study-apply/page.tsx
@@ -1,6 +1,6 @@
 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";
 
@@ -8,9 +8,9 @@ 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
index 66dc3a89..5f1c15fc 100644
--- 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
index 9d027ce2..9e39feaa 100644
--- 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={() => {