refactor: Text 컴포넌트로 리팩토링

GDSC-Hongik · Aug 14, 2024 · 78e16a7 · 78e16a7
1 parent a3bcb8a
commit 78e16a7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 20 deletions.
diff --git a/apps/client/app/(beforeLogin)/(auth-error)/auth-error-after-recruitment/page.tsx b/apps/client/app/(beforeLogin)/(auth-error)/auth-error-after-recruitment/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { css } from "@styled-system/css";
+import { Text } from "@wow-class/ui";
 import { routePath } from "constants/routePath";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
@@ -22,7 +23,9 @@ const AuthErrorAfterRecruitmentPage = () => {
         src="/images/avatar.svg"
         width={200}
       />
-      <h1 className={headingStyle}>GDSC Hongik 정회원만 이용 가능해요.</h1>
+      <Text as="h1" className={headingStyle} typo="display2">
+        GDSC Hongik 정회원만 이용 가능해요.
+      </Text>
       <p className={descriptionStyle}>
         GDSC Hongik 정회원 모집 기간이 아니에요!
         <br />
@@ -56,7 +59,6 @@ const avatarImageStyle = css({
 });
 
 const headingStyle = css({
-  textStyle: "display2",
   marginBottom: "16px",
 });
 

diff --git a/apps/client/app/(beforeLogin)/(auth-error)/auth-error-during-recruitment/page.tsx b/apps/client/app/(beforeLogin)/(auth-error)/auth-error-during-recruitment/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { css } from "@styled-system/css";
+import { Text } from "@wow-class/ui";
 import { routePath } from "constants/routePath";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
@@ -26,7 +27,9 @@ const AuthErrorDuringRecruitmentPage = () => {
         src="/images/avatar.svg"
         width={200}
       />
-      <h1 className={headingStyle}>GDSC Hongik 정회원만 이용 가능해요.</h1>
+      <Text as="h1" className={headingStyle} typo="display2">
+        GDSC Hongik 정회원만 이용 가능해요.
+      </Text>
       <p className={descriptionStyle}>
         이번 학기 GDSC Hongik 정회원 모집 중이에요.
         <br />
@@ -67,7 +70,6 @@ const avatarImageStyle = css({
 });
 
 const headingStyle = css({
-  textStyle: "display2",
   marginBottom: "16px",
 });
 

diff --git a/apps/client/app/(beforeLogin)/auth/page.tsx b/apps/client/app/(beforeLogin)/auth/page.tsx
@@ -1,22 +1,25 @@
 import { css } from "@styled-system/css";
+import { Text } from "@wow-class/ui";
 import LoginButton from "components/LoginButton";
 import Image from "next/image";
 
 const AuthPage = async () => {
   return (
     <main className={mainContentStyle}>
       <section className={leftColStyle}>
-        <h1 className={loginTextStyle}>로그인</h1>
+        <Text as="h1" className={loginTextStyle} typo="display1">
+          로그인
+        </Text>
         <div className={descriptionTextContainerStyle}>
           <Image
             alt="check-icon"
             height={20}
             src="/images/check.svg"
             width={20}
           />
-          <p className={descriptionTextStyle}>
+          <Text as="p" color="sub" typo="body1">
             와우클래스는 GDSC Hongik 정회원만 이용 가능해요.
-          </p>
+          </Text>
         </div>
         <div
           className={descriptionTextContainerStyle}
@@ -28,9 +31,9 @@ const AuthPage = async () => {
             src="/images/check.svg"
             width={20}
           />
-          <p className={descriptionTextStyle}>
+          <Text as="p" color="sub" typo="body1">
             GDSC Hongik 가입을 위해선 GitHub 계정이 필요해요.
-          </p>
+          </Text>
         </div>
         <LoginButton />
       </section>
@@ -65,7 +68,6 @@ const leftColStyle = css({
 });
 
 const loginTextStyle = css({
-  textStyle: "display1",
   marginBottom: "16px",
 });
 
@@ -75,11 +77,6 @@ const descriptionTextContainerStyle = css({
   gap: "10px",
 });
 
-const descriptionTextStyle = css({
-  color: "sub",
-  textStyle: "body1",
-});
-
 const imageContainerStyle = css({
   position: "relative",
   width: "100%",

diff --git a/apps/client/app/(beforeLogin)/landing/page.tsx b/apps/client/app/(beforeLogin)/landing/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { css } from "@styled-system/css";
-import { Header } from "@wow-class/ui";
+import { Header, Text } from "@wow-class/ui";
 import { routePath } from "constants/routePath";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
@@ -32,10 +32,10 @@ const LandingPage = () => {
             GDSC에서 스터디해요!
           </h1>
         </div>
-        <p className={descriptionStyle}>
+        <Text as="p" className={descriptionStyle} color="sub" typo="body0">
           GDSC Hongik은 홍익대학교의 학생 개발자들을 위해 <br />
           개발에 쉽게 입문할 수 있는 기회를 제공해요.
-        </p>
+        </Text>
         <Button
           aria-label="로그인 페이지로 이동"
           size="lg"
@@ -89,8 +89,6 @@ const headlineStyle = css({
 });
 
 const descriptionStyle = css({
-  color: "sub",
-  textStyle: "body0",
   marginBottom: "48px",
   zIndex: 1,
 });