전체 모임 필터 작업 및 UI 수정 작업 (필터 모달 삭제) #997

ocahs9 · 2025-01-30T03:08:07Z

🚩 관련 이슈

close 전체 모임 QA #996

📋 작업 내용

공지 box 삭제
기존 '필터' button의 기능을 바깥으로 빼기
전체 / 스터디 / 세미나 / 행사 카테고리 선택 기능을 chip 버튼으로 변경 (Chip = MDS)
대상 파트 선택, 활동기수만 을 바깥으로 꺼내기 (input, toggle = MDS)

📌 PR Point

반응형을 구현하기 위해 useMediaQuery 훅을 추가했습니다.
필터 모달을 통해 필터링을 하는 방식에서, 1 depth에서 직접 필터를 선택할 수 있도록 칩들을 바깥으로 꺼냈습니다.
파트 선택의 경우 mds 드롭다운을 이용하여 구현했습니다.
쿼리 세팅으로 인한 리렌더링으로 인해 placeholder로 값이 초기화되던 현상을 막기 위�해 선택적 defaultValue 세팅을 추가했습니다.
전체 칩 버튼을 누를 시 모든 쿼리 세팅이 초기화 되도록 useMultiQueryString 내에서 reset 함수를 작성하고 리턴하도록 구현했습니다.
그 외 공지 박스 제거, 칩 mds로 변경 등 ui 작업을 진행했습니다.

📸 스크린샷

2025-01-30.11.57.42.mov

height · 2025-01-30T03:08:09Z

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

borimong · 2025-01-31T14:58:34Z

pages/list/index.tsx

@@ -18,12 +17,16 @@ import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { styled } from 'stitches.config';
 import CrewTab from '@components/CrewTab';
+import Chips from '@components/page/list/Filter/Modal/Chip';


mds chip 이 따로 있는데, mds chip 과 해당 chip 의 디자인이 동일한 게 맞을까요?? 보통의 경우엔 기존의 것이 legacy 이고 mds 컴포넌트로 교체해서요~!!

아 저 Chips라는 부분이 내부적으로 만든 chip 컴포넌트를 사용하고 있었는데, 해당 chip 컴포넌트를 mds로 변경했어요!
그래서 칩들을 렌더링하는 컴포넌트인 Chips는 거의 그대로 재활용하는 방식으로 구현 진행했습니다 :)

borimong · 2025-01-31T15:02:21Z

src/components/page/list/Filter/Modal/Chip/ChipItem.tsx

 }

-function ChipItem({ label, value, isSelected, addValue, deleteValue }: ChipItemProps) {
+function ChipItem({ label, value, isSelected, addValue, deleteValue, resetQuery }: ChipItemProps) {
+  const isTablet = useMediaQuery('(max-width: 768px)');


우리 useDisplay 라는 커스텀 훅을 활용하고 있어!! :)

알려주셔서 감사합니다 !! 확인하고 반영하겠습니다 ~!

borimong · 2025-01-31T15:08:09Z

src/hooks/useMediaQuery/index.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';


useDisplay 훅을 활용한다면 useMediaQuery 는 동일한 기능을 하는 훅인 것 같으니 삭제해줘도 괜찮겠다!!

j-nary

고생하셨습니다 :) 🚀🚀🚀

j-nary · 2025-01-31T15:04:21Z

src/components/page/list/Filter/index.tsx

  flexType: 'verticalCenter',
  gap: '$8',
  color: '$gray10',
  padding: '$18 $20',
-  border: '1px solid $gray10',
+  //border: '1px solid $gray10',


주석 발견! 레거시가 되지 않도록 제거 부탁드립니당

j-nary · 2025-01-31T15:07:57Z

src/constants/option.ts

@@ -21,7 +21,7 @@ export const APPROVAL_STATUS_KOREAN_TO_ENGLISH: StringKeyObject = {
  거절: 'REJECT',
 };
 export const APPLICATION_TYPE = ['신청', '초대'];
-export const CATEGORY_OPTIONS = ['번쩍', '스터디', '세미나', '행사'];
+export const CATEGORY_OPTIONS = ['전체', '스터디', '세미나', '행사', '번쩍'];


CATEGORY_OPTIONS 에 '전체' 를 넣으면 다른 부분과 충돌이 생길 거에요..!
필터에서만 사용하는 부분이 아닌 걸로 기억하는데, 해당 상수를 사용하는 곳 모두 확인 후에 추가된 걸까요 ?
필터에서 '전체' 가 필요하다면 FILTER_OPTIONS = ['전체', ...CATEGORY_OPTIONS]; 로 새로 생성하는 것은 어떨까요 ?

번쩍 요소의 순서를 변경한 이유도 궁금합니당

좋은 의견 감사합니다!

확인해보니, 다른 부분들에서는 style 적용하는 용도로만 사용하고 있더라구요 ('스터디'일 경우 빨간 글씨가 나타나도록 함)
그래서 단순하게 CATEGORY_OPTIONS[0] -> CATEGORY_OPTIONS[1] 로 변경하려다가
말씀 주신대로 필터 옵션은 필터 옵션에 맞게 분리하는 게 맞는 것 같아서
CATEGORY_FILTER_OPTIONS 을 새로 만들고 적용시키겠습니다!

번쩍 요소의 순서는 기획 의도 상 번쩍 칩이 가장 오른쪽에 가길 원하셨고, 이미 구현되어 있는 로직에서는 CATEGORY_OPTIONS 을 순서대로 map 돌리면서 렌더링하고 있어서, 기존의 코드를 최대한 활용하기 위해 간단하게 '번쩍' 요소의 순서를 변경하는 방식으로 코드를 구현했습니다!

j-nary · 2025-01-31T15:11:06Z

src/hooks/useMediaQuery/index.ts

저희가 react-responsive 라이브러리를 사용하고 있는데, 새로 구현해준 이유가 있을까요 ?

react-responsive 라이브러리를 사용해서 만든 useDisplay라는 훅이 있는 걸 몰랐어요,,
좋은 지적 감사합니다! 추후 팀원분들이 헷갈리지 않도록 아예 삭제할게요!

j-nary · 2025-01-31T15:14:00Z

src/components/page/list/Filter/Modal/Chip/ChipItem.tsx

  const toggle = () => {
+    if (value === '전체') {
+      resetQuery();


전체 클릭시 모든 파라미터를 reset 시키는 방식으로 한다면 다른 필터링 조건들도 함께 날아갈텐데 의도하신 부분이 맞을까요 ?

네 맞습니다 !
url 쿼리키로 필터링을 하다보니 새로고침을 하더라도 필터링이 유지되던데, 그럼 초기화를 위해 칩을 일일히 다시 선택하며 해제하는게 불편하게 느껴져서 전체 칩 버튼을 클릭하면 전부 리셋되도록 구현했습니다.

j-nary · 2025-01-31T15:15:38Z

src/components/page/list/Filter/Modal/Chip/ChipItem.tsx

@@ -1,5 +1,7 @@
 import { ampli } from '@/ampli';
 import { CATEGORY_FILTER, PART_FILTER, STATUS_FILTER } from '@constants/option';
+import { useMediaQuery } from '@hooks/useMediaQuery';


라이브러리 사용하고 있으니 직접 구현한 것을 사용할 필요가 없을 것 같다는 생각이 드는데 ..! 다른 의도가 있으신지 궁금합니다 :)

위에서 이유는 설명드렸으니 여기선 생략하겠습니당
useDisplay로 변경하겠습니다..!!

ocahs9 · 2025-02-05T07:23:55Z

코리 전부 반영했습니다! dev 머지하겠습니다

ocahs9 added 6 commits January 29, 2025 00:37

feat: 공지 box 제거

8cf31f5

design: arrow 버튼 모양 변경

66ec434

feat: 전체 칩 추가

b35c704

feat: useMediaQuery 훅 추가, 카테고리 바깥으로 이동

65b1ae5

feat: 필요없는 ui 제거

1ecbb24

feat: 파트 드롭다운 필터 구현

a46f145

ocahs9 self-assigned this Jan 30, 2025

ocahs9 requested review from borimong and j-nary as code owners January 30, 2025 03:08

pull-request-size bot added the size/L label Jan 30, 2025

ocahs9 temporarily deployed to development January 30, 2025 03:08 — with GitHub Actions Inactive

borimong reviewed Jan 31, 2025

View reviewed changes

j-nary reviewed Jan 31, 2025

View reviewed changes

ocahs9 added 2 commits February 2, 2025 14:58

chore: 주석 제거

159dd5a

fix: useMediaQuery 훅 삭제, useDisplay로 변경

dcf171e

ocahs9 temporarily deployed to development February 2, 2025 06:58 — with GitHub Actions Inactive

style: CATEGORY_OPTIONS 변경으로 인한 스타일 변경 처리

5cab518

ocahs9 temporarily deployed to development February 5, 2025 07:13 — with GitHub Actions Inactive

fix: CATEGORY_FILTER_OPTIONS 으로 분리

6fb0719

ocahs9 temporarily deployed to development February 5, 2025 07:19 — with GitHub Actions Inactive

ocahs9 merged commit 9ce8f38 into develop Feb 5, 2025
1 check passed

ocahs9 deleted the feat/#996 branch February 5, 2025 07:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

전체 모임 필터 작업 및 UI 수정 작업 (필터 모달 삭제) #997

전체 모임 필터 작업 및 UI 수정 작업 (필터 모달 삭제) #997

ocahs9 commented Jan 30, 2025 •

edited

Loading

height bot commented Jan 30, 2025

borimong Jan 31, 2025

ocahs9 Feb 2, 2025

borimong Jan 31, 2025

ocahs9 Feb 2, 2025

borimong Jan 31, 2025

j-nary left a comment

j-nary Jan 31, 2025

j-nary Jan 31, 2025 •

edited

Loading

ocahs9 Feb 5, 2025

j-nary Jan 31, 2025

ocahs9 Feb 2, 2025

j-nary Jan 31, 2025

ocahs9 Feb 2, 2025

j-nary Jan 31, 2025

ocahs9 Feb 2, 2025

ocahs9 commented Feb 5, 2025

		@@ -0,0 +1,19 @@
		import { useEffect, useState } from 'react';

전체 모임 필터 작업 및 UI 수정 작업 (필터 모달 삭제) #997

전체 모임 필터 작업 및 UI 수정 작업 (필터 모달 삭제) #997

Conversation

ocahs9 commented Jan 30, 2025 • edited Loading

🚩 관련 이슈

📋 작업 내용

📌 PR Point

📸 스크린샷

height bot commented Jan 30, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

j-nary left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

j-nary Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ocahs9 commented Feb 5, 2025

ocahs9 commented Jan 30, 2025 •

edited

Loading

j-nary Jan 31, 2025 •

edited

Loading