Merge pull request #3 from wafflestudio/feat/landing

Feat: 디자인 시스템 및 landing 페이지 UI

src/App.tsx

@@ -1,11 +1,13 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+import Landing from '@/pages/landing';
 import '@/styles/styles.css';
 
+const routes = [{ path: '/', element: <Landing /> }];
+
+const router = createBrowserRouter(routes);
 function App() {
-  return (
-    <>
-      <h1 className="text-3xl font-bold underline">WEMADE 프로젝트</h1>
-    </>
-  );
+  return <RouterProvider router={router} />;
 }
 
 export default App;

src/components/Layout.tsx

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+
+export const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="relative mx-auto flex h-screen w-full max-w-[560px] flex-col overflow-hidden">
+      {children}
+    </div>
+  );
+};

src/components/LoginButton.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+
+const LoginButton = ({ text }: { text: string }) => {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleClick = () => {
+    setIsClicked(!isClicked);
+  };
+
+  return (
+    <div className="flex h-12 w-full flex-shrink-0 items-center justify-center">
+      <button
+        className={`cursor-pointer rounded-md border border-borderGrey px-[73.5px] py-[9px] ${
+          isClicked ? 'bg-backgroundGrey' : 'bg-backgroundWhite'
+        }`}
+        onClick={handleClick}
+      >
+        <div className="text-[15px] text-titleBlack">{text}</div>
+      </button>
+    </div>
+  );
+};
+
+export default LoginButton;

src/constants/images.tsx

@@ -0,0 +1,3 @@
+import BLACK_LOGO from '@/assets/images/wemade-logo-black.png';
+
+export { BLACK_LOGO };

src/pages/landing.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Layout } from '@/components/Layout';
+import LoginButton from '@/components/LoginButton';
+import { BLACK_LOGO } from '@/constants/images';
+const Landing = () => {
+  return (
+    <Layout>
+      <div className="flex h-full flex-col items-center justify-center">
+        <div className="mb-[82px] flex flex-col items-center justify-center">
+          <img
+            src={BLACK_LOGO}
+            alt="logo"
+            className="w-[274.8px]"
+          />
+          <div className="font-isans text-xl text-titleBlack">
+            안녕하세요 위메이드입니다.
+          </div>
+        </div>
+        <LoginButton text="Google 계정으로 로그인하기" />
+        <div className="my-[38px] flex w-[320px] items-center">
+          <hr className="flex-grow border-t border-textGrey1" />
+          <span className="mx-3.5 text-sm text-textGrey1">OR</span>
+          <hr className="flex-grow border-t border-textGrey1" />
+        </div>
+        <div className="text-[15px] text-textGrey2">
+          처음이시라면?
+          <a
+            href="/"
+            className="ml-2.5 font-psemibold text-textGreen underline"
+          >
+            회원가입하기
+          </a>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Landing;

src/styles/styles.css

@@ -1,3 +1,40 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  font-family: 'Pretendard Medium`', sans-serif;
+}
+@font-face {
+  font-family: 'Pretendard Medium';
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src:
+    url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Medium.woff2')
+      format('woff2'),
+    url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Medium.woff')
+      format('woff'),
+    url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-Medium.otf')
+      format('opentype');
+}
+@font-face {
+  font-family: 'Pretendard SemiBold';
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  src:
+    url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-SemiBold.woff2')
+      format('woff2'),
+    url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-SemiBold.woff')
+      format('woff'),
+    url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard-SemiBold.otf')
+      format('opentype');
+}
+@font-face {
+  font-family: 'InfinitySans-RegularA1';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/InfinitySans-RegularA1.woff')
+    format('woff');
+  font-weight: 600;
+  font-style: normal;
+}

tailwind.config.ts

@@ -2,7 +2,25 @@
 export default {
   content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        pmedium: ['Pretendard Medium', 'sans-serif'],
+        psemibold: ['Pretendard SemiBold', 'sans-serif'],
+        isans: ['InfinitySans-RegularA1', 'sans-serif'],
+      },
+      colors: {
+        titleBlack: '#000000',
+        pointColor: '#19F078',
+        borderGrey: '#DAD3CB',
+        textGrey1: '#9F9A94',
+        textGrey2: '#7B7773',
+        textGreen: '#33DB7D',
+        backgroundWhite: '#FFF',
+        backgroundGrey: '#F6F4F1',
+        backgroundGreen: '#35C274',
+        errorRed: '#EC3737',
+      },
+    },
   },
   plugins: [],
 };