-
+ const movePlaceholderTop = cn([
+ {
+ 'top-1/2': !inputValueFilled,
+ 'text-s16': !inputValueFilled,
+ 'top-[16px]': inputValueFilled,
+ 'text-s12': inputValueFilled,
+ },
+ ]);
+
+ const moveInputValueBottom = cn([
+ {
+ 'pt-6': inputValueFilled,
+ },
+ ]);
+
+ return (
- );
-};
+ );
+ },
+);
+
+AuthInput.displayName = 'AuthInput';
export default AuthInput;
diff --git a/client/src/components/AuthorizedLayer/index.tsx b/client/src/components/AuthorizedLayer/index.tsx
deleted file mode 100644
index f1d0d205..00000000
--- a/client/src/components/AuthorizedLayer/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-
-const AuthorizedLayer = () => {
- return
- {placeholder}
+
+
-
+ {placeholder}
+
- {url ? (
- 
- ) : (
- name.at(0)
- )}
+ {children}
+ {!children &&
+ (url ? (
+
+ ) : (
+ getFirstLetter(name)
+ ))}
);
};
diff --git a/client/src/components/Button/index.tsx b/client/src/components/Button/index.tsx
index 115a0a4a..2c00cd1c 100644
--- a/client/src/components/Button/index.tsx
+++ b/client/src/components/Button/index.tsx
@@ -15,13 +15,13 @@ const buttonRounded = {
const buttonBg = (outlined: boolean) => ({
primary: outlined
? 'border-primary hover:border-primary-dark active:border-primary'
- : 'bg-primary hover:bg-primary-dark active:bg-primary',
+ : 'bg-primary hover:bg-primary-dark active:bg-primary border-primary',
secondary: outlined
? 'border-secondary hover:border-secondary-dark active:border-secondary'
- : 'bg-secondary hover:bg-secondary-dark active:bg-secondary',
+ : 'bg-secondary hover:bg-secondary-dark active:bg-secondary border-secondary',
dark: outlined
? 'border-indigo hover:border-titleActive active:border-indigo'
- : 'bg-indigo hover:bg-titleActive active:bg-indigo',
+ : 'bg-indigo hover:bg-titleActive active:bg-indigo border-indigo',
});
const buttonText = (outlined: boolean) => ({
diff --git a/client/src/components/CommunityAvatar/index.tsx b/client/src/components/CommunityAvatar/index.tsx
deleted file mode 100644
index bc0306f7..00000000
--- a/client/src/components/CommunityAvatar/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Avatar, { AvatarProps } from '@components/Avatar';
-import React from 'react';
-
-const CommunityAvatar: React.FC
+
+
+ );
+};
+
+export default memo(GnbItemContainer);
diff --git a/client/src/components/Modals/CreateCommunityModal/index.tsx b/client/src/components/Modals/CreateCommunityModal/index.tsx
new file mode 100644
index 00000000..75daa3d7
--- /dev/null
+++ b/client/src/components/Modals/CreateCommunityModal/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+
+interface Props {}
+
+const CreateCommunityModal: React.FC
+ {/* Item 영역 */}
+
+
+ {children}
+
+
+
= ({
- variant = 'circle',
- size = 'small',
- name,
- url,
-}) => {
- return = ({ user, right }) => {
+ return (
+
+
+ );
+};
+
+export default memo(UserItem);
diff --git a/client/src/components/UserList/index.tsx b/client/src/components/UserList/index.tsx
new file mode 100644
index 00000000..e9fa6eb7
--- /dev/null
+++ b/client/src/components/UserList/index.tsx
@@ -0,0 +1,17 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+import React from 'react';
+
+interface Props extends ComponentPropsWithoutRef<'ul'> {
+ children?: ReactNode;
+}
+
+const UserList = ({ children }: Props) => {
+ return (
+ = ({
+const UserProfile: React.FC = ({
user: { nickname, profileUrl, status },
}) => {
return (
-
+ 검색
= ({
);
};
-SearchInput.displayName = 'SearchInput';
-
export default SearchInput;
diff --git a/client/src/components/UnAuthorizedLayer/index.tsx b/client/src/components/UnAuthorizedLayer/index.tsx
deleted file mode 100644
index 3d9c16f2..00000000
--- a/client/src/components/UnAuthorizedLayer/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-
-const UnAuthorizedLayer = () => {
- return -
+ {children}
+
-
+
+
{
+ if (error instanceof AxiosError) {
+ const errorMessage =
+ error?.response?.data?.message || '에러가 발생했습니다!';
+
+ if (Array.isArray(errorMessage)) {
+ errorMessage.forEach((message) => {
+ toast.error(message);
+ });
+ return;
+ }
+
+ toast.error(errorMessage);
+ return;
+ }
+
+ toast.error('Unknown Error');
+};
+
+export default defaultErrorHandler;
diff --git a/client/src/layouts/FollowingTab/hooks/useDebouncedValue.ts b/client/src/hooks/useDebouncedValue.ts
similarity index 100%
rename from client/src/layouts/FollowingTab/hooks/useDebouncedValue.ts
rename to client/src/hooks/useDebouncedValue.ts
diff --git a/client/src/hooks/useDirectMessagesQuery.ts b/client/src/hooks/useDirectMessagesQuery.ts
new file mode 100644
index 00000000..474f4ac5
--- /dev/null
+++ b/client/src/hooks/useDirectMessagesQuery.ts
@@ -0,0 +1,18 @@
+import type { GetDirectMessagesResult } from '@apis/dm';
+import type { AxiosError } from 'axios';
+
+import { getDirectMessages } from '@apis/dm';
+import { useQuery } from '@tanstack/react-query';
+
+import queryKeyCreator from '@/queryKeyCreator';
+
+const useDirectMessagesQuery = () => {
+ const query = useQuery(
+ queryKeyCreator.directMessage.list(),
+ getDirectMessages,
+ );
+
+ return query;
+};
+
+export default useDirectMessagesQuery;
diff --git a/client/src/hooks/useFollowersQuery.ts b/client/src/hooks/useFollowersQuery.ts
new file mode 100644
index 00000000..a3ff8668
--- /dev/null
+++ b/client/src/hooks/useFollowersQuery.ts
@@ -0,0 +1,36 @@
+import type { GetFollowersResponse, GetFollowersResult } from '@apis/user';
+
+import { getFollowers } from '@apis/user';
+import { useQuery } from '@tanstack/react-query';
+
+import queryKeyCreator from '@/queryKeyCreator';
+
+type FollowersQueryData = {
+ statusCode: number;
+} & GetFollowersResult;
+
+const useFollowersQuery = (filter: string, options?: { suspense: boolean }) => {
+ const key = queryKeyCreator.followers();
+ const query = useQuery<
+ GetFollowersResponse,
+ unknown,
+ FollowersQueryData,
+ [string]
+ >(key, getFollowers, {
+ ...options,
+ select: (data) => {
+ const { statusCode, result } = data;
+ const followers = filter
+ ? result.followers.filter(({ nickname }) =>
+ nickname.toUpperCase().includes(filter.toUpperCase()),
+ )
+ : result.followers;
+
+ return { statusCode, ...result, followers };
+ },
+ });
+
+ return query;
+};
+
+export default useFollowersQuery;
diff --git a/client/src/hooks/useFollowingMutation.ts b/client/src/hooks/useFollowingMutation.ts
new file mode 100644
index 00000000..72f5cacb
--- /dev/null
+++ b/client/src/hooks/useFollowingMutation.ts
@@ -0,0 +1,46 @@
+import type { GetFollowingsResponse, User } from '@apis/user';
+
+import { updateFollowing } from '@apis/user';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import queryKeyCreator from '@/queryKeyCreator';
+
+const useFollowingMutation = (userId: string) => {
+ const key = queryKeyCreator.followings();
+ const queryClient = useQueryClient();
+ const mutation = useMutation(() => updateFollowing(userId), {
+ onMutate: async (deleted: User) => {
+ await queryClient.cancelQueries(key);
+
+ const previousFollowings =
+ queryClient.getQueryData(key);
+
+ if (previousFollowings) {
+ queryClient.setQueryData(key, {
+ ...previousFollowings,
+ result: {
+ ...previousFollowings.result,
+ followings: previousFollowings.result.followings.filter(
+ (following) => following._id !== deleted._id,
+ ),
+ },
+ });
+ }
+ return { previousFollowings };
+ },
+ onError: (err, variables, context) => {
+ if (context?.previousFollowings)
+ queryClient.setQueryData(
+ key,
+ context.previousFollowings,
+ );
+ },
+ onSettled: () => {
+ queryClient.invalidateQueries(key);
+ },
+ });
+
+ return mutation;
+};
+
+export default useFollowingMutation;
diff --git a/client/src/hooks/useFollowingsQuery.ts b/client/src/hooks/useFollowingsQuery.ts
new file mode 100644
index 00000000..1d6cd0af
--- /dev/null
+++ b/client/src/hooks/useFollowingsQuery.ts
@@ -0,0 +1,39 @@
+import type { GetFollowingsResponse, GetFollowingsResult } from '@apis/user';
+
+import { getFollowings } from '@apis/user';
+import { useQuery } from '@tanstack/react-query';
+
+import queryKeyCreator from '@/queryKeyCreator';
+
+type FollowingsQueryData = {
+ statusCode: number;
+} & GetFollowingsResult;
+
+const useFollowingsQuery = (
+ filter: string,
+ options?: { suspense: boolean },
+) => {
+ const key = queryKeyCreator.followings();
+ const query = useQuery<
+ GetFollowingsResponse,
+ unknown,
+ FollowingsQueryData,
+ [string]
+ >(key, getFollowings, {
+ ...options,
+ select: (data) => {
+ const { statusCode, result } = data;
+ const followings = filter
+ ? result.followings.filter(({ nickname }) =>
+ nickname.toUpperCase().includes(filter.toUpperCase()),
+ )
+ : result.followings;
+
+ return { statusCode, ...result, followings };
+ },
+ });
+
+ return query;
+};
+
+export default useFollowingsQuery;
diff --git a/client/src/hooks/useMyInfoQuery.ts b/client/src/hooks/useMyInfoQuery.ts
new file mode 100644
index 00000000..f8c6d976
--- /dev/null
+++ b/client/src/hooks/useMyInfoQuery.ts
@@ -0,0 +1,23 @@
+import type { MyInfoResult } from '@apis/user';
+import type { AxiosError } from 'axios';
+
+import { getMyInfo } from '@apis/user';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import queryKeyCreator from 'src/queryKeyCreator';
+
+export const useMyInfoQuery = () => {
+ const key = queryKeyCreator.me();
+ const query = useQuery(key, getMyInfo, {});
+
+ return query;
+};
+
+export default useMyInfoQuery;
+
+export const useMyInfo = () => {
+ const queryClient = useQueryClient();
+ const key = queryKeyCreator.me();
+ const me = queryClient.getQueryData(key);
+
+ return me;
+};
diff --git a/client/src/hooks/useReissueTokenMutation.ts b/client/src/hooks/useReissueTokenMutation.ts
new file mode 100644
index 00000000..d30af9c3
--- /dev/null
+++ b/client/src/hooks/useReissueTokenMutation.ts
@@ -0,0 +1,69 @@
+import type { ErrorResponse, SuccessResponse } from '@@types/apis/response';
+import type { ReissueTokenResult } from '@apis/auth';
+import type { UseMutationResult } from '@tanstack/react-query';
+
+import { reissueToken } from '@apis/auth';
+import { useTokenStore } from '@stores/tokenStore';
+import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useNavigate } from 'react-router-dom';
+
+import queryKeyCreator from '@/queryKeyCreator';
+
+type UseReissueTokenMutationResult = UseMutationResult<
+ SuccessResponse,
+ unknown,
+ void,
+ unknown
+>;
+
+interface UseReissueTokenMutation {
+ (
+ invalidTokenErrorFallback?: string | (() => void),
+ unknownErrorFallback?: string | (() => void),
+ ): UseReissueTokenMutationResult;
+}
+
+/**
+ * @description 서버에서 401 에러가 발생하는 경우에만 accessToken을 리셋하기 때문에, 그 이외의 에러로 로그인이 풀리지는 않음.
+ */
+const useReissueTokenMutation: UseReissueTokenMutation = (
+ invalidTokenErrorFallback,
+ unknownErrorFallback,
+) => {
+ const navigate = useNavigate();
+ const setAccessToken = useTokenStore((state) => state.setAccessToken);
+ const key = queryKeyCreator.reissueToken();
+ const mutation = useMutation(key, reissueToken, {
+ onSuccess: (data) => {
+ setAccessToken(data.result.accessToken);
+ },
+ onError: (error) => {
+ if (!(error instanceof AxiosError)) {
+ console.error(error);
+ return;
+ }
+
+ const errorResponse = error.response?.data as ErrorResponse | undefined;
+
+ /** 유효하지 않은 토큰 */
+ if (errorResponse?.statusCode === 401) {
+ setAccessToken(null);
+ if (typeof invalidTokenErrorFallback === 'string')
+ navigate(invalidTokenErrorFallback);
+ else invalidTokenErrorFallback && invalidTokenErrorFallback();
+
+ return;
+ }
+
+ /** 네트워크 오류나 기타 서버 오류 등 */
+ if (typeof unknownErrorFallback === 'string') {
+ navigate(unknownErrorFallback);
+ } else unknownErrorFallback && unknownErrorFallback();
+ },
+ });
+
+ return mutation;
+};
+
+export default useReissueTokenMutation;
diff --git a/client/src/hooks/useSignInMutation.ts b/client/src/hooks/useSignInMutation.ts
new file mode 100644
index 00000000..c8b118f4
--- /dev/null
+++ b/client/src/hooks/useSignInMutation.ts
@@ -0,0 +1,25 @@
+import type { SuccessResponse } from '@@types/apis/response';
+import type { SignInRequest, SignInResult } from '@apis/auth';
+import type { UseMutationOptions } from '@tanstack/react-query';
+
+import { signIn } from '@apis/auth';
+import { useMutation } from '@tanstack/react-query';
+
+import queryKeyCreator from '@/queryKeyCreator';
+
+const useSignInMutation = (
+ options: UseMutationOptions<
+ SuccessResponse,
+ unknown,
+ SignInRequest
+ >,
+) => {
+ const key = queryKeyCreator.signIn();
+ const mutation = useMutation(key, signIn, {
+ ...options,
+ });
+
+ return mutation;
+};
+
+export default useSignInMutation;
diff --git a/client/src/hooks/useSignUpMutation.ts b/client/src/hooks/useSignUpMutation.ts
new file mode 100644
index 00000000..eceb2fef
--- /dev/null
+++ b/client/src/hooks/useSignUpMutation.ts
@@ -0,0 +1,25 @@
+import type { SuccessResponse } from '@@types/apis/response';
+import type { SignUpRequest, SignUpResult } from '@apis/auth';
+import type { UseMutationOptions } from '@tanstack/react-query';
+
+import { signUp } from '@apis/auth';
+import { useMutation } from '@tanstack/react-query';
+
+import queryKeyCreator from '@/queryKeyCreator';
+
+const useSignUpMutation = (
+ options: UseMutationOptions<
+ SuccessResponse,
+ unknown,
+ SignUpRequest
+ >,
+) => {
+ const key = queryKeyCreator.signUp();
+ const mutation = useMutation(key, signUp, {
+ ...options,
+ });
+
+ return mutation;
+};
+
+export default useSignUpMutation;
diff --git a/client/src/hooks/useUsersQuery.ts b/client/src/hooks/useUsersQuery.ts
new file mode 100644
index 00000000..7f375c8b
--- /dev/null
+++ b/client/src/hooks/useUsersQuery.ts
@@ -0,0 +1,34 @@
+import type { GetUsersResponse, GetUsersResult } from '@apis/user';
+
+import { GetUsers } from '@apis/user';
+import { useQuery } from '@tanstack/react-query';
+
+import queryKeyCreator from '@/queryKeyCreator';
+
+type UsersQueryData = {
+ statusCode: number;
+} & GetUsersResult;
+
+const useUserSearchQuery = (
+ filter: string,
+ options?: { suspense?: boolean; enabled?: boolean },
+) => {
+ const key = queryKeyCreator.userSearch(filter);
+ const query = useQuery(
+ key,
+ () => GetUsers({ search: filter }),
+ {
+ ...options,
+ select: (data) => {
+ const { statusCode, result } = data;
+ const { users } = result;
+
+ return { statusCode, ...result, users };
+ },
+ },
+ );
+
+ return query;
+};
+
+export default useUserSearchQuery;
diff --git a/client/src/index.css b/client/src/index.css
index ff8c90ab..5510c518 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -10,4 +10,21 @@
#root {
width: 100vw;
-}
\ No newline at end of file
+}
+
+.wrapper {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.no-display-scrollbar::-webkit-scrollbar {
+ display: none;
+}
+
+.no-display-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
diff --git a/client/src/index.tsx b/client/src/index.tsx
index c7d541f2..ac339abd 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -19,10 +19,8 @@ const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement,
);
-/**
- * react-toastify import css 안되는 이슈
- * // TODO: 링크 업데이트하기
- */
+// https://github.com/fkhadra/react-toastify/issues/195#issuecomment-860722903
+// https://grand-beanie-e57.notion.site/react-toastify-import-css-2b14956185394af797bc1c1842207473
injectStyle();
root.render(
diff --git a/client/src/layouts/CommunityNav/index.tsx b/client/src/layouts/CommunityNav/index.tsx
index 7145d6d3..2a66c10d 100644
--- a/client/src/layouts/CommunityNav/index.tsx
+++ b/client/src/layouts/CommunityNav/index.tsx
@@ -5,11 +5,11 @@ const CommunityNav = () => {
const { communityId } = useParams();
return (
- <>
+
);
};
diff --git a/client/src/layouts/DmNav/index.tsx b/client/src/layouts/DmNav/index.tsx
index e56fd6cb..281e2d2b 100644
--- a/client/src/layouts/DmNav/index.tsx
+++ b/client/src/layouts/DmNav/index.tsx
@@ -1,13 +1,32 @@
+import UserProfile from '@components/UserProfile';
+import useDirectMessagesQuery from '@hooks/useDirectMessagesQuery';
import React from 'react';
import { Link } from 'react-router-dom';
const DmNav = () => {
+ const directMessagesQuery = useDirectMessagesQuery();
+
return (
- <>
+
);
};
diff --git a/client/src/layouts/Followers/index.tsx b/client/src/layouts/Followers/index.tsx
new file mode 100644
index 00000000..d00dd559
--- /dev/null
+++ b/client/src/layouts/Followers/index.tsx
@@ -0,0 +1,41 @@
+import FollowerUserItem from '@components/FollowerUserItem';
+import SearchInput from '@components/SearchInput';
+import UserList from '@components/UserList';
+import useDebouncedValue from '@hooks/useDebouncedValue';
+import useFollowersQuery from '@hooks/useFollowersQuery';
+import React, { useState } from 'react';
+import Scrollbars from 'react-custom-scrollbars-2';
+
+const Followers = () => {
+ const DEBOUNCE_DELAY = 500;
+ const [filter, setFilter] = useState('');
+ const debouncedFilter = useDebouncedValue(filter, DEBOUNCE_DELAY);
+ const followersQuery = useFollowersQuery(debouncedFilter);
+
+ return (
+ = ({ user }) => {
- const navigate = useNavigate();
- const updateFollowing = useFollowingsMutation(user._id);
-
- const handleChatButtonClick = () => {
- navigate(`/dms/${user._id}`);
- };
-
- return (
-
-
- );
-};
-
-export default FollowingItem;
diff --git a/client/src/layouts/FollowingTab/components/list.tsx b/client/src/layouts/FollowingTab/components/list.tsx
deleted file mode 100644
index 9d024caf..00000000
--- a/client/src/layouts/FollowingTab/components/list.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { User } from 'shared/lib/user';
-
-import FollowingItem from './item';
-
-interface FollowingListProps {
- users: User[];
-}
-
-const FollowingList: React.FC = ({ users }) => {
- return (
- ([
- 'followings',
- ]);
-
- if (previousFollowings) {
- const { users } = previousFollowings.result;
-
- queryClient.setQueryData(['followings'], {
- ...previousFollowings,
- result: {
- ...previousFollowings.result,
- users: users.filter((user) => user._id !== deleted._id),
- },
- });
- }
- return { previousFollowings };
- },
- onError: (err, variables, context) => {
- if (context?.previousFollowings)
- queryClient.setQueryData(
- ['followings'],
- context.previousFollowings,
- );
- },
- onSettled: () => {
- queryClient.invalidateQueries(['followings']);
- },
- });
-
- return mutation;
-};
-
-export default useFollowingsMutation;
diff --git a/client/src/layouts/FollowingTab/hooks/useFollowingsQuery.ts b/client/src/layouts/FollowingTab/hooks/useFollowingsQuery.ts
deleted file mode 100644
index 9cb25d2d..00000000
--- a/client/src/layouts/FollowingTab/hooks/useFollowingsQuery.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import getFollowings from '../apis/getFollowings';
-
-const useFollowingsQuery = (search: string, options?: Record) => {
- const query = useQuery(
- ['followings', search],
- () => getFollowings(search),
- options,
- );
-
- return query;
-};
-
-export default useFollowingsQuery;
diff --git a/client/src/layouts/FollowingTab/index.tsx b/client/src/layouts/FollowingTab/index.tsx
deleted file mode 100644
index 8660f4d3..00000000
--- a/client/src/layouts/FollowingTab/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState, Suspense } from 'react';
-
-import FollowingList from './components/list';
-import SearchInput from './components/searchInput';
-import useDebouncedValue from './hooks/useDebouncedValue';
-import useFollowingsQuery from './hooks/useFollowingsQuery';
-
-const FollowingTab = () => {
- const DEBOUNCE_DELAY = 500;
- const [filter, setFilter] = useState('');
- const debouncedFilter = useDebouncedValue(filter, DEBOUNCE_DELAY);
- const { data } = useFollowingsQuery(debouncedFilter, { suspense: true });
-
- return (
-
- );
-};
-
-export default FollowingTab;
diff --git a/client/src/layouts/Followings/index.tsx b/client/src/layouts/Followings/index.tsx
new file mode 100644
index 00000000..645f0f94
--- /dev/null
+++ b/client/src/layouts/Followings/index.tsx
@@ -0,0 +1,41 @@
+import FollowingUserItem from '@components/FollowingUserItem';
+import SearchInput from '@components/SearchInput';
+import UserList from '@components/UserList';
+import useDebouncedValue from '@hooks/useDebouncedValue';
+import useFollowingsQuery from '@hooks/useFollowingsQuery';
+import React, { useState } from 'react';
+import Scrollbars from 'react-custom-scrollbars-2';
+
+const Followings = () => {
+ const DEBOUNCE_DELAY = 500;
+ const [filter, setFilter] = useState('');
+ const debouncedFilter = useDebouncedValue(filter, DEBOUNCE_DELAY);
+ const followingsQuery = useFollowingsQuery(debouncedFilter);
+
+ return (
+
+
+ {followersQuery.isLoading ? (
+
+ {followersQuery.data.followers.map((user) => (
+
+ ) : (
+ '일치하는 사용자가 없습니다.'
+ )}
+
+
+ );
+};
+
+export default Followers;
diff --git a/client/src/layouts/FollowingTab/apis/getFollowings.ts b/client/src/layouts/FollowingTab/apis/getFollowings.ts
deleted file mode 100644
index 2955f518..00000000
--- a/client/src/layouts/FollowingTab/apis/getFollowings.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { API_URL } from '@constants/url';
-import axios from 'axios';
-
-const BASE_URL = `${API_URL}/api`;
-
-const getFollowings = (query: string) =>
- axios
- .get(`${BASE_URL}/user/followings?query=${query}`)
- .then((res) => res.data);
-
-export default getFollowings;
diff --git a/client/src/layouts/FollowingTab/apis/updateFollowing.ts b/client/src/layouts/FollowingTab/apis/updateFollowing.ts
deleted file mode 100644
index 8b581487..00000000
--- a/client/src/layouts/FollowingTab/apis/updateFollowing.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { API_URL } from '@constants/url';
-import axios from 'axios';
-
-const BASE_URL = `${API_URL}/api`;
-
-const updateFollowing = (userId: string) =>
- axios.post(`${BASE_URL}/user/following/${userId}`).then((res) => res.data);
-
-export default updateFollowing;
diff --git a/client/src/layouts/FollowingTab/components/item.tsx b/client/src/layouts/FollowingTab/components/item.tsx
deleted file mode 100644
index dfdc5cd2..00000000
--- a/client/src/layouts/FollowingTab/components/item.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import UserProfile from '@components/UserProfile';
-import {
- EllipsisHorizontalIcon,
- ChatBubbleLeftIcon,
-} from '@heroicons/react/20/solid';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { User } from 'shared/lib/user';
-
-import useFollowingsMutation from '../hooks/useFollowingsMutation';
-
-interface FollowingProps {
- user: User;
-}
-
-const FollowingItem: React.FC
+ setFilter(e.target.value)}
+ placeholder="검색하기"
+ />
+
+ 로딩중...
+ ) : followersQuery.data?.followers.length ? (
+
-
-
-
- -
- {users.map((user: User) => (
-
- loading...
}>
- {data.result.followings.length ? (
-
- setFilter(e.target.value)}
- placeholder="검색하기"
- />
-
-
+
+ {followingsQuery.isLoading ? (
+
+ {followingsQuery.data.followings.map((user) => (
+
+ ) : (
+ '일치하는 사용자가 없습니다.'
+ )}
+
+
+ );
+};
+
+export default Followings;
diff --git a/client/src/layouts/Gnb/index.tsx b/client/src/layouts/Gnb/index.tsx
index 49f5e6b8..847b8700 100644
--- a/client/src/layouts/Gnb/index.tsx
+++ b/client/src/layouts/Gnb/index.tsx
@@ -1,9 +1,53 @@
+import Avatar from '@components/Avatar';
+import GnbItemContainer from '@components/GnbItemContainer';
+import { LOGO_IMG_URL } from '@constants/url';
+import { PlusIcon } from '@heroicons/react/24/solid';
import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
const Gnb = () => {
+ const { pathname } = useLocation();
+
return (
-
+ setFilter(e.target.value)}
+ placeholder="검색하기"
+ />
+
+ 로딩중...
+ ) : followingsQuery.data?.followings.length ? (
+
- Gnb
+
+
);
};
diff --git a/client/src/layouts/Sidebar/index.tsx b/client/src/layouts/Sidebar/index.tsx
index 1d436ad9..ccf25476 100644
--- a/client/src/layouts/Sidebar/index.tsx
+++ b/client/src/layouts/Sidebar/index.tsx
@@ -1,26 +1,28 @@
import UserProfile from '@components/UserProfile';
-import CommunityNav from '@features/CommunityNav';
-import DmNav from '@features/DmNav';
import { Cog6ToothIcon } from '@heroicons/react/20/solid';
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
+import useMyInfoQuery from '@hooks/useMyInfoQuery';
+import CommunityNav from '@layouts/CommunityNav';
+import DmNav from '@layouts/DmNav';
import React from 'react';
import { useLocation } from 'react-router-dom';
-const getMyInfo = () => axios.get('/api/user/auth/me').then((res) => res.data);
-
const Sidebar = () => {
const { pathname } = useLocation();
- const { isLoading, data } = useQuery(['me'], getMyInfo);
+ const myInfoQuery = useMyInfoQuery();
return (
+
+
+
+
+
+
+
-
+
-