BrainPix · minjeong9919 · Jan 15, 2025 · Jan 12, 2025 · Jan 12, 2025 · Jan 12, 2025
diff --git a/index.html b/index.html
@@ -5,11 +5,11 @@
     <link
       rel="icon"
       type="image/svg+xml"
-      href="/vite.svg" />
+      href="/src/assets/images/brainPixIcon.png" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>BrainPIX</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -6,9 +6,10 @@ import IdeaMarketPayment from './pages/idea-market/IdeaMarketPayment/IdeaMarketP
 import { RequestAssign } from './pages/request-assign/RequestAssign';
 import { Collaboration } from './pages/collaboration/Collaboration';
 import { Signup } from './pages/sign-up/Signup';
-import { IndividualMember } from './pages/sign-up/IndividualMember';
-import { CorporateMember } from './pages/sign-up/CorporateMember';
-import { CompleteSignup } from './pages/sign-up/CompleteSignup';
+import { IndividualMember } from './components/sign-up/IndividualMember';
+import { CorporateMember } from './components/sign-up/CorporateMember';
+import { CompleteSignup } from './components/sign-up/CompleteSignup';
+import { Login } from './pages/login/Login';
 
 function App() {
   return (
@@ -52,6 +53,10 @@ function App() {
           path='/sign-up/complete'
           element={<CompleteSignup />}
         />
+        <Route
+          path='/login'
+          element={<Login />}
+        />
       </Routes>
     </BrowserRouter>
   );

diff --git a/src/assets/icons/eyeNonVisible.svg b/src/assets/icons/eyeNonVisible.svg
diff --git a/src/assets/icons/eyeVisible.svg b/src/assets/icons/eyeVisible.svg
diff --git a/src/assets/images/brainPixIcon.png b/src/assets/images/brainPixIcon.png
diff --git a/src/components/button/ButtonGroup.tsx → src/components/common/button/ButtonGroup.tsx b/src/components/button/ButtonGroup.tsx → src/components/common/button/ButtonGroup.tsx
diff --git a/...mponents/button/PaymentButton.module.scss → ...s/common/button/PaymentButton.module.scss b/...mponents/button/PaymentButton.module.scss → ...s/common/button/PaymentButton.module.scss
diff --git a/src/components/button/PaymentButton.tsx → ...omponents/common/button/PaymentButton.tsx b/src/components/button/PaymentButton.tsx → ...omponents/common/button/PaymentButton.tsx
diff --git a/...components/button/buttonGroup.module.scss → ...nts/common/button/buttonGroup.module.scss b/...components/button/buttonGroup.module.scss → ...nts/common/button/buttonGroup.module.scss
diff --git a/src/components/header/Header.tsx → src/components/common/header/Header.tsx b/src/components/header/Header.tsx → src/components/common/header/Header.tsx
diff --git a/src/components/header/SearchInput.tsx → src/components/common/header/SearchInput.tsx b/src/components/header/SearchInput.tsx → src/components/common/header/SearchInput.tsx
@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import { ChangeEvent, useRef, useState, KeyboardEvent } from 'react';
 
-import { useOutsideClick } from '../../hooks/useOutsideClick';
-import Search from '../../assets/icons/search.svg?react';
-import Delete from '../../assets/icons/delete.svg?react';
-import Clock from '../../assets/icons/clock.svg?react';
-import { debounce } from '../../utils/debounce';
+import Search from '../../../assets/icons/search.svg?react';
+import Delete from '../../../assets/icons/delete.svg?react';
+import Clock from '../../../assets/icons/clock.svg?react';
+import { debounce } from '../../../utils/debounce';
+import { useOutsideClick } from '../../../hooks/useOutsideClick';
 
 import styles from './searchInput.module.scss';
 

diff --git a/src/components/header/header.module.scss → ...mponents/common/header/header.module.scss b/src/components/header/header.module.scss → ...mponents/common/header/header.module.scss
diff --git a/...components/header/searchInput.module.scss → ...nts/common/header/searchInput.module.scss b/...components/header/searchInput.module.scss → ...nts/common/header/searchInput.module.scss
diff --git a/src/pages/sign-up/CompleteSignup.tsx → src/components/sign-up/CompleteSignup.tsx b/src/pages/sign-up/CompleteSignup.tsx → src/components/sign-up/CompleteSignup.tsx
diff --git a/src/pages/sign-up/CorporateMember.tsx → src/components/sign-up/CorporateMember.tsx b/src/pages/sign-up/CorporateMember.tsx → src/components/sign-up/CorporateMember.tsx
diff --git a/src/pages/sign-up/IndividualMember.tsx → src/components/sign-up/IndividualMember.tsx b/src/pages/sign-up/IndividualMember.tsx → src/components/sign-up/IndividualMember.tsx
diff --git a/src/pages/sign-up/Input.tsx → src/components/sign-up/Input.tsx b/src/pages/sign-up/Input.tsx → src/components/sign-up/Input.tsx
diff --git a/src/pages/sign-up/commonSignup.module.scss → ...mponents/sign-up/commonSignup.module.scss b/src/pages/sign-up/commonSignup.module.scss → ...mponents/sign-up/commonSignup.module.scss
diff --git a/src/pages/sign-up/completeSignup.module.scss → ...onents/sign-up/completeSignup.module.scss b/src/pages/sign-up/completeSignup.module.scss → ...onents/sign-up/completeSignup.module.scss
diff --git a/...pages/sign-up/corporateMember.module.scss → ...nents/sign-up/corporateMember.module.scss b/...pages/sign-up/corporateMember.module.scss → ...nents/sign-up/corporateMember.module.scss
diff --git a/...ages/sign-up/individualMember.module.scss → ...ents/sign-up/individualMember.module.scss b/...ages/sign-up/individualMember.module.scss → ...ents/sign-up/individualMember.module.scss
diff --git a/src/pages/sign-up/input.module.scss → src/components/sign-up/input.module.scss b/src/pages/sign-up/input.module.scss → src/components/sign-up/input.module.scss
diff --git a/src/pages/idea-market/IdeaMarketPayment/IdeaMarketPayment.tsx b/src/pages/idea-market/IdeaMarketPayment/IdeaMarketPayment.tsx
@@ -3,7 +3,7 @@ import PaymentTitle from '../../../components/payment/PaymentTitle';
 import SellerInfo from '../../../components/info/SellerInfo';
 import PaymentMethods from '../../../components/payment/PaymentMethods';
 import PaymentSummary from '../../../components/payment/PaymentSummary';
-import PaymentButton from '../../../components/button/PaymentButton';
+import PaymentButton from '../../../components/common/button/PaymentButton';
 import styles from './IdeaMarketPayment.module.scss';
 
 const IdeaMarketPayment: React.FC = () => {

diff --git a/src/pages/layout/Layout.tsx b/src/pages/layout/Layout.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from 'react-router-dom';
-import { Header } from '../../components/header/Header';
+import { Header } from '../../components/common/header/Header';
 
 export const Layout = () => {
   return (

diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import classNames from 'classnames';
+import EyeVisible from '../../assets/icons/eyeVisible.svg?react';
+import EyeNonVisible from '../../assets/icons/eyeNonVisible.svg?react';
+import Delete from '../../assets/icons/delete.svg?react';
+import styles from './login.module.scss';
+
+export const Login = () => {
+  const [isVisiblePassword, setIsVisiblePassword] = useState(false);
+  const [member, setMember] = useState<'individual' | 'corparate'>(
+    'individual',
+  );
+
+  return (
+    <div className={classNames(styles.container)}>
+      <div className={classNames(styles.logo)}>로고</div>
+      <div className={classNames(styles.loginContainer)}>
+        <div className={classNames(styles.buttonWrapper)}>
+          <button
+            className={classNames(styles.memberButton, {
+              [styles.clicked]: member === 'individual',
+            })}
+            onClick={() => setMember('individual')}>
+            개인 회원
+          </button>
+          <button
+            className={classNames(styles.memberButton, {
+              [styles.clicked]: member === 'corparate',
+            })}
+            onClick={() => setMember('corparate')}>
+            기업 회원
+          </button>
+        </div>
+        <div
+          className={classNames(
+            styles.inputContainer,
+            member === 'corparate' ? styles.right : styles.left,
+          )}>
+          <form className={classNames(styles.form)}>
+            <label
+              htmlFor='id'
+              className={classNames(styles.label)}>
+              아이디
+              <div className={classNames(styles.iconWrapper)}>
+                <Delete />
+              </div>
+            </label>
+            <input
+              className={classNames(styles.input)}
+              placeholder='아이디 입력'
+              type='text'
+              name='id'
+              id='id'
+            />
+            <label
+              htmlFor='password'
+              className={classNames(styles.label)}>
+              비밀번호
+              <div className={classNames(styles.iconWrapper)}>
+                {isVisiblePassword ? (
+                  <EyeVisible onClick={() => setIsVisiblePassword(false)} />
+                ) : (
+                  <EyeNonVisible onClick={() => setIsVisiblePassword(true)} />
+                )}
+                <Delete />
+              </div>
+            </label>
+            <input
+              className={classNames(styles.input)}
+              placeholder='비밀번호 입력'
+              type='password'
+              name='password'
+              id='password'
+            />
+            <button className={classNames(styles.loginButton)}>로그인</button>
+            <a
+              href='/sign-up'
+              className={classNames(styles.signUpText)}>
+              회원가입
+            </a>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/login/login.module.scss b/src/pages/login/login.module.scss
@@ -0,0 +1,146 @@
+.container {
+  padding-top: 75px;
+}
+
+.logo {
+  @include flex-center;
+  width: 293px;
+  height: 102px;
+  background-color: #d9d9d9;
+  border-radius: 5px;
+  margin: 0px auto;
+}
+
+.loginContainer {
+  width: 575px;
+  height: 404px;
+  background-color: #d9d9d9;
+  border-radius: 15px;
+  position: relative;
+  margin: 0px auto;
+  margin-top: 33px;
+  animation: shadow-drop-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+.buttonWrapper {
+  background-color: #d9d9d9;
+  border-radius: 15px;
+  position: absolute;
+  width: 100%;
+}
+
+.memberButton {
+  width: 50%;
+  background-color: #d9d9d9;
+  border-bottom: none;
+  font-size: 26px;
+  font-weight: 600;
+  color: #515151;
+  border: none;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 15px 15px 0px 0px;
+}
+
+.clicked {
+  position: relative;
+  color: #222;
+  background-color: white;
+  border: 1px solid black;
+  border-bottom: none;
+  height: 67px;
+  z-index: 10;
+}
+
+.inputContainer {
+  @include flex-center;
+  position: absolute;
+  top: 66px;
+  width: 100%;
+  height: 338px;
+  background-color: white;
+  border: 1px solid black;
+
+  &.right {
+    border-radius: 15px 0px 15px 15px;
+  }
+  &.left {
+    border-radius: 0px 15px 15px 15px;
+  }
+}
+
+.form {
+  @include flex-center;
+  flex-direction: column;
+  width: 100%;
+  padding: 40px 37px 30px;
+}
+
+.label {
+  width: 100%;
+  color: #333;
+  font-size: 15px;
+  font-weight: 400;
+  text-align: left;
+  margin-bottom: 8px;
+  position: relative;
+}
+
+.iconWrapper {
+  height: 17px;
+  position: absolute;
+  right: 12px;
+  top: 40px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.input {
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 20px;
+  border: 1px solid #7a7a7a;
+  border-radius: 2px;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: #898989;
+    font-size: 13px;
+    font-weight: 400;
+  }
+}
+
+.loginButton {
+  width: 260px;
+  height: 40px;
+  border-radius: 2px;
+  background-color: black;
+  color: white;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-bottom: 20px;
+}
+
+.signUpText {
+  color: #898989;
+  font-size: 13px;
+  font-weight: 400;
+  text-decoration: none;
+}
+
+@keyframes shadow-drop-center {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+  100% {
+    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
+  }
+}
diff --git a/src/pages/test/Test.tsx b/src/pages/test/Test.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import styles from './test.module.scss';
 
 //버튼그룹 test
-import ButtonGroup from '../../components/button/ButtonGroup.tsx';
+import ButtonGroup from '../../components/common/button/ButtonGroup.tsx';
 
 export const Test = () => {
   const [clicked, setClicked] = useState(false);