fix: 다크모드 개선 및 기타 버그 수정

[seungwoo505]

📝 변경 사항

1. 다크 모드에 대해 전면 개편을 했습니다.
2. 그래서 파일이 좀 많아요 ㅠㅠ

🔍 변경 사항 세부 설명

🕵️‍♀️ 요청사항

📷 스크린샷 (선택)

• 다크 모드 개편 예시

• 바삭 스코어 점수 오류 수정

[gemini-code-assist]

Summary of Changes

Hello @seungwoo505, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers a significant enhancement to the application's user interface by completely overhauling the dark mode implementation. It transitions from static color definitions to a dynamic, variable-based system using Tailwind CSS, ensuring a more adaptable and consistent visual experience. Beyond the extensive dark mode improvements, the PR also includes a crucial bug fix for the 'Basak Score' display, ensuring accurate user information.

Highlights

• Comprehensive Dark Mode Refactoring: The application's dark mode implementation underwent a major refactoring, replacing numerous hardcoded color values with dynamic Tailwind CSS variables. This ensures a more consistent and easily maintainable visual experience across different themes.
• Basak Score Display Fix: An issue where the 'Basak Score' display was incorrect has been resolved, specifically by ensuring the '0' starting point is properly rendered in the score range.
• Standardized Modal Styling: Styling for various modals, including nickname change, password change, phone change, confirmation, favorite list, privacy policy, service guide, social login, and theme selection, has been standardized to align with the new dark mode variables, improving UI consistency.
• Theme-Aware Button Styling: All primary and secondary buttons across the application now utilize theme-aware color variables, ensuring they seamlessly adapt their appearance based on the selected light or dark mode.
• Improved History Card and Detail Modal UI: The appearance of history cards and their corresponding detail modals has been enhanced to provide better readability and visual integration within the dark mode environment.
• Admin Panel Dark Mode Enhancements: Components within the admin panel, such as blog management and dispute resolution interfaces, have received dark mode styling improvements, contributing to a cohesive user experience for administrators.
• Navigation and Footer Theme Integration: The header, footer, and side navigation menus have been updated to leverage the new dark mode theme variables, ensuring a consistent visual theme throughout the application's navigation elements.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이 PR은 다크 모드 지원을 위한 대규모 리팩토링과 일부 버그 수정을 포함하고 있습니다. 전반적으로 하드코딩된 색상 값을 Tailwind CSS의 시맨틱 변수로 대체하여 유지보수성을 크게 향상시켰습니다. 특히, 기존의 커스텀 테마 프로바이더를 표준 라이브러리인 next-themes로 교체한 것은 매우 훌륭한 결정입니다. 코드 변경 사항은 대부분 정확하고 일관성 있게 적용되었습니다. 다만, 여러 컴포넌트에서 Tailwind CSS 클래스명에 오타가 발견되어 스타일이 깨질 수 있는 문제가 있습니다. 해당 부분들에 대한 수정을 제안드렸습니다. 또한, ScoreCard.tsx의 버튼 클릭 버그 수정과 SideMenu.tsx의 활성 메뉴 로직 개선 등 좋은 변경 사항들도 확인했습니다.

[yshls]

마지막까지 고생하셨습니다!