컴포넌트

ZERO-ONE의 공통 UI 컴포넌트는 study-platform-client/src/components/common/ui/에 모여 있습니다. shadcn 기반 프리미티브 위에 도메인 컴포넌트를 얹는 구조입니다.

공통 UI 인벤토리

코드 디렉터리(components/common/ui/)에서 확인되는 주요 컴포넌트:

프리미티브 / 폼: button, input, text-field, checkbox, radio, toggle, dropdown, chip, chip-input, badge, form, date-picker, star-rating-input
레이아웃 / 컨테이너: page-container, section-shell, surface-panel, modal, modal-shell, tabs, tab-menu, table, list, carousel, pagination
헤더 / 섹션: section-header, inline-section-header, key-value-row, stat-item, metric-card
버튼 변형: icon-button, text-action-button, action-pill-button, floating-class-action-buttons, floating-inquiry-button
피드백 / 상태: toast, global-toast, tooltip, progress, loading-skeleton
미디어 / 아바타: avatar, avatar-stack, image-upload-input, icons
에디터: editor, rich-text
스터디 특화: study-active-ticker, study-card-countdown-badge
shadcn 원본은 (shadcn) 하위에 격리

UIUX 개선안에서 도출된 패턴

노션 “UIUX 개선안”에는 컴포넌트/패턴 레벨의 구체 제안이 다수 누적돼 있습니다(작성자: 장주형·김소영·윤동주·조성진·최현준 등). 컴포넌트 관점에서 의미 있는 것:

카드 vs 리스트: 스터디 둘러보기를 아티클(피드)형에서 카드형으로 전환하자는 제안. 단 “아직 스터디 수가 적어 카드보다 리스트가 낫다”는 판단으로 현재 보류. 추후 스터디 누적 시 카드 UI 지향.
검색/필터/정렬 영역: 그룹스터디에 검색·필터·정렬 컨트롤 도입. + “어떤 검색조건이 활성화됐는지” 시각적으로 알려주는 필터 상태 표시. (코드의 filters 컴포넌트와 연결)
카드 컬렉션 큐레이션: “신규 / 인기 / 마감 임박” 같은 분류 섹션, “내가 참여 중인 스터디” 최상단 고정.
카운트다운 배지: 마감 임박 표현 (코드의 study-card-countdown-badge와 대응).
버튼 상태 디테일: 로그인 버튼에 cursor:pointer 미적용으로 클릭 가능 여부가 모호 → hover/cursor 상태 명확화.
배너/캐러셀: 배너가 1개일 때 좌우 네비게이션 hide (불필요한 액션 제거). (코드의 carousel)
툴팁: 성실온도 설명 툴팁이 보이지 않음 → tooltip 노출 보강. 프로필 아이콘에 의미 타이틀 부여.
이미지 업로드: 프사 업로드 시 .jpeg 미지원·1:1 비율 강제로 찌그러짐 → crop/positioning 도입 제안 (코드의 image-upload-input).
권한별 버튼 비활성화: 그룹스터디에서 리더 외 멤버는 수정 버튼 비활성화.
댓글 가독성: 줄 길이·줄간격 조정으로 가독성 개선 (채널 댓글).

위 개선안은 제품 백로그 성격이며, 실제 채택/구현 상태는 컴포넌트 코드와 Jira를 함께 확인해야 합니다.

원문: UIUX 개선안 (전체 목록) · 코드: study-platform-client/src/components/common/ui/