From 1eab683f145295eb3dd9a5af5c9876bd46911acb Mon Sep 17 00:00:00 2001 From: usn757 Date: Sat, 7 Jun 2025 16:57:27 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[refactor]=20search=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=ED=83=AD=20UI=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EA=B0=84=EC=86=8C=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 기존 search 페이지는 향후 확장을 고려해 탭 구조로 설계되었으나, 현재는 단일 검색 기능만 사용하고 있어 불필요한 UI 복잡성을 야기하고 있었습니다. 이번 커밋을 통해 더 이상 사용하지 않는 탭 인터페이스를 제거하고 관련 코드를 정리하여 코드베이스를 개선하고 유지보수성을 높였습니다. 주요 변경 사항: - search.html: 탭 구조를 위한 마크업(.nav-tabs, .tab-content 등) 제거 및 콘텐츠 직접 표시 - search.css: 탭 UI에 사용되던 스타일 규칙 삭제 - bootstrap-overrides.css: 탭 관련 오버라이드 스타일 규칙 삭제 --- .../static/css/bootstrap-overrides.css | 23 -- src/main/resources/static/css/search.css | 27 -- src/main/resources/templates/search.html | 233 +++++++++--------- 3 files changed, 110 insertions(+), 173 deletions(-) diff --git a/src/main/resources/static/css/bootstrap-overrides.css b/src/main/resources/static/css/bootstrap-overrides.css index 11d0773..39091e2 100644 --- a/src/main/resources/static/css/bootstrap-overrides.css +++ b/src/main/resources/static/css/bootstrap-overrides.css @@ -160,29 +160,6 @@ box-shadow: 0 0 0 0.25rem rgba(var(--accent-color-rgb), .25); } -/* 네비게이션 탭 (Nav Tabs) */ -.nav-tabs { - --bs-nav-tabs-border-color: var(--input-border-color); - --bs-nav-tabs-link-hover-border-color: var(--input-border-color) var(--input-border-color) var(--point-color); - --bs-nav-tabs-link-active-color: var(--accent-color); - --bs-nav-tabs-link-active-bg: var(--card-bg-color); - --bs-nav-tabs-link-active-border-color: var(--input-border-color) var(--input-border-color) var(--card-bg-color); -} - -.nav-link { - color: var(--secondary-text-color); - font-family: 'HakgyoansimDunggeunmisoTTF-B', sans-serif; /* 탭 링크에도 폰트 적용 */ -} - -.nav-link:hover, .nav-link:focus { - color: var(--point-color); -} - -.nav-tabs .nav-link.active { - color: var(--accent-color); /* 활성 탭 텍스트 색상 명확히 */ - font-weight: bold; -} - /* 카드 (Cards) */ .card { diff --git a/src/main/resources/static/css/search.css b/src/main/resources/static/css/search.css index 90d48c9..6ff683a 100644 --- a/src/main/resources/static/css/search.css +++ b/src/main/resources/static/css/search.css @@ -19,31 +19,6 @@ color: var(--secondary-text-color); /* common.css 변수 사용 */ } -/* ========================================================================== - 탭 UI (직접 검색) - ========================================================================== */ -.nav-tabs { - border-bottom-color: var(--input-border-color); /* common.css 변수 */ -} -.nav-tabs .nav-link { - font-weight: bold; - border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; /* common.css 변수 */ - padding: 0.75rem 1.25rem; - background-color: transparent; - /* bootstrap-overrides.css 에서 :root 및 .nav-link 로 색상 관리 */ - /* border-color 는 bootstrap-overrides.css 의 --bs-nav-tabs-link-active-border-color 등 변수 설정 따름 */ -} -/* .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus handled by bootstrap-overrides.css */ -/* .nav-tabs .nav-link.active handled by bootstrap-overrides.css */ - -.tab-content > .tab-pane { - background-color: var(--card-bg-color); /* common.css 변수 */ - border: 1px solid var(--input-border-color); /* common.css 변수 */ - border-top: none; - padding: 1.5rem; - border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); /* common.css 변수 */ - box-shadow: var(--box-shadow-light); /* common.css 변수 */ -} /* ========================================================================== 직접 검색 필터 (폼 요소 공통 스타일) @@ -140,7 +115,6 @@ /* --- 직접 검색 결과 리스트 컨트롤 --- */ #resultControlsDirectSearch { - background-color: var(--bs-light-bg-subtle, var(--background-color)); /* common.css 변수 fallback */ padding: 1rem 1.5rem; border-radius: var(--border-radius-md); /* common.css 변수 */ margin-bottom: 1.5rem; @@ -158,7 +132,6 @@ font-size: 0.95em; padding: 0.5em 0.75em; color: var(--text-color); /* primary 버튼 텍스트 색상 */ - background-color: var(--accent-color); /* common.css 변수, Bootstrap primary 대신 테마색 사용 */ /* bootstrap-overrides.css의 --bs-primary 가 이미 --accent-color로 설정되어 있다면, badge bg-primary로도 충분 */ } diff --git a/src/main/resources/templates/search.html b/src/main/resources/templates/search.html index 33f8002..525cbd8 100644 --- a/src/main/resources/templates/search.html +++ b/src/main/resources/templates/search.html @@ -19,148 +19,135 @@
- -
-
-
-
-
-

조건 검색

-
-
-
- -
-
-
-
- - -
-
- - -
+
+
+
+
+

조건 검색

+ +
+
+ +
+
+
+
+ +
- -
-
- - -
-
- + -
-
-
- -
- - - - - - - + +
+
+ +
-
-
-
- - -
-
-
- - +
+
-
From 9a4c40eedf9c4fb0322a19e1e23625f0e783aded Mon Sep 17 00:00:00 2001 From: usn757 Date: Sat, 7 Jun 2025 21:27:23 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[refactor]=20visionUpload=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20?= =?UTF-8?q?=EB=B0=8F=20=EC=A0=84=EC=97=AD=20=ED=97=A4=EB=8D=94=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 기존 `visionUpload` 페이지가 `search` 등 다른 페이지와 레이아웃 너비, 헤더 색상, 컴포넌트 디자인 등에서 일관성이 부족했던 문제를 해결했습니다. --- src/main/resources/static/css/header.css | 41 ++- .../resources/templates/visionUpload.html | 250 +++--------------- 2 files changed, 77 insertions(+), 214 deletions(-) diff --git a/src/main/resources/static/css/header.css b/src/main/resources/static/css/header.css index 25614bd..e2a8790 100644 --- a/src/main/resources/static/css/header.css +++ b/src/main/resources/static/css/header.css @@ -31,25 +31,50 @@ header { } header h1 { - color: var(--accent-color); font-size: 1.8em; margin: 0; } -header a { +/* 1. 로고(PETTY) 링크 스타일 */ +.logo-container h1 a { + color: var(--accent-color); /* common.css에 정의된 분홍색 변수 */ + text-decoration: none; + /* 로고는 호버 효과가 없어야 하므로 padding, background 등을 초기화합니다. */ + padding: 0; + border-radius: 0; +} +.logo-container h1 a:hover { + background-color: transparent; /* 호버 시 배경색 변경 없음 */ + color: var(--accent-color); /* 호버 시 색상 변경 없음 */ +} + + +/* 2. 우측 계정 메뉴(프로필, 로그아웃) 스타일 */ +.account-btn-div a { + color: var(--text-color); /* common.css에 정의된 기본 텍스트 색상(갈색 계열) */ text-decoration: none; - color: var(--secondary-text-color); font-weight: bold; + font-size: 1em; /* 폰트 크기 통일 */ padding: 8px 12px; border-radius: var(--border-radius-md); - transition: background-color 0.3s ease, color 0.3s ease; + transition: color 0.3s ease; } +.account-btn-div a:hover { + color: var(--accent-color); /* 호버 시 분홍색으로 변경 */ + background-color: transparent; /* 호버 시 배경색은 없도록 처리 */ +} + -header a:hover { - background-color: var(--point-color); - color: white; +/* 3. 사용자 이름 텍스트 스타일 */ +#userInfo { + color: var(--text-color); + font-weight: bold; + font-size: 1em; + padding: 8px 12px; /* 링크와 여백을 맞추기 위해 추가 */ } + + /* Menu Icon (Hamburger) Styles */ .menu-icon { width: 30px; @@ -90,7 +115,7 @@ header a:hover { font-size: 1.5em; } - header div[style] { /* 로그인/회원가입 메뉴 숨김 */ + header .account-btn-div { /* 로그인/회원가입 메뉴를 감싸는 div를 숨김 */ display: none !important; } } diff --git a/src/main/resources/templates/visionUpload.html b/src/main/resources/templates/visionUpload.html index b88d3fe..85787c9 100644 --- a/src/main/resources/templates/visionUpload.html +++ b/src/main/resources/templates/visionUpload.html @@ -5,209 +5,68 @@ 동물 이미지 분석 - - - + + + -
-
- - - -
-
- +
+
+
+
+
🎉 안녕하세요, 님!
- 오늘 회 더 분석하실 수 있습니다. - (총 회 중 회 사용됨) - + 오늘 회 더 분석하실 수 있습니다. + (총 회 중 회 사용됨) + - - 오늘의 분석 한도(회)를 모두 사용하셨습니다.
- 내일 다시 이용해주세요! 🐾 - + + 오늘의 분석 한도(회)를 모두 사용하셨습니다.
+ 내일 다시 이용해주세요! 🐾 +
-
Vision 분석 기능을 이용하려면 로그인이 필요합니다.
@@ -216,24 +75,22 @@

🐾 반려동물 정보를 입력하세요

-
+ th:disabled="${!canUse}" required/>
+ th:disabled="${!canUse}" required/> ⚠️ JPEG, PNG 형식만 지원합니다 (최대 5MB)
-
- - +
- -
+
+ + +