Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 25 commits into from
Dec 22, 2024
Merged
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
3b2f596
refactor: 톡픽 검색 결과 아이템에 이미지가 있을 때만 이미지를 출력하도록 수정
areumH Dec 11, 2024
134f35f
refactor: 톡픽 검색 결과에서의 내용이 한줄로 출력되지 않던 문제 해결
areumH Dec 11, 2024
5a84545
refactor: 톡픽 검색 결과 아이템 클릭 시 해당 톡픽 페이지로 이동되도록 수정
areumH Dec 11, 2024
16c1f0e
refactor: usePagination 훅을 page가 1부터 시작되도록 수정 및 페이지에 적용
areumH Dec 11, 2024
c12ecb3
refactor: 검색 바에 텍스트 입력 후 엔터 키를 눌러도 버튼 클릭과 같은 기능이 수행되도록 수정
areumH Dec 11, 2024
7e3f0f2
refactor: 톡픽 상세 조회에서 톡픽의 내용에 줄바꿈이 적용되도록 스타일 수정
areumH Dec 11, 2024
ac85c41
refactor: 게임 검색 api 엔드포인트 수정
areumH Dec 11, 2024
a7e3512
refactor: 투표 바 블러 처리 위치 수정
areumH Dec 16, 2024
5afac4d
refactor: 투표 바 블러 스타일 수정
areumH Dec 16, 2024
a76e1c2
refactor: 로그인 라우트 경로를 상수로 수정
areumH Dec 16, 2024
1ff849e
refactor: 검색 결과 아이템에 함수를 넘겨주도록 수정 및 경로를 상수로 수정
areumH Dec 16, 2024
1f043c5
Merge branch 'dev' of https://github.com/CHZZK-Study/Balance-Talk-Fro…
areumH Dec 16, 2024
431d464
refactor: 검색 결과 아이템 타입 오류 수정
areumH Dec 16, 2024
1003465
refactor: 톡픽 검색 결과 아이템에 key 값 추가
areumH Dec 16, 2024
01b3652
refactor: 검색 결과 타입을 컴포넌트의 props가 아닌 type 폴더에 선언한 타입을 사용하도록 수정 및 스토리북 …
areumH Dec 16, 2024
973be01
refactor: SearchTalkPickList 컴포넌트 스토리북의 톡픽 배열 수정
areumH Dec 16, 2024
2b52bd0
refactor: SearchTalkPickList 컴포넌트 스토리북 오류 수정
areumH Dec 16, 2024
cf44e5c
refactor: 불필요한 SearchTalkPickItem의 key 값 제거
areumH Dec 20, 2024
c830c21
refactor: 톡픽 수정 시 이동 경로 수정
areumH Dec 20, 2024
f9cca59
refactor: 불필요한 SearchTalkPickItem의 props 옵셔널 처리 수정
areumH Dec 20, 2024
99f7680
Merge branch 'dev' of https://github.com/CHZZK-Study/Balance-Talk-Fro…
areumH Dec 22, 2024
0cbac16
refactor: 모바일 서치 바에 엔터 키 기능 추가
areumH Dec 22, 2024
37316ee
refactor: ContentsButton 스타일 수정
areumH Dec 22, 2024
07f9f07
refactor: CategoryButton 스타일 수정
areumH Dec 22, 2024
d32a8b0
refactor: SideBar 컴포넌트 스토리북 오류 수정
areumH Dec 22, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Comment on lines +22 to 24
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

디자인 시스템 변수 도입 권장

현재 테마 파일에 border-radius에 대한 디자인 토큰이 정의되어 있지 않습니다. 모바일 뷰의 스타일 변경은 적절해 보이나, 다음과 같은 개선사항을 제안드립니다:

  • border-radius 값(7px)을 포함한 디자인 토큰을 Theme 객체에 추가하여 일관된 스타일 관리
  • 현재 하드코딩된 값들(padding, border width 등)도 디자인 시스템 변수로 관리 권장
🔗 Analysis chain

모바일 뷰의 스타일 변경사항 검토 필요

모바일 화면에서의 카테고리 버튼 스타일 변경이 적절해 보입니다. 다만, 다음 사항들을 확인해 주시면 좋겠습니다:

  • 다양한 모바일 기기에서 시각적 일관성 확인
  • 디자인 시스템과의 정렬성 검토

다음 스크립트를 실행하여 디자인 시스템 변수 사용 여부를 확인해 주세요:


Let's first try to find any design system related files and their content to make a more informed decision about the usage of design tokens or theme variables.


Let's check the theme file content to see if there are any predefined border-radius values that should be used instead of magic numbers.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: 디자인 시스템에서 정의된 border-radius 값들을 검색합니다.

# styles 디렉토리에서 border-radius 관련 상수 검색
rg -i "border.*radius|radius" src/styles/

Length of output: 43


Script:

#!/bin/bash
# Search for any design system or theme related files
fd -e ts -e js "theme|styles|constants" src/

# Then search for border-radius or design tokens in the found files
rg -i "border.*radius|radius|theme" src/ -A 2 -B 2

Length of output: 79331


Script:

#!/bin/bash
# Let's check if there are any design tokens or theme variables for border-radius
cat src/styles/theme.ts

Length of output: 1596

},
Expand Down
72 changes: 41 additions & 31 deletions src/components/atoms/SearchBar/SearchBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
};
Comment on lines +20 to +24
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

검색 시 엔터 키로 실행하도록 수정한 부분은 사용자 편의성에 좋은거 같네용ㅎㅎ


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);
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import color from '@/styles/color';
import typo from '@/styles/typo';

export const searchTalkPickItemStyle = css({
all: 'unset',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

버튼과 관련된 부분에 기본 속성을 제거해주신 부분 좋습니다!

display: 'flex',
flexDirection: 'row',
width: '1065px',
Expand Down Expand Up @@ -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],
});

Expand Down
23 changes: 13 additions & 10 deletions src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export interface SearchTalkPickItemProps {
content: string;
firstImgUrl: string;
keyword: string;
onClick: () => void;
}

const SearchTalkPickItem = ({
Expand All @@ -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) => (
Expand All @@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export const cardWrapper = (size: SizeType) => css`
}
@media (max-width: 430px) {
border-radius: 10px;
}

&:focus-visible {
outline: 1px solid ${color.BK};
Expand All @@ -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`
Expand Down
21 changes: 6 additions & 15 deletions src/components/molecules/SearchGameList/SearchGameList.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,20 @@
import React from 'react';
import ContentsButton, {
ContentsButtonProps,
} from '@/components/molecules/ContentsButton/ContentsButton';
import { GameListItem } from '@/types/search';
WonJuneKim marked this conversation as resolved.
Show resolved Hide resolved
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)}`);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

경로 상수화 처리 감사합니다~

};

return (
Expand All @@ -38,7 +29,7 @@ const SearchGameList = ({ gameList, keyword }: SearchGameListProps) => {
showBookmark={false}
size="small"
keyword={keyword}
onClick={() => handleItemClick(game.id)}
onClick={() => handleItemClick(game.gameSetId)}
/>
))}
</div>
Expand Down
16 changes: 12 additions & 4 deletions src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx
Original file line number Diff line number Diff line change
@@ -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) => (
Expand All @@ -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}>
Expand Down
5 changes: 3 additions & 2 deletions src/components/molecules/VotePrototype/VotePrototype.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

보통 zIndex는 숫자로 사용하는데 string으로 변경하신 이유가 있을까용?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다른 스타일들과의 통일을 위해 문자열로 수정해주었습니다,, ㅎㅎ 🫢

});

export const toastModalStyling = css({
Expand Down
3 changes: 2 additions & 1 deletion src/components/molecules/VotePrototype/VotePrototype.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 } });
});
}
};
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});

Expand Down
Loading
Loading