Merge pull request #8 from FastSubTeam/feat/loginPage

Feat/login page
FastSubTeam · Jun 29, 2023 · 3461baf · 3461baf
2 parents 20c783b + 622ab83
commit 3461baf
Show file tree

Hide file tree

Showing 16 changed files with 278 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -2,19 +2,14 @@
 
 [Headless UI](https://headlessui.com/)
 
+[Tail Blocks](https://tailblocks.cc/)
+
 [React Router DOM](https://reactrouter.com/en/main)
 
 [React Icons](https://react-icons.github.io/react-icons)
 
-# 규칙
-
-1. export default functional component
-1. @ alias
-1. text 색은 기본(검정색), sub-text & border 색은 gray-400
-1. yarn(x) npm(o)
-
 # 이슈 생성
 
 개발 시작 전 ToDo에 Issue 등록
 Projects탭 -> + 버튼 -> create new issue 또는  
-Issue 탭 -> New issue 버튼 -> 템플릿 선택 -> 이슈 등록
+Issue 탭 -> New issue 버튼 -> 템플릿 선택 -> 이슈 등록
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,71 @@
+export default function Footer() {
+  return (
+    <footer className="body-font text-gray-400">
+      <div className="container mx-auto flex flex-col items-center border-t px-10 py-3 sm:flex-row">
+        <img src="/popple.jpg" alt="popple" className="h-8" />
+        <p className="mt-4 text-sm text-subTextAndBorder sm:ml-4 sm:mt-0 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:pl-4">
+          <span className="ml-1 text-gray-400" rel="noopener noreferrer">
+            © 2023 POPPLE @FASTSIDE
+          </span>
+        </p>
+        <span className="mt-4 inline-flex justify-center sm:ml-auto sm:mt-0 sm:justify-start">
+          <a className="text-subTextAndBorder">
+            <svg
+              fill="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="h-5 w-5"
+              viewBox="0 0 24 24"
+            >
+              <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+            </svg>
+          </a>
+          <a className="ml-3 text-subTextAndBorder">
+            <svg
+              fill="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="h-5 w-5"
+              viewBox="0 0 24 24"
+            >
+              <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+            </svg>
+          </a>
+          <a className="ml-3 text-subTextAndBorder">
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="h-5 w-5"
+              viewBox="0 0 24 24"
+            >
+              <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+              <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
+            </svg>
+          </a>
+          <a className="ml-3 text-subTextAndBorder">
+            <svg
+              fill="currentColor"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="0"
+              className="h-5 w-5"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke="none"
+                d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
+              ></path>
+              <circle cx="4" cy="4" r="2" stroke="none"></circle>
+            </svg>
+          </a>
+        </span>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,20 +1,29 @@
 import { NAV_ITEMS } from '@/constants/constants';
+import { Link } from 'react-router-dom';
 
 export default function Navbar() {
   return (
     <header className="container mx-auto flex items-center justify-between px-10 py-5">
       <div className="flex items-center gap-10">
-        <img src="/popple.jpg" alt="main-logo" className="h-8" />
+        <Link to="/">
+          <img src="/popple.jpg" alt="main-logo" className="h-8" />
+        </Link>
         <ul className="flex gap-3">
           {NAV_ITEMS.map((item) => (
-            <li key={item.label}>{item.label}</li>
+            <li key={item.label}>
+              <Link to={item.href}>{item.label}</Link>
+            </li>
           ))}
         </ul>
       </div>
       <div>
         <ul className="flex gap-2">
-          <li className="text-gray-400">회원가입</li>
-          <li>로그인</li>
+          <li>
+            <Link to="/login">로그인</Link>
+          </li>
+          <li>
+            <Link to="/signup">회원가입</Link>
+          </li>
         </ul>
       </div>
     </header>

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -1,6 +1,6 @@
 interface ButtonProps {
   contents: string | JSX.Element;
-  onClick: () => void;
+  onClick?: () => void;
   submit?: boolean;
   secondary?: boolean;
   disabled?: boolean;
@@ -20,7 +20,7 @@ export default function Button({
       type={submit ? 'submit' : 'button'}
       className={`${
         secondary ? 'bg-white text-accent' : 'bg-accent text-white'
-      } block w-full rounded-md border-2 border-accent px-3 py-2 font-bold ring-gray-400 ring-offset-2 transition hover:opacity-80 focus:ring-2 active:scale-95 disabled:pointer-events-none disabled:opacity-30`}
+      } block w-full rounded-md border-2 border-accent px-3 py-2 font-bold ring-subTextAndBorder ring-offset-2 transition hover:opacity-80 focus:ring-2 active:scale-95 disabled:pointer-events-none disabled:opacity-30`}
     >
       {contents}
     </button>

diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
@@ -0,0 +1,34 @@
+interface InputProps {
+  placeholder?: string;
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  type?: string;
+  label?: string;
+  name: string;
+}
+
+export default function Input({
+  placeholder,
+  value,
+  onChange,
+  type,
+  label,
+  name,
+}: InputProps) {
+  return (
+    <div>
+      <label className="text-subTextAndBorder" htmlFor={label}>
+        {label}
+      </label>
+      <input
+        name={name}
+        id={label}
+        className="block w-full rounded-md border-2 border-subTextAndBorder px-3 py-2 outline-none transition focus:border-accent"
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        type={type}
+      />
+    </div>
+  );
+}
diff --git a/src/components/ui/KakoaButton.tsx b/src/components/ui/KakoaButton.tsx
@@ -0,0 +1,25 @@
+import { RiKakaoTalkFill } from 'react-icons/ri';
+
+interface KakoaButtonProps {
+  disabled: boolean;
+}
+
+export default function KakoaButton({ disabled }: KakoaButtonProps) {
+  return (
+    <a
+      href="https://kauth.kakao.com/oauth/authorize?client_id=921fbdc50a1c510a40df3bebfcf15573&redirect_uri=http://localhost:5173/auth/kakao/callback&response_type=code"
+      className={`${disabled ? 'pointer-events-none' : ''}`}
+    >
+      <button
+        disabled={disabled}
+        className="flex w-full items-center justify-center rounded-md border-2 border-[#ffe812] bg-[#ffe812] px-3 py-2 font-bold ring-black ring-offset-2 transition hover:opacity-80 focus:ring-2 active:scale-95 disabled:pointer-events-none disabled:opacity-30"
+        type="button"
+      >
+        <div className="flex items-center gap-2">
+          <RiKakaoTalkFill size={20} />
+          <span>카카오로 로그인 하기</span>
+        </div>
+      </button>
+    </a>
+  );
+}
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
@@ -47,12 +47,12 @@ export default function Modal() {
                 <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title
                     as="h3"
-                    className="text-lg font-medium leading-6 text-gray-900"
+                    className="text-lg font-medium leading-6"
                   >
                     Payment successful
                   </Dialog.Title>
                   <div className="mt-2">
-                    <p className="text-sm text-gray-500">
+                    <p className="text-sm text-subTextAndBorder">
                       Your payment has been successfully submitted. We’ve sent
                       you an email with all of the details of your order.
                     </p>

diff --git a/src/components/ui/Seletct.tsx b/src/components/ui/Seletct.tsx
@@ -22,7 +22,7 @@ export default function Select({
         value={value}
         name={name}
         onChange={onChange}
-        className="block w-full appearance-none rounded-md border-2 border-gray-400 px-3 py-2 transition focus:border-accent focus:outline-none"
+        className="block w-full appearance-none rounded-md border-2 border-subTextAndBorder px-3 py-2 transition focus:border-accent focus:outline-none"
       >
         {options.map((option) => (
           <option key={option.value} value={option.value}>

diff --git a/src/components/ui/TextInput.tsx b/src/components/ui/TextInput.tsx
diff --git a/src/components/ui/Title.tsx b/src/components/ui/Title.tsx
@@ -0,0 +1,3 @@
+export default function Title({ text }: { text: string }) {
+  return <div className="text-2xl font-bold">{text}</div>;
+}
diff --git a/src/components/ui/Toggle.tsx b/src/components/ui/Toggle.tsx
@@ -1,15 +1,17 @@
-import { useState } from 'react';
 import { Switch } from '@headlessui/react';
 
-export default function Toggle() {
-  const [enabled, setEnabled] = useState(false);
+interface ToggleProps {
+  enabled: boolean;
+  onToggle: () => void;
+}
 
+export default function Toggle({ enabled, onToggle }: ToggleProps) {
   return (
     <Switch
       checked={enabled}
-      onChange={setEnabled}
+      onChange={onToggle}
       className={`${
-        enabled ? 'bg-accent' : 'bg-gray-400'
+        enabled ? 'bg-accent' : 'bg-subTextAndBorder'
       } relative inline-flex h-6 w-11 items-center rounded-full`}
     >
       <span

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -1,18 +1,18 @@
 export const NAV_ITEMS = [
   {
     label: '팝업스토어',
-    href: '/',
+    href: '/store',
   },
   {
     label: '공간찾기',
-    href: '/',
+    href: '/search',
   },
   {
     label: '임차대행',
-    href: '/',
+    href: '/rent',
   },
   {
     label: '프로모션대행',
-    href: '/',
+    href: '/promotion',
   },
 ];
diff --git a/src/index.css b/src/index.css
@@ -3,17 +3,17 @@
 @tailwind utilities;
 
 .loading-white {
-  width: 30px;
-  height: 30px;
+  width: 20px;
+  height: 20px;
   margin: auto;
   border: 4px solid white;
   border-top-color: transparent;
   border-radius: 50%;
   animation: loader 1s infinite;
 }
 .loading-accent {
-  width: 30px;
-  height: 30px;
+  width: 20px;
+  height: 20px;
   margin: auto;
   border: 4px solid #00c9a7;
   border-top-color: transparent;