refactor: 검색 결과 페이지 리팩토링 (#265)

* refactor: 톡픽 검색 결과 아이템에 이미지가 있을 때만 이미지를 출력하도록 수정 * refactor: 톡픽 검색 결과에서의 내용이 한줄로 출력되지 않던 문제 해결 * refactor: 톡픽 검색 결과 아이템 클릭 시 해당 톡픽 페이지로 이동되도록 수정 * refactor: usePagination 훅을 page가 1부터 시작되도록 수정 및 페이지에 적용 * refactor: 검색 바에 텍스트 입력 후 엔터 키를 눌러도 버튼 클릭과 같은 기능이 수행되도록 수정 * refactor: 톡픽 상세 조회에서 톡픽의 내용에 줄바꿈이 적용되도록 스타일 수정 * refactor: 게임 검색 api 엔드포인트 수정 * refactor: 투표 바 블러 처리 위치 수정 * refactor: 투표 바 블러 스타일 수정 * refactor: 로그인 라우트 경로를 상수로 수정 * refactor: 검색 결과 아이템에 함수를 넘겨주도록 수정 및 경로를 상수로 수정 * refactor: 검색 결과 아이템 타입 오류 수정 * refactor: 톡픽 검색 결과 아이템에 key 값 추가 * refactor: 검색 결과 타입을 컴포넌트의 props가 아닌 type 폴더에 선언한 타입을 사용하도록 수정 및 스토리북 오류 수정 * refactor: SearchTalkPickList 컴포넌트 스토리북의 톡픽 배열 수정 * refactor: SearchTalkPickList 컴포넌트 스토리북 오류 수정 * refactor: 불필요한 SearchTalkPickItem의 key 값 제거 * refactor: 톡픽 수정 시 이동 경로 수정 * refactor: 불필요한 SearchTalkPickItem의 props 옵셔널 처리 수정 * refactor: 모바일 서치 바에 엔터 키 기능 추가 * refactor: ContentsButton 스타일 수정 * refactor: CategoryButton 스타일 수정 * refactor: SideBar 컴포넌트 스토리북 오류 수정
JECT-Study · Dec 22, 2024 · a7bac45 · a7bac45
1 parent c790c8f
commit a7bac45
Show file tree

Hide file tree

Showing 24 changed files with 171 additions and 194 deletions.
diff --git a/src/components/atoms/CategoryButton/CategoryButton.style.ts b/src/components/atoms/CategoryButton/CategoryButton.style.ts
@@ -19,7 +19,7 @@ export const categoryButtonBaseStyle = css({
   '@media (max-width: 430px)': {
     width: '164px',
     height: '70px',
-    padding: '5px 50px 14px',
+    padding: '5px 45px 14px 45px',
     borderRadius: '7px',
     border: '0.35px solid #dedede',
   },

diff --git a/src/components/atoms/SearchBar/SearchBar.tsx b/src/components/atoms/SearchBar/SearchBar.tsx
@@ -16,36 +16,46 @@ export interface SearchBarProps extends ComponentPropsWithoutRef<'input'> {
 const SearchBar = (
   { onSearchClick, onInputChange, isMobile = false, ...props }: SearchBarProps,
   ref: ForwardedRef<HTMLInputElement>,
-) => (
-  <div css={S.searchBarStyling}>
-    {isMobile ? (
-      <>
-        <Button size="medium" variant="circle" onClick={onSearchClick}>
-          <Search />
-        </Button>
-        <input
-          ref={ref}
-          css={S.mobileInputStyling}
-          placeholder="궁금한 키워드를 입력해주세요!"
-          onChange={onInputChange}
-          {...props}
-        />
-      </>
-    ) : (
-      <>
-        <input
-          ref={ref}
-          css={S.inputStyling}
-          placeholder="궁금한 키워드를 입력해주세요!"
-          onChange={onInputChange}
-          {...props}
-        />
-        <Button size="large" variant="circle" onClick={onSearchClick}>
-          <Search />
-        </Button>
-      </>
-    )}
-  </div>
-);
+) => {
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      onSearchClick();
+    }
+  };
+
+  return (
+    <div css={S.searchBarStyling}>
+      {isMobile ? (
+        <>
+          <Button size="medium" variant="circle" onClick={onSearchClick}>
+            <Search />
+          </Button>
+          <input
+            ref={ref}
+            css={S.mobileInputStyling}
+            placeholder="궁금한 키워드를 입력해주세요!"
+            onChange={onInputChange}
+            onKeyDown={handleInputKeyDown}
+            {...props}
+          />
+        </>
+      ) : (
+        <>
+          <input
+            ref={ref}
+            css={S.inputStyling}
+            placeholder="궁금한 키워드를 입력해주세요!"
+            onChange={onInputChange}
+            onKeyDown={handleInputKeyDown}
+            {...props}
+          />
+          <Button size="large" variant="circle" onClick={onSearchClick}>
+            <Search />
+          </Button>
+        </>
+      )}
+    </div>
+  );
+};
 
 export default forwardRef(SearchBar);
diff --git a/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.style.ts b/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.style.ts
@@ -3,6 +3,7 @@ import color from '@/styles/color';
 import typo from '@/styles/typo';
 
 export const searchTalkPickItemStyle = css({
+  all: 'unset',
   display: 'flex',
   flexDirection: 'row',
   width: '1065px',
@@ -36,12 +37,13 @@ export const dateStyle = css(typo.Number.Regular, {
 });
 
 export const contentWrapStyle = css({
-  display: 'flex',
+  display: 'inline',
+  height: '45px',
+  overflowY: 'hidden',
 });
+
 export const contentStyle = (highlighted: boolean) =>
   css(typo.Comment.Regular, {
-    overflowY: 'hidden',
-    height: '45px',
     color: highlighted ? color.MAIN : color.GY[1],
   });
 

diff --git a/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx b/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx
@@ -9,6 +9,7 @@ export interface SearchTalkPickItemProps {
   content: string;
   firstImgUrl: string;
   keyword: string;
+  onClick: () => void;
 }
 
 const SearchTalkPickItem = ({
@@ -17,9 +18,10 @@ const SearchTalkPickItem = ({
   content,
   firstImgUrl,
   keyword,
+  onClick,
 }: SearchTalkPickItemProps) => {
   return (
-    <div css={S.searchTalkPickItemStyle}>
+    <button type="button" css={S.searchTalkPickItemStyle} onClick={onClick}>
       <div css={S.leftContentStyle}>
         <div css={S.titleWrapStyle}>
           {highlightText(title, keyword).map((part) => (
@@ -37,15 +39,16 @@ const SearchTalkPickItem = ({
           ))}
         </div>
       </div>
-
-      <div css={S.imageContainerStyle}>
-        <img
-          css={S.imageContainerStyle}
-          src={firstImgUrl}
-          alt="representativeImage"
-        />
-      </div>
-    </div>
+      {firstImgUrl && (
+        <div css={S.imageContainerStyle}>
+          <img
+            css={S.imageContainerStyle}
+            src={firstImgUrl}
+            alt="representativeImage"
+          />
+        </div>
+      )}
+    </button>
   );
 };
 export default SearchTalkPickItem;
diff --git a/src/components/molecules/ContentsButton/ContentsButton.style.ts b/src/components/molecules/ContentsButton/ContentsButton.style.ts
@@ -67,6 +67,7 @@ export const cardWrapper = (size: SizeType) => css`
   }
   @media (max-width: 430px) {
     border-radius: 10px;
+  }
 
   &:focus-visible {
     outline: 1px solid ${color.BK};
@@ -79,8 +80,6 @@ export const imageContainer = (size: SizeType) => css`
   width: 100%;
   height: ${sizeStyles[size].imageHeight};
   overflow: hidden;
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
 `;
 
 export const imageWrapper = css`

diff --git a/src/components/molecules/SearchGameList/SearchGameList.tsx b/src/components/molecules/SearchGameList/SearchGameList.tsx
@@ -1,29 +1,20 @@
 import React from 'react';
-import ContentsButton, {
-  ContentsButtonProps,
-} from '@/components/molecules/ContentsButton/ContentsButton';
+import { GameListItem } from '@/types/search';
+import ContentsButton from '@/components/molecules/ContentsButton/ContentsButton';
+import { PATH } from '@/constants/path';
 import { useNavigate } from 'react-router-dom';
 import * as S from './SearchGameList.style';
 
-export type GameItem = Pick<
-  ContentsButtonProps,
-  'title' | 'mainTag' | 'subTag'
-> & {
-  optionAImg?: string;
-  optionBImg?: string;
-  id: number;
-};
-
 export interface SearchGameListProps {
-  gameList: GameItem[];
+  gameList: GameListItem[];
   keyword: string;
 }
 
 const SearchGameList = ({ gameList, keyword }: SearchGameListProps) => {
   const navigate = useNavigate();
 
   const handleItemClick = (gameId: number) => {
-    navigate(`/balancegame/${gameId}`);
+    navigate(`/${PATH.BALANCEGAME(gameId)}`);
   };
 
   return (
@@ -38,7 +29,7 @@ const SearchGameList = ({ gameList, keyword }: SearchGameListProps) => {
           showBookmark={false}
           size="small"
           keyword={keyword}
-          onClick={() => handleItemClick(game.id)}
+          onClick={() => handleItemClick(game.gameSetId)}
         />
       ))}
     </div>

diff --git a/src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx b/src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx
@@ -1,19 +1,26 @@
 import React from 'react';
-import SearchTalkPickItem, {
-  SearchTalkPickItemProps,
-} from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem';
+import SearchTalkPickItem from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem';
+import { SearchTalkPickListItem } from '@/types/search';
+import { PATH } from '@/constants/path';
+import { useNavigate } from 'react-router-dom';
 import Divider from '@/components/atoms/Divider/Divider';
 import * as S from './SearchTalkPickList.style';
 
 export interface SearchTalkPickListProps {
-  searchTalkPickList: SearchTalkPickItemProps[];
+  searchTalkPickList: SearchTalkPickListItem[];
   keyword: string;
 }
 
 const SearchTalkPickList = ({
   searchTalkPickList,
   keyword,
 }: SearchTalkPickListProps) => {
+  const navigate = useNavigate();
+
+  const handleTalkPickClick = (talkPickId: number) => {
+    navigate(`/${PATH.TALKPICK(talkPickId)}`);
+  };
+
   return (
     <div css={S.listContainerStyle}>
       {searchTalkPickList.map((searchItem, idx) => (
@@ -24,6 +31,7 @@ const SearchTalkPickList = ({
             content={searchItem.content}
             firstImgUrl={searchItem.firstImgUrl}
             keyword={keyword}
+            onClick={() => handleTalkPickClick(searchItem.id)}
           />
           {idx < searchTalkPickList.length - 1 && (
             <div css={S.dividerStyle}>

diff --git a/src/components/molecules/VotePrototype/VotePrototype.style.ts b/src/components/molecules/VotePrototype/VotePrototype.style.ts
@@ -39,12 +39,13 @@ export const loggedOutContainerStyling = css({
   display: 'flex',
   position: 'absolute',
   top: '90px',
-  left: '-100px',
+  left: '50%',
+  transform: 'translateX(-50%)',
   width: '1215px',
   height: '260px',
   backdropFilter: 'blur(11px)',
   backgroundColor: 'rgba(255, 255, 255, 0.01)',
-  zIndex: 1,
+  zIndex: '1',
 });
 
 export const toastModalStyling = css({

diff --git a/src/components/molecules/VotePrototype/VotePrototype.tsx b/src/components/molecules/VotePrototype/VotePrototype.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { NOTICE } from '@/constants/message';
+import { PATH } from '@/constants/path';
 import { VoteOption, MyVoteOption } from '@/types/vote';
 import Button from '@/components/atoms/Button/Button';
 import VoteBar from '@/components/atoms/VoteBar/VoteBar';
@@ -71,7 +72,7 @@ const VotePrototype: React.FC<VotePrototypeProps> = ({
       localStorage.setItem(`talkpick_${talkPickId}`, voteOption);
 
       showToastModal(NOTICE.REQUIRED.LOGIN, () => {
-        navigate('/login', { state: { talkPickId } });
+        navigate(`/${PATH.LOGIN}`, { state: { talkPickId } });
       });
     }
   };

diff --git a/src/components/organisms/SearchGameListSection/SearchGameListSection.tsx b/src/components/organisms/SearchGameListSection/SearchGameListSection.tsx
@@ -1,17 +1,16 @@
 import React from 'react';
+import { GameListItem } from '@/types/search';
 import ToggleGroup from '@/components/atoms/ToggleGroup/ToggleGroup';
 import Pagination from '@/components/atoms/Pagination/Pagination';
-import SearchGameList, {
-  GameItem,
-} from '@/components/molecules/SearchGameList/SearchGameList';
+import SearchGameList from '@/components/molecules/SearchGameList/SearchGameList';
 import { generatePageNumbers } from '@/utils/pagination';
 import { NoResultsMessage } from '@/components/atoms/NoResultsMessage/NoResultsMessage';
 import SearchResultCardSkeleton from '@/components/atoms/SearchResultCardSkeleton/SearchResultCardSkeleton';
 import { ToggleGroupValue } from '@/types/toggle';
 import * as S from './SearchGameListSection.style';
 
 interface SearchGameListSectionProps {
-  gameList: GameItem[];
+  gameList: GameListItem[];
   keyword: string;
   selectedPage: number;
   totalPages: number;

diff --git a/src/components/organisms/SearchGameResult/SearchGameResult.tsx b/src/components/organisms/SearchGameResult/SearchGameResult.tsx
@@ -1,16 +1,15 @@
 import React from 'react';
+import { GameListItem } from '@/types/search';
 import MoreButton from '@/components/atoms/MoreButton/MoreButton';
-import SearchGameList, {
-  GameItem,
-} from '@/components/molecules/SearchGameList/SearchGameList';
+import SearchGameList from '@/components/molecules/SearchGameList/SearchGameList';
 import { NoResultsMessage } from '@/components/atoms/NoResultsMessage/NoResultsMessage';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { PATH } from '@/constants/path';
 import SearchResultCardSkeleton from '@/components/atoms/SearchResultCardSkeleton/SearchResultCardSkeleton';
 import * as S from './SearchGameResult.style';
 
 interface SearchGameResultProps {
-  gameList: GameItem[];
+  gameList: GameListItem[];
   keyword: string;
   isLoading: boolean;
 }

diff --git a/src/components/organisms/SearchTalkPickListSection/SearchTalkPickListSection.tsx b/src/components/organisms/SearchTalkPickListSection/SearchTalkPickListSection.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ToggleGroup from '@/components/atoms/ToggleGroup/ToggleGroup';
-import { SearchTalkPickItemProps } from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem';
+import { SearchTalkPickListItem } from '@/types/search';
 import SearchTalkPickList from '@/components/molecules/SearchTalkPickList/SearchTalkPickList';
 import Pagination from '@/components/atoms/Pagination/Pagination';
 import { generatePageNumbers } from '@/utils/pagination';
@@ -10,7 +10,7 @@ import { ToggleGroupValue } from '@/types/toggle';
 import * as S from './SearchTalkPickListSection.style';
 
 interface SearchTalkPickSectionProps {
-  searchTalkPickList: SearchTalkPickItemProps[];
+  searchTalkPickList: SearchTalkPickListItem[];
   keyword: string;
   selectedPage: number;
   totalPages: number;

diff --git a/src/components/organisms/SearchTalkPickResult/SearchTalkPickResult.tsx b/src/components/organisms/SearchTalkPickResult/SearchTalkPickResult.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import MoreButton from '@/components/atoms/MoreButton/MoreButton';
-import { SearchTalkPickItemProps } from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem';
+import { SearchTalkPickListItem } from '@/types/search';
 import SearchTalkPickList from '@/components/molecules/SearchTalkPickList/SearchTalkPickList';
 import { NoResultsMessage } from '@/components/atoms/NoResultsMessage/NoResultsMessage';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -9,7 +9,7 @@ import SearchResultListSkeleton from '@/components/atoms/SearchResultListSkeleto
 import * as S from './SearchTalkPickResult.style';
 
 interface SearchTalkPickResultProps {
-  searchTalkPickList: SearchTalkPickItemProps[];
+  searchTalkPickList: SearchTalkPickListItem[];
   keyword: string;
   isLoading: boolean;
 }

diff --git a/src/components/organisms/TalkPickSection/TalkPickSection.style.ts b/src/components/organisms/TalkPickSection/TalkPickSection.style.ts
@@ -73,12 +73,17 @@ export const talkPickView = css(typo.Number.Medium, {
   color: color.MAIN,
 });
 
-export const talkPickContent = css(typo.Main.Medium, {
+export const talkPickContent = css({
   width: '100%',
   paddingTop: '40px',
   paddingLeft: '173px',
   paddingRight: '173px',
   borderTop: '1px solid #F4F4F4',
+});
+
+export const talkPickContentTextStyling = css(typo.Main.Medium, {
+  width: '100%',
+  whiteSpace: 'pre-wrap',
   color: color.BK,
 });