Merge pull request #58 from FinalDoubleTen/FE-20--feat/User/signup

Fe 20 feat/user/signup
WePlanPlans · Jan 4, 2024 · a106997 · a106997
2 parents 8a6c7ba + b6ed154
commit a106997
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 1 deletion.
diff --git a/src/assets/images/ProgressBarIcon.svg b/src/assets/images/ProgressBarIcon.svg
diff --git a/src/assets/images/profileImg.svg b/src/assets/images/profileImg.svg
diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
@@ -766,3 +766,96 @@ export const KakaoIcon = () => {
     </svg>
   );
 };
+
+interface ProgressBarProps {
+  progress: number;
+}
+
+export const ProgressBarIcon = ({ progress }: ProgressBarProps) => {
+  return (
+    <svg
+      width="74"
+      height="3"
+      viewBox="0 0 74 3"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g id="Group 36811">
+        <rect
+          id="Rectangle 2586"
+          x="0.0184326"
+          y="0.0751953"
+          width="22"
+          height="2"
+          rx="1"
+          fill="#29DDF6"
+        />
+        <rect
+          id="Rectangle 2587"
+          x="25.8544"
+          y="0.0751953"
+          width="22"
+          height="2"
+          rx="1"
+          fill={progress > 1 ? '#29DDF6' : '#D7D7D7'}
+        />
+        <rect
+          id="Rectangle 2588"
+          x="51.1543"
+          y="0.0751953"
+          width="22"
+          height="2"
+          rx="1"
+          fill={progress > 2 ? '#29DDF6' : '#D7D7D7'}
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const CircleIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g id="Circle">
+        <circle
+          id="Ellipse 537"
+          cx="12.875"
+          cy="12.0908"
+          r="11.3939"
+          fill="white"
+          stroke="#D7D7D7"
+          stroke-width="1.21212"
+        />
+        <svg
+          x="6"
+          y="6"
+          width="14"
+          height="12"
+          viewBox="0 0 14 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <g id="Group 36734">
+            <path
+              id="Union (Stroke)"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M5.2222 1.43945C4.71182 1.43945 4.26848 1.79052 4.15149 2.2873L4.01121 2.88298C3.93641 3.2006 3.6528 3.51529 3.23582 3.51529H2.475C1.86749 3.51529 1.375 4.00778 1.375 4.61529V9.64246C1.375 10.25 1.86749 10.7425 2.475 10.7425H11.275C11.8825 10.7425 12.375 10.25 12.375 9.64246V4.61529C12.375 4.00778 11.8825 3.51529 11.275 3.51529H10.5149C10.0996 3.51529 9.81689 3.20191 9.74282 2.88489L9.60366 2.28921C9.48739 1.7915 9.04362 1.43945 8.53251 1.43945H5.2222ZM3.17812 2.05807C3.40147 1.10966 4.24784 0.439453 5.2222 0.439453H8.53251C9.50826 0.439453 10.3555 1.11155 10.5774 2.06172L10.6834 2.51529H11.275C12.4348 2.51529 13.375 3.45549 13.375 4.61529V9.64246C13.375 10.8023 12.4348 11.7425 11.275 11.7425H2.475C1.3152 11.7425 0.375 10.8023 0.375 9.64246V4.61529C0.375 3.45549 1.3152 2.51529 2.475 2.51529H3.07044L3.17812 2.05807Z"
+              fill="#1E1E1E"
+            />
+            <path
+              id="Ellipse 536 (Stroke)"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M6.87493 4.79492C5.90442 4.79492 5.11768 5.58167 5.11768 6.55217C5.11768 7.52268 5.90442 8.30942 6.87493 8.30942C7.84543 8.30942 8.63218 7.52268 8.63218 6.55217C8.63218 5.58167 7.84543 4.79492 6.87493 4.79492ZM4.11768 6.55217C4.11768 5.02939 5.35214 3.79492 6.87493 3.79492C8.39771 3.79492 9.63218 5.02939 9.63218 6.55217C9.63218 8.07496 8.39771 9.30942 6.87493 9.30942C5.35214 9.30942 4.11768 8.07496 4.11768 6.55217Z"
+              fill="#1E1E1E"
+            />
+          </g>
+        </svg>
+      </g>
+    </svg>
+  );
+};
diff --git a/src/components/user/useInputBox/UserInputBox.tsx b/src/components/user/useInputBox/UserInputBox.tsx
@@ -3,6 +3,7 @@ import { CloseIcon } from '@components/common/icons/Icons';
 
 interface Props {
   label: string;
+  subLabel?: string;
   type?: string;
   name: string;
   placeholder: string;
@@ -14,6 +15,7 @@ interface Props {
 
 const UserInputBox = ({
   label,
+  subLabel,
   type = 'password',
   name,
   placeholder,
@@ -31,6 +33,7 @@ const UserInputBox = ({
       <div className="flex flex-col gap-2">
         <label htmlFor={label} className="body3 text-main2">
           {label}
+          {subLabel && <span className="body5">{subLabel}</span>}
         </label>
         <div className="focus-within:border-main1 flex h-10 items-center border-b-[1.25px] border-solid border-gray3">
           <input

diff --git a/src/pages/signup/signup.page.tsx b/src/pages/signup/signup.page.tsx
@@ -1,3 +1,5 @@
+import { Back } from '@components/common';
+import { ProgressBarIcon } from '@components/common/icons/Icons';
 import { UserEmailInputBox, UserPwInputBox } from '@components/user';
 import { useState } from 'react';
 
@@ -6,7 +8,11 @@ const Signup = () => {
 
   return (
     <div className="relative">
-      <h1 className="title1 my-11">
+      <Back />
+      <div className=" mt-2 flex justify-end">
+        <ProgressBarIcon progress={1} />
+      </div>
+      <h1 className="title1 mb-9 mt-8">
         위플플 이용을 위해
         <br />
         회원가입을 해주세요

diff --git a/src/pages/signupInfo/signupInfo.page.tsx b/src/pages/signupInfo/signupInfo.page.tsx
@@ -0,0 +1,55 @@
+import { Back, Button } from '@components/common';
+import {
+  CameraIcon,
+  CircleIcon,
+  ProgressBarIcon,
+} from '@components/common/icons/Icons';
+import {
+  UserEmailInputBox,
+  UserInputBox,
+  UserPwInputBox,
+} from '@components/user';
+import { useState } from 'react';
+import profileImg from '@assets/images/profileImg.svg';
+
+const SignupInfo = () => {
+  const [isActive, setIsActive] = useState<boolean>(false);
+
+  return (
+    <div className="relative">
+      <Back />
+      <div className="mt-2 flex justify-end">
+        <ProgressBarIcon progress={2} />
+      </div>
+      <h1 className="title1 mb-9 mt-8">
+        프로필 사진과 닉네임을
+        <br />
+        설정해주세요.
+      </h1>
+      <div className="mb-10 flex justify-center">
+        <label htmlFor="profileImg" className="relative">
+          <img src={profileImg} alt="유저 프로필" />
+          <div className="absolute bottom-0 right-0">
+            <CircleIcon />
+          </div>
+        </label>
+        <input type="file" id="profileImg" className="m-[-1px] h-px w-px" />
+      </div>
+      <form>
+        <UserInputBox
+          type="text"
+          label="닉네임"
+          placeholder="닉네임을 입력하세요"
+        />
+        <div>성별</div>
+        <div>여</div>
+        <div>나이</div>
+        <div>10대</div>
+
+        <Button isActive={false}>다음</Button>
+      </form>
+    </div>
+  );
+};
+
+export default SignupInfo;
diff --git a/src/router/mainRouter.tsx b/src/router/mainRouter.tsx
@@ -6,6 +6,7 @@ import Detail from '@pages/detail/detail.page';
 import { Signup } from '@pages/index';
 import PostingReview from '@pages/postingReview/postingReview.page';
 import Signin from '@pages/signin/signin.page';
+import SignupInfo from '@pages/signupInfo/signupInfo.page';
 
 export function MainLayout() {
   return (
@@ -27,6 +28,7 @@ const MainRouter = () => {
           <Route index element={<Main />} />
           <Route path="/detail/:id" element={<Detail />} />
           <Route path="/signup" element={<Signup />} />
+          <Route path="/signup/info" element={<SignupInfo />} />
           <Route path="/postingReview/:id" element={<PostingReview />} />
           <Route path="/signin" element={<Signin />} />
         </Route>