diff --git a/Front end/public/assets/api.js b/Front end/public/assets/api.js
new file mode 100644
index 0000000..209954b
--- /dev/null
+++ b/Front end/public/assets/api.js	
@@ -0,0 +1,419 @@
+// public/assets/api.js
+// ─────────────────────────────────────────────────────────────────────────────
+// 백엔드 연결 + 로컬 더미 폴백 지원 IIFE 버전 (window.API 전역 객체)
+// ─────────────────────────────────────────────────────────────────────────────
+const API = (() => {
+  const BASE = 'http://localhost:3001';
+
+  const j = (r) => (r.ok ? r.json() : r.json().then((e) => { throw e; }));
+  const fx = (url, opt = {}) =>
+    fetch(url, { credentials: 'include', ...opt }).then(j);
+
+  // 감정 라벨 (백엔드/프론트 동일 키)
+  const MOODS = [
+    { key: 'happy',     label: '기쁨'   },
+    { key: 'sad',       label: '슬픔'   },
+    { key: 'calm',      label: '차분'   },
+    { key: 'angry',     label: '분노'   },
+    { key: 'energetic', label: '열정' },
+  ];
+
+  // ── 로컬 더미(폴백용) ──────────────────────────────────────────────────────
+  let DUMMY_TRACKS = [
+    {
+      id: 'youtube:gdZLi9oWNZg',
+      source: 'YouTube',
+      title: "BTS — Dynamite",
+      originalTitle: "BTS (방탄소년단) 'Dynamite' Official MV",
+      artist: 'BTS',
+      thumb: 'https://i.ytimg.com/vi/gdZLi9oWNZg/hqdefault.jpg',
+      url:   'https://www.youtube.com/watch?v=gdZLi9oWNZg',
+      moods: ['happy','energetic'],
+      genre: 'kpop',
+      nation: 'kr'
+    },
+    {
+      id: 'youtube:6eEZ7DJMzuk',
+      source: 'YouTube',
+      title: 'IVE — LOVE DIVE',
+      originalTitle: "IVE 아이브 'LOVE DIVE' MV",
+      artist: 'IVE',
+      thumb: 'https://i.ytimg.com/vi/6eEZ7DJMzuk/hqdefault.jpg',
+      url:   'https://www.youtube.com/watch?v=6eEZ7DJMzuk',
+      moods: ['happy','energetic'],
+      genre: 'kpop',
+      nation: 'kr'
+    },
+    {
+      id: 'youtube:TQ8WlA2GXbk',
+      source: 'YouTube',
+      title: 'Official髭男dism — Pretender',
+      originalTitle: 'Official髭男dism - Pretender [Official Video]',
+      artist: 'Official髭男dism',
+      thumb: 'https://i.ytimg.com/vi/TQ8WlA2GXbk/hqdefault.jpg',
+      url:   'https://www.youtube.com/watch?v=TQ8WlA2GXbk',
+      moods: ['sad','calm'],
+      genre: 'jpop',
+      nation: 'jp'
+    },
+    {
+      id: 'youtube:Q6iK6DjV_iE',
+      source: 'YouTube',
+      title: 'YOASOBI — 夜に駆ける',
+      originalTitle: 'YOASOBI「夜に駆ける」Official Music Video',
+      artist: 'YOASOBI',
+      thumb: 'https://i.ytimg.com/vi/Q6iK6DjV_iE/hqdefault.jpg',
+      url:   'https://www.youtube.com/watch?v=Q6iK6DjV_iE',
+      moods: ['energetic'],
+      genre: 'jpop',
+      nation: 'jp'
+    },
+    {
+      id: 'youtube:8xg3vE8Ie_E',
+      source: 'YouTube',
+      title: 'Taylor Swift — Love Story',
+      originalTitle: 'Taylor Swift - Love Story',
+      artist: 'Taylor Swift',
+      thumb: 'https://i.ytimg.com/vi/8xg3vE8Ie_E/hqdefault.jpg',
+      url:   'https://www.youtube.com/watch?v=8xg3vE8Ie_E',
+      moods: ['happy','calm'],
+      genre: 'pop',
+      nation: 'us'
+    },
+    {
+      id: 'youtube:RBumgq5yVrA',
+      source: 'YouTube',
+      title: 'Ed Sheeran — Photograph',
+      originalTitle: 'Ed Sheeran - Photograph (Official Music Video)',
+      artist: 'Ed Sheeran',
+      thumb: 'https://i.ytimg.com/vi/RBumgq5yVrA/hqdefault.jpg',
+      url:   'https://www.youtube.com/watch?v=RBumgq5yVrA',
+      moods: ['sad','calm'],
+      genre: 'pop',
+      nation: 'uk'
+    },
+    {
+      id: 'youtube:OPf0YbXqDm0',
+      source: 'YouTube',
+      title: 'Mark Ronson — Uptown Funk (feat. Bruno Mars)',
+      originalTitle: 'Mark Ronson - Uptown Funk (Official Video) ft. Bruno Mars',
+      artist: 'Mark Ronson',
+      thumb: 'https://i.ytimg.com/vi/OPf0YbXqDm0/hqdefault.jpg',
+      url:   'https://www.youtube.com/watch?v=OPf0YbXqDm0',
+      moods: ['energetic','happy'],
+      genre: 'pop',
+      nation: 'us'
+    },
+    {
+      id: 'youtube:d9h2oQxQv0c',
+      source: 'YouTube',
+      title: 'IU — Palette (feat. G-DRAGON)',
+      originalTitle: 'IU(아이유) _ Palette(팔레트) (Feat. G-DRAGON) MV',
+      artist: 'IU',
+      thumb: 'https://i.ytimg.com/vi/d9h2oQxQv0c/hqdefault.jpg',
+      url:   'https://www.youtube.com/watch?v=d9h2oQxQv0c',
+      moods: ['calm','happy'],
+      genre: 'kpop',
+      nation: 'kr'
+    },
+    {
+      id: 'youtube:pXRviuL6vMY',
+      source: 'YouTube',
+      title: 'twenty one pilots — Stressed Out',
+      originalTitle: 'twenty one pilots: Stressed Out [OFFICIAL VIDEO]',
+      artist: 'twenty one pilots',
+      thumb: 'https://i.ytimg.com/vi/pXRviuL6vMY/hqdefault.jpg',
+      url:   'https://www.youtube.com/watch?v=pXRviuL6vMY',
+      moods: ['angry','sad'],
+      genre: 'rock',
+      nation: 'us'
+    },
+    {
+      id: 'youtube:tAGnKpE4NCI',
+      source: 'YouTube',
+      title: 'Metallica — Nothing Else Matters',
+      originalTitle: 'Metallica: Nothing Else Matters (Official Music Video)',
+      artist: 'Metallica',
+      thumb: 'https://i.ytimg.com/vi/tAGnKpE4NCI/hqdefault.jpg',
+      url:   'https://www.youtube.com/watch?v=tAGnKpE4NCI',
+      moods: ['calm','sad'],
+      genre: 'rock',
+      nation: 'us'
+    }
+  ];
+
+  const cleanTitle = (s) =>
+    (s || '')
+      .replace(/\s*\[[^\]]*\]\s*/g, ' ')
+      .replace(/\s*\([^\)]*\)\s*/g, ' ')
+      .replace(/\s{2,}/g, ' ')
+      .trim();
+
+  function list() { return [...DUMMY_TRACKS]; }
+
+  function searchLocal(q) {
+    if (!q) return list();
+    const t = q.toLowerCase();
+    return DUMMY_TRACKS.filter(v =>
+      v.title.toLowerCase().includes(t) ||
+      (v.originalTitle || '').toLowerCase().includes(t) ||
+      v.artist.toLowerCase().includes(t)
+    );
+  }
+
+  // ── 백엔드 API (우선 사용) ────────────────────────────────────────────────
+  async function me() {
+    try { return await fx(`${BASE}/api/me`); }
+    catch { return { user: null }; }
+  }
+
+  async function login({ username, password }) {
+    return fx(`${BASE}/api/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password })
+    });
+  }
+
+  async function logout() {
+    return fx(`${BASE}/api/logout`, { method: 'POST' });
+  }
+
+  // ★ pageToken 지원 검색
+  async function search({ q, mood, genre, nation, pageToken } = {}) {
+    try {
+      const u = new URL(`${BASE}/api/search`);
+      if (q) u.searchParams.set('q', q);
+      if (mood) u.searchParams.set('mood', mood);
+      if (genre) u.searchParams.set('genre', genre);
+      if (nation) u.searchParams.set('nation', nation);
+      if (pageToken) u.searchParams.set('pageToken', pageToken);
+
+      return await fx(u); // { items, nextPageToken }
+    } catch {
+      // 폴백: 로컬 더미 (페이지네이션 X)
+      const items = searchLocal(q);
+      const filtered = mood ? items.filter(t => t.moods?.includes(mood)) : items;
+      return { items: filtered, nextPageToken: null };
+    }
+  }
+
+  async function recs({ mood, genre, nation, sub, tone } = {}) {
+    try {
+      const u = new URL(`${BASE}/api/recs`);
+      if (mood) u.searchParams.set('mood', mood);
+      if (genre) u.searchParams.set('genre', genre);
+      if (nation) u.searchParams.set('nation', nation);
+      if (sub)    u.searchParams.set('sub', sub);
+      if (tone)   u.searchParams.set('tone',   tone);
+      return await fx(u);
+    } catch {
+      // 폴백: 로컬 더미에서 mood 위주로 정렬
+      const score = (t) =>
+        (mood && t.moods?.includes(mood) ? 2 : 0) +
+        (/official|mv|audio/i.test(t.originalTitle || t.original_title || '') ? 0.5 : 0);
+      const items = [...DUMMY_TRACKS].sort((a, b) => score(b) - score(a)).slice(0, 20);
+      return { items };
+    }
+  }
+
+  async function rate(trackId, mood) {
+    try {
+      return await fx(`${BASE}/api/ratings`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ trackId, mood })
+      });
+    } catch {
+      Ratings.setMood(trackId, mood);
+      return { ok: true, fallback: true };
+    }
+  }
+
+  async function watch(trackId) {
+    try {
+      return await fx(`${BASE}/api/watch`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ trackId })
+      });
+    } catch {
+      return { ok: true, fallback: true };
+    }
+  }
+  
+
+  // ✅ 내 재생목록 목록 (likes / liked / items 포함)
+  async function playlists() {
+    try {
+      return await fx(`${BASE}/api/playlists`);
+    } catch {
+      return { items: [{ id: 0, title: 'Local Playlist', is_public: 0, items: Playlist.get(), likes: 0, liked: false }] };
+    }
+  }
+
+  // ✅ 재생목록 생성
+  async function createPlaylist({ title, isPublic, themeColor }) {
+    try {
+      return await fx(`${BASE}/api/playlists`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title,
+          isPublic,
+          // 색을 안 넘겼으면 기본색 사용
+          themeColor: themeColor || '#22d3ee'
+        })
+      });
+    } catch {
+      // 서버 죽었을 때라도 UI 안터지게 하는 기존 폴백 유지
+      return { ok: true, id: 0, fallback: true };
+    }
+  }
+
+
+  // ✅ 재생목록 삭제
+  async function deletePlaylist(id) {
+    try {
+      return await fx(`${BASE}/api/playlists/${id}`, {
+        method: 'DELETE'
+      });
+    } catch {
+      // 폴백: 로컬 재생목록 싹 비우는 정도만
+      Playlist.set([]);
+      return { ok: true, fallback: true };
+    }
+  }
+
+
+  // ✅ 재생목록에 곡 추가
+  async function addToPlaylist({ playlistId, trackId, position = 0 }) {
+    try {
+      return await fx(`${BASE}/api/playlist/items`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ playlistId, trackId, position })
+      });
+    } catch {
+      const t = list().find(x => x.id === trackId);
+      if (t) Playlist.add(t);
+      return { ok: true, fallback: true };
+    }
+  }
+
+  // ✅ 재생목록에서 곡 제거
+  async function removeFromPlaylist({ playlistId, trackId }) {
+    try {
+      return await fx(`${BASE}/api/playlist/items`, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ playlistId, trackId })
+      });
+    } catch {
+      Playlist.remove(trackId);
+      return { ok: true, fallback: true };
+    }
+  }
+
+  // ⭐ 특정 재생목록 상세 (player에서 사용 예정)
+  async function playlistDetail(id) {
+    try {
+      return await fx(`${BASE}/api/playlists/${id}`);
+    } catch {
+      // 폴백: 로컬 재생목록을 한 개짜리 가짜 playlist라고 생각
+      return {
+        id: 0,
+        title: 'Local Playlist',
+        is_public: 0,
+        likes: 0,
+        owner_name: 'local',
+        items: Playlist.get()
+      };
+    }
+  }
+
+  // ⭐ 재생목록 좋아요 토글
+  async function togglePlaylistLike(id) {
+    try {
+      return await fx(`${BASE}/api/playlists/${id}/like`, {
+        method: 'POST'
+      });
+    } catch {
+      // 폴백: 로컬에서는 좋아요 상태를 굳이 저장 안 해도 됨
+      return { ok: true, liked: true, likes: 0, fallback: true };
+    }
+  }
+
+  // ✅ 공개 재생목록 목록 (최근 / 인기)
+  //    API.publicPlaylists({ sort: 'recent' | 'popular', limit })
+  async function publicPlaylists({ sort = 'recent', limit = 20 } = {}) {
+    try {
+      const u = new URL(`${BASE}/api/playlists/public`);
+      if (sort) u.searchParams.set('sort', sort);
+      if (limit) u.searchParams.set('limit', String(limit));
+      return await fx(u);
+    } catch {
+      return { items: [] };
+    }
+  }
+
+  // ── localStorage 기반 (폴백용) ────────────────────────────────────────────
+  const Auth = {
+    user() {
+      try { return JSON.parse(localStorage.getItem('auth.user') || 'null'); }
+      catch { return null; }
+    },
+    setUser(name) {
+      localStorage.setItem('auth.user', JSON.stringify({ name }));
+    },
+    playlistKey() {
+      const u = Auth.user(); return u ? `playlist:${u.name}` : null;
+    },
+    ratingKey() {
+      const u = Auth.user(); return u ? `ratings:${u.name}` : null;
+    },
+  };
+
+  const Playlist = {
+    get(){
+      const k = Auth.playlistKey(); if(!k) return [];
+      try{ return JSON.parse(localStorage.getItem(k)) || []; } catch { return []; }
+    },
+    set(list){
+      const k = Auth.playlistKey(); if(!k) return;
+      localStorage.setItem(k, JSON.stringify(list));
+    },
+    add(track){
+      const list = Playlist.get();
+      if(!list.find(t=>t.id===track.id)){ list.push(track); Playlist.set(list); }
+    },
+    remove(id){
+      const list = Playlist.get().filter(t=>t.id!==id); Playlist.set(list);
+    }
+  };
+
+  const Ratings = {
+    get(){
+      const k = Auth.ratingKey(); if(!k) return {};
+      try{ return JSON.parse(localStorage.getItem(k)) || {}; } catch { return {}; }
+    },
+    set(map){
+      const k = Auth.ratingKey(); if(!k) return;
+      localStorage.setItem(k, JSON.stringify(map));
+    },
+    setMood(trackId, mood){
+      const m = Ratings.get(); m[trackId] = mood; Ratings.set(m);
+    }
+  };
+
+  return {
+    MOODS, cleanTitle,
+    list, searchLocal, Playlist, Ratings,
+    me, login, logout,
+    search, recs, rate, watch,
+    playlists, createPlaylist, addToPlaylist, removeFromPlaylist, deletePlaylist,
+    playlistDetail, togglePlaylistLike,
+    publicPlaylists,
+    playlistById: playlistDetail,
+  };
+})();
diff --git a/Front end/public/assets/app.js b/Front end/public/assets/app.js
new file mode 100644
index 0000000..c827dcb
--- /dev/null
+++ b/Front end/public/assets/app.js	
@@ -0,0 +1,102 @@
+// assets/app.js
+// 공통 UI + 로그인 상태 관리
+
+import { API } from './api.js';
+
+// 감정 목록은 API 쪽에서 그대로 사용
+export const MOODS = API.MOODS;
+
+// ───────────────────────────────────────
+//  AuthUI : 로그인 상태 + 헤더 동기화
+// ───────────────────────────────────────
+export const AuthUI = {
+  user: null,
+
+  // 서버에 로그인 여부 물어보고 헤더 버튼/뱃지 업데이트
+  async sync() {
+    let name = null;
+    try {
+      const r = await API.me();
+      name = r?.user ?? null;
+    } catch {
+      name = null;
+    }
+    this.user = name;
+
+    const loginLink = document.getElementById('loginLink');
+    const userBadge = document.getElementById('userBadge');
+    const logoutBtn = document.getElementById('logoutBtn');
+
+    if (loginLink && userBadge && logoutBtn) {
+      if (name) {
+        // 로그인 상태
+        loginLink.classList.add('hidden');
+        userBadge.classList.remove('hidden');
+        logoutBtn.classList.remove('hidden');
+        userBadge.textContent = `@${name}`;
+      } else {
+        // 비로그인 상태
+        loginLink.classList.remove('hidden');
+        userBadge.classList.add('hidden');
+        logoutBtn.classList.add('hidden');
+        userBadge.textContent = '';
+      }
+    }
+
+    // 로그아웃 버튼 동작
+    if (logoutBtn && !logoutBtn._wired) {
+      logoutBtn._wired = true;
+      logoutBtn.addEventListener('click', async () => {
+        try {
+          await API.logout();
+        } catch {}
+        this.user = null;
+        await this.sync();
+      });
+    }
+
+    return !!name;
+  },
+
+  /**
+   * 로그인 필요한 기능에서만 사용하는 헬퍼
+   * - 로그인 안돼 있으면 "로그인 후 이용 가능한 기능입니다."만 띄우고 끝.
+   * - redirect 옵션을 true로 주면 login.html로 보내고 싶을 때만 사용.
+   */
+  async gate(fn, { redirect = false } = {}) {
+    const ok = await this.sync();
+    if (!ok) {
+      alert('로그인 후 이용 가능한 기능입니다.');
+      if (redirect) {
+        location.href = './login.html';
+      }
+      return;
+    }
+    return fn();
+  }
+};
+
+// ───────────────────────────────────────
+//  감정 칩 렌더링 (player / search 등에서 사용)
+// ───────────────────────────────────────
+export function renderMoodChips() {
+  const box = document.getElementById('moodChips');
+  if (!box) return;
+
+  const active = document.body.getAttribute('data-mood') || 'calm';
+  box.innerHTML = '';
+
+  MOODS.forEach((m) => {
+    const b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'chip' + (m.key === active ? ' active' : '');
+    b.textContent = m.label;
+    b.onclick = () => {
+      document.body.setAttribute('data-mood', m.key);
+      // 다른 코드에서 감정 바뀜을 감지할 수 있도록 커스텀 이벤트 발행
+      const ev = new CustomEvent('moodchange', { detail: { mood: m.key } });
+      box.dispatchEvent(ev);
+    };
+    box.appendChild(b);
+  });
+}
diff --git a/Front end/public/assets/auth.js b/Front end/public/assets/auth.js
new file mode 100644
index 0000000..234dfdf
--- /dev/null
+++ b/Front end/public/assets/auth.js	
@@ -0,0 +1,101 @@
+// assets/auth.js
+(function () {
+  const STORAGE_KEY = 'ep_user';
+
+  function getUser() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      return raw ? JSON.parse(raw) : null;
+    } catch (e) {
+      console.warn('user parse error', e);
+      return null;
+    }
+  }
+
+  function saveUser(name) {
+    const user = {
+      name,
+      loggedIn: true,
+      createdAt: Date.now()
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(user));
+    return user;
+  }
+
+  function logout() {
+    localStorage.removeItem(STORAGE_KEY);
+    location.href = './home.html';
+  }
+
+  function isLoggedIn() {
+    const u = getUser();
+    return !!(u && u.loggedIn);
+  }
+
+  // 상단 네비의 로그인/로그아웃/배지 상태 갱신
+  function updateAuthUI() {
+    const user = getUser();
+    const loginLink = document.getElementById('loginLink');
+    const userBadge = document.getElementById('userBadge');
+    const logoutBtn = document.getElementById('logoutBtn');
+
+    if (!loginLink && !userBadge && !logoutBtn) return;
+
+    if (user && user.loggedIn) {
+      if (loginLink) loginLink.classList.add('hidden');
+      if (userBadge) {
+        userBadge.textContent = user.name + ' 님';
+        userBadge.classList.remove('hidden');
+      }
+      if (logoutBtn) logoutBtn.classList.remove('hidden');
+    } else {
+      if (loginLink) loginLink.classList.remove('hidden');
+      if (userBadge) userBadge.classList.add('hidden');
+      if (logoutBtn) logoutBtn.classList.add('hidden');
+    }
+
+    if (logoutBtn) {
+      logoutBtn.onclick = (e) => {
+        e.preventDefault();
+        logout();
+      };
+    }
+  }
+
+  // 로그인 안 되어 있으면 로그인 페이지로 튕기기 + redirect 지원
+  function requireLogin(redirectPage) {
+    if (isLoggedIn()) return;
+
+    let msg = '로그인 후 이용할 수 있는 메뉴입니다.';
+    if (redirectPage === 'playlist') {
+      msg = '내 재생목록은 로그인이 필요한 서비스입니다.\n로그인 페이지로 이동합니다.';
+    }
+
+    alert(msg);
+
+    const qs = redirectPage
+      ? '?redirect=' + encodeURIComponent(redirectPage)
+      : '';
+    location.href = './login.html' + qs;
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    updateAuthUI();
+
+    // 이 페이지가 보호 대상이면 body에 data-auth-required="playlist" 처럼 달기
+    const body = document.body;
+    if (body && body.dataset.authRequired) {
+      requireLogin(body.dataset.authRequired);
+    }
+  });
+
+  // 다른 스크립트에서 쓰기 위해 export
+  window.Auth = {
+    getUser,
+    saveUser,
+    isLoggedIn,
+    requireLogin,
+    logout,
+    updateAuthUI
+  };
+})();
diff --git a/Front end/public/assets/player_queue_playlist.js b/Front end/public/assets/player_queue_playlist.js
new file mode 100644
index 0000000..3794bec
--- /dev/null
+++ b/Front end/public/assets/player_queue_playlist.js	
@@ -0,0 +1,135 @@
+// assets/player_queue_playlist.js
+import { API } from './api.js';
+
+(function () {
+  const url = new URL(location.href);
+  const QUEUE_MODE = url.searchParams.get('queue');   // URL 파라미터에서 'queue' 값 가져오기 ('playlist'일 수도 있음)
+  const PLAYLIST_ID = url.searchParams.get('plid');  // URL 파라미터에서 'plid' 가져오기 (재생목록 ID)
+  const START_INDEX = parseInt(url.searchParams.get('index') || '0', 10); // 시작할 곡 인덱스, 기본 0
+
+  if (QUEUE_MODE !== 'playlist' || !PLAYLIST_ID) {
+    // 플레이리스트 모드가 아니면 함수 종료 (기존 추천 로직 유지)
+    return;
+  }
+
+  // 전역 큐 상태 (플레이리스트 전용)
+  let playQueue = [];      // 재생할 곡 목록 배열
+  let currentIndex = 0;    // 현재 재생 중인 곡 인덱스
+
+  // 추천 UI 숨기기 (있으면)
+  const hideRecommendUI = () => {
+    const suggestBtn = document.querySelector('#moreRecsBtn'); // 추천 버튼 선택
+    if (suggestBtn) suggestBtn.style.display = 'none';        // 숨기기
+  };
+
+  // 사이드바 영역 선택
+  const sideWrap = () =>
+    document.querySelector('#recommendList') ||  // 추천 리스트 영역
+    document.querySelector('#rightList') ||      // 오른쪽 리스트 영역
+    document.querySelector('#sideList');         // 사이드 리스트 영역
+
+  // 현재 재생 곡 ID 가져오기
+  const currentTrackId = () => playQueue[currentIndex]?.track_id || null;
+
+  // 특정 인덱스 곡 재생
+  async function loadAndPlay(index) {
+    if (index < 0 || index >= playQueue.length) return; // 유효 범위 체크
+    currentIndex = index;                                // 현재 인덱스 업데이트
+
+    // localStorage에 현재 곡 ID 저장 (기존 코드 호환용)
+    localStorage.setItem('currentTrackId', currentTrackId());
+
+    // 프로젝트에 loadTrackById 함수가 있으면 호출
+    if (typeof window.loadTrackById === 'function') {
+      await window.loadTrackById(currentTrackId());     // 곡 로드 및 재생
+    }
+
+    renderSidebarQueue();  // 사이드바 큐 UI 갱신
+    highlightActive();     // 현재 재생 곡 강조 표시
+  }
+
+  // 다음 곡 재생
+  function nextTrack() {
+    if (currentIndex < playQueue.length - 1) loadAndPlay(currentIndex + 1);
+  }
+
+  // 이전 곡 재생
+  function prevTrack() {
+    if (currentIndex > 0) loadAndPlay(currentIndex - 1);
+  }
+
+  // 사이드바에 플레이리스트 렌더링
+  function renderSidebarQueue() {
+    const wrap = sideWrap(); // 사이드바 영역 선택
+    if (!wrap) return;       // 영역 없으면 종료
+    hideRecommendUI();       // 추천 UI 숨김
+
+    wrap.innerHTML = '';     // 기존 내용 초기화
+    playQueue.forEach((t, i) => {
+      const row = document.createElement('div');
+      row.className = 'rec-row';  // 각 곡 행 스타일
+
+      // 곡 썸네일, 제목, 아티스트, 소스, 재생 버튼
+      row.innerHTML = `
+        <div class="rec-thumb"><img src="${t.thumb || ''}" alt="thumb"/></div>
+        <div class="rec-meta">
+          <div class="rec-title">${t.title || ''}</div>
+          <div class="rec-sub">${t.artist || ''} · ${t.source || ''}</div>
+        </div>
+        <button class="btn" data-role="play">재생</button>
+      `;
+
+      row.addEventListener('click', () => loadAndPlay(i)); // 클릭 시 해당 곡 재생
+      wrap.appendChild(row);  // 사이드바에 추가
+    });
+  }
+
+  // 현재 재생 곡 강조 표시
+  function highlightActive() {
+    document.querySelectorAll('.rec-row').forEach((r, i) => {
+      r.classList.toggle('active', i === currentIndex); // 현재 곡이면 'active' 클래스 추가
+    });
+  }
+
+  // 초기화
+  async function init() {
+    try {
+      const pl = await API.playlistById(PLAYLIST_ID); // API로 재생목록 불러오기
+      playQueue = (pl.items || []).map(it => ({
+        track_id: it.track_id,  // 곡 ID
+        title: it.title,        // 곡 제목
+        artist: it.artist,      // 아티스트
+        thumb: it.thumb,        // 썸네일
+        source: it.source       // 출처
+      }));
+
+      if (!playQueue.length) {
+        alert('이 재생목록에 곡이 없습니다.');
+        location.href = './playlist_view.html?id=' + encodeURIComponent(PLAYLIST_ID); // 곡 없으면 재생목록 페이지로 이동
+        return;
+      }
+
+      // next/prev 버튼 연결 (한 번만)
+      const nextBtn = document.querySelector('#nextBtn');
+      const prevBtn = document.querySelector('#prevBtn');
+      if (nextBtn && !nextBtn._wired) { nextBtn._wired = true; nextBtn.addEventListener('click', nextTrack); }
+      if (prevBtn && !prevBtn._wired) { prevBtn._wired = true; prevBtn.addEventListener('click', prevTrack); }
+
+      const idx = Number.isFinite(START_INDEX)
+        ? Math.min(Math.max(0, START_INDEX), playQueue.length - 1) // 범위 체크
+        : 0;
+
+      await loadAndPlay(idx); // 시작 곡 재생
+    } catch (e) {
+      console.warn('playlist queue load failed:', e);
+      alert('재생목록을 불러오지 못했습니다.'); // 오류 처리
+    }
+  }
+
+  // DOM 준비 후 init 실행
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
diff --git a/Front end/public/assets/quiz.js b/Front end/public/assets/quiz.js
new file mode 100644
index 0000000..5f85474
--- /dev/null
+++ b/Front end/public/assets/quiz.js	
@@ -0,0 +1,345 @@
+// assets/quiz.js
+(function () {
+  const wizard = document.getElementById('wizard');
+  if (!wizard) return; // 이 페이지가 아닐 때 안전 종료
+
+  const $ = (s) => document.querySelector(s);
+  const steps = Array.from(document.querySelectorAll('.step'));
+  const dots = Array.from(document.querySelectorAll('[data-step-dot]'));
+
+  const trailBox = document.getElementById('emotionTrail');
+
+  // ────────────────────────── 이모지 트레일 헬퍼 ──────────────────────────
+  function addTrailIcon(icon) {
+    if (!trailBox || !icon) return;
+    const span = document.createElement('span');
+    span.className = 'trail-icon';
+    span.textContent = icon;
+    trailBox.appendChild(span);
+  }
+
+  function clearTrail() {
+    if (!trailBox) return;
+    trailBox.innerHTML = '';
+  }
+
+  // 선택 결과 저장
+  const state = {
+    emotion: null,     // happy / sad / angry / calm / passion
+    mood: null,        // API용: happy / sad / angry / calm / energetic
+    subEmotion: null,  // 외로움, 설렘 등 텍스트
+    subKey: null,
+    tone: null,        // boost, soothe ...
+    genre: null,       // kpop / jpop / pop / rock
+    nation: null,      // kr / jp / global
+    color: null        // warm / cool / dark / light (-> 지금은 안 씀)
+  };
+
+  let currentStep = 1;
+
+  // 감정 → API의 mood 키로 매핑
+  const EMOTION_TO_MOOD = {
+    happy: 'happy',
+    sad: 'sad',
+    angry: 'angry',
+    calm: 'calm',
+    passion: 'energetic'
+  };
+
+  // 상위 감정별 하위 감정 버튼 목록 + 아이콘
+  const SUB_EMOTIONS = {
+    happy: [
+      { key: 'in_love',   label: '사랑이 넘친다',             icon: '💖' },
+      { key: 'travel',    label: '여행 가고 싶다',           icon: '✈️' },
+      { key: 'excited',   label: '그냥 너무 신난다',         icon: '🎉' }
+    ],
+    sad: [
+      { key: 'lonely',    label: '외로움이 크다',            icon: '😔' },
+      { key: 'missing',   label: '누군가가 그립다',          icon: '😢' },
+      { key: 'drained',   label: '아무것도 하기 싫다',       icon: '🥱' }
+    ],
+    angry: [
+      { key: 'unfair',    label: '억울하고 답답하다',         icon: '😤' },
+      { key: 'annoyed',   label: '짜증이 계속 난다',         icon: '😡' },
+      { key: 'rage',      label: '스트레스를 풀고 싶다',     icon: '💢' }
+    ],
+    calm: [
+      { key: 'rest',      label: '조용히 쉬고 싶다',         icon: '🛌' },
+      { key: 'organize',  label: '차분하게 정리하고 싶다',   icon: '🧹' },
+      { key: 'reflect',   label: '앞으로를 생각해보고 싶다', icon: '🧠' }
+    ],
+    passion: [
+      { key: 'achieve',   label: '뭐라도 해내고 싶다',       icon: '🏃‍♂️' },
+      { key: 'explosion', label: '열정이 폭발한다',          icon: '🔥' },
+      { key: 'selfdev',   label: '자기계발 모드 ON',         icon: '📚' }
+    ]
+  };
+
+  // 1단계 감정 아이콘
+  const EMOTION_ICONS = {
+    happy:   '😊',
+    sad:     '😢',
+    angry:   '😡',
+    calm:    '🌿',
+    passion: '🔥'
+  };
+
+  // 이모지 트레일 전체 매핑
+  const EMOJI_TRAIL_MAP = {
+    // 1단계: 감정
+    emotion: EMOTION_ICONS,
+
+    // 2단계: 세부 감정 (subKey → icon)
+    sub: (function () {
+      const map = {};
+      Object.values(SUB_EMOTIONS).forEach(list => {
+        list.forEach(({ key, icon }) => {
+          map[key] = icon;
+        });
+      });
+      return map;
+    })(),
+
+    // 3단계: 분위기 (tone)
+    tone: {
+      boost:  '\u{1F3B6}', // 🎶  기분이 더 좋아지는
+      soothe: '\u{1F319}', // 🌙  마음을 달래주는
+      energy: '\u26A1',    // ⚡  힘이 나는
+      breeze: '\u2601',    // ☁  아무 생각 없이 듣는
+      focus:  '\u{1F9D8}'  // 🧘 집중하기 좋은
+    },
+
+    // 4단계: 장르 (genre)
+    genre: {
+      // 🇰🇷 = U+1F1F0 U+1F1F7
+      kpop: '\uD83C\uDDF0\uD83C\uDDF7',
+      // 🇯🇵 = U+1F1EF U+1F1F5
+      jpop: '\uD83C\uDDEF\uD83C\uDDF5',
+      pop:  '\u{1F30D}', // 🌍  POP(글로벌)
+      rock: '\u{1F3B8}'  // 🎸  락 / 메탈
+    }
+  };
+
+  // ────────────────────────── 스텝 전환 ──────────────────────────
+  function setStep(n) {
+    currentStep = n;
+
+    steps.forEach((el, idx) => {
+      el.classList.toggle('hidden', idx !== n - 1);
+    });
+
+    dots.forEach((dot) => {
+      dot.classList.toggle('active', Number(dot.dataset.stepDot) === n);
+    });
+
+    // 뒤로가기 버튼 노출 범위 (1~4단계에서만 보이게)
+    const backBtn = document.getElementById('backBtn');
+    if (backBtn) {
+      if (n > 1 && n <= 5) backBtn.classList.remove('hidden');
+      else backBtn.classList.add('hidden');
+    }
+  }
+
+  // ────────────────────────── STEP1: 기본 감정 ──────────────────────────
+  $('#step1').addEventListener('click', (e) => {
+    const btn = e.target.closest('button.choice');
+    if (!btn) return;
+
+    const emo = btn.dataset.emotion;
+    state.emotion = emo;
+    state.mood = EMOTION_TO_MOOD[emo] || 'calm';
+
+    // 기본 감정 이모티콘 트레일에 추가
+    addTrailIcon(EMOJI_TRAIL_MAP.emotion[emo]);
+
+    if (state.mood) {
+      document.body.setAttribute('data-mood', state.mood);
+    }
+
+    // STEP2 버튼 동적 생성
+    const list = SUB_EMOTIONS[emo] || [];
+    const box = $('#subEmotionContainer');
+    box.innerHTML = '';
+    list.forEach((item) => {
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.className = 'choice';
+      b.dataset.subEmotion = item.label;
+      b.dataset.subKey = item.key;
+      b.textContent = item.label;
+
+      const label = item.icon ? `${item.icon} ${item.label}` : item.label;
+      b.textContent = label;
+  
+      box.appendChild(b);
+    });
+
+    $('#step2Hint').textContent =
+      emo === 'happy'
+        ? '좋은 일이 있었군요! 어떤 기쁨인지 골라보세요.'
+        : emo === 'sad'
+        ? '조금 힘든 하루였군요. 어떤 슬픔에 가까운가요?'
+        : emo === 'angry'
+        ? '화가 날 땐 음악으로 안전하게 풀어봐요.'
+        : emo === 'calm'
+        ? '차분한 하루에 어울리는 느낌을 골라보세요.'
+        : '불타는 열정을 음악으로 더 끌어올려볼까요?';
+
+    setStep(2);
+  });
+
+  // ────────────────────────── STEP2: 하위 감정 ──────────────────────────
+  $('#step2').addEventListener('click', (e) => {
+    const btn = e.target.closest('button.choice');
+    if (!btn) return;
+
+    state.subEmotion = btn.dataset.subEmotion || btn.textContent.trim();
+    state.subKey = btn.dataset.subKey || null;
+
+    // 세부 감정 이모티콘 트레일에 추가
+    if (state.subKey) {
+      addTrailIcon(EMOJI_TRAIL_MAP.sub[state.subKey]);
+    }
+
+    setStep(3);
+  });
+
+  // ────────────────────────── STEP3: 음악 분위기 ──────────────────────────
+  $('#step3').addEventListener('click', (e) => {
+    const btn = e.target.closest('button.choice');
+    if (!btn) return;
+
+    state.tone = btn.dataset.tone;
+
+    // 분위기(tone) 이모티콘 트레일에 추가
+    if (state.tone) {
+      addTrailIcon(EMOJI_TRAIL_MAP.tone[state.tone]);
+    }
+
+    setStep(4);
+  });
+
+  // ────────────────────────── STEP4: 장르 / 국가 ──────────────────────────
+  $('#step4').addEventListener('click', (e) => {
+    const btn = e.target.closest('button.choice');
+    if (!btn) return;
+
+    state.genre = btn.dataset.genre;
+    state.nation = btn.dataset.nation || 'global';
+
+    // 장르(genre) 이모티콘 트레일에 추가
+    if (state.genre) {
+      addTrailIcon(EMOJI_TRAIL_MAP.genre[state.genre]);
+    }
+
+    // 5단계(결과 화면)으로 이동
+    setStep(5);
+
+    // 결과 문구 업데이트 + 결과 섹션 표시
+    updateResultText();
+    const resultSec = document.getElementById('result');
+    if (resultSec) {
+      resultSec.classList.remove('hidden');
+      resultSec.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  });
+
+  // ────────────────────────── STEP5: 결과 문구 생성 ──────────────────────────
+  function updateResultText() {
+    const box = $('#resultText');
+    if (!box) return;
+
+    const moodLabelMap = {
+      happy: '기쁜',
+      sad: '조금은 슬픈',
+      angry: '화가 난',
+      calm: '차분한',
+      energetic: '열정적인'
+    };
+
+    const moodLabel = moodLabelMap[state.mood] || '지금';
+    const genreLabel =
+      state.genre === 'kpop'
+        ? 'K-POP'
+        : state.genre === 'jpop'
+        ? 'J-POP'
+        : state.genre === 'rock'
+        ? '락/메탈'
+        : 'POP';
+
+    const toneLabel =
+      state.tone === 'boost'
+        ? '기분을 더 끌어올려 줄'
+        : state.tone === 'soothe'
+        ? '마음을 달래 줄'
+        : state.tone === 'energy'
+        ? '에너지를 채워 줄'
+        : state.tone === 'breeze'
+        ? '생각 없이 흘려듣기 좋은'
+        : state.tone === 'focus'
+        ? '집중하기 좋은'
+        : '오늘의';
+
+    box.textContent =
+      `${moodLabel} 당신에게 어울리는 ` +
+      `${genreLabel} 스타일의 ${toneLabel} 곡들을 추천해 드릴게요.`;
+  }
+
+  // ────────────────────────── 플레이어로 이동 ──────────────────────────
+  $('#goPlayer').addEventListener('click', (e) => {
+    e.preventDefault();
+
+    const params = new URLSearchParams();
+    if (state.mood)   params.set('mood',   state.mood);
+    if (state.genre)  params.set('genre',  state.genre);
+    if (state.nation) params.set('nation', state.nation);
+    if (state.tone)   params.set('tone',   state.tone);
+
+    // 세부 감정 코드도 같이 전송
+    if (state.subKey) {
+      params.set('sub', state.subKey);          // in_love / lonely ...
+    } else if (state.subEmotion) {
+      params.set('sub', state.subEmotion);      // 코드가 없으면 한글 문구라도
+    }
+
+    const qs = params.toString();
+    const url = qs ? `./player.html?${qs}` : './player.html';
+    location.href = url;
+  });
+
+  // ────────────────────────── 처음부터 다시 ──────────────────────────
+  $('#restart').addEventListener('click', () => {
+    state.emotion = null;
+    state.mood = null;
+    state.subEmotion = null;
+    state.subKey = null;
+    state.tone = null;
+    state.genre = null;
+    state.nation = null;
+    state.color = null;
+
+    document.body.setAttribute('data-mood', 'calm');
+    clearTrail();
+
+    setStep(1);
+  });
+
+  // ────────────────────────── 뒤로 가기 버튼 ──────────────────────────
+  const backBtn = document.getElementById('backBtn');
+if (backBtn) {
+  backBtn.addEventListener('click', () => {
+    if (currentStep <= 1) return;
+
+    // ★ 방금 선택했던 스텝의 아이콘 하나 되감기
+    if (trailBox && trailBox.lastChild) {
+      trailBox.removeChild(trailBox.lastChild);
+    }
+
+    const prevStep = currentStep - 1;
+    setStep(prevStep);
+  });
+}
+
+  // 초기 상태
+  setStep(1);
+})();
diff --git a/Front end/public/assets/styles.css b/Front end/public/assets/styles.css
new file mode 100644
index 0000000..bfdf820
--- /dev/null
+++ b/Front end/public/assets/styles.css	
@@ -0,0 +1,431 @@
+/* ==========================================================================
+   Emotion Playlist — Global Styles (FULL REPLACEMENT)
+   - Dark theme with mood-dependent variables
+   - Shared components: topbar, buttons, panels, grid, list, chips, modal
+   - Player/Search/Playlist pages compatible
+   - Multi-step quiz UI (home.html) included
+   ========================================================================== */
+
+/* ── Theme Variables ─────────────────────────────────────────────────────── */
+:root{
+  --bg:#0f172a;
+  --panel:#111827;
+  --text:#e5e7eb;
+  --muted:#94a3b8;
+  --accent:#22d3ee;
+  --card:#0b1220;
+  --ring:rgba(34,211,238,.5);
+}
+
+/* mood themes */
+body[data-mood="happy"]{
+  --bg:#0b1a10; --panel:#0f2316; --text:#f2fce2; --accent:#84cc16; --card:#0a1a10;
+}
+body[data-mood="sad"]{
+  --bg:#0a1224; --panel:#0e1a30; --text:#dbeafe; --accent:#60a5fa; --card:#081122;
+}
+body[data-mood="calm"]{
+  --bg:#0b1616; --panel:#0f1f20; --text:#e0fbfc; --accent:#2dd4bf; --card:#0a1415;
+}
+body[data-mood="angry"]{
+  --bg:#1a0b0b; --panel:#240f0f; --text:#fee2e2; --accent:#f87171; --card:#1a0a0a;
+}
+body[data-mood="energetic"]{
+  --bg:#0b0b1a; --panel:#11112a; --text:#ede9fe; --accent:#a78bfa; --card:#0b0b22;
+}
+
+/* ── Base / Reset ───────────────────────────────────────────────────────── */
+*{ box-sizing:border-box }
+html,body{ height:100% }
+body{
+  margin:0;
+  background-color:var(--bg);
+  color:var(--text);
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    "Apple SD Gothic Neo",
+    "Noto Sans KR",
+    "Segoe UI Emoji",
+    "Apple Color Emoji",
+    "Noto Color Emoji",
+    sans-serif;
+
+  /* ✨ 감정 바뀔 때 부드럽게 전환되는 부분 */
+  transition:
+    background-color 0.9s ease,
+    color 0.9s ease;
+}
+a{ color:inherit; text-decoration:none }
+img{ display:block; max-width:100% }
+
+/* ── Topbar / Header ────────────────────────────────────────────────────── */
+.topbar{
+  position:sticky; top:0; z-index:10;
+  display:flex; align-items:center; justify-content:space-between; gap:10px;
+  padding:12px 16px;
+  background:var(--panel);
+  border-bottom:1px solid rgba(255,255,255,.06);
+
+  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
+}
+.brand{ font-weight:800; letter-spacing:.2px; }
+.nav{ display:flex; gap:8px; align-items:center; }
+
+/* ── Buttons / Badges ───────────────────────────────────────────────────── */
+.btn{
+  padding:8px 12px; border-radius:10px;
+  border:1px solid rgba(255,255,255,.08);
+  background:var(--card); color:var(--text);
+  cursor:pointer;
+  transition:
+    outline-color .15s ease,
+    transform .04s ease,
+    background-color .25s ease,
+    border-color .25s ease,
+    color .25s ease;
+}
+.btn:hover{ outline:2px solid var(--ring) }
+.btn:active{ transform:translateY(1px) }
+.btn.primary{ background:var(--accent); color:#00110c; font-weight:700; border:none }
+.badge{
+  font-size:11px; padding:2px 6px; border-radius:6px;
+  background:rgba(255,255,255,.1);
+}
+.hidden{ display:none !important }
+
+/* ── Layout / Panels ────────────────────────────────────────────────────── */
+.grid{
+  display:grid; grid-template-columns:2fr 1fr; gap:12px; padding:12px;
+}
+@media (max-width:980px){ .grid{ grid-template-columns:1fr } }
+
+.panel{
+  background:var(--panel);
+  border:1px solid rgba(255,255,255,.06);
+  border-radius:14px;
+  padding:12px;
+
+  transition: background-color 0.35s ease, border-color 0.35s ease;
+}
+
+.title{ font-weight:800 }
+.sub{ font-size:12px; color:var(--muted) }
+
+/* ── Search Bar ─────────────────────────────────────────────────────────── */
+.search{
+  display:flex; gap:8px; max-width:640px; margin:8px auto;
+}
+.search input{
+  flex:1; padding:10px 12px; border-radius:10px; outline:none;
+  background:var(--card); color:var(--text);
+  border:1px solid rgba(255,255,255,.08);
+}
+
+/* ── Player Area ────────────────────────────────────────────────────────── */
+.iframe-wrap{ aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden }
+.controls{ display:flex; gap:8px; align-items:center; margin-top:8px }
+
+.meta{
+  display:grid; grid-template-columns:auto 1fr auto;
+  gap:10px; align-items:center; margin-top:8px;
+}
+.meta img{ width:52px; height:52px; border-radius:8px; object-fit:cover }
+
+/* ── Mood Chips ─────────────────────────────────────────────────────────── */
+.moods{ display:flex; gap:8px; flex-wrap:wrap }
+.chip{
+  padding:8px 10px; border-radius:999px; cursor:pointer;
+  background:var(--card);
+  border:1px solid rgba(255,255,255,.08);
+
+  transition:
+    background-color 0.25s ease,
+    color 0.25s ease,
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
+}
+.chip:hover{ outline:2px solid var(--ring) }
+.chip.active{ background:var(--accent); color:#00110c; font-weight:700; border:none }
+
+/* ── Lists (search results / recs / playlist items) ─────────────────────── */
+.list{
+  display:grid; gap:8px;
+  max-height:calc(100vh - 240px);
+  overflow:auto;
+}
+.item{
+  display:grid; grid-template-columns:90px 1fr auto;
+  gap:10px; align-items:center;
+  padding:8px; border-radius:10px; cursor:pointer;
+  background:var(--card); border:1px solid transparent;
+
+  transition: background-color 0.25s ease, border-color 0.25s ease;
+}
+.item:hover{ border-color:var(--accent) }
+.item img{ width:90px; height:50px; border-radius:8px; object-fit:cover }
+
+/* ── Modal ──────────────────────────────────────────────────────────────── */
+.modal{
+  position:fixed; inset:0; padding-top:10vh;
+  display:flex; align-items:flex-start; justify-content:center;
+  background:rgba(0,0,0,.45);
+}
+.modal > .box{
+  background:var(--panel);
+  border:1px solid rgba(255,255,255,.08);
+  border-radius:12px;
+  padding:14px; min-width:320px;
+}
+
+/* ==========================================================================
+   Multi-Step Quiz (공통 step 스타일)
+   ========================================================================== */
+.step{ margin-top:14px }
+.step h2{ margin:6px 0 10px; font-size:1.05rem }
+
+.choices.grid{
+  display:grid;
+  grid-template-columns:repeat(2, minmax(0,1fr));
+  gap:8px;
+}
+@media (min-width:640px){
+  .choices.grid{ grid-template-columns:repeat(3, minmax(0,1fr)) }
+}
+
+.choice{
+  appearance:none;
+  border:1px solid rgba(255,255,255,.08);
+  background:var(--card); color:var(--text);
+  border-radius:12px; padding:10px 12px;
+  text-align:left; cursor:pointer;
+}
+.choice:hover{ outline:2px solid var(--ring) }
+
+/* 감정 테스트용 단계 도트 애니메이션 */
+.dots .dot{
+  width:8px;
+  height:8px;
+  border-radius:999px;
+  background:rgba(255,255,255,.18);
+  opacity:0.5;
+  transform:scale(1);
+  transition:
+    background-color .30s ease,
+    transform .25s ease,
+    opacity .25s ease,
+    box-shadow .25s ease;
+}
+
+.dots .dot.active{
+  background:var(--accent);
+  opacity:1;
+  transform:scale(1.6);                /* 선택된 점 살짝 크게 */
+  box-shadow:0 0 8px rgba(0,0,0,.7);   /* 은은한 발광 느낌 */
+}
+
+.resultbox{
+  padding:12px; border:1px dashed rgba(255,255,255,.25);
+  border-radius:10px; background:rgba(255,255,255,.04);
+}
+
+/* ==========================================================================
+   Footer / helper
+   ========================================================================== */
+.foot{
+  text-align:center; padding:10px; color:var(--muted);
+  border-top:1px solid rgba(255,255,255,.06);
+  background:var(--panel);
+
+  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
+}
+
+/* 감상 페이지: 이 곡 평가용 감정 버튼 */
+.rating-block .sub {
+  color: #cbd5ff;
+  font-size: 0.9rem;
+}
+
+.chip.rate-chip {
+  background: #4338ca;   /* 보라색 계열로 눈에 띄게 */
+  color: #fff;
+}
+
+.chip.rate-chip:hover {
+  background: #4f46e5;
+}
+
+/* ==========================
+   home.html 전용 스타일
+   ========================== */
+
+/* home 전체 레이아웃: 세로를 꽉 채우고 가운데 배치 */
+.home-main{
+  min-height:calc(100vh - 120px); /* 상단 헤더 감안 */
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  padding:32px 16px 48px;
+}
+
+/* 상단 히어로 타이틀 (더 크게) */
+.hero-title{
+  text-align:center;
+  font-size:2.1rem;      /* 기존 1.8 → 2.1 */
+  font-weight:800;
+  margin:24px 0 28px;
+}
+
+/* 감정 테스트 카드(wizard)를 크게 보이게 */
+#wizard{
+  width:100%;
+  max-width:900px;
+  background:var(--panel);
+  border-radius:20px;
+  padding:32px 40px 40px;          /* 패널 기본 padding보다 넉넉하게 */
+  border:1px solid rgba(255,255,255,.12);
+  box-shadow:0 24px 60px rgba(15,23,42,.8);
+}
+
+/* STEP1: 감정 선택 화면을 가운데 크게 */
+#step1{
+  text-align:center;
+}
+
+#step1 .step-title{
+  font-size:1.4rem;
+  margin:10px 0 18px;
+}
+
+#step1 .choices{
+  display:flex;
+  flex-wrap:wrap;
+  justify-content:center;
+  gap:12px;
+}
+
+#step1 .choice.big{
+  min-width:140px;
+  padding:14px 22px;
+  font-size:1.05rem;
+}
+
+/* wizard 상단: 이전 버튼 + 점 */
+.wizard-header{
+  position: relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;   /* 가운데 기준으로 맞추기 */
+  margin-bottom:20px;
+}
+
+/* 점들은 정확히 가운데 정렬 */
+.wizard-header .dots{
+  display:flex;
+  gap:6px;
+  justify-content:center;
+}
+
+/* 왼쪽 위에 살짝 고정되는 이전 버튼 */
+.btn.ghost{
+  background:transparent;
+  border:none;
+  padding-left:0;
+  padding-right:8px;
+  font-size:0.9rem;
+}
+
+/* 버튼을 헤더의 왼쪽 중앙에 고정 */
+#wizard #backBtn.btn.ghost{
+  position:absolute;
+  left:0;
+  top:50%;
+  transform:translateY(-50%);
+}
+
+.btn.ghost:hover{
+  outline:0;
+  text-decoration:underline;
+}
+
+/* 모든 step 공통: 가운데 정렬 */
+#wizard .step{
+  text-align:center;
+}
+
+/* 각 스텝 제목 크게 (wizard 한정) */
+#wizard .step h2{
+  font-size:1.5rem;       /* 기존 1.3 → 1.5 */
+  margin:12px 0 22px;
+}
+
+/* 기본 choices: 중앙 배치 (wizard 한정) */
+#wizard .choices{
+  display:flex;
+  flex-wrap:wrap;
+  justify-content:center;
+  gap:12px;
+}
+
+/* grid 타입도 플렉스처럼 가운데 */
+#wizard .choices.grid{
+  display:flex;
+  flex-wrap:wrap;
+  justify-content:center;
+}
+
+/* STEP1만 살짝 더 크게 (이미 위에서 정의했지만 한 번 더 명시) */
+#step1 .choice.big{
+  min-width:140px;
+  padding:14px 22px;
+  font-size:1.05rem;
+}
+
+/* STEP2 힌트 텍스트도 중앙 */
+#step2Hint{
+  text-align:center;
+  margin-top:6px;
+}
+
+/* wizard 안의 선택 버튼은 좀 더 크고 둥글게 */
+#wizard .choice{
+  appearance:none;
+  border:1px solid rgba(255,255,255,.08);
+  background:var(--card); color:var(--text);
+  border-radius:14px;
+  padding:14px 20px;        /* 기본 choice보다 넉넉하게 */
+  font-size:1.05rem;
+  text-align:left;
+  cursor:pointer;
+}
+
+/* 감정/분위기/장르 이모티콘 트레일 (크게 + 공간 확보) */
+.emotion-trail{
+  margin-top:60px;
+  display:flex;
+  justify-content:center;
+  gap:16px;
+  font-size:82px;           /* 기존 32 → 40 */
+  min-height:98px;          /* 아직 선택 안 했을 때도 자리 확보 */
+}
+
+.emotion-trail .trail-icon{
+  filter:drop-shadow(0 0 6px rgba(0,0,0,.6));
+  transition: transform .15s ease, opacity .2s ease;
+}
+
+
+/* 전체 톤 전환을 더 부드럽게 만들기 */
+.panel, .choice, .chip, .item, .modal, .topbar{
+  transition:
+    background-color 0.9s ease,
+    border-color 0.9s ease,
+    color 0.9s ease;
+}
diff --git a/Front end/public/home.html b/Front end/public/home.html
new file mode 100644
index 0000000..b9b272d
--- /dev/null
+++ b/Front end/public/home.html	
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Emotion Playlist · 감정 테스트</title>
+  <link rel="stylesheet" href="./assets/styles.css" />
+</head>
+<body data-mood="calm">
+  <header class="topbar">
+    <div class="brand">🧠 감정 테스트</div>
+    <nav class="nav">
+      <!-- 🔥 감상 버튼 제거 -->
+      <a href="./search.html" class="btn">검색</a>
+      <a href="./playlist.html" class="btn">내 재생목록</a>
+      <a href="./login.html" id="loginLink" class="btn">로그인</a>
+      <span id="userBadge" class="badge hidden"></span>
+      <button id="logoutBtn" class="btn hidden">로그아웃</button>
+    </nav>
+  </header>
+
+    <main style="max-width:900px;margin:40px auto 24px;" class= "home-main">
+    <!-- 상단 히어로 텍스트 -->
+    <h1 class="hero-title">감정으로 음악을 추천받아봐요!</h1>
+
+    <!-- 감정 테스트 패널 -->
+    <section id="wizard" class="panel">
+      <!-- 진행 점 표시 (1~5: 4단계 + 결과) -->
+        <div class="wizard-header">
+          <button class="btn ghost hidden" id="backBtn">← 이전으로</button>
+          <div class="dots">
+            <span class="dot active" data-step-dot="1"></span>
+            <span class="dot" data-step-dot="2"></span>
+            <span class="dot" data-step-dot="3"></span>
+            <span class="dot" data-step-dot="4"></span>
+            <span class="dot" data-step-dot="5"></span>
+          </div>
+        </div>
+
+      <!-- STEP 1: 기본 감정 -->
+      <section id="step1" class="step" aria-labelledby="q1">
+        <h2 id="q1" class="step-title">지금 어떤 감정이세요?</h2>
+        <div class="choices column">
+          <button class="choice big" data-emotion="happy">😊 기쁨</button>
+          <button class="choice big" data-emotion="sad">😲 슬픔</button>
+          <button class="choice big" data-emotion="angry">😡 분노</button>
+          <button class="choice big" data-emotion="calm">🌿 차분</button>
+          <button class="choice big" data-emotion="passion">🔥 열정</button>
+        </div>
+      </section>
+
+      <!-- STEP 2: 하위 감정 (동적 생성) -->
+      <section id="step2" class="step hidden" aria-labelledby="q2">
+        <h2 id="q2">조금 더 구체적으로 말해볼까요?</h2>
+        <div id="subEmotionContainer" class="choices column"></div>
+        <div class="sub" id="step2Hint"></div>
+      </section>
+
+      <!-- STEP 3: 음악 분위기 선택 -->
+      <section id="step3" class="step hidden" aria-labelledby="q3">
+        <h2 id="q3">지금은 어떤 분위기의 음악이 좋으신가요?</h2>
+        <div class="choices grid">
+          <button class="choice" data-tone="boost">🎶 기분이 더 좋아지는</button>
+          <button class="choice" data-tone="soothe">🌙 마음을 달래주는</button>
+          <button class="choice" data-tone="energy">⚡ 힘이 나는</button>
+          <button class="choice" data-tone="breeze">☁️ 아무 생각 없이 듣는</button>
+          <button class="choice" data-tone="focus">🧘 집중하기 좋은</button>
+        </div>
+      </section>
+
+      <!-- STEP 4: 장르/국가 선택 -->
+      <section id="step4" class="step hidden" aria-labelledby="q4">
+        <h2 id="q4">어떤 음악 장르가 가장 끌리나요?</h2>
+        <div class="choices grid">
+          <button class="choice" data-genre="kpop" data-nation="kr">🇰🇷 K-POP</button>
+          <button class="choice" data-genre="jpop" data-nation="jp">🇯🇵 J-POP</button>
+          <button class="choice" data-genre="pop" data-nation="global">🌍 POP (글로벌)</button>
+          <button class="choice" data-genre="rock" data-nation="global">🎸 락 / 메탈</button>
+        </div>
+      </section>
+
+      <!-- STEP 5: 결과 -->
+      <section id="step5" class="step hidden" aria-labelledby="q5">
+        <section id="result" class="step hidden" aria-live="polite" style="margin-top:18px">
+          <h2>오늘의 추천 준비 완료 🎧</h2>
+          <div class="resultbox" id="resultText" style="margin-bottom:8px"></div>
+          <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
+            <a class="btn primary" id="goPlayer" href="./player.html">플레이어로 이동</a>
+            <button class="btn" id="restart">처음부터 다시</button>
+          </div>
+        </section>
+      </section>
+    </section>
+    <div id="emotionTrail" class="emotion-trail"></div>
+  </main>
+
+
+  <script src="./assets/api.js"></script>
+  <script src="./assets/auth.js"></script>
+  <script src="./assets/quiz.js"></script>
+  <script>
+  document.querySelectorAll('.chip').forEach(chip => {
+    chip.addEventListener('click', () => {
+      const mood = chip.dataset.mood;
+      if (!mood) return;
+
+      // 1) 테마 변경
+      document.body.setAttribute('data-mood', mood);
+
+      // 2) active 스타일(선택된 칩 효과)
+      document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
+      chip.classList.add('active');
+
+      // 필요하면 여기에서 다음 페이지로 이동도 가능
+      // location.href = `./search.html?mood=${mood}`;
+    });
+  });
+</script>
+</body>
+</html>
diff --git a/Front end/public/login.html b/Front end/public/login.html
new file mode 100644
index 0000000..3f279eb
--- /dev/null
+++ b/Front end/public/login.html	
@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <title>Emotion Playlist · Login</title>
+  <link rel="stylesheet" href="./assets/styles.css"/>
+</head>
+<body data-mood="calm">
+  <header class="topbar">
+    <div class="brand">🔐 로그인</div>
+    <nav class="nav">
+      <a href="./home.html" class="btn">홈</a>
+      <a href="./search.html" class="btn">검색</a>
+      <a href="./playlist.html" class="btn">재생목록</a>
+    </nav>
+  </header>
+
+  <main class="panel" style="max-width:420px;margin:16px auto;">
+    <div class="title" style="margin-bottom:8px">아이디로 로그인</div>
+
+    <div style="display:flex;flex-direction:column;gap:8px">
+      <input id="username" placeholder="아이디"
+        style="padding:10px;border-radius:10px;background:var(--card);color:var(--text);border:1px solid rgba(255,255,255,.12)"/>
+
+      <input id="password" type="password" placeholder="비밀번호"
+        style="padding:10px;border-radius:10px;background:var(--card);color:var(--text);border:1px solid rgba(255,255,255,.12)"/>
+
+      <button id="go" class="btn primary">로그인</button>
+
+      <div class="sub" style="margin-top:4px">
+        아직 계정이 없나요?
+        <a href="./signup.html" class="btn" style="padding:4px 8px;margin-left:4px">회원가입</a>
+      </div>
+    </div>
+  </main>
+
+  <!-- 전역 API + auth -->
+  <script src="./assets/api.js"></script>
+  <script src="./assets/auth.js"></script>
+
+  <script>
+    const idEl  = document.getElementById('username');
+    const pwEl  = document.getElementById('password');
+    const goBtn = document.getElementById('go');
+
+    // 🔹 URL 쿼리에서 redirect 값 읽기 (예: ?redirect=playlist)
+    const params   = new URLSearchParams(window.location.search);
+    const redirect = params.get('redirect');
+
+    async function doLogin() {
+      const username = idEl.value.trim();
+      const password = pwEl.value;
+
+      if (!username) { alert('아이디를 입력하세요.'); idEl.focus(); return; }
+      if (!password) { alert('비밀번호를 입력하세요.'); pwEl.focus(); return; }
+
+      try {
+        // 서버 로그인
+        const res = await API.login({ username, password });
+
+        // 서버가 name / user.name 등을 주면 사용, 없으면 아이디 사용
+        const displayName =
+          (res && (res.user?.name || res.name)) || username;
+
+        // 🔹 로컬 로그인 상태 저장 (네비게이션 뱃지 등용)
+        if (window.Auth && Auth.saveUser) {
+          Auth.saveUser(displayName);
+        }
+
+        // 🔹 redirect 값에 따라 이동
+        if (redirect === 'playlist') {
+          location.href = './playlist.html';
+        } else {
+          location.href = './home.html';
+        }
+      } catch (e) {
+        alert('로그인 실패: ' + (e?.error ?? '알 수 없는 오류'));
+      }
+    }
+
+    goBtn.addEventListener('click', doLogin);
+    pwEl.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') doLogin();
+    });
+    idEl.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') pwEl.focus();
+    });
+  </script>
+</body>
+</html>
+
+
diff --git a/Front end/public/player.html b/Front end/public/player.html
new file mode 100644
index 0000000..9dcf639
--- /dev/null
+++ b/Front end/public/player.html	
@@ -0,0 +1,543 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <title>Emotion Playlist · Player</title>
+  <link rel="stylesheet" href="./assets/styles.css"/>
+  <style>
+    .iframe-wrap{ position:relative; padding-top:56.25%; background:#000; }
+    .iframe-wrap > #player{ position:absolute; inset:0; }
+  </style>
+</head>
+<body data-mood="calm">
+  <header class="topbar">
+    <div class="brand">🎧 감상</div>
+    <nav class="nav">
+      <a href="./home.html" class="btn">홈</a>
+      <a href="./search.html" class="btn">검색</a>
+      <a href="./playlist.html" class="btn">재생목록</a>
+      <a href="./login.html" id="loginLink" class="btn">로그인</a>
+      <span id="userBadge" class="badge hidden"></span>
+      <button id="logoutBtn" class="btn hidden">로그아웃</button>
+    </nav>
+  </header>
+
+  <main class="grid">
+    <!-- 메인 플레이어 영역 -->
+    <section class="panel">
+      <div class="iframe-wrap">
+        <div id="player"></div>
+      </div>
+
+      <div class="controls">
+        <button id="playBtn" class="btn primary">재생</button>
+        <button id="pauseBtn" class="btn">일시정지</button>
+        <button id="addToPlaylistBtn" class="btn">재생목록에 추가</button>
+        <a id="openOnYT" class="btn" target="_blank" rel="noopener">YouTube에서 열기</a>
+      </div>
+
+      <div class="meta">
+        <img id="nowThumb" alt="thumb"/>
+        <div>
+          <div id="nowTitle" class="title">곡을 선택하세요</div>
+          <div id="nowSub" class="sub">아티스트 · 원본 제목</div>
+        </div>
+        <span id="nowSource" class="badge">–</span>
+      </div>
+
+      <!-- 이 곡에 대한 감정 평가 영역 -->
+      <div class="rating-block" style="margin-top:10px">
+        <div class="sub">
+          이 곡의 분위기를 골라주세요!
+          <span style="opacity:.75;font-size:0.9em;">(내 추천에 반영돼요)</span>
+        </div>
+        <div class="moods" id="rateMoods" style="margin-top:8px"></div>
+      </div>
+    </section>
+
+    <!-- 오른쪽 리스트: 추천 / 검색 결과 / 재생목록 곡 -->
+    <aside class="panel">
+      <div class="sub" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
+        <span id="sideTitle">추천</span>
+      </div>
+      <div id="recList" class="list"></div>
+      <div style="display:flex;justify-content:flex-end;margin-top:8px">
+        <a id="moreRecsBtn" class="btn">다른 곡도 추천받기 →</a>
+      </div>
+    </aside>
+  </main>
+
+  <!-- 재생 종료 후 팝업 -->
+  <div id="afterPopup" class="modal hidden">
+    <div class="box">
+      <div class="title" style="margin-bottom:8px">
+        이 곡을 듣고 난 지금 기분은?
+      </div>
+      <div class="sub" style="margin-bottom:8px">
+        선택한 감정이 앞으로 추천에 사용돼요.
+      </div>
+      <div id="afterMoods" class="moods"></div>
+      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
+        <a class="btn" href="./home.html">심리테스트 다시 하기</a>
+        <button id="closePopup" class="btn primary">닫기</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 순서 중요: API(IIFE) → auth 헤더 → YouTube API → 페이지 스크립트 -->
+  <script src="./assets/api.js"></script>
+  <script src="./assets/auth.js"></script>
+  <script src="https://www.youtube.com/iframe_api"></script>
+
+  <script>
+    // ────────────────────────── 유틸 & 상태
+    const $ = (s) => document.querySelector(s);
+    const MOODS = API.MOODS;
+
+    const urlParams     = new URLSearchParams(location.search);
+    const initialMood   = urlParams.get('mood')   || 'calm';
+    const initialGenre  = urlParams.get('genre')  || '';
+    const initialNation = urlParams.get('nation') || '';
+    const initialSub    = urlParams.get('sub')    || '';
+    const initialTone   = urlParams.get('tone')   || '';
+    const fromParam     = urlParams.get('from')   || '';
+    const playlistIdParam = urlParams.get('playlistId') || urlParams.get('id') || '';
+
+    // body에 기본 mood 적용
+    document.body.setAttribute('data-mood', initialMood);
+
+    // 모드: recs / search / playlist
+    let mode = 'recs';
+    let ytPlayer = null;
+    let currentTrack = null;
+    let currentParams = {
+      mood: initialMood,
+      genre: initialGenre,
+      nation: initialNation,
+      sub: initialSub,
+      tone:   initialTone,
+    };
+
+    // 큐(검색 결과나 재생목록 곡들)
+    let queue = [];
+    let queueIndex = -1;
+
+    // ★★★ 스킵 판단용 전역 상태
+    let currentTrackId = null;  // 현재 재생 중인 트랙 id
+    let playStartMs    = null;  // 이 트랙을 재생하기 시작한 시각(ms)
+
+    // 로그인 필요한 동작 감싸기
+    async function gate(fn, { silent = false } = {}) {
+      try {
+        const { user } = await API.me();
+        if (!user) {
+          if (!silent) {
+            alert('로그인 후 이용 가능한 기능입니다.');
+          }
+          return;
+        }
+        await fn();
+      } catch (e) {
+        console.warn(e);
+      }
+    }
+
+    const cleanTitle = (s) => (s || '')
+      .replace(/\s*\([^\)]*\)|\s*\[[^\]]*\]/g, '')
+      .replace(/\s{2,}/g, ' ')
+      .trim();
+
+    // YouTube ID를 끝까지 뽑아내는 총력 파서
+    function getYouTubeId(track) {
+      if (!track) return '';
+
+      // 후보 문자열들을 한데 모아놓고 하나씩 검사
+      const candidates = [
+        track.id,
+        track.track_id,
+        track.videoId,
+        track.video_id,
+        track.url,
+        track.source,
+        track.original_title,
+        track.originalTitle,
+        track.thumb   // ★ 썸네일에서도 /vi/ID/ 뽑아냄
+      ].filter(Boolean);
+
+      for (const v of candidates) {
+        if (typeof v !== 'string') continue;
+
+        // 1) "youtube:XXXXXXXXXXX"
+        if (v.startsWith('youtube:')) {
+          const x = v.split(':')[1];
+          if (x && /^[\w-]{6,}$/.test(x)) return x;
+        }
+
+        // 2) 썸네일 경로: https://i.ytimg.com/vi/<ID>/...
+        const mThumb = /\/vi\/([\w-]{6,})\//i.exec(v);
+        if (mThumb) return mThumb[1];
+
+        // 3) URL: ...?v=<ID> 또는 .../be/<ID>
+        const mUrl = /(?:v=|be\/)([\w-]{6,})/i.exec(v);
+        if (mUrl) return mUrl[1];
+
+        // 4) 11자 내외의 “그럴듯한” 순수 ID
+        if (/^[\w-]{10,}$/.test(v)) return v;
+      }
+
+      return '';
+    }
+
+    // ★★★ 5초 이하 스킵시 /api/skip 호출
+    async function sendSkipIfNeeded() {
+      // 아직 재생 중인 곡이 없거나, 시작 시간이 없으면 패스
+      if (!currentTrackId || playStartMs == null) return;
+
+      const listenedSec = (Date.now() - playStartMs) / 1000;
+      // 5초 초과면 "정상 청취"로 보고 스킵 X
+      if (listenedSec > 5) return;
+
+      try {
+        await fetch('http://localhost:3001/api/skip', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify({
+            trackId: currentTrackId,
+            seconds: listenedSec,
+          }),
+        });
+      } catch (err) {
+        console.error('skip 기록 실패:', err);
+      }
+    }
+
+    // ────────────────────────── YouTube Iframe API
+    window.onYouTubeIframeAPIReady = function () {
+      ytPlayer = new YT.Player('player', {
+        height: '100%',
+        width: '100%',
+        videoId: '',
+        playerVars: { autoplay: 0, rel: 0, modestbranding: 1 },
+        events: {
+          onReady: onReady,
+          onStateChange: onStateChange,
+          onError: onError
+        }
+      });
+    };
+
+    async function onReady() {
+
+      currentParams = {
+        mood:   initialMood,
+        genre:  initialGenre,
+        nation: initialNation,
+        sub:    initialSub,
+        tone:   initialTone,
+      };
+
+      // body mood 업데이트
+      document.body.setAttribute('data-mood', currentParams.mood);
+
+      const from = fromParam;
+      const pid  = playlistIdParam;
+
+      if (pid) {
+        // 재생목록에서 진입
+        mode = 'playlist';
+        await initFromPlaylist(pid);
+
+      } else if (from === 'search') {
+        // 검색 결과에서 진입
+        mode = 'search';
+        await initFromSearch();
+
+      } else {
+        // 기본 추천 모드
+        mode = 'recs';
+        await refreshRecs();
+      }
+    }
+
+
+    function onStateChange(e) {
+      if (e.data === YT.PlayerState.ENDED) {
+        showEndPopup();
+      }
+    }
+
+    function onError(e){
+      console.warn('YouTube player error:', e.data);
+
+      // 유튜브 정책 때문에 임베드가 막힌 경우 코드 101, 150
+      if (e.data === 101 || e.data === 150) {
+        const link = document.getElementById('openOnYT');
+        const msg =
+          '이 영상은 유튜브에서 외부 사이트 재생이 막혀 있어서,\n' +
+          '사이트 안에서는 재생할 수 없어요.\n\n' +
+          '새 탭에서 YouTube로 바로 열까요?';
+
+        if (link && link.href && link.href !== '#' && confirm(msg)) {
+          window.open(link.href, '_blank');   // 사용자가 원할 때만 이동
+        }
+      }
+    }
+
+    // ────────────────────────── 추천 모드: 감정 기반 추천
+    async function refreshRecs(){
+      const { mood, genre, nation, sub, tone } = currentParams;
+      let items = [];
+      try{
+        const r = await API.recs({ mood, genre, nation, sub, tone });
+        items = r.items || [];
+      }catch{
+        items = API.list();
+      }
+
+      const holder = $('#recList');
+      holder.innerHTML = '';
+      $('#sideTitle').textContent = '추천';
+
+      items.forEach(t=>{
+        const el = document.createElement('div');
+        el.className = 'item';
+        const thumb = t.thumb || '';
+        el.innerHTML = `
+          <img src="${thumb}" alt="thumb"/>
+          <div>
+            <div class="title">${cleanTitle(t.title || '')}</div>
+            <div class="sub">${t.artist || ''} · <span class="badge">${t.source || ''}</span></div>
+          </div>
+        `;
+        el.onclick = ()=> setNow(t);
+        holder.appendChild(el);
+      });
+
+      if (!currentTrack && items[0]) setNow(items[0]);
+    }
+
+    // ────────────────────────── 검색 결과 모드
+    async function initFromSearch() {
+      const p = new URLSearchParams(location.search);
+      const idParam = p.get('id');
+
+      // lastSearchList 불러오기
+      let list = [];
+      try {
+        const saved = localStorage.getItem('lastSearchList');
+        if (saved) list = JSON.parse(saved) || [];
+      } catch (e) {
+        console.warn('failed to parse lastSearchList', e);
+      }
+
+      if (!Array.isArray(list) || list.length === 0) {
+        // 폴백: 추천 모드로
+        mode = 'recs';
+        await refreshRecs();
+        return;
+      }
+
+      // context(감정/장르/국가)도 있으면 반영
+      try {
+        const ctxStr = localStorage.getItem('lastSearchContext');
+        if (ctxStr) {
+          const ctx = JSON.parse(ctxStr);
+          if (ctx.mood)   currentParams.mood   = ctx.mood;
+          if (ctx.genre)  currentParams.genre  = ctx.genre;
+          if (ctx.nation) currentParams.nation = ctx.nation;
+          document.body.setAttribute('data-mood', currentParams.mood);
+        }
+      } catch (e) {
+        console.warn('failed to parse lastSearchContext', e);
+      }
+
+      queue = list;
+      const idx = list.findIndex(x => String(x.id) === String(idParam));
+      queueIndex = idx >= 0 ? idx : 0;
+
+      $('#sideTitle').textContent = '검색 결과';
+      renderQueueList();
+      setNow(queue[queueIndex]);
+    }
+
+    // ────────────────────────── 재생목록 모드
+    async function initFromPlaylist(pid) {
+      const holderTitle = $('#sideTitle');
+      if (holderTitle) holderTitle.textContent = '재생목록';
+
+      try {
+        const { items } = await API.playlists(); // 내 재생목록들만
+        const pl = (items || []).find(x => String(x.id) === String(pid));
+
+        if (!pl) {
+          // 못 찾으면 그냥 추천 모드
+          mode = 'recs';
+          await refreshRecs();
+          return;
+        }
+
+        const tracks = pl.items || [];
+        if (!tracks.length) {
+          mode = 'recs';
+          await refreshRecs();
+          return;
+        }
+
+        queue = tracks;
+        queueIndex = 0;
+
+        if (holderTitle) holderTitle.textContent = `재생목록 · ${pl.title}`;
+
+        renderQueueList();
+        setNow(queue[queueIndex]);
+      } catch (e) {
+        console.warn('initFromPlaylist failed', e);
+        mode = 'recs';
+        await refreshRecs();
+      }
+    }
+
+    // 큐(검색/재생목록) 리스트 렌더링
+    function renderQueueList() {
+      const holder = $('#recList');
+      holder.innerHTML = '';
+
+      queue.forEach((t, idx) => {
+        const el = document.createElement('div');
+        el.className = 'item';
+        const thumb = t.thumb || '';
+        el.innerHTML = `
+          <img src="${thumb}" alt="thumb"/>
+          <div>
+            <div class="title">${cleanTitle(t.title || '')}</div>
+            <div class="sub">${t.artist || ''} · <span class="badge">${t.source || ''}</span></div>
+          </div>
+        `;
+        el.onclick = () => {
+          queueIndex = idx;
+          setNow(t);
+        };
+        holder.appendChild(el);
+      });
+    }
+
+    // ────────────────────────── 현재 곡 설정
+    function setNow(t) {
+      if (!t) return;
+
+      // 이전 곡과 다른 곡으로 바뀔 때만 스킵 기록
+      const prevId = (currentTrack && (currentTrack.id || currentTrack.track_id)) || null;
+      const nextId = t.id || t.track_id || null;
+      if (prevId && nextId && prevId !== nextId) {
+        sendSkipIfNeeded();  // fire-and-forget
+      }
+
+      currentTrack = t;
+      currentTrackId = nextId;        // ★ 통일된 현재 곡 id
+      playStartMs = Date.now();
+
+      const vid = getYouTubeId(t);
+      // ★ 방어: vid 없으면 loadVideoById 호출하지 말고 안내 + 콘솔 로깅
+      if (ytPlayer && ytPlayer.loadVideoById) {
+        if (vid) {
+          ytPlayer.loadVideoById(String(vid));
+        } else {
+          console.warn('[player] 유튜브 ID를 찾지 못함. track=', t);
+          alert('이 트랙의 YouTube ID를 찾지 못했어요. 다음 곡을 선택해 보세요.');
+        }
+      }
+
+      $('#nowThumb').src = t.thumb || '';
+      $('#nowTitle').textContent = cleanTitle(t.title || '');
+      $('#nowSub').textContent = `${t.artist || ''} · ${(t.original_title || t.originalTitle || '')}`;
+      $('#nowSource').textContent = t.source || 'YouTube';
+      $('#openOnYT').href = t.url || (vid ? `https://www.youtube.com/watch?v=${vid}` : '#');
+
+      renderRateChips();
+
+      // 시청기록(로그인 필요, 실패는 조용히)
+      gate(async () => { if (currentTrackId) await API.watch(currentTrackId); }, { silent: true });
+    }
+
+
+    // 이 곡에 대한 감정 평가 버튼들
+    function renderRateChips() {
+      const box = $('#rateMoods');
+      box.innerHTML = '';
+      MOODS.forEach(m => {
+        const b = document.createElement('button');
+        b.className = 'chip rate-chip';
+        b.textContent = m.label;
+        b.onclick = () => gate(async () => {
+          await API.rate(currentTrackId || currentTrack.id || currentTrack.track_id, m.key);
+          currentParams.mood = m.key;                  // 현재 mood 변경
+          document.body.setAttribute('data-mood', m.key);
+          // 추천 모드일 때만 추천 갱신
+          if (mode === 'recs') {
+            await refreshRecs();
+          }
+          alert(`"${m.label}"로 이 곡의 기분을 저장했어요.`);
+        });
+        box.appendChild(b);
+      });
+    }
+
+    // 재생 끝났을 때 팝업
+    function showEndPopup() {
+      const wrap = $('#afterPopup');
+      const holder = $('#afterMoods');
+      holder.innerHTML = '';
+      MOODS.forEach(m => {
+        const b = document.createElement('button');
+        b.className = 'chip rate-chip';
+        b.textContent = m.label;
+        b.onclick = () => gate(async () => {
+          await API.rate(currentTrackId || currentTrack.id || currentTrack.track_id, m.key);
+          currentParams.mood = m.key;
+          document.body.setAttribute('data-mood', m.key);
+          wrap.classList.add('hidden');
+          if (mode === 'recs') {
+            await refreshRecs();
+          }
+        });
+        holder.appendChild(b);
+      });
+      wrap.classList.remove('hidden');
+      $('#closePopup').onclick = () => wrap.classList.add('hidden');
+    }
+
+    // ────────────────────────── 버튼들
+    $('#playBtn').onclick = () => { try { ytPlayer.playVideo(); } catch { } };
+    $('#pauseBtn').onclick = () => { try { ytPlayer.pauseVideo(); } catch { } };
+
+    $('#addToPlaylistBtn').onclick = () => gate(async () => {
+      if (!currentTrack) return;
+      let { items } = await API.playlists().catch(() => ({ items: [] }));
+      // 없으면 하나 생성
+      if (!items || !items[0]) {
+        const created = await API.createPlaylist({ title: '내 재생목록', isPublic: false });
+        items = [{ id: created.id, title: '내 재생목록' }];
+      }
+      await API.addToPlaylist({
+        playlistId: items[0].id,
+        trackId: currentTrack.id,
+        position: 0
+      });
+      alert('재생목록에 추가했습니다.');
+    });
+
+    $('#moreRecsBtn').onclick = ()=> {
+      const { mood, genre, nation, tone, sub } = currentParams;
+      const sp = new URLSearchParams();
+      if (mood)  sp.set('mood',  mood);
+      if (genre) sp.set('genre', genre);
+      if (nation)sp.set('nation',nation);
+      if (tone)  sp.set('tone',  tone);  
+      if (sub)   sp.set('sub',   sub);  
+      location.href = `./search.html?${sp.toString()}`;
+    };
+  </script>
+</body>
+</html>
diff --git a/Front end/public/playlist.html b/Front end/public/playlist.html
new file mode 100644
index 0000000..0c927cc
--- /dev/null
+++ b/Front end/public/playlist.html	
@@ -0,0 +1,552 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8"/>
+  <!-- 문서의 문자 인코딩을 UTF-8로 설정합니다. 한글 등 다국어 문자를 올바르게 표시하기 위해 필요합니다. -->
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <!-- 반응형 표시를 위해 뷰포트 메타 태그를 설정합니다. 모바일 화면에서 페이지가 화면 폭에 맞게 렌더링됩니다. -->
+  <title>Emotion Playlist · Playlists</title>
+  <!-- 브라우저 탭에 표시될 문서 제목을 지정합니다. -->
+  <link rel="stylesheet" href="./assets/styles.css"/>
+  <!-- 외부 스타일시트(styles.css)를 불러옵니다. 이 파일은 페이지의 전반적인 스타일을 담당합니다. -->
+  <style>
+    /* 내 재생목록 가로 스크롤 */
+    .my-playlists-row {
+      display: flex;
+      /* 요소를 가로로 나열하기 위해 flexbox 컨테이너로 만듭니다. */
+      gap: 16px;
+      /* 각 항목 사이의 간격을 16픽셀로 설정합니다. */
+      overflow-x: auto;
+      /* 가로로 넘칠 경우 스크롤을 허용합니다(수평 스크롤). */
+      padding: 8px 4px 4px;
+      /* 내부 여백을 각각 위 8px, 좌우 4px, 아래 4px로 설정합니다. */
+      scrollbar-width: thin;
+      /* Firefox에서 스크롤바 너비를 얇게 보여달라는 힌트입니다. */
+    }
+    .my-playlists-row::-webkit-scrollbar {
+      height: 6px;
+      /* WebKit(크롬 등)에서 가로 스크롤바의 높이를 6px로 지정합니다. */
+    }
+
+    /* 재생목록 카드 */
+    .pl-card {
+      position: relative;
+      /* 내부의 절대 위치 요소(삭제 버튼 등)를 배치하기 위해 상대 위치를 사용합니다. */
+      min-width: 220px;
+      /* 카드의 최소 너비를 220px로 지정합니다. */
+      max-width: 220px;
+      /* 카드의 최대 너비를 220px로 고정해 카드 크기가 일관되도록 합니다. */
+      background: var(--card);
+      /* 카드 배경색은 CSS 변수 --card 값을 사용합니다(테마 대응). */
+      border-radius: 16px;
+      /* 모서리를 둥글게 만듭니다(16px 반경). */
+      padding: 12px;
+      /* 카드 내부 여백을 12px로 설정합니다. */
+      display: flex;
+      /* 카드 내부 요소들을 세로/가로 정렬에 편리한 flex로 만듭니다. */
+      flex-direction: column;
+      /* 내부 요소들을 세로(열)로 배치합니다. */
+      gap: 8px;
+      /* 내부 요소들 사이 간격을 8px로 설정합니다. */
+      cursor: pointer;
+      /* 카드 전체를 클릭 가능한 것처럼 보이게 마우스 포인터를 변경합니다. */
+      transition: transform .15s ease, box-shadow .15s ease;
+      /* 호버 시 변형 애니메이션을 부드럽게 처리합니다(이동/그림자). */
+    }
+    .pl-card:hover {
+      transform: translateY(-2px);
+      /* 마우스가 올라가면 카드가 살짝 위로 떠 보이도록 이동합니다. */
+      box-shadow: 0 10px 25px rgba(0,0,0,.55);
+      /* 호버 시 그림자를 깊게 하여 부각시킵니다. */
+    }
+
+    /* 재생목록 삭제 버튼 (호버 시 노출) */
+    .pl-delete-btn {
+      position: absolute;
+      /* 부모(.pl-card)를 기준으로 절대 위치합니다. */
+      bottom: 6px;
+      /* 카드 하단으로부터 6px 위에 위치합니다. */
+      right: 8px;
+      /* 카드 오른쪽에서 8px 떨어진 위치에 배치합니다. */
+      padding: 4px 6px;
+      /* 버튼의 내부 여백을 위/아래 4px, 좌/우 6px로 설정합니다. */
+      font-size: 13px;
+      /* 버튼 텍스트 크기를 13px로 설정합니다. */
+      border-radius: 999px;
+      /* 둥근 모서리(완전 원형에 가까운 형태)를 만듭니다. */
+      border: none;
+      /* 기본 테두리를 제거합니다. */
+      background: rgba(255, 80, 80, 0.9);
+      /* 붉은색 계열의 배경을 주어 삭제 버튼임을 시각적으로 표시합니다. */
+      color: #fff;
+      /* 버튼 텍스트 색상을 흰색으로 설정합니다. */
+      cursor: pointer;
+      /* 클릭 가능한 요소임을 나타내는 포인터로 변경합니다. */
+      opacity: 0;                 /* 기본은 숨김 */
+      /* 기본적으로 보이지 않게 합니다. */
+      transform: translateY(4px); /* 살짝 내려가 있게 */
+      /* 시각적으로 버튼이 아래에 있는 것처럼 시작 위치를 설정합니다. */
+      transition: opacity .15s ease, transform .15s ease;
+      /* 표시/숨김과 이동 전환을 부드럽게 처리합니다. */
+      z-index: 5;                 /* 재생 hover 위에 올라오게 */
+      /* 다른 요소보다 위에 표시되도록 z-index를 높입니다. */
+      pointer-events: none;       /* 기본은 클릭 안 됨 (호버 때 켜짐) */
+      /* 기본적으로 클릭 불가 상태로 두어 호버 시만 클릭되도록 만듭니다. */
+    }
+    .pl-card:hover .pl-delete-btn {
+      opacity: 1;
+      /* 카드에 마우스를 올리면 버튼이 보이도록 합니다. */
+      transform: translateY(0);
+      /* 버튼을 원위치로 이동시켜 자연스럽게 나타나게 합니다. */
+      pointer-events: auto;       /* 카드에 호버되면 클릭 가능 */
+      /* 이제 클릭 이벤트가 가능해집니다. */
+    }
+    .pl-delete-btn:hover {
+      background: rgba(255, 40, 40, 1);
+      /* 버튼에 마우스를 올리면 색을 더 진하게 해서 피드백을 줍니다. */
+    }
+
+
+    /* 커버(썸네일들 모인 사각형) */
+    .pl-cover {
+  position: relative; /* 부모 컨테이너 기준 상대 위치 지정 */
+  width: 100%; /* 가로 100% */
+  aspect-ratio: 1/1; /* 정사각형 비율 유지 */
+  border-radius: 12px; /* 둥근 모서리 */
+  overflow: hidden; /* 내부 내용이 넘치면 숨김 */
+  background: linear-gradient(135deg,#111,#222); /* 기본 그라데이션 배경 */
+  display: grid; /* 2x2 그리드로 구성 */
+  grid-template-columns: repeat(2,1fr); /* 2열 균등 분할 */
+  grid-template-rows: repeat(2,1fr); /* 2행 균등 분할 */
+  gap: 2px; /* 격자 간격 2px */
+}
+
+.pl-cover img {
+  width: 100%; /* 이미지 가로 100% */
+  height: 100%; /* 이미지 세로 100% */
+  object-fit: cover; /* 비율 유지하며 영역 채우기 */
+  display: block; /* 블록 요소로 표시 */
+}
+
+.pl-cover-fallback {
+  grid-column: 1 / 3; /* 가로 2칸 모두 차지 */
+  grid-row: 1 / 3; /* 세로 2칸 모두 차지 */
+  display:flex; /* 중앙 정렬을 위한 flex */
+  align-items:center; /* 세로 중앙 정렬 */
+  justify-content:center; /* 가로 중앙 정렬 */
+  font-size:32px; /* 글자 크기 */
+  opacity:.6; /* 반투명 */
+}
+
+
+    /* hover 재생 버튼 */
+.pl-play-hover {
+  position:absolute; /* 부모 기준 절대 위치 */
+  inset:0; /* 상하좌우 0으로 전체 덮기 */
+  display:flex; /* 중앙 정렬을 위한 flex */
+  align-items:center; /* 세로 중앙 정렬 */
+  justify-content:center; /* 가로 중앙 정렬 */
+  background:linear-gradient(135deg,rgba(0,0,0,.0),rgba(0,0,0,.45)); /* 위에서 아래로 그라데이션 오버레이 */
+  opacity:0; /* 초기에는 숨김 */
+  transition:opacity .15s ease, transform .15s ease; /* 부드러운 표시/확대 애니메이션 */
+  pointer-events:none; /* 초기에는 클릭 이벤트 무시 */
+}
+
+.pl-card:hover .pl-play-hover {
+  opacity:1; /* 카드 호버 시 표시 */
+  transform:scale(1.02); /* 살짝 확대 */
+  pointer-events:auto; /* 클릭 가능 */
+}
+
+.pl-play-btn {
+  width:56px; /* 버튼 가로 */
+  height:56px; /* 버튼 세로 */
+  border-radius:50%; /* 원형 버튼 */
+  border:none; /* 테두리 제거 */
+  display:flex; /* 아이콘 중앙 정렬 */
+  align-items:center; /* 세로 중앙 */
+  justify-content:center; /* 가로 중앙 */
+  background:var(--accent, #1ed760); /* 기본 녹색 강조색 */
+  font-size:24px; /* 아이콘 크기 */
+  cursor:pointer; /* 마우스 포인터 변경 */
+}
+
+.pl-meta-title {
+  font-weight:600; /* 제목 두껍게 */
+  font-size:16px; /* 제목 크기 */
+}
+
+.pl-meta-sub {
+  font-size:12px; /* 부제목 크기 */
+  opacity:.7; /* 반투명 */
+}
+
+
+    /* 공유 재생목록 리스트 */
+.pl-public-row {
+  display:flex; /* 행 레이아웃 */
+  gap:10px; /* 항목 간격 */
+  align-items:center; /* 세로 중앙 정렬 */
+  padding:8px 0; /* 위아래 여백 */
+  border-bottom:1px solid rgba(255,255,255,.04); /* 아래 구분선 */
+  cursor:pointer; /* 마우스 포인터 변경 */
+}
+
+.pl-public-thumb {
+  width:56px; /* 썸네일 가로 */
+  height:56px; /* 썸네일 세로 */
+  border-radius:8px; /* 모서리 둥글게 */
+  background:#111; /* 기본 배경색 */
+  overflow:hidden; /* 내용 넘침 숨김 */
+  flex-shrink:0; /* 축소 방지 */
+  display:grid; /* 2x2 그리드 */
+  grid-template-columns:repeat(2,1fr); /* 열 2칸 */
+  grid-template-rows:repeat(2,1fr); /* 행 2칸 */
+  gap:1px; /* 그리드 간격 */
+}
+
+.pl-public-thumb img {
+  width:100%; 
+  height:100%; 
+  object-fit:cover; /* 이미지 영역 채우기 */
+}
+
+.badge-pill {
+  border-radius:999px; /* 둥근 배지 */
+  padding:2px 8px; /* 안쪽 여백 */
+  font-size:11px; /* 글자 크기 */
+  background:rgba(255,255,255,.08); /* 반투명 배경 */
+}
+  </style>
+</head>
+<body data-mood="calm" data-auth-required="playlist"> <!-- 페이지 바디, 감정/권한 속성 -->
+
+<header class="topbar">
+  <div class="brand">📂 재생목록</div> <!-- 상단 브랜드 로고/텍스트 -->
+  <nav class="nav">
+    <!-- 상단 내비게이션 메뉴 -->
+    <a href="./home.html" class="btn">홈</a>
+    <!-- 홈 페이지로 이동하는 링크입니다. -->
+    <a href="./search.html" class="btn">검색</a>
+    <!-- 검색 페이지로 이동하는 링크입니다. -->
+    <a href="./playlist.html" class="btn">내 재생목록</a>
+    <!-- 현재 페이지(내 재생목록)로 연결되는 링크입니다. -->
+    <a href="./login.html" id="loginLink" class="btn">로그인</a>
+    <!-- 로그인 페이지로 이동하는 링크입니다. 로그인 상태에 따라 숨기거나 교체될 수 있습니다. -->
+    <span id="userBadge" class="badge hidden"></span> <!-- 로그인 사용자 이름 표시 -->
+    <!-- 로그인된 사용자의 이름이나 닉네임을 표시하는 배지 요소(초기엔 hidden으로 숨김) -->
+    <button id="logoutBtn" class="btn hidden">로그아웃</button> <!-- 로그인 시 활성화 -->
+    <!-- 로그아웃 버튼(초기에는 숨김). 로그인 상태면 보이고, 클릭 시 로그아웃 이벤트가 발생해야 합니다. -->
+  </nav>
+</header>
+
+<main style="padding:16px;display:flex;flex-direction:column;gap:24px"> <!-- 메인 콘텐츠 영역, 세로 레이아웃, 항목 간격 -->
+  <!-- 여기서부터 실제 페이지 콘텐츠(내 재생목록 목록, 공유 목록 등)를 구성하는 요소들이 들어갑니다. -->
+</main>
+</body>
+</html>
+
+
+  <!-- 내 재생목록 (가로 스크롤 첫 줄) -->
+  <section class="panel">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:12px">
+      <div class="title">내 재생목록</div>
+      <div style="display:flex;gap:8px;align-items:center">
+        <input id="plTitle"
+              placeholder="재생목록 이름"
+              style="padding:8px 10px;border-radius:999px;min-width:180px;
+                      background:var(--card);color:var(--text);
+                      border:1px solid rgba(255,255,255,.16)"/>
+
+        <!-- 🎨 재생목록 색 선택 -->
+        <div style="display:flex;align-items:center;gap:6px;font-size:12px;">
+          <span class="sub" style="opacity:.8;">테마 색</span>
+          <input id="plColor"
+                type="color"
+                value="#22d3ee"
+                style="width:32px;height:32px;border-radius:50%;border:none;padding:0;cursor:pointer;background:transparent;"/>
+        </div>
+  <button id="createPL" class="btn primary">생성</button>
+</div>
+
+    </div>
+
+    <div id="myPlaylistsRow" class="my-playlists-row">
+      <!-- JS 렌더링 -->
+    </div>
+  </section>
+
+  <!-- 공유 재생목록 (아래, 세로 스크롤) -->
+  <section class="panel" style="max-height:420px;overflow-y:auto;">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px">
+      <div class="title">공유 재생목록</div>
+      <div style="display:flex;gap:4px">
+        <button class="btn" id="sortRecent" data-sort="recent">최신</button>
+        <button class="btn" id="sortPopular" data-sort="popular">인기</button>
+      </div>
+    </div>
+
+    <div id="publicLists">
+      <!-- JS 렌더링 -->
+    </div>
+  </section>
+</main>
+
+<script src="./assets/api.js"></script>
+<script src="./assets/auth.js"></script>
+<script>
+  // 페이지 로드되자마자 로그인 여부 확인
+if (window.Auth) {
+  Auth.requireLogin('playlist'); // 로그인 필요 페이지일 경우 인증 체크
+}
+
+const $ = (s) => document.querySelector(s); // 간단한 선택자 함수
+
+function buildCoverThumbs(items) {
+  // 최대 4개의 썸네일 이미지 추출
+  // items 배열에서 썸네일만 뽑아 최대 4개로 제한하는 유틸 함수
+  const thumbs = (items || [])
+    .map(t => t.thumb) // thumb 속성만 추출
+    .filter(Boolean)   // null/undefined 제거
+    .slice(0, 4);     // 최대 4개
+  return thumbs;
+}
+
+function goPlaylistDetail(id) {
+  // 특정 재생목록 상세 페이지로 이동
+  // 재생목록 아이디를 쿼리스트링에 안전하게 넣어 페이지 전환
+  location.href = `./playlist_view.html?id=${encodeURIComponent(id)}`;
+}
+
+async function renderMy() {
+  const row = $('#myPlaylistsRow'); // 내 재생목록 컨테이너 선택
+  row.innerHTML = ''; // 초기화
+
+  try {
+    const res = await API.playlists(); // 서버에서 내 재생목록 가져오기
+    console.log('▶ /api/playlists 결과:', res); // 디버깅용
+    const items = res.items || [];
+
+    if (!items.length) {
+      // 재생목록이 없을 경우 안내 메시지
+      // 사용자에게 생성 유도 문구를 표시
+      row.innerHTML =
+        '<div class="sub" style="opacity:.7;padding:4px 8px;">아직 만든 재생목록이 없습니다. 오른쪽에서 새로 만들어 보세요.</div>';
+      return;
+    }
+
+      items.forEach(pl => {
+        const card = document.createElement('div');
+        card.className = 'pl-card'; // 재생목록 카드 컨테이너
+        card.dataset.id = pl.id; // 혹시 나중에 쓸 수 있으니 넣어둠
+
+        // 🔥 이 재생목록의 색 (없으면 기본)
+        const theme = pl.theme_color || '#22d3ee'; // 테마 색상, 없으면 기본 색 사용
+        // 카드 배경에 그라데이션을 적용해 시각적 구분을 줌
+        card.style.background = `linear-gradient(135deg, ${theme}25, #020617)`; // 카드 배경 그라데이션
+        // 테두리 색도 테마 색의 반투명으로 설정
+        card.style.border = `1px solid ${theme}55`; // 카드 테두리 색상
+
+        const thumbs = buildCoverThumbs(pl.items); // 최대 4개의 썸네일 가져오기
+        const cover = document.createElement('div');
+        cover.className = 'pl-cover'; // 썸네일 컨테이너
+
+        if (thumbs.length) {
+          // 썸네일이 있을 경우
+          // 각 썸네일 이미지를 img 요소로 만들어 커버에 추가
+          thumbs.forEach(src => {
+            const img = document.createElement('img');
+            img.src = src; // 이미지 경로
+            img.alt = 'thumb'; // 대체 텍스트
+            cover.appendChild(img);
+          });
+          // 썸네일이 4개 미만이면 남은 칸을 배경 div로 채움
+          // 이렇게 하면 레이아웃이 일정하게 유지됨
+          while (cover.childElementCount < 4) {
+            const div = document.createElement('div');
+            div.style.background = '#111';
+            cover.appendChild(div);
+          }
+        } else {
+          // 썸네일 없을 경우 fallback 표시
+          // 기본 아이콘을 보여줘 빈 상태를 표시
+          const fallback = document.createElement('div');
+          fallback.className = 'pl-cover-fallback';
+          fallback.textContent = '🎵'; // 음악 아이콘
+          cover.appendChild(fallback);
+        }
+
+        const hover = document.createElement('div');
+        // 썸네일 위에 표시되는 재생 오버레이 영역
+        hover.className = 'pl-play-hover'; // 호버 시 재생 버튼 오버레이
+        const playBtn = document.createElement('button');
+        // 재생 버튼 요소 생성 (오버레이 안에 들어감)
+        playBtn.className = 'pl-play-btn'; // 재생 버튼 스타일
+        playBtn.innerHTML = '▶'; // 재생 아이콘
+
+        // 버튼 배경도 재생목록 색으로
+        // 재생목록의 시각적 일관성을 유지하기 위함
+        playBtn.style.background = theme;
+        hover.appendChild(playBtn);
+        // 오버레이를 썸네일 컨테이너에 추가하여 마우스 호버 시 표시
+        cover.appendChild(hover);
+
+
+        // 🔥 여기: 삭제 버튼 추가
+        deleteBtn.addEventListener('click', async (e) => {
+        e.stopPropagation(); // 클릭 이벤트 버블링 방지
+        if (!confirm(`"${pl.title}" 재생목록을 삭제할까요?`)) return; // 삭제 확인
+
+      try {
+        const res = await API.deletePlaylist(pl.id); // API 호출: 재생목록 삭제
+        if (res.ok) {
+          card.remove(); // 삭제 성공 시 카드 제거
+          if (!row.children.length) {
+            // 카드가 없으면 안내 메시지 표시
+            row.innerHTML =
+              '<div class="sub" style="opacity:.7;padding:4px 8px;">아직 만든 재생목록이 없습니다. 오른쪽에서 새로 만들어 보세요.</div>';
+          }
+        } else {
+          alert('삭제 실패: ' + (res.error || '알 수 없는 오류')); // 실패 알림
+        }
+      } catch (err) {
+        console.warn('▶ /api/playlists/:id DELETE 실패:', err); // 콘솔 로그
+        alert('재생목록 삭제 중 오류가 발생했습니다.'); // 예외 처리
+      }
+    });
+
+        row.appendChild(card); // 카드 row에 추가
+      });
+    } catch (e) {
+  console.warn('▶ /api/playlists 실패:', e); // 내 재생목록 가져오기 실패 로그
+
+  if (e && (e.status === 401 || e.error === 'login required')) {
+    alert('로그인 후 이용해 주세요.');
+    location.href = './login.html?redirect=playlist'; // 로그인 페이지로 이동
+    return;
+  }
+
+  row.innerHTML =
+    '<div class="sub" style="color:#f66;">내 재생목록을 불러올 수 없습니다.</div>'; // 오류 메시지
+}
+}
+
+// 공개 재생목록 렌더링 함수
+async function renderPublic(sort = 'recent') {
+  const wrap = $('#publicLists'); // 공개 재생목록 컨테이너
+  wrap.innerHTML = ''; // 초기화
+
+  try {
+    const res = await API.publicPlaylists({ sort, limit: 50 }); // 공개 재생목록 API 호출
+    console.log('▶ /api/playlists/public 결과:', res); // 디버깅
+    const items = res.items || [];
+
+    if (!items.length) {
+      wrap.innerHTML =
+        '<div class="sub" style="opacity:.7;">공개 재생목록이 없습니다.</div>'; // 안내 메시지
+      return;
+    }
+
+    items.forEach(pl => {
+      const row = document.createElement('div');
+      row.className = 'pl-public-row'; // 공개 재생목록 행
+
+      const thumbBox = document.createElement('div');
+      thumbBox.className = 'pl-public-thumb'; // 썸네일 박스
+
+      const thumbs = buildCoverThumbs(pl.items); // 썸네일 최대 4개
+      if (thumbs.length) {
+        thumbs.forEach(src => {
+          const img = document.createElement('img');
+          img.src = src;
+          img.alt = 'thumb';
+          thumbBox.appendChild(img); // 썸네일 이미지를 thumbBox에 추가
+        });
+        while (thumbBox.childElementCount < 4) {
+          const d = document.createElement('div');
+          d.style.background = '#111'; // 빈 칸 채우기
+          thumbBox.appendChild(d);
+        }
+      } else {
+        // 썸네일 없을 경우 fallback
+        const d = document.createElement('div');
+        d.style.gridColumn = '1/3';
+        d.style.gridRow = '1/3';
+        d.style.display = 'flex';
+        d.style.alignItems = 'center';
+        d.style.justifyContent = 'center';
+        d.textContent = '🎵'; // 기본 음악 아이콘
+        thumbBox.appendChild(d);
+      }
+
+      const meta = document.createElement('div'); // 메타 정보
+      meta.style.flex = '1';
+      meta.innerHTML = `
+        <div class="title" style="font-size:15px;">${pl.title}</div>
+        <div class="sub" style="font-size:12px;">
+          ${pl.owner_name || '익명'} · 트랙 ${(pl.items || []).length}개
+        </div>
+      `; // 제목과 소유자 정보, 트랙 수 표시
+
+      const right = document.createElement('div'); // 좋아요 및 공개 여부
+      right.style.display = 'flex';
+      right.style.flexDirection = 'column';
+      right.style.alignItems = 'flex-end';
+      right.innerHTML = `
+        <span class="badge-pill">♥ ${pl.likes || 0}</span> <!-- 좋아요 개수 표시 -->
+        <span class="sub" style="font-size:11px;margin-top:4px;">${pl.is_public ? '공개' : '비공개'}</span> <!-- 공개 여부 -->
+      `;
+
+      row.appendChild(thumbBox); // 썸네일 추가
+      row.appendChild(meta); // 메타 정보 추가
+      row.appendChild(right); // 오른쪽 정보 추가
+
+      row.addEventListener('click', () => {
+        goPlaylistDetail(pl.id); // 클릭 시 상세 페이지 이동
+      });
+
+      wrap.appendChild(row); // 공개 재생목록 추가
+    });
+  } catch (e) {
+    console.warn('▶ /api/playlists/public 실패:', e); // 오류 로그
+    wrap.innerHTML =
+      '<div class="sub" style="color:#f66;">공개 재생목록을 불러올 수 없습니다.</div>'; // 오류 메시지
+  }
+}
+
+// 재생목록 생성
+$('#createPL').addEventListener('click', async () => {
+  const input = $('#plTitle'); // 제목 입력
+  const colorInput = $('#plColor'); // 색상 입력
+  const title = input.value.trim();
+  if (!title) {
+    alert('재생목록 이름을 입력하세요.');
+    input.focus(); // 입력란에 포커스
+    return;
+  }
+
+  const themeColor = (colorInput && colorInput.value) ? colorInput.value : '#22d3ee'; // 기본 테마 색
+
+  try {
+    const res = await API.createPlaylist({ title, isPublic: false, themeColor }); // API 호출: 재생목록 생성
+    console.log('▶ /api/playlists POST 결과:', res);
+    input.value = ''; // 입력 초기화
+    await renderMy(); // 내 재생목록 다시 렌더
+  } catch (e) {
+    console.warn('▶ /api/playlists POST 실패:', e);
+    if (e && (e.status === 401 || e.error === 'login required')) {
+      alert('로그인 후 이용해 주세요.');
+      location.href = './login.html?redirect=playlist'; // 로그인 페이지로 이동
+    } else {
+      alert('재생목록 생성 실패: ' + (e?.error ?? '알 수 없는 오류')); // 기타 오류 알림
+    }
+  }
+});
+
+// 공개 재생목록 정렬 버튼 이벤트
+$('#sortRecent').addEventListener('click', () => renderPublic('recent')); // 최신순 버튼
+$('#sortPopular').addEventListener('click', () => renderPublic('popular')); // 인기순 버튼
+
+// 초기 렌더링
+renderMy(); // 내 재생목록 렌더링
+renderPublic('recent'); // 공개 재생목록 최신순 렌더링
diff --git a/Front end/public/playlist_view.html b/Front end/public/playlist_view.html
new file mode 100644
index 0000000..aa10a99
--- /dev/null
+++ b/Front end/public/playlist_view.html	
@@ -0,0 +1,787 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <title>Emotion Playlist · Playlist</title>
+
+  <link rel="stylesheet" href="./assets/styles.css"/>
+
+  <style>
+    /* ================================
+       1. 상단 플레이리스트 정보 박스 (헤더 영역)
+       ================================ */
+    #headerSection{
+      /* 박스의 모서리를 18px만큼 둥글게 깎습니다. */
+      border-radius:18px;
+      /* 박스 밖으로 튀어나가는 내용은 안 보이게 숨깁니다. */
+      overflow:hidden;
+      /* 배경색 설정: --panel 변수가 있으면 쓰고, 없으면 진한 남색(rgba)을 씁니다. */
+      background: var(--panel, rgba(15,23,42,0.98));
+      /* 테두리는 아주 얇고 투명한 회색 실선으로 설정합니다. */
+      border:1px solid rgba(148,163,184,0.25);
+      /* 테두리색, 그림자, 배경색이 변할 때 0.2초 동안 부드럽게 바뀌도록 합니다. */
+      transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
+    }
+
+    /* 자바스크립트로 테마가 적용되었을 때(.theme-colored 클래스 추가 시) 스타일 */
+    #headerSection.theme-colored{
+      /* 박스 그림자를 크고 진하게 줘서 공중에 뜬 느낌을 줍니다. */
+      box-shadow:0 22px 60px rgba(0,0,0,.75);
+    }
+
+    /* ================================
+       2. 전체 레이아웃 (감싸는 컨테이너)
+       ================================ */
+    .plv-wrap {
+      /* 내부 요소들을 유연하게 배치하는 Flexbox 모드를 켭니다. */
+      display:flex;
+      /* 요소들을 가로가 아닌 세로 방향(위->아래)으로 쌓습니다. */
+      flex-direction:column;
+      /* 요소들 사이의 간격을 16px로 벌립니다. */
+      gap:16px;
+      /* 컨테이너 안쪽 여백을 16px 줍니다. */
+      padding:16px;
+    }
+
+    /* 플레이리스트 상단 정보 (커버이미지 + 텍스트) 레이아웃 */
+    .plv-header {
+      /* 가로 배치를 위해 Flexbox를 사용합니다. */
+      display:flex;
+      /* 커버와 텍스트 사이 간격을 20px 줍니다. */
+      gap:20px;
+      /* 내용물들을 아래쪽 라인(바닥)에 맞춰 정렬합니다. */
+      align-items:flex-end;
+    }
+
+    /* ================================
+       3. 앨범 커버 이미지 (2x2 격자 모양)
+       ================================ */
+    .plv-cover {
+      /* 너비를 180px로 고정합니다. */
+      width:180px;
+      /* 높이도 180px로 고정합니다. (정사각형) */
+      height:180px;
+      /* 모서리를 16px 둥글게 합니다. */
+      border-radius:16px;
+      /* 이미지가 없을 때 뒤에 보일 배경색(아주 어두운 색)입니다. */
+      background:#020617;
+      /* 둥근 모서리 밖으로 이미지가 튀어나가지 않게 자릅니다. */
+      overflow:hidden;
+
+      /* 내부 이미지를 2x2 바둑판 모양으로 배치하기 위해 Grid를 씁니다. */
+      display:grid;
+      /* 가로로 2칸을 똑같은 비율(1fr)로 만듭니다. */
+      grid-template-columns:repeat(2,1fr);
+      /* 세로로 2칸을 똑같은 비율(1fr)로 만듭니다. */
+      grid-template-rows:repeat(2,1fr);
+      /* 이미지 사이의 틈을 2px 줍니다. */
+      gap:2px;
+
+      /* 화면이 좁아져도 이 커버 박스는 찌그러지지 않게 고정합니다. */
+      flex-shrink:0;
+    }
+
+    /* 커버 안의 이미지 태그 스타일 */
+    .plv-cover img {
+      /* 너비를 부모 칸에 꽉 차게(100%) 합니다. */
+      width:100%;
+      /* 높이를 부모 칸에 꽉 차게(100%) 합니다. */
+      height:100%;
+      /* 비율이 안 맞아도 꽉 차게 보이도록(잘리더라도) 설정합니다. */
+      object-fit:cover;
+    }
+
+    /* 플레이리스트 제목 텍스트 스타일 */
+    .plv-title {
+      /* 글자 크기를 28px로 크게 합니다. */
+      font-size:28px;
+      /* 글자 굵기를 굵게(700) 설정합니다. */
+      font-weight:700;
+      /* 아래쪽 여백을 4px 줍니다. */
+      margin-bottom:4px;
+    }
+
+    /* 부가 정보(곡 수, 좋아요 등) 텍스트 스타일 */
+    .plv-sub {
+      /* 글자 크기를 13px로 작게 합니다. */
+      font-size:13px;
+      /* 투명도를 0.7로 줘서 약간 흐릿하게(덜 강조되게) 합니다. */
+      opacity:.7;
+    }
+
+    /* 버튼들이 모여있는 영역 스타일 */
+    .plv-controls {
+      /* 버튼들을 가로로 배치합니다. */
+      display:flex;
+      /* 공간이 부족하면 다음 줄로 넘어가게 합니다. */
+      flex-wrap:wrap;
+      /* 버튼 사이 간격을 8px 줍니다. */
+      gap:8px;
+      /* 위쪽 여백을 12px 줍니다. */
+      margin-top:12px;
+      /* 버튼들의 세로 중앙을 맞춥니다. */
+      align-items:center;
+    }
+
+    /* ================================
+       4. 노래 목록 리스트 (한 줄 스타일)
+       ================================ */
+    .plv-track-row {
+      /* 내부 배치를 위해 Grid를 사용합니다. */
+      display:grid;
+
+      /* 3칸으로 나눕니다: [번호 24px] [제목/가수 (남은공간 전부)] [오른쪽버튼 80px] */
+      grid-template-columns:24px minmax(0,1fr) 80px;
+      /* 각 칸 사이 간격을 8px 줍니다. */
+      gap:8px;
+      /* 세로 방향 가운데 정렬합니다. */
+      align-items:center;
+
+      /* 안쪽 여백: 위아래 6px, 좌우 10px */
+      padding:6px 10px;
+      /* 모서리를 8px 둥글게 합니다. */
+      border-radius:8px;
+      /* 마우스를 올리면 클릭 가능한 손가락 모양 커서가 됩니다. */
+      cursor:pointer;
+    }
+
+    /* 트랙 한 줄에 마우스를 올렸을 때(hover) 스타일 */
+    .plv-track-row:hover {
+      /* 배경색을 연한 회색으로 바꿔서 선택된 느낌을 줍니다. */
+      background:rgba(148,163,184,.10);
+    }
+
+    /* 노래 정보(앨범아트 + 텍스트)를 묶는 박스 */
+    .plv-track-main {
+      /* 가로 배치를 합니다. */
+      display:flex;
+      /* 이미지와 글자 사이 간격을 10px 줍니다. */
+      gap:10px;
+      /* 세로 중앙 정렬합니다. */
+      align-items:center;
+      /* 글자가 넘칠 때 말줄임표(...) 처리를 위해 최소 너비를 0으로 잡습니다. */
+      min-width:0;
+    }
+
+    /* 리스트 안의 작은 앨범 이미지 */
+    .plv-track-main img {
+      /* 너비 44px */
+      width:44px;
+      /* 높이 44px */
+      height:44px;
+      /* 모서리 둥글게 */
+      border-radius:8px;
+      /* 비율 유지하며 꽉 채우기 */
+      object-fit:cover;
+      /* 이미지가 찌그러지지 않게 고정 */
+      flex-shrink:0;
+    }
+
+    /* 노래 제목 스타일 */
+    .plv-track-title {
+      /* 글자 크기 14px */
+      font-size:14px;
+
+      /* 제목이 길어지면 줄바꿈 하지 않고 한 줄로 표시합니다. */
+      white-space:nowrap;
+      /* 넘치는 글자는 안 보이게 숨깁니다. */
+      overflow:hidden;
+      /* 잘린 부분 끝에 '...'을 붙여줍니다. */
+      text-overflow:ellipsis;
+    }
+
+    /* 가수 이름 등 보조 텍스트 스타일 */
+    .plv-track-sub {
+      /* 글자 크기 12px */
+      font-size:12px;
+      /* 투명도를 줘서 흐리게 표시 */
+      opacity:.7;
+    }
+
+    /* ================================
+       5. 테마 색상 고르는 UI 스타일
+       ================================ */
+    .theme-color-wrap{
+      /* 가로 배치 */
+      display:flex;
+      /* 세로 중앙 정렬 */
+      align-items:center;
+      /* 간격 6px */
+      gap:6px;
+      /* 글자 크기 12px */
+      font-size:12px;
+    }
+    /* 색상 선택기(input type="color") 디자인 커스텀 */
+    .theme-color-wrap input[type="color"]{
+      /* 너비 28px */
+      width:28px;
+      /* 높이 28px */
+      height:28px;
+      /* 완전 동그라미로 만듭니다. */
+      border-radius:50%;
+      /* 기본 테두리 제거 */
+      border:none;
+      /* 안쪽 여백 제거 */
+      padding:0;
+      /* 배경 투명하게 */
+      background:transparent;
+      /* 마우스 올리면 손가락 커서 */
+      cursor:pointer;
+    }
+  </style>
+</head>
+<body data-mood="calm">
+<header class="topbar">
+  <div class="brand">📂 재생목록</div>
+  <nav class="nav">
+    <a href="./home.html" class="btn">홈</a>
+    <a href="./search.html" class="btn">검색</a>
+    <a href="./playlist.html" class="btn">재생목록</a>
+    <a href="./login.html" id="loginLink" class="btn">로그인</a>
+    <span id="userBadge" class="badge hidden"></span>
+    <button id="logoutBtn" class="btn hidden">로그아웃</button>
+  </nav>
+</header>
+
+<main class="plv-wrap">
+  <section id="headerSection" class="panel">
+    </section>
+
+  <section class="panel">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px">
+      <div class="sub">트랙 목록</div>
+      <button id="goAddFromSearch" class="btn">곡 추가하기 (검색으로 이동)</button>
+    </div>
+    <div id="trackList">
+    </div>
+  </section>
+</main>
+
+<script src="./assets/api.js"></script>
+<script src="./assets/auth.js"></script>
+<script>
+  // document.querySelector를 매번 쓰기 귀찮아서 $로 줄여 씁니다.
+  const $ = (s) => document.querySelector(s);
+  // 현재 페이지 주소창의 파라미터(?id=...)를 읽어오는 도구입니다.
+  const searchParams = new URLSearchParams(location.search);
+  // 주소에서 'id' 값(플레이리스트 ID)을 가져옵니다.
+  const playlistId = searchParams.get('id');
+
+  // 만약 ID가 없다면 (잘못 들어온 경우)
+  if (!playlistId) {
+    // 경고창을 띄우고
+    alert('잘못된 접근입니다.');
+    // 목록 페이지로 강제로 이동시킵니다.
+    location.href = './playlist.html';
+  }
+
+  // ─────────────────────────────────────────
+  // [색상 계산 도구] 
+  // ─────────────────────────────────────────
+  
+  // 16진수 색상 코드(#ffffff)를 RGB 숫자({r,g,b}) 객체로 변환하는 함수
+  function hexToRgb(hex) {
+    // 만약 색상 코드가 없으면 흰색(255,255,255)을 반환합니다.
+    if (!hex) return { r: 255, g: 255, b: 255 };
+    // 앞에 붙은 '#' 기호를 제거합니다.
+    let c = hex.replace('#', '').trim();
+    // 만약 #abc 처럼 3자리 코드라면 #aabbcc 처럼 6자리로 늘려줍니다.
+    if (c.length === 3) {
+      c = c.split('').map(ch => ch + ch).join('');
+    }
+    // 16진수 문자열을 10진수 숫자로 변환합니다.
+    const num = parseInt(c, 16);
+    // 비트 연산을 통해 빨강(R), 초록(G), 파랑(B) 값을 추출해서 반환합니다.
+    return {
+      r: (num >> 16) & 255,
+      g: (num >> 8) & 255,
+      b: num & 255,
+    };
+  }
+
+  // RGB 숫자 객체를 CSS 문자열 'rgb(r,g,b)' 형태로 바꿔주는 함수
+  function rgbToCss({ r, g, b }, alpha) {
+    // 만약 투명도(alpha) 값이 숫자로 들어왔다면 rgba 형식으로 반환합니다.
+    if (typeof alpha === 'number') {
+      return `rgba(${r},${g},${b},${alpha})`;
+    }
+    // 아니면 일반 rgb 형식으로 반환합니다.
+    return `rgb(${r},${g},${b})`;
+  }
+
+  // 두 가지 색(base, accent)을 특정 비율(ratio)로 섞는 함수입니다.
+  // ratio가 0이면 base색, 1이면 accent색이 됩니다.
+  function mixColor(base, accent, ratio) {
+    // 비율이 0보다 작거나 1보다 크지 않도록 범위를 조절합니다.
+    const t = Math.max(0, Math.min(1, ratio));
+    // 각 색상 성분(R,G,B)별로 비율에 맞춰 계산(보간)하여 반환합니다.
+    return {
+      r: Math.round(base.r + (accent.r - base.r) * t),
+      g: Math.round(base.g + (accent.g - base.g) * t),
+      b: Math.round(base.b + (accent.b - base.b) * t),
+    };
+  }
+
+  // ─────────────────────────────────────────
+  // [테마 적용] 선택한 색상으로 페이지 전체 분위기를 바꾸는 핵심 함수
+  // ─────────────────────────────────────────
+  function applyPlaylistTheme(themeHex) {
+    // 입력받은 테마색을 RGB로 변환합니다. (값이 없으면 기본 청록색 사용)
+    const accent = hexToRgb(themeHex || '#22d3ee');
+
+    // 페이지의 기본 바탕이 될 어두운 색(네이비)을 정의합니다.
+    const base = { r: 3, g: 7, b: 18 };
+
+    // 기본색과 테마색을 섞어서 여러 단계의 톤(Palette)을 만듭니다.
+    // 1. 전체 배경색 (가장 어둡게)
+    const pageBg   = mixColor(base, accent, 0.28); 
+    // 2. 카드/패널 배경색 (조금 덜 어둡게)
+    const panelBg  = mixColor(base, accent, 0.40); 
+    // 3. 헤더 섹션 배경색 (약간 밝게)
+    const headerBg = mixColor(base, accent, 0.52); 
+    // 4. 테두리 선 색상
+    const border   = mixColor(base, accent, 0.70); 
+    // 5. 테마색을 흰색과 섞어서 부드럽게 만든 색
+    const accentSoft = mixColor(accent, { r: 255, g: 255, b: 255 }, 0.18);
+
+    // 1) 전체 페이지(body)의 배경색을 변경합니다.
+    document.body.style.background = rgbToCss(pageBg);
+
+    // 2) 상단 네비게이션 바(.topbar)의 스타일을 변경합니다.
+    const topbar = document.querySelector('.topbar');
+    if (topbar) {
+      // 배경색 변경
+      topbar.style.background = rgbToCss(panelBg);
+      // 아래쪽 테두리 색 변경
+      topbar.style.borderBottom = `1px solid ${rgbToCss(border, 0.7)}`;
+      // 그림자 색 변경
+      topbar.style.boxShadow = `0 10px 30px ${rgbToCss(base, 0.85)}`;
+    }
+
+    // 3) 모든 패널(.panel) 요소들의 스타일을 변경합니다.
+    document.querySelectorAll('.panel').forEach(panel => {
+      // 만약 헤더 섹션이라면 전용 배경색을 씁니다.
+      if (panel.id === 'headerSection') {
+        panel.style.background = rgbToCss(headerBg);
+      } else {
+        // 일반 패널이라면 일반 배경색을 씁니다.
+        panel.style.background = rgbToCss(panelBg);
+      }
+      // 테두리 색을 변경합니다.
+      panel.style.border = `1px solid ${rgbToCss(border, 0.55)}`;
+      // 그림자를 테마색 느낌으로 은은하게 줍니다.
+      panel.style.boxShadow = `0 20px 50px ${rgbToCss(accent, 0.35)}`;
+    });
+
+    // 4) CSS 변수(variable) 값들도 업데이트합니다.
+    // 이렇게 하면 CSS 파일에 있는 다른 요소들도 색상이 같이 바뀝니다.
+    const rootStyle = document.documentElement.style;
+    // 배경색 변수 업데이트
+    rootStyle.setProperty('--bg', rgbToCss(pageBg));
+    // 부드러운 배경색 변수 업데이트
+    rootStyle.setProperty('--bg-soft', rgbToCss(panelBg));
+    // 카드 배경색 변수 업데이트
+    rootStyle.setProperty('--card', rgbToCss(panelBg));
+    // 강조색(테마색) 변수 업데이트
+    rootStyle.setProperty('--accent', rgbToCss(accent));
+    // 부드러운 강조색 변수 업데이트
+    rootStyle.setProperty('--accent-soft', rgbToCss(accentSoft));
+    // 옅은 테두리 색 변수 업데이트 (여기서 코드가 끝남)
+    rootStyle.setProperty('--border-subtle', rgbToCss(border, 0.55));
+
+// 5) 버튼 색 테마에 맞게 조정 (이전 코드에서 이어지는 부분입니다)
+
+    // (1) 기본 버튼들 - 위험 버튼(.btn-danger, 삭제 등)은 제외하고 전부 선택합니다.
+    document.querySelectorAll('.btn:not(.btn-danger)').forEach(btn => {
+      // 버튼의 배경색을 패널 배경색(panelBg)과 똑같이 맞춥니다.
+      btn.style.background = rgbToCss(panelBg);
+      // 버튼 테두리 색을 설정하되, 투명도를 0.7로 주어 은은하게 만듭니다.
+      btn.style.borderColor = rgbToCss(border, 0.7);
+      // 버튼에 그림자를 주는데, 테마 강조색(accent)을 섞어 분위기를 맞춥니다.
+      btn.style.boxShadow = `0 4px 12px ${rgbToCss(accent, 0.3)}`;
+    });
+
+    // (2) 주요 버튼(전체 재생 같은 primary 버튼이나 재생 아이콘 버튼)은 눈에 띄게 꾸밉니다.
+    document.querySelectorAll('.btn.primary, .btn[data-role="play"]').forEach(btn => {
+      // 배경색을 테마 강조색(accent)으로 칠해 눈에 확 띄게 합니다.
+      btn.style.background = rgbToCss(accent);
+      // 테두리도 같은 색으로 맞춥니다.
+      btn.style.borderColor = rgbToCss(accent);
+      // 글자색은 흰색으로 해서 잘 보이게 합니다.
+      btn.style.color = '#fff';
+    });
+
+    // (3) 상단 네비게이션 바에 있는 버튼들도 스타일을 통일합니다.
+    document.querySelectorAll('.topbar .btn').forEach(btn => {
+      // 배경색을 패널색으로 바꿉니다.
+      btn.style.background = rgbToCss(panelBg);
+      // 테두리 색을 설정합니다.
+      btn.style.borderColor = rgbToCss(border, 0.7);
+    });
+
+  } // applyPlaylistTheme 함수 끝
+
+  // ─────────────────────────────────────────
+  // API 호출: 서버와 데이터를 주고받는 함수들
+  // ─────────────────────────────────────────
+  
+  // 재생목록 아이템들 중에서 앨범 커버(썸네일) 이미지 주소만 뽑아내는 함수입니다.
+  function buildCoverThumbs(items) {
+    // items 배열을 돌면서 thumb 속성만 가져옵니다.
+    // .filter(Boolean)으로 빈 값(null, undefined)은 버립니다.
+    // .slice(0, 4)로 최대 4개까지만 자릅니다. (2x2 격자를 위해)
+    const thumbs = (items || []).map(t => t.thumb).filter(Boolean).slice(0, 4);
+    // 정리된 썸네일 배열을 반환합니다.
+    return thumbs; 
+  }
+
+  // 서버에서 현재 재생목록의 상세 정보를 가져오는 비동기 함수입니다.
+  async function fetchPlaylist() {
+    // playlistId를 사용해 API 주소를 만듭니다. (특수문자 처리를 위해 encodeURIComponent 사용)
+    const res = await fetch(
+      `http://localhost:3001/api/playlists/${encodeURIComponent(playlistId)}`,
+      // 로그인 정보(쿠키)를 포함해서 요청을 보냅니다.
+      { credentials: 'include' } 
+    );
+
+    // 만약 응답 코드가 성공(200번대)이 아니라면 에러를 냅니다.
+    if (!res.ok) throw new Error('playlist load fail');
+
+    // 서버가 보낸 데이터를 JSON 형식으로 변환해서 반환합니다.
+    return res.json(); 
+  }
+
+  // 사용자가 선택한 테마 색상을 서버에 저장(수정)하는 함수입니다.
+  async function updateThemeColor(id, themeColor) {
+    // PATCH 메서드를 사용해 특정 재생목록의 테마 색상만 부분 수정합니다.
+    const res = await fetch(
+      `http://localhost:3001/api/playlists/${encodeURIComponent(id)}/theme`,
+      {
+        method: 'PATCH', // 수정 요청
+        credentials: 'include', // 인증 정보 포함
+        headers: { 'Content-Type': 'application/json' }, // 보내는 데이터가 JSON임을 명시
+        body: JSON.stringify({ themeColor }), // 바꿀 색상 값을 JSON 문자열로 변환해 보냄
+      }
+    );
+
+    // 서버 응답을 JSON으로 받습니다. 혹시 실패하면 빈 객체({})를 씁니다.
+    const data = await res.json().catch(() => ({}));
+
+    // 응답이 실패했거나, 데이터에 ok 신호가 없다면 에러 처리합니다.
+    if (!res.ok || !data.ok) {
+      // 에러 메시지가 있으면 보여주고, 없으면 HTTP 상태 코드를 보여줍니다.
+      const msg = data.error || `HTTP ${res.status}`;
+      throw new Error(msg); // 에러 발생 시켜서 알림창을 띄울 수 있게 함
+    }
+
+    // 성공했다면 결과 데이터를 반환합니다.
+    return data; 
+  }
+
+
+  // ─────────────────────────────────────────
+  // 렌더링: 가져온 데이터로 화면을 그리는 함수들
+  // ─────────────────────────────────────────
+  
+  // 헤더 영역(커버, 제목, 버튼 등)을 그리는 함수입니다.
+  function renderHeader(pl) {
+    // 헤더가 들어갈 HTML 요소를 찾습니다.
+    const header = $('#headerSection');
+    // 기존에 있던 내용을 싹 지웁니다. (새로 그리기 위해)
+    header.innerHTML = '';
+
+    // 이 재생목록의 테마 색을 가져옵니다. 없으면 기본 하늘색(#22d3ee)을 씁니다.
+    let theme = pl.theme_color || '#22d3ee';
+
+    // ★ 이 색상을 기준으로 페이지 전체(배경, 버튼 등)의 색을 바꿉니다.
+    applyPlaylistTheme(theme);
+
+    // 헤더 전체를 감쌀 큰 박스(div)를 만듭니다.
+    const box = document.createElement('div');
+    box.className = 'plv-header'; // 스타일 클래스 적용
+
+    // 앨범 커버 이미지가 들어갈 박스를 만듭니다.
+    const cover = document.createElement('div');
+    cover.className = 'plv-cover'; // 2x2 격자 스타일 클래스 적용
+
+    // 썸네일 이미지 주소 최대 4개를 가져옵니다.
+    const thumbs = buildCoverThumbs(pl.items); 
+    
+    // 만약 썸네일이 하나라도 있다면
+    if (thumbs.length) {
+      // 각 썸네일 주소마다 이미지 태그를 만듭니다.
+      thumbs.forEach(src => {
+        const img = document.createElement('img');
+        img.src = src; // 이미지 경로 설정
+        img.alt = 'thumb'; // 시각장애인용 대체 텍스트
+        cover.appendChild(img); // 커버 박스 안에 이미지를 넣습니다.
+      });
+      // 이미지가 4개보다 적으면(예: 1개, 2개), 남은 칸이 비어 보이지 않게 어두운 색으로 채웁니다.
+      while (cover.childElementCount < 4) {
+        const d = document.createElement('div');
+        d.style.background = '#020617'; // 아주 어두운 남색 배경
+        cover.appendChild(d); // 빈 칸 채우기용 div 추가
+      }
+    } else {
+      // 만약 썸네일이 아예 없다면 (곡이 없는 경우 등)
+      // 중앙에 음표 아이콘(🎵)을 띄울 박스를 만듭니다.
+      const d = document.createElement('div');
+      d.style.gridColumn = '1/3'; // 2칸을 합쳐서 꽉 차게 씁니다.
+      d.style.gridRow = '1/3';    // 세로로도 2칸 합칩니다.
+      d.style.display = 'flex';   // 중앙 정렬을 위해 Flexbox 사용
+      d.style.alignItems = 'center'; // 세로 중앙
+      d.style.justifyContent = 'center'; // 가로 중앙
+      d.textContent = '🎵'; // 음표 이모지
+      cover.appendChild(d); // 커버 박스에 추가
+    }
+
+    // 제목과 설명, 버튼들을 담을 오른쪽 정보 영역을 만듭니다.
+    const meta = document.createElement('div'); 
+
+    // 제목 div를 만듭니다.
+    const title = document.createElement('div');
+    title.className = 'plv-title'; // 큰 글씨 스타일
+    title.textContent = pl.title; // 플레이리스트 제목 넣기
+
+    // 부가 설명(소유자, 트랙 수 등) div를 만듭니다.
+    const sub = document.createElement('div');
+    sub.className = 'plv-sub'; // 작은 글씨 스타일
+    // 텍스트 내용을 조합합니다: "소유자 · 트랙 N개 · ♥ 좋아요수 · 공개여부"
+    sub.textContent =
+      `${pl.owner_name || '나'} · 트랙 ${(pl.items || []).length}개 ` 
+      + `· ♥ ${pl.likes || 0} · ${pl.is_public ? '공개' : '비공개'}`; 
+
+    // 버튼들을 담을 컨트롤 영역 div를 만듭니다.
+    const controls = document.createElement('div');
+    controls.className = 'plv-controls'; 
+
+    // [▶ 전체 재생] 버튼을 만듭니다.
+    const playBtn = document.createElement('button');
+    playBtn.className = 'btn primary'; // 강조색 버튼 스타일
+    playBtn.textContent = '▶ 전체 재생';
+    // 버튼 클릭 시 동작 설정
+    playBtn.addEventListener('click', () => {
+      // 첫 번째 곡을 가져옵니다.
+      const first = (pl.items || [])[0];
+      // 곡이 없으면 경고창 띄우고 끝냅니다.
+      if (!first) {
+        alert('재생할 곡이 없습니다.');
+        return;
+      }
+      // 첫 번째 곡의 ID를 'currentTrackId'라는 이름으로 저장합니다.
+      localStorage.setItem('currentTrackId', first.track_id);
+      // 음악 플레이어 페이지로 이동합니다.
+      location.href = './player.html';
+    });
+
+    // [삭제] 버튼을 만듭니다.
+    const deleteBtn = document.createElement('button');
+    deleteBtn.className = 'btn btn-danger'; // 빨간색 위험 버튼 스타일
+    deleteBtn.textContent = '재생목록 삭제'; 
+
+    // 삭제 버튼 클릭 시 동작 설정
+    deleteBtn.addEventListener('click', async () => {
+      // 진짜 삭제할 건지 물어봅니다. 취소하면 함수 종료.
+      if (!confirm(`"${pl.title}" 재생목록을 삭제할까요?`)) return; 
+
+      try {
+        // 서버에 삭제 요청을 보냅니다.
+        const res = await API.deletePlaylist(pl.id); 
+
+        if (res.ok) {
+          // 성공하면 알림을 띄우고 목록 페이지로 이동합니다.
+          alert('재생목록이 삭제되었습니다.'); 
+          location.href = './playlist.html'; 
+        } else {
+          // 실패하면 원인을 분석합니다.
+          if (res.error === 'login required' || res.status === 401) {
+            // 로그인이 필요한 경우
+            alert('로그인 후 이용해 주세요.');
+            location.href = './login.html?redirect=playlist'; 
+          } else if (res.error === 'forbidden' || res.status === 403) {
+            // 삭제 권한이 없는 경우 (남의 것 등)
+            alert('이 재생목록은 삭제할 권한이 없습니다.');
+          } else {
+            // 그 외 알 수 없는 오류
+            alert('삭제 실패: ' + (res.error || '알 수 없는 오류')); 
+          }
+        }
+      } catch (e) {
+        // 통신 에러 등 예외 발생 시
+        console.error('playlist delete error:', e); 
+        alert('재생목록 삭제 중 오류가 발생했습니다.'); 
+      }
+    });
+
+
+    // 🎨 테마 색을 바꾸는 UI(동그라미 색상 선택기)를 만듭니다.
+    const colorWrap = document.createElement('div');
+    colorWrap.className = 'theme-color-wrap'; // 스타일 클래스
+
+    // "테마 색"이라는 라벨 텍스트
+    const colorLabel = document.createElement('span');
+    colorLabel.className = 'sub'; 
+    colorLabel.style.opacity = '.85'; // 약간 흐리게
+    colorLabel.textContent = '테마 색'; 
+
+    // 실제 색상을 고르는 input 태그
+    const colorInput = document.createElement('input');
+    colorInput.type = 'color'; // 컬러 피커 타입
+    colorInput.value = theme; // 현재 테마색으로 초기값 설정
+
+    // [색 저장] 버튼
+    const saveColorBtn = document.createElement('button');
+    saveColorBtn.className = 'btn'; 
+    saveColorBtn.textContent = '색 저장'; 
+
+    // 색 저장 버튼 클릭 시 동작
+    saveColorBtn.addEventListener('click', async (e) => {
+      e.stopPropagation(); // 클릭 이벤트가 다른 곳으로 퍼지지 않게 막음
+      const newColor = colorInput.value || theme; // 선택된 색상을 가져옴
+
+      try {
+        // 서버에 변경된 색상을 저장 요청합니다.
+        await updateThemeColor(pl.id, newColor); 
+
+        // 성공하면 현재 화면의 테마도 즉시 변경해 줍니다.
+        theme = newColor;
+        applyPlaylistTheme(theme);
+
+        alert('테마 색이 저장되었습니다.'); 
+      } catch (err) {
+        // 실패 시 에러 로그 출력 및 알림
+        console.error('update theme error:', err); 
+        alert('테마 색 저장 실패: ' + err.message); 
+      }
+    });
+
+    // 색상 UI 박스 안에 라벨, 입력창, 저장버튼을 순서대로 넣습니다.
+    colorWrap.appendChild(colorLabel);
+    colorWrap.appendChild(colorInput);
+    colorWrap.appendChild(saveColorBtn);
+
+    // 컨트롤 박스 안에 재생버튼, 삭제버튼, 색상UI를 넣습니다.
+    controls.appendChild(playBtn);
+    controls.appendChild(deleteBtn);
+    controls.appendChild(colorWrap);
+
+    // 정보 영역 안에 제목, 부가정보, 컨트롤박스를 넣습니다.
+    meta.appendChild(title);
+    meta.appendChild(sub);
+    meta.appendChild(controls);
+
+    // 전체 헤더 박스 안에 커버와 정보 영역을 넣습니다.
+    box.appendChild(cover);
+    box.appendChild(meta);
+
+    // 마지막으로, 완성된 박스를 화면(headerSection)에 갖다 붙입니다.
+    header.appendChild(box);
+  }
+
+  // 트랙(노래) 리스트를 그리는 함수입니다.
+  function renderTracks(pl) {
+    // 트랙 리스트가 들어갈 HTML 요소를 찾습니다.
+    const list = $('#trackList'); 
+    // 기존 내용을 비웁니다.
+    list.innerHTML = ''; 
+
+    // 플레이리스트 안의 items(곡 목록)을 가져옵니다. 없으면 빈 배열.
+    const items = pl.items || []; 
+    
+    // 만약 곡이 하나도 없다면 안내 메시지를 보여줍니다.
+    if (!items.length) {
+      list.innerHTML =
+        '<div class="sub" style="opacity:.7;padding:8px;">'
+        + '아직 이 재생목록에 곡이 없습니다. '
+        + '위의 "곡 추가하기" 버튼을 눌러 검색 화면에서 추가해 보세요.'
+        + '</div>';
+      return; // 함수 종료
+    }
+
+    // 곡이 있다면 하나씩 반복(forEach)하면서 화면에 그립니다.
+    items.forEach((t, idx) => {
+      // 한 줄(row)을 감쌀 div를 만듭니다.
+      const row = document.createElement('div');
+      row.className = 'plv-track-row'; // 그리드 스타일 적용
+
+      // 1. 번호 표시용 div
+      const index = document.createElement('div');
+      index.className = 'sub'; 
+      index.style.textAlign = 'right'; // 오른쪽 정렬
+      index.textContent = idx + 1; // 0부터 시작하니까 1을 더해서 표시
+
+      // 2. 메인 정보(이미지+텍스트)용 div
+      const main = document.createElement('div');
+      main.className = 'plv-track-main'; 
+      
+      // 작은 앨범 이미지
+      const img = document.createElement('img');
+      img.src = t.thumb || ''; // 이미지 주소
+      img.alt = 'thumb'; 
+
+      // 제목과 가수 정보를 담을 div
+      const texts = document.createElement('div'); 
+      texts.style.minWidth = 0; // 말줄임표 처리를 위해 너비 최소화
+      // HTML 문자열로 제목과 가수 정보를 넣습니다.
+      texts.innerHTML = `
+        <div class="plv-track-title">${t.title || ''}</div>
+        <div class="plv-track-sub">${t.artist || ''} · ${t.source || ''}</div>
+      `;
+
+      // 메인 정보 div 안에 이미지와 텍스트를 넣습니다.
+      main.appendChild(img);
+      main.appendChild(texts);
+
+      // 3. 오른쪽 [재생] 버튼 영역 div
+      const right = document.createElement('div'); 
+      right.style.textAlign = 'right'; // 오른쪽 정렬
+      // 버튼 HTML을 직접 넣습니다. data-role="play"로 나중에 식별 가능하게 함.
+      right.innerHTML = `<button class="btn" data-role="play">재생</button>`;
+
+      // 한 줄(row) 안에 [번호], [메인정보], [오른쪽버튼] 순서로 넣습니다.
+      row.appendChild(index);
+      row.appendChild(main);
+      row.appendChild(right);
+
+      // 이 줄을 클릭했을 때의 동작을 설정합니다.
+      row.addEventListener('click', (e) => {
+        e.stopPropagation(); // 이벤트가 부모로 퍼지는 걸 막음
+        // 현재 곡의 ID를 로컬 저장소에 저장해둡니다. (플레이어에서 쓰려고)
+        localStorage.setItem('currentTrackId', t.track_id); 
+        // 플레이어 페이지로 이동합니다.
+        location.href = './player.html'; 
+      });
+
+      // 완성된 한 줄을 전체 리스트에 추가합니다.
+      list.appendChild(row); 
+    });
+  }
+
+  // "곡 추가하기" 버튼을 눌렀을 때의 동작
+  $('#goAddFromSearch').addEventListener('click', () => {
+    // 검색 페이지로 이동하되, 현재 플레이리스트 ID를 쿼리로 넘깁니다.
+    // (검색 페이지에서 곡을 선택하면 이 플레이리스트에 추가하기 위함)
+    location.href = `./search.html?addToPlaylist=${encodeURIComponent(playlistId)}`;
+  });
+
+  // 페이지가 로드되면 즉시 실행되는 초기화 함수입니다. (IIFE 패턴)
+  (async function init() {
+    try {
+      // 1. 서버에서 데이터 가져오기
+      const pl = await fetchPlaylist();
+      // 2. 헤더 정보 그리기
+      renderHeader(pl);
+      // 3. 트랙 목록 그리기
+      renderTracks(pl);
+    } catch (e) {
+      // 에러 발생 시 콘솔에 출력하고
+      console.error(e);
+      // 사용자에게 알린 뒤 목록 페이지로 쫓아냅니다.
+      alert('재생목록을 불러오지 못했습니다.');
+      location.href = './playlist.html';
+    }
+  })();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Front end/public/search.html b/Front end/public/search.html
new file mode 100644
index 0000000..5d76dd0
--- /dev/null
+++ b/Front end/public/search.html	
@@ -0,0 +1,479 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Emotion Playlist · Search</title>
+  <link rel="stylesheet" href="./assets/styles.css" />
+
+  <style>
+    /* 검색 결과 줄 오른쪽 액션 영역 */
+    .track-actions {
+      margin-left: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      align-items: flex-end;
+    }
+    .track-actions .btn {
+      padding: 4px 8px;
+      font-size: 11px;
+      line-height: 1.2;
+    }
+
+    /* 재생목록 선택 모달 */
+    .modal {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, .6);
+      z-index: 50;
+    }
+    .modal-box {
+      max-width: 360px;
+      width: 100%;
+      padding: 16px;
+    }
+    .modal-list {
+      max-height: 260px;
+      overflow-y: auto;
+      margin-top: 6px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .modal-list .btn {
+      width: 100%;
+      justify-content: flex-start;
+      font-size: 13px;
+      padding: 6px 10px;
+    }
+    .modal-hint {
+      font-size: 11px;
+      opacity: .7;
+      margin-top: 4px;
+    }
+  </style>
+</head>
+<body data-mood="calm">
+  <header class="topbar">
+    <div class="brand">🔎 Search</div>
+    <nav class="nav">
+      <a href="./home.html" class="btn">홈</a>
+      <a href="./playlist.html" class="btn">내 재생목록</a>
+      <a href="./login.html" class="btn" id="loginLink">로그인</a>
+      <span id="userBadge" class="badge hidden"></span>
+      <button id="logoutBtn" class="btn hidden">로그아웃</button>
+    </nav>
+  </header>
+
+  <main class="panel" style="max-width:980px;margin:12px auto;">
+    <form id="searchForm" class="search">
+      <input id="searchInput" placeholder="노래/아티스트 검색" />
+      <button class="btn" type="submit">검색</button>
+    </form>
+
+    <div class="moods" id="moodChips"></div>
+
+    <div id="resultList" class="list" style="margin-top:10px;"></div>
+
+    <!-- 더 보기 버튼 -->
+    <div style="text-align:center;margin-top:12px;">
+      <button id="loadMoreBtn" class="btn hidden" type="button">더 보기</button>
+    </div>
+  </main>
+
+  <footer class="foot">검색 결과를 클릭하면 감상 페이지로 이동합니다.</footer>
+
+  <!-- 재생목록 선택 모달 -->
+  <div id="plPicker" class="modal hidden">
+    <div class="panel modal-box">
+      <div class="title" style="margin-bottom:4px;">재생목록에 추가</div>
+      <div id="plPickerHint" class="modal-hint"></div>
+      <div id="plPickerList" class="modal-list"></div>
+      <div style="text-align:right;margin-top:10px;">
+        <button id="plPickerClose" class="btn" type="button">닫기</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 전역 API 먼저 -->
+  <script src="./assets/api.js"></script>
+  <!-- 헤더 로그인 상태 동기화 (API 뒤에 로드) -->
+  <script src="./assets/auth.js"></script>
+
+  <script>
+  const BASE = 'http://localhost:3001';
+
+  // ──────────────────────────────────────
+  // 쿼리스트링에서 초기 상태 가져오기
+  // ──────────────────────────────────────
+  const sp = new URLSearchParams(location.search);
+  const initialMood   = sp.get('mood')   || '';
+  const initialGenre  = sp.get('genre')  || '';
+  const initialNation = sp.get('nation') || '';
+  const targetPlaylistIdFromUrl = sp.get('addToPlaylist') || null; // ← playlist_view에서 넘어온 대상 재생목록
+
+  let currentMood = initialMood;
+
+  if (initialMood) document.body.setAttribute('data-mood', initialMood);
+
+  // 페이지네이션 + 최근 검색 결과 저장용
+  let currentQuery   = '';
+  let nextPageToken  = null;
+  let lastSearchList = [];   // ★ player로 넘길 리스트
+  let isLoading      = false; // ★ 중복 로딩 방지
+
+  // 재생목록 추가용 상태
+  let trackToAdd = null;
+
+  // ──────────────────────────────────────
+  // player.html로 이동하는 공통 함수
+  // ──────────────────────────────────────
+  function goPlay(track) {
+    try {
+      localStorage.setItem('lastSearchList', JSON.stringify(lastSearchList));
+      localStorage.setItem('lastSearchContext', JSON.stringify({
+        mood: initialMood,
+        genre: initialGenre,
+        nation: initialNation,
+        q: currentQuery,
+      }));
+    } catch (e) {
+      console.warn('failed to save lastSearchList', e);
+    }
+
+    const params = new URLSearchParams();
+    if (initialMood)   params.set('mood',   initialMood);
+    if (initialGenre)  params.set('genre',  initialGenre);
+    if (initialNation) params.set('nation', initialNation);
+    params.set('from', 'search');
+    params.set('id', track.id);
+
+    window.location.href = `./player.html?${params.toString()}`;
+  }
+
+  // ──────────────────────────────────────
+  // 재생목록 선택 모달 관련
+  // ──────────────────────────────────────
+  const plModal       = document.getElementById('plPicker');
+  const plModalList   = document.getElementById('plPickerList');
+  const plModalHint   = document.getElementById('plPickerHint');
+  const plModalClose  = document.getElementById('plPickerClose');
+
+  function closePlaylistPicker() {
+    trackToAdd = null;
+    plModal.classList.add('hidden');
+  }
+
+  plModalClose.addEventListener('click', closePlaylistPicker);
+  // 바깥 영역 클릭 시 닫기
+  plModal.addEventListener('click', (e) => {
+    if (e.target === plModal) closePlaylistPicker();
+  });
+
+  async function openPlaylistPicker(track) {
+    trackToAdd = track;
+    plModal.classList.remove('hidden');
+    plModalList.innerHTML = '<div class="sub">재생목록을 불러오는 중...</div>';
+
+    if (targetPlaylistIdFromUrl) {
+      plModalHint.textContent = `현재 편집 중인 재생목록 ID: ${targetPlaylistIdFromUrl}`;
+    } else {
+      plModalHint.textContent = '추가할 재생목록을 선택하세요.';
+    }
+
+    try {
+      const res = await fetch(`${BASE}/api/playlists`, {
+        credentials: 'include',
+      });
+      if (res.status === 401) {
+        alert('로그인 후 재생목록에 곡을 추가할 수 있습니다.');
+        location.href = './login.html';
+        return;
+      }
+      const data = await res.json();
+      let lists = data.items || [];
+
+      if (!lists.length) {
+        plModalList.innerHTML = '<div class="sub">아직 만든 재생목록이 없습니다.</div>';
+        return;
+      }
+
+      // URL에서 넘어온 재생목록이 있으면 맨 위로 올리기
+      if (targetPlaylistIdFromUrl) {
+        const idStr = String(targetPlaylistIdFromUrl);
+        lists = lists.slice().sort((a, b) => {
+          const aKey = String(a.id) === idStr ? -1 : 0;
+          const bKey = String(b.id) === idStr ? -1 : 0;
+          return aKey - bKey;
+        });
+      }
+
+      plModalList.innerHTML = '';
+      lists.forEach(pl => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'btn';
+
+        const isTarget =
+          targetPlaylistIdFromUrl &&
+          String(pl.id) === String(targetPlaylistIdFromUrl);
+
+        btn.innerHTML = `
+          <span style="flex:1;">${pl.title} · 트랙 ${(pl.items || []).length}개</span>
+          <span style="font-size:11px;opacity:.7;">${pl.is_public ? '공개' : '비공개'}</span>
+        `;
+        btn.style.display = 'flex';
+        btn.style.alignItems = 'center';
+        btn.style.gap = '6px';
+
+        if (isTarget) {
+          btn.style.border = '1px solid var(--accent, #1ed760)';
+        }
+
+        btn.addEventListener('click', async () => {
+          try {
+            const resAdd = await fetch(`${BASE}/api/playlist/items`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              credentials: 'include',
+              body: JSON.stringify({
+                playlistId: pl.id,
+                trackId: trackToAdd.id,
+                position: 0,
+              }),
+            });
+
+            const dataAdd = await resAdd.json().catch(() => ({}));
+
+            if (resAdd.status === 401) {
+              alert('로그인 후 재생목록에 곡을 추가할 수 있습니다.');
+              location.href = './login.html';
+              return;
+            }
+
+            if (!resAdd.ok) {
+              alert('추가 실패: ' + (dataAdd.error || `${resAdd.status}`));
+              return;
+            }
+
+            alert(`"${pl.title}" 재생목록에 곡을 추가했습니다.`);
+            closePlaylistPicker();
+          } catch (e) {
+            console.error(e);
+            alert('재생목록에 추가하는 중 오류가 발생했습니다.');
+          }
+        });
+
+        plModalList.appendChild(btn);
+      });
+    } catch (e) {
+      console.error(e);
+      plModalList.innerHTML =
+        '<div class="sub" style="color:#f66;">재생목록을 불러오지 못했습니다.</div>';
+    }
+  }
+
+  // ──────────────────────────────────────
+  // 아이템 렌더링
+  // ──────────────────────────────────────
+  function itemEl(track) {
+    const el = document.createElement('div');
+    el.className = 'item';
+    const thumb = track.thumb || '';
+
+    el.innerHTML = `
+      <img src="${thumb}" alt="thumb" />
+      <div style="min-width:0;">
+        <div class="t">${API.cleanTitle(track.title)}</div>
+        <div class="s">
+          ${track.artist ?? ''} ·
+          <span class="badge">${track.source ?? ''}</span>
+        </div>
+      </div>
+      <div class="track-actions">
+        <button type="button" class="btn" data-role="play">재생</button>
+        <button type="button" class="btn" data-role="add">⋯</button>
+      </div>
+    `;
+
+    // 전체 줄 클릭 -> 플레이어
+    el.addEventListener('click', () => {
+      goPlay(track);
+    });
+
+    // 개별 버튼 핸들러 (부모 클릭 막기)
+    const playBtn = el.querySelector('[data-role="play"]');
+    const addBtn  = el.querySelector('[data-role="add"]');
+
+    if (playBtn) {
+      playBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        goPlay(track);
+      });
+    }
+
+    if (addBtn) {
+      addBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        openPlaylistPicker(track);
+      });
+    }
+
+    return el;
+  }
+
+  function render(list, { append = false } = {}) {
+    const holder = document.getElementById('resultList');
+    if (!append) {
+      holder.innerHTML = '';
+    }
+    list.forEach(t => holder.appendChild(itemEl(t)));
+  }
+
+  function setLoadMoreVisible(visible) {
+    const btn = document.getElementById('loadMoreBtn');
+    if (!btn) return;
+    if (visible) btn.classList.remove('hidden');
+    else btn.classList.add('hidden');
+  }
+
+  // ──────────────────────────────────────
+  // 감정 칩 렌더링 (UI만, 검색은 그대로)
+  // ──────────────────────────────────────
+  (function renderMoodChips() {
+    const holder = document.getElementById('moodChips');
+    holder.innerHTML = '';
+    API.MOODS.forEach(m => {
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.className = 'chip';
+      b.textContent = m.label;
+       b.onclick = async () => {
+      // 1) 배경 색 / 테마 변경
+      document.body.setAttribute('data-mood', m.key);
+
+      // 2) 현재 선택된 감정 상태 갱신
+      currentMood = m.key;
+
+      // 3) 새 검색 준비
+      nextPageToken = null;                 // 페이지네이션 초기화
+      // 검색어도 같이 리셋하고 싶으면:
+      // currentQuery = '';
+      // document.getElementById('searchInput').value = '';
+
+      // 4) 이 감정으로 다시 검색
+      await fetchAndRender({ append: false });
+    };
+      holder.appendChild(b);
+    });
+  })();
+
+  // ──────────────────────────────────────
+  // 실제 /api/search 호출
+  // ──────────────────────────────────────
+  async function fetchAndRender({ append = false } = {}) {
+    if (isLoading) return;          // ★ 중복 호출 방지
+    isLoading = true;
+    if (append) setLoadMoreVisible(false); // 로딩 중엔 버튼 숨김
+
+    const params = {
+      q: currentQuery,
+      mood: currentMood, 
+      genre: initialGenre,
+      nation: initialNation,
+    };
+
+    if (append && nextPageToken) {
+      params.pageToken = nextPageToken;
+    }
+
+    try {
+      const r = await API.search(params);
+      const items = r.items || [];
+
+      // ★최근 검색 리스트 갱신
+      if (append) {
+        lastSearchList = lastSearchList.concat(items);
+      } else {
+        lastSearchList = items.slice();
+      }
+
+      render(items, { append });
+      nextPageToken = r.nextPageToken || null;
+      setLoadMoreVisible(!!nextPageToken);
+    } catch (err) {
+      console.warn('search failed, fallback to local', err);
+
+      if (!append) {
+        const items = API.list();
+        lastSearchList = items.slice();
+        render(items, { append: false });
+        nextPageToken = null;
+        setLoadMoreVisible(false);
+      }
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  // ──────────────────────────────────────
+  // 무한 스크롤 체크 함수
+  // ──────────────────────────────────────
+  async function checkInfiniteScroll() {
+    if (!nextPageToken || isLoading) return;
+
+    const listEl = document.getElementById('resultList');
+
+    // 1) 리스트 자체에 스크롤이 있는 경우
+    let needMore = false;
+    if (listEl && listEl.scrollHeight > listEl.clientHeight + 10) {
+      const bottom = listEl.scrollTop + listEl.clientHeight;
+      const limit  = listEl.scrollHeight - 300; // 300px 남았을 때 로딩
+      if (bottom >= limit) needMore = true;
+    }
+
+    // 2) 윈도우 전체 스크롤인 경우
+    const root = document.documentElement;
+    const winBottom = root.scrollTop + root.clientHeight;
+    const winLimit  = root.scrollHeight - 300;
+    if (winBottom >= winLimit) needMore = true;
+
+    if (needMore) {
+      await fetchAndRender({ append: true });
+    }
+  }
+
+  // ──────────────────────────────────────
+  // 이벤트 핸들러들
+  // ──────────────────────────────────────
+  document.getElementById('searchForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const q = document.getElementById('searchInput').value.trim();
+    currentQuery = q;
+    nextPageToken = null;
+    await fetchAndRender({ append: false });
+  });
+
+  document.getElementById('loadMoreBtn').addEventListener('click', async () => {
+    if (!nextPageToken) return;
+    await fetchAndRender({ append: true });
+  });
+
+  // ★ 무한 스크롤 이벤트 등록
+  window.addEventListener('scroll', checkInfiniteScroll);
+  document.getElementById('resultList').addEventListener('scroll', checkInfiniteScroll);
+
+  // 초기 진입 시: mood/genre/nation만으로 첫 페이지 자동 로드
+  (async () => {
+    currentQuery = '';
+    nextPageToken = null;
+    await fetchAndRender({ append: false });
+  })();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Front end/public/signup.html b/Front end/public/signup.html
new file mode 100644
index 0000000..424f38e
--- /dev/null
+++ b/Front end/public/signup.html	
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <title>Emotion Playlist · Signup</title>
+  <link rel="stylesheet" href="./assets/styles.css"/>
+</head>
+<body data-mood="calm">
+  <header class="topbar">
+    <div class="brand">📝 회원가입</div>
+    <nav class="nav">
+      <a href="./home.html" class="btn">홈</a>
+      <a href="./search.html" class="btn">검색</a>
+      <a href="./playlist.html" class="btn">재생목록</a>
+      <a href="./login.html" class="btn">로그인</a>
+    </nav>
+  </header>
+
+  <main class="panel" style="max-width:420px;margin:16px auto;">
+    <div class="title" style="margin-bottom:8px">새 계정 만들기</div>
+
+    <div style="display:flex;flex-direction:column;gap:8px">
+      <input id="username" placeholder="아이디"
+        style="padding:10px;border-radius:10px;background:var(--card);color:var(--text);border:1px solid rgba(255,255,255,.12)"/>
+
+      <input id="email" placeholder="이메일 (선택)"
+        style="padding:10px;border-radius:10px;background:var(--card);color:var(--text);border:1px solid rgba(255,255,255,.12)"/>
+
+      <input id="password" type="password" placeholder="비밀번호"
+        style="padding:10px;border-radius:10px;background:var(--card);color:var(--text);border:1px solid rgba(255,255,255,.12)"/>
+
+      <input id="password2" type="password" placeholder="비밀번호 확인"
+        style="padding:10px;border-radius:10px;background:var(--card);color:var(--text);border:1px solid rgba(255,255,255,.12)"/>
+
+      <button id="signupBtn" class="btn primary">회원가입</button>
+    </div>
+  </main>
+
+  <!-- 서버 API / 인증 스크립트 -->
+  <script src="./assets/api.js"></script>
+  <script src="./assets/auth.js"></script>
+
+  <script>
+    const BASE = 'http://localhost:3001';
+
+    document.addEventListener('DOMContentLoaded', () => {
+      const usernameEl = document.getElementById('username');
+      const emailEl    = document.getElementById('email');
+      const pwEl       = document.getElementById('password');
+      const pw2El      = document.getElementById('password2');
+      const btn        = document.getElementById('signupBtn');
+
+      // 필수 요소가 없으면 초기화 중단
+      if (!usernameEl || !pwEl || !pw2El || !btn) {
+        console.warn('signup elements not found', {
+          usernameEl, emailEl, pwEl, pw2El, btn
+        });
+        return;
+      }
+
+      async function handleSignup(e) {
+        if (e) e.preventDefault();
+
+        const username = usernameEl.value.trim();
+        const email    = (emailEl?.value || '').trim();
+        const pw       = pwEl.value;
+        const pw2      = pw2El.value;
+
+        if (!username) {
+          alert('아이디를 입력하세요.');
+          usernameEl.focus();
+          return;
+        }
+        if (!pw) {
+          alert('비밀번호를 입력하세요.');
+          pwEl.focus();
+          return;
+        }
+        if (pw.length < 6) {
+          alert('비밀번호는 최소 6자 이상으로 입력하세요.');
+          pwEl.focus();
+          return;
+        }
+        if (pw !== pw2) {
+          alert('비밀번호가 일치하지 않습니다.');
+          pw2El.focus();
+          return;
+        }
+
+        try {
+          const res = await fetch(`${BASE}/api/signup`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include',
+            body: JSON.stringify({ username, password: pw, email })
+          });
+
+          const data = await res.json().catch(() => ({}));
+
+          if (!res.ok) {
+            // 서버에서 내려주는 에러 메시지 그대로 노출
+            alert('회원가입 실패: ' + (data.error || `${res.status} ${res.statusText}`));
+            return;
+          }
+
+          // 프론트 로그인 상태 저장 (auth.js에서 쓰는 형식 그대로)
+          localStorage.setItem('ep_user', JSON.stringify({
+            name: username,
+            loggedIn: true,
+            createdAt: Date.now()
+          }));
+
+          alert('회원가입이 완료되었습니다! 자동으로 로그인됩니다.');
+          location.href = './home.html';
+        } catch (err) {
+          console.error('signup error', err);
+          alert('회원가입 실패: ' + (err?.message || '알 수 없는 오류'));
+        }
+      }
+
+      // 버튼 클릭 시
+      btn.addEventListener('click', handleSignup);
+
+      // 각 input에서 엔터 눌렀을 때도 동작
+      [usernameEl, emailEl, pwEl, pw2El].forEach((el) => {
+        el.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            handleSignup();
+          }
+        });
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/assets/api.js b/assets/api.js
deleted file mode 100644
index 855f658..0000000
--- a/assets/api.js
+++ /dev/null
@@ -1,57 +0,0 @@
-const API = (() => {
-  const MOODS = [
-    { key: 'happy',     label: '기쁨'   },
-    { key: 'sad',       label: '슬픔'   },
-    { key: 'calm',      label: '차분'   },
-    { key: 'angry',     label: '분노'   },
-    { key: 'energetic', label: '에너지' },
-  ];
-
-  // 더미 데이터 (원하면 data/songs.json으로 분리 가능)
-  let DUMMY_TRACKS = [
-    { id:'youtube:dQw4w9WgXcQ', source:'YouTube', title:'Rick Astley — Never Gonna Give You Up', originalTitle:'Rick Astley - Never Gonna Give You Up (Official Music Video)', artist:'Rick Astley', thumb:'https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg', url:'https://www.youtube.com/watch?v=dQw4w9WgXcQ', moods:['energetic','happy'] },
-    { id:'youtube:ktvTqknDobU', source:'YouTube', title:'Queen — Bohemian Rhapsody', originalTitle:'Queen – Bohemian Rhapsody (Official Video Remastered)', artist:'Queen', thumb:'https://i.ytimg.com/vi/ktvTqknDobU/hqdefault.jpg', url:'https://www.youtube.com/watch?v=ktvTqknDobU', moods:['energetic','sad'] },
-    { id:'youtube:Zi_XLOBDo_Y', source:'YouTube', title:'Adele — Someone Like You', originalTitle:'Adele - Someone Like You (Official Music Video)', artist:'Adele', thumb:'https://i.ytimg.com/vi/Zi_XLOBDo_Y/hqdefault.jpg', url:'https://www.youtube.com/watch?v=Zi_XLOBDo_Y', moods:['sad','calm'] },
-    { id:'youtube:fLexgOxsZu0', source:'YouTube', title:'Pharrell Williams — Happy', originalTitle:'Pharrell Williams - Happy (Official Music Video)', artist:'Pharrell Williams', thumb:'https://i.ytimg.com/vi/fLexgOxsZu0/hqdefault.jpg', url:'https://www.youtube.com/watch?v=fLexgOxsZu0', moods:['happy','energetic'] },
-    { id:'youtube:V1Pl8CzNzCw', source:'YouTube', title:'Billie Eilish — bad guy', originalTitle:'Billie Eilish - bad guy', artist:'Billie Eilish', thumb:'https://i.ytimg.com/vi/V1Pl8CzNzCw/hqdefault.jpg', url:'https://www.youtube.com/watch?v=V1Pl8CzNzCw', moods:['angry','energetic'] },
-    { id:'youtube:RBumgq5yVrA', source:'YouTube', title:'Ed Sheeran — Photograph', originalTitle:'Ed Sheeran - Photograph (Official Music Video)', artist:'Ed Sheeran', thumb:'https://i.ytimg.com/vi/RBumgq5yVrA/hqdefault.jpg', url:'https://www.youtube.com/watch?v=RBumgq5yVrA', moods:['calm','sad'] },
-    { id:'youtube:OPf0YbXqDm0', source:'YouTube', title:'Mark Ronson — Uptown Funk (feat. Bruno Mars)', originalTitle:'Mark Ronson - Uptown Funk (Official Video) ft. Bruno Mars', artist:'Mark Ronson', thumb:'https://i.ytimg.com/vi/OPf0YbXqDm0/hqdefault.jpg', url:'https://www.youtube.com/watch?v=OPf0YbXqDm0', moods:['energetic','happy'] },
-    { id:'youtube:hLQl3WQQoQ0', source:'YouTube', title:'Adele — Someone Like You (Live at The BRIT Awards 2011)', originalTitle:'Adele - Someone Like You (BRIT Awards 2011) Performance', artist:'Adele', thumb:'https://i.ytimg.com/vi/hLQl3WQQoQ0/hqdefault.jpg', url:'https://www.youtube.com/watch?v=hLQl3WQQoQ0', moods:['sad'] },
-    { id:'youtube:pXRviuL6vMY', source:'YouTube', title:'twenty one pilots — Stressed Out', originalTitle:'twenty one pilots: Stressed Out [OFFICIAL VIDEO]', artist:'twenty one pilots', thumb:'https://i.ytimg.com/vi/pXRviuL6vMY/hqdefault.jpg', url:'https://www.youtube.com/watch?v=pXRviuL6vMY', moods:['angry','sad'] },
-    { id:'youtube:ktvTqknDobU-lyric', source:'YouTube', title:'Queen — Bohemian Rhapsody (Lyrics)', originalTitle:'Queen - Bohemian Rhapsody (Lyrics)', artist:'Queen', thumb:'https://i.ytimg.com/vi/ktvTqknDobU/hqdefault.jpg', url:'https://www.youtube.com/watch?v=ktvTqknDobU', moods:['calm'] }
-  ];
-
-  const cleanTitle = (s) =>
-    s.replace(/\s*\[[^\]]*\]\s*/g, ' ')
-     .replace(/\s*\([^\)]*\)\s*/g, ' ')
-     .replace(/\s{2,}/g, ' ')
-     .trim();
-
-  function searchLocal(q){
-    if (!q) return list();
-    const t = q.toLowerCase();
-    return DUMMY_TRACKS.filter(v =>
-      v.title.toLowerCase().includes(t) ||
-      v.originalTitle.toLowerCase().includes(t) ||
-      v.artist.toLowerCase().includes(t)
-    );
-  }
-
-  function list(){ return [...DUMMY_TRACKS]; }
-
-  // localStorage 기반 재생목록/라벨
-  const Playlist = {
-    get(){ const k = Auth.playlistKey(); if(!k) return []; try{ return JSON.parse(localStorage.getItem(k)) || []; } catch { return []; } },
-    set(list){ const k = Auth.playlistKey(); if(!k) return; localStorage.setItem(k, JSON.stringify(list)); },
-    add(track){ const list = Playlist.get(); if(!list.find(t=>t.id===track.id)){ list.push(track); Playlist.set(list); } },
-    remove(id){ const list = Playlist.get().filter(t=>t.id!==id); Playlist.set(list); }
-  };
-
-  const Ratings = {
-    get(){ const k = Auth.ratingKey(); if(!k) return {}; try{ return JSON.parse(localStorage.getItem(k)) || {}; } catch { return {}; } },
-    set(map){ const k = Auth.ratingKey(); if(!k) return; localStorage.setItem(k, JSON.stringify(map)); },
-    setMood(trackId, mood){ const m = Ratings.get(); m[trackId] = mood; Ratings.set(m); }
-  };
-
-  return { MOODS, list, searchLocal, cleanTitle, Playlist, Ratings };
-})();
diff --git a/assets/app.js b/assets/app.js
deleted file mode 100644
index 9fce8f2..0000000
--- a/assets/app.js
+++ /dev/null
@@ -1,133 +0,0 @@
-let ytPlayer = null; // YouTube player
-let currentTrack = null;
-
-// YouTube IFrame API 콜백 (index.html에서만 DOM이 있음)
-window.onYouTubeIframeAPIReady = function(){
-  const el = document.getElementById('player');
-  if (!el) return; // 다른 페이지면 패스
-  ytPlayer = new YT.Player('player', {
-    height: '100%',
-    width: '100%',
-    videoId: '',
-    playerVars: { autoplay: 0, rel: 0, modestbranding: 1 },
-    events: { onReady: onPlayerReady }
-  });
-};
-
-function onPlayerReady(){
-  const savedId = localStorage.getItem('currentTrackId');
-  const t = (savedId && API.list().find(x => x.id === savedId)) || API.list()[0];
-  if (t) loadTrack(t);
-}
-
-function loadTrack(track){
-  currentTrack = track;
-  localStorage.setItem('currentTrackId', track.id);
-  const videoId = track.id.split(':')[1];
-  if (ytPlayer && ytPlayer.loadVideoById) ytPlayer.loadVideoById(videoId);
-
-  const nowThumb = document.getElementById('nowThumb'); if (nowThumb) nowThumb.src = track.thumb;
-  const nowTitle = document.getElementById('nowTitle'); if (nowTitle) nowTitle.textContent = API.cleanTitle(track.title);
-  const nowSub   = document.getElementById('nowSub');   if (nowSub)   nowSub.textContent   = `${track.artist} · ${track.originalTitle}`;
-  const nowSrc   = document.getElementById('nowSource');if (nowSrc)   nowSrc.textContent   = track.source;
-  const openOnYT = document.getElementById('openOnYT'); if (openOnYT) openOnYT.href        = track.url;
-
-  renderRateChips();
-}
-
-function renderRateChips(){
-  const box = document.getElementById('rateMoods');
-  if (!box) return;
-  box.innerHTML = '';
-  API.MOODS.forEach(m => {
-    const el = document.createElement('button');
-    el.className = 'chip';
-    el.textContent = m.label;
-    el.onclick = () => {
-      if (!Auth.user) return alert('로그인 후 라벨을 저장할 수 있어요.');
-      API.Ratings.setMood(currentTrack.id, m.key);
-      alert(`이 곡에 "${m.label}" 라벨을 저장했습니다.`);
-      setMood(m.key);
-      renderRecs();
-    };
-    box.appendChild(el);
-  });
-}
-
-function renderMoodChips(){
-  const holder = document.getElementById('moodChips');
-  if (!holder) return;
-  holder.innerHTML = '';
-  const active = document.body.getAttribute('data-mood') || 'calm';
-  API.MOODS.forEach(m => {
-    const b = document.createElement('button');
-    b.className = 'chip' + (active === m.key ? ' active' : '');
-    b.textContent = m.label;
-    b.onclick = () => { setMood(m.key); renderRecs(); };
-    holder.appendChild(b);
-  });
-}
-
-function setMood(key){
-  document.body.setAttribute('data-mood', key);
-  renderMoodChips();
-}
-
-function sortedTracks(){
-  const activeMood = document.body.getAttribute('data-mood');
-  const rates = API.Ratings.get();
-  return [...API.list()].sort((a, b) => {
-    const score = (t) => {
-      let s = 0;
-      if (t.moods?.includes(activeMood)) s += 2;
-      if (rates[t.id] === activeMood) s += 3;
-      if (/official|mv|audio/i.test(t.originalTitle)) s += 0.5;
-      return s;
-    };
-    return score(b) - score(a);
-  });
-}
-
-function itemEl(track, opts = {}){
-  const el = document.createElement('div');
-  el.className = 'item';
-  el.innerHTML = `
-    <img src="${track.thumb}" alt="thumb" />
-    <div>
-      <div class="t">${API.cleanTitle(track.title)}</div>
-      <div class="s">${track.artist} · <span class="badge">${track.source}</span></div>
-    </div>
-    ${opts.controls ? '<div style="display:flex;gap:6px;">' + opts.controls + '</div>' : ''}
-  `;
-  el.onclick = (e) => {
-    if (e.target && e.target.closest('button')) return; // 버튼 클릭은 제외
-    loadTrack(track);
-  };
-  return el;
-}
-
-function renderRecs(){
-  const holder = document.getElementById('recList');
-  if (!holder) return;
-  holder.innerHTML = '';
-  sortedTracks().forEach(t => holder.appendChild(itemEl(t)));
-}
-
-// Controls & header sync
-function wireControls(){
-  const playBtn  = document.getElementById('playBtn');  if (playBtn)  playBtn.onclick  = () => { try { ytPlayer.playVideo(); } catch {} };
-  const pauseBtn = document.getElementById('pauseBtn'); if (pauseBtn) pauseBtn.onclick = () => { try { ytPlayer.pauseVideo(); } catch {} };
-  const addBtn   = document.getElementById('addToPlaylistBtn');
-  if (addBtn) addBtn.onclick = () => {
-    if (!Auth.user) return alert('로그인 후 재생목록을 사용할 수 있어요.');
-    if (currentTrack) API.Playlist.add(currentTrack);
-    alert('재생목록에 추가했습니다.');
-  };
-}
-
-// 페이지 공통 초기화
-(function init(){
-  renderMoodChips();
-  renderRecs();
-  wireControls();
-})();
diff --git a/assets/auth.js b/assets/auth.js
deleted file mode 100644
index d3f9075..0000000
--- a/assets/auth.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const Auth = {
-  get user() {
-    try { return JSON.parse(localStorage.getItem('demo_user')); }
-    catch { return null; }
-  },
-  login(name) { localStorage.setItem('demo_user', JSON.stringify({ name })); },
-  logout() { localStorage.removeItem('demo_user'); },
-
-  playlistKey() { const u = Auth.user; return u ? `pl_${u.name}` : null; },
-  ratingKey()  { const u = Auth.user; return u ? `rate_${u.name}` : null; },
-
-  syncHeader() {
-    const badge = document.getElementById('userBadge');
-    const loginLink = document.getElementById('loginLink');
-    const logoutBtn = document.getElementById('logoutBtn');
-    if (!badge || !loginLink || !logoutBtn) return;
-
-    const isLogged = !!Auth.user;
-    badge.classList.toggle('hidden', !isLogged);
-    logoutBtn.classList.toggle('hidden', !isLogged);
-    loginLink.classList.toggle('hidden', isLogged);
-
-    if (isLogged) badge.textContent = `로그인: ${Auth.user.name}`;
-    logoutBtn.onclick = () => { Auth.logout(); location.reload(); };
-  }
-};
-
-document.addEventListener('DOMContentLoaded', Auth.syncHeader);
diff --git a/assets/styles.css b/assets/styles.css
deleted file mode 100644
index f270a18..0000000
--- a/assets/styles.css
+++ /dev/null
@@ -1,65 +0,0 @@
-:root {
-  --bg: #0f172a;
-  --panel: #111827;
-  --text: #e5e7eb;
-  --muted: #94a3b8;
-  --accent: #22d3ee;
-  --card: #0b1220;
-  --ring: rgba(34, 211, 238, 0.5);
-}
-
-body[data-mood="happy"] { --bg:#0b1a10; --panel:#0f2316; --text:#f2fce2; --accent:#84cc16; --card:#0a1a10; }
-body[data-mood="sad"] { --bg:#0a1224; --panel:#0e1a30; --text:#dbeafe; --accent:#60a5fa; --card:#081122; }
-body[data-mood="calm"] { --bg:#0b1616; --panel:#0f1f20; --text:#e0fbfc; --accent:#2dd4bf; --card:#0a1415; }
-body[data-mood="angry"] { --bg:#1a0b0b; --panel:#240f0f; --text:#fee2e2; --accent:#f87171; --card:#1a0a0a; }
-body[data-mood="energetic"] { --bg:#0b0b1a; --panel:#11112a; --text:#ede9fe; --accent:#a78bfa; --card:#0b0b22; }
-
-* { box-sizing: border-box; }
-html, body { height: 100%; }
-body {
-  margin: 0;
-  background: var(--bg);
-  color: var(--text);
-  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
-}
-
-/* layout */
-.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:var(--panel); border-bottom:1px solid rgba(255,255,255,.06); position:sticky; top:0; z-index:10; }
-.brand { font-weight:700; letter-spacing:.2px; }
-.nav { display:flex; gap:8px; align-items:center; }
-.grid { display:grid; grid-template-columns:2fr 1fr; gap:12px; padding:12px; }
-@media (max-width:980px) { .grid { grid-template-columns:1fr; } }
-.panel { background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px; }
-
-/* components */
-.btn { padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:var(--card); color:var(--text); cursor:pointer; }
-.btn:hover { outline:2px solid var(--ring); }
-.btn.primary { background:var(--accent); color:#00110c; font-weight:700; border:none; }
-.badge { font-size:10px; padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.08); }
-.hidden { display:none !important; }
-
-/* player */
-.iframe-wrap { aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; }
-.controls { display:flex; gap:8px; align-items:center; margin-top:8px; }
-.meta { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; margin-top:8px; }
-.meta img { width:52px; height:52px; border-radius:8px; object-fit:cover; }
-.title { font-weight:700; }
-.sub { font-size:12px; color: var(--muted); }
-.rate { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
-.moods { display:flex; gap:8px; flex-wrap:wrap; }
-.chip { padding:8px 10px; border-radius:999px; background:var(--card); border:1px solid rgba(255,255,255,.08); cursor:pointer; font-size:14px; }
-.chip.active { background:var(--accent); color:#00110c; font-weight:700; border:none; }
-.rightHeader { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
-.list { display:grid; gap:8px; max-height:calc(100vh - 220px); overflow:auto; padding-right:4px; }
-.item { display:grid; grid-template-columns:90px 1fr auto; gap:10px; align-items:center; padding:8px; border-radius:10px; background:var(--card); border:1px solid transparent; cursor:pointer; }
-.item:hover { border-color:var(--accent); }
-.item img { width:90px; height:50px; border-radius:8px; object-fit:cover; }
-.t { font-weight:700; }
-.s { font-size:12px; color: var(--muted); }
-
-/* forms */
-.search { display:flex; gap:8px; max-width:640px; margin:0 auto; }
-.search input { flex:1; padding:10px 12px; border-radius:10px; background:var(--card); color:var(--text); border:1px solid rgba(255,255,255,.08); outline:none; }
-.foot { padding:8px 12px; font-size:12px; color: var(--muted); text-align:center; }
-.authbox { max-width:420px; margin:12px auto; }
-.loginform { display:flex; gap:8px; }
diff --git a/data/songs.json b/data/songs.json
deleted file mode 100644
index cf6eaf6..0000000
--- a/data/songs.json
+++ /dev/null
@@ -1,12 +0,0 @@
-[
-  {
-    "id": "youtube:dQw4w9WgXcQ",
-    "source": "YouTube",
-    "title": "Rick Astley — Never Gonna Give You Up",
-    "originalTitle": "Rick Astley - Never Gonna Give You Up (Official Music Video)",
-    "artist": "Rick Astley",
-    "thumb": "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
-    "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
-    "moods": ["energetic", "happy"]
-  }
-]
diff --git a/index.html b/index.html
deleted file mode 100644
index 43151b9..0000000
--- a/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Emotion Playlist · Home</title>
-  <link rel="stylesheet" href="./assets/styles.css" />
-</head>
-<body data-mood="calm">
-  <header class="topbar">
-    <div class="brand">🎵 Emotion Playlist</div>
-    <nav class="nav">
-      <a href="./search.html" class="btn">검색</a>
-      <a href="./playlist.html" class="btn">내 재생목록</a>
-      <a href="./login.html" class="btn" id="loginLink">로그인</a>
-      <span id="userBadge" class="badge hidden"></span>
-      <button id="logoutBtn" class="btn hidden">로그아웃</button>
-    </nav>
-  </header>
-
-  <main class="grid">
-    <!-- 왼쪽: 플레이어 -->
-    <section class="panel player">
-      <div class="iframe-wrap"><div id="player"></div></div>
-      <div class="controls">
-        <button id="playBtn" class="btn primary">재생</button>
-        <button id="pauseBtn" class="btn">일시정지</button>
-        <button id="addToPlaylistBtn" class="btn">재생목록에 추가</button>
-        <a id="openOnYT" class="btn" target="_blank" rel="noopener">YouTube에서 열기</a>
-      </div>
-      <div class="meta">
-        <img id="nowThumb" alt="썸네일" />
-        <div>
-          <div id="nowTitle" class="title">곡을 선택하세요</div>
-          <div id="nowSub" class="sub">아티스트 · 원본 제목</div>
-        </div>
-        <span id="nowSource" class="badge">–</span>
-      </div>
-      <div class="rate">
-        <span class="sub">이 곡의 감정 라벨:</span>
-        <div class="moods" id="rateMoods"></div>
-      </div>
-    </section>
-
-    <!-- 오른쪽: 추천 목록 -->
-    <aside class="panel">
-      <div class="rightHeader">
-        <h3 class="sub">추천</h3>
-        <div class="moods" id="moodChips"></div>
-      </div>
-      <div id="recList" class="list"></div>
-    </aside>
-  </main>
-
-  <footer class="foot">Demo: YouTube 임베드 + 더미 데이터. 추후 /api/search 연동 가능.</footer>
-
-  <!-- scripts -->
-  <script src="https://www.youtube.com/iframe_api"></script>
-  <script src="./assets/auth.js"></script>
-  <script src="./assets/api.js"></script>
-  <script src="./assets/app.js"></script>
-</body>
-</html>
diff --git a/login.html b/login.html
deleted file mode 100644
index a090685..0000000
--- a/login.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Emotion Playlist · Playlist</title>
-  <link rel="stylesheet" href="./assets/styles.css" />
-</head>
-<body data-mood="calm">
-  <header class="topbar">
-    <div class="brand">📻 내 재생목록</div>
-    <nav class="nav">
-      <a href="./index.html" class="btn">홈</a>
-      <a href="./search.html" class="btn">검색</a>
-      <a href="./login.html" class="btn" id="loginLink">로그인</a>
-      <span id="userBadge" class="badge hidden"></span>
-      <button id="logoutBtn" class="btn hidden">로그아웃</button>
-    </nav>
-  </header>
-
-  <main class="panel" style="max-width:980px;margin:12px auto;">
-    <div id="plList" class="list"></div>
-  </main>
-
-  <footer class="foot">로그인 사용자별로 재생목록(localStorage) 관리</footer>
-
-  <script src="./assets/auth.js"></script>
-  <script src="./assets/api.js"></script>
-  <script>
-    Auth.syncHeader();
-
-    const PL = API.Playlist;
-
-    function itemEl(track){
-      const el = document.createElement('div');
-      el.className = 'item';
-      el.innerHTML = `
-        <img src="${track.thumb}" alt="thumb" />
-        <div>
-          <div class="t">${API.cleanTitle(track.title)}</div>
-          <div class="s">${track.artist} · <span class="badge">${track.source}</span></div>
-        </div>
-        <div style="display:flex; gap:6px;">
-          <button class="btn btn-play">재생</button>
-          <button class="btn btn-remove">삭제</button>
-        </div>
-      `;
-
-      el.querySelector('.btn-play').onclick = () => {
-        localStorage.setItem('currentTrackId', track.id);
-        window.location.href = './index.html';
-      };
-
-      el.querySelector('.btn-remove').onclick = () => {
-        PL.remove(track.id);
-        render();
-      };
-
-      return el;
-    }
-
-    function render(){
-      const holder = document.getElementById('plList');
-      holder.innerHTML = '';
-      PL.get().forEach(t => holder.appendChild(itemEl(t)));
-    }
-
-    render();
-  </script>
-</body>
-</html>
diff --git a/playlist.html b/playlist.html
deleted file mode 100644
index a090685..0000000
--- a/playlist.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Emotion Playlist · Playlist</title>
-  <link rel="stylesheet" href="./assets/styles.css" />
-</head>
-<body data-mood="calm">
-  <header class="topbar">
-    <div class="brand">📻 내 재생목록</div>
-    <nav class="nav">
-      <a href="./index.html" class="btn">홈</a>
-      <a href="./search.html" class="btn">검색</a>
-      <a href="./login.html" class="btn" id="loginLink">로그인</a>
-      <span id="userBadge" class="badge hidden"></span>
-      <button id="logoutBtn" class="btn hidden">로그아웃</button>
-    </nav>
-  </header>
-
-  <main class="panel" style="max-width:980px;margin:12px auto;">
-    <div id="plList" class="list"></div>
-  </main>
-
-  <footer class="foot">로그인 사용자별로 재생목록(localStorage) 관리</footer>
-
-  <script src="./assets/auth.js"></script>
-  <script src="./assets/api.js"></script>
-  <script>
-    Auth.syncHeader();
-
-    const PL = API.Playlist;
-
-    function itemEl(track){
-      const el = document.createElement('div');
-      el.className = 'item';
-      el.innerHTML = `
-        <img src="${track.thumb}" alt="thumb" />
-        <div>
-          <div class="t">${API.cleanTitle(track.title)}</div>
-          <div class="s">${track.artist} · <span class="badge">${track.source}</span></div>
-        </div>
-        <div style="display:flex; gap:6px;">
-          <button class="btn btn-play">재생</button>
-          <button class="btn btn-remove">삭제</button>
-        </div>
-      `;
-
-      el.querySelector('.btn-play').onclick = () => {
-        localStorage.setItem('currentTrackId', track.id);
-        window.location.href = './index.html';
-      };
-
-      el.querySelector('.btn-remove').onclick = () => {
-        PL.remove(track.id);
-        render();
-      };
-
-      return el;
-    }
-
-    function render(){
-      const holder = document.getElementById('plList');
-      holder.innerHTML = '';
-      PL.get().forEach(t => holder.appendChild(itemEl(t)));
-    }
-
-    render();
-  </script>
-</body>
-</html>
diff --git a/search.html b/search.html
deleted file mode 100644
index 598ab55..0000000
--- a/search.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Emotion Playlist · Search</title>
-  <link rel="stylesheet" href="./assets/styles.css" />
-</head>
-<body data-mood="calm">
-  <header class="topbar">
-    <div class="brand">🔎 Search</div>
-    <nav class="nav">
-      <a href="./index.html" class="btn">홈</a>
-      <a href="./playlist.html" class="btn">내 재생목록</a>
-      <a href="./login.html" class="btn" id="loginLink">로그인</a>
-      <span id="userBadge" class="badge hidden"></span>
-      <button id="logoutBtn" class="btn hidden">로그아웃</button>
-    </nav>
-  </header>
-
-  <main class="panel" style="max-width:980px;margin:12px auto;">
-    <form id="searchForm" class="search">
-      <input id="searchInput" placeholder="노래/아티스트 검색 (데모: 더미 데이터)" />
-      <button class="btn" type="submit">검색</button>
-    </form>
-
-    <div class="moods" id="moodChips"></div>
-    <div id="resultList" class="list" style="margin-top:10px;"></div>
-  </main>
-
-  <footer class="foot">결과 클릭 시 곡을 선택하고 홈으로 이동합니다.</footer>
-
-  <script src="./assets/auth.js"></script>
-  <script src="./assets/api.js"></script>
-  <script>
-    Auth.syncHeader();
-
-    function itemEl(track){
-      const el = document.createElement('div');
-      el.className = 'item';
-      el.innerHTML = `
-        <img src="${track.thumb}" alt="thumb" />
-        <div>
-          <div class="t">${API.cleanTitle(track.title)}</div>
-          <div class="s">${track.artist} · <span class="badge">${track.source}</span></div>
-        </div>
-      `;
-      el.onclick = () => {
-        localStorage.setItem('currentTrackId', track.id);
-        window.location.href = './index.html';
-      };
-      return el;
-    }
-
-    function render(list){
-      const holder = document.getElementById('resultList');
-      holder.innerHTML = '';
-      list.forEach(t => holder.appendChild(itemEl(t)));
-    }
-
-    // 감정 칩 렌더링
-    (function renderMoodChips(){
-      const holder = document.getElementById('moodChips');
-      holder.innerHTML = '';
-      API.MOODS.forEach(m => {
-        const b = document.createElement('button');
-        b.className = 'chip';
-        b.textContent = m.label;
-        b.onclick = () => { document.body.setAttribute('data-mood', m.key); };
-        holder.appendChild(b);
-      });
-    })();
-
-    // 검색 이벤트
-    document.getElementById('searchForm').addEventListener('submit', (e) => {
-      e.preventDefault();
-      const q = document.getElementById('searchInput').value.trim();
-      const res = API.searchLocal(q); // 추후 /api/search 대체
-      render(res);
-    });
-
-    // 초기 렌더
-    render(API.list());
-  </script>
-</body>
-</html>