Feat: #5 회원가입 페이지 생성 및 라우터 설정

GU-99 · Jun 7, 2024 · 8c49f0e · 8c49f0e
1 parent c41a372
commit 8c49f0e
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 54 deletions.
diff --git a/src/common/Button.tsx b/src/common/Button.tsx
@@ -0,0 +1,13 @@
+type ButtonProps = {
+  type: 'submit' | 'button' | 'reset';
+  styles?: string;
+  children: React.ReactNode;
+};
+
+export default function Button({ type = 'button', styles = 'w-[4.38rem]', children }: ButtonProps) {
+  return (
+    <button type={type} className={`${styles} h-[4.38rem] bg-[#E1F4D9] rounded-[10px] sm:text-m font-bold`}>
+      {children}
+    </button>
+  );
+}
diff --git a/src/common/Input.tsx b/src/common/Input.tsx
@@ -0,0 +1,19 @@
+type InputProps = {
+  placeholder: string;
+  type: string;
+  id?: string;
+  required?: boolean;
+  styles?: string;
+};
+
+export default function Input({ placeholder, type, id, styles = 'w-[31.25rem]', required }: InputProps) {
+  return (
+    <input
+      placeholder={placeholder}
+      type={type}
+      id={id}
+      required={required}
+      className={`${styles} h-[4.38rem] bg-[white] rounded-[10px] p-4 placeholder:text-[#5E5E5E] sm:text-sm`}
+    />
+  );
+}
diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx
diff --git a/src/main.tsx b/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import './index.css';
 import SignUp from './pages/SignUp.tsx';
+import AuthLayout from './layouts/AuthLayout.tsx';
 
 async function enableMocking() {
   if (!import.meta.env.DEV) return;
@@ -12,13 +13,18 @@ async function enableMocking() {
 }
 
 const router = createBrowserRouter([
-  // {
-  //   path: '/',
-  //   element: ,
-  // },
   {
-    path: '/signup',
-    element: <SignUp />,
+    // {
+    //   path: '/',
+    //   element: ,
+    // },
+    element: <AuthLayout />,
+    children: [
+      {
+        path: '/signup',
+        element: <SignUp />,
+      },
+    ],
   },
 ]);
 

diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
@@ -1,61 +1,71 @@
 import { useState } from 'react';
+import Button from '@/common/Button';
+import Input from '@/common/Input';
 
 export default function SignUp() {
   const [form, setForm] = useState([]);
 
   return (
-    <div>
-      <div className="flex">
-        <form>
-          <h1>프로필 사진</h1>
+    <form className="flex flex-col gap-y-4 p-10 my-12 bg-[#237700] rounded-2xl">
+      <div className="flex flex-col items-center gap-y-4">
+        <div className="w-[15.63rem] h-[15.63rem]">
           <img
             src="https://blog.kakaocdn.net/dn/tEMUl/btrDc6957nj/NwJoDw0EOapJNDSNRNZK8K/img.jpg"
             alt="img"
-            className="w-32"
+            className="w-full h-full object-cover rounded-[50%]"
           />
-          <input type="file" />
-          <h1>이메일</h1>
-          <input
-            type="text"
-            name="email"
-            id="email"
-            required
-            className="block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-          />
-          <button type="button" className="bg-gray-400 rounded-md">
-            인증 요청
-          </button>
-          <h1>비밀번호</h1>
-          <input
-            type="password"
-            name="password"
-            id="password"
-            required
-            className="block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-          />
-          <h1>자기소개</h1>
-          <input
-            type="text"
-            name="bio"
-            id="bio"
-            className="block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-          />
-          <h1>링크(블로그, 깃허브)</h1>
-          <input
-            type="text"
-            name="website"
-            id="website"
-            className="block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-          />
-          <h1>소속</h1>
-          <input
-            type="text"
-            name="company"
-            id="company"
-            className="block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-          />
-        </form>
+        </div>
+        <div className="flex flex-row gap-x-2">
+          <label
+            htmlFor="file-upload"
+            className="w-[6.25rem] h-[4.38rem] bg-[#E1F4D9] rounded-[10px] sm:text-m font-bold flex items-center justify-center cursor-pointer"
+          >
+            등록
+            <input id="file-upload" type="file" name="profile" className="hidden" />
+          </label>
+          <Button type="button" styles="w-[6.25rem] bg-[#EFEFEF]">
+            삭제
+          </Button>
+        </div>
+      </div>
+      <div className="flex flex-row gap-x-2">
+        <Input placeholder="이메일(아이디)을 입력하세요." type="text" id="email" styles="w-[20.63rem]" required />
+        <Button type="button" styles="w-[10rem]">
+          인증번호 발송
+        </Button>
+      </div>
+      <div className="flex flex-row gap-x-2">
+        <Input placeholder="인증번호를 입력하세요." type="text" id="verificationCode" styles="w-[24.38rem]" required />
+        <Button type="button" styles="w-[6.25rem]">
+          확인
+        </Button>
+      </div>
+      <div className="flex flex-row gap-x-2">
+        <Input placeholder="닉네임을 입력하세요." type="text" id="nickname" styles="w-[21.88rem]" required />
+        <Button type="button" styles="w-[8.75rem]">
+          중복확인
+        </Button>
+      </div>
+      <Input placeholder="비밀번호" type="password" id="password" required />
+      <Input placeholder="비밀번호 확인" type="password" id="verificationPassword" required />
+      <Input placeholder="자신을 소개해 주세요." type="text" id="bio" styles="h-[9.38rem]" />
+      <Input placeholder="링크를 등록해 보세요.(GitHub, Blog 등)" type="text" id="website" />
+      <div className="flex flex-row gap-x-2">
+        <Input
+          placeholder="링크를 추가해 보세요.(GitHub, Blog 등)"
+          type="text"
+          id="addWebsite"
+          styles="w-[26.31rem] bg-[#C2C2C2]"
+          required
+        />
+        <Button type="button">+</Button>
+      </div>
+      <div className="flex flex-col gap-y-4 text-center">
+        <Button type="submit" styles="w-[31.25rem]">
+          회원가입
+        </Button>
+        <p className="sm:text-m font-bold text-[#E1F4D9] cursor-pointer">로그인 페이지로 돌아가기</p>
       </div>
-    </div>
+    </form>
   );
 }