diff --git a/src/app/follow/[id]/layout.tsx b/src/app/follow/[id]/layout.tsx index 59a0f3d1..e10e5c5b 100644 --- a/src/app/follow/[id]/layout.tsx +++ b/src/app/follow/[id]/layout.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useRouter } from 'next/navigation'; +import { usePathname, useRouter } from 'next/navigation'; import { ReactNode } from 'react'; import Header from '@components/common/Header'; @@ -12,7 +12,10 @@ export default function Layout({ children }: { children: ReactNode }) { router.back(); }; - const { data: userProfile } = useGetUserProfile(); + const pathname = usePathname(); + const userId = Number(pathname.split('/').pop()); + + const { data: userProfile } = useGetUserProfile(Number(userId)); return (
diff --git a/src/app/follow/[id]/page.tsx b/src/app/follow/[id]/page.tsx index 1870d42e..968114f4 100644 --- a/src/app/follow/[id]/page.tsx +++ b/src/app/follow/[id]/page.tsx @@ -14,7 +14,7 @@ export default function Page() { const type = searchParams.get('type'); const { data: followerList } = useGetFollowingList(userId, 'FOLLOWER'); - const { data: followingList } = useGetFollowingList(userId, 'FOLLOWER'); + const { data: followingList } = useGetFollowingList(userId, 'FOLLOWING'); return (
diff --git a/src/app/mypage/layout.tsx b/src/app/mypage/layout.tsx deleted file mode 100644 index c9925d98..00000000 --- a/src/app/mypage/layout.tsx +++ /dev/null @@ -1,63 +0,0 @@ -'use client'; - -import { useRouter } from 'next/navigation'; -import { toast } from 'sonner'; - -import Header from '@components/common/Header'; -import { useGetUserProfile } from '@hooks/api/useGetUserProfile'; -import SettingIcon from 'public/assets/icon24/setting_24.svg'; -import ShareIcon from 'public/assets/icon24/share_24.svg'; -import copyToClipboard from '@utils/copyToClipboard'; - -interface LayoutProps { - children: React.ReactNode; -} -export default function Layout({ children }: LayoutProps) { - const router = useRouter(); - const { data: userProfile } = useGetUserProfile(); - - const handleClickBackButton = () => { - router.push('/'); - }; - - const handleClickSettingButton = () => router.push('/settings'); - - const copyShareAddress = () => { - copyToClipboard({ - text: `https://ddoeat.site/share/${userProfile?.userId}`, - onCopySuccess: () => toast('내 맛집 지도 링크를 클립보드에 복사했어요!'), - }); - }; - - const handleClickShareButton = () => { - if (!navigator.share) { - copyShareAddress(); - return; - } - - try { - navigator.share({ - title: `${userProfile?.nickname}의 맛집지도`, - text: `${userProfile?.nickname}의 맛집지도`, - url: `https://ddoeat.site/share/${userProfile?.userId}`, - }); - } catch (error) { - copyShareAddress(); - } - }; - - return ( -
-
-
- - -
-
- {children} -
- ); -} diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx deleted file mode 100644 index b3e4752b..00000000 --- a/src/app/mypage/page.tsx +++ /dev/null @@ -1,114 +0,0 @@ -'use client'; - -import { ChangeEvent, RefCallback, useEffect, useState } from 'react'; -import { toast } from 'sonner'; - -import PenIcon from 'public/assets/icon24/pen_24.svg'; -import Tab from '@components/mypage/Tab'; -import { - DDOBAP_LEVEL_IMAGE, - DEFAULT_DDOBAP_LEVEL, - MAX_INPUT_SIZE, -} from '@constants/mypage'; -import { useGetUserProfile } from '@hooks/api/useGetUserProfile'; -import { usePutUserName } from '@hooks/api/usePutUserName'; -import MyLogContent from '@components/mypage/MyLogContent'; -import BookMarkContent from '@components/mypage/BookMarkContent'; - -export default function Page() { - const [isInputActive, setIsInputActive] = useState(false); - - const { data: userProfile } = useGetUserProfile(); - const { mutate: putUserName } = usePutUserName({ - onError: (error) => { - if (error?.response?.status === 400) { - toast('중복된 이름입니다.'); - } - }, - }); - - const userLevel = userProfile?.level || DEFAULT_DDOBAP_LEVEL; - const StatusImage = DDOBAP_LEVEL_IMAGE[userLevel]; - - const [nickName, setNickName] = useState(userProfile?.nickname); - - useEffect(() => { - setNickName(userProfile?.nickname); - }, [userProfile?.nickname]); - - const handleUserNameClick = () => setIsInputActive(true); - - const handleInputValue = (e: ChangeEvent) => { - const newValue = e.target.value; - - if (newValue.length <= MAX_INPUT_SIZE) setNickName(newValue); - }; - - const handleInputRefCallback: RefCallback = (input) => { - input?.focus(); - }; - - const handleInputBlur = () => { - setIsInputActive(false); - if (!nickName?.trim().length) setNickName(userProfile?.nickname || ''); - else putUserName(nickName || ''); - }; - - return ( -
-
-
-
{userLevel}
-
-
- {isInputActive ? ( -
- - -
- ) : ( -
- - -
- )} -
-
-
-
- -
-
- -
-
- -
- - 내 기록 - 북마크 - -
-
- - - - - - -
- -
-
-
- ); -} diff --git a/src/hooks/api/useGetUserProfile.ts b/src/hooks/api/useGetUserProfile.ts index 49cac7c5..a812deed 100644 --- a/src/hooks/api/useGetUserProfile.ts +++ b/src/hooks/api/useGetUserProfile.ts @@ -4,19 +4,26 @@ import { AxiosError } from 'axios'; import { ApiResponse, axiosRequest } from '../../api/api-config'; export interface UserInfo { - nickname: string; - level: '맨밥이' | '배고픈' | '또밥이' | '또또밥이'; + isMine: boolean; userId: number; + profileImgUrl: string; + nickname: string; + feedCnt: number; + follwerCnt: number; + followingCnt: number; + isFollowed: boolean; } -const getUserProfile = (): Promise> => { - return axiosRequest('get', '/api/v1/users/profile'); +const getUserProfile = (userId: number): Promise> => { + return axiosRequest('get', `/api/v1/profile/${userId}`); }; -export const useGetUserProfile = (): UseQueryResult => { +export const useGetUserProfile = ( + userId: number, +): UseQueryResult => { return useQuery({ queryKey: ['get-userProfile'], - queryFn: getUserProfile, + queryFn: () => getUserProfile(userId), select: (data) => data.data, }); };