[FRONTEND] 회원가입 페이지 레이아웃 구현 (#21)

## 📝작업 내용

회원가입 페이지의 레이아웃을 구현함

Author: sysy04

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import ExpertConsultation from "./pages/expertConsultation";
 import Guide from "./pages/guide";
 import Community from "./pages/community";
 import MyPage from "./pages/myPage";
+import SignIn from "./pages/signIn";
 
 const Router = () => {
   return (
@@ -17,6 +18,7 @@ const Router = () => {
         <Route path={"/guide"} element={<Guide />} />
         <Route path={"/community"} element={<Community />} />
         <Route path={"/mypage"} element={<MyPage />} />
+        <Route path={"/sign-up"} element={<SignIn />} />
       </Routes>
     </BrowserRouter>
   );

frontend/src/assets/image/kakao.svg

@@ -0,0 +1,28 @@
+.container{
+    width: 50%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 120px;
+    padding-bottom: 40px;
+}
+
+.content{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 100px;
+}
+
+.logo{
+    font-size: 40px;
+    font-weight: 1000;
+    color: #ff5525;
+    text-align: center;
+}
+
+.copyright{
+    color: #828282;
+}

frontend/src/assets/image/signIn_background.png

@@ -0,0 +1,14 @@
+import style from './authSection.module.css'
+import SignInButton from '../signInButton/signInButton'
+
+export default function AuthSection(){
+    return(
+        <div className={style.container}>
+            <div className={style.content}>
+                <div className={style.logo}>COM<br/>TOGETHER</div>
+                <SignInButton/>
+            </div>
+            <div className={style.copyright}>&copy; 2025 COMTOGETHER. All Rights Reserved.</div>
+        </div>
+    )
+}

frontend/src/components/common/signIn/authSection/authSection.module.css

@@ -0,0 +1,13 @@
+.container{
+    width: 50%;
+    height: 100vh;
+    background-image: url('@/assets/image/signIn_background.png');
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+}
+
+.container img{
+    width: 630px;
+    height: 630px;
+}

frontend/src/components/common/signIn/authSection/authSection.tsx

@@ -0,0 +1,10 @@
+import style from './brandSection.module.css'
+import logo from '@/assets/image/logo.svg'
+
+export default function BrandSection(){
+    return(
+        <div className={style.container}>
+            <img src={logo} alt="logo"/>
+        </div>
+    )
+}

frontend/src/components/common/signIn/brandSection/brandSection.module.css

@@ -0,0 +1,18 @@
+.signInBtn{
+    min-width: 400px;
+    height: 50px;
+    border: none;
+    background-color: #f9e000;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.signInBtn img{
+    width: 35px;
+    height: 35px;
+}

frontend/src/components/common/signIn/brandSection/brandSection.tsx

@@ -0,0 +1,11 @@
+import style from './signInButton.module.css'
+import kakao from '@/assets/image/kakao.svg'
+
+export default function SignInButton(){
+    return(
+        <button className={style.signInBtn}>
+            <img src={kakao} alt="kakao"/>
+            <span>카카오로 시작하기</span>
+        </button>
+    )
+}

frontend/src/components/common/signIn/signInButton/signInButton.module.css

@@ -0,0 +1,12 @@
+import style from './signIntLayout.module.css'
+import BrandSection from '../common/signIn/brandSection/brandSection'
+import AuthSection from '../common/signIn/authSection/authSection'
+
+export default function SignInLayout(){
+    return(
+        <div className={style.container}>
+            <BrandSection/>
+            <AuthSection/>
+        </div>
+    )
+}