From db8cdfb5c100bf1890f65fc4f83f1aff0e28909d Mon Sep 17 00:00:00 2001 From: f0ever0 Date: Fri, 27 Oct 2023 18:09:09 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=ED=81=B4=EB=A6=AD=ED=95=9C=20?= =?UTF-8?q?=ED=83=AD,=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20sessionStorage=20=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Select/index.tsx | 3 +- src/hooks/useStorage.ts | 6 ++-- src/lib/constants/tabs.ts | 34 +++++++++---------- src/lib/types/blog.ts | 10 ++++++ src/lib/types/review.ts | 8 +++-- src/lib/types/sopticle.ts | 8 +++-- src/views/BlogPage/BlogPage.tsx | 20 ++++++++--- .../BlogPage/components/BlogTab/index.tsx | 12 +++---- src/views/BlogPage/hooks/useFetch.ts | 4 +-- 9 files changed, 67 insertions(+), 38 deletions(-) diff --git a/src/components/common/Select/index.tsx b/src/components/common/Select/index.tsx index b5bc15d2..2426ccfc 100644 --- a/src/components/common/Select/index.tsx +++ b/src/components/common/Select/index.tsx @@ -8,7 +8,7 @@ interface SelectProps { baseValue: T; baseLabel: string; selectedValue: T; - setSelectedValue: React.Dispatch>; + setSelectedValue: (newValue: T) => void; labels: Record; } @@ -25,6 +25,7 @@ export default function Select({ const toggleSelect = () => setIsOpen(!isOpen); const handleSelect = (value: T) => { + console.log(value); setSelectedValue(value); }; diff --git a/src/hooks/useStorage.ts b/src/hooks/useStorage.ts index 40eb4efa..1c171f4d 100644 --- a/src/hooks/useStorage.ts +++ b/src/hooks/useStorage.ts @@ -4,10 +4,10 @@ import { getStorageHandler } from '@src/lib/utils/storageHandler'; export default function useStorage( 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(null); + const [valueInState, setValueInState] = useState(defaultValue); useEffect(() => { const storageItem = handler.getItem(key); diff --git a/src/lib/constants/tabs.ts b/src/lib/constants/tabs.ts index 7d1b897b..3d6d9c4d 100644 --- a/src/lib/constants/tabs.ts +++ b/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 = { - [PartExtraType.ALL]: '파트', - [Part.PLAN]: '기획', - [Part.DESIGN]: '디자인', - [Part.ANDROID]: '안드로이드', - [Part.IOS]: 'iOS', - [Part.WEB]: '웹', - [Part.SERVER]: '서버', +export const partCategoryLabel: Record = { + [PartCategoryType.ALL]: '파트', + [PartCategoryType.PLAN]: '기획', + [PartCategoryType.DESIGN]: '디자인', + [PartCategoryType.ANDROID]: '안드로이드', + [PartCategoryType.IOS]: 'iOS', + [PartCategoryType.WEB]: '웹', + [PartCategoryType.SERVER]: '서버', }; diff --git a/src/lib/types/blog.ts b/src/lib/types/blog.ts index 9eb520a5..5f31b21a 100644 --- a/src/lib/types/blog.ts +++ b/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', +} diff --git a/src/lib/types/review.ts b/src/lib/types/review.ts index ee989264..e9170934 100644 --- a/src/lib/types/review.ts +++ b/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; + getResponse( + majorTab: number, + subTab: PartCategoryType, + page: number, + ): Promise; getSampleReviews(): Promise; } diff --git a/src/lib/types/sopticle.ts b/src/lib/types/sopticle.ts index ed4d0590..da837cd5 100644 --- a/src/lib/types/sopticle.ts +++ b/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; + getResponse( + majorTab: number, + subTab: PartCategoryType, + page: number, + ): Promise; postSopticleLike(sopticleId: number, prevLike: boolean): Promise; } diff --git a/src/views/BlogPage/BlogPage.tsx b/src/views/BlogPage/BlogPage.tsx index 732515b6..b5b0afde 100644 --- a/src/views/BlogPage/BlogPage.tsx +++ b/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.REVIEW); - const [selectedMajorCategory, setMajorCategory] = useState( + const [selectedTab, setSelectedTab] = useStorage( + 'selectedTab', + 'sessionStorage', + BlogTabType.REVIEW, + ); + const [selectedMajorCategory, setMajorCategory] = useStorage( + 'selectedMajorCategory', + 'sessionStorage', activeGenerationCategoryList[0], ); - const [selectedSubCategory, setSubCategory] = useState(PartExtraType.ALL); + const [selectedSubCategory, setSubCategory] = useStorage( + 'selectedSubCategory', + 'sessionStorage', + PartCategoryType.ALL, + ); const { state: response, diff --git a/src/views/BlogPage/components/BlogTab/index.tsx b/src/views/BlogPage/components/BlogTab/index.tsx index cd6a96a3..f56d6f09 100644 --- a/src/views/BlogPage/components/BlogTab/index.tsx +++ b/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>; + setSelectedTab: (newValue: BlogTabType) => void; selectedMajorCategory: number; - setMajorCategory: React.Dispatch>; - selectedSubCategory: ExtraPart; - setSubCategory: React.Dispatch>; + 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} /> diff --git a/src/views/BlogPage/hooks/useFetch.ts b/src/views/BlogPage/hooks/useFetch.ts index 6ecf7db4..fb989735 100644 --- a/src/views/BlogPage/hooks/useFetch.ts +++ b/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 = ({