feat: 사용자 검색 화면 구현 #53
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import type { UserProfileItemProps } from '@/types/user'; | ||
|
|
||
| export const mockUserList: UserProfileItemProps[] = [ | ||
| { | ||
| profileImgUrl: 'https://placehold.co/36x36', | ||
| userName: 'ThipOther', | ||
| userTitle: '칭호칭호', | ||
| titleColor: '#FF8BAC', | ||
| followerCount: 15, | ||
| userId: 9, | ||
| }, | ||
| { | ||
| profileImgUrl: 'https://placehold.co/36x36', | ||
| userName: '하위', | ||
| userTitle: '칭호칭호', | ||
| titleColor: '#FF8BAC', | ||
| followerCount: 15, | ||
| userId: 1, | ||
| isFollowed: true, | ||
| }, | ||
| { | ||
| profileImgUrl: 'https://placehold.co/36x36', | ||
| userName: '책읽으러왔음', | ||
| userTitle: '공식 인플루언서', | ||
| titleColor: '#A0F8E8', | ||
| followerCount: 15, | ||
| userId: 2, | ||
| isFollowed: false, | ||
| }, | ||
| { | ||
| profileImgUrl: 'https://placehold.co/36x36', | ||
| userName: 'thip01', | ||
| userTitle: '작가', | ||
| titleColor: '#A0F8E8', | ||
| followerCount: 7, | ||
| userId: 3, | ||
| }, | ||
| ]; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import NavBar from '@/components/common/NavBar'; | ||
| import TitleHeader from '@/components/common/TitleHeader'; | ||
| import RecentSearchTabs from '@/components/search/RecentSearchTabs'; | ||
| import SearchBar from '@/components/search/SearchBar'; | ||
| import { colors } from '@/styles/global/global'; | ||
| import styled from '@emotion/styled'; | ||
| import { useEffect, useState } from 'react'; | ||
| import leftArrow from '../../assets/common/leftArrow.svg'; | ||
| import { mockUserList } from '@/data/userData'; | ||
| import { UserSearchResult } from './UserSearchResult'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
|
|
||
| const UserSearch = () => { | ||
| const navigate = useNavigate(); | ||
| const [searchTerm, setSearchTerm] = useState(''); | ||
| const [isSearching, setIsSearching] = useState(false); | ||
| const [isSearched, setIsSearched] = useState(false); | ||
|
|
||
| const [recentSearches, setRecentSearches] = useState<string[]>([ | ||
| '닉네임', | ||
| '작가', | ||
| '하위', | ||
| 'Thip', | ||
| '책벌레', | ||
| ]); | ||
|
|
||
| const handleChange = (value: string) => { | ||
| setSearchTerm(value); | ||
| setIsSearched(false); | ||
| setIsSearching(value.trim() !== ''); | ||
| }; | ||
|
|
||
| const handleSearch = (term: string) => { | ||
| if (!term.trim()) return; | ||
| setIsSearching(true); | ||
| setIsSearched(true); | ||
| setRecentSearches(prev => { | ||
| const filtered = prev.filter(t => t !== term); | ||
| return [term, ...filtered].slice(0, 5); | ||
| }); | ||
| }; | ||
|
|
||
| const handleDelete = (recentSearch: string) => { | ||
| setRecentSearches(prev => prev.filter(t => t !== recentSearch)); | ||
| }; | ||
|
|
||
| const handleRecentSearchClick = (recentSearch: string) => { | ||
| setSearchTerm(recentSearch); | ||
| setIsSearched(true); | ||
| setIsSearching(true); | ||
| }; | ||
|
|
||
| const handleBackButton = () => { | ||
| navigate(-1); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (searchTerm.trim() === '') { | ||
| setIsSearching(false); | ||
| setIsSearched(false); | ||
| } | ||
| }, [searchTerm]); | ||
|
|
||
| return ( | ||
| <Wrapper> | ||
| <TitleHeader | ||
| title="사용자 찾기" | ||
| leftIcon={<img src={leftArrow} alt="뒤로 가기" />} | ||
| onLeftClick={handleBackButton} | ||
| /> | ||
| <SearchBarContainer> | ||
| <SearchBar | ||
| placeholder="내가 찾는 사용자를 검색해보세요." | ||
| value={searchTerm} | ||
| onChange={handleChange} | ||
| onSearch={() => handleSearch(searchTerm.trim())} | ||
| isSearched={isSearched} | ||
| /> | ||
| </SearchBarContainer> | ||
| <Content> | ||
| {isSearching ? ( | ||
| <> | ||
| ( | ||
| {isSearched ? ( | ||
| <UserSearchResult | ||
| type={'searched'} | ||
| searchedUserList={mockUserList} | ||
| ></UserSearchResult> | ||
| ) : ( | ||
| <UserSearchResult | ||
| type={'searching'} | ||
| searchedUserList={mockUserList} | ||
| ></UserSearchResult> | ||
| )} | ||
| ) | ||
| </> | ||
|
Comment on lines
+82
to
+96
There was a problem hiding this comment. JSX 문법 오류를 수정하세요. 조건부 렌더링에서 불필요한 괄호가 있어 문법 오류를 일으킬 수 있습니다. {isSearching ? (
- <>
- (
+ <>
{isSearched ? (
<UserSearchResult
type={'searched'}
- searchedUserList={mockUserList}
- ></UserSearchResult>
+ searchedUserList={getFilteredUsers(searchTerm)}
+ />
) : (
<UserSearchResult
type={'searching'}
- searchedUserList={mockUserList}
- ></UserSearchResult>
+ searchedUserList={[]}
+ />
)}
- )
- </>
+ </>
) : (
🤖 Prompt for AI Agents |
||
| ) : ( | ||
| <> | ||
| <RecentSearchTabs | ||
| recentSearches={recentSearches} | ||
| handleDelete={handleDelete} | ||
| handleRecentSearchClick={handleRecentSearchClick} | ||
| /> | ||
| </> | ||
| )} | ||
| </Content> | ||
| <NavBar /> | ||
| </Wrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default UserSearch; | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: flex; | ||
| position: relative; | ||
| flex-direction: column; | ||
| min-width: 320px; | ||
| max-width: 767px; | ||
| height: 100vh; | ||
| margin: 0 auto; | ||
| background: ${colors.black.main}; | ||
| `; | ||
|
|
||
| const SearchBarContainer = styled.div` | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| max-width: 767px; | ||
| margin: 0 auto; | ||
| background: ${colors.black.main}; | ||
| `; | ||
|
|
||
| const Content = styled.div` | ||
| margin-top: 132px; | ||
| `; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
검색 로직에 실제 필터링을 구현하세요.
현재 검색 기능이 mock 데이터를 그대로 표시하고 있습니다. 실제 검색어에 따른 필터링 로직이 필요합니다.
검색 결과를 필터링하는 로직을 추가하세요:
🤖 Prompt for AI Agents