diff --git a/pages/profile/index.tsx b/pages/profile/index.tsx
index 665fcc8..e28b23d 100644
--- a/pages/profile/index.tsx
+++ b/pages/profile/index.tsx
@@ -119,20 +119,20 @@ const ProfilePage = () => {
/>
diff --git a/src/components/Layout/components/ProfileButton.tsx b/src/components/Layout/components/ProfileButton.tsx
index f4b050d..106d56d 100644
--- a/src/components/Layout/components/ProfileButton.tsx
+++ b/src/components/Layout/components/ProfileButton.tsx
@@ -34,7 +34,7 @@ const ProfileButton = () => {
- {data?.nickname}님
+ {data?.nickname}님
router.push('/profile')}
diff --git a/src/components/Layout/style.css.ts b/src/components/Layout/style.css.ts
index df4dc7d..11084f5 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 694d3af..22392c2 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 f1e0a67..cd706b1 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 6415c26..47b675a 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'] });
},
});
};