refactor: 검색 결과 페이지 리팩토링

src/components/atoms/SearchBar/SearchBar.tsx

@@ -15,19 +15,28 @@ export interface SearchBarProps extends ComponentPropsWithoutRef<'input'> {
 const SearchBar = (
   { onSearchClick, onInputChange, ...props }: SearchBarProps,
   ref: ForwardedRef<HTMLInputElement>,
-) => (
-  <div css={S.searchBarStyling}>
-    <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}>
+      <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);

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],
   });
 

src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import { highlightText } from '@/utils/highlightText';
 import { formatDateFromISO } from '@/utils/formatData';
@@ -9,6 +10,7 @@ export interface SearchTalkPickItemProps {
   content: string;
   firstImgUrl: string;
   keyword: string;
+  onClick?: () => void;
 }
 
 const SearchTalkPickItem = ({
@@ -17,9 +19,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 +40,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;

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>

src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx

@@ -1,29 +1,38 @@
 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) => (
         <div key={searchItem.title}>
           <SearchTalkPickItem
+            key={searchItem.title}
             title={searchItem.title}
             createdAt={searchItem.createdAt}
             content={searchItem.content}
             firstImgUrl={searchItem.firstImgUrl}
             keyword={keyword}
+            onClick={() => handleTalkPickClick(searchItem.id)}
           />
           {idx < searchTalkPickList.length - 1 && (
             <div css={S.dividerStyle}>

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({

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 } });
       });
     }
   };

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;

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;
 }

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;

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;
 }

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,
 });
 

src/components/organisms/TalkPickSection/TalkPickSection.tsx

@@ -192,7 +192,9 @@ const TalkPickSection = ({
           <SummaryBox summary={talkPick?.summary} />
           {isExpanded && (
             <div css={S.talkPickContent}>
-              <p>{talkPick?.baseFields.content}</p>
+              <div css={S.talkPickContentTextStyling}>
+                {talkPick?.baseFields.content}
+              </div>
               {talkPick?.imgUrls.length !== 0 && (
                 <div css={S.talkPickImageWrapper}>
                   {talkPick?.imgUrls.map((url, idx) => (

src/constants/api.ts

@@ -62,7 +62,7 @@ export const END_POINT = {
 
   // search API
   SEARCH_GAME: (query: string, page: number, size: number, sort: string) =>
-    `/search/game?query=${query}&page=${page}&size=${size}&sort=${sort}`,
+    `/search/game-sets?query=${query}&page=${page}&size=${size}&sort=${sort}`,
   SEARCH_TALKPICK: (query: string, page: number, size: number, sort: string) =>
     `/talks/search?query=${query}&page=${page}&size=${size}&sort=${sort}`,
 

src/hooks/search/usePagination.ts

@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-const usePagination = (defaultPage = 0) => {
+const usePagination = (defaultPage = 1) => {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const initialPage =
-    parseInt(searchParams.get('page') || `${defaultPage}`, 10) || 0;
+    parseInt(searchParams.get('page') || `${defaultPage}`, 10) || 1;
   const [page, setPage] = useState(initialPage);
 
   useEffect(() => {
@@ -16,7 +16,7 @@ const usePagination = (defaultPage = 0) => {
   }, [page, setSearchParams]);
 
   const handlePageChange = (newPage: number) => {
-    setPage(newPage - 1);
+    setPage(newPage);
   };
 
   return { page, handlePageChange };

src/pages/SearchResultsPage/SearchGamePage.tsx

@@ -20,7 +20,7 @@ const SearchGamePage = () => {
     content: gameResults,
     totalPages: gameTotalPages,
     isLoading,
-  } = useGameResultQuery(query, page, size, sort);
+  } = useGameResultQuery(query, page - 1, size, sort);
 
   return (
     <div css={S.container}>
@@ -36,7 +36,7 @@ const SearchGamePage = () => {
         <SearchGameListSection
           gameList={isLoading ? [] : gameResults}
           keyword={query}
-          selectedPage={page + 1}
+          selectedPage={page}
           totalPages={gameTotalPages}
           sort={sort}
           onPageChange={handlePageChange}