Feature/#295 - 자잘한 UI 에러 수정 (#296)

boostcampwm-2024 · Nov 29, 2024 · 89d2b12 · 89d2b12
2 parents 478d06d + 5730653
commit 89d2b12
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 48 deletions.
diff --git a/packages/frontend/src/apis/queries/chat/usePostChatLike.ts b/packages/frontend/src/apis/queries/chat/usePostChatLike.ts
@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import {
   GetChatLikeResponseSchema,
   type GetChatLikeRequest,
@@ -14,13 +14,8 @@ const postChatLike = ({ chatId }: GetChatLikeRequest) =>
   });
 
 export const usePostChatLike = () => {
-  const queryClient = useQueryClient();
-
   return useMutation({
     mutationKey: ['chatLike'],
     mutationFn: ({ chatId }: GetChatLikeRequest) => postChatLike({ chatId }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['chatLike'] });
-    },
   });
 };
diff --git a/packages/frontend/src/components/layouts/Sidebar.tsx b/packages/frontend/src/components/layouts/Sidebar.tsx
@@ -40,7 +40,7 @@ export const Sidebar = () => {
     <div ref={ref}>
       <nav
         className={cn(
-          'fixed left-0 top-0 z-10 h-full cursor-pointer bg-white px-1 py-4 shadow-md',
+          'fixed left-0 top-0 z-20 h-full cursor-pointer bg-white px-1 py-4 shadow-md',
           'transition-all duration-300 ease-in-out',
           isHovered ? 'w-60' : 'w-24',
         )}

diff --git a/packages/frontend/src/constants/chatPlaceholder.ts b/packages/frontend/src/constants/chatPlaceholder.ts
@@ -8,7 +8,7 @@ export const chatPlaceholder = {
     message: '로그인 후 입력 가능합니다.',
   },
   NOT_OWNERSHIP: {
-    message: '주주 소유자만 입력 가능합니다.',
+    message: '주식 소유자만 입력 가능합니다.',
   },
   OWNERSHIP: {
     message: '100자 이내로 입력 가능합니다.',

diff --git a/packages/frontend/src/constants/menuItems.tsx b/packages/frontend/src/constants/menuItems.tsx
@@ -9,7 +9,12 @@ import { type MenuSection } from '@/types/menu';
 export const TOP_MENU_ITEMS: MenuSection[] = [
   { id: 1, icon: <Search className="w-7" />, text: '검색' },
   { id: 2, icon: <Home className="w-7" />, text: '홈', path: '/' },
-  { id: 3, icon: <Stock className="w-7" />, text: '주식', path: '/stocks' },
+  {
+    id: 3,
+    icon: <Stock className="w-7" />,
+    text: '주식',
+    path: '/stocks/005930',
+  },
   { id: 4, icon: <Bell className="w-7" />, text: '알림' },
 ];
 

diff --git a/packages/frontend/src/pages/login/Login.tsx b/packages/frontend/src/pages/login/Login.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useGetTestLogin } from '@/apis/queries/auth/useGetTestLogin';
 import google from '@/assets/google.png';
 import { Button } from '@/components/ui/button';
@@ -11,6 +11,7 @@ interface LoginButtonProps {
 }
 
 export const Login = () => {
+  const navigate = useNavigate();
   const googleLoginUrl = '/api/auth/google/login';
   const { refetch } = useGetTestLogin({ password: 'test', username: 'test' });
 
@@ -24,7 +25,13 @@ export const Login = () => {
         </section>
         <section className="relative z-10 flex flex-col gap-4">
           <LoginButton to={googleLoginUrl} src={google} alt="구글 로그인" />
-          <Button onClick={() => refetch()} className="h-10 w-full">
+          <Button
+            onClick={() => {
+              refetch();
+              navigate('/');
+            }}
+            className="h-10 w-full"
+          >
             게스트로 로그인
           </Button>
         </section>

diff --git a/packages/frontend/src/pages/my-page/StockInfo.tsx b/packages/frontend/src/pages/my-page/StockInfo.tsx
@@ -38,7 +38,10 @@ export const StockInfo = ({ loginStatus }: StockInfoProps) => {
                 <p>{stock.name}</p>
                 <Button
                   size="sm"
-                  onClick={() => mutate({ stockId: stock.stockId })}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    mutate({ stockId: stock.stockId });
+                  }}
                 >
                   삭제
                 </Button>

diff --git a/packages/frontend/src/pages/stock-detail/ChatPanel.tsx b/packages/frontend/src/pages/stock-detail/ChatPanel.tsx
@@ -101,11 +101,11 @@ export const ChatPanel = ({ loginStatus, isOwnerStock }: ChatPanelProps) => {
       mutate({ chatId });
       return;
     }
-    alert('주주 소유자만 가능합니다.');
+    alert('주식 소유자만 가능합니다.');
   };
 
   return (
-    <article className="flex min-w-80 flex-col gap-5 rounded-md bg-white p-7">
+    <article className="flex min-w-80 flex-col gap-5 rounded-md bg-white p-7 shadow">
       <h2 className="display-bold20 text-center font-bold">채팅</h2>
       <TextArea
         onSend={handleSendMessage}
@@ -119,28 +119,15 @@ export const ChatPanel = ({ loginStatus, isOwnerStock }: ChatPanelProps) => {
           <DownArrow className="cursor-pointer" />
         </div>
       </div>
-      <article className="relative">
-        {!isOwnerStock && (
-          <div
-            className={cn(
-              'display-bold16 absolute top-64 flex h-[calc(100%-16rem)] w-full items-center justify-center bg-black/5 text-center backdrop-blur-sm',
-              chatData.length < 4 && 'top-0 h-full',
-            )}
-          >
-            <span>
-              주주 소유자만
-              <br /> 확인할 수 있습니다.
-            </span>
-          </div>
+      <section
+        className={cn(
+          'flex h-[40rem] flex-col gap-8 overflow-auto break-words break-all p-3',
+          isOwnerStock ? 'overflow-auto' : 'overflow-hidden',
         )}
-        <section
-          className={cn(
-            'flex h-[40rem] flex-col gap-8 overflow-auto break-words break-all p-3',
-            isOwnerStock ? 'overflow-auto' : 'overflow-hidden',
-          )}
-        >
-          {chatData ? (
-            chatData.map((chat) => (
+      >
+        {chatData ? (
+          <>
+            {chatData.slice(0, 3).map((chat) => (
               <ChatMessage
                 key={chat.id}
                 name={chat.nickname}
@@ -150,12 +137,34 @@ export const ChatPanel = ({ loginStatus, isOwnerStock }: ChatPanelProps) => {
                 writer={nickname || ''}
                 onClick={() => handleLikeClick(chat.id)}
               />
-            ))
-          ) : (
-            <p className="text-center">채팅이 없어요.</p>
-          )}
-        </section>
-      </article>
+            ))}
+            {chatData.slice(3).map((chat, index) => (
+              <div className="relative" key={chat.id}>
+                {!isOwnerStock && (
+                  <div className="absolute inset-0 flex items-center justify-center bg-black/5 text-center backdrop-blur-sm">
+                    {index === 0 && (
+                      <p>
+                        주식 소유자만 <br />
+                        확인할 수 있습니다.
+                      </p>
+                    )}
+                  </div>
+                )}
+                <ChatMessage
+                  name={chat.nickname}
+                  contents={isOwnerStock ? chat.message : '로그인 후 이용 가능'}
+                  likeCount={chat.likeCount}
+                  liked={chat.liked}
+                  writer={nickname || ''}
+                  onClick={() => handleLikeClick(chat.id)}
+                />
+              </div>
+            ))}
+          </>
+        ) : (
+          <p className="text-center">채팅이 없어요.</p>
+        )}
+      </section>
     </article>
   );
 };
diff --git a/packages/frontend/src/pages/stock-detail/StockDetail.tsx b/packages/frontend/src/pages/stock-detail/StockDetail.tsx
@@ -34,7 +34,7 @@ export const StockDetail = () => {
         loginStatus={loginStatus}
         isOwnerStock={userOwnerStock.isOwner}
       />
-      <article className="grid flex-1 grid-cols-1 gap-5 lg:grid-cols-2 xl:grid-cols-[2.5fr_1fr_1fr] [&_section]:gap-5">
+      <article className="grid flex-1 grid-cols-1 gap-5 xl:grid-cols-[2fr_1fr] 2xl:grid-cols-[2.5fr_1fr_1fr] [&_section]:gap-5">
         <section className="flex flex-col">
           <div className="relative h-full">
             <TradingChart />
@@ -51,9 +51,13 @@ export const StockDetail = () => {
           loginStatus={loginStatus}
           isOwnerStock={userOwnerStock.isOwner}
         />
-        <section className="flex flex-row flex-wrap gap-5 lg:flex-col xl:flex-nowrap">
-          <NotificationPanel className="h-full w-full xl:h-1/2" />
-          <AddAlarmForm className="h-full w-full xl:h-1/2" />
+        <section className="flex flex-wrap gap-5 2xl:flex-col 2xl:flex-nowrap">
+          <div className="flex-1">
+            <NotificationPanel className="h-full w-full" />
+          </div>
+          <div className="flex-1">
+            <AddAlarmForm className="h-full w-full" />
+          </div>
         </section>
       </article>
     </div>

diff --git a/packages/frontend/src/pages/stock-detail/TradingChart.tsx b/packages/frontend/src/pages/stock-detail/TradingChart.tsx
@@ -35,7 +35,7 @@ export const TradingChart = ({ theme = lightTheme }: TradingChartProps) => {
   useChartResize({ containerRef, chart });
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex h-[30rem] flex-col xl:h-full">
       <section className="flex justify-end">
         {TIME_UNIT.map((option) => (
           <RadioButton
@@ -49,7 +49,7 @@ export const TradingChart = ({ theme = lightTheme }: TradingChartProps) => {
           </RadioButton>
         ))}
       </section>
-      <div ref={containerRef} className="w-full flex-grow" />
+      <div ref={containerRef} className="h-0 w-full flex-grow" />
     </div>
   );
 };
diff --git a/yarn.lock b/yarn.lock
@@ -3810,7 +3810,7 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2, debug@~4.3.4:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
   integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
@@ -4069,6 +4069,22 @@ engine.io-parser@~5.2.1:
   resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.3.tgz#00dc5b97b1f233a23c9398d0209504cf5f94d92f"
   integrity sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==
 
+engine.io@~6.6.0:
+  version "6.6.2"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.6.2.tgz#32bd845b4db708f8c774a4edef4e5c8a98b3da72"
+  integrity sha512-gmNvsYi9C8iErnZdVcJnvCpSKbWTt1E8+JZo8b+daLninywUWi5NQ5STSHZ9rFjFO7imNcvb8Pc5pe/wMR5xEw==
+  dependencies:
+    "@types/cookie" "^0.4.1"
+    "@types/cors" "^2.8.12"
+    "@types/node" ">=10.0.0"
+    accepts "~1.3.4"
+    base64id "2.0.0"
+    cookie "~0.7.2"
+    cors "~2.8.5"
+    debug "~4.3.1"
+    engine.io-parser "~5.2.1"
+    ws "~8.17.1"
+
 enhanced-resolve@^5.0.0, enhanced-resolve@^5.17.1, enhanced-resolve@^5.7.0:
   version "5.17.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
@@ -7894,6 +7910,14 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
+socket.io-adapter@~2.5.2:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz#c7a1f9c703d7756844751b6ff9abfc1780664082"
+  integrity sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==
+  dependencies:
+    debug "~4.3.4"
+    ws "~8.17.1"
+
 socket.io-client@^4.8.1:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.8.1.tgz#1941eca135a5490b94281d0323fe2a35f6f291cb"