FrontEnd/search.html at main · Javascript-Making-Website/FrontEnd · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!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>