Merge pull request #12 from minjeong9919/feat/signUpPage

feat: 회원가입 페이지 구현
BrainPix · Jan 12, 2025 · a41ba64 · a41ba64
2 parents d07095b + 6d2aa37
commit a41ba64
Show file tree

Hide file tree

Showing 16 changed files with 590 additions and 0 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,6 +5,10 @@ import { IdeaMarket } from './pages/idea-market/IdeaMarket';
 import IdeaMarketPayment from './pages/idea-market/IdeaMarketPayment/IdeaMarketPayment';
 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';
 
 function App() {
   return (
@@ -32,6 +36,22 @@ function App() {
             element={<Collaboration />}
           />
         </Route>
+        <Route
+          path='/sign-up'
+          element={<Signup />}
+        />
+        <Route
+          path='/sign-up/individual'
+          element={<IndividualMember />}
+        />
+        <Route
+          path='/sign-up/corporate'
+          element={<CorporateMember />}
+        />
+        <Route
+          path='/sign-up/complete'
+          element={<CompleteSignup />}
+        />
       </Routes>
     </BrowserRouter>
   );

diff --git a/src/assets/icons/corporateMember.svg b/src/assets/icons/corporateMember.svg
diff --git a/src/assets/icons/individualMember.svg b/src/assets/icons/individualMember.svg
diff --git a/src/components/header/header.module.scss b/src/components/header/header.module.scss
@@ -33,13 +33,22 @@
   gap: 45px;
   font-size: 24px;
   cursor: pointer;
+
+  & > * {
+    padding-bottom: 18px;
+  }
+
+  .clickedPage {
+    padding-bottom: 0px;
+  }
 }
 
 .clickedPage {
   @include flex-center;
 
   flex-direction: column;
   text-align: center;
+  font-weight: 500;
 }
 
 .clickedPage::after {

diff --git a/src/pages/sign-up/CompleteSignup.tsx b/src/pages/sign-up/CompleteSignup.tsx
@@ -0,0 +1,47 @@
+import classNames from 'classnames';
+import styles from './completeSignup.module.scss';
+
+export const CompleteSignup = () => {
+  return (
+    <div className={classNames(styles.container)}>
+      <div className={classNames(styles.welcomeContainer)}>
+        <div className={classNames(styles.logoCharacter)}>
+          BrainPIX <br />
+          로고 캐릭터
+        </div>
+        <div>
+          안녕하세요. <strong>OO님!</strong>
+          <div className={classNames(styles['flexRow'])}>
+            <div className={classNames(styles.logo)}>BrainPIX 로고</div>의
+            회원이 되신 것을
+          </div>
+          환영합니다!
+        </div>
+      </div>
+      <div className={classNames(styles.movePageContainer)}>
+        <h3>지금 바로 시작하기!</h3>
+        <div className={classNames(styles.pageWrapper)}>
+          <a
+            className={classNames(styles.pageButton, styles.ideaMarket)}
+            href='/idea-market'>
+            <h3 className={classNames(styles.title)}>아이디어 마켓</h3>
+            <p className={classNames(styles.content)}>
+              자신의 아이디어를 <br />
+              공개하고 판매할 수 있어요.
+            </p>
+          </a>
+          <a
+            className={classNames(styles.pageButton, styles.ideaRequest)}
+            href='/request-assign'>
+            <h3 className={classNames(styles.title)}>아이디어 요청</h3>
+            <p className={classNames(styles.content)}>
+              원하는 프로젝트에 대한 <br />
+              아이디어를 요청할 수 있어요.
+            </p>
+          </a>
+        </div>
+      </div>
+      <button className={classNames(styles.mainHomeButton)}>메인 홈</button>
+    </div>
+  );
+};
diff --git a/src/pages/sign-up/CorporateMember.tsx b/src/pages/sign-up/CorporateMember.tsx
@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import { Input } from './Input';
+import styles from './corporateMember.module.scss';
+import { useNavigate } from 'react-router-dom';
+
+export const CorporateMember = () => {
+  const navigate = useNavigate();
+  return (
+    <div className={classNames(styles.container)}>
+      <div className={classNames(styles.logo)}>로고</div>
+      <h3 className={classNames(styles.title, styles.textBlue)}>
+        <strong>기업 회원 </strong>
+        가입 정보 입력하기
+      </h3>
+      <form className={classNames(styles.form)}>
+        <div>
+          <div className={classNames(styles.dividerWrapper)}>
+            <span>계정 정보</span>
+            <hr className={classNames(styles.divider)} />
+          </div>
+          <div className={classNames(styles.inputContainer)}>
+            <Input label='아이디' />
+            <Input
+              label='비밀번호'
+              placeholder='비밀번호(영문 + 숫자 + 특수문자 8자 이상)'
+            />
+            <Input placeholder='비밀번호 확인' />
+          </div>
+        </div>
+        <div>
+          <div className={classNames(styles.dividerWrapper)}>
+            <span>기업 회원 정보</span>
+            <hr className={classNames(styles.divider)} />
+          </div>
+          <div className={classNames(styles.inputContainer)}>
+            <Input label='담당자 이름' />
+            <Input label='생년월일' />
+            <Input label='기업 명' />
+            <Input label='직책' />
+            <Input
+              label='기업 이메일'
+              type='email'
+            />
+          </div>
+        </div>
+        <button
+          onClick={() => navigate('/sign-up/complete')}
+          className={classNames(styles.submitButton)}
+          type='submit'>
+          완료
+        </button>
+      </form>
+    </div>
+  );
+};
diff --git a/src/pages/sign-up/IndividualMember.tsx b/src/pages/sign-up/IndividualMember.tsx
@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import { useNavigate } from 'react-router-dom';
+import { Input } from './Input';
+import styles from './individualMember.module.scss';
+
+export const IndividualMember = () => {
+  const navigate = useNavigate();
+  return (
+    <div className={classNames(styles.container)}>
+      <div className={classNames(styles.logo)}>로고</div>
+      <h3 className={classNames(styles.title)}>
+        <strong>개인 회원</strong> 가입 정보 입력하기
+      </h3>
+      <form className={classNames(styles.form)}>
+        <div>
+          <div className={classNames(styles.dividerWrapper)}>
+            <span>계정 정보</span>
+            <hr className={classNames(styles.divider)} />
+          </div>
+          <div className={classNames(styles.inputContainer)}>
+            <Input label='아이디' />
+            <Input
+              label='비밀번호'
+              placeholder='비밀번호(영문 + 숫자 + 특수문자 8자 이상)'
+            />
+            <Input placeholder='비밀번호 확인' />
+          </div>
+        </div>
+        <div>
+          <div className={classNames(styles.dividerWrapper)}>
+            <span>회원 정보</span>
+            <hr className={classNames(styles.divider)} />
+          </div>
+          <div className={classNames(styles.inputContainer)}>
+            <Input label='이름' />
+            <Input label='생년월일' />
+            <Input
+              label='이메일'
+              type='email'
+            />
+          </div>
+        </div>
+        <button
+          onClick={() => navigate('/sign-up/complete')}
+          className={classNames(styles.submitButton)}
+          type='submit'>
+          완료
+        </button>
+      </form>
+    </div>
+  );
+};
diff --git a/src/pages/sign-up/Input.tsx b/src/pages/sign-up/Input.tsx
@@ -0,0 +1,40 @@
+import { InputHTMLAttributes } from 'react';
+import styles from './input.module.scss';
+import classNames from 'classnames';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  type?: 'default' | 'email';
+}
+
+export const Input = ({ label, type = 'default', ...rest }: InputProps) => {
+  return (
+    <div className={classNames(styles.container)}>
+      {label && <p>{label}</p>}
+      {type === 'default' && (
+        <input
+          className={classNames(styles.defaultInput)}
+          {...rest}
+        />
+      )}
+      {type === 'email' && (
+        <div>
+          <div className={classNames(styles.emailInputContainer)}>
+            <div className={classNames(styles.emailWrapper)}>
+              <input /> @ <input />
+            </div>
+            <div className={classNames(styles.dropDown)}>직접입력</div>
+          </div>
+          <div className={classNames(styles.emailInputContainer)}>
+            <div className={classNames(styles.emailWrapper)}>
+              <input />
+            </div>
+            <button className={classNames(styles.requestButton)}>
+              인증요청
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/pages/sign-up/Signup.tsx b/src/pages/sign-up/Signup.tsx
@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import { useNavigate } from 'react-router-dom';
+
+import Individual from '../../assets/icons/individualMember.svg?react';
+import Corporate from '../../assets/icons/corporateMember.svg?react';
+
+import styles from './signUp.module.scss';
+
+export const Signup = () => {
+  const navigate = useNavigate();
+  return (
+    <div className={classNames(styles.container)}>
+      <div className={classNames(styles.logo)}>로고</div>
+      <h1 className={classNames(styles.headline)}>
+        회원가입하고
+        <br /> 아이디어를 공유해보세요!
+      </h1>
+      <div className={classNames(styles.buttonWrapper)}>
+        <button
+          onClick={() => navigate('individual')}
+          className={classNames(styles.memberButton, styles.individual)}>
+          <Individual />
+          <span>개인회원</span>
+        </button>
+        <button
+          onClick={() => navigate('corporate')}
+          className={classNames(styles.memberButton)}>
+          <Corporate />
+          <span>기업회원</span>
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/sign-up/commonSignup.module.scss b/src/pages/sign-up/commonSignup.module.scss
@@ -0,0 +1,73 @@
+.container {
+  @include flex-center;
+
+  flex-direction: column;
+  height: 100vh;
+}
+
+.logo {
+  @include flex-center;
+
+  width: 293px;
+  height: 102px;
+  background-color: #d9d9d9;
+  border: 1px solid #d9d9d9;
+  margin-bottom: 37px;
+}
+
+.title {
+  font-size: 13px;
+  font-weight: 400;
+  color: #333;
+  margin-bottom: 26px;
+
+  & > strong {
+    font-weight: 600;
+    color: #222;
+  }
+}
+
+.dividerWrapper {
+  text-align: center;
+  height: 10px;
+  position: relative;
+
+  & > span {
+    position: absolute;
+    background-color: white;
+    font-size: 10px;
+    left: 50%;
+    padding: 2px;
+    transform: translate(-50%, -50%);
+  }
+
+  & > .divider {
+    width: 326px;
+    height: 0.5px;
+    background-color: #9c9c9c;
+  }
+}
+
+.inputContainer {
+  padding-bottom: 26px;
+}
+
+.form {
+  @include flex-center;
+
+  flex-direction: column;
+}
+
+.submitButton {
+  width: 102px;
+  height: 28px;
+  border-radius: 2px;
+  font-size: 11px;
+  background: #4a4949;
+  color: white;
+  cursor: pointer;
+  border: none;
+  font-weight: 400;
+  margin: 0 auto;
+  margin-top: 20px;
+}