Merge pull request #4 from wafflestudio/feat/signup

Feat: signup page publishing

src/App.tsx

@@ -1,9 +1,13 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import Landing from '@/pages/landing';
+import Signup from '@/pages/signup';
 import '@/styles/styles.css';
 
-const routes = [{ path: '/', element: <Landing /> }];
+const routes = [
+  { path: '/', element: <Landing /> },
+  { path: '/signup', element: <Signup /> },
+];
 
 const router = createBrowserRouter(routes);
 function App() {

src/components/BigButton.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+
+const BigButton = ({ text }: { text: string }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div className="flex h-12 w-full flex-shrink-0 items-center justify-center">
+      <button
+        className={`h-10 w-full cursor-pointer rounded-md border border-none transition-colors duration-300 ${
+          isHovered
+            ? 'bg-[#35C273] text-[#000000]'
+            : 'bg-[#F6F4F1] text-[#9F9A94]'
+        }`}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <div className="text-center font-['Pretendard'] text-[15px] font-semibold">
+          {text}
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default BigButton;

src/constants/images.tsx

@@ -1,3 +1,6 @@
+import BACK_BUTTON from '@/assets/images/backward-button.svg';
+import SIGNUP_LOGO from '@/assets/images/signup.svg';
 import BLACK_LOGO from '@/assets/images/wemade-logo-black.png';
+import GRAY_SMALL_LOGO from '@/assets/images/wemade-logo-gray-small.svg';
 
-export { BLACK_LOGO };
+export { BLACK_LOGO, GRAY_SMALL_LOGO, BACK_BUTTON, SIGNUP_LOGO };

src/pages/landing.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { Layout } from '@/components/Layout';
 import LoginButton from '@/components/LoginButton';
@@ -25,12 +26,12 @@ const Landing = () => {
         </div>
         <div className="text-[15px] text-textGrey2">
           처음이시라면?
-          <a
-            href="/"
+          <Link
+            to="/signup"
             className="ml-2.5 font-psemibold text-textGreen underline"
           >
             회원가입하기
-          </a>
+          </Link>
         </div>
       </div>
     </Layout>

src/pages/signup.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import BigButton from '@/components/BigButton';
+import { Layout } from '@/components/Layout';
+import { GRAY_SMALL_LOGO, BACK_BUTTON, SIGNUP_LOGO } from '@/constants/images';
+
+const Signup = () => {
+  return (
+    <Layout>
+      <div className="mx-auto flex h-full w-full max-w-[330px] flex-col justify-center gap-8">
+        <div className="mb-8 flex w-full flex-col items-start">
+          <Link
+            to="/"
+            className="mb-4 h-[30px] w-[30px]"
+          >
+            <img
+              src={BACK_BUTTON}
+              alt="back"
+              className="cursor-pointer"
+            />
+          </Link>
+          <img
+            src={GRAY_SMALL_LOGO}
+            alt="logo"
+            className="mb-4 w-[120px]"
+          />
+          <img
+            src={SIGNUP_LOGO}
+            alt="signup"
+            className="w-[120px]"
+          />
+        </div>
+
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium text-textGrey2">이메일</label>
+            <div className="flex items-center gap-3">
+              <div className="flex w-full items-center rounded-md border border-borderGrey bg-backgroundWhite px-3 py-2">
+                <input
+                  type="email"
+                  placeholder="이메일을 입력하세요."
+                  className="flex-grow text-[15px] font-medium text-textGrey1 focus:outline-none"
+                />
+              </div>
+              <button className="whitespace-nowrap rounded-md border border-borderGrey bg-backgroundGrey px-4 py-2 text-[15px] font-medium">
+                인증하기
+              </button>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium text-textGrey2">
+              전화번호
+            </label>
+            <div className="flex w-full items-center rounded-md border border-borderGrey bg-backgroundWhite px-3 py-2">
+              <input
+                type="tel"
+                placeholder="전화번호를 입력하세요."
+                className="flex-grow text-[15px] font-medium text-textGrey1 focus:outline-none"
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1.5 pb-2">
+            <label className="text-sm font-medium text-textGrey2">직책</label>
+            <div className="flex w-full items-center rounded-md border border-borderGrey bg-backgroundWhite px-3 py-2">
+              <input
+                type="text"
+                placeholder="직책을 입력하세요."
+                className="flex-grow text-[15px] font-medium text-textGrey1 focus:outline-none"
+              />
+            </div>
+          </div>
+        </div>
+
+        <BigButton text="다음" />
+      </div>
+    </Layout>
+  );
+};
+
+export default Signup;