[Merge] main <- dev

[Feat] #7 로그인 화면 개발 및 서비스 연동
infruencer · Feb 3, 2024 · bfa11a4 · bfa11a4
2 parents ba56631 + e901f21
commit bfa11a4
Show file tree

Hide file tree

Showing 35 changed files with 1,604 additions and 200 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,28 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "overrides": [],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
+npx lint-staged
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100
+}
diff --git a/package.json b/package.json
@@ -16,19 +16,39 @@
     "@types/react": "^18.2.47",
     "@types/react-dom": "18.0.11",
     "axios": "^1.6.5",
+    "dayjs": "^1.11.7",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "next": "13.2.4",
     "next-auth": "^4.20.1",
     "react": "18.2.0",
     "react-cookie": "^7.0.1",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.49.3",
     "react-icons": "^4.8.0",
     "react-multi-carousel": "^2.8.2",
     "react-redux": "^9.1.0",
     "react-spinners": "^0.13.8",
     "styled-components": "^6.1.8",
     "styled-reset": "^4.5.2",
-    "typescript": "4.9.5"
+    "typescript": "^5.3.3",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.2",
+    "prettier": "^2.8.4"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ]
   }
 }
diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,13 @@
+import React from 'react';
 import './globals.css';
 import { Open_Sans } from 'next/font/google';
 import { Metadata } from 'next';
 import StyledComponents from '@/lib/StyledComponents';
 import QueryProvider from '@/lib/QueryProvider';
 import ReduxProvider from '@/lib/ReduxProvider';
 import ReactCookiesProvider from '@/lib/CookiesProvider';
+import Header from '@/components/layout/Header';
+import Main from '@/components/layout/Main';
 
 const openSans = Open_Sans({ subsets: ['latin'] });
 
@@ -18,15 +21,15 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang='en' className={openSans.className}>
+    <html lang="en" className={openSans.className}>
       <body>
         <QueryProvider>
           <ReduxProvider>
             <ReactCookiesProvider>
               <StyledComponents>
-                <header></header>
-                <main>{children}</main>
-                <div id='portal' />
+                <Header />
+                <Main>{children}</Main>
+                <div id="portal" />
               </StyledComponents>
             </ReactCookiesProvider>
           </ReduxProvider>

diff --git a/src/app/auth/login/page.tsx → src/app/login/page.tsx b/src/app/auth/login/page.tsx → src/app/login/page.tsx
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import Login from './auth/login/page';
+import Welcome from '@/components/layout/Welcome';
 
 export default async function HomePage() {
   return (
     <section>
-      <Login />
+      <Welcome />
     </section>
   );
 }
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Signup = () => {
+  return <div>Signup</div>;
+};
+
+export default Signup;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -0,0 +1,27 @@
+'use client';
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+import { styled } from 'styled-components';
+import logo from '@/public/static/images/logo.png';
+
+const Header = () => {
+  return (
+    <Container>
+      <Link href={'/'}>
+        <Image src={logo} alt="logo" width={141} height={49} />
+      </Link>
+    </Container>
+  );
+};
+
+export default Header;
+
+const Container = styled.header`
+  width: 100vw;
+  height: 80px;
+  display: flex;
+  padding: 16px 30px 16px 40px;
+  box-sizing: border-box;
+  box-shadow: 0 4px 20px 0 rgba(178, 178, 178, 0.15);
+`;
diff --git a/src/components/layout/Main.tsx b/src/components/layout/Main.tsx
@@ -0,0 +1,25 @@
+'use client';
+import React, { FC } from 'react';
+import { styled } from 'styled-components';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+/**
+ * 메인 레이아웃
+ * @param children: 자식 컴포넌트
+ */
+const Main: FC<Props> = ({ children }) => {
+  return <Container>{children}</Container>;
+};
+
+export default Main;
+
+const Container = styled.main`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: calc(100vh - 80px);
+`;
diff --git a/src/components/layout/Welcome.tsx b/src/components/layout/Welcome.tsx
@@ -0,0 +1,37 @@
+'use client';
+import Image from 'next/image';
+import React from 'react';
+import logo from '@/public/static/images/logo_big.png';
+import styled from 'styled-components';
+import Button from '../ui/Button';
+import { useRouter } from 'next/navigation';
+
+/**
+ * 시작하기 페이지
+ */
+const Welcome = () => {
+  const router = useRouter();
+
+  /**
+   * 시작하기 버튼 클릭 시 로그인 페이지로 이동
+   */
+  const handleStart = () => {
+    router.push('/login');
+  };
+
+  return (
+    <Container>
+      <Image src={logo} alt="logo" width={442} height={88} />
+      <Button text="시작하기" onClick={handleStart} theme={'white'} />
+    </Container>
+  );
+};
+
+export default Welcome;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+`;
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -1,13 +1,76 @@
+import React from 'react';
+import styled from 'styled-components';
+
 interface IButtonProps {
   text: string;
   onClick: () => void;
   disabled?: boolean;
+  theme?: string;
 }
 
-export default function Button({ text, onClick, disabled = false }: IButtonProps) {
+export default function Button({ text, onClick, disabled = false, theme = '' }: IButtonProps) {
   return (
-    <button onClick={() => onClick()} disabled={disabled}>
+    <StyledButton onClick={() => onClick()} disabled={disabled} theme={theme}>
       {text}
-    </button>
+    </StyledButton>
   );
 }
+
+const StyledButton = styled.button<{ theme: string }>`
+  width: 350px;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  border-width: 2px;
+  border-style: solid;
+  cursor: pointer;
+  font-size: 17px;
+  font-weight: 500;
+  ${(props) => {
+    switch (props.theme) {
+      case 'white':
+        return `
+          border-color: #FF9048;
+          background-color: #ffffff; 
+          color: #FF9048;
+          &:hover {
+            border-color: #FF9048;
+            background-color: #FF9048; 
+            color: #ffffff;
+          }
+        `;
+      case 'orange':
+        return `
+          border-color: #FF9048;
+          background-color: #FF9048; 
+          color: #ffffff;
+          &:hover {
+            border-color: #FF9048;
+            background-color: #ffffff; 
+            color: #FF9048;
+          }
+          `;
+      case 'google':
+        return `
+          border-color: #FFFFFF;
+          background-color: #00ff00; 
+          color: #3C3C3C;
+        `;
+      case 'text':
+        return `
+          border: none;
+          background-color: transparent; 
+          color: #A99F9F;
+          width: fit-content;
+          height: fit-content;
+        `;
+      default:
+        return `
+          background-color: #cccccc; 
+          color: #000000;
+        `;
+    }
+  }}
+`;
diff --git a/src/hooks/useAxios.tsx b/src/hooks/useAxios.tsx
@@ -0,0 +1,38 @@
+import axios, { AxiosError, AxiosRequestConfig } from 'axios';
+import { useEffect, useRef, useState } from 'react';
+
+const API_BASE_URL = `${process.env.NEXT_PUBLIC_API_BASE_URL}`;
+axios.defaults.baseURL = API_BASE_URL;
+
+/**
+ * axios 커스텀 훅
+ * @param axiosParams: axios 요청 데이터
+ * @author 안가을
+ */
+export const useAxios = <T, D = any>(axiosParams: AxiosRequestConfig<D>) => {
+  const [response, setResponse] = useState<T | null>(null);
+  const [error, setError] = useState<AxiosError | unknown>();
+  const [loading, setLoading] = useState(true);
+  const controllerRef = useRef(new AbortController());
+  const cancelRequest = () => controllerRef.current.abort();
+
+  const fetchData = async (params: AxiosRequestConfig<D>) => {
+    try {
+      const result = await axios.request<T>({
+        ...params,
+        signal: controllerRef.current.signal,
+      });
+      setResponse(result.data);
+    } catch (err: AxiosError | unknown) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData(axiosParams);
+  }, [axiosParams]);
+
+  return { cancelRequest, response, error, loading };
+};