[REFACTOR] panel 컴포넌트 개선

[seongminn]

🌍 이슈 번호

• closed [REFACTOR] panel 컴포넌트 개선 #59

✅ 작업 내용

• 기존의 Panel 컴포넌트를 대체할 Tabs 컴포넌트를 공용 패키지에 생성했습니다.
  • shadcn/ui의 tabs 컴포넌트를 참고했습니다.
  • Panel 컴포넌트를 완전히 제거했습니다.
  • 현재 app/game/[id]/page.tsx에서 Tabs 컴포넌트를 바로 호출하고 있습니다. 이 방법도 좋고, _components/panel 경로에 Panel 컴포넌트를 생성하고, tabs config만 넘겨 렌더링하도록 작성할 수도 있을 것 같네요. 어떤 방법이 나을지 코멘트 남겨주시면 감사하겠습니다!

// 현재 - app/game/[id]/page.tsx
const TABS_CONFIG = [{ /* ... */ }, { /* ... */ }, { /* ... */ }]

<Tabs defaultValue="라인업" className={styles.panel.wrapper}>
        <Tabs.List className={styles.panel.menu}>
          {TABS_CONFIG.map(tab => (
            <Tabs.Trigger
              key={tab.label}
              value={tab.label}
              className={state => styles.item[state]}
            >
              {tab.label}
            </Tabs.Trigger>
          ))}
        </Tabs.List>
        {tabs.map(tab => (
          <Tabs.Content key={tab.label} value={tab.label}>
            <AsyncBoundary
              errorFallback={() => <div>에러</div>}
              loadingFallback={<Loader />}
            >
              {tab.renderer(params.id)}
            </AsyncBoundary>
          </Tabs.Content>
        ))}
      </Tabs>

// 대안 - `_components/Panel`에 위의 컴포넌트를 그대로 작성하고 props로 tabs config를 넘겨 받는다.

// app/game/[id]/page.tsx
const TABS_CONFIG = [{ /* ... */ }, { /* ... */ }, { /* ... */ }]

return (
  <div>
    // ...
    <Panel config={TABS_CONFIG} />
  </div>
)

📝 참고 자료

♾️ 기타

[netlify]

✅ Deploy Preview for hufscheer ready!

Name	Link
🔨 Latest commit	f06fcfd
🔍 Latest deploy log	https://app.netlify.com/sites/hufscheer/deploys/65e8a46d90b35c00089252d3
😎 Deploy Preview	https://deploy-preview-60--hufscheer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 95 Accessibility: 88 Best Practices: 92 SEO: 91 PWA: - View the detailed breakdown and full score reports

---

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

[netlify]

✅ Deploy Preview for hufscheer-manager ready!

Name	Link
🔨 Latest commit	f06fcfd
🔍 Latest deploy log	https://app.netlify.com/sites/hufscheer-manager/deploys/65e8a46d463e6100088a32bd
😎 Deploy Preview	https://deploy-preview-60--hufscheer-manager.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[ohprettyhak]

고생하셨습니다! 탭 정보를 리스트로 관리하니 가독성이 정말 좋아진 거 같습니다. 한 가지 생각이 드는건 Tabs.Content 내에서 AsyncBoundary로 renderer를 감싸서 출력하고 있는데, 여기에 에러와 로더를 커스텀할 수 있는 기능이 있다면 더 좋지 않을까 싶어요.

{
    label: '라인업',
    renderer: (gameId: string) => <Lineup gameId={gameId} />,
    error: <Error />,
    loading: <Loading />,
},

위의 방법을 생각해봤습니다!

[seongminn]

구두로 리뷰 마쳤습니다👍