diff --git a/apps/web/public/sitemap-0.xml b/apps/web/public/sitemap-0.xml index 9a8cc02..ee74551 100644 --- a/apps/web/public/sitemap-0.xml +++ b/apps/web/public/sitemap-0.xml @@ -1,6 +1,6 @@ -https://www.singcode.kr/manifest.webmanifest2026-08-28T16:24:56.791Zweekly0.7 -https://www.singcode.kr/patch-notes2026-08-28T16:24:56.793Zweekly0.7 -https://www.singcode.kr2026-08-28T16:24:56.794Zweekly0.7 +https://www.singcode.kr/manifest.webmanifest2026-08-31T07:03:47.228Zweekly0.7 +https://www.singcode.kr/patch-notes2026-08-31T07:03:47.229Zweekly0.7 +https://www.singcode.kr2026-08-31T07:03:47.229Zweekly0.7 \ No newline at end of file diff --git a/apps/web/src/app/info/like/SongItem.tsx b/apps/web/src/app/info/like/SongItem.tsx index 6d24d49..f534ccb 100644 --- a/apps/web/src/app/info/like/SongItem.tsx +++ b/apps/web/src/app/info/like/SongItem.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 SongItem({ @@ -13,6 +14,9 @@ export default function SongItem({ isSelected: boolean; onToggleSelect: (id: string) => void; }) { + const titleParts = splitDisplay(song.title_ko, song.title); + const artistParts = splitDisplay(song.artist_ko, song.artist); + return (
onToggleSelect(song.song_id)} />
- {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/info/promotions/page.tsx b/apps/web/src/app/info/promotions/page.tsx index 293e300..5ed759d 100644 --- a/apps/web/src/app/info/promotions/page.tsx +++ b/apps/web/src/app/info/promotions/page.tsx @@ -21,6 +21,7 @@ import { useDeleteUserPromotionMutation, useUserPromotionsQuery } from '@/querie import useAuthStore from '@/stores/useAuthStore'; import { SongPromotion } from '@/types/promotion'; import { getTodayKST } from '@/utils/kst'; +import { splitDisplay } from '@/utils/songDisplay'; function PromotionItem({ promotion, @@ -34,8 +35,8 @@ function PromotionItem({ const todayKST = getTodayKST(); const canCancel = promotion.start_date > todayKST; const { title, artist, title_ko, artist_ko } = promotion; - 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); const statusLabel = (() => { if (promotion.end_date < todayKST) @@ -70,11 +71,13 @@ function PromotionItem({
-

{title}

- {hasKoTitle &&

{title_ko}

} -

{artist}

- {hasKoArtist && ( -

{artist_ko}

+

{titleParts.primary}

+ {titleParts.secondary && ( +

{titleParts.secondary}

+ )} +

{artistParts.primary}

+ {artistParts.secondary && ( +

{artistParts.secondary}

)}

@@ -175,10 +178,10 @@ export default function MyPromotionsPage() { {confirmTarget && (

- {confirmTarget.title_ko ?? confirmTarget.title} + {splitDisplay(confirmTarget.title_ko, confirmTarget.title).primary} {' · '} - {confirmTarget.artist_ko ?? confirmTarget.artist} + {splitDisplay(confirmTarget.artist_ko, confirmTarget.artist).primary}

diff --git a/apps/web/src/app/info/save/FolderCard.tsx b/apps/web/src/app/info/save/FolderCard.tsx index 993bb11..fc39b12 100644 --- a/apps/web/src/app/info/save/FolderCard.tsx +++ b/apps/web/src/app/info/save/FolderCard.tsx @@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Separator } from '@/components/ui/separator'; import { SaveSongFolder } from '@/types/song'; +import { splitDisplay } from '@/utils/songDisplay'; interface IProps { folder: SaveSongFolder; @@ -96,33 +97,42 @@ export default function FolderCard({

{folder.songList.length > 0 ? (
- {folder.songList.map(song => ( -
- toggleSongSelection(song.song_id)} - /> -
-
- -
-

{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() {
{!isAuthenticated && ( -
+

로그인하면 참여할 수 있어요

이 달의 아티스트를 직접 뽑아주세요.

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 }; +}