feat(search): 노래 검색기능 추가

app/components/SearchBar.module.scss

@@ -4,11 +4,18 @@
   position: sticky;
   top: 0;
   z-index: 20;
-  padding: 12px 8px;
+  padding: 12px;
   background: #fff;
   display: flex;
-  align-items: center;
   justify-content: center;
+  width: auto;
+  gap: 15px;
+}
+
+.inner {
+  width: 100%;
+  display: flex;
+  align-items: center;
   gap: 15px;
 }
 

app/components/SearchBar.tsx

@@ -2,19 +2,22 @@ import { Form } from '@remix-run/react';
 
 import styles from './SearchBar.module.scss';
 
-export const SearchBar = () => {
+export const SearchBar = ({ defaultQuery = '' }: { defaultQuery?: string }) => {
   return (
     <Form method="get" action="/search" role="search" className={styles.root}>
-      <a href="/" className={styles.logo}>
-        Sonnets
-      </a>
-      <input
-        className={styles.input}
-        type="text"
-        name="search"
-        placeholder="음악, 메모, 사용자를 검색해보세요"
-        autoComplete="on"
-      />
+      <div className={styles.inner}>
+        <a href="/" className={styles.logo}>
+          Sonnets
+        </a>
+        <input
+          className={styles.input}
+          type="text"
+          name="search"
+          placeholder="음악, 메모, 사용자를 검색해보세요"
+          defaultValue={defaultQuery}
+          autoComplete="on"
+        />
+      </div>
     </Form>
   );
 };

app/features/music/pages/music.user.module.scss

@@ -26,7 +26,6 @@
   }
 }
 
-// 유저 정보(작성자) 스타일
 .author-info {
   margin-bottom: 2rem;
   display: flex;

app/features/profile/loader.ts

@@ -5,7 +5,6 @@ import { getCurrentDBUser, getCurrentUser, requireUserOwnership } from 'app/exte
 import { buildSpotifyTrackUrl, getSpotifyEmbed } from 'app/external/music/SpotifyOEmbed';
 import createLoader from 'app/utils/createLoader';
 
-import { searchSongInputLoader } from './components/SearchSongInputloader';
 import {
   fetchAccountSettingsData,
   fetchFollowers,

app/features/profile/pages/addTodaySong.module.scss

@@ -1,48 +1,48 @@
-@use 'styles/layout' as *;
+// @use 'styles/layout' as *;
 
-.add-today-song-container {
-  display: flex;
-  padding: 36px 16px;
-  flex-direction: column;
-  border-radius: 8px;
-}
+// .add-today-song-container {
+//   display: flex;
+//   padding: 36px 16px;
+//   flex-direction: column;
+//   border-radius: 8px;
+// }
 
-.title-box {
-  display: flex;
-  align-items: center;
-  .back-button {
-    color: $black-500;
-    font-size: 24px;
-    font-weight: 600;
-    margin-left: 16px;
-    margin: 0;
-    text-decoration: none;
-  }
-  .title {
-    flex: 1 0 auto;
-    font-size: 24px;
-    font-weight: 600;
-    margin-left: 16px;
-    margin: 0;
-    text-align: center;
-  }
-}
+// .title-box {
+//   display: flex;
+//   align-items: center;
+//   .back-button {
+//     color: $black-500;
+//     font-size: 24px;
+//     font-weight: 600;
+//     margin-left: 16px;
+//     margin: 0;
+//     text-decoration: none;
+//   }
+//   .title {
+//     flex: 1 0 auto;
+//     font-size: 24px;
+//     font-weight: 600;
+//     margin-left: 16px;
+//     margin: 0;
+//     text-align: center;
+//   }
+// }
 
-.search-section {
-  margin-top: 24px;
-  h2 {
-    font-size: 20px;
-    font-weight: 600;
-    margin-bottom: 16px;
-  }
-}
+// .search-section {
+//   margin-top: 24px;
+//   h2 {
+//     font-size: 20px;
+//     font-weight: 600;
+//     margin-bottom: 16px;
+//   }
+// }
 
-.initial-song-container {
-  margin-top: 24px;
-  h3 {
-    margin: 0;
-    font-size: 20px;
-    font-weight: 600;
-    margin-bottom: 16px;
-  }
-}
+// .initial-song-container {
+//   margin-top: 24px;
+//   h3 {
+//     margin: 0;
+//     font-size: 20px;
+//     font-weight: 600;
+//     margin-bottom: 16px;
+//   }
+// }

app/features/profile/pages/addTodaySong.tsx

@@ -1,60 +1,60 @@
-import { Link, useLoaderData, useSubmit } from '@remix-run/react';
-
-import type { MusicInfo } from 'app/external/music/IMusicSearchAPI';
-import SongItem, { type SimpleSong } from 'app/features/profile/components/SongItem';
-import styles from 'app/features/profile/pages/addTodaySong.module.scss';
-
-import SearchSongInput from '../components/SearchSongInput';
-import { addTodaySongLoader } from '../loader';
-
-export default function AddTodaySongPage() {
-  const { initialSong, songs } = useLoaderData<typeof addTodaySongLoader>();
-  const savePickedSong = useSavePickedSong();
-
-  return (
-    <div className={styles.addTodaySongContainer}>
-      <div className={styles.titleBox}>
-        <Link className={styles.backButton} to="../show">
-          {'<'}
-        </Link>
-        <h1 className={styles.title}>오늘의 추천곡 수정</h1>
-      </div>
-
-      <section className={styles.searchSection}>
-        <SearchSongInput onSelect={savePickedSong} songs={songs} />
-      </section>
-
-      {initialSong && (
-        <div className={styles.initialSongContainer}>
-          <h3>현재 추천곡</h3>
-          <SongItem song={initialSong} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-const useSavePickedSong = () => {
-  const submit = useSubmit();
-
-  return async (song: MusicInfo) => {
-    const ok = window.confirm(`"${song.title}" – ${song.artist}\n오늘의 추천곡으로 등록하시겠습니까?`);
-    if (!ok) return;
-
-    const simple: SimpleSong = {
-      id: 0,
-      title: song.title,
-      artist: song.artist,
-      album: song.album ?? null,
-      thumbnailUrl: song.albumCover ? await song.albumCover : null,
-    };
-
-    const fd = new FormData();
-    fd.append('title', simple.title);
-    fd.append('artist', simple.artist);
-    fd.append('album', simple.album ?? '');
-    fd.append('thumbnailUrl', simple.thumbnailUrl ?? '');
-    fd.append('spotifyId', song.spotifyId ?? '');
-    submit(fd, { method: 'post' });
-  };
-};
+// import { Link, useLoaderData, useSubmit } from '@remix-run/react';
+
+// import type { MusicInfo } from 'app/external/music/IMusicSearchAPI';
+// import styles from 'app/features/profile/pages/addTodaySong.module.scss';
+// import SongItem, { type SimpleSong } from 'app/features/search/components/SongItem';
+
+// import SearchSongInput from '../../search/components/SearchSongInput';
+// import { addTodaySongLoader } from '../loader';
+
+// export default function AddTodaySongPage() {
+//   const { initialSong, songs } = useLoaderData<typeof addTodaySongLoader>();
+//   const savePickedSong = useSavePickedSong();
+
+//   return (
+//     <div className={styles.addTodaySongContainer}>
+//       <div className={styles.titleBox}>
+//         <Link className={styles.backButton} to="../show">
+//           {'<'}
+//         </Link>
+//         <h1 className={styles.title}>오늘의 추천곡 수정</h1>
+//       </div>
+
+//       <section className={styles.searchSection}>
+//         <SearchSongInput onSelect={savePickedSong} songs={songs} />
+//       </section>
+
+//       {initialSong && (
+//         <div className={styles.initialSongContainer}>
+//           <h3>현재 추천곡</h3>
+//           <SongItem song={initialSong} />
+//         </div>
+//       )}
+//     </div>
+//   );
+// }
+
+// const useSavePickedSong = () => {
+//   const submit = useSubmit();
+
+//   return async (song: MusicInfo) => {
+//     const ok = window.confirm(`"${song.title}" – ${song.artist}\n오늘의 추천곡으로 등록하시겠습니까?`);
+//     if (!ok) return;
+
+//     const simple: SimpleSong = {
+//       id: 0,
+//       title: song.title,
+//       artist: song.artist,
+//       album: song.album ?? null,
+//       thumbnailUrl: song.albumCover ? await song.albumCover : null,
+//     };
+
+//     const fd = new FormData();
+//     fd.append('title', simple.title);
+//     fd.append('artist', simple.artist);
+//     fd.append('album', simple.album ?? '');
+//     fd.append('thumbnailUrl', simple.thumbnailUrl ?? '');
+//     fd.append('spotifyId', song.spotifyId ?? '');
+//     submit(fd, { method: 'post' });
+//   };
+// };

app/features/profile/pages/editList.tsx

@@ -17,7 +17,7 @@ import { Link } from '@remix-run/react';
 import { useState } from 'react';
 
 import styles from './editList.module.scss';
-import SongItem from '../components/SongItem';
+import SongItem from '../../search/components/SongItem';
 import { SortableItem } from '../components/SortableItem'; // 새로 추가된 컴포넌트
 
 export default function EditList() {