+
+ );
+};
+
+export default PreviewThumbnail;
diff --git a/src/components/preview/previewThumbnail.module.scss b/src/components/preview/previewThumbnail.module.scss
new file mode 100644
index 0000000..03b9e9d
--- /dev/null
+++ b/src/components/preview/previewThumbnail.module.scss
@@ -0,0 +1,95 @@
+.container {
+ width: 312px;
+ border: 0.5px solid #DBDBDB;
+ border-radius: 5px;
+ }
+
+ .profileSection {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px;
+
+ & > span {
+ font-size: 14px;
+ color: #424242;
+ }
+ }
+
+ .profileImage {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ overflow: hidden;
+
+ & > img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .verifiedBadge {
+ padding: 2px 8px;
+ background-color: #006AC6;
+ color: white;
+ border-radius: 4px;
+ font-size: 12px;
+ }
+
+ .thumbnailImage {
+ width: 312px;
+ height: 372px;
+ background-color: #DBDBDB;
+
+ & > img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .contentSection {
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ & > p {
+ font-size: 14px;
+ color: #424242;
+ }
+ }
+
+ .priceSection {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ & > span {
+ font-weight: 500;
+ font-size: 16px;
+ color: #424242;
+ }
+
+ & > button {
+ cursor: pointer;
+ background: none;
+ border: none;
+ padding: 0;
+ }
+ }
+
+ .bookmarkIcon {
+ width: 20px;
+ height: 20px;
+ color: #757575;
+
+ &.bookmarked {
+ fill: #757575;
+ }
+
+ &:hover {
+ color: #424242;
+ }
+ }
\ No newline at end of file
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/components/sign-up/Input.tsx b/src/components/sign-up/Input.tsx
new file mode 100644
index 0000000..45de3b8
--- /dev/null
+++ b/src/components/sign-up/Input.tsx
@@ -0,0 +1,115 @@
+import {
+ ChangeEvent,
+ InputHTMLAttributes,
+ Dispatch,
+ forwardRef,
+ useRef,
+ useState,
+ SetStateAction,
+} from 'react';
+import styles from './input.module.scss';
+import classNames from 'classnames';
+
+interface InputProps extends InputHTMLAttributes
+
+
+
+ 
+
+ {username}
+ {verified && ์ธ์ฆ๋จ}
+
+ {imageUrl ? (
+ 
+ ) : (
+ 
+ )}
+
+
+
+
+ {description}
+
+ {price?.toLocaleString() ?? 0}์
+
+
+
+ {label &&
+ );
+ },
+);
+
+Input.displayName = 'Input';
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/input.module.scss b/src/components/sign-up/input.module.scss
similarity index 84%
rename from src/pages/sign-up/input.module.scss
rename to src/components/sign-up/input.module.scss
index 586fe25..14d3673 100644
--- a/src/pages/sign-up/input.module.scss
+++ b/src/components/sign-up/input.module.scss
@@ -1,14 +1,20 @@
.container {
padding-top: 6px;
+}
- & > p {
- margin: 0px;
- margin-top: 5px;
- color: #333;
- font-size: 11px;
- font-weight: 500;
- margin-bottom: 1px;
- }
+.label {
+ margin: 0;
+ margin-top: 5px;
+ color: #333;
+ font-size: 11px;
+ font-weight: 500;
+ margin-bottom: 1px;
+}
+
+.errorMessage {
+ color: red;
+ font-size: 10px;
+ margin-top: 5px;
}
@mixin input {
diff --git a/src/constants/errorMessage.ts b/src/constants/errorMessage.ts
new file mode 100644
index 0000000..a934c4c
--- /dev/null
+++ b/src/constants/errorMessage.ts
@@ -0,0 +1,7 @@
+export const SIGN_UP_ERROR_MESSAGE = {
+ id: '์์ด๋๋ 6~12์์ ์๋ฌธ์ ์๋ฌธ, ์ซ์๋ง ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค.',
+ passwordRegex:
+ '๋ฐ๋์ ์๋ฌธ(์๋ฌธ์, ๋๋ฌธ์), ์ซ์, ํน์๋ฌธ์ ์ค 2๊ฐ์ง ์ด์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.',
+ passwordLength: '๋น๋ฐ ๋ฒํธ๋ 8~20์ ์ด๋ด๋ก ์
๋ ฅํด์ผ ํฉ๋๋ค.',
+ passwordCheck: '๋น๋ฐ๋ฒํธ๋ ๋์ผํ๊ฒ ์
๋ ฅํด์ผ ํฉ๋๋ค.',
+};
diff --git a/src/constants/registers.ts b/src/constants/registers.ts
new file mode 100644
index 0000000..a8c6ede
--- /dev/null
+++ b/src/constants/registers.ts
@@ -0,0 +1,106 @@
+import {
+ FieldValues,
+ UseFormRegister,
+ UseFormSetValue,
+ UseFormWatch,
+} from 'react-hook-form';
+import { SIGN_UP_ERROR_MESSAGE } from './errorMessage';
+import { formatBirth } from '../utils/formatBirth';
+
+interface RegistersProps {
+ register: UseFormRegister{label}
} + + {isEmail ? ( +
+
+ ) : (
+ <>
+
+ {errorMessage && (
+
+
+
+
+ @
+
+
+
+
+
+
+
+
+
+ {errorMessage}
+ )} + + )} +
+
+ );
+};
diff --git a/src/pages/login/login.module.scss b/src/pages/login/login.module.scss
new file mode 100644
index 0000000..04a90e0
--- /dev/null
+++ b/src/pages/login/login.module.scss
@@ -0,0 +1,149 @@
+.container {
+ padding-top: 75px;
+}
+
+.logo {
+ @include flex-center;
+
+ width: 293px;
+ height: 102px;
+ background-color: #d9d9d9;
+ border-radius: 5px;
+ margin: 0 auto;
+}
+
+.loginContainer {
+ width: 575px;
+ height: 404px;
+ background-color: #d9d9d9;
+ border-radius: 15px;
+ position: relative;
+ margin: 0 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 0 0;
+}
+
+.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 0 15px 15px;
+ }
+
+ &.left {
+ border-radius: 0 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% {
+ box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);
+ }
+
+ 100% {
+ box-shadow: 0 0 20px 0 rgb(0 0 0 / 35%);
+ }
+}
diff --git a/src/pages/sign-up/CorporateMember.tsx b/src/pages/sign-up/CorporateMember.tsx
deleted file mode 100644
index f94191b..0000000
--- a/src/pages/sign-up/CorporateMember.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-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 (
- ๋ก๊ณ
+
+
+
+
+
+
+
+
+
+
-
- );
-};
diff --git a/src/pages/sign-up/IndividualMember.tsx b/src/pages/sign-up/IndividualMember.tsx
deleted file mode 100644
index 21c8b2d..0000000
--- a/src/pages/sign-up/IndividualMember.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-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 (
- ๋ก๊ณ
- - ๊ธฐ์ ํ์ - ๊ฐ์ ์ ๋ณด ์ ๋ ฅํ๊ธฐ -
- -
-
- );
-};
diff --git a/src/pages/sign-up/Input.tsx b/src/pages/sign-up/Input.tsx
deleted file mode 100644
index ff896f0..0000000
--- a/src/pages/sign-up/Input.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-import styles from './input.module.scss';
-import classNames from 'classnames';
-
-interface InputProps extends InputHTMLAttributes๋ก๊ณ
- - ๊ฐ์ธ ํ์ ๊ฐ์ ์ ๋ณด ์ ๋ ฅํ๊ธฐ -
- -
- {label &&
- );
-};
diff --git a/src/pages/sign-up/corporate/CorporateMember.tsx b/src/pages/sign-up/corporate/CorporateMember.tsx
new file mode 100644
index 0000000..dcaa975
--- /dev/null
+++ b/src/pages/sign-up/corporate/CorporateMember.tsx
@@ -0,0 +1,90 @@
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
+import classNames from 'classnames';
+import { Input } from '../../../components/sign-up/Input';
+import styles from './corporateMember.module.scss';
+import { CorporateMemberRegisters } from '../../../constants/registers';
+// import { useNavigate } from 'react-router-dom';
+
+export const CorporateMember = () => {
+ // const navigate = useNavigate();
+
+ const { register, handleSubmit, setValue } = useForm({ mode: 'onTouched' });
+
+ const registers = CorporateMemberRegisters({ register, setValue });
+
+ const handleSubmitHandler: SubmitHandler{label}
} - {type === 'default' && ( - - )} - {type === 'email' && ( -
-
- )}
-
-
-
- @
-
- ์ง์ ์
๋ ฅ
-
-
-
-
-
-
-
+
+ );
+};
diff --git a/src/pages/sign-up/corporate/corporateMember.module.scss b/src/pages/sign-up/corporate/corporateMember.module.scss
new file mode 100644
index 0000000..e350075
--- /dev/null
+++ b/src/pages/sign-up/corporate/corporateMember.module.scss
@@ -0,0 +1,7 @@
+@import '../../../components/sign-up/commonSignup.module';
+
+.textBlue {
+ & > strong {
+ color: #00a5e1;
+ }
+}
diff --git a/src/pages/sign-up/corporateMember.module.scss b/src/pages/sign-up/corporateMember.module.scss
deleted file mode 100644
index 73ebe0e..0000000
--- a/src/pages/sign-up/corporateMember.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import './commonSignup.module.scss';
-
-.textBlue {
- & > strong {
- color: #00a5e1;
- }
-}
diff --git a/src/pages/sign-up/individual/IndividualMember.tsx b/src/pages/sign-up/individual/IndividualMember.tsx
new file mode 100644
index 0000000..e457402
--- /dev/null
+++ b/src/pages/sign-up/individual/IndividualMember.tsx
@@ -0,0 +1,106 @@
+import { ChangeEvent, useState } from 'react';
+import classNames from 'classnames';
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
+// import { useNavigate } from 'react-router-dom';
+import { Input } from '../../../components/sign-up/Input';
+import styles from './individualMember.module.scss';
+import { IndividualMemberRegisters } from '../../../constants/registers';
+
+export const IndividualMember = () => {
+ // const navigate = useNavigate();
+ const [emailDomain, setEmailDomain] = useState('');
+
+ const {
+ register,
+ handleSubmit,
+ watch,
+ setValue,
+ formState: { errors },
+ } = useForm({ mode: 'onTouched' });
+
+ const registers = IndividualMemberRegisters({ register, watch, setValue });
+
+ const handleSubmitHandler: SubmitHandler๋ก๊ณ
+ + ๊ธฐ์ ํ์ + ๊ฐ์ ์ ๋ณด ์ ๋ ฅํ๊ธฐ +
+ +
+
+ );
+};
diff --git a/src/pages/sign-up/individual/individualMember.module.scss b/src/pages/sign-up/individual/individualMember.module.scss
new file mode 100644
index 0000000..5b32cba
--- /dev/null
+++ b/src/pages/sign-up/individual/individualMember.module.scss
@@ -0,0 +1 @@
+@import '../../../components/sign-up/commonSignup.module';
diff --git a/src/pages/sign-up/individualMember.module.scss b/src/pages/sign-up/individualMember.module.scss
deleted file mode 100644
index a84e47c..0000000
--- a/src/pages/sign-up/individualMember.module.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './commonSignup.module.scss';
diff --git a/src/pages/test/Test.tsx b/src/pages/test/Test.tsx
index 66e4e60..08e350b 100644
--- a/src/pages/test/Test.tsx
+++ b/src/pages/test/Test.tsx
@@ -4,7 +4,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';
//๋๋กญ๋ค์ด ๋ฒํผ test
import Dropdown from '../../components/dropdown/Dropdown.tsx';
diff --git a/src/utils/formatBirth.ts b/src/utils/formatBirth.ts
new file mode 100644
index 0000000..5f4b060
--- /dev/null
+++ b/src/utils/formatBirth.ts
@@ -0,0 +1,16 @@
+export const formatBirth = (birth: string) => {
+ const value = birth.replace(/[^0-9]/g, '');
+ if (value.length > 6) {
+ return (
+ value.substring(0, 4) +
+ '-' +
+ value.substring(4, 6) +
+ '-' +
+ value.substring(6)
+ );
+ }
+ if (value.length > 4) {
+ return value.substring(0, 4) + '-' + value.substring(4);
+ }
+ return value;
+};
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..3a48e56
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,3 @@
+{
+ "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}
๋ก๊ณ
+