Skip to content

[Feat] : 네온 나이트 다크 테마 적용 (#179)#180

Merged
GulSam00 merged 3 commits intodevelopfrom
feat/179-neonNightTheme
Apr 5, 2026
Merged

[Feat] : 네온 나이트 다크 테마 적용 (#179)#180
GulSam00 merged 3 commits intodevelopfrom
feat/179-neonNightTheme

Conversation

@GulSam00
Copy link
Copy Markdown
Owner

@GulSam00 GulSam00 commented Apr 5, 2026

User description

📌 PR 제목

[Feat] : 네온 나이트 다크 테마 적용

📌 변경 사항

  • 다크 모드 네온 나이트 테마 전면 적용 (네온 초록 accent + 네온 핑크 secondary + 짙은 남색 배경)
  • 라이트/다크 모드 CSS 변수 체계 정비 (globals.css)
  • Header, Footer, Sidebar, 모달 등 전체 컴포넌트 다크 모드 네온 스타일 적용
  • 검색 Tabs 다크 모드 네온 글로우 효과 추가 (HomePage.tsx)
  • 버전 2.4.0 업데이트 및 changelog 추가
  • tag 크론 작업 일시 정지

💬 추가 참고 사항


PR Type

Enhancement


Description

  • Implement neon night dark theme with neon green accent and neon pink secondary colors

  • Refactor CSS variables system for light/dark mode consistency using oklch color space

  • Add theme toggle functionality to header with next-themes integration

  • Update version to 2.4.0 and add changelog entry

  • Pause tag cronjob workflow temporarily

  • Apply neon glow effects to search tabs and update component styling


Diagram Walkthrough

flowchart LR
  A["CSS Variables<br/>Light/Dark Mode"] -->|"oklch colors"| B["Neon Night Theme<br/>Green + Pink"]
  B -->|"apply to"| C["Components<br/>Header/Footer/Sidebar"]
  C -->|"add glow effects"| D["Search Tabs<br/>& UI Elements"]
  E["Theme Toggle"] -->|"next-themes"| F["Header Button"]
  F -->|"switch"| B
  G["Version 2.4.0"] -->|"update"| H["Package & Changelog"]
Loading

File Walkthrough

Relevant files
Enhancement
13 files
globals.css
Refactor CSS variables for neon night theme                           
+46/-48 
Header.tsx
Add theme toggle and expandable button UI                               
+94/-17 
layout.tsx
Integrate ThemeProvider and update styling                             
+10/-13 
HomePage.tsx
Add neon glow effects to search tabs                                         
+16/-4   
Footer.tsx
Add border styling to footer                                                         
+1/-1     
Sidebar.tsx
Update logout button dark mode styling                                     
+5/-1     
CheckInModal.tsx
Update button colors to use accent theme                                 
+2/-2     
MessageDialog.tsx
Replace hardcoded blue with accent color                                 
+2/-2     
StaticLoading.tsx
Update loading overlay background color                                   
+1/-1     
ThumbUpModal.tsx
Replace gray text with muted-foreground                                   
+1/-1     
MusicCard.tsx
Update hover colors to use accent theme                                   
+3/-3     
JpnArtistList.tsx
Add dark mode hover styling to button                                       
+4/-1     
DeleteModal.tsx
Replace hardcoded gray with muted-foreground                         
+1/-1     
Configuration changes
2 files
package.json
Update version to 2.4.0                                                                   
+1/-1     
tagging_song.yml
Pause tag cronjob workflow execution                                         
+3/-3     
Documentation
1 files
changelog.json
Add version 2.4.0 changelog entry                                               
+4/-0     
Miscellaneous
1 files
sitemap-0.xml
Update sitemap lastmod timestamp                                                 
+1/-1     

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
singcode Ready Ready Preview, Comment Apr 5, 2026 4:38pm

@GulSam00
Copy link
Copy Markdown
Owner Author

GulSam00 commented Apr 5, 2026

/describe

@GulSam00
Copy link
Copy Markdown
Owner Author

GulSam00 commented Apr 5, 2026

/review

@GulSam00
Copy link
Copy Markdown
Owner Author

GulSam00 commented Apr 5, 2026

/improve

@qodo-code-review
Copy link
Copy Markdown

qodo-code-review bot commented Apr 5, 2026

Code Review by Qodo

Grey Divider

New Review Started

This review has been superseded by a new analysis

Grey Divider

ⓘ The new review experience is currently in Beta. Learn more

Grey Divider

Qodo Logo

@qodo-code-review
Copy link
Copy Markdown

Review Summary by Qodo

Implement neon night dark theme with enhanced UI styling and theme toggle

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Implemented neon night dark theme with neon green accent and neon pink secondary colors
• Refactored CSS variables system for light/dark mode consistency using oklch color space
• Added theme toggle functionality in header with next-themes integration
• Enhanced UI components with dark mode styling and glow effects for search tabs
• Updated version to 2.4.0 and added changelog entry
• Paused tag cronjob workflow temporarily
Diagram
flowchart LR
  A["CSS Variables<br/>Light/Dark Mode"] -->|"Neon Green Accent<br/>Neon Pink Secondary"| B["Dark Theme<br/>Styling"]
  C["Header Component"] -->|"Theme Toggle"| D["next-themes<br/>Integration"]
  B --> E["Updated Components<br/>Header, Footer, Sidebar"]
  E --> F["Enhanced Visual<br/>Glow Effects"]
  G["Version 2.4.0"] -->|"Changelog"| H["Release Notes"]
  I["Tagging Workflow"] -->|"Paused"| J["Cron Job"]
Loading

Grey Divider

File Changes

1. apps/web/src/globals.css ✨ Enhancement +46/-48

Refactored CSS variables for neon night theme

apps/web/src/globals.css


2. apps/web/src/Header.tsx ✨ Enhancement +94/-17

Added theme toggle and expandable button UI

apps/web/src/Header.tsx


3. apps/web/src/app/layout.tsx ✨ Enhancement +10/-13

Integrated next-themes provider for theme management

apps/web/src/app/layout.tsx


View more (14)
4. apps/web/src/app/search/HomePage.tsx ✨ Enhancement +16/-4

Added dark mode glow effects to search tabs

apps/web/src/app/search/HomePage.tsx


5. apps/web/src/Footer.tsx ✨ Enhancement +1/-1

Added border styling for dark mode consistency

apps/web/src/Footer.tsx


6. apps/web/src/Sidebar.tsx ✨ Enhancement +5/-1

Enhanced button styling for dark mode hover states

apps/web/src/Sidebar.tsx


7. apps/web/src/app/search/MusicCard.tsx ✨ Enhancement +3/-3

Updated hover colors to use accent color scheme

apps/web/src/app/search/MusicCard.tsx


8. apps/web/src/components/CheckInModal.tsx ✨ Enhancement +2/-2

Applied dark mode styling to check-in modal

apps/web/src/components/CheckInModal.tsx


9. apps/web/src/components/MessageDialog.tsx ✨ Enhancement +2/-2

Updated info variant to use accent color

apps/web/src/components/MessageDialog.tsx


10. apps/web/src/components/StaticLoading.tsx ✨ Enhancement +1/-1

Changed loading overlay to use background variable

apps/web/src/components/StaticLoading.tsx


11. apps/web/src/components/ThumbUpModal.tsx ✨ Enhancement +1/-1

Applied muted-foreground to text styling

apps/web/src/components/ThumbUpModal.tsx


12. apps/web/src/app/search/JpnArtistList.tsx ✨ Enhancement +4/-1

Enhanced button styling for dark mode

apps/web/src/app/search/JpnArtistList.tsx


13. apps/web/src/app/info/save/DeleteModal.tsx ✨ Enhancement +1/-1

Updated text color to use semantic color variables

apps/web/src/app/info/save/DeleteModal.tsx


14. apps/web/package.json ⚙️ Configuration changes +1/-1

Bumped version to 2.4.0

apps/web/package.json


15. apps/web/public/changelog.json 📝 Documentation +4/-0

Added version 2.4.0 changelog entry

apps/web/public/changelog.json


16. .github/workflows/tagging_song.yml ⚙️ Configuration changes +3/-3

Temporarily disabled tagging song cronjob

.github/workflows/tagging_song.yml


17. apps/web/public/sitemap-0.xml Miscellaneous +1/-1

Updated sitemap timestamp

apps/web/public/sitemap-0.xml


Grey Divider

Qodo Logo

@qodo-code-review
Copy link
Copy Markdown

qodo-code-review bot commented Apr 5, 2026

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (2) 🎨 UX Issues (0)

Grey Divider


Action required

1. Header exposes Light Mode toggle 📎 Requirement gap ≡ Correctness
Description
The updated Header adds a prominent theme toggle that enables switching to Light Mode, so Light
Mode is not removed/minimized as required. This undermines the requirement that the Neon/Night
experience be primarily dark by default with Light Mode not prominently available.
Code

apps/web/src/Header.tsx[R100-113]

+        <ExpandableButton
+          buttonKey="theme"
+          expanded={expanded}
+          label={theme === 'dark' ? '라이트 모드' : '다크 모드'}
+          icon={
+            <span className="relative h-4 w-4">
+              <Sun className="absolute h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+              <Moon className="absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+            </span>
+          }
+          onClick={() =>
+            handleExpandableClick('theme', () => setTheme(theme === 'dark' ? 'light' : 'dark'))
+          }
+        />
Evidence
PR Compliance ID 1 requires Light Mode to be removed or minimized (not prominently accessible). The
new theme button in Header explicitly toggles between light and dark via setTheme(...),
making Light Mode directly accessible in primary navigation.

Default theme is Dark Mode; Light Mode removed/minimized
apps/web/src/Header.tsx[100-113]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The header now provides a direct Light Mode toggle (`setTheme(... 'light' ...)`), which conflicts with the requirement that Light Mode be removed or minimized.

## Issue Context
Dark Mode is set as default in `ThemeProvider`, but the UI still exposes a prominent toggle that enables Light Mode.

## Fix Focus Areas
- apps/web/src/Header.tsx[100-113]
- apps/web/src/app/layout.tsx[134-140]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


2. Workflow has no triggers 🐞 Bug ☼ Reliability
Description
.github/workflows/tagging_song.yml now has an empty on: block (only comments), meaning the
workflow has no configured events and cannot run. This breaks both scheduled tagging and manual
dispatch for the tagging job.
Code

.github/workflows/tagging_song.yml[R3-6]

on:
-  schedule:
-    - cron: "0 14 * * *" # 한국 시간 23:00 실행 (UTC+9 → UTC 14:00)
-  workflow_dispatch:
+  # schedule:
+  #   - cron: "0 14 * * *" # 한국 시간 23:00 실행 (UTC+9 → UTC 14:00)
+  # workflow_dispatch:
Evidence
The workflow defines on: but all actual trigger events (schedule, workflow_dispatch) are
commented out, leaving no events configured. Other workflows in the same repo keep
schedule/workflow_dispatch enabled under on:, indicating this file is now uniquely
non-triggerable.

.github/workflows/tagging_song.yml[1-7]
.github/workflows/crawl_recent_tj.yml[1-7]
.github/workflows/verify_ky_youtube.yml[1-10]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`.github/workflows/tagging_song.yml` currently has `on:` with no enabled events (only commented lines), so the workflow cannot be triggered.

## Issue Context
The PR description mentions pausing the tagging cron job. Pausing the schedule is fine, but the workflow file still must define at least one trigger event to remain valid/runnable (e.g., keep `workflow_dispatch` so it can be run manually).

## Fix Focus Areas
- .github/workflows/tagging_song.yml[1-7]

### Suggested change
Re-enable at least one trigger, for example:
```yml
on:
 workflow_dispatch:
 # schedule:
 #   - cron: "0 14 * * *"
```
(or re-enable `schedule` too if the cron should continue).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools



Remediation recommended

3. Buttons missing neon glow 📎 Requirement gap ≡ Correctness
Description
The PR adds a glow effect to active tabs, but the newly/updated button styling only changes hover
background/text without adding any neon glow (e.g., accent-colored shadow) on buttons. This does not
meet the requirement to add glow to both buttons and active tabs.
Code

apps/web/src/Header.tsx[R37-46]

+    <Button
+      variant="outline"
+      size={isExpanded ? 'default' : 'icon'}
+      className="dark:hover:bg-primary dark:hover:text-primary-foreground transition-all"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {icon}
+      {isExpanded && label}
+    </Button>
Evidence
PR Compliance ID 5 requires glow on buttons and active tabs. Active tabs get a glow via
shadow-(--glow-accent), but the updated button styling shown in ExpandableButton only applies
hover color changes and no glow/shadow tied to the neon tokens.

Glow effect added to buttons and active tabs
apps/web/src/app/search/HomePage.tsx[180-186]
apps/web/src/Header.tsx[37-46]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Glow is implemented for active tabs, but the updated buttons do not add an accent/secondary glow effect (e.g., `box-shadow`) on hover/active.

## Issue Context
The theme defines `--glow-accent`/`--glow-secondary`, and tabs use it, but buttons like `ExpandableButton` only change hover background/text.

## Fix Focus Areas
- apps/web/src/Header.tsx[37-46]
- apps/web/src/Sidebar.tsx[142-146]
- apps/web/src/app/search/JpnArtistList.tsx[41-44]
- apps/web/src/globals.css[111-112]
- apps/web/src/globals.css[149-150]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

ⓘ The new review experience is currently in Beta. Learn more

Grey Divider

Qodo Logo

@qodo-code-review
Copy link
Copy Markdown

qodo-code-review bot commented Apr 5, 2026

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📎 Requirement gaps (5) 🎨 UX Issues (0)

Grey Divider


Action required

1. --primary not neon green 📎 Requirement gap ≡ Correctness ⭐ New
Description
In dark mode, --primary is set to oklch(0.9 0 0) instead of the required primary accent
oklch(0.75 0.2 145). Components that use bg-primary (e.g., default shadcn buttons) will not
reflect the specified neon primary accent globally.
Code

apps/web/src/globals.css[R117-126]

+  --background: oklch(0.15 0.01 260);
+  --foreground: oklch(0.9 0 0);
+  --card: oklch(0.2 0.01 260);
+  --card-foreground: oklch(0.9 0 0);
+  --popover: oklch(0.2 0.01 260);
+  --popover-foreground: oklch(0.9 0 0);
+  --primary: oklch(0.9 0 0);
+  --primary-foreground: oklch(0.15 0.01 260);
+  --secondary: oklch(0.65 0.2 350); /* 네온 핑크 */
+  --secondary-foreground: oklch(0.95 0 0);
Evidence
The checklist specifies exact global theme tokens for primary/secondary/background. The PR updates
--background and --secondary correctly, but sets --primary to a neutral value rather than the
specified neon primary accent.

Apply Specified Neon Theme Color Tokens (Primary/Secondary/Background)
apps/web/src/globals.css[117-130]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Dark theme `--primary` is not set to the required neon primary accent (`oklch(0.75 0.2 145)`), so global primary styling will not match the neon spec.

## Issue Context
The compliance spec requires: primary accent `oklch(0.75 0.2 145)`, secondary `oklch(0.65 0.2 350)`, background `oklch(0.15 0.01 260)` applied globally.

## Fix Focus Areas
- apps/web/src/globals.css[117-130]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


2. Buttons missing glow effect 📎 Requirement gap ≡ Correctness ⭐ New
Description
Updated buttons (e.g., the new ExpandableButton and other outline buttons) add hover color changes
but do not add a glow (box-shadow/filter) in active/hover states. This falls short of the
requirement that buttons (in addition to active tabs) display a subtle neon glow.
Code

apps/web/src/Header.tsx[R37-46]

+    <Button
+      variant="outline"
+      size={isExpanded ? 'default' : 'icon'}
+      className="dark:hover:bg-primary dark:hover:text-primary-foreground transition-all"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {icon}
+      {isExpanded && label}
+    </Button>
Evidence
The checklist requires subtle glow effects on buttons and active tabs. While a glow variable is
introduced and active tabs apply a glow shadow, the newly/modified button classes only change
background/text on hover and do not apply any glow shadow/filter.

Add Subtle Glow Effects to Buttons and Active Tabs
apps/web/src/Header.tsx[37-46]
apps/web/src/Sidebar.tsx[142-146]
apps/web/src/app/search/JpnArtistList.tsx[41-44]
apps/web/src/globals.css[149-155]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Buttons updated/introduced in this PR do not apply a neon glow in hover/active/selected states (only background/text changes).

## Issue Context
Compliance requires subtle glow effects on both buttons and active tabs. Glow tokens exist (`--glow-accent`, `--glow-secondary`) but are not applied to buttons.

## Fix Focus Areas
- apps/web/src/Header.tsx[37-46]
- apps/web/src/Sidebar.tsx[142-146]
- apps/web/src/app/search/JpnArtistList.tsx[41-44]
- apps/web/src/globals.css[149-155]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


3. Workflow triggers removed 🐞 Bug ☼ Reliability ⭐ New
Description
.github/workflows/tagging_song.yml now has an on: key with no actual events (only comments), so
the workflow has no valid trigger and will be rejected/disabled by GitHub Actions. This stops the
scheduled/manual song-tagging automation entirely.
Code

.github/workflows/tagging_song.yml[R3-6]

on:
-  schedule:
-    - cron: "0 14 * * *" # 한국 시간 23:00 실행 (UTC+9 → UTC 14:00)
-  workflow_dispatch:
+  # schedule:
+  #   - cron: "0 14 * * *" # 한국 시간 23:00 실행 (UTC+9 → UTC 14:00)
+  # workflow_dispatch:
Evidence
The workflow’s on: section contains only commented-out entries, unlike other workflows in the repo
that define real triggers under on: (e.g., schedule, workflow_dispatch). With no event
configured under on:, the tagging workflow cannot be triggered.

.github/workflows/tagging_song.yml[1-7]
.github/workflows/crawl_recent_tj.yml[1-7]
.github/workflows/verify_ky_youtube.yml[1-7]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`.github/workflows/tagging_song.yml` has an `on:` section with no actual triggers (only comments). GitHub Actions workflows must declare at least one event trigger; otherwise the workflow is invalid/disabled and will never run.

## Issue Context
Other workflows in `.github/workflows/` define triggers under `on:` (e.g., `schedule`, `workflow_dispatch`). This file should follow the same structure even if the cron needs to be paused.

## Fix Focus Areas
- .github/workflows/tagging_song.yml[1-7]

## Suggested fix
If you want to pause the cron but keep the workflow valid, restore at least `workflow_dispatch:` under `on:` and keep `schedule:` commented out. If you want it completely disabled, keep `workflow_dispatch:` but gate execution (e.g., job-level `if: false`) so the YAML stays valid.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


View more (2)
4. Header exposes Light Mode toggle 📎 Requirement gap ≡ Correctness
Description
The updated Header adds a prominent theme toggle that enables switching to Light Mode, so Light
Mode is not removed/minimized as required. This undermines the requirement that the Neon/Night
experience be primarily dark by default with Light Mode not prominently available.
Code

apps/web/src/Header.tsx[R100-113]

+        <ExpandableButton
+          buttonKey="theme"
+          expanded={expanded}
+          label={theme === 'dark' ? '라이트 모드' : '다크 모드'}
+          icon={
+            <span className="relative h-4 w-4">
+              <Sun className="absolute h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+              <Moon className="absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+            </span>
+          }
+          onClick={() =>
+            handleExpandableClick('theme', () => setTheme(theme === 'dark' ? 'light' : 'dark'))
+          }
+        />
Evidence
PR Compliance ID 1 requires Light Mode to be removed or minimized (not prominently accessible). The
new theme button in Header explicitly toggles between light and dark via setTheme(...),
making Light Mode directly accessible in primary navigation.

Default theme is Dark Mode; Light Mode removed/minimized
apps/web/src/Header.tsx[100-113]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The header now provides a direct Light Mode toggle (`setTheme(... 'light' ...)`), which conflicts with the requirement that Light Mode be removed or minimized.
## Issue Context
Dark Mode is set as default in `ThemeProvider`, but the UI still exposes a prominent toggle that enables Light Mode.
## Fix Focus Areas
- apps/web/src/Header.tsx[100-113]
- apps/web/src/app/layout.tsx[134-140]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


5. Workflow has no triggers 🐞 Bug ☼ Reliability
Description
.github/workflows/tagging_song.yml now has an empty on: block (only comments), meaning the
workflow has no configured events and cannot run. This breaks both scheduled tagging and manual
dispatch for the tagging job.
Code

.github/workflows/tagging_song.yml[R3-6]

on:
-  schedule:
-    - cron: "0 14 * * *" # 한국 시간 23:00 실행 (UTC+9 → UTC 14:00)
-  workflow_dispatch:
+  # schedule:
+  #   - cron: "0 14 * * *" # 한국 시간 23:00 실행 (UTC+9 → UTC 14:00)
+  # workflow_dispatch:
Evidence
The workflow defines on: but all actual trigger events (schedule, workflow_dispatch) are
commented out, leaving no events configured. Other workflows in the same repo keep
schedule/workflow_dispatch enabled under on:, indicating this file is now uniquely
non-triggerable.

.github/workflows/tagging_song.yml[1-7]
.github/workflows/crawl_recent_tj.yml[1-7]
.github/workflows/verify_ky_youtube.yml[1-10]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`.github/workflows/tagging_song.yml` currently has `on:` with no enabled events (only commented lines), so the workflow cannot be triggered.
## Issue Context
The PR description mentions pausing the tagging cron job. Pausing the schedule is fine, but the workflow file still must define at least one trigger event to remain valid/runnable (e.g., keep `workflow_dispatch` so it can be run manually).
## Fix Focus Areas
- .github/workflows/tagging_song.yml[1-7]
### Suggested change
Re-enable at least one trigger, for example:

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools



Remediation recommended

6. Theme toggle enables light mode 📎 Requirement gap ⚙ Maintainability ⭐ New
Description
Header adds a prominent theme toggle that switches between dark and light, meaning light mode
remains a standard, easily accessible option. This conflicts with the requirement to remove or
clearly minimize light mode while defaulting to Neon Night (dark).
Code

apps/web/src/Header.tsx[R100-112]

+        <ExpandableButton
+          buttonKey="theme"
+          expanded={expanded}
+          label={theme === 'dark' ? '라이트 모드' : '다크 모드'}
+          icon={
+            <span className="relative h-4 w-4">
+              <Sun className="absolute h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+              <Moon className="absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+            </span>
+          }
+          onClick={() =>
+            handleExpandableClick('theme', () => setTheme(theme === 'dark' ? 'light' : 'dark'))
+          }
Evidence
The checklist requires dark mode as the default and light mode removed/minimized. The new header UI
includes a dedicated button that explicitly toggles to light, keeping light mode as a first-class
option.

Default to Neon Night (Dark) Theme; Remove/Minimize Light Mode
apps/web/src/Header.tsx[100-112]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The header exposes a direct `dark` ↔ `light` toggle, so light mode remains a primary option rather than removed/minimized.

## Issue Context
Compliance requires Neon Night (dark) as the default experience and light mode removed or clearly minimized.

## Fix Focus Areas
- apps/web/src/Header.tsx[100-112]
- apps/web/src/app/layout.tsx[134-140]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


7. Buttons missing neon glow 📎 Requirement gap ≡ Correctness
Description
The PR adds a glow effect to active tabs, but the newly/updated button styling only changes hover
background/text without adding any neon glow (e.g., accent-colored shadow) on buttons. This does not
meet the requirement to add glow to both buttons and active tabs.
Code

apps/web/src/Header.tsx[R37-46]

+    <Button
+      variant="outline"
+      size={isExpanded ? 'default' : 'icon'}
+      className="dark:hover:bg-primary dark:hover:text-primary-foreground transition-all"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {icon}
+      {isExpanded && label}
+    </Button>
Evidence
PR Compliance ID 5 requires glow on buttons and active tabs. Active tabs get a glow via
shadow-(--glow-accent), but the updated button styling shown in ExpandableButton only applies
hover color changes and no glow/shadow tied to the neon tokens.

Glow effect added to buttons and active tabs
apps/web/src/app/search/HomePage.tsx[180-186]
apps/web/src/Header.tsx[37-46]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Glow is implemented for active tabs, but the updated buttons do not add an accent/secondary glow effect (e.g., `box-shadow`) on hover/active.
## Issue Context
The theme defines `--glow-accent`/`--glow-secondary`, and tabs use it, but buttons like `ExpandableButton` only change hover background/text.
## Fix Focus Areas
- apps/web/src/Header.tsx[37-46]
- apps/web/src/Sidebar.tsx[142-146]
- apps/web/src/app/search/JpnArtistList.tsx[41-44]
- apps/web/src/globals.css[111-112]
- apps/web/src/globals.css[149-150]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

ⓘ The new review experience is currently in Beta. Learn more

Grey Divider

Qodo Logo

@qodo-code-review
Copy link
Copy Markdown

PR Description updated to latest commit (d5ea79e)

@GulSam00 GulSam00 merged commit ee92739 into develop Apr 5, 2026
2 checks passed
Comment on lines +100 to +113
<ExpandableButton
buttonKey="theme"
expanded={expanded}
label={theme === 'dark' ? '라이트 모드' : '다크 모드'}
icon={
<span className="relative h-4 w-4">
<Sun className="absolute h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
<Moon className="absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
</span>
}
onClick={() =>
handleExpandableClick('theme', () => setTheme(theme === 'dark' ? 'light' : 'dark'))
}
/>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. Header exposes light mode toggle 📎 Requirement gap ≡ Correctness

The updated Header adds a prominent theme toggle that enables switching to Light Mode, so Light
Mode is not removed/minimized as required. This undermines the requirement that the Neon/Night
experience be primarily dark by default with Light Mode not prominently available.
Agent Prompt
## Issue description
The header now provides a direct Light Mode toggle (`setTheme(... 'light' ...)`), which conflicts with the requirement that Light Mode be removed or minimized.

## Issue Context
Dark Mode is set as default in `ThemeProvider`, but the UI still exposes a prominent toggle that enables Light Mode.

## Fix Focus Areas
- apps/web/src/Header.tsx[100-113]
- apps/web/src/app/layout.tsx[134-140]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Comment on lines 3 to +6
on:
schedule:
- cron: "0 14 * * *" # 한국 시간 23:00 실행 (UTC+9 → UTC 14:00)
workflow_dispatch:
# schedule:
# - cron: "0 14 * * *" # 한국 시간 23:00 실행 (UTC+9 → UTC 14:00)
# workflow_dispatch:
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

2. Workflow has no triggers 🐞 Bug ☼ Reliability

.github/workflows/tagging_song.yml now has an empty on: block (only comments), meaning the
workflow has no configured events and cannot run. This breaks both scheduled tagging and manual
dispatch for the tagging job.
Agent Prompt
## Issue description
`.github/workflows/tagging_song.yml` currently has `on:` with no enabled events (only commented lines), so the workflow cannot be triggered.

## Issue Context
The PR description mentions pausing the tagging cron job. Pausing the schedule is fine, but the workflow file still must define at least one trigger event to remain valid/runnable (e.g., keep `workflow_dispatch` so it can be run manually).

## Fix Focus Areas
- .github/workflows/tagging_song.yml[1-7]

### Suggested change
Re-enable at least one trigger, for example:
```yml
on:
  workflow_dispatch:
  # schedule:
  #   - cron: "0 14 * * *"
```
(or re-enable `schedule` too if the cron should continue).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Comment on lines +117 to +126
--background: oklch(0.15 0.01 260);
--foreground: oklch(0.9 0 0);
--card: oklch(0.2 0.01 260);
--card-foreground: oklch(0.9 0 0);
--popover: oklch(0.2 0.01 260);
--popover-foreground: oklch(0.9 0 0);
--primary: oklch(0.9 0 0);
--primary-foreground: oklch(0.15 0.01 260);
--secondary: oklch(0.65 0.2 350); /* 네온 핑크 */
--secondary-foreground: oklch(0.95 0 0);
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. --primary not neon green 📎 Requirement gap ≡ Correctness

In dark mode, --primary is set to oklch(0.9 0 0) instead of the required primary accent
oklch(0.75 0.2 145). Components that use bg-primary (e.g., default shadcn buttons) will not
reflect the specified neon primary accent globally.
Agent Prompt
## Issue description
Dark theme `--primary` is not set to the required neon primary accent (`oklch(0.75 0.2 145)`), so global primary styling will not match the neon spec.

## Issue Context
The compliance spec requires: primary accent `oklch(0.75 0.2 145)`, secondary `oklch(0.65 0.2 350)`, background `oklch(0.15 0.01 260)` applied globally.

## Fix Focus Areas
- apps/web/src/globals.css[117-130]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Comment on lines +37 to +46
<Button
variant="outline"
size={isExpanded ? 'default' : 'icon'}
className="dark:hover:bg-primary dark:hover:text-primary-foreground transition-all"
disabled={disabled}
onClick={onClick}
>
{icon}
{isExpanded && label}
</Button>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

2. Buttons missing glow effect 📎 Requirement gap ≡ Correctness

Updated buttons (e.g., the new ExpandableButton and other outline buttons) add hover color changes
but do not add a glow (box-shadow/filter) in active/hover states. This falls short of the
requirement that buttons (in addition to active tabs) display a subtle neon glow.
Agent Prompt
## Issue description
Buttons updated/introduced in this PR do not apply a neon glow in hover/active/selected states (only background/text changes).

## Issue Context
Compliance requires subtle glow effects on both buttons and active tabs. Glow tokens exist (`--glow-accent`, `--glow-secondary`) but are not applied to buttons.

## Fix Focus Areas
- apps/web/src/Header.tsx[37-46]
- apps/web/src/Sidebar.tsx[142-146]
- apps/web/src/app/search/JpnArtistList.tsx[41-44]
- apps/web/src/globals.css[149-155]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Comment on lines 3 to +6
on:
schedule:
- cron: "0 14 * * *" # 한국 시간 23:00 실행 (UTC+9 → UTC 14:00)
workflow_dispatch:
# schedule:
# - cron: "0 14 * * *" # 한국 시간 23:00 실행 (UTC+9 → UTC 14:00)
# workflow_dispatch:
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

3. Workflow triggers removed 🐞 Bug ☼ Reliability

.github/workflows/tagging_song.yml now has an on: key with no actual events (only comments), so
the workflow has no valid trigger and will be rejected/disabled by GitHub Actions. This stops the
scheduled/manual song-tagging automation entirely.
Agent Prompt
## Issue description
`.github/workflows/tagging_song.yml` has an `on:` section with no actual triggers (only comments). GitHub Actions workflows must declare at least one event trigger; otherwise the workflow is invalid/disabled and will never run.

## Issue Context
Other workflows in `.github/workflows/` define triggers under `on:` (e.g., `schedule`, `workflow_dispatch`). This file should follow the same structure even if the cron needs to be paused.

## Fix Focus Areas
- .github/workflows/tagging_song.yml[1-7]

## Suggested fix
If you want to pause the cron but keep the workflow valid, restore at least `workflow_dispatch:` under `on:` and keep `schedule:` commented out. If you want it completely disabled, keep `workflow_dispatch:` but gate execution (e.g., job-level `if: false`) so the YAML stays valid.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

전체 디자인 네온 나이트 테마로 변경

1 participant