feat : 클릭한 탭, 드롭다운 정보 sessionStorage 저장

src/components/common/Select/index.tsx

@@ -8,7 +8,7 @@ interface SelectProps<T extends LabelKeyType> {
   baseValue: T;
   baseLabel: string;
   selectedValue: T;
-  setSelectedValue: React.Dispatch<React.SetStateAction<T>>;
+  setSelectedValue: (newValue: T) => void;
   labels: Record<T, string>;
 }
 
@@ -25,6 +25,7 @@ export default function Select<T extends LabelKeyType>({
   const toggleSelect = () => setIsOpen(!isOpen);
 
   const handleSelect = (value: T) => {
+    console.log(value);
     setSelectedValue(value);
   };
 

src/hooks/useStorage.ts

@@ -4,10 +4,10 @@ import { getStorageHandler } from '@src/lib/utils/storageHandler';
 export default function useStorage<T>(
   key: string,
   storageType: 'localStorage' | 'sessionStorage',
-  defaultValue?: T,
-): [value: T | null, setValue: (newValue: T) => void] {
+  defaultValue: T,
+): [value: T, setValue: (newValue: T) => void] {
   const handler = getStorageHandler(storageType);
-  const [valueInState, setValueInState] = useState<T | null>(null);
+  const [valueInState, setValueInState] = useState<T>(defaultValue);
 
   useEffect(() => {
     const storageItem = handler.getItem<T>(key);

src/lib/constants/tabs.ts

@@ -1,4 +1,4 @@
-import { ExtraPart, Part, PartExtraType } from '@src/lib/types/universal';
+import { PartCategoryType } from '@src/lib/types/blog';
 
 export const activeGenerationCategoryList: number[] = [0];
 
@@ -14,22 +14,22 @@ for (let i = 31; i >= 24; i--) {
   generationCategoryLabel[i] = `${i}기`;
 }
 
-export const activePartCategoryList: ExtraPart[] = [
-  PartExtraType.ALL,
-  Part.PLAN,
-  Part.DESIGN,
-  Part.ANDROID,
-  Part.IOS,
-  Part.WEB,
-  Part.SERVER,
+export const activePartCategoryList: PartCategoryType[] = [
+  PartCategoryType.ALL,
+  PartCategoryType.PLAN,
+  PartCategoryType.DESIGN,
+  PartCategoryType.ANDROID,
+  PartCategoryType.IOS,
+  PartCategoryType.WEB,
+  PartCategoryType.SERVER,
 ];
 
-export const partCategoryLabel: Record<ExtraPart, string> = {
-  [PartExtraType.ALL]: '파트',
-  [Part.PLAN]: '기획',
-  [Part.DESIGN]: '디자인',
-  [Part.ANDROID]: '안드로이드',
-  [Part.IOS]: 'iOS',
-  [Part.WEB]: '웹',
-  [Part.SERVER]: '서버',
+export const partCategoryLabel: Record<PartCategoryType, string> = {
+  [PartCategoryType.ALL]: '파트',
+  [PartCategoryType.PLAN]: '기획',
+  [PartCategoryType.DESIGN]: '디자인',
+  [PartCategoryType.ANDROID]: '안드로이드',
+  [PartCategoryType.IOS]: 'iOS',
+  [PartCategoryType.WEB]: '웹',
+  [PartCategoryType.SERVER]: '서버',
 };

src/lib/types/blog.ts

@@ -27,3 +27,13 @@ export type BlogPostType = {
   /* review */
   subject?: string;
 };
+
+export enum PartCategoryType {
+  ALL = 'ALL',
+  PLAN = 'PLAN',
+  DESIGN = 'DESIGN',
+  ANDROID = 'ANDROID',
+  IOS = 'iOS',
+  WEB = 'WEB',
+  SERVER = 'SERVER',
+}

src/lib/types/review.ts

@@ -1,5 +1,5 @@
+import { PartCategoryType } from '@src/lib/types/blog';
 import { BlogPostType } from './blog';
-import { ExtraPart } from './universal';
 
 export type GetSampleReviewsResponse = {
   reviews: BlogPostType[];
@@ -11,6 +11,10 @@ export type GetReviewsResponse = {
 };
 
 export interface ReviewAPI {
-  getResponse(majorTab: number, subTab: ExtraPart, page: number): Promise<GetReviewsResponse>;
+  getResponse(
+    majorTab: number,
+    subTab: PartCategoryType,
+    page: number,
+  ): Promise<GetReviewsResponse>;
   getSampleReviews(): Promise<GetSampleReviewsResponse>;
 }

src/lib/types/sopticle.ts

@@ -1,5 +1,5 @@
+import { PartCategoryType } from '@src/lib/types/blog';
 import { BlogPostType } from './blog';
-import { ExtraPart } from './universal';
 
 export type GetSopticlesResponse = {
   hasNextPage: boolean;
@@ -11,6 +11,10 @@ export type PostSopticleLikeResponse = {
   likeChanged: boolean;
 };
 export interface SopticleAPI {
-  getResponse(majorTab: number, subTab: ExtraPart, page: number): Promise<GetSopticlesResponse>;
+  getResponse(
+    majorTab: number,
+    subTab: PartCategoryType,
+    page: number,
+  ): Promise<GetSopticlesResponse>;
   postSopticleLike(sopticleId: number, prevLike: boolean): Promise<PostSopticleLikeResponse>;
 }

src/views/BlogPage/BlogPage.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
 import PageLayout from '@src/components/common/PageLayout';
+import useStorage from '@src/hooks/useStorage';
 import { activeGenerationCategoryList } from '@src/lib/constants/tabs';
-import { ExtraPart, PartExtraType } from '@src/lib/types/universal';
+import { PartCategoryType } from '@src/lib/types/blog';
 import { OvalSpinner } from '@src/views/ProjectPage/components';
 import BlogPostList from './components/BlogPostList';
 import BlogTab from './components/BlogTab';
@@ -10,11 +10,21 @@ import useFetch from './hooks/useFetch';
 import * as S from './style';
 
 export default function BlogPage() {
-  const [selectedTab, setSelectedTab] = useState<BlogTabType>(BlogTabType.REVIEW);
-  const [selectedMajorCategory, setMajorCategory] = useState<number>(
+  const [selectedTab, setSelectedTab] = useStorage(
+    'selectedTab',
+    'sessionStorage',
+    BlogTabType.REVIEW,
+  );
+  const [selectedMajorCategory, setMajorCategory] = useStorage(
+    'selectedMajorCategory',
+    'sessionStorage',
     activeGenerationCategoryList[0],
   );
-  const [selectedSubCategory, setSubCategory] = useState<ExtraPart>(PartExtraType.ALL);
+  const [selectedSubCategory, setSubCategory] = useStorage(
+    'selectedSubCategory',
+    'sessionStorage',
+    PartCategoryType.ALL,
+  );
 
   const {
     state: response,

src/views/BlogPage/components/BlogTab/index.tsx

@@ -6,17 +6,17 @@ import {
   generationCategoryLabel,
   partCategoryLabel,
 } from '@src/lib/constants/tabs';
-import { ExtraPart, PartExtraType } from '@src/lib/types/universal';
+import { PartCategoryType } from '@src/lib/types/blog';
 import * as S from './style';
 import { BlogTabMap, BlogTabType } from './types';
 
 interface BlogTanProps {
   selectedTab: BlogTabType;
-  setSelectedTab: React.Dispatch<React.SetStateAction<BlogTabType>>;
+  setSelectedTab: (newValue: BlogTabType) => void;
   selectedMajorCategory: number;
-  setMajorCategory: React.Dispatch<React.SetStateAction<number>>;
-  selectedSubCategory: ExtraPart;
-  setSubCategory: React.Dispatch<React.SetStateAction<ExtraPart>>;
+  setMajorCategory: (newValue: number) => void;
+  selectedSubCategory: PartCategoryType;
+  setSubCategory: (newValue: PartCategoryType) => void;
 }
 export default function BlogTab({
   selectedTab,
@@ -72,7 +72,7 @@ export default function BlogTab({
             baseLabel="파트"
             selectedValue={selectedSubCategory}
             setSelectedValue={setSubCategory}
-            baseValue={PartExtraType.ALL}
+            baseValue={PartCategoryType.ALL}
           />
         </S.SlectContainer>
       </S.Container>

src/views/BlogPage/hooks/useFetch.ts

@@ -2,14 +2,14 @@ import { useCallback, useEffect } from 'react';
 import useBooleanState from '@src/hooks/useBooleanState';
 import useStackedFetchBase from '@src/hooks/useStackedFetchBase';
 import { api } from '@src/lib/api';
-import { ExtraPart } from '@src/lib/types/universal';
+import { PartCategoryType } from '@src/lib/types/blog';
 import { BlogTabType } from '../components/BlogTab/types';
 import useInfiniteScroll from './useInfiniteScroll';
 
 interface useFetchProps {
   selectedTab: BlogTabType;
   selectedMajorCategory: number;
-  selectedSubCategory: ExtraPart;
+  selectedSubCategory: PartCategoryType;
 }
 
 const useFetch = ({