#UI
18개의 게시물
방명록 페이지네이션 추가 및 불필요 파일 정리
🤖 2566 in / 924 out / 3490 total tokens 방명록 목록에 페이지네이션을 적용했다. 방명록이 많아질 경우를 대비해 페이지당 5개씩 보여주도록 구현. UI 파일 4개(style.css, app.js, stitch-a.html, stitch-b.html)를 업데이트했다. 페이지네이션 버튼 스타일과 페이지 이동 로직을 추가. t
검색 자동완성 드롭다운이 배경과 겹쳐 보이던 문제 수정
🤖 1022 in / 818 out / 1840 total tokens 출발지/도착지 검색할 때 자동완성 드롭다운이 배경이랑 섞여서 구분이 안 됐다. 입력 필드도 배경이 투명해서 경계가 모호했고. AddressInput 컴포넌트에서 드롭다운 z-index를 50에서 100으로 올렸다. 테두리도 1px에서 2px로 두껍게, 그림자도 강화했다. 입력 필
카테고리 시스템 추가 — 글 주제별로 색상/그라데이션 자동 연동
🤖 1623 in / 1164 out / 2787 total tokens 블로그 글을 주제별로 분류하는 카테고리 시스템을 만들었다. AI, 게임개발, 사이드프로젝트, 트레이딩, 인프라/배포, 일반 총 6개 카테고리. 각 카테고리는 고유한 accent 색상과 그라데이션을 가진다. 대시보드에서는 카드 좌측 보더와 뱃지가 카테고리 색상으로 표시되고, 에디
AI 프로바이더/모델 선택 UI 구현 및 연결 상태 관리
🤖 723 in / 1484 out / 2207 total tokens Claude, GPT, Gemini, Grok 중 프로바이더를 선택한 뒤 내부 모델을 고를 수 있도록 기능을 확장했습니다. 불필요했던 API 키 관리 섹션을 제거하고 환경 변수 연결 상태를 상단에 표시하여 관리 인터페이스를 정리했습니다. 전체적으로 코드는 +129 -119로 정리되
룰렛 시작 버튼 표시 및 방 서버 격리 기능 추가
🤖 1059 in / 1146 out / 2205 total tokens 호스트 닉네임 배지 null 체크를 추가하여 룰렛 시작 버튼이 정상적으로 표시되도록 수정했습니다. 공개 방 필터링 로직에 serverId 필터를 추가하여 다른 서버 방이 섞이는 문제를 해결했습니다. 룰렛 채팅에 랭킹 버튼을 연결하고 방 생성/입장 시 소켓 연결 상태를 확인하는 방
UI 레이아웃 정리 및 시각적 최적화
🤖 633 in / 1890 out / 2523 total tokens 오늘 날짜 레이블을 제거하고 버튼 옆으로 배치하여 헤더 공간을 확보한다. 관련된 CSS 스타일을 정리하고 레이아웃 구조를 단순화한다. 사용자 경험을 개선하고 깔끔한 디자인을 유지한다. svelte <div class="header-mid" <span class="today-da
브랜딩 정리: 공노기로 통일
🤖 756 in / 571 out / 1327 total tokens 앱 이름을 '공노기'로 확정하고 페이지 타이틀과 로그인 화면에 반영했다. 기존엔 브라우저 탭에 '근무기록'이라고 떴는데, 이제 '공노기'로 표시된다. 로그인 화면 상단에도 앱 이름을 작게 노출해서 진입점부터 브랜드 정체성을 명확히 했다. CSS는 .login-app-name 클래스
캘린더 셀 UI 개선, 출근시간 제거 및 초과근무 표시 복원
🤖 835 in / 1510 out / 2345 total tokens 캘린더 셀에서 출근시간을 제거하고 초과근무를 다시 표시하도록 수정했다. 기존 '8시 00분'이 '8시간'처럼 보여 혼동을 줘서 정보를 간소화했다. 이제 초과근무가 있을 때만 '1시간 18분' 형식으로 시간을 표시해 가독성을 높였다.
선택된 셀 배경 유지
🤖 433 in / 1118 out / 1551 total tokens 캘린더에서 클릭한 셀의 배경 하이라이트가 사라지던 버그를 수정했다. 선택된 셀의 배경색을 지정하여 시각적 피드백을 강화했다. 특히 다른 달의 날짜는 배경을 제외하고 선택 상태만 표시하도록 처리했다. 사용자가 현재 선택된 날짜를 명확히 인지할 수 있도록 UX를 개선했다.
달력 셀 터치 피드백 개선
🤖 442 in / 1759 out / 2201 total tokens 달력 셀의 터치 반응을 개선했다. 셀을 누를 때 배경색이 변하고 크기가 줄어드는 스케일 효과를 적용해 터치 피드백을 강화했다. 또한 선택된 날짜의 숫자 링에 팝업 애니메이션을 넣어 상태를 명확히 보여준다. css .dcell:active:not(.other-month) { back
로비 UI 직관화 및 경마 리플레이 버그 수정
🤖 1237 in / 1764 out / 3001 total tokens 통합 헤더를 도입해 버튼을 논리적으로 배치하고 공간을 확보했다. 게임 타입별 색상 바를 추가해 카드를 한눈에 식별하게 만들었고, 모바일에서 세로 카드 레이아웃을 적용해 스크롤 경험을 개선했다. 경마 리플레이 종료 후 채팅 오버레이가 닫히지 않던 버그를 수정했다. css .roo
로그인 페이지 UI 개선과 레이아웃 분리
🤖 779 in / 678 out / 1457 total tokens 로그인 페이지를 깔끔하게 다듬었다. 큰 입력창과 카드 레이아웃을 적용해서 시인성을 높였고, 전체적으로 더 모던한 느낌으로 변경했다. AppShell 컴포넌트를 새로 만들어서 레이아웃 로직을 분리했다. usePathname으로 현재 경로를 확인해서 로그인 페이지일 때는 Navbar를
v0.51.0: 캐시 UI 통합 완료
🤖 1283 in / 678 out / 1961 total tokens 지난 버전에서 구현해둔 캐시 시스템을 이제야 사용자에게 보여주기 시작했다. 기능만 있고 표시가 없으면 무용지물이니까. CacheStatus 컴포넌트를 ResultList에 추가했다. 오프라인일 땐 "캐시 데이터 사용"을 표시하고, 온라인일 땐 현재 캐시 크기를 보여준다. 사용자가
v0.51.0 캐시 UI 통합 및 오프라인 관리 기능 강화
🤖 1283 in / 1827 out / 3110 total tokens ResultList에 CacheStatus 컴포넌트를 배치해 캐시 사용 현황을 실시간으로 확인 가능하게 만들었다. 오프라인 상태에서는 캐시 사용 표시를, 온라인 상태에서는 캐시 크기를 표시하도록 로직을 수정했다. SearchOverlay에 캐시 삭제 버튼을 추가해 사용자가 직접
검색창 테두리 색상 변경으로 UX 개선
🤖 386 in / 1705 out / 2091 total tokens 검색창 테두리 색상 변경으로 UX 개선 BottomQuickBar 컴포넌트에서 검색창의 테두리 색상을 회색에서 파란색으로 변경하여 명확성을 높였다. 배경색도 회색 대신 흰색으로 바꿔 깔끔한 디자인을 적용했다. 사용자가 검색창을 인지하기 쉬워지도록 시각적 강조를 실시했다. tsx
검색창 버튼 스타일 다듬기
🤖 394 in / 721 out / 1115 total tokens BottomQuickBar 컴포넌트의 검색 버튼 스타일을 조정했다. py-3.5를 py-4로 늘려 버튼 높이에 여유를 주고, hover:shadow-md는 과한 피드백이라 제거했다. 단순한 패딩 변경이지만 버튼의 탭 영역이 넓어져 터치하기 편해졌다. tsx <button onC
검색창 버튼 스타일 디테일 보정
🤖 394 in / 2000 out / 2394 total tokens 버튼의 시각적 크기를 키우기 위해 패딩을 늘렸다. hover:shadow-md 효과와 불필요한 스타일 객체를 정리하여 코드를 깔끔하게 만들었다. 이제 버튼이 더 명확하게 보이고 터치하기 편해졌다. tsx className="w-full flex items-center gap-3
검색 기능 UI 구현 및 돋보기 아이콘 적용
🤖 384 in / 1388 out / 1772 total tokens AddressInput 컴포넌트에 검색 버튼을 추가하여 사용자 경험을 개선했습니다. lucide-react 라이브러리의 Search 아이콘을 import 하고, 버튼 클릭 시 검색 로직을 수행하도록 구현했습니다. 버튼의 스타일과 상호작용을 정밀하게 조정하여 깔끔한 디자인을 완성했습