[#133] Club Page 검색창 구현 (바뀐 디자인 적용 & Vanill-extract & FSD 아키텍쳐)

[halionaz]

📌 내용

• 이 PR은 Club Page의 디자인을 바꾸는 작업인 ClubPage UX Improve #133 의 일부에요.
• Club Page의 검색 영역을 새롭게 구현했어요.
  • 새롭게 구현되는 컴포넌트는 /features 디렉토리 내에 정리돼요.
  • Panda CSS를 제거하고 Vanilla-Extract를 사용하여 스타일링했어요.
• 검색이 Query Param 기반이므로, 불필요한 Prop Drilling을 줄였어요.
• 컴포넌트를 분리하여 Club Page 검색에 Suspense를 적용했어요.

---

데스크탑

---

모바일

☑️ 체크 사항

• 검색 영역 디자인이 Figma와 일치하는지
• 기존과 다르게 동작하는 컴포넌트는 없는지

❗ Related Issues

• ClubPage UX Improve #133

[Virtuso1225]

해당 컴포넌트가 여기서만 쓰이나요? 다른 곳에서도 쓰일 수 있는 Chip이면 공통 컴포넌트로 만들어 두는 게 좋아보여요~

[halionaz]

재사용 가능한 Chip UI 컴포넌트가 아니라 Club Category 선택때만 사용됩니다!
기획상 다른 도메인에서 쓰일일은 없을 것 같은데 추후에 만약 다른 곳에 사용된다면 common으로 빼는게 좋을 것 같아요

[Virtuso1225]

이거 타이포 미리 정의해둔 거 못 쓰나요?

[Virtuso1225]

저희 px -> rem 으로 통일했지 않나여

[halionaz]

아하

[Virtuso1225]

요것도 만들어둔 타이포 사용해요~ f.typography.desktop ~ f.typo.mobile etc

[Virtuso1225]

이거 용으로 만들어 둔 컴포넌트 있지 않나요?

[Virtuso1225]

여기에는 아직 그 api 만들어둔 거 없나요?

[Virtuso1225]

오호! Case 와 Switch의 결합성이 더 보이면 좋을 것 같아요~ Case 만 쓰면 에러가 난다 라던지,

그리고 뭔가 Switch가 없어도

import { PropsWithChildren } from 'react';

type Props = PropsWithChildren<{
  condition: boolean;
  fallback?: React.ReactNode;
}>;

export const Render = ({ children, condition, fallback }: Props) => {
  if (!condition) return <>{fallback ?? null}</>;

  return <>{children}</>;
};

아래처럼 해도 같지 않나요? 그렇다면 Switch에서 child 순회하면서 찾는 것 보다 효율적일 것 같아요!

<Render condition={clearInput !== undefined}>
	<button className={s.Icon({ isFocus })} onClick={clearInput} type="button">
            <X size={18} />
          </button>
</Render>