Merge branch 'dev' of https://github.com/boostcampwm-2024/web16-JuGa …

…into dev
boostcampwm-2024 · Nov 28, 2024 · fd2c632 · fd2c632
2 parents 2b7526a + bed6e57
commit fd2c632
Show file tree

Hide file tree

Showing 32 changed files with 548 additions and 96 deletions.
diff --git a/FE/index.html b/FE/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="src/assets/favicon.ico" type="image/x-icon" />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"

diff --git a/FE/package-lock.json b/FE/package-lock.json
diff --git a/FE/package.json b/FE/package.json
@@ -17,6 +17,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react-router-dom": "^6.27.0",
+    "react-toastify": "^10.0.6",
     "socket.io-client": "^4.8.1",
     "vite-tsconfig-paths": "^5.0.1",
     "zustand": "^5.0.1"

diff --git a/FE/src/App.tsx b/FE/src/App.tsx
@@ -12,6 +12,8 @@ import Login from 'components/Login';
 import SearchModal from './components/Search';
 import MyPage from 'page/MyPage';
 import Rank from 'page/Rank.tsx';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 function App() {
   return (
@@ -39,6 +41,7 @@ function Layout() {
       </main>
       <Login />
       <SearchModal />
+      <ToastContainer />
     </>
   );
 }
diff --git a/FE/src/assets/favicon.ico b/FE/src/assets/favicon.ico
diff --git a/FE/src/assets/Logo.png → FE/src/assets/logo.png b/FE/src/assets/Logo.png → FE/src/assets/logo.png
diff --git a/FE/src/assets/logo.webp b/FE/src/assets/logo.webp
diff --git a/FE/src/components/Header.tsx b/FE/src/components/Header.tsx
@@ -3,7 +3,8 @@ 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';
+import logoPng from 'assets/logo.png';
+import logoWebp from 'assets/logo.webp';
 import { checkAuth, logout } from 'service/auth.ts';
 import { useEffect } from 'react';
 
@@ -42,7 +43,14 @@ export default function Header() {
     <header className='fixed left-0 top-0 h-[60px] w-full bg-white'>
       <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]'} />
+          <picture>
+            <source
+              srcSet={logoWebp}
+              type='image/webp'
+              className={'h-[32px]'}
+            />
+            <img src={logoPng} className={'h-[32px]'} />
+          </picture>
           <h1 className='text-xl font-bold text-juga-grayscale-black'>JuGa</h1>
         </Link>
 

diff --git a/FE/src/components/Mypage/Account.tsx b/FE/src/components/Mypage/Account.tsx
@@ -20,8 +20,6 @@ export default function Account() {
 
   const { asset, stocks } = data;
 
-  console.log(asset, stocks);
-
   return (
     <div className='flex min-h-[500px] flex-col gap-3'>
       <AccountCondition asset={asset} />

diff --git a/FE/src/components/Mypage/BookMark.tsx b/FE/src/components/Mypage/BookMark.tsx
@@ -0,0 +1,61 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { getBookmarkedStocks } from 'service/bookmark';
+
+export default function BookMark() {
+  const navigation = useNavigate();
+
+  const handleClick = (code: string) => {
+    navigation(`/stocks/${code}`);
+  };
+
+  const { data, isLoading, isError } = useQuery(
+    ['bookmark', 'stock'],
+    () => getBookmarkedStocks(),
+    {
+      staleTime: 1000,
+    },
+  );
+
+  if (isLoading) return <div>loading</div>;
+  if (!data) return <div>No data</div>;
+  if (isError) return <div>error</div>;
+
+  return (
+    <div className='mx-auto flex min-h-[500px] w-full flex-1 flex-col rounded-md bg-white p-4 shadow-md'>
+      <div className='flex pb-2 text-sm font-bold border-b'>
+        <p className='w-1/2 text-left truncate'>종목</p>
+        <p className='w-1/4 text-center'>현재가</p>
+        <p className='w-1/4 text-right'>등락률</p>
+      </div>
+
+      <ul className='flex flex-col text-sm divide-y'>
+        {data.map((stock) => {
+          const { code, name, stck_prpr, prdy_ctrt, prdy_vrss_sign } = stock;
+
+          return (
+            <li
+              className='flex py-2 transition-colors hover:cursor-pointer hover:bg-gray-50'
+              key={code}
+              onClick={() => handleClick(code)}
+            >
+              <div className='flex w-1/2 gap-2 text-left truncate'>
+                <p className='font-semibold'>{name}</p>
+                <p className='text-gray-500'>{code}</p>
+              </div>
+              <p className='w-1/4 text-center truncate'>
+                {(+stck_prpr).toLocaleString()}원
+              </p>
+              <p
+                className={`w-1/4 truncate text-right ${+prdy_vrss_sign > 3 ? 'text-juga-blue-50' : 'text-juga-red-60'}`}
+              >
+                {+prdy_vrss_sign < 3 && '+'}
+                {prdy_ctrt}%
+              </p>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
diff --git a/FE/src/components/Mypage/MyInfo.tsx b/FE/src/components/Mypage/MyInfo.tsx
@@ -1,34 +1,88 @@
 import { PencilSquareIcon } from '@heroicons/react/16/solid';
-import { useQuery } from '@tanstack/react-query';
-import { getMyProfile } from 'service/user';
+import Toast from 'components/Toast';
+
+import useUser from 'hooks/useUser';
+import { useEffect, useState } from 'react';
 
 export default function MyInfo() {
-  const { data, isLoading, isError } = useQuery(
-    ['myInfo', 'profile'],
-    () => getMyProfile(),
-    { staleTime: 1000 },
-  );
+  const [isEditMode, setIsEditMode] = useState(false);
+  const { userQuery, updateNickame } = useUser();
+
+  const { data, isLoading, isError } = userQuery;
+
+  const [nickname, setNickname] = useState('');
+
+  useEffect(() => {
+    if (!data) return;
+    setNickname(data.name);
+  }, [data]);
 
   if (isLoading) return <div>loading</div>;
   if (!data) return <div>No data</div>;
   if (isError) return <div>error</div>;
 
-  const { name } = data;
+  const handeleEditBtnClick = () => {
+    if (nickname === data.name) {
+      setIsEditMode(false);
+      return;
+    }
+
+    updateNickame.mutate(nickname, {
+      onSuccess: (res) => {
+        if (res.statusCode === 400) {
+          Toast({ message: res.message, type: 'error' });
+          return;
+        }
+        setIsEditMode(false);
+      },
+    });
+  };
 
   return (
     <div className='flex flex-col items-center p-6 text-lg'>
-      <div className='flex w-[50%] items-center gap-2 py-2'>
+      <div className='flex w-full max-w-[600px] items-center gap-2 py-2 sm:w-[80%] lg:w-[50%]'>
         <div className='flex items-center justify-between w-full'>
-          <p className='w-28 min-w-[100px] truncate font-medium text-juga-grayscale-black'>
-            username
+          <p className='w-28 min-w-[80px] truncate font-medium text-juga-grayscale-black sm:min-w-[100px]'>
+            닉네임
           </p>
           <div className='flex items-center gap-2'>
-            <p className='min-w-[50px] truncate font-semibold text-juga-grayscale-500'>
-              {name}
-            </p>
-            <button>
-              <PencilSquareIcon className='w-5 h-5' />
-            </button>
+            {isEditMode ? (
+              <>
+                <input
+                  type='text'
+                  value={nickname}
+                  onChange={(e) => setNickname(e.target.value)}
+                  className='w-24 min-w-[60px] flex-1 text-right font-semibold text-juga-grayscale-500 sm:w-auto sm:min-w-[80px]'
+                  autoFocus
+                />
+                <button
+                  onClick={handeleEditBtnClick}
+                  className='w-10 p-1 text-sm font-semibold text-white rounded-lg bg-juga-blue-40'
+                >
+                  수정
+                </button>
+                <button
+                  onClick={() => {
+                    setNickname(data.name);
+                    setIsEditMode(false);
+                  }}
+                  className='w-10 p-1 text-sm font-semibold text-white rounded-lg bg-juga-grayscale-500'
+                >
+                  취소
+                </button>
+              </>
+            ) : (
+              <>
+                <p className='min-w-[60px] truncate font-semibold text-juga-grayscale-500 sm:min-w-[80px]'>
+                  {nickname}
+                </p>
+                <div className='flex items-center justify-end w-9'>
+                  <button onClick={() => setIsEditMode(true)}>
+                    <PencilSquareIcon className='w-5 h-5' />
+                  </button>
+                </div>
+              </>
+            )}
           </div>
         </div>
       </div>

diff --git a/FE/src/components/Mypage/Nav.tsx b/FE/src/components/Mypage/Nav.tsx
@@ -4,9 +4,10 @@ import { MypageSectionType } from 'types';
 const mapping = {
   account: '보유 자산 현황',
   order: '주문 요청 현황',
+  bookmark: '즐겨찾기',
   info: '내 정보',
 };
-const sections: MypageSectionType[] = ['account', 'order', 'info'];
+const sections: MypageSectionType[] = ['account', 'order', 'bookmark', 'info'];
 
 export default function Nav() {
   const [searchParams, setSearchParams] = useSearchParams();

diff --git a/FE/src/components/Search/index.tsx b/FE/src/components/Search/index.tsx
@@ -47,7 +47,7 @@ export default function SearchModal() {
     <>
       <Overlay onClick={() => toggleSearchModal()} />
       <section
-        className={`${searchInput.length ? 'h-[520px]' : 'h-[160px]'} fixed left-1/2 top-3 z-20 w-[640px] -translate-x-1/2 rounded-2xl bg-white shadow-xl`}
+        className={`${searchInput.length ? 'h-[520px]' : ''} fixed left-1/2 top-3 z-20 w-[640px] -translate-x-1/2 rounded-2xl bg-white shadow-xl`}
       >
         <div
           className={'absolute left-0 right-0 top-0 rounded-t-2xl bg-white p-3'}
@@ -70,8 +70,18 @@ export default function SearchModal() {
 
               <div className={'h-[400px] overflow-y-auto'}>
                 {isSearching ? (
-                  <div className={'flex h-full items-center justify-center'}>
-                    <Lottie animationData={searchAnimation} />
+                  <div
+                    className={
+                      'flex h-[320px] flex-col items-center justify-center'
+                    }
+                  >
+                    <Lottie
+                      animationData={searchAnimation}
+                      className='h-[200px]'
+                    />
+                    <p className='font-bold text-juga-grayscale-black'>
+                      두 글자 이상의 검색어를 입력해주세요.
+                    </p>
                   </div>
                 ) : (
                   showSearchResults && <SearchList searchData={data} />