diff --git a/index.html b/index.html index a1a1f2c..b30f745 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,11 @@ + href="/src/assets/images/brainPixIcon.png" /> - Vite + React + TS + BrainPIX
diff --git a/src/App.tsx b/src/App.tsx index 15dc67d..4605916 100644 --- 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={} /> + } + /> ); diff --git a/src/assets/icons/eyeNonVisible.svg b/src/assets/icons/eyeNonVisible.svg new file mode 100644 index 0000000..60c3f62 --- /dev/null +++ b/src/assets/icons/eyeNonVisible.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/eyeVisible.svg b/src/assets/icons/eyeVisible.svg new file mode 100644 index 0000000..197965d --- /dev/null +++ b/src/assets/icons/eyeVisible.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/brainPixIcon.png b/src/assets/images/brainPixIcon.png new file mode 100644 index 0000000..ef3f408 Binary files /dev/null and b/src/assets/images/brainPixIcon.png differ diff --git a/src/components/button/ButtonGroup.tsx b/src/components/common/button/ButtonGroup.tsx similarity index 100% rename from src/components/button/ButtonGroup.tsx rename to src/components/common/button/ButtonGroup.tsx diff --git a/src/components/button/PaymentButton.module.scss b/src/components/common/button/PaymentButton.module.scss similarity index 100% rename from src/components/button/PaymentButton.module.scss rename to src/components/common/button/PaymentButton.module.scss diff --git a/src/components/button/PaymentButton.tsx b/src/components/common/button/PaymentButton.tsx similarity index 100% rename from src/components/button/PaymentButton.tsx rename to src/components/common/button/PaymentButton.tsx diff --git a/src/components/button/buttonGroup.module.scss b/src/components/common/button/buttonGroup.module.scss similarity index 100% rename from src/components/button/buttonGroup.module.scss rename to src/components/common/button/buttonGroup.module.scss diff --git a/src/components/header/Header.tsx b/src/components/common/header/Header.tsx similarity index 100% rename from src/components/header/Header.tsx rename to src/components/common/header/Header.tsx diff --git a/src/components/header/SearchInput.tsx b/src/components/common/header/SearchInput.tsx similarity index 92% rename from src/components/header/SearchInput.tsx rename to src/components/common/header/SearchInput.tsx index 76595ab..075dd17 100644 --- a/src/components/header/SearchInput.tsx +++ b/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 b/src/components/common/header/header.module.scss similarity index 100% rename from src/components/header/header.module.scss rename to src/components/common/header/header.module.scss diff --git a/src/components/header/searchInput.module.scss b/src/components/common/header/searchInput.module.scss similarity index 100% rename from src/components/header/searchInput.module.scss rename to src/components/common/header/searchInput.module.scss diff --git a/src/pages/sign-up/CompleteSignup.tsx b/src/components/sign-up/CompleteSignup.tsx similarity index 100% rename from src/pages/sign-up/CompleteSignup.tsx rename to src/components/sign-up/CompleteSignup.tsx diff --git a/src/pages/sign-up/CorporateMember.tsx b/src/components/sign-up/CorporateMember.tsx similarity index 100% rename from src/pages/sign-up/CorporateMember.tsx rename to src/components/sign-up/CorporateMember.tsx diff --git a/src/pages/sign-up/IndividualMember.tsx b/src/components/sign-up/IndividualMember.tsx similarity index 100% rename from src/pages/sign-up/IndividualMember.tsx rename to src/components/sign-up/IndividualMember.tsx diff --git a/src/pages/sign-up/Input.tsx b/src/components/sign-up/Input.tsx similarity index 100% rename from src/pages/sign-up/Input.tsx rename to src/components/sign-up/Input.tsx diff --git a/src/pages/sign-up/commonSignup.module.scss b/src/components/sign-up/commonSignup.module.scss similarity index 100% rename from src/pages/sign-up/commonSignup.module.scss rename to src/components/sign-up/commonSignup.module.scss diff --git a/src/pages/sign-up/completeSignup.module.scss b/src/components/sign-up/completeSignup.module.scss similarity index 100% rename from src/pages/sign-up/completeSignup.module.scss rename to src/components/sign-up/completeSignup.module.scss diff --git a/src/pages/sign-up/corporateMember.module.scss b/src/components/sign-up/corporateMember.module.scss similarity index 100% rename from src/pages/sign-up/corporateMember.module.scss rename to src/components/sign-up/corporateMember.module.scss diff --git a/src/pages/sign-up/individualMember.module.scss b/src/components/sign-up/individualMember.module.scss similarity index 100% rename from src/pages/sign-up/individualMember.module.scss rename to src/components/sign-up/individualMember.module.scss diff --git a/src/pages/sign-up/input.module.scss b/src/components/sign-up/input.module.scss similarity index 100% rename from src/pages/sign-up/input.module.scss rename to 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 index 01cfc1a..70a0729 100644 --- 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 index 54915c4..bee1a51 100644 --- 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 new file mode 100644 index 0000000..a470133 --- /dev/null +++ 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 ( +
+
로고
+
+
+ + +
+
+
+ + + + + + + 회원가입 + +
+
+
+
+ ); +}; diff --git a/src/pages/login/login.module.scss b/src/pages/login/login.module.scss new file mode 100644 index 0000000..8c24d39 --- /dev/null +++ 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 index 170ccb4..64ee4ce 100644 --- 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);