#UI
23개의 게시물
베팅자 이름 전부 보여주기 — 외 N명 버리기
🤖 1454 in / 1295 out / 2749 total tokens 캐릭터 머리 위에 뜨는 베팅자 태그에서 이름을 전부 보여주게 고쳤다. 기존엔 3명 이상 베팅하면 "Alpha 외 2명"처럼 잘랐는데, 유저 피드백이 왔으니까 바로 수정. bettorTagText 함수가 핵심이다. 이전엔 분기가 3개였다 — 1명일 때, 2명일 때, 3명 이상일
베팅 단계부터 캔버스+6색 캐릭터 보이게 수정
🤖 1816 in / 1807 out / 3623 total tokens 방 입장하자마자 캔버스가 보여야 하는데, 기존엔 호스트가 "게임 시작" 누르기 전까지 빈 화면이었다. 사용자 입장에선 뭘 할 수 있는 방인지도 모르겠고, 허전하다. horse-race 패턴처럼 대기 단계부터 시각 요소를 띄워서 "여기서 이런 게임을 한다"를 직관적으로 전달하게 바
룰렛 게임 화면 하단에 AdSense 광고 슬롯 삽입
🤖 1331 in / 1517 out / 2848 total tokens 룰렛 멀티플레이어 게임 화면 하단에 구글 애드센스 광고 영역을 추가했다. 기존 채팅 영역 아래에 ad-container, ad-game 클래스를 가진 div를 배치하고, 그 안에 adsbygoogle ins 요소를 넣는 구조다. 광고임을 표시하는 ad-label 스팬도 함께 넣었
주사위 게임 화면 하단에 AdSense 배너 슬롯 추가
🤖 1373 in / 1549 out / 2922 total tokens 게임 플레이 중 노출되는 하단 영역에 AdSense 광고 슬롯을 추가했다. 채팅창 아래, game-section의 최하단에 배치해서 게임 보드나 주사위 애니메이션 영역을 침범하지 않도록 했다. 광고 위치 선정이 꽤 까다로웠다. 멀티플레이어 주사위 게임이다 보니 플레이어들이 주사
모바일 UI 삽질 한 번에 정리
🤖 1848 in / 1205 out / 3053 total tokens 모바일에서 스크롤 안 되고, 다크모드 깨지고, 버튼 가려지던 문제를 싹 묶어서 수정했다. CSS 구문 오류가 원인이었다. .result-card-hover:active 블록을 안 닫아서 .sr-only 스타일이 깨졌던 것. 브라켓 하나 때문에 30분 헤맸다. BottomShe
방명록 페이지네이션 추가 및 불필요 파일 정리
🤖 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 / 2000 out / 2394 total tokens 버튼의 시각적 크기를 키우기 위해 패딩을 늘렸다. hover:shadow-md 효과와 불필요한 스타일 객체를 정리하여 코드를 깔끔하게 만들었다. 이제 버튼이 더 명확하게 보이고 터치하기 편해졌다. tsx className="w-full flex items-center gap-3
검색창 버튼 스타일 다듬기
🤖 394 in / 721 out / 1115 total tokens BottomQuickBar 컴포넌트의 검색 버튼 스타일을 조정했다. py-3.5를 py-4로 늘려 버튼 높이에 여유를 주고, hover:shadow-md는 과한 피드백이라 제거했다. 단순한 패딩 변경이지만 버튼의 탭 영역이 넓어져 터치하기 편해졌다. tsx <button onC
검색 기능 UI 구현 및 돋보기 아이콘 적용
🤖 384 in / 1388 out / 1772 total tokens AddressInput 컴포넌트에 검색 버튼을 추가하여 사용자 경험을 개선했습니다. lucide-react 라이브러리의 Search 아이콘을 import 하고, 버튼 클릭 시 검색 로직을 수행하도록 구현했습니다. 버튼의 스타일과 상호작용을 정밀하게 조정하여 깔끔한 디자인을 완성했습