Skip to content

검색 필터 구현 구현 !#136

Merged
halionaz merged 5 commits into
devfrom
feat/#97/filter
Aug 22, 2025
Merged

검색 필터 구현 구현 !#136
halionaz merged 5 commits into
devfrom
feat/#97/filter

Conversation

@halionaz

@halionaz halionaz commented Aug 12, 2025

Copy link
Copy Markdown
Member

❗ 연관 이슈

📌 내용

Screenshot 2025-08-12 at 1 38 39 PM Screenshot 2025-08-12 at 1 38 18 PM
  • 짜자장
  • 이제 선택한 필터에 대한 정보가 필터 버튼 자체에 표시됩니다
    • 근데 표시되어야 하는 아이콘 디자인이 불분명해요...
    • 일단 아이콘이 확실히 픽스된 애들은 띄워주게 해두었고 피그마에 어떤 필터를 텍스트 like 아이콘으로 해줘야 하는지 (ex XL, 대여, 판매 등), 가격 필터와 같이 범위 값인 경우 어캐 해줘야할지 물어봐 놓은 상태
    • 이건 확정되면 또 수정하겠슨다 지금은 그냥 선택됐음만 색깔로 표시돼요
  • 필터 초기화 버튼이 생겼읍니다. 누르면 원큐에 필터 삭제됨
  • 가격 필터를 만들었어요
    • 피그마 보고 열심히 따라 만들어보긴 했는데 이렇게 동작하는게 맞는지 확실하지 않음, 테스트 부탁
  • 아 그리고 검색에 이제 달력으로 기간 필터 거는거 하나 남았는데 이 달력 Date Picker는 공통 컴포넌트로 따로 만들 예정.. 다른 PR로 올리겠음요

☑️ 체크 사항 & 논의 사항

  • 가격 필터 잘 먹는지
  • 커스텀 가격 필터도 잘 먹는지 (얘 동작 UX에 대한 피드백 필요)
  • 필터 초기화 잘 되는지
  • 필터 컨트롤 아이콘 깨지는건 없는지

@halionaz halionaz requested review from Copilot and jw0202058 August 12, 2025 04:44
@halionaz halionaz self-assigned this Aug 12, 2025
@netlify

netlify Bot commented Aug 12, 2025

Copy link
Copy Markdown

Deploy Preview for repicka ready!

Name Link
🔨 Latest commit 154dfc3
🔍 Latest deploy log https://app.netlify.com/projects/repicka/deploys/689ac6a38cadd30009f00e8d
😎 Deploy Preview https://deploy-preview-136--repicka.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull Request Overview

This PR implements a filter reset button and price filtering functionality. It adds visual indicators to filter buttons showing selected options and introduces a comprehensive price filter system with both preset ranges and custom input.

  • Added filter reset button that clears all applied filters and shows total item count
  • Implemented price filtering with preset ranges and custom price input
  • Updated filter UI to display selected filter states with icons and counts

Reviewed Changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/pages/SearchPage/index.tsx Added price parameters to search filters
src/features/home/components/Filter/index.tsx Replaced Swiper with direct component rendering and added reset functionality
src/features/home/components/Filter/PriceFilter/index.tsx New price filter component with preset ranges and custom input
src/features/home/components/SearchControls/index.tsx Updated filter buttons to show selected state
src/common/components/SelectButton/index.tsx Modified to display selected filter icons instead of arrow
src/common/components/TagOptionBtn/index.tsx Exported Symbol component for reuse

Comment on lines +40 to +47
};

const submitPrice = () => {
if (isNaN(startPrice) || isNaN(endPrice)) return;
if (startPrice > endPrice) {
alert('시작 가격이 끝 가격보다 클 수 없습니다.');
return;
}

Copilot AI Aug 12, 2025

Copy link

Choose a reason for hiding this comment

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

Using alert() is not a good user experience practice. Consider using a toast notification or inline error message instead.

Suggested change
};
const submitPrice = () => {
if (isNaN(startPrice) || isNaN(endPrice)) return;
if (startPrice > endPrice) {
alert('시작 가격이 끝 가격보다 클 수 없습니다.');
return;
}
setErrorMessage('');
};
const submitPrice = () => {
if (isNaN(startPrice) || isNaN(endPrice)) {
setErrorMessage('');
return;
}
if (startPrice > endPrice) {
setErrorMessage('시작 가격이 끝 가격보다 클 수 없습니다.');
return;
}
setErrorMessage('');

Copilot uses AI. Check for mistakes.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

토스트 알림 같은것도 하나 있으면 좋긴 하겠다

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

토스트 알림 인정 정보 수정했을 때 띄워주면 좋을 듯

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

블루베리쨈 토스트 먹고 싶다

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

전남친 토스트?

Comment thread src/features/home/components/Filter/PriceFilter/index.tsx
@halionaz halionaz changed the title feat: 필터 초기화 버튼! 검색 필터 구현 구현 ! Aug 12, 2025
@jw0202058

jw0202058 commented Aug 16, 2025

Copy link
Copy Markdown
Collaborator

아이콘 겁내 귀엽다 ㅋㅋ
직접 입력을 선택하면 아래 필드가 없다가 생기는 게 낫지 않으려나?
지금 가격 필터가 적용되는 시점이 언제인 거죠? 다 입력하고 포커스 아웃 했을 때?

@halionaz

Copy link
Copy Markdown
Member Author

아이콘 겁내 귀엽다 ㅋㅋ 직접 입력을 선택하면 아래 필드가 없다가 생기는 게 낫지 않으려나? 지금 가격 필터가 적용되는 시점이 언제인 거죠? 다 입력하고 포커스 아웃 했을 때?

나도 뭔가 그게 더 좋을 거 같은데 일단 FigDes는 비활 상태였다가 활성으로 바뀌는걸로 되어있길래 그렇게 해둠
없다가 생기게 하는 걸로 바꾸는것도 코드 한 줄 바꾸면 되는기라 김민채씨한테 한번 물어보고 수정하면 될 거 같아요

가격필터 적용되는건 포커스 아웃됐을 때 하한가상한가가 모두 입력되어 있으면 필터 적용됨
만약에 하한가가 상한가보다 높으면 이 때 alert도 떠요

@halionaz halionaz merged commit 0fb8672 into dev Aug 22, 2025
4 checks passed
@halionaz halionaz deleted the feat/#97/filter branch August 22, 2025 07:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[검색] 필터 컨트롤 섹션 [검색] 필터 구현

3 participants