[Feature/BAR-279] 계정설정 이슈 해결 (#97)

* fix: 호버시 하단 border 처리

* fix: 계정설정 정보 수정

* fix: Dialog 말줄임 설정

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>

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')}

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',
   },
 ]);
 

src/domain/계정설정/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`);
     }
   };
 

src/domain/계정설정/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']}`,
+    },
+  },
+]);

src/domain/계정설정/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'] });
     },
   });
 };