게시글 옵션을 ContextApi를 이용해 전역으로 관리 (#288)

* feat: (#282) 게시글 옵션을 ContextApi를 이용해 전역으로 관리 상세 게시글을 보다가 뒤로가기를 하여도 원래 보던 옵션 게시글 목록이 나오도록 하기 위해서 * refactor: (#282) Provider를 RouterProvider만 감싸도록 수정 contextApi를 사용하며 setPostOption의 타입을 선언하는 곳에서 Dispatch, SetStateAction를 사용하도록 수정
woowacourse-teams · Aug 9, 2023 · dedce40 · dedce40
1 parent e72423b
commit dedce40
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 14 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider } from 'styled-components';
 
 import { AuthProvider } from '@hooks/context/auth';
+import PostOptionProvider from '@hooks/context/postOption';
 
 import router from '@routes/router';
 
@@ -14,12 +15,14 @@ const queryClient = new QueryClient();
 
 const App = () => (
  <QueryClientProvider client={queryClient}>
- <AuthProvider>
- <ThemeProvider theme={theme}>
- <GlobalStyle />
- <RouterProvider router={router} />
- </ThemeProvider>
- </AuthProvider>
+ <ThemeProvider theme={theme}>
+ <GlobalStyle />
+ <AuthProvider>
+ <PostOptionProvider>
+ <RouterProvider router={router} />
+ </PostOptionProvider>
+ </AuthProvider>
+ </ThemeProvider>
  </QueryClientProvider>
 );
 

diff --git a/frontend/src/components/post/PostList/index.tsx b/frontend/src/components/post/PostList/index.tsx
@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 
+import { PostOptionContext } from '@hooks/context/postOption';
 import { usePostList } from '@hooks/query/usePostList';
 import { useIntersectionObserver } from '@hooks/useIntersectionObserver';
 import { usePostRequestInfo } from '@hooks/usePostRequestInfo';
@@ -11,8 +12,6 @@ import Skeleton from '@components/common/Skeleton';
 import { SORTING_OPTION, STATUS_OPTION } from '@components/post/PostListPage/constants';
 import type { PostSorting, PostStatus } from '@components/post/PostListPage/types';
 
-import { SORTING, STATUS } from '@constants/post';
-
 import * as S from './style';
 
 export default function PostList() {
@@ -22,10 +21,13 @@ export default function PostList() {
  rootMargin: '',
  thresholds: 0.1,
  });
+
+ const { postOption, setPostOption } = useContext(PostOptionContext);
+
  const { selectedOption: selectedStatusOption, handleOptionChange: handleStatusOptionChange } =
- useSelect<PostStatus>(STATUS.PROGRESS);
+ useSelect<PostStatus>(postOption.status);
  const { selectedOption: selectedSortingOption, handleOptionChange: handleSortingOptionChange } =
- useSelect<PostSorting>(SORTING.LATEST);
+ useSelect<PostSorting>(postOption.sorting);
 
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = usePostList(
  {
@@ -47,14 +49,26 @@ export default function PostList() {
  <S.SelectContainer>
  <S.SelectWrapper>
  <Select<PostStatus>
- handleOptionChange={handleStatusOptionChange}
+ handleOptionChange={(value: PostStatus) => {
+ setPostOption({
+ ...postOption,
+ status: value,
+ });
+ handleStatusOptionChange(value);
+ }}
  optionList={STATUS_OPTION}
  selectedOption={STATUS_OPTION[selectedStatusOption]}
  />
  </S.SelectWrapper>
  <S.SelectWrapper>
  <Select<PostSorting>
- handleOptionChange={handleSortingOptionChange}
+ handleOptionChange={(value: PostSorting) => {
+ setPostOption({
+ ...postOption,
+ sorting: value,
+ });
+ handleSortingOptionChange(value);
+ }}
  optionList={SORTING_OPTION}
  selectedOption={SORTING_OPTION[selectedSortingOption]}
  />

diff --git a/frontend/src/components/post/PostList/style.ts b/frontend/src/components/post/PostList/style.ts
@@ -35,7 +35,7 @@ export const PostListContainer = styled.ul`
 `;
 
 export const SelectWrapper = styled.div`
- width: 100px;
+ width: 110px;
 
  position: absolute;
 

diff --git a/frontend/src/hooks/context/postOption.tsx b/frontend/src/hooks/context/postOption.tsx
@@ -0,0 +1,32 @@
+import { Dispatch, PropsWithChildren, SetStateAction, createContext, useState } from 'react';
+
+import type { PostSorting, PostStatus } from '@components/post/PostListPage/types';
+
+import { SORTING, STATUS } from '@constants/post';
+
+export const PostOptionContext = createContext<PostOptionContextProps>({
+ postOption: { sorting: SORTING.LATEST, status: STATUS.PROGRESS },
+ setPostOption: () => {},
+});
+
+interface PostOption {
+ status: PostStatus;
+ sorting: PostSorting;
+}
+interface PostOptionContextProps {
+ postOption: PostOption;
+ setPostOption: Dispatch<SetStateAction<PostOption>>;
+}
+
+export default function PostOptionProvider({ children }: PropsWithChildren) {
+ const [postOption, setPostOption] = useState<PostOption>({
+ sorting: SORTING.LATEST,
+ status: STATUS.PROGRESS,
+ });
+
+ return (
+ <PostOptionContext.Provider value={{ postOption, setPostOption }}>
+ {children}
+ </PostOptionContext.Provider>
+ );
+}