Jongwon 포트폴리오

Profile Card

기본 / 액션형 / 컴팩트

Button

variant / size / state / icon / full / group / segmented

Variants

Sizes

States

Icon

Full width

Button Group

Segmented

Input

variant / size / state / icon / clear / full / group

Variants

Default

Filled

Underline

Floating (A)

이메일

Underline Floating (M)

검색어

Sizes

States

오류 안내 문구입니다.

정상 안내 문구입니다.

Icon / Clear

Icon Left

Clear

Full width

Input Group

@

₩

Textarea

Radio

basic / group (row|col) / disabled / description

Checkbox

single / group (row|col) / disabled / description

Range / Slider

single / dual / step+markers / value tooltip

단일 값

Volume

40

0 50 100

min~max 범위 (듀얼 핸들)

Price

20 ~ 80

20 80

0 50 100

step, 마커 표시

Step 10

30

0102030405060708090100

값 툴팁 표시

Opacity

65

드래그하면 툴팁이 핸들을 따라다님

Star Rating (jw-range)

단일 값 (step 1)

★★★★★

3

드래그/클릭으로 별점 선택 (0~5)

Select

typeA / typeB / size / disabled / search / presets

기본

Type A

선택

Type B (pill)

정렬

사이즈 / Disabled

Small

페이지 사이즈

Large

상태

Disabled

비활성

리스트 검색

Searchable

카테고리

검색어로 항목 필터링

종원 자주 쓰는 프리셋

연도

2025

월

12

상태(관리자)

전체

게시판/관리자 리스트에 자주 쓰는 조합

Multi Select (선택 누적 → 버튼 생성)

카테고리

선택

셀렉트로 선택하면 아래 버튼이 계속 추가됨 (버튼 클릭하면 제거)

Progress

variant / size / value / striped / indeterminate

기본

Upload45%

Build72%

Sizes

XS30%

SM45%

MD60%

LG75%

Variants

Primary40%

Success80%

Warn55%

Danger20%

Gray65%

Striped / Indeterminate

Striped60%

Striped35%

Table

TableA(list) / TableB(form)

Table A (List)

Total 5

No	제목	상태	등록일
5	게시판 UI 정리	노출	2025-12-27
4	셀렉트/인풋 컴포넌트	보류	2025-12-26
3	버튼 variant 추가	기본	2025-12-25
2	프로필 카드 3종	노출	2025-12-24
1	프로젝트 카드	숨김	2025-12-23

Table B (Form)

제목
카테고리	선택 상단 고정
상태	노출 숨김 품절(비활성)
내용
저장

TableB는 관리자 입력폼 레이아웃에 자주 쓰는 형태

Modal / Toast

dialog modal + toast notify

Toast

오른쪽 아래에 토스트가 쌓이고, X로 닫을 수 있음

Modal

바깥(백드롭) 클릭/닫기 버튼으로 닫힘

Timeline

history / process / log

기본 (Card)

2025-12-27 16:10 타임라인 컴포넌트 추가 진행

작업 이력/로그/프로세스 흐름을 한 눈에 보여주는 UI.

#ui #components #jw

2025-12-27 15:30 토스트/모달 정리 완료

알림/확인 플로우를 공통 유틸로 묶음.

2025-12-27 14:50 QA 체크 보류

모바일 줄바꿈/여백만 조금 더 봐야 함.

2025-12-27 14:20 아이디어 정리 기본

추후 “필터/검색” 옵션도 붙일 수 있음.

Compact

16:05 완료 OK

짧은 로그/이력용

16:02 에러 FAIL

문제 원인 추적용

촘촘한 로그 UI는 compact가 보기 좋음

Uploader

drag & drop / list / progress

기본 업로더

파일을 여기에 드래그해서 놓아주세요

또는 “파일 선택”으로 추가 가능

data-url

이미지 미리보기 포함

이미지도 드래그해서 올려주세요

data-preview="1"이면 이미지 썸네일 표시

선택된 파일 없음

NO IMG

선택된 파일 없음

Tooltip / Popover

hover tip / click panel

Tooltip (CSS only)

호버하면 툴팁 표시 (JS 없음)

Popover (click)

버튼 클릭으로 열리고, 바깥 클릭/ESC로 닫힘

Pagination

jw-pagebox (auto render)

자동 생성 (… 포함)

Total 25

13 / 25

data-window=가운데 묶음 개수, data-edge=양끝 고정 개수

작은 페이지 수

Total 6

1 / 6

페이지 수가 적으면 … 없이 전부 표시

Date Picker

native input (fast)

단일 날짜

선택된 날짜가 없습니다.

기간(From ~ To)

~

기간이 선택되지 않았습니다.

날짜+시간

선택값이 없습니다.

시간만

선택값이 없습니다.

HTML

<div class="hello">Hi</div>

JS

console.log('hello');

콘텐츠·게시