-
-
-
{song.title}
- {song.title_ko && song.title_ko !== song.title && (
-
{song.title_ko}
- )}
-
{song.artist}
- {song.artist_ko && song.artist_ko !== song.artist && (
-
{song.artist_ko}
- )}
+ {folder.songList.map(song => {
+ const titleParts = splitDisplay(song.title_ko, song.title);
+ const artistParts = splitDisplay(song.artist_ko, song.artist);
+
+ return (
+
+
toggleSongSelection(song.song_id)}
+ />
+
+
+
+
+
{titleParts.primary}
+ {titleParts.secondary && (
+
+ {titleParts.secondary}
+
+ )}
+
{artistParts.primary}
+ {artistParts.secondary && (
+
+ {artistParts.secondary}
+
+ )}
+
-
- ))}
+ );
+ })}
diff --git a/apps/web/src/app/popular/ArtistVotePanel.tsx b/apps/web/src/app/popular/ArtistVotePanel.tsx
index 74ca962..c8fb99b 100644
--- a/apps/web/src/app/popular/ArtistVotePanel.tsx
+++ b/apps/web/src/app/popular/ArtistVotePanel.tsx
@@ -244,7 +244,7 @@ export default function ArtistVotePanel() {
+
로그인하면 참여할 수 있어요
이 달의 아티스트를 직접 뽑아주세요.
diff --git a/apps/web/src/app/search/AddFolderModal.tsx b/apps/web/src/app/search/AddFolderModal.tsx
index 38159b3..10cb06e 100644
--- a/apps/web/src/app/search/AddFolderModal.tsx
+++ b/apps/web/src/app/search/AddFolderModal.tsx
@@ -23,6 +23,7 @@ import {
} from '@/components/ui/select';
import { useSaveSongFolderQuery } from '@/queries/saveSongFolderQuery';
import { SaveSongFolderList, SearchSong } from '@/types/song';
+import { splitDisplay } from '@/utils/songDisplay';
interface IProps {
modalType: '' | 'POST' | 'PATCH';
@@ -47,6 +48,8 @@ export default function AddFolderModal({
const [isExistingPlaylist, setIsExistingPlaylist] = useState(false);
const { id: songId, title, artist, title_ko, artist_ko } = song;
+ const titleParts = splitDisplay(title_ko, title);
+ const artistParts = splitDisplay(artist_ko, artist);
const LOGIC_TEXT = modalType === 'POST' ? '저장' : '수정';
@@ -113,13 +116,17 @@ export default function AddFolderModal({
{/* 곡 정보 */}
- {title}
- {title_ko && title_ko !== title && (
- {title_ko}
+ {titleParts.primary}
+ {titleParts.secondary && (
+
+ {titleParts.secondary}
+
)}
- {artist}
- {artist_ko && artist_ko !== artist && (
- {artist_ko}
+ {artistParts.primary}
+ {artistParts.secondary && (
+
+ {artistParts.secondary}
+
)}
diff --git a/apps/web/src/app/search/HomePage.tsx b/apps/web/src/app/search/HomePage.tsx
index 7ed25ea..a6abae7 100644
--- a/apps/web/src/app/search/HomePage.tsx
+++ b/apps/web/src/app/search/HomePage.tsx
@@ -6,9 +6,7 @@ import { useInView } from 'react-intersection-observer';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
-// import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
-// import { Label } from '@/components/ui/label';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { TOUR_DEMO_SEARCH_TERM, TOUR_DEMO_SONG } from '@/constants/tourDemoSong';
import useSaveSongModal from '@/hooks/useSaveSongModal';
@@ -19,7 +17,6 @@ import { SearchSong, SearchType } from '@/types/song';
import { cn } from '@/utils/cn';
import AddFolderModal from './AddFolderModal';
-// import ChatBot from './ChatBot';
import JpnArtistList from './JpnArtistList';
import NumberKeypad from './NumberKeypad';
import PopularSearchHistory from './PopularSearchHistory';
@@ -65,11 +62,6 @@ export default function SearchPage() {
const [isJpnArtistModalOpen, setIsJpnArtistModalOpen] = useState(false);
const [isFocusAuto, setIsFocusAuto] = useState(false);
const [isNumberKeypadOpen, setIsNumberKeypadOpen] = useState(false);
- // const [isChatBotEnabled, setIsChatBotEnabled] = useState(() => {
- // if (typeof window === 'undefined') return true;
- // const stored = localStorage.getItem('chatbot-enabled');
- // return stored === null ? true : stored === 'true';
- // });
const [scrollRef, setScrollRef] = useState
(null);
const { ref, inView } = useInView({
@@ -79,11 +71,6 @@ export default function SearchPage() {
const { guestToSingSongs } = useGuestToSingStore();
- // const handleToggleChatBot = (checked: boolean) => {
- // setIsChatBotEnabled(checked);
- // localStorage.setItem('chatbot-enabled', String(checked));
- // };
-
const guestToSingIds = useMemo(
() => new Set(guestToSingSongs?.map(item => item.songs.id)),
[guestToSingSongs],
@@ -398,7 +385,7 @@ export default function SearchPage() {
- 전체 문장보다는 단어 단위로 검색해보세요
+ 단어 단위로 검색해주세요
@@ -419,9 +406,6 @@ export default function SearchPage() {
/>
)}
- {/* 챗봇 위젯 */}
- {/* {isChatBotEnabled &&
} */}
-
handleCopy(displayTitle)}
+ onClick={() => handleCopy(titleParts.primary)}
>
- {displayTitle}
+ {titleParts.primary}
- {hasKoTitle && (
+ {titleParts.secondary && (
handleCopy(title)}
@@ -103,11 +102,11 @@ function SearchResultCard({
)}
handleCopy(displayArtist)}
+ onClick={() => handleCopy(artistParts.primary)}
>
- {displayArtist}
+ {artistParts.primary}
- {hasKoArtist && (
+ {artistParts.secondary && (
handleCopy(artist)}
diff --git a/apps/web/src/app/tosing/ModalSongItem.tsx b/apps/web/src/app/tosing/ModalSongItem.tsx
index e6d8199..35017b1 100644
--- a/apps/web/src/app/tosing/ModalSongItem.tsx
+++ b/apps/web/src/app/tosing/ModalSongItem.tsx
@@ -2,6 +2,7 @@ import MarqueeText from '@/components/MarqueeText';
import { Checkbox } from '@/components/ui/checkbox';
import { AddListModalSong } from '@/types/song';
import { cn } from '@/utils/cn';
+import { splitDisplay } from '@/utils/songDisplay';
// 노래 항목 컴포넌트
export default function ModalSongItem({
@@ -13,6 +14,9 @@ export default function ModalSongItem({
isSelected: boolean;
onToggleSelect: (id: string) => void;
}) {
+ const titleParts = splitDisplay(song.title_ko, song.title);
+ const artistParts = splitDisplay(song.artist_ko, song.artist);
+
return (
- {song.title}
- {song.title_ko && song.title_ko !== song.title && (
- {song.title_ko}
+ {titleParts.primary}
+ {titleParts.secondary && (
+
+ {titleParts.secondary}
+
)}
- {song.artist}
- {song.artist_ko && song.artist_ko !== song.artist && (
- {song.artist_ko}
+ {artistParts.primary}
+ {artistParts.secondary && (
+
+ {artistParts.secondary}
+
)}
diff --git a/apps/web/src/app/tosing/SongCard.tsx b/apps/web/src/app/tosing/SongCard.tsx
index 71bb4b8..950e9ae 100644
--- a/apps/web/src/app/tosing/SongCard.tsx
+++ b/apps/web/src/app/tosing/SongCard.tsx
@@ -38,7 +38,7 @@ export default function SongCard({ song, onDelete, onMoveToTop, onMoveToBottom }
variant="ghost"
size="icon"
className={`h-13 flex-1 flex-col items-center justify-center`}
- aria-label="삭제"
+ aria-label="최상위로 이동"
onClick={onMoveToTop}
>
@@ -60,7 +60,7 @@ export default function SongCard({ song, onDelete, onMoveToTop, onMoveToBottom }
variant="ghost"
size="icon"
className={`h-13 flex-1 flex-col items-center justify-center`}
- aria-label="삭제"
+ aria-label="최하위로 이동"
onClick={onMoveToBottom}
>
diff --git a/apps/web/src/components/PromotionBanner.tsx b/apps/web/src/components/PromotionBanner.tsx
index b256809..0521156 100644
--- a/apps/web/src/components/PromotionBanner.tsx
+++ b/apps/web/src/components/PromotionBanner.tsx
@@ -6,6 +6,7 @@ import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useSongPromotionsQuery } from '@/queries/songPromotionQuery';
+import { splitDisplay } from '@/utils/songDisplay';
const ALLOWED_PATHS = ['/', '/popular', '/recent', '/tosing'];
const COLLAPSED_STORAGE_KEY = 'promotion-banner-collapsed';
@@ -49,8 +50,8 @@ export default function PromotionBanner() {
if (promotions.length === 0) return null;
const current = promotions[currentIndex];
- const hasKoTitle = current.title_ko && current.title_ko !== current.title;
- const hasKoArtist = current.artist_ko && current.artist_ko !== current.artist;
+ const titleParts = splitDisplay(current.title_ko, current.title);
+ const artistParts = splitDisplay(current.artist_ko, current.artist);
return (
@@ -98,20 +99,20 @@ export default function PromotionBanner() {
>
- {current.title}
- {hasKoTitle && (
+ {titleParts.primary}
+ {titleParts.secondary && (
- {current.title_ko}
+ {titleParts.secondary}
)}
- {current.artist}
+ {artistParts.primary}
- {hasKoArtist && (
+ {artistParts.secondary && (
- {current.artist_ko}
+ {artistParts.secondary}
)}
diff --git a/apps/web/src/components/ReportFieldCard.tsx b/apps/web/src/components/ReportFieldCard.tsx
index 8bf413c..83996e6 100644
--- a/apps/web/src/components/ReportFieldCard.tsx
+++ b/apps/web/src/components/ReportFieldCard.tsx
@@ -1,5 +1,6 @@
import { ReportCardField } from '@/types/report';
import { cn } from '@/utils/cn';
+import { splitDisplay } from '@/utils/songDisplay';
interface ReportFieldCardProps {
title: string;
@@ -12,16 +13,6 @@ interface ReportFieldCardProps {
newValue: string | null;
}
-function splitDisplay(
- translated: string | undefined,
- original: string,
-): { primary: string; secondary: string | null } {
- if (translated && translated !== original) {
- return { primary: translated, secondary: original };
- }
- return { primary: original || '-', secondary: null };
-}
-
function NewValueIndicator({
isVisible,
value,
@@ -73,7 +64,9 @@ export default function ReportFieldCard({
>
-
{titleParts.primary}
+
+ {titleParts.primary || '-'}
+
- {artistParts.primary}
+ {artistParts.primary || '-'}
= cost;
const canSubmit = days > 0 && content.trim().length > 0 && canAfford;
- const displayTitle = title_ko && title_ko !== title ? title_ko : title;
- const displayArtist = artist_ko && artist_ko !== artist ? artist_ko : artist;
+ const displayTitle = splitDisplay(title_ko, title).primary;
+ const displayArtist = splitDisplay(artist_ko, artist).primary;
const handleProceed = () => {
if (!canSubmit || !range?.from) return;
diff --git a/apps/web/src/components/SongSummary.tsx b/apps/web/src/components/SongSummary.tsx
index beeaff3..4279a57 100644
--- a/apps/web/src/components/SongSummary.tsx
+++ b/apps/web/src/components/SongSummary.tsx
@@ -7,6 +7,7 @@ import SongBadges from '@/components/SongBadges';
import { useCurrentArtistOfMonthQuery } from '@/queries/artistVoteQuery';
import { Song } from '@/types/song';
import { cn } from '@/utils/cn';
+import { splitDisplay } from '@/utils/songDisplay';
type SummarySong = Pick<
Song,
@@ -28,8 +29,8 @@ interface SongSummaryProps {
export default function SongSummary({ song, className }: SongSummaryProps) {
const { title, artist, title_ko, artist_ko, num_tj, num_ky, badges } = song;
- const hasKoTitle = !!title_ko && title_ko !== title;
- const hasKoArtist = !!artist_ko && artist_ko !== artist;
+ const titleParts = splitDisplay(title_ko, title);
+ const artistParts = splitDisplay(artist_ko, artist);
// songs.artist는 "IU(Feat.최백호)"처럼 원문 그대로라, artists 마스터에 등록된 정규화된
// 이름과 곧이곧대로 비교하면 우승 아티스트의 피처링·듀엣 곡에 배지가 빠진다.
@@ -43,14 +44,18 @@ export default function SongSummary({ song, className }: SongSummaryProps) {
- {title}
- {hasKoTitle && (
- {title_ko}
+ {titleParts.primary}
+ {titleParts.secondary && (
+
+ {titleParts.secondary}
+
)}
- {artist}
- {hasKoArtist && (
- {artist_ko}
+ {artistParts.primary}
+ {artistParts.secondary && (
+
+ {artistParts.secondary}
+
)}
{isArtistOfMonth && (
diff --git a/apps/web/src/utils/songDisplay.ts b/apps/web/src/utils/songDisplay.ts
new file mode 100644
index 0000000..75c2ed6
--- /dev/null
+++ b/apps/web/src/utils/songDisplay.ts
@@ -0,0 +1,21 @@
+/**
+ * 곡 제목·아티스트를 화면에 그릴 때의 표시 우선순위.
+ *
+ * 번역(`title_ko`/`artist_ko`)이 있으면 그쪽을 큰 줄로 올리고 원어를 작은 줄로 내린다.
+ * 검색 화면만 한국어 우선이고 부를곡·즐겨찾기·홍보는 원어 우선이라, 검색에서
+ * "요네즈 켄시"로 보고 담은 곡이 부를곡 목록에선 "米津玄師"로 떠 같은 곡을 눈으로
+ * 못 찾는 문제가 있었다. 화면마다 복붙돼 있던 규칙을 여기 한 곳으로 모았으니
+ * 우선순위를 바꿀 일이 생기면 이 함수만 고치면 된다.
+ *
+ * 번역이 없거나 원어와 같으면 `secondary`는 null이다 — 한국곡은 `title_ko`가
+ * 비어 있어 지금과 똑같이 한 줄로만 그려진다.
+ */
+export function splitDisplay(
+ translated: string | null | undefined,
+ original: string,
+): { primary: string; secondary: string | null } {
+ if (translated && translated !== original) {
+ return { primary: translated, secondary: original };
+ }
+ return { primary: original, secondary: null };
+}