-
Notifications
You must be signed in to change notification settings - Fork 6
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
페이지 UI: 검색 페이지 #104
Merged
Merged
페이지 UI: 검색 페이지 #104
Changes from all commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
fa11c67
feat: filter icon 수정 #94
seoye0ng 34c8d25
feat: SearchBar 컴포넌트 디자인 수정 #94
seoye0ng 160f9fb
feat: Header 컴포넌트 디자인 수정(filter icon 추가) #94
seoye0ng 9489293
feat: Search icon 디자인 수정 #94
seoye0ng f2a8913
feat: Dropdown 컴포넌트 수정(클릭된 라벨 값으로 바뀌도록)
seoye0ng 3ac966e
feat: Search 페이지 제작 #94
seoye0ng da0cb9e
design: Search 페이지 CSS 구현 #94
seoye0ng 5188ebb
refactor: Search 페이지 컨벤션에 맞게 수정 #94
seoye0ng cd1d286
design: ProductArticle 컴포넌트 CSS 수정
seoye0ng c45e731
Merge branch 'develop' into page-search
seoye0ng 59a6f58
chore: build 에러 수정
seoye0ng File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains 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 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,7 @@ | ||
| function SearchLayout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <div style={{ padding: '0 24px' }}>{children}</div> | ||
| ); | ||
| } | ||
|
|
||
| export default SearchLayout; |
This file contains 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,14 @@ | ||
| .mainContainer { | ||
| .filterWrapper { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| margin: 13px 0 24px; | ||
| } | ||
|
|
||
| .productArticleContainer { | ||
| display: grid; | ||
| grid-template-columns: repeat(2, 1fr); | ||
| gap: 12px; | ||
| } | ||
| } |
This file contains 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,99 @@ | ||
| 'use client'; | ||
|
|
||
| import { useState, useRef } from 'react'; | ||
|
|
||
| import classNames from 'classnames/bind'; | ||
|
|
||
| import Text from '@/components/shared/text/Text'; | ||
| import Drawer from '@shared/drawer/Drawer'; | ||
| import Dropdown from '@shared/dropdown/Dropdown'; | ||
| import Header from '@shared/header/Header'; | ||
| import ProductArticle from '@shared/product-article/ProductArticle'; | ||
| import SearchBar from '@shared/search-bar/SearchBar'; | ||
| import Spacing from '@shared/spacing/Spacing'; | ||
|
|
||
| import styles from './page.module.scss'; | ||
|
|
||
| const cx = classNames.bind(styles); | ||
| const productArticleData = [ | ||
| { | ||
| brand: '카믹스', | ||
| category: '코팅제', | ||
| id: 1, | ||
| img: '/assets/profile.JPG', | ||
| name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml', | ||
| warningLevel: 'warning', | ||
| }, | ||
| { | ||
| brand: '카믹스', | ||
| category: '코팅제', | ||
| id: 2, | ||
| img: '/assets/profile.JPG', | ||
| name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml', | ||
| warningLevel: 'warning', | ||
| }, | ||
| { | ||
| brand: '카믹스', | ||
| category: '코팅제', | ||
| id: 3, | ||
| img: '/assets/profile.JPG', | ||
| name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml', | ||
| warningLevel: 'warning', | ||
| }, | ||
| { | ||
| brand: '카믹스', | ||
| category: '코팅제', | ||
| id: 4, | ||
| img: '/assets/profile.JPG', | ||
| name: '아머올 세차용품 스피드 왁스 스프레이 500ml스피드 왁스 스프레이 500ml', | ||
| warningLevel: 'warning', | ||
| }, | ||
| ]; | ||
|
|
||
| const options = [ | ||
| { label: '조회순', value: '1' }, | ||
| { label: '위반제품순', value: '2' }, | ||
| { label: '최신순', value: '3' }, | ||
| { label: '추천순', value: '4' }, | ||
| ]; | ||
|
|
||
| function SearchPage() { | ||
| const dropdownRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| const [selectedLabel, setSelectedLabel] = useState(options[0].label); | ||
| const [isOpenFilterDrawer, setIsOpenFilterDrawer] = useState(false); | ||
|
|
||
| const handleFilterClick = () => { | ||
| setIsOpenFilterDrawer((prev) => { return !prev; }); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Header isDisplayLogo={false} displayRightIconType="filter" onFilterClick={handleFilterClick} /> | ||
| <Spacing size={8} /> | ||
| <main className={cx('mainContainer')}> | ||
| <SearchBar /> | ||
| <div className={cx('filterWrapper')}> | ||
| <Text typography="t6" color="gray300">{`총 ${productArticleData.length}개`}</Text> | ||
| <Dropdown | ||
| options={options} | ||
| selectedLabel={selectedLabel} | ||
| type="favorite" | ||
| ref={dropdownRef} | ||
| setSelectedLabel={setSelectedLabel} | ||
| /> | ||
| </div> | ||
| <div className={cx('productArticleContainer')}> | ||
| {productArticleData.map((item) => { | ||
| return <ProductArticle key={item.id} itemData={item} />; | ||
| })} | ||
| </div> | ||
| </main> | ||
| <Drawer isOpen={isOpenFilterDrawer} onClose={() => { setIsOpenFilterDrawer(false); }}> | ||
| {/* 필터 내용 아코디언 */} | ||
| <p>Filter Content</p> | ||
| </Drawer> | ||
| </> | ||
| ); | ||
| } | ||
| export default SearchPage; | ||
This file contains 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 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 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 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 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 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 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 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 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
Oops, something went wrong.
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.
ProductArticle 컴포넌트에 box-shadow 스타일 추가해주세요!
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.
수정했습니다!