refactor: (JDS) Listbox를 표면 없이 사용할 수 있는 옵션 추가

[ccconac]

💡 작업 내용

• Listbox에 표면을 그리지 않는 surface prop 추가
• selectContainer를 recipe로 전환해 표면 관련 선언만 variant로 분리
• Listbox 스토리 추가

💡 자세한 설명

작업 진행 이유

Listbox의 컨테이너는 기본적으로 공중에 떠 있는 드롭다운 카드로 그려지고 있습니다. 하지만, 이미 표면이 있는 컨테이너 내부에 리스트를 넣는 경우에는 카드가 이중으로 겹치고, 좌우 패딩 때문에 옵션 폭도 좁아져 표면 없이 사용할 수 있는 옵션을 추가했습니다. (DatePicker 연/월 선택)

표면만 variant로 분리

레이아웃은 surface 각 모드가 공유하고 있어 base에 두고, 표면에 해당하는 선언만 surface variant로 옮겼습니다.

export const selectContainer = recipe({
  base: {
    display: "flex",
    flexDirection: "column",
    alignItems: "stretch",
    flexShrink: 0,
    gap,
    overflow,
  },
  variants: {
    surface: {
      true: { padding, borderRadius, border, backgroundColor, boxShadow },
      false: {},
    },
  },
});

스토리

Listbox는 배럴에 공개되지 않아 스토리가 없던 컴포넌트였지만, 이번에 표면 prop을 추가하면서 useSingleSelectState + useListbox 조합 방법을 문서로 추가 작성했습니다.

✅ 셀프 체크리스트

• 머지할 브랜치 확인했나요?
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 기능이 잘 동작하나요?
• 불필요한 코드는 제거했나요?

closes #710

Summary by CodeRabbit

• 새로운 기능
  • Listbox의 표면 스타일을 표시하거나 숨길 수 있는 옵션을 추가했습니다.
  • 기본 표면, 표면 없는 상태, 표면 비교 및 레이블 표시 예제를 제공합니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ject-official-web-site-client-web	Ready	Preview	Sep 21, 2026 2:10am UTC

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: df1b70d8-15a9-4ebe-b655-e10781919ff5

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 247d5914-9bce-479a-a697-bc902b291a0e

📥 Commits

Reviewing files that changed from the base of the PR and between 6fc7ae7 and b03396e.

📒 Files selected for processing (5)

• .changeset/listbox-surface.md
• packages/jds/src/components/Listbox/Listbox.stories.tsx
• packages/jds/src/components/Listbox/Listbox.tsx
• packages/jds/src/components/Listbox/listbox.css.ts
• packages/jds/src/components/Listbox/listbox.types.ts

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

Walkthrough

Listbox에 surface 선택 옵션이 추가되었습니다. 기본값은 true입니다. false이면 컨테이너의 표면 스타일을 적용하지 않습니다. Storybook 사례와 patch changeset도 추가되었습니다.

Changes

Listbox 표면 제어

Layer / File(s)	Summary
표면 스타일 선택 구현 packages/jds/src/components/Listbox/listbox.types.ts, packages/jds/src/components/Listbox/listbox.css.ts, packages/jds/src/components/Listbox/Listbox.tsx	ListboxProps에 선택적 surface 속성이 추가되었습니다. 기본값은 true입니다. surface: false이면 패딩, 테두리, 배경, 그림자, 모서리 스타일을 적용하지 않습니다.
사용 사례와 릴리스 정보 packages/jds/src/components/Listbox/Listbox.stories.tsx, .changeset/listbox-surface.md	기본 표면, 표면 제거, 비교, 레이블 표시 Storybook 사례가 추가되었습니다. @jects/jds patch changeset이 추가되었습니다.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature · Severity of issue fixed: Low

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	직접 연결된 이슈 #710은 Listbox를 표면 없이 렌더링하는 옵션을 요구합니다. ListboxProps에 선택적 surface?: boolean이 추가되었습니다. 기본값은 true입니다. surface 값은 styles.selectContainer({ surface })에 전달됩니다. selectContainer의 recipe는 …
Out of Scope Changes check	✅ Passed	변경 사항은 모두 #710의 구현 또는 확인 목적과 연결됩니다. recipe 전환은 표면 스타일을 variant로 분리합니다. Storybook 스토리는 새 옵션의 사용 사례를 확인합니다. changeset은 해당 패키지 변경을 기록합니다. 관련 없는 기능 변경은 확인되지 않았습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 4…
Title check	✅ Passed	제목은 Listbox에 표면 없이 렌더링하는 surface 옵션 추가라는 주요 변경을 명확하고 간결하게 설명합니다.
Description check	✅ Passed	작업 내용, 변경 이유, 구현 방식, 스토리 추가 내용, 이미지, 셀프 체크리스트와 이슈 정보를 포함합니다. 선택 항목인 참고 자료와 리뷰 요구 사항이 없어도 설명은 충분합니다.

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{토끼가 Listbox 곁을 깡충 뛰네
표면은 필요할 때만 살포시 켜고
필요 없으면 조용히 내려놓네
옵션들은 넓게 줄을 맞추고
새 이야기들이 문서에 피어나네}

_{Comment @coderabbitai help to get the list of available commands.}

[ccconac]

Select가 surface prop을 받아 Listbox로 그대로 넘기도록 구현해야 할지 고민하다, 현재의 방식을 채택했는데요. 이유는 다음과 같아요:

• 컨테이너 내부에 listbox를 포함하는 요구가 현재 DatePicker 하나뿐이에요.
  • Select는 현재 배럴에 공개되어 있어, 그대로 prop을 열어 버리면 공개 API가 불필요하게 늘어난다 생각했어요.
• 표면 제거(유/무)는 Select가 아닌 Listbox의 책임이라고 봤어요.

[github-actions]

🖼️ VRT baseline 재생성 완료

• 삭제된 스토리의 스냅샷을 정리하고 현재 스토리 기준으로 baseline을 새로 커밋했습니다.
• 워크플로: 실행 내역 보기

[github-actions]

🎨 스토리북 알파 배포 완료

📦 배포 주소

• 스토리북: https://6a421e7d24f7cc0d9e49a26e-pdatekhkpo.chromatic.com/
• 빌드 상세: https://www.chromatic.com/build?appId=6a421e7d24f7cc0d9e49a26e&number=51

ℹ️ 정보

• PR: refactor: (JDS) Listbox를 표면 없이 사용할 수 있는 옵션 추가 #711
• 워크플로: 실행 내역 보기