diff --git a/client/src/app/(protectedRoute)/user/follow-list/layout.tsx b/client/src/app/(protectedRoute)/user/follow-list/layout.tsx deleted file mode 100644 index 0c8f813..0000000 --- a/client/src/app/(protectedRoute)/user/follow-list/layout.tsx +++ /dev/null @@ -1,22 +0,0 @@ -"use client"; -import CustomAppbar from "@/components/layout/CustomAppbar"; -import CustomContainer from "@/components/layout/CustomContainer"; -import { useMyInfoQuery } from "@/queries/auth/useMyInfoQuery"; -import { ReactNode } from "react"; - -type FollowListLayoutProps = { - children: ReactNode; -}; - -const FollowListLayout = ({ children }: FollowListLayoutProps) => { - const { data: myInfo } = useMyInfoQuery(); - - return ( - <> - - {children} - - ); -}; - -export default FollowListLayout; diff --git a/client/src/app/(protectedRoute)/user/follow-list/page.tsx b/client/src/app/(protectedRoute)/user/follow-list/page.tsx deleted file mode 100644 index 6028be2..0000000 --- a/client/src/app/(protectedRoute)/user/follow-list/page.tsx +++ /dev/null @@ -1,39 +0,0 @@ -"use client"; - -import { Box } from "@mui/material"; -import CustomToggleButtonGroup from "@/components/CustomToggleButtonGroup"; -import { appbarHeight } from "@/const/uiSizes"; -import { Suspense, useState } from "react"; -import FollowingList from "@/components/user/followList/FollowingList"; -import FollowingUserCardSkeleton from "@/components/user/followList/FollowingUserCardSkeleton"; -import ComponentRepeater from "@/components/ComponentRepeater"; -import FollowerList from "@/components/user/followList/FollowerList"; - -const FollowListPage = () => { - const selectableList = ["팔로잉", "팔로워"]; - const [currentView, setCurrentView] = useState(selectableList[0]); - - return ( - <> - - {/* Fixed로 빠진 button 위치만큼의 place holder */} - - - - - } - > - {currentView === "팔로잉" && } - {currentView === "팔로워" && } - - - ); -}; - -export default FollowListPage; diff --git a/client/src/app/(protectedRoute)/user/setting/layout.tsx b/client/src/app/(protectedRoute)/user/setting/layout.tsx index 5d6a50d..459189a 100644 --- a/client/src/app/(protectedRoute)/user/setting/layout.tsx +++ b/client/src/app/(protectedRoute)/user/setting/layout.tsx @@ -1,7 +1,6 @@ "use client"; import CustomAppbar from "@/components/layout/CustomAppbar"; -import { appbarHeight } from "@/const/uiSizes"; import { Container, Stack } from "@mui/material"; import { ReactNode } from "react"; @@ -13,10 +12,7 @@ const UserInfoPageLayout = ({ children }: Props) => { return ( <> - + {children} diff --git a/client/src/components/ComponentRepeater.tsx b/client/src/components/ComponentRepeater.tsx deleted file mode 100644 index 7dd0fba..0000000 --- a/client/src/components/ComponentRepeater.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { cloneElement, ReactComponentElement } from "react"; - -type Props = { - children: ReactComponentElement; - count: number; -}; - -const ComponentRepeater = ({ children, count }: Props) => { - return ( - <> - {Array.from(new Array(count)).map((_e, i) => - cloneElement(children, { key: i }) - )} - - ); -}; - -export default ComponentRepeater; diff --git a/client/src/components/CustomToggleButtonGroup.tsx b/client/src/components/CustomToggleButtonGroup.tsx deleted file mode 100644 index e042fc2..0000000 --- a/client/src/components/CustomToggleButtonGroup.tsx +++ /dev/null @@ -1,72 +0,0 @@ -"use client"; -import { - ToggleButton, - ToggleButtonGroup, - ToggleButtonGroupProps, - Typography, -} from "@mui/material"; -import { useState } from "react"; - -interface CustomToggleButtonGroupType - extends Omit { - onChange: (val: string) => void; - value: string[]; -} - -const CustomToggleButtonGroup = ({ - onChange, - value, - sx, - ...toggleBtnGroupProps -}: CustomToggleButtonGroupType) => { - const [currentValue, setCurrentValue] = useState(value[0]); - - return ( - { - if (val !== null) { - setCurrentValue(val); - onChange(val); - } - }} - sx={{ backgroundColor: "background.paper",px:2, ...sx }} - {...toggleBtnGroupProps} - > - {value.map((val, i) => { - return ( - - - {val} - - - ); - })} - - ); -}; - -const ToggleButtonStyle = { - border: 0, - borderRadius: 0, - "&.Mui-selected": { - backgroundColor: "background.paper", - borderBottom: "1px solid", - ":hover": { - backgroundColor: "background.paper", - }, - }, - ":hover": { - backgroundColor: "background.paper", - }, -}; - -export default CustomToggleButtonGroup; diff --git a/client/src/components/layout/CustomAppbar.tsx b/client/src/components/layout/CustomAppbar.tsx index 79775a6..9fda6eb 100644 --- a/client/src/components/layout/CustomAppbar.tsx +++ b/client/src/components/layout/CustomAppbar.tsx @@ -11,7 +11,6 @@ import { import GoBackIcon from "@/assets/icons/GoBackIcon.svg"; import { MouseEventHandler, ReactNode, memo } from "react"; import { useRouter } from "next/navigation"; -import { appbarHeight } from "@/const/uiSizes"; interface CustomAppbarInterface extends AppBarProps { title?: string; @@ -35,7 +34,7 @@ const CustomAppbar = ({ const router = useRouter(); return ( - + {/* 프리팬드 버튼 */} {prependButton ? ( diff --git a/client/src/components/layout/CustomContainer.tsx b/client/src/components/layout/CustomContainer.tsx index ae95642..4544021 100644 --- a/client/src/components/layout/CustomContainer.tsx +++ b/client/src/components/layout/CustomContainer.tsx @@ -1,4 +1,3 @@ -import { appbarHeight, navbarHeight } from "@/const/uiSizes"; import { Container, ContainerProps, Paper } from "@mui/material"; interface CustomContainerInterface extends ContainerProps { @@ -10,6 +9,9 @@ const CustomContainer = ({ disableMt, children, }: CustomContainerInterface) => { + const appbarHeight = '64px' + const navbarHeight = '56px' + return ( {children} diff --git a/client/src/components/post/PostCardList.tsx b/client/src/components/post/PostCardList.tsx index 01adf81..b507601 100644 --- a/client/src/components/post/PostCardList.tsx +++ b/client/src/components/post/PostCardList.tsx @@ -59,7 +59,7 @@ function PostCardList(props: UseGetPostListQueryInterface) { ) : ( // 인터섹션옵저버 - hasNextPage&&
+
)} diff --git a/client/src/components/user/followList/FollowUserCard.tsx b/client/src/components/user/followList/FollowUserCard.tsx deleted file mode 100644 index edb8be9..0000000 --- a/client/src/components/user/followList/FollowUserCard.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { Button, Stack, Typography } from "@mui/material"; -import React from "react"; -import UserAvatar from "@/components/user/info/UserAvatar"; -import { useRouter } from "next/navigation"; -import { USER_PAGE } from "@/const/clientPath"; -import useUnFollowMutation from "@/queries/user/useUnFollowMutation"; - -type Props = { - imageUrl?: string; - nickName: string; - userId: string; - content: string; - userPk: number; -}; - -const FollowUserCard = ({ - userPk, - imageUrl, - nickName, - userId, - content, -}: Props) => { - const router = useRouter(); - const { mutate: unfollowHandler } = useUnFollowMutation(); - - return ( - - router.push(USER_PAGE(userPk))} - sx={{ cursor: "pointer" }} - /> - - - router.push(USER_PAGE(userPk))} - > - - {nickName} - - - @{userId} - - - - - {content} - - - ); -}; - -export default FollowUserCard; diff --git a/client/src/components/user/followList/FollowerList.tsx b/client/src/components/user/followList/FollowerList.tsx deleted file mode 100644 index ec88f26..0000000 --- a/client/src/components/user/followList/FollowerList.tsx +++ /dev/null @@ -1,43 +0,0 @@ -"use client"; - -import FollowUserCard from "@/components/user/followList/FollowUserCard"; -import { useEffect } from "react"; -import { useInView } from "react-intersection-observer"; -import FollowingUserCardSkeleton from "@/components/user/followList/FollowingUserCardSkeleton"; -import ComponentRepeater from "@/components/ComponentRepeater"; -import useFollowerUserInfiniteQuery from "@/queries/user/useFollowerUserInfiniteQuery"; - -const FollowerList = () => { - const { data, isFetchingNextPage, hasNextPage, fetchNextPage } = - useFollowerUserInfiniteQuery(); - const { ref, inView } = useInView(); - - useEffect(() => { - if (hasNextPage && inView) fetchNextPage(); - }, [inView, hasNextPage]); - - return ( - <> - {data.pages.map((page) => - page.content.map(({ nickname, id, introduction }) => ( - - )) - )} - {isFetchingNextPage ? ( - - - - ) : ( - // 인터섹션옵저버 - hasNextPage &&
- )} - - ); -}; - -export default FollowerList; diff --git a/client/src/components/user/followList/FollowingList.tsx b/client/src/components/user/followList/FollowingList.tsx deleted file mode 100644 index 7e5ab07..0000000 --- a/client/src/components/user/followList/FollowingList.tsx +++ /dev/null @@ -1,45 +0,0 @@ -"use client"; - -import FollowUserCard from "@/components/user/followList/FollowUserCard"; -import useFollowingUserInfiniteQuery from "@/queries/user/useFollowingUserInfiniteQuery"; -import { useEffect } from "react"; -import { useInView } from "react-intersection-observer"; -import FollowingUserCardSkeleton from "@/components/user/followList/FollowingUserCardSkeleton"; -import ComponentRepeater from "@/components/ComponentRepeater"; - -const FollowingList = () => { - const { data, isFetchingNextPage, hasNextPage, fetchNextPage } = - useFollowingUserInfiniteQuery(); - const { ref, inView } = useInView(); - - useEffect(() => { - if (hasNextPage && inView) fetchNextPage(); - }, [inView, hasNextPage]); - - return ( - <> - {data.pages.map((page) => - page.content.map(({ nickname, id, introduction, profileImgUrls, userNo }) => ( - - )) - )} - {isFetchingNextPage ? ( - - - - ) : ( - // 인터섹션옵저버 - hasNextPage &&
- )} - - ); -}; - -export default FollowingList; diff --git a/client/src/components/user/followList/FollowingUserCardSkeleton.tsx b/client/src/components/user/followList/FollowingUserCardSkeleton.tsx deleted file mode 100644 index a6b0c53..0000000 --- a/client/src/components/user/followList/FollowingUserCardSkeleton.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Stack } from "@mui/material"; -import { Skeleton } from "@mui/material"; - -const FollowingUserCardSkeleton = () => { - return ( - - - - - - - - - - - - - - ); -}; - -export default FollowingUserCardSkeleton; diff --git a/client/src/components/user/info/UserInfoCard.tsx b/client/src/components/user/info/UserInfoCard.tsx index b770879..4b6b363 100644 --- a/client/src/components/user/info/UserInfoCard.tsx +++ b/client/src/components/user/info/UserInfoCard.tsx @@ -9,8 +9,6 @@ import { useMyInfoQuery } from "@/queries/auth/useMyInfoQuery"; import { useContext, useMemo } from "react"; import UserPageContext from "@/store/user/UserPageContext"; import UserInfoCardSkeleton from "./UserInfoCardSkeleton"; -import { useRouter } from "next/navigation"; -import { USER_FOLLOW_LIST } from "@/const/clientPath"; type Props = { initialData?: UserInfoInterface; @@ -26,7 +24,6 @@ const UserInfo = ({ initialData, userId }: Props) => { ); const token = getTokenFromLocalStorage(); - const router = useRouter(); const { setIsEditing } = useContext(UserPageContext); const { data } = useUserInfoQuery({ @@ -36,7 +33,7 @@ const UserInfo = ({ initialData, userId }: Props) => { }); if (!data) { - return ; + return ; } const { @@ -67,14 +64,7 @@ const UserInfo = ({ initialData, userId }: Props) => { {introduction ?? "자기소개가 없습니다"}
- { - isMyProfile && router.push(USER_FOLLOW_LIST); - }} - > + {followerCount} 팔로워 {followingCount} diff --git a/client/src/const/clientPath.ts b/client/src/const/clientPath.ts index f6c329a..f920467 100644 --- a/client/src/const/clientPath.ts +++ b/client/src/const/clientPath.ts @@ -18,17 +18,12 @@ export const MY_PROFILE = "/user" as const; /** * 유저의 PK를 입력받아 해당유저의 프로필 페이지로 이동하는 URL */ -export const USER_PAGE = (pk: string | number) => `${MY_PROFILE}/${pk}`; - -/** - * 유저가 팔로잉/팔로워 리스트페이지로 이동하는 라우트 - */ -export const USER_FOLLOW_LIST = `${MY_PROFILE}/follow-list` +export const USER_PAGE = (pk: string | number) => `/user/${pk}`; /** * 유저정보 세팅 페이지로 이동하는 라우트 */ -export const SETTING_PAGE = `${MY_PROFILE}/setting` as const +export const SETTING_PAGE = '/user/setting' as const /** * 술과사전 페이지 라우트 diff --git a/client/src/const/serverPath.ts b/client/src/const/serverPath.ts index b02d8ea..852adbc 100644 --- a/client/src/const/serverPath.ts +++ b/client/src/const/serverPath.ts @@ -84,8 +84,7 @@ export const GET_ALCOHOL_LIST = "/alcohols" as const; /** * 알콜 디테일을 받아오는 URL */ -export const GET_ALCOHOL_DETAIL = (id: string) => - `${GET_ALCOHOL_LIST}/${id}` as const; +export const GET_ALCOHOL_DETAIL = (id: string) => `${GET_ALCOHOL_LIST}/${id}` as const; /** * 포스트의 PK를 입력받아 해당 PK의 게시글의 좋아요 취소를 요청 @@ -99,15 +98,6 @@ export const POST_UN_LIKE_URL = (id: string) => * @returns */ export const USER_SUMMARY = (id: string) => `/user/${id}/summary` as const; -/** - * 내가 팔로우 하고 있는 유저를 불러오는 URL - */ -export const FOLLOWING_USER = "/user/my-following-users"; - -/** - * 나를 팔로우 하고 있는 유저를 불러오는 URL - */ -export const FOLLOWER_USER = "/user/users-of-following-me"; /** * 유저 ID 를 입력받아 해당 유저를 팔로우 하는 URL diff --git a/client/src/const/uiSizes.ts b/client/src/const/uiSizes.ts deleted file mode 100644 index e09b97b..0000000 --- a/client/src/const/uiSizes.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * 최상단 앱바의 높이 - */ -export const appbarHeight = '64px' -/** - * 최하단 네비게이션바의 높이 - */ -export const navbarHeight = '56px' \ No newline at end of file diff --git a/client/src/queries/user/useFollowMutation.ts b/client/src/queries/user/useFollowMutation.ts index 6e47527..027a006 100644 --- a/client/src/queries/user/useFollowMutation.ts +++ b/client/src/queries/user/useFollowMutation.ts @@ -7,7 +7,6 @@ import { UserInfoInterface } from "@/types/user/userInfoInterface"; import { MyInfoQueryKeys } from "../auth/useMyInfoQuery"; import { MyInfoInterface } from "@/types/auth/myInfo"; import { useErrorHandler } from "@/utils/errorHandler"; -import { followerUserQueryKey } from "./useFollowerUserInfiniteQuery"; const useFollowMutation = () => { const queryClient = useQueryClient(); @@ -60,8 +59,6 @@ const useFollowMutation = () => { queryClient.invalidateQueries({ queryKey: UserInfoQueryKey.byId(userInfo?.userNo), }); - // TODO 낙관적업데이트 구현 - queryClient.invalidateQueries({ queryKey: followerUserQueryKey.all }); }, }); }; diff --git a/client/src/queries/user/useFollowerUserInfiniteQuery.ts b/client/src/queries/user/useFollowerUserInfiniteQuery.ts deleted file mode 100644 index d53b948..0000000 --- a/client/src/queries/user/useFollowerUserInfiniteQuery.ts +++ /dev/null @@ -1,51 +0,0 @@ -"use client"; -import { FOLLOWER_USER } from "@/const/serverPath"; -import useAxiosPrivate from "@/hooks/useAxiosPrivate"; -import { useSuspenseInfiniteQuery } from "@tanstack/react-query"; -import Pagenated, { PagenationParams } from "@/types/Pagenated"; -import FollowingUserInterface from "@/types/user/followingUserInterface"; - -const useFollowerUserInfiniteQuery = () => { - return useSuspenseInfiniteQuery({ - queryKey: followerUserQueryKey.all, - - queryFn: async ({ pageParam = 0 }) => - await getFollowerUserFn({ page: pageParam }), - - getNextPageParam: ({ currentPage, hasNextPage }) => - hasNextPage ? currentPage + 1 : undefined, - - getPreviousPageParam: ({ currentPage }) => - currentPage > 0 ? currentPage - 1 : undefined, - initialPageParam: 0, - }); -}; - -export const getFollowerUserFn = async ({ - page = 0, - size = 10, - sort = "desc", -}: PagenationParams) => { - const axiosPrivate = useAxiosPrivate(); - const { data } = await axiosPrivate.get>( - FOLLOWER_USER, - { - params: { - page, - size, - sort, - }, - } - ); - return { - ...data, - currentPage: page, - hasNextPage: data.totalElements / ((page + 1) * size) > 1, - }; -}; - -export const followerUserQueryKey = { - all: ["follower"], -}; - -export default useFollowerUserInfiniteQuery; diff --git a/client/src/queries/user/useFollowingUserInfiniteQuery.ts b/client/src/queries/user/useFollowingUserInfiniteQuery.ts deleted file mode 100644 index c79bb59..0000000 --- a/client/src/queries/user/useFollowingUserInfiniteQuery.ts +++ /dev/null @@ -1,51 +0,0 @@ -"use client"; -import { FOLLOWING_USER } from "@/const/serverPath"; -import useAxiosPrivate from "@/hooks/useAxiosPrivate"; -import { useSuspenseInfiniteQuery } from "@tanstack/react-query"; -import Pagenated, { PagenationParams } from "@/types/Pagenated"; -import FollowingUserInterface from "@/types/user/followingUserInterface"; - -const useFollowingUserInfiniteQuery = () => { - return useSuspenseInfiniteQuery({ - queryKey: followingUserQueryKey.all, - - queryFn: async ({ pageParam = 0 }) => - await getFollowingUserFn({ page: pageParam }), - - getNextPageParam: ({ currentPage, hasNextPage }) => - hasNextPage ? currentPage + 1 : undefined, - - getPreviousPageParam: ({ currentPage }) => - currentPage > 0 ? currentPage - 1 : undefined, - initialPageParam: 0, - }); -}; - -export const getFollowingUserFn = async ({ - page = 0, - size = 10, - sort = "desc", -}: PagenationParams) => { - const axiosPrivate = useAxiosPrivate(); - const { data } = await axiosPrivate.get>( - FOLLOWING_USER, - { - params: { - page, - size, - sort, - }, - } - ); - return { - ...data, - currentPage: page, - hasNextPage: data.totalElements / ((page + 1) * size) > 1, - }; -}; - -export const followingUserQueryKey = { - all: ["followingUser"], -}; - -export default useFollowingUserInfiniteQuery; diff --git a/client/src/queries/user/useUnFollowMutation.ts b/client/src/queries/user/useUnFollowMutation.ts index f73438b..36cdc89 100644 --- a/client/src/queries/user/useUnFollowMutation.ts +++ b/client/src/queries/user/useUnFollowMutation.ts @@ -7,12 +7,11 @@ import { UserInfoInterface } from "@/types/user/userInfoInterface"; import { MyInfoQueryKeys } from "../auth/useMyInfoQuery"; import { MyInfoInterface } from "@/types/auth/myInfo"; import { useErrorHandler } from "@/utils/errorHandler"; -import { followingUserQueryKey } from "./useFollowingUserInfiniteQuery"; const useUnFollowMutation = () => { const queryClient = useQueryClient(); const errorHandler = useErrorHandler(); - + return useMutation({ mutationFn: async (userNo: string) => await followUserMutationFn(userNo), /** @@ -47,7 +46,7 @@ const useUnFollowMutation = () => { * Mutation 실패시 원래 QuerySnapShot정보로 롤백 */ onError: (err, queryFnParams, context) => { - errorHandler(err); + errorHandler(err) if (!context) { return; } @@ -64,8 +63,6 @@ const useUnFollowMutation = () => { queryClient.invalidateQueries({ queryKey: UserInfoQueryKey.byId(userInfo?.userNo), }); - // TODO 낙관적업데이트 구현 - queryClient.invalidateQueries({ queryKey: followingUserQueryKey.all }); }, }); }; diff --git a/client/src/types/Pagenated.ts b/client/src/types/Pagenated.ts index 93c8f3a..513796b 100644 --- a/client/src/types/Pagenated.ts +++ b/client/src/types/Pagenated.ts @@ -33,9 +33,3 @@ interface PageableInterface { paged: boolean; unpaged: boolean; } - -export interface PagenationParams { - page?: number; - size?: number; - sort?: string; -} diff --git a/client/src/types/user/followingUserInterface.ts b/client/src/types/user/followingUserInterface.ts deleted file mode 100644 index e51e28a..0000000 --- a/client/src/types/user/followingUserInterface.ts +++ /dev/null @@ -1,12 +0,0 @@ -import AttachInterface from "../attach/attachInterface"; - -interface FollowingUserInterface { - nickname: string; - id: string; - userNo: number; - introduction: string; - createdBy: number; - profileImgUrls: AttachInterface[]; -} - -export default FollowingUserInterface;