diff --git a/src/components/atoms/CategoryButton/CategoryButton.style.ts b/src/components/atoms/CategoryButton/CategoryButton.style.ts index 8aa3392c..6d6f3648 100644 --- 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 index 52881857..7f0519bf 100644 --- 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, -) => ( -
- {isMobile ? ( - <> - - - - ) : ( - <> - - - - )} -
-); +) => { + const handleInputKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + onSearchClick(); + } + }; + + return ( +
+ {isMobile ? ( + <> + + + + ) : ( + <> + + + + )} +
+ ); +}; export default forwardRef(SearchBar); diff --git a/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.style.ts b/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.style.ts index 77d12aa3..4f86089e 100644 --- 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 index 68a2e1e6..0fda6e2b 100644 --- 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 ( -
+
+ {firstImgUrl && ( +
+ representativeImage +
+ )} + ); }; export default SearchTalkPickItem; diff --git a/src/components/molecules/ContentsButton/ContentsButton.style.ts b/src/components/molecules/ContentsButton/ContentsButton.style.ts index f8ac8fbf..50a8539f 100644 --- 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 index e8fb9d63..c80dd1be 100644 --- a/src/components/molecules/SearchGameList/SearchGameList.tsx +++ b/src/components/molecules/SearchGameList/SearchGameList.tsx @@ -1,21 +1,12 @@ 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; } @@ -23,7 +14,7 @@ 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)} /> ))} diff --git a/src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx b/src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx index 0014abe2..249344fd 100644 --- a/src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx +++ b/src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx @@ -1,12 +1,13 @@ 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; } @@ -14,6 +15,12 @@ const SearchTalkPickList = ({ searchTalkPickList, keyword, }: SearchTalkPickListProps) => { + const navigate = useNavigate(); + + const handleTalkPickClick = (talkPickId: number) => { + navigate(`/${PATH.TALKPICK(talkPickId)}`); + }; + return (
{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 && (
diff --git a/src/components/molecules/VotePrototype/VotePrototype.style.ts b/src/components/molecules/VotePrototype/VotePrototype.style.ts index 093393a7..5e8b48b5 100644 --- 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 index 1bc360eb..fd7757ab 100644 --- 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 = ({ 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 index d4b2df67..d1763955 100644 --- a/src/components/organisms/SearchGameListSection/SearchGameListSection.tsx +++ b/src/components/organisms/SearchGameListSection/SearchGameListSection.tsx @@ -1,9 +1,8 @@ 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'; @@ -11,7 +10,7 @@ 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 index 783105f2..de9e59bf 100644 --- a/src/components/organisms/SearchGameResult/SearchGameResult.tsx +++ b/src/components/organisms/SearchGameResult/SearchGameResult.tsx @@ -1,8 +1,7 @@ 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'; @@ -10,7 +9,7 @@ import SearchResultCardSkeleton from '@/components/atoms/SearchResultCardSkeleto 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 index ebfb9f5d..c575e73c 100644 --- 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 index 3518ca11..bb2d6d3e 100644 --- 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 index 1512592d..bf7931fe 100644 --- 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, }); diff --git a/src/components/organisms/TalkPickSection/TalkPickSection.tsx b/src/components/organisms/TalkPickSection/TalkPickSection.tsx index f8239ac9..edaa37f2 100644 --- a/src/components/organisms/TalkPickSection/TalkPickSection.tsx +++ b/src/components/organisms/TalkPickSection/TalkPickSection.tsx @@ -10,6 +10,7 @@ import { } from '@/assets'; import { useNavigate } from 'react-router-dom'; import { TalkPickDetail } from '@/types/talk-pick'; +import { PATH } from '@/constants/path'; import { ERROR, SUCCESS } from '@/constants/message'; import { formatDate, formatNumber } from '@/utils/formatData'; import Button from '@/components/atoms/Button/Button'; @@ -93,7 +94,7 @@ const TalkPickSection = ({ { label: '수정', onClick: () => { - navigate('/post/create', { state: { talkPick } }); + navigate(`/${PATH.CREATE.TALK_PICK}`, { state: { talkPick } }); }, }, { @@ -192,7 +193,9 @@ const TalkPickSection = ({ {isExpanded && (
-

{talkPick?.baseFields.content}

+
+ {talkPick?.baseFields.content} +
{talkPick?.imgUrls.length !== 0 && (
{talkPick?.imgUrls.map((url, idx) => ( diff --git a/src/constants/api.ts b/src/constants/api.ts index f964494b..d98a6bba 100644 --- a/src/constants/api.ts +++ b/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}`, diff --git a/src/hooks/search/usePagination.ts b/src/hooks/search/usePagination.ts index 1a29a9cc..774ed3d7 100644 --- a/src/hooks/search/usePagination.ts +++ b/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 }; diff --git a/src/pages/SearchResultsPage/SearchGamePage.tsx b/src/pages/SearchResultsPage/SearchGamePage.tsx index 1728eadb..f0ee4117 100644 --- a/src/pages/SearchResultsPage/SearchGamePage.tsx +++ b/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 (
@@ -36,7 +36,7 @@ const SearchGamePage = () => { { content: talkPickResults, totalPages: talkPickTotalPages, isLoading, - } = useTalkPickResultQuery(query, page, size, sort); + } = useTalkPickResultQuery(query, page - 1, size, sort); return (
@@ -36,7 +36,7 @@ const SearchTalkPickPage = () => { { + const { page, handlePageChange } = usePagination(); const [selectedValue, setSelectedValue] = useState({ field: 'views', order: 'desc', }); - const [searchParams, setSearchParams] = useSearchParams(); - const initialPage = parseInt(searchParams.get('page') ?? '1', 10) || 1; - const [currentPage, setCurrentPage] = useState(initialPage); - - useEffect(() => { - setSearchParams((prevParams) => ({ - ...Object.fromEntries(prevParams.entries()), - page: currentPage.toString(), - })); - }, [currentPage, setSearchParams]); - - const handlePageChange = (newPage: number) => { - setCurrentPage(newPage); - }; const { bestTalkPick } = useBestTalkPickListQuery(); const { talkPickList } = useTalkPickListQuery({ - page: currentPage - 1, + page: page - 1, size: 20, sort: `${selectedValue.field},${selectedValue.order}`, }); useEffect(() => { window.scrollTo(0, 0); - }, [currentPage, selectedValue]); + }, [page, selectedValue]); return (
@@ -53,7 +40,7 @@ const TalkPickPlacePage = () => { talkPickList={talkPickList} selectedValue={selectedValue} setToggleValue={setSelectedValue} - selectedPage={currentPage} + selectedPage={page} handlePageChange={handlePageChange} />
diff --git a/src/stories/molecules/SearchTalkPickList.stories.tsx b/src/stories/molecules/SearchTalkPickList.stories.tsx index 41c632e2..32d74a02 100644 --- a/src/stories/molecules/SearchTalkPickList.stories.tsx +++ b/src/stories/molecules/SearchTalkPickList.stories.tsx @@ -2,90 +2,42 @@ /* eslint-disable @typescript-eslint/no-unsafe-call */ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { BrowserRouter } from 'react-router-dom'; +import { SearchTalkPickListItem } from '@/types/search'; import { storyContainer, storyInnerContainer } from '@/stories/story.styles'; import SearchTalkPickList from '@/components/molecules/SearchTalkPickList/SearchTalkPickList'; import { SampleWhole } from '@/assets'; +const searchTalkPickSample: SearchTalkPickListItem[] = Array.from( + { length: 10 }, + (_, index) => ({ + id: 0, + title: `톡픽 ${index + 1} - 인기 순위`, + createdAt: '2024.08.26', + content: + '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', + firstImgUrl: SampleWhole, + keyword: '인기', + }), +); + const meta = { title: 'molecules/SearchTalkPickList', component: SearchTalkPickList, tags: ['autodocs'], + decorators: [ + (Story) => ( + + + + ), + ], argTypes: { searchTalkPickList: { control: { type: 'object' } }, }, args: { - searchTalkPickList: [ - { - title: '월클 정국 VS 존잘 차은우', - createdAt: '2024.08.26', - content: - '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', - firstImgUrl: SampleWhole, - }, - { - title: '월클 정국 VS 존잘 차은우', - createdAt: '2024.08.26', - content: - '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', - firstImgUrl: SampleWhole, - }, - { - title: '월클 정국 VS 존잘 차은우', - createdAt: '2024.08.26', - content: - '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', - firstImgUrl: SampleWhole, - }, - { - title: '월클 정국 VS 존잘 차은우', - createdAt: '2024.08.26', - content: - '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', - firstImgUrl: SampleWhole, - }, - { - title: '월클 정국 VS 존잘 차은우', - createdAt: '2024.08.26', - content: - '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', - firstImgUrl: SampleWhole, - }, - { - title: '월클 정국 VS 존잘 차은우', - createdAt: '2024.08.26', - content: - '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', - firstImgUrl: SampleWhole, - }, - { - title: '월클 정국 VS 존잘 차은우', - createdAt: '2024.08.26', - content: - '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', - firstImgUrl: SampleWhole, - }, - { - title: '월클 정국 VS 존잘 차은우', - createdAt: '2024.08.26', - content: - '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', - firstImgUrl: SampleWhole, - }, - { - title: '월클 정국 VS 존잘 차은우', - createdAt: '2024.08.26', - content: - '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', - firstImgUrl: SampleWhole, - }, - { - title: '월클 정국 VS 존잘 차은우', - createdAt: '2024.08.26', - content: - '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', - firstImgUrl: SampleWhole, - }, - ], + searchTalkPickList: searchTalkPickSample, + keyword: '우하하', }, } satisfies Meta; @@ -103,13 +55,16 @@ export const Default: Story = { args: { searchTalkPickList: [ { + id: 0, title: '월클 정국 VS 존잘 차은우', createdAt: '2024.08.26', content: '우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하우하하', firstImgUrl: SampleWhole, + keyword: '우하하', }, ], + keyword: '우하하', }, }; @@ -119,7 +74,10 @@ export const All: Story = {

  • Single SearchTalkPickList

    - +
  • @@ -129,7 +87,7 @@ export const All: Story = {

  • None

    - +
), diff --git a/src/stories/organisms/SearchTalkPickListSection.stories.tsx b/src/stories/organisms/SearchTalkPickListSection.stories.tsx index 1de72509..b4b59911 100644 --- a/src/stories/organisms/SearchTalkPickListSection.stories.tsx +++ b/src/stories/organisms/SearchTalkPickListSection.stories.tsx @@ -1,8 +1,9 @@ import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { BrowserRouter } from 'react-router-dom'; import SearchTalkPickListSection from '@/components/organisms/SearchTalkPickListSection/SearchTalkPickListSection'; import { SampleWhole } from '@/assets'; -import { SearchTalkPickItemProps } from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem'; +import { SearchTalkPickListItem } from '@/types/search'; import { ToggleGroupValue } from '@/types/toggle'; const meta: Meta = { @@ -11,6 +12,13 @@ const meta: Meta = { parameters: { layout: 'centered', }, + decorators: [ + (Story) => ( + + + + ), + ], argTypes: { onPageChange: { action: '페이지 변경' }, onSortChange: { action: '정렬 변경' }, @@ -20,9 +28,10 @@ const meta: Meta = { export default meta; type Story = StoryObj; -const searchTalkPickSample: SearchTalkPickItemProps[] = Array.from( +const searchTalkPickSample: SearchTalkPickListItem[] = Array.from( { length: 20 }, (_, index) => ({ + id: 0, title: `톡픽 ${index + 1} - 인기 순위`, createdAt: '2024.08.26', content: @@ -35,7 +44,7 @@ const searchTalkPickSample: SearchTalkPickItemProps[] = Array.from( export const Default: Story = { args: { searchTalkPickList: searchTalkPickSample.slice(0, 10), - keyword: '예시 키워드', + keyword: '인기', selectedPage: 1, totalPages: 2, sort: { field: 'views', order: 'desc' }, diff --git a/src/stories/organisms/SearchTalkPickResult.stories.tsx b/src/stories/organisms/SearchTalkPickResult.stories.tsx index 8333b13f..efd99d26 100644 --- a/src/stories/organisms/SearchTalkPickResult.stories.tsx +++ b/src/stories/organisms/SearchTalkPickResult.stories.tsx @@ -1,13 +1,14 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { SearchTalkPickListItem } from '@/types/search'; import SearchTalkPickResult from '@/components/organisms/SearchTalkPickResult/SearchTalkPickResult'; import { BrowserRouter } from 'react-router-dom'; import { SampleWhole } from '@/assets'; -import type { SearchTalkPickItemProps } from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem'; -const SearchTalkPickItems: SearchTalkPickItemProps[] = Array.from( +const SearchTalkPickItems: SearchTalkPickListItem[] = Array.from( { length: 4 }, (_, index) => ({ + id: 0, title: `톡픽 ${index + 1} - 월클 정국 VS 존잘 차은우`, createdAt: '2024.08.26', content: '우하하우하하 내용입니다.', diff --git a/src/types/search.ts b/src/types/search.ts index f3c3bc4f..eafd90a5 100644 --- a/src/types/search.ts +++ b/src/types/search.ts @@ -1,7 +1,7 @@ import { PaginationType } from '@/types/pagination'; -interface GameItem { - id: number; +export interface GameListItem { + gameSetId: number; optionAImg: string; optionBImg: string; title: string; @@ -9,7 +9,8 @@ interface GameItem { subTag: string; } -interface SearchTalkPickItem { +export interface SearchTalkPickListItem { + id: number; title: string; createdAt: string; content: string; @@ -18,11 +19,11 @@ interface SearchTalkPickItem { } export interface TalkPickResult extends PaginationType { - content: SearchTalkPickItem[]; + content: SearchTalkPickListItem[]; query: string; } export interface GameResult extends PaginationType { - content: GameItem[]; + content: GameListItem[]; query: string; }