corpi
cbd9017744
맥락: - 기존 라우트/컴포넌트 구조를 FSD 기준으로 정리하고, /app 허브와 /space 집중 화면 중심의 목업 흐름을 구성하기 위해 변경사항: - App Router 구조를 /landing, /app, /space, /stats, /settings 중심으로 재배치 - entities/session/room/user 더미 데이터와 타입 정의 추가 - features(커스텀 입장, 룸 선택, 체크인, 리액션, 30초 리스타트 등) 단위로 로직 분리 - widgets(허브, 룸 갤러리, 타이머 HUD, 툴 도크 등) 조합형 UI 추가 - shared 공용 UI(Button/Chip/Modal/Toast 등) 및 유틸(cn/useReducedMotion) 정비 - 로그인 후 이동 경로를 /dashboard 에서 /app 으로 변경 - README를 현재 프로젝트 구조/라우트/구현 범위 기준으로 갱신 검증: - npx tsc --noEmit 세션-상태: 허브·스페이스 목업이 FSD 레이어로 동작 가능하도록 정리됨 세션-다음: /space 상단 및 도크의 인원 수 카피를 분위기형 카피로 후속 정리 세션-리스크: build는 네트워크 환경에서 Google Fonts fetch 실패 가능
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo, useState } from 'react';
|
|
import type { CheckInPhrase } from '@/entities/session';
|
|
import { Chip } from '@/shared/ui';
|
|
|
|
interface CompactCheckInChipsProps {
|
|
phrases: CheckInPhrase[];
|
|
onCheckIn: (message: string) => void;
|
|
collapsedCount?: number;
|
|
}
|
|
|
|
export const CompactCheckInChips = ({
|
|
phrases,
|
|
onCheckIn,
|
|
collapsedCount = 3,
|
|
}: CompactCheckInChipsProps) => {
|
|
const [showAll, setShowAll] = useState(false);
|
|
|
|
const visiblePhrases = useMemo(() => {
|
|
if (showAll) {
|
|
return phrases;
|
|
}
|
|
|
|
return phrases.slice(0, collapsedCount);
|
|
}, [collapsedCount, phrases, showAll]);
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{visiblePhrases.map((phrase) => (
|
|
<Chip
|
|
key={phrase.id}
|
|
onClick={() => onCheckIn(phrase.text)}
|
|
className="!px-2.5 !py-1 text-[11px]"
|
|
>
|
|
{phrase.text}
|
|
</Chip>
|
|
))}
|
|
</div>
|
|
|
|
{phrases.length > collapsedCount ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowAll((current) => !current)}
|
|
className="text-[11px] text-white/65 transition hover:text-white"
|
|
>
|
|
{showAll ? '접기' : '더보기'}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|