Merge pull request #64 from KDT-Web-IDE-Project/63-style

style: 회원가입 페이지 퍼블리싱
F3B4-KDT-Project · Jan 27, 2025 · be41115 · be41115
2 parents fece776 + 00c0a2a
commit be41115
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 9 deletions.
diff --git a/src/components/auth/Button/style.ts b/src/components/auth/Button/style.ts
@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 
 export const Button = styled.button`
   background-color: var(--input);
-  color: var(--white);
   border: none;
   text-align: center;
   color: var(--white);

diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
@@ -2,23 +2,29 @@ import React from 'react';
 import logo_black from '../../assets/icons/logo_black.svg';
 import { Input } from '../../components/common/Input';
 import { AuthButton } from '../../components/auth/Button';
+import {
+  SignUpContainer,
+  SignUpFieldset,
+  SignUpForm,
+  SignUpHeader,
+} from './style';
 
 const SignUp: React.FC = () => {
   return (
-    <div>
-      <header>
+    <SignUpContainer>
+      <SignUpHeader>
         <img src={logo_black} alt="logo" />
         <div>
           <p>
             실시간 코드 편집기와 채팅 기능을 결합한 코딩 교육 보조 웹 서비스
           </p>
           <h1>회원가입</h1>
         </div>
-      </header>
+      </SignUpHeader>
 
       <section>
-        <form action="">
-          <fieldset>
+        <SignUpForm action="">
+          <SignUpFieldset>
             <Input
               type="text"
               id="id"
@@ -47,12 +53,12 @@ const SignUp: React.FC = () => {
               onChange={() => {}}
               placeholder="이름을 입력하세요"
             />
-          </fieldset>
+          </SignUpFieldset>
 
           <AuthButton onClick={() => {}} disabled text="SIGN IN" />
-        </form>
+        </SignUpForm>
       </section>
-    </div>
+    </SignUpContainer>
   );
 };
 

diff --git a/src/pages/SignUp/style.ts b/src/pages/SignUp/style.ts
@@ -0,0 +1,59 @@
+import styled from '@emotion/styled';
+
+export const SignUpContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5.19rem;
+  justify-content: center;
+  height: 100vh;
+`;
+
+export const SignUpHeader = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2.19rem;
+
+  img {
+    width: 7.8125rem;
+    height: 6.91869rem;
+  }
+
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 0.88rem;
+
+    p {
+      color: var(--white);
+      text-align: center;
+      font-family: 'Pretendard';
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 90%; /* 0.9rem */
+    }
+
+    h1 {
+      color: var(--white);
+      font-family: 'Pretendard';
+      font-size: 5.3125rem;
+      font-style: normal;
+      font-weight: 800;
+      line-height: normal;
+    }
+  }
+`;
+
+export const SignUpForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 5.38rem;
+  align-items: center;
+`;
+
+export const SignUpFieldset = styled.fieldset`
+  display: flex;
+  flex-direction: column;
+  gap: 2.19rem;
+`;