[Chore] : 배포 전 UI 개선 및 에셋 정리 (#236)

apps/web/public/sitemap-0.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://www.singcode.kr/manifest.webmanifest</loc><lastmod>2026-05-11T11:48:31.848Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.singcode.kr</loc><lastmod>2026-05-11T11:48:31.850Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.singcode.kr/manifest.webmanifest</loc><lastmod>2026-05-17T16:45:28.515Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.singcode.kr/patch-notes</loc><lastmod>2026-05-17T16:45:28.517Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.singcode.kr</loc><lastmod>2026-05-17T16:45:28.517Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
 </urlset>

apps/web/src/Sidebar.tsx

@@ -173,7 +173,7 @@ export default function Sidebar() {
             <div className="flex w-full flex-col items-center gap-2">
               <span className="text-xs">© 2025 singcode - Released under the MIT License.</span>
               <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleOpenGithub}>
-                <Image src="/github_mark.svg" alt="github" width={32} height={32} />
+                <Image src="/vendors/github_mark.svg" alt="github" width={32} height={32} />
               </Button>
               <div>버전 {version}</div>
               <Button

apps/web/src/app/layout.tsx

@@ -29,7 +29,7 @@ export const metadata: Metadata = {
     siteName: 'Singcode',
     images: [
       {
-        url: '/thumbnail.png',
+        url: '/brand/thumbnail.png',
         width: 1200,
         height: 630,
         alt: 'Singcode 썸네일 이미지',
@@ -41,7 +41,7 @@ export const metadata: Metadata = {
     card: 'summary_large_image',
     title: 'Singcode - 노래방에서 부를 곡, 기억하지 말고 저장하세요',
     description: '노래방 갈 때마다 잊어버리는 곡번호? Singcode가 대신 기억할게요!',
-    images: ['/thumbnail.png'],
+    images: ['/brand/thumbnail.png'],
   },
   robots: {
     index: true,

apps/web/src/app/login/KakaoLogin.tsx

@@ -18,7 +18,7 @@ export default function KakaoLogin() {
       className="relative flex h-[60px] w-full cursor-pointer items-center justify-center"
       onClick={handleKakaoLogin}
     >
-      <Image src="/kakao_login.svg" alt="kakao" fill />
+      <Image src="/vendors/kakao_login.svg" alt="kakao" fill />
     </div>
   );
 }

apps/web/src/app/patch-notes/page.tsx

@@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
-import changelog from '../../../public/changelog.json';
+import changelog from '../../../public/data/changelog.json';
 
 type ChangelogEntry = { title: string; date?: string; message: string[] };
 

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

@@ -191,61 +191,66 @@ export default function SearchResultCard({
               transition={{ duration: 0.2, ease: 'easeInOut' }}
               className="overflow-hidden"
             >
-              <div className="flex w-full space-x-2 pt-2">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className={`h-13 flex-1 flex-col items-center justify-center ${isToSing ? 'text-primary bg-primary/10' : ''}`}
-                  aria-label={isToSing ? '내 노래 목록에서 제거' : '내 노래 목록에 추가'}
-                  onClick={onToggleToSing}
-                >
-                  {isToSing ? <MinusCircle /> : <PlusCircle />}
-                  <span className="text-xs">{isToSing ? '부를곡 취소' : '부를곡 추가'}</span>
-                </Button>
-
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className={`h-13 flex-1 flex-col items-center justify-center ${isLike ? 'text-yellow-500' : ''}`}
-                  aria-label={isLike ? '즐겨찾기 취소' : '즐겨찾기'}
-                  onClick={onToggleLike}
-                >
-                  <Star className={isLike ? 'fill-current' : ''} />
-                  <span className="text-xs">{isLike ? '즐겨찾기 취소' : '즐겨찾기'}</span>
-                </Button>
+              <div className="flex flex-col gap-2 pt-2">
+                <div className="flex w-full space-x-2">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className={`h-13 flex-1 flex-col items-center justify-center ${isToSing ? 'text-primary bg-primary/10' : ''}`}
+                    aria-label={isToSing ? '내 노래 목록에서 제거' : '내 노래 목록에 추가'}
+                    onClick={onToggleToSing}
+                  >
+                    {isToSing ? <MinusCircle /> : <PlusCircle />}
+                    <span className="text-xs">{isToSing ? '부를곡 취소' : '부를곡 추가'}</span>
+                  </Button>
 
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className={`h-13 flex-1 flex-col items-center justify-center ${isSave ? 'text-primary bg-primary/10' : ''}`}
-                  aria-label={isSave ? '재생목록 수정' : '재생목록에 추가'}
-                  onClick={onClickSave}
-                >
-                  {isSave ? <ListRestart className="h-5 w-5" /> : <ListPlus className="h-5 w-5" />}
-                  <span className="text-xs">{isSave ? '재생목록 수정' : '재생목록 추가'}</span>
-                </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className={`h-13 flex-1 flex-col items-center justify-center ${isLike ? 'text-yellow-500' : ''}`}
+                    aria-label={isLike ? '즐겨찾기 취소' : '즐겨찾기'}
+                    onClick={onToggleLike}
+                  >
+                    <Star className={isLike ? 'fill-current' : ''} />
+                    <span className="text-xs">{isLike ? '즐겨찾기 취소' : '즐겨찾기'}</span>
+                  </Button>
 
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-13 flex-1 flex-col items-center justify-center"
-                  aria-label="오류 신고"
-                  onClick={handleClickReport}
-                >
-                  <Flag className="h-5 w-5" />
-                  <span className="text-xs">오류 신고</span>
-                </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className={`h-13 flex-1 flex-col items-center justify-center ${isSave ? 'text-primary bg-primary/10' : ''}`}
+                    aria-label={isSave ? '재생목록 수정' : '재생목록에 추가'}
+                    onClick={onClickSave}
+                  >
+                    {isSave ? (
+                      <ListRestart className="h-5 w-5" />
+                    ) : (
+                      <ListPlus className="h-5 w-5" />
+                    )}
+                    <span className="text-xs">{isSave ? '재생목록 수정' : '재생목록 추가'}</span>
+                  </Button>
+                </div>
 
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-13 flex-1 flex-col items-center justify-center"
-                  aria-label="홍보하기"
-                  onClick={handleClickPromotion}
-                >
-                  <Megaphone className="h-5 w-5" />
-                  <span className="text-xs">홍보하기</span>
-                </Button>
+                <div className="flex w-full space-x-2">
+                  <Button
+                    variant="ghost"
+                    className="h-10 flex-1 justify-start gap-2"
+                    aria-label="홍보하기"
+                    onClick={handleClickPromotion}
+                  >
+                    <Megaphone className="h-4 w-4" />
+                    <span className="text-xs">홍보하기</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    className="h-10 flex-1 justify-start gap-2"
+                    aria-label="오류 신고"
+                    onClick={handleClickReport}
+                  >
+                    <Flag className="h-4 w-4" />
+                    <span className="text-xs">오류 신고</span>
+                  </Button>
+                </div>
               </div>
 
               <SongCommentSection songId={id} isExpanded={isExpanded} />

apps/web/src/components/SongCommentSection.tsx

@@ -45,7 +45,7 @@ export default function SongCommentSection({ songId, isExpanded }: SongCommentSe
     <div className="flex flex-col gap-3 pt-2">
       <span className="text-muted-foreground text-xs font-semibold">댓글</span>
 
-      <div className="flex gap-2">
+      <div className="flex gap-2 px-1">
         <Textarea
           placeholder={
             isAuthenticated ? '댓글을 입력하세요 (최대 100자)' : '로그인 후 댓글 작성 가능'

apps/web/src/hooks/useVersionDialog.ts

@@ -17,7 +17,7 @@ export default function useVersionDialog() {
       const { version } = await response.json();
       setVersion(version);
 
-      const changelogRes = await fetch('/changelog.json');
+      const changelogRes = await fetch('/data/changelog.json');
       const changelogs = await changelogRes.json();
 
       const localVersion = localStorage.getItem('version');