[DB] Search, Upload 페이지 UI 리팩토링 및 전역 헤더 스타일 통일

[usn757]

📜 PR 내용 요약

search 및 visionUpload 페이지의 UI/UX 불일치 문제를 해결하고, 사이트 전반의 디자인 일관성을 확보하기 위한 리팩토링을 진행했습니다.

search 페이지의 불필요한 탭 UI를 제거하여 구조를 간소화했으며, visionUpload 페이지의 레이아웃과 스타일을 전면 재구성하여 search 페이지와 시각적으로 통일되도록 수정했습니다. 또한, header.css를 수정하여 모든 페이지에서 일관된 헤더 디자인이 표시되도록 개선했습니다.

before ->

after ->

---

⚒️ 작업 및 변경 내용 (상세하게)

1. search 페이지 UI 구조 간소화

• 배경: 기존 search 페이지는 향후 확장을 고려한 탭(Tab) 구조였으나, 현재는 단일 검색 기능만 사용되어 불필요한 UI 복잡성을 가지고 있었습니다.
• 변경 사항:
  • 탭 UI 관련 마크업(<ul>, .tab-content 등)을 모두 제거하고, 검색 필터와 결과 영역을 페이지의 기본 콘텐츠로 표시하도록 구조를 단순화했습니다.
  • 관련 CSS 코드(search.css, bootstrap-overrides.css)를 정리하여 코드베이스를 개선했습니다.
  • 영향 받는 파일: search.html, search.css, bootstrap-overrides.css

2. visionUpload 페이지 리팩토링 및 레이아웃 통일

• 배경: visionUpload 페이지는 독립적인 레이아웃과 스타일 규칙을 가지고 있어, search 페이지와 너비, 여백, 내부 컴포넌트 디자인이 모두 달라 이질적인 사용자 경험을 제공했습니다.
• 변경 사항:
  • 레이아웃 구조 변경: common.css의 <main> 태그 제약을 피하기 위해 구조를 변경하고, search 페이지와 동일한 반응형 너비(최대 1296px)를 갖도록 커스텀 컨테이너를 적용했습니다.
  • CSS 로드 방식 개선: 페이지 내 과도한 <style> 블록을 정리하고, bootstrap-overrides.css를 직접 링크하여 search 페이지와 동일한 디자인 테마(버튼, 폼 등)를 적용했습니다.
  • 내부 콘텐츠 정렬: 넓어진 컨테이너 안에서 alert 창과 form이 과도하게 늘어나는 것을 방지하기 위해, 내부 그리드(col-lg-8)를 추가하여 콘텐츠 너비를 적절히 제한했습니다.
  • 영향 받는 파일: visionUpload.html

3. 전역 헤더 스타일 불일치 문제 해결

• 배경: 페이지에 따라 헤더의 로고(PETTY)와 우측 상단 메뉴(프로필, 로그아웃 등)의 색상이 다르게 표시되는 문제가 있었습니다.
• 변경 사항:
  • 모든 페이지에 공통으로 적용되는 header.css의 스타일 규칙을 구체화했습니다.
  • 광범위한 header a 규칙을 삭제하고, .logo-container h1 a와 .account-btn-div a에 대한 개별 규칙을 정의하여 로고와 메뉴의 색상 및 호버 효과를 전역적으로 통일했습니다.
  • 영향 받는 파일: header.css

---

📚 기타 참고 사항

리뷰 포인트

• 시각적 통일성 검토: search.html과 visionUpload.html 두 페이지의 전체적인 레이아웃(너비, 여백)과 내부 컴포넌트(버튼, 폼, 안내창) 스타일이 의도대로 통일되었는지 확인 부탁드립니다.
• 헤더 일관성 검증: 모든 페이지에서 헤더의 로고와 메뉴 색상이 일관되게 표시되는지 확인이 필요합니다.
• 반응형 동작 확인: 브라우저 창 크기를 조절했을 때, 두 페이지의 반응형 동작이 이전보다 유사하게 느껴지는지, 그리고 레이아웃이 깨지지 않는지 확인해주시면 좋습니다.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.