ProjectFolder

프로젝트(경험 묶음) 하나를 폴더로 보여 준다. 열면 안에 든 기록이 위로 올라와 하나씩 열 수 있다.

라이브러리 전용

개요

미리보기

예시 언어동작 줄이기

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

title

meta

field

image

tone

labelPlacement

defaultOpen

action

width

reserve

trust

예시

상태

닫힘
열림
직접 작성 추가
자동 묶음(추정)
가장 긴 문구 (es)

쓰임 예

Tide 색면
Dusk 색면
Sand 색면
라벨 위 끝
다크 톤
작게
크게
같은 줄 높이 맞춤

이렇게 · 이렇게 하지 않기

이렇게 프로젝트와 경험 묶음에만 쓴다(위젯 F1, 기록 탭 프로젝트 보기). 폴더 하나 = 실제 프로젝트 하나.
이렇게 시트 메타는 출처 줄 문법(아이콘 · 서비스 · 날짜)을 따르고, 예외(추정·원문 열 수 없음·검토 필요)만 라벨로 보인다.
이렇게 하지 않기 장식으로 쓰지 않는다. 빈 화면 그림, 랜딩 장식, 업로드 버튼 대용으로 폴더를 그리지 않는다.
이렇게 하지 않기 여러 폴더를 색면 색으로 구분하지 않는다. 한 화면의 색면은 최대 3개이고 기본은 night다.
이렇게 하지 않기 폴더 안에 삭제·연결 해제 같은 파괴적 행동을 넣지 않는다. 그런 행동은 프로젝트 화면의 별도 버튼과 결과 설명으로 둔다.

토큰과 속성

이름	타입	기본값	설명
`title`	`ReactNode`	`채용 플랫폼 리뉴얼`	프로젝트 이름. 열기 버튼의 이름이 된다.
`meta?`	`ReactNode`	`2025년 3월–9월`	제목 아래 사실 한 줄(보통 기간). “남은 일” 같은 진척 지표는 쓰지 않는다.
`field?`	`'night' \| 'tide' \| 'dusk' \| 'sand'`	`night`	뒤판 위젯 색면. 기본은 중립 night. 다른 색은 프로젝트 범주 표시에 쓰지 않는다.
`image?`	`string`		사용자가 고른 뒤판 이미지 URL(cover). 있으면 field 대신 쓴다. 장식이라 대체 텍스트는 비운다.
`tone?`	`'auto' \| 'light' \| 'dark'`	`auto`	auto는 화면 테마를 따른다. light·dark는 폴더 안 토큰만 그 테마로 고정한다(data-theme).
`labelPlacement?`	`'bottom-start' \| 'top-start' \| 'top-end'`	`bottom-start`	앞판 라벨 위치. 라벨 쪽 유리는 96% 불투명으로 바뀐다. RTL에서는 start·end가 뒤집힌다.
`defaultOpen?`	`boolean`	`false`	처음 열림 상태(비제어). 제어하려면 open + onOpenChange를 쓴다.
`action?`	`'none' \| 'add'`	`none`	add는 “직접 작성” 기록을 하나 넣는 버튼을 둔다. 새 시트는 연필 + “직접 작성”으로 표시된다. 삭제·이동 메뉴는 없다.
`width?`	`280 \| 320 \| 360 \| 400`	`320`	최대 폭(px). 부모가 더 좁으면 부모 폭으로 줄어든다(320 화면에서 넘침 없음). 폴더 모양은 폭에 맞춰 커지고 글자 크기는 그대로다(최소 13px).
`reserve?`	`'auto' \| 'uniform'`	`auto`	폴더 위 여유 공간. auto는 이 폴더의 시트 수만큼, uniform은 4장 분량을 비워 같은 줄의 폴더 높이를 맞춘다(그리드에서 권장).
`trust?`	`'none' \| 'inferred'`	`none`	폴더 묶음 자체가 자동으로 만들어졌으면 inferred → 앞판에 “추정” 라벨(점선 + 아이콘 + 글자). 기록별 라벨은 files[].trust.
`files?`	`readonly ProjectFolderFile[]`	—	최신순 기록. 시트는 최대 4장(최신이 유리 가까이). 각 항목: id, name, source(gmail\|calendar\|drive\|slack\|notion\|self), date, href?, trust?(inferred\|source-unavailable\|needs-review).
`total?`	`number`	—	프로젝트 전체 기록 수. files가 최근 일부일 때 넘긴다. 숫자는 즉시 바뀐다(세어 올리기 없음).
`onOpenChange?`	`(open: boolean) => void`	—	열림·닫힘이 바뀔 때.
`onFileSelect?`	`(file: ProjectFolderFile) => void`	—	href 없는 시트(버튼)를 눌렀을 때.
`onAdd?`	`(file: ProjectFolderFile) => void`	—	add로 새 “직접 작성” 시트가 들어간 뒤. 저장은 호출한 쪽이 한다.
`open`	—	—	제어 모드: open과 onOpenChange를 함께 넘긴다. open이 있으면 defaultOpen은 무시된다.
`ref`	—	—	ref는 바깥 <article>로 전달된다.
`motion`	—	—	열기 move 280ms(시트 스태거 0·40·80ms), 닫기 196ms, hover 기울기 base 200ms, 추가 base 200ms. 스프링·포인터 기울기 없음. reduce에서는 위치가 즉시 바뀌고 새 시트만 120ms 페이드.
그 밖의 속성	—	—	id, aria-, data-, onKeyDown 등 네이티브 article 속성은 그대로 전달된다. className·style·children은 받지 않는다.

개요

미리보기

예시 언어동작 줄이기

오버레이는 무대 안에 비모달 정적 상태로 그립니다. 실제 동작은 트리거 버튼으로 확인하세요.

title

meta

field

image

tone

labelPlacement

defaultOpen

action

width

reserve

trust

예시

상태

닫힘
열림
직접 작성 추가
자동 묶음(추정)
가장 긴 문구 (es)

쓰임 예

Tide 색면
Dusk 색면
Sand 색면
라벨 위 끝
다크 톤
작게
크게
같은 줄 높이 맞춤

이렇게 · 이렇게 하지 않기

이렇게 프로젝트와 경험 묶음에만 쓴다(위젯 F1, 기록 탭 프로젝트 보기). 폴더 하나 = 실제 프로젝트 하나.

이렇게 시트 메타는 출처 줄 문법(아이콘 · 서비스 · 날짜)을 따르고, 예외(추정·원문 열 수 없음·검토 필요)만 라벨로 보인다.

이렇게 하지 않기 장식으로 쓰지 않는다. 빈 화면 그림, 랜딩 장식, 업로드 버튼 대용으로 폴더를 그리지 않는다.

이렇게 하지 않기 여러 폴더를 색면 색으로 구분하지 않는다. 한 화면의 색면은 최대 3개이고 기본은 night다.

이렇게 하지 않기 폴더 안에 삭제·연결 해제 같은 파괴적 행동을 넣지 않는다. 그런 행동은 프로젝트 화면의 별도 버튼과 결과 설명으로 둔다.

토큰과 속성

이름	타입	기본값	설명
`title`	`ReactNode`	`채용 플랫폼 리뉴얼`	프로젝트 이름. 열기 버튼의 이름이 된다.
`meta?`	`ReactNode`	`2025년 3월–9월`	제목 아래 사실 한 줄(보통 기간). “남은 일” 같은 진척 지표는 쓰지 않는다.
`field?`	`'night' \| 'tide' \| 'dusk' \| 'sand'`	`night`	뒤판 위젯 색면. 기본은 중립 night. 다른 색은 프로젝트 범주 표시에 쓰지 않는다.
`image?`	`string`		사용자가 고른 뒤판 이미지 URL(cover). 있으면 field 대신 쓴다. 장식이라 대체 텍스트는 비운다.
`tone?`	`'auto' \| 'light' \| 'dark'`	`auto`	auto는 화면 테마를 따른다. light·dark는 폴더 안 토큰만 그 테마로 고정한다(data-theme).
`labelPlacement?`	`'bottom-start' \| 'top-start' \| 'top-end'`	`bottom-start`	앞판 라벨 위치. 라벨 쪽 유리는 96% 불투명으로 바뀐다. RTL에서는 start·end가 뒤집힌다.
`defaultOpen?`	`boolean`	`false`	처음 열림 상태(비제어). 제어하려면 open + onOpenChange를 쓴다.
`action?`	`'none' \| 'add'`	`none`	add는 “직접 작성” 기록을 하나 넣는 버튼을 둔다. 새 시트는 연필 + “직접 작성”으로 표시된다. 삭제·이동 메뉴는 없다.
`width?`	`280 \| 320 \| 360 \| 400`	`320`	최대 폭(px). 부모가 더 좁으면 부모 폭으로 줄어든다(320 화면에서 넘침 없음). 폴더 모양은 폭에 맞춰 커지고 글자 크기는 그대로다(최소 13px).
`reserve?`	`'auto' \| 'uniform'`	`auto`	폴더 위 여유 공간. auto는 이 폴더의 시트 수만큼, uniform은 4장 분량을 비워 같은 줄의 폴더 높이를 맞춘다(그리드에서 권장).
`trust?`	`'none' \| 'inferred'`	`none`	폴더 묶음 자체가 자동으로 만들어졌으면 inferred → 앞판에 “추정” 라벨(점선 + 아이콘 + 글자). 기록별 라벨은 files[].trust.
`files?`	`readonly ProjectFolderFile[]`	—	최신순 기록. 시트는 최대 4장(최신이 유리 가까이). 각 항목: id, name, source(gmail\|calendar\|drive\|slack\|notion\|self), date, href?, trust?(inferred\|source-unavailable\|needs-review).
`total?`	`number`	—	프로젝트 전체 기록 수. files가 최근 일부일 때 넘긴다. 숫자는 즉시 바뀐다(세어 올리기 없음).
`onOpenChange?`	`(open: boolean) => void`	—	열림·닫힘이 바뀔 때.
`onFileSelect?`	`(file: ProjectFolderFile) => void`	—	href 없는 시트(버튼)를 눌렀을 때.
`onAdd?`	`(file: ProjectFolderFile) => void`	—	add로 새 “직접 작성” 시트가 들어간 뒤. 저장은 호출한 쪽이 한다.
`open`	—	—	제어 모드: open과 onOpenChange를 함께 넘긴다. open이 있으면 defaultOpen은 무시된다.
`ref`	—	—	ref는 바깥 <article>로 전달된다.
`motion`	—	—	열기 move 280ms(시트 스태거 0·40·80ms), 닫기 196ms, hover 기울기 base 200ms, 추가 base 200ms. 스프링·포인터 기울기 없음. reduce에서는 위치가 즉시 바뀌고 새 시트만 120ms 페이드.
그 밖의 속성	—	—	id, aria-, data-, onKeyDown 등 네이티브 article 속성은 그대로 전달된다. className·style·children은 받지 않는다.

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

쓰임 예

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기