From dc3275b45488cbcf78c63829003b223a05335011 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=A5=EB=8F=99=EA=B7=A0?=
 <57230590+dongkyun-dev@users.noreply.github.com>
Date: Sat, 23 Mar 2024 12:54:14 +0900
Subject: [PATCH] =?UTF-8?q?[Feature/BAR-279]=20=EA=B3=84=EC=A0=95=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0=20(#97)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 호버시 하단 border 처리

* fix: 계정설정 정보 수정

* fix: Dialog 말줄임 설정
---
 pages/profile/index.tsx                       |  8 +++----
 .../Layout/components/ProfileButton.tsx       |  2 +-
 src/components/Layout/style.css.ts            |  4 ++++
 .../components/Form/index.tsx"                |  4 ----
 .../index.css.ts"                             | 22 ++++++++++++++-----
 .../mutations/useUpdateProfile.ts"            |  3 ++-
 6 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/pages/profile/index.tsx b/pages/profile/index.tsx
index 665fcc8b..e28b23d5 100644
--- a/pages/profile/index.tsx
+++ b/pages/profile/index.tsx
@@ -119,20 +119,20 @@ const ProfilePage = () => {
         />
         <div className={styles.textButtonWrapper}>
           <button
-            className={styles.textButton}
+            className={styles.textButtonTextWrapper}
             onClick={() => {
               localStorage.removeItem(STORAGE_KEY.ACCESS_TOKEN);
               Cookies.remove(STORAGE_KEY.REFRESH_TOKEN);
               router.push(ROUTES.LANDING);
             }}
           >
-            로그아웃
+            <span className={styles.textButton}>로그아웃</span>
           </button>
           <button
-            className={styles.textButton}
+            className={styles.textButtonTextWrapper}
             onClick={exitModalProps.handleOpen}
           >
-            회원탈퇴
+            <span className={styles.textButton}>회원탈퇴</span>
           </button>
         </div>
       </div>
diff --git a/src/components/Layout/components/ProfileButton.tsx b/src/components/Layout/components/ProfileButton.tsx
index f4b050da..106d56dd 100644
--- a/src/components/Layout/components/ProfileButton.tsx
+++ b/src/components/Layout/components/ProfileButton.tsx
@@ -34,7 +34,7 @@ const ProfileButton = () => {
       <Dropdown.List>
         <Dropdown.Title>
           <Icon icon="profileDialog" width={40} height={40} />
-          <span className={styles.profileName}>{data?.nickname}님</span>
+          <span className={styles.profileName}>{data?.nickname}</span>님
         </Dropdown.Title>
         <Dropdown.Item
           onClick={() => router.push('/profile')}
diff --git a/src/components/Layout/style.css.ts b/src/components/Layout/style.css.ts
index df4dc7df..11084f56 100644
--- a/src/components/Layout/style.css.ts
+++ b/src/components/Layout/style.css.ts
@@ -77,6 +77,10 @@ export const profileName = style([
     verticalAlign: 'middle',
     display: 'inline-block',
     marginLeft: '8px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    maxWidth: '112px',
+    textOverflow: 'ellipsis',
   },
 ]);
 
diff --git "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/Form/index.tsx" "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/Form/index.tsx"
index 694d3af7..22392c2e 100644
--- "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/Form/index.tsx"
+++ "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/Form/index.tsx"
@@ -1,8 +1,6 @@
-import { useRouter } from 'next/navigation';
 import { type FormEvent, useMemo, useState } from 'react';
 
 import Icon from '@components/Icon';
-import { ROUTES } from '@constants/routes';
 import { useInput } from '@hooks/useInput';
 
 import useUpdateProfile from '../../mutations/useUpdateProfile';
@@ -17,7 +15,6 @@ interface ProfileFormProps {
 }
 
 const ProfileForm = ({ name, nickname, authType, email }: ProfileFormProps) => {
-  const router = useRouter();
   const { mutate: updateProfile } = useUpdateProfile();
 
   const nameInputProps = useInput({ id: 'name', defaultValue: name });
@@ -134,7 +131,6 @@ const ProfileForm = ({ name, nickname, authType, email }: ProfileFormProps) => {
         name: nameInputProps.value,
         nickname: nicknameInputProps.value,
       });
-      router.push(`${ROUTES.MAIN}?tab=write`);
     }
   };
 
diff --git "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/index.css.ts" "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/index.css.ts"
index f1e0a675..cd706b18 100644
--- "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/index.css.ts"
+++ "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/index.css.ts"
@@ -1,5 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
+import { sprinkles } from '@styles/sprinkles.css';
 import { COLORS } from '@styles/tokens';
 
 export const container = style({
@@ -56,11 +57,20 @@ export const textButtonWrapper = style({
   justifyContent: 'flex-end',
 });
 
-export const textButton = style({
+export const textButtonTextWrapper = style({
   padding: '16px 24px',
-  color: COLORS['Grey/500'],
-  fontSize: '17px',
-  fontWeight: '500',
-  lineHeight: '27px',
-  letterSpacing: '-0.3px',
 });
+
+export const textButton = style([
+  sprinkles({
+    typography: '17/Body/Medium',
+  }),
+  {
+    color: COLORS['Grey/500'],
+
+    ':hover': {
+      color: COLORS['Grey/700'],
+      borderBottom: `1.5px solid ${COLORS['Grey/700']}`,
+    },
+  },
+]);
diff --git "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/mutations/useUpdateProfile.ts" "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/mutations/useUpdateProfile.ts"
index 6415c260..47b675a7 100644
--- "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/mutations/useUpdateProfile.ts"
+++ "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/mutations/useUpdateProfile.ts"
@@ -23,7 +23,8 @@ const useUpdateProfile = () => {
     mutationFn: updateProfile,
     onSuccess: () => {
       showToast({ message: '모든 변경사항이 저장됐어요.' });
-      queryClient.invalidateQueries({ queryKey: ProfileQueryKeys.all });
+      queryClient.refetchQueries({ queryKey: ProfileQueryKeys.getProfile });
+      queryClient.refetchQueries({ queryKey: ['my-profile'] });
     },
   });
 };