현재 유저가 어떤 게시글 종류를 보고 있는지 정보를 반환하는 함수 구현 및 적용 (#318)

* feat: (#310) 유저에게 어떤 게시글에 대한 종류를 보고 있는지 정보를 반환하는 함수 구현

* feat: (#310) 레이아웃, 포스트 리스트 페이지에 코드 적용

* feat: (#310) 검색어 글자가 10글자가 넘어간다면 ...으로 축약해서 보여주도록 구현
test의 given을 구체화

frontend/__test__/getPathFragment.test.ts

@@ -1,6 +1,6 @@
 import { getPathFragment } from '@utils/getPathFragment';
 
-describe('useUrlDetection를 사용했을 때 path의 값만 나오도록 한다.', () => {
+describe('getPathFragment 사용했을 때 path의 값만 나오도록 한다.', () => {
  test('/posts/category/12인 경우, /posts/category를 반환한다.', () => {
  const result = getPathFragment('/posts/category/12');
 

frontend/__test__/getSelectedState.test.ts

@@ -0,0 +1,101 @@
+import { SelectedState, getSelectedState } from '@utils/post/getSelectedState';
+
+import { MOCK_CATEGORY_LIST } from '@mocks/mockData/categoryList';
+
+describe('getSelectedState 사용했을 때 현재 유저에게 어떤 게시글에 대한 종류를 보고 있는지에 대한 정보를 반환한다.', () => {
+ test('현재 카테고리가 선택되어 있고, 카테고리 아이디가 1번일 때 해당하는 카테고리 이름을 반환한다.', () => {
+ const categoryId = 1;
+ const state: SelectedState = {
+ postType: 'category',
+ categoryId,
+ keyword: '',
+ categoryList: MOCK_CATEGORY_LIST,
+ };
+
+ const result = getSelectedState(state);
+
+ expect(categoryId).toBe(MOCK_CATEGORY_LIST[0].id);
+ expect(result).toBe(MOCK_CATEGORY_LIST[0].name);
+ });
+
+ test('현재 검색을 한 상태이면, 검색 키워드를 반환한다.', () => {
+ const keyword = '갤럭시';
+ const state: SelectedState = {
+ postType: 'search',
+ categoryId: 0,
+ keyword,
+ categoryList: MOCK_CATEGORY_LIST,
+ };
+
+ const result = getSelectedState(state);
+
+ expect(result).toBe(keyword);
+ });
+
+ test('검색어를 길게 설정한 경우 10자만 보여주고 ...으로 표시해서 보여준다.', () => {
+ const keyword = '아이폰갤럭시뉴진스아이브세븐틴슈퍼주니어임';
+ const state: SelectedState = {
+ postType: 'search',
+ categoryId: 0,
+ keyword,
+ categoryList: MOCK_CATEGORY_LIST,
+ };
+
+ const result = getSelectedState(state);
+
+ expect(result).toBe('아이폰갤럭시뉴진스아...');
+ });
+
+ test('검색어를 10글자인 경우 10글자 전부 표시해서 보여준다.', () => {
+ const keyword = '아이폰갤럭시뉴진스아';
+ const state: SelectedState = {
+ postType: 'search',
+ categoryId: 0,
+ keyword,
+ categoryList: MOCK_CATEGORY_LIST,
+ };
+
+ const result = getSelectedState(state);
+
+ expect(result).toBe('아이폰갤럭시뉴진스아');
+ });
+
+ test('현재 홈 화면에 있다면, "전체"를 반환한다', () => {
+ const state: SelectedState = {
+ postType: 'posts',
+ categoryId: 0,
+ keyword: '',
+ categoryList: MOCK_CATEGORY_LIST,
+ };
+
+ const result = getSelectedState(state);
+
+ expect(result).toBe('전체');
+ });
+
+ test('현재 내가 작성한 글 페이지에 있다면, "내가 작성한 글"을 반환한다.', () => {
+ const state: SelectedState = {
+ postType: 'myPost',
+ categoryId: 0,
+ keyword: '',
+ categoryList: MOCK_CATEGORY_LIST,
+ };
+
+ const result = getSelectedState(state);
+
+ expect(result).toBe('내가 작성한 글');
+ });
+
+ test('현재 내가 투표한 글 페이지에 있다면, "내가 투표한 글"을 반환한다.', () => {
+ const state: SelectedState = {
+ postType: 'myVote',
+ categoryId: 0,
+ keyword: '',
+ categoryList: MOCK_CATEGORY_LIST,
+ };
+
+ const result = getSelectedState(state);
+
+ expect(result).toBe('내가 투표한 글');
+ });
+});

frontend/src/components/common/Dashboard/Dashboard.stories.tsx

@@ -66,6 +66,7 @@ export const LoggedIn: Story = {
  userInfo={MOCK_USER_INFO}
  categoryList={MOCK_CATEGORIES}
  handleLogoutClick={() => {}}
+ selectedState="전체"
  />
  ),
 };
@@ -76,6 +77,7 @@ export const FavoriteCategory: Story = {
  userInfo={MOCK_USER_INFO}
  categoryList={MOCK_FAVORITE_CATEGORIES}
  handleLogoutClick={() => {}}
+ selectedState="전체"
  />
  ),
 };
@@ -85,7 +87,7 @@ export const SelectedCategory: Story = {
  <Dashboard
  userInfo={MOCK_USER_INFO}
  categoryList={MOCK_FAVORITE_CATEGORIES}
- selectedCategory="패션"
+ selectedState="패션"
  handleLogoutClick={() => {}}
  />
  ),
@@ -97,10 +99,13 @@ export const LongCategoryList: Story = {
  userInfo={MOCK_USER_INFO}
  categoryList={MOCK_LONG_CATEGORIES}
  handleLogoutClick={() => {}}
+ selectedState="전체"
  />
  ),
 };
 
 export const Guest: Story = {
- render: () => <Dashboard categoryList={MOCK_CATEGORIES} handleLogoutClick={() => {}} />,
+ render: () => (
+ <Dashboard selectedState="전체" categoryList={MOCK_CATEGORIES} handleLogoutClick={() => {}} />
+ ),
 };

frontend/src/components/common/Dashboard/index.tsx

@@ -12,15 +12,15 @@ import UserProfile from './UserProfile';
 
 interface DashboardProps {
  categoryList: Category[];
- selectedCategory?: string;
+ selectedState: string;
  handleLogoutClick: () => void;
  userInfo?: User;
 }
 
 export default function Dashboard({
  userInfo,
  categoryList,
- selectedCategory = '전체',
+ selectedState,
  handleLogoutClick,
 }: DashboardProps) {
  const favoriteCategory = categoryList.filter(category => category.isFavorite === true);
@@ -31,7 +31,7 @@ export default function Dashboard({
  {userInfo ? <UserProfile userInfo={userInfo} /> : <GuestProfile />}
  <S.SelectCategoryWrapper>
  <S.Circle />
- <S.SelectCategoryText>{selectedCategory}</S.SelectCategoryText>
+ <S.SelectCategoryText>{selectedState}</S.SelectCategoryText>
  </S.SelectCategoryWrapper>
  <S.ContentContainer>
  <S.CategoryToggleContainer>

frontend/src/components/common/Drawer/Drawer.stories.tsx

@@ -41,6 +41,7 @@ export const LeftSideBar = () => {
  userInfo={MOCK_USER_INFO}
  categoryList={MOCK_CATEGORIES}
  handleLogoutClick={() => {}}
+ selectedState="전체"
  />
  </Drawer>
  </div>
@@ -58,6 +59,7 @@ export const RightSideBar = () => {
  userInfo={MOCK_USER_INFO}
  categoryList={MOCK_CATEGORIES}
  handleLogoutClick={() => {}}
+ selectedState="전체"
  />
  </Drawer>
  </div>

frontend/src/components/common/Layout/index.tsx

@@ -3,11 +3,13 @@ import { useNavigate } from 'react-router-dom';
 
 import { AuthContext } from '@hooks/context/auth';
 import { useCategoryList } from '@hooks/query/category/useCategoryList';
+import { usePostRequestInfo } from '@hooks/usePostRequestInfo';
 
 import Dashboard from '@components/common/Dashboard';
 import WideHeader from '@components/common/WideHeader';
 
 import { clearCookieToken } from '@utils/cookie';
+import { getSelectedState } from '@utils/post/getSelectedState';
 
 import * as S from './style';
 
@@ -21,7 +23,15 @@ export default function Layout({ children, isSidebarVisible }: LayoutProps) {
  const { loggedInfo, clearLoggedInfo } = useContext(AuthContext);
 
  const { data: categoryList } = useCategoryList(loggedInfo.isLoggedIn);
- const selectedCategory = undefined;
+ const { postOptionalOption, postType } = usePostRequestInfo();
+ const { categoryId, keyword } = postOptionalOption;
+
+ const selectedState = getSelectedState({
+ categoryId,
+ keyword,
+ categoryList: categoryList ?? [],
+ postType,
+ });
 
  const handleLogoutClick = () => {
  clearCookieToken('accessToken');
@@ -43,7 +53,7 @@ export default function Layout({ children, isSidebarVisible }: LayoutProps) {
  <Dashboard
  userInfo={loggedInfo.userInfo}
  categoryList={categoryList ?? []}
- selectedCategory={selectedCategory}
+ selectedState={selectedState}
  handleLogoutClick={handleLogoutClick}
  />
  </S.DashboardWrapper>

frontend/src/components/post/PostListPage/index.tsx

@@ -3,6 +3,7 @@ import { Suspense, useContext } from 'react';
 import { AuthContext } from '@hooks/context/auth';
 import { useCategoryList } from '@hooks/query/category/useCategoryList';
 import { useDrawer } from '@hooks/useDrawer';
+import { usePostRequestInfo } from '@hooks/usePostRequestInfo';
 
 import ErrorBoundary from '@pages/ErrorBoundary';
 
@@ -16,6 +17,7 @@ import PostList from '@components/post/PostList';
 
 import { PATH } from '@constants/path';
 
+import { getSelectedState } from '@utils/post/getSelectedState';
 import { scrollToTop } from '@utils/scrollToTop';
 
 import * as S from './style';
@@ -25,6 +27,15 @@ export default function PostListPage() {
 
  const { isLoggedIn: isLogged, userInfo } = useContext(AuthContext).loggedInfo;
  const { data: categoryList } = useCategoryList(isLogged);
+ const { postOptionalOption, postType } = usePostRequestInfo();
+ const { categoryId, keyword } = postOptionalOption;
+
+ const selectedState = getSelectedState({
+ categoryId,
+ keyword,
+ categoryList: categoryList ?? [],
+ postType,
+ });
 
  const handleLogoutClick = () => {};
 
@@ -39,6 +50,7 @@ export default function PostListPage() {
  userInfo={userInfo}
  categoryList={categoryList ?? []}
  handleLogoutClick={handleLogoutClick}
+ selectedState={selectedState}
  />
  </Drawer>
  </S.DrawerWrapper>

frontend/src/utils/post/getSelectedState.ts

@@ -0,0 +1,41 @@
+import { Category } from '@type/category';
+
+import { PostRequestKind } from '@components/post/PostListPage/types';
+
+export interface SelectedState {
+ postType: PostRequestKind;
+ categoryId: number;
+ keyword: string;
+ categoryList: Category[];
+}
+
+const SLICED_LENGTH_NUMBER = 10;
+
+export const getSelectedState = ({
+ postType,
+ categoryId,
+ keyword,
+ categoryList,
+}: SelectedState) => {
+ if (postType === 'category') {
+ const selectedCategory = categoryList.find(category => category.id === categoryId);
+
+ return selectedCategory?.name ?? '전체';
+ }
+
+ if (postType === 'search') {
+ return keyword.length > SLICED_LENGTH_NUMBER
+ ? `${keyword.slice(0, SLICED_LENGTH_NUMBER)}...`
+ : keyword;
+ }
+
+ if (postType === 'myPost') {
+ return '내가 작성한 글';
+ }
+
+ if (postType === 'myVote') {
+ return '내가 투표한 글';
+ }
+
+ return '전체';
+};