feat : sign 페이지 ui 구현

components/Layout/Layout.tsx

@@ -0,0 +1,31 @@
+import { ReactNode, useEffect, useState } from 'react';
+
+import Header from '../Header/Header';
+import Footer from '../Footer/Footer';
+
+import BASE_PATH from '../../pages/api/codeit';
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  // 유저 로그인(임시)
+  const [profile, setProfile] = useState('');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const { data } = await BASE_PATH.get(`users/1`);
+      setProfile(data.data[0]);
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <>
+      <Header profile={profile} />
+      {children}
+      <Footer />
+    </>
+  );
+}

components/Sign/Input.module.css

@@ -1,5 +1,5 @@
 .default {
-  width: 35rem;
+  width: 100%;
   padding: 1.8rem 1.5rem;
   border: 1px solid var(--color-gray60);
   border-radius: 8px;

components/Sign/InputForm.module.css

@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: column;
   row-gap: 1rem;
+  width: 400px;
 }

components/Sign/Layout.module.css

@@ -0,0 +1,107 @@
+.body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding-top: 23.8rem;
+  padding-bottom: 25.2rem;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 1.6rem;
+  margin-bottom: 3rem;
+}
+.headerSignTextForm {
+  display: flex;
+  column-gap: 0.8rem;
+  font-size: 1.6rem;
+}
+.headerSignText {
+  color: var(--Black-normal-1);
+  font-weight: 400;
+  line-height: 2.4rem;
+}
+.headerLoginLink {
+  color: var(--Purple-light-1);
+  font-weight: 600;
+}
+.headerLoginHr {
+  border: 0.1rem solid var(--Purple-light-1);
+}
+.headerLogo {
+  width: 21rem;
+  height: 3.8rem;
+}
+
+/* section */
+.sectionInputWrap {
+  margin-bottom: 2.4rem;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  width: 40rem;
+}
+
+.sectionInputCheckText {
+  color: var(--Red-normal-1);
+}
+.sectionInput {
+  position: relative;
+}
+
+/* social */
+.socialForm {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #e7effb;
+  padding: 1.2rem 2.4rem;
+  border-radius: 0.8rem;
+}
+
+.socialSnsText {
+  color: #373740;
+}
+
+.socialLinkForm {
+  display: flex;
+  column-gap: 1.6rem;
+}
+
+.socialLinkBackground {
+  background-repeat: no-repeat;
+  width: 4.2rem;
+  height: 4.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.snsBg1 {
+  background-image: url('/images/googlebg.svg');
+}
+.snsBg2 {
+  background-image: url('/images/kakaobg.svg');
+}
+
+/* tablet */
+@media (max-width: 1199px) {
+  .body {
+    padding-top: 20rem;
+    padding-bottom: 29rem;
+  }
+}
+/* mobile */
+@media (max-width: 767px) {
+  .body {
+    padding: 12rem 3.2rem 23.2rem 3.3rem;
+  }
+  .socialForm {
+    margin-top: 0.2rem;
+  }
+}

components/Sign/Layout.tsx

@@ -0,0 +1,70 @@
+import Link from 'next/link';
+
+import { FormEvent, ReactNode } from 'react';
+
+import styles from './Layout.module.css';
+import SubmitButton from './submitButton';
+
+interface LayoutProps {
+  questionText?: string;
+  linkText?: string;
+  href: string;
+  submitBtnText: string;
+  snsText: string;
+  children?: ReactNode;
+}
+
+export default function Layout({ questionText, linkText, href, submitBtnText, snsText, children }: LayoutProps) {
+  const handleOnSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log('submitTest');
+  };
+
+  return (
+    <form onSubmit={handleOnSubmit}>
+      <div className={styles.body}>
+        <header className={styles.header}>
+          <Link href='/'>
+            <img className={styles.headerLogo} src='/images/linkbrary.svg' alt='logo' />
+          </Link>
+
+          <div className={styles.headerSignTextForm}>
+            <span className={styles.headerSignText}>{questionText}</span>
+            <div>
+              <Link className={styles.headerLoginLink} href={href}>
+                {linkText}
+              </Link>
+              <hr className={styles.headerLoginHr} />
+            </div>
+          </div>
+        </header>
+
+        <section className={styles.section}>
+          {children}
+
+          <SubmitButton text={submitBtnText} />
+
+          <div className={styles.socialForm}>
+            <span className={styles.socialSnsText}>{snsText}</span>
+            <div className={styles.socialLinkForm}>
+              <Link target='_blank' href='https://www.google.com/' rel='noopener noreferrer'>
+                <div className={`${styles.snsBg1} ${styles.socialLinkBackground}`}>
+                  <img className='' src='/images/google.png' alt='google' />
+                </div>
+              </Link>
+              <Link
+                target='_blank'
+                href='https://www.kakaocorp.com/page/service/service/KakaoTalk?lang=ko'
+                rel='noopener noreferrer'
+              >
+                <div className={`${styles.snsBg2} ${styles.socialLinkBackground}`}>
+                  <img className='' src='/images/kakako.svg' alt='kakao' />
+                </div>
+              </Link>
+            </div>
+          </div>
+        </section>
+      </div>
+    </form>
+  );
+}

components/Sign/passwordInput.module.css

@@ -3,7 +3,7 @@
 }
 
 .default {
-  width: 35rem;
+  width: 100%;
   padding: 1.8rem 1.5rem;
   border: 1px solid var(--color-gray60);
   border-radius: 8px;

components/Sign/submitButton.module.css

@@ -0,0 +1,16 @@
+.signBtn {
+  padding: 1.6rem 2rem;
+  border-radius: 0.8rem;
+  width: 100%;
+  color: var(--color-white);
+
+  font-size: 1.8rem;
+  font-weight: 600;
+  border: 0;
+  margin-top: 0.6rem;
+  margin-bottom: 3.2rem;
+}
+
+.gradation1 {
+  background-image: linear-gradient(135deg, #6d6afe 0%, #6ae3fe 100%);
+}

components/Sign/submitButton.tsx

@@ -0,0 +1,15 @@
+import styles from './submitButton.module.css';
+
+interface submitProps {
+  text: string;
+}
+
+export default function SubmitButton({ text }: submitProps) {
+  return (
+    <>
+      <button type='submit' className={`${styles.signBtn} ${styles.gradation1}`}>
+        {text}
+      </button>
+    </>
+  );
+}

pages/_app.tsx

@@ -1,34 +1,21 @@
 import type { AppProps } from 'next/app';
-import { useEffect, useState } from 'react';
 import Head from 'next/head';
 
-import Header from '../components/Header/Header';
-import Footer from '../components/Footer/Footer';
+import Layout from '../components/Layout/Layout';
 
 import '@/styles/global.css';
-import BASE_PATH from './api/codeit';
 
 export default function App({ Component, pageProps }: AppProps) {
-  // 유저 로그인(임시)
-  const [profile, setProfile] = useState('');
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const { data } = await BASE_PATH.get(`users/1`);
-      setProfile(data.data[0]);
-    };
-    fetchData();
-  }, []);
-
   return (
     <>
       <Head>
         <title>Linkbrary</title>
         <link rel='icon' href='/favicon.ico'></link>
       </Head>
-      <Header profile={profile} />
-      <Component {...pageProps} />
-      <Footer />
+
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
     </>
   );
 }

pages/folder/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import CardList from '../../components/CardList/CardList';
-import SearchBar from '../../components/SearchBar/SearchBar.xsx';
+import SearchBar from '../../components/SearchBar/SearchBar';
 import Folder from '../../components/Folder/Folder';
 import CardReadOnly from '../../components/CardReadOnly/CardReadOnly';
 import LinkAddBar from '../../components/LinkAddBar/LinkAddBar';
@@ -34,24 +34,26 @@ export default function FolderPage({ folderNav }: any) {
   };
 
   return (
-    <Folder
-      linkAddBar={<LinkAddBar />}
-      searchBar={<SearchBar />}
-      folderFeature={<FolderFeature name={'TEST'} />}
-      folderNavList={
-        <FolderNavList>
-          {folderNav?.map((data: any) => (
-            <FolderNavClick key={data.id} {...data} onFolderClick={onFolderClick} />
-          ))}
-        </FolderNavList>
-      }
-      cardList={
-        <CardList>
-          {navData?.map((data: any) => (
-            <CardReadOnly key={data?.id} {...data} />
-          ))}
-        </CardList>
-      }
-    />
+    <>
+      <Folder
+        linkAddBar={<LinkAddBar />}
+        searchBar={<SearchBar />}
+        folderFeature={<FolderFeature name={'TEST'} />}
+        folderNavList={
+          <FolderNavList>
+            {folderNav?.map((data: any) => (
+              <FolderNavClick key={data.id} {...data} onFolderClick={onFolderClick} />
+            ))}
+          </FolderNavList>
+        }
+        cardList={
+          <CardList>
+            {navData?.map((data: any) => (
+              <CardReadOnly key={data?.id} {...data} />
+            ))}
+          </CardList>
+        }
+      />
+    </>
   );
 }

pages/index.tsx

@@ -10,10 +10,10 @@ export default function Home() {
       <Link href='/folder'>
         <h1>folder</h1>
       </Link>
-      <Link href='/signIn'>
+      <Link href='/signin'>
         <h1>signIn</h1>
       </Link>
-      <Link href='/signUp'>
+      <Link href='/signup'>
         <h1>signUp</h1>
       </Link>
     </div>

pages/signIn/index.tsx

@@ -1,5 +1,18 @@
 import InputForm from '../../components/Sign/InputForm';
+import Layout from '../../components/Sign/Layout';
 
 export default function signInPage() {
-  return <InputForm />;
+  return (
+    <>
+      <Layout
+        questionText='회원이 아니신가요 ?'
+        linkText='회원 가입하기'
+        href='/signup'
+        submitBtnText='로그인'
+        snsText='소셜 로그인'
+      >
+        <InputForm />;
+      </Layout>
+    </>
+  );
 }