배움의 기쁨을
세상 모두에게

Button — Primary · Secondary

Primary 저장하기 저장하기 저장하기 저장하기

Secondary 취소하기 취소하기 취소하기 취소하기

Icon 내려받기 다음으로

Button — Tertiary · Text · Icon

Tertiary 더 알아보기 더 알아보기 더 알아보기

Text 더보기 더보기 더보기

Icon

Label

진행 중 완료 신규 대기 종료 안내

진행 중 완료 종료 Invert

Tooltip

툴팁 텍스트 추가 설명

Tabs

전체 24 진행 중 7 완료 17

메뉴명 메뉴명 메뉴명

Text Field

레이블

레이블

코드잇

codeit

이메일 형식으로 입력해 주세요.

codeit@example.com

사용할 수 있는 주소입니다.

Textarea

내용을 입력해 주세요.

한 문단 이내로 작성해 주세요.0 / 500

입력할 수 없는 상태입니다.

Select

선택해 주세요

아이템 2

Dropdown

레이블

아이템 2

아이템 1

아이템 2

아이템 3

아이템 4

아이템 5

Checkbox

이용약관에 동의합니다서비스 이용을 위한 필수 항목입니다. 마케팅 수신에 동의합니다 선택할 수 없는 항목

Radio Button

카드결제등록된 카드로 바로 결제됩니다. 계좌이체 휴대폰 결제

Accordion

FAQ 답변의 환불 기한·환불 범위 안내는 펼침 동작을 보여 주기 위한 레이아웃 시연용 더미 데이터이며, 실제 코드잇 환불 정책이 아닙니다.

Q

환불 정책이 궁금해요

결제일로부터 7일 이내에 신청하시면 전액 환불됩니다. 자세한 내용은 이용약관을 확인해 주세요.

Q

결제 수단은 어떻게 변경하나요?

Modal

변경사항을 저장할까요?

저장하지 않으면 작성한 내용이
모두 삭제됩니다.

취소하기 저장하기

다시 보지 않기

Toast

토픽 생성 완료부가 설명

저장되었습니다 +120

Snackbar

설문에 참여해주세요!

더 나은 경험을 만들기 위해 짧은 의견을 들려주세요.

의견 남기기

Table

	이름	상태	담당	수정일
	기본 설정	진행 중	김코드	2026.07.16
	알림 설정	완료	이잇	2026.07.14
	보안 설정	종료	박디자	2026.07.02

Pagination

Bottom Sheet

정렬 기준

최신순 이름순

적용하기

Pattern — Empty Section

표시할 콘텐츠가 없습니다

새로 만들기

Pattern — Filter

필터 2 필터

필터 2

입문 심화

Pattern — Title

Foundations

Color

시맨틱 컬러를 정의하고 모든 컴포넌트의 기준을 세웁니다.

더보기

Pattern — Loading

Diff — 코드 비교 파운데이션

function count(items) {-   const total = items.length+   const total = items?.length ?? 0    return total}

화면 조합 — 설정

설정

계정

프로필 설정

다른 사용자에게 보여지는 정보입니다.

프로필 알림 3 보안

이름

김코드

이메일

codeit@example.com

로그인에 사용됩니다.

소개

간단한 소개를 남겨 주세요.

14 / 500

결제 수단 카드결제 계좌이체

이용약관에 동의합니다

취소하기 저장하기