"CSS" 태그로 연결된 23개 게시물개의 게시물이 있습니다.

작업 일자: 2026-07-01 작업 브랜치: feature/1.54.0-ds-organisms

📋 작업 개요​

작업 유형: 디자인 시스템 (organism 조립 + 원자 보강) 담당: jsg3121 + Claude

서브네비 organism에 이어, 데/모 2벌로 분리돼 있던 필터 모달·타입 필터 바를 CSS 반응형 단일 organism으로 통합하고, 포맷 탭을 TabItem(fill) 원자 조립으로 DS 규격화했다 (ADR-0007, UA 분기·display:none 없음). 조립에 필요한 타입 아이콘 토글은 TypeChip 원자로 먼저 규격화했다(ADR-0010 원자→조립).

🎯 작업 목표​

/list(도감)의 필터 UI는 필터 모달·타입 필터 바가 각각 데스크톱/모바일 2벌로 복제돼 있었고(모달은 크기만 다른 복붙, 바는 레이아웃까지 상이), 챔피언스 포맷 탭은 인라인 알약 스타일(border-2·rounded-full 임의값)이었다. 이를 원자 조립 기반의 반응형 단일로 재구축한다.

작업 일자: 2026-06-30 작업 브랜치: feature/1.54.0-ds-round3-atoms

📋 작업 개요​

작업 유형: 디자인 시스템 (원자 컴포넌트 신규/보강) 담당: jsg3121 + Claude

라운드1·2 후 organism 조립으로 넘어가기 전 원자 전수 재점검을 했더니, 폼 컨트롤 (Radio·Checkbox)과 PageHeader가 누락돼 있었다(story 없음 / 데·모 2벌 / 임의값). organism이 이 원자에 의존하므로 조립 전에 먼저 채운다(ADR-0010 원자→조립 순서).

🎯 작업 목표​

라운드1·2가 버튼·입력·탭·칩 위주여서 폼 컨트롤이 빠졌다. "이미 완성됐다"고 본 Radio/ Checkbox는 실제로 story 없음 + 임의값 잔존, PageHeader는 데/모 2벌이었다. 핵심 4개만 ADR-0010 기준(2곳 이상 + 자명)으로 구축한다.

작업 일자: 2026-06-29 작업 브랜치: feature/1.54.0-atomic-components-plan

📋 작업 개요​

작업 유형: 디자인 시스템 (원자 컴포넌트 신규 구축) 담당: jsg3121 + Claude

ADR-0010 원자 우선 DS 구축의 라운드2. 코드베이스 전수 조사로 실사용처가 있는 입력 컨트롤·아이콘 버튼만 원자화했다(추측 선제작 금지).

🎯 작업 목표​

라운드1(Button·LinkButton·TabItem·Chip)에 이어, 입력 계열 원자를 정리했다. 조사 결과 Modal/Dialog는 도메인별 body 구조가 제각각이라 **원자가 아닌 조립물(organism)**로 두고, 그 구성요소 중 반복되는 닫기 버튼만 원자로 추출했다. ModalOverlay(딤 배경 한 줄)는 추상화 이득이 없어 제외하고 Modal 조립 시 인라인 처리한다.

작업 일자: 2026-06-28 작업 브랜치: feature/1.54.0-atomic-components-plan

📋 작업 개요​

작업 유형: 디자인 시스템 (원자 컴포넌트 신규 구축) 담당: jsg3121 + Claude

ADR-0010 원자 우선 DS 구축의 라운드 1 #4. 코드베이스의 칩/뱃지를 전수 조사한 뒤, 실제 반복되는 "작은 라벨 칩"만 단일 원자로 통합했다.

🎯 작업 목표​

조사 결과 칩/뱃지는 색 처리 방식이 제각각이었다(동적 chip-type-, 정적 badge-damage-, 하드코딩 sky-400 등). 이를 무리하게 하나로 묶지 않고 역할별로 정리했다.

• 타입 칩(18종): 이미 Tag 컴포넌트가 담당 → 신규 제작 안 함(중복 방지)
• 필터 칩(세대/타입/이펙트, 선택 피드백): /moves 등 특정 페이지 한정 → 페이지 필터 컴포넌트로 유지(DS 원자 아님)
• 데미지 유형·세대 칩: 여러 페이지에서 같은 디자인 반복 → 단일 Chip 원자로 통합

작업 일자: 2026-06-25 작업 브랜치: feature/1.54.0-atomic-components-plan

📋 작업 개요​

작업 유형: 디자인 시스템 (원자 컴포넌트 신규 구축) 담당: jsg3121 + Claude

ADR-0010 원자 우선 DS 구축의 라운드 1 #1. 코드베이스에서 가장 제각각이고 빈번한 원자인 액션 버튼을 DS로 규격화했다.

🎯 작업 목표​

버튼/CTA는 코드베이스에 약 73회 등장하는데 스타일이 매우 불통일했다.

• 모서리: rounded-lg / rounded-md / rounded-full / rounded-[20px] / rounded-[0.725rem]
• 패딩: px-4 / px-[2rem] / px-3
• 높이: h-8 / h-12 / h-[3rem] / h-[4rem]
• 배경: bg-primary-1~4 / bg-[#b8bfc9]
• hover: hover:bg-primary-1 / hover:scale-[1.025] / hover:shadow-lg

이를 토큰 기반 신규 컴포넌트로 통일하고, 임의값([...])을 표준 토큰으로 정규화한다.

작업 일자: 2026-06-25 작업 브랜치: feature/1.54.0-atomic-components-plan

📋 작업 개요​

작업 유형: 디자인 시스템 (원자 컴포넌트 신규 구축) 담당: jsg3121 + Claude

ADR-0010 원자 우선 DS 구축의 라운드 1 #2. 버튼형 CTA 중 "페이지 이동"에 해당하는 링크 CTA를 별도 원자로 규격화했다.

🎯 작업 목표​

CTA에는 "클릭 액션"(<button>)과 "페이지 이동"(<Link>) 두 종류가 섞여 있었다. 시각은 동일하지만 의미가 다르다. 시각 스타일은 공유하되, 의미를 명확히 하기 위해 이동용 CTA를 별도 컴포넌트로 분리한다(예: "챔피언스 전체 도감 보기" 섹션 CTA).

작업 일자: 2026-06-25 작업 브랜치: feature/1.54.0-atomic-components-plan

📋 작업 개요​

작업 유형: 디자인 시스템 (원자 컴포넌트 신규 구축) 담당: jsg3121 + Claude

ADR-0010 원자 우선 DS 구축의 라운드 1 #3. 코드베이스의 탭 UI를 전수 조사한 뒤, "탭 항목 하나"를 active(선택됨) 상태를 가진 신규 DS 원자로 규격화했다.

🎯 작업 목표​

코드베이스에는 탭이 6곳에 제각각 구현돼 있었다(포맷 탭, 상단 서브네비 데/모 2벌, 메타 탭, 폼 탭 등). 모서리·패딩·배경·active 표시·hover가 전부 불통일이고, 모바일 상단 서브네비는 4개 항목을 화면 폭에 균등분할하다 라벨이 줄바꿈돼 글자가 깨졌다.

이들을 직접 추출·통합하지 않고, 서비스 UI를 고려해 탭 항목 원자를 새로 디자인한다. 버튼과 분리하는 이유는 탭이 버튼에 없는 active 의미축을 갖기 때문이다.

작업 날짜: 2026-04-20 브랜치: main

작업 개요​

작업 유형: UX 개선 담당: jsg3121, claude

작업 목표​

FHD 모니터(1920x911 해상도)에서 헤더 영역이 화면의 약 30%를 차지하여 콘텐츠 영역이 부족한 문제를 해결합니다. 데스크탑 전용 수정으로 모바일은 영향받지 않습니다.

작업 날짜: 2026-03-29 브랜치: feature/1.34.1

📋 작업 개요​

작업 유형: 디자인 변경 담당: jsg3121, claude

🎯 작업 목표​

거다이맥스 전용 기술 정보 영역에서 기술명 텍스트가 주변 요소와 크기 차이가 부족하여 눈에 잘 띄지 않는 문제를 개선합니다.

📋 작업 개요​

브랜치: feature/1.28.0-refactor 작업 유형: 코드 리팩토링 작업 기간: 2026-01-02 담당: CSS 최적화 및 패턴 추출