Merge pull request #116 from boostcampwm-2024/front/main

[FE] 브랜치 병합

.github/workflows/CI.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches: [back/main, front/main]
   pull_request:
-    branches: [main, back/main, dev]
+    branches: [back/main, front/main]
 
 jobs:
   BE-test-and-build:
@@ -49,7 +49,7 @@ jobs:
         with:
           node-version: '20'
           cache: 'npm'
-          cache-dependency-path: ./BE/package-lock.json
+          cache-dependency-path: ./FE/package-lock.json
 
       - name: Install dependencies
         working-directory: ./FE

FE/package.json

@@ -12,9 +12,11 @@
   "dependencies": {
     "@heroicons/react": "^2.1.5",
     "@tanstack/react-query": "^4.36.1",
+    "lottie-react": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
+    "socket.io-client": "^4.8.1",
     "vite-tsconfig-paths": "^5.0.1",
     "zustand": "^5.0.1"
   },

FE/src/App.css

@@ -3,4 +3,6 @@
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  display: flex;
+  flex-direction: column;
 }

FE/src/App.tsx

@@ -1,15 +1,40 @@
-import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import {
+  Outlet,
+  Route,
+  BrowserRouter as Router,
+  Routes,
+} from 'react-router-dom';
 import './App.css';
 import Home from 'page/Home';
+import StocksDetail from 'page/StocksDetail';
+import Header from 'components/Header';
+import Login from 'components/Login';
+import SearchModal from './components/Search';
 
 function App() {
   return (
     <Router>
       <Routes>
-        <Route path='/' element={<Home />} />
+        <Route path='/' element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path='stocks/:id' element={<StocksDetail />} />
+        </Route>
       </Routes>
     </Router>
   );
 }
 
 export default App;
+
+function Layout() {
+  return (
+    <>
+      <Header />
+      <main className='mt-[60px] flex flex-col gap-4'>
+        <Outlet />
+      </main>
+      <Login />
+      <SearchModal />
+    </>
+  );
+}

FE/src/components/Header.tsx

@@ -1,17 +1,23 @@
+import { Link } from 'react-router-dom';
 import useAuthStore from 'store/authStore';
 import useLoginModalStore from 'store/useLoginModalStore';
+import useSearchModalStore from '../store/useSearchModalStore.ts';
+import useSearchInputStore from '../store/useSearchInputStore.ts';
+import logo from 'assets/Logo.png';
 
 export default function Header() {
   const { toggleModal } = useLoginModalStore();
   const { isLogin, resetToken } = useAuthStore();
+  const { toggleSearchModal } = useSearchModalStore();
+  const { searchInput } = useSearchInputStore();
 
   return (
     <header className='fixed left-0 top-0 h-[60px] w-full'>
-      <div className='mx-auto flex h-full max-w-[1280px] items-center justify-between px-[88px]'>
-        <div className='flex items-center gap-2'>
-          <img src={'../public/Logo.png'} className={'h-[32px]'} />
+      <div className='mx-auto flex h-full max-w-[1280px] items-center justify-between px-8'>
+        <Link to={'/'} className='flex items-center gap-2'>
+          <img src={logo} className={'h-[32px]'} />
           <h1 className='text-xl font-bold text-juga-grayscale-black'>JuGa</h1>
-        </div>
+        </Link>
 
         <div className='flex items-center gap-8'>
           <nav className='flex items-center gap-6 text-sm font-bold text-juga-grayscale-500'>
@@ -23,7 +29,9 @@ export default function Header() {
             <input
               type='text'
               placeholder='Search...'
+              defaultValue={searchInput}
               className='h-[36px] w-[280px] rounded-lg bg-juga-grayscale-50 px-4 py-2'
+              onClick={toggleSearchModal}
             />
           </div>
         </div>

FE/src/components/Login/index.tsx

@@ -4,12 +4,14 @@ import { ChatBubbleOvalLeftIcon } from '@heroicons/react/16/solid';
 import { FormEvent, useEffect, useState } from 'react';
 import { login } from 'service/auth';
 import useAuthStore from 'store/authStore';
+import Overay from '../ModalOveray.tsx';
 
 export default function Login() {
   const { isOpen, toggleModal } = useLoginModalStore();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const { setAccessToken } = useAuthStore();
+  const [errorCode, setErrorCode] = useState<number>(200);
 
   useEffect(() => {
     setEmail('');
@@ -23,6 +25,7 @@ export default function Login() {
     const res = await login(email, password);
 
     if ('error' in res) {
+      setErrorCode(res.statusCode);
       return;
     }
 
@@ -35,6 +38,14 @@ export default function Login() {
       <Overay onClick={() => toggleModal()} />
       <section className='fixed left-1/2 top-1/2 flex w-[500px] -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl bg-white p-20 shadow-lg'>
         <h2 className='text-3xl font-bold'>JuGa</h2>
+        <p className='h-5 my-3 text-sm font-semibold text-juga-red-60'>
+          {
+            {
+              '401': '존재하지 않는 사용자입니다.',
+              '400': '잘못된 입력형식입니다.',
+            }[errorCode]
+          }
+        </p>
         <form className='flex flex-col mb-2' onSubmit={handleSubmit}>
           <div className='flex flex-col gap-2 my-10'>
             <Input
@@ -58,15 +69,11 @@ export default function Login() {
         </form>
         <button className='flex items-center justify-center gap-2 rounded-3xl bg-yellow-300 px-3.5 py-2 transition hover:bg-yellow-400'>
           <ChatBubbleOvalLeftIcon className='size-5' />
-          <p>카카오 계정으로 로그인</p>
+          <a href={`${import.meta.env.VITE_API_URL}/auth/kakao`}>
+            카카오 계정으로 로그인
+          </a>
         </button>
       </section>
     </>
   );
 }
-
-function Overay({ onClick }: { onClick: () => void }) {
-  return (
-    <div className='fixed inset-0 bg-black opacity-30' onClick={onClick}></div>
-  );
-}

FE/src/components/ModalOveray.tsx

@@ -0,0 +1,5 @@
+export default function Overay({ onClick }: { onClick: () => void }) {
+  return (
+    <div className='fixed inset-0 bg-black opacity-30' onClick={onClick}></div>
+  );
+}

FE/src/components/Search/SearchCard.tsx

@@ -0,0 +1,48 @@
+import { SearchDataType } from './searchDataType.ts';
+import { useNavigate } from 'react-router-dom';
+import useSearchModalStore from '../../store/useSearchModalStore.ts';
+import useSearchInputStore from '../../store/useSearchInputStore.ts';
+import { SearchCardHighLight } from './SearchCardHighlight.tsx';
+
+type SearchCardProps = {
+  data: SearchDataType;
+};
+
+export default function SearchCard({ data }: SearchCardProps) {
+  const { code, name, market } = data;
+  const { isOpen, toggleSearchModal } = useSearchModalStore();
+  const { searchInput } = useSearchInputStore();
+
+  const navigation = useNavigate();
+
+  const handleClick = () => {
+    navigation(`/stocks/${code}`);
+    if (isOpen) toggleSearchModal();
+  };
+
+  return (
+    <li
+      className={
+        'h-[52px] w-full rounded-xl hover:cursor-pointer hover:bg-gray-100'
+      }
+      onClick={handleClick}
+    >
+      <div className={'my-2 flex w-full items-center justify-between px-4'}>
+        <div className={'flex-1 flex-col'}>
+          <div className='text-left font-medium text-gray-900'>
+            <SearchCardHighLight text={name} highlight={searchInput} />
+          </div>
+          <div className={'text-left text-xs font-normal text-gray-500'}>
+            {code}
+          </div>
+        </div>
+
+        <div className={'flex flex-col items-end justify-center gap-0.5'}>
+          <p className={'text-right text-xs font-medium text-gray-600'}>
+            {market}
+          </p>
+        </div>
+      </div>
+    </li>
+  );
+}