Merge pull request #225 from boostcampwm-2024/feature/mypage/myInfo

[FE] 유저 닉네임 수정 레이아웃 구현 및 API 연동
boostcampwm-2024 · Nov 28, 2024 · 99b4903 · 99b4903
2 parents 4ca6cbb + e7e2a43
commit 99b4903
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 22 deletions.
diff --git a/FE/src/components/Mypage/BookMark.tsx b/FE/src/components/Mypage/BookMark.tsx
@@ -49,6 +49,7 @@ export default function BookMark() {
               <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>

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/StocksDetail/TradeSection/BuySection.tsx b/FE/src/components/StocksDetail/TradeSection/BuySection.tsx
@@ -1,4 +1,11 @@
-import { ChangeEvent, FocusEvent, FormEvent, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FocusEvent,
+  FormEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import useTradeAlertModalStore from 'store/tradeAlertModalStore';
 import { StockDetailType } from 'types';
 import { isNumericString } from 'utils/common';
@@ -24,6 +31,10 @@ export default function BuySection({ code, detailInfo }: BuySectionProps) {
   const [currPrice, setCurrPrice] = useState<string>(stck_prpr);
   const { isLogin } = useAuthStore();
 
+  useEffect(() => {
+    setCurrPrice(stck_prpr);
+  }, [stck_prpr]);
+
   const { isOpen, toggleModal } = useTradeAlertModalStore();
 
   const [count, setCount] = useState<number>(0);

diff --git a/FE/src/components/StocksDetail/TradeSection/SellSection.tsx b/FE/src/components/StocksDetail/TradeSection/SellSection.tsx
@@ -2,7 +2,14 @@ import Lottie from 'lottie-react';
 import emptyAnimation from 'assets/emptyAnimation.json';
 import { useQuery } from '@tanstack/react-query';
 import { getSellInfo } from 'service/assets';
-import { ChangeEvent, FocusEvent, FormEvent, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FocusEvent,
+  FormEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { StockDetailType } from 'types';
 import useAuthStore from 'store/authStore';
 import useTradeAlertModalStore from 'store/tradeAlertModalStore';
@@ -34,6 +41,10 @@ export default function SellSection({ code, detailInfo }: SellSectionProps) {
 
   const { isOpen, toggleModal } = useTradeAlertModalStore();
 
+  useEffect(() => {
+    setCurrPrice(stck_prpr);
+  }, [stck_prpr]);
+
   if (isLoading) return <div>loading</div>;
   if (!data) return <div>No data</div>;
   if (isError) return <div>error</div>;

diff --git a/FE/src/hooks/useUser.ts b/FE/src/hooks/useUser.ts
@@ -0,0 +1,17 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { getMyProfile, rename } from 'service/user';
+
+export default function useUser() {
+  const queryClient = useQueryClient();
+
+  const userQuery = useQuery(['myInfo', 'profile'], () => getMyProfile(), {
+    staleTime: 1000,
+  });
+
+  const updateNickame = useMutation((nickname: string) => rename(nickname), {
+    onSuccess: () => queryClient.invalidateQueries(['myInfo', 'profile']),
+  });
+
+  return { userQuery, updateNickame };
+}
diff --git a/FE/src/service/stocks.ts b/FE/src/service/stocks.ts
@@ -1,9 +1,16 @@
 import { StockChartUnit, StockDetailType, TiemCategory } from 'types';
 
 export async function getStocksByCode(code: string): Promise<StockDetailType> {
-  return fetch(`${import.meta.env.VITE_API_URL}/stocks/detail/${code}`).then(
-    (res) => res.json(),
-  );
+  const url = import.meta.env.PROD
+    ? `${import.meta.env.VITE_API_URL}/stocks/detail/${code}`
+    : `/api/stocks/detail/${code}`;
+
+  return fetch(url, {
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((res) => res.json());
 }
 
 export async function getStocksChartDataByCode(

diff --git a/FE/src/service/user.ts b/FE/src/service/user.ts
@@ -10,3 +10,18 @@ export async function getMyProfile(): Promise<Profile> {
     headers: { 'Content-Type': 'application/json' },
   }).then((res) => res.json());
 }
+
+export async function rename(nickname: string) {
+  const url = import.meta.env.PROD
+    ? `${import.meta.env.VITE_API_URL}/user/rename`
+    : '/api/user/rename';
+
+  return fetch(url, {
+    method: 'PATCH',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      nickname,
+    }),
+  }).then((res) => res.json());
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,6 +49,7 @@ export default function BookMark() { @@
                   <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>
@@ Expand Down @@