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;