Feat/step5 search user

app/components/SearchBar.tsx

@@ -2,9 +2,17 @@ import { Form } from '@remix-run/react';
 
 import styles from './SearchBar.module.scss';
 
-export const SearchBar = ({ defaultQuery = '' }: { defaultQuery?: string }) => {
+export const SearchBar = ({
+  defaultQuery = '',
+  actionUrl = '/search',
+  tab,
+}: {
+  defaultQuery?: string;
+  actionUrl?: string;
+  tab?: string;
+}) => {
   return (
-    <Form method="get" action="/search" role="search" className={styles.root}>
+    <Form method="get" action={actionUrl} role="search" className={styles.root}>
       <div className={styles.inner}>
         <a href="/" className={styles.logo}>
           Sonnets
@@ -17,6 +25,7 @@ export const SearchBar = ({ defaultQuery = '' }: { defaultQuery?: string }) => {
           defaultValue={defaultQuery}
           autoComplete="on"
         />
+        {tab && <input type="hidden" name="tab" value={tab} />}
       </div>
     </Form>
   );

app/components/UserItem.module.scss

@@ -0,0 +1,169 @@
+@use 'styles/layout' as *;
+
+.userItem {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  border-radius: 12px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  transition: box-shadow 0.2s;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  box-sizing: border-box;
+  justify-content: flex-start;
+}
+
+.userInfo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 0.8rem;
+
+  @include mobile {
+    margin-bottom: 0;
+  }
+}
+
+.userLink {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  text-decoration: none;
+  color: inherit;
+  flex: 1;
+  min-width: 0;
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  background-color: #f0f0f0;
+}
+
+.handle {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.followButton {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-width: 90px;
+  flex-shrink: 0;
+
+  &.follow {
+    background-color: $primary-500;
+    color: white;
+    &:hover {
+      opacity: 0.85;
+    }
+  }
+
+  &.unfollow {
+    background-color: #f0f0f0;
+    color: #555;
+    border: 1px solid #ddd;
+    &:hover {
+      background-color: #e0e0e0;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.recommendedSong {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  padding: 0.8rem;
+  text-decoration: none;
+  color: inherit;
+  transition: background-color 0.2s;
+  min-width: 0;
+  overflow: hidden;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f1f3f5;
+  }
+
+  &__thumbnail {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    flex: 1;
+  }
+
+  &__title {
+    font-weight: 600;
+    font-size: 0.95rem;
+    line-height: 1.2;
+  }
+
+  &__artist {
+    font-size: 0.85rem;
+    color: #666;
+    line-height: 1.2;
+  }
+
+  min-height: 64px;
+  height: 64px;
+  box-sizing: border-box;
+
+  @include mobile {
+    display: none;
+  }
+}
+
+.noSongPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  padding: 1rem;
+  color: #888;
+  font-size: 0.9rem;
+
+  p {
+    margin: 0;
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  min-height: 64px;
+  height: 64px;
+  box-sizing: border-box;
+
+  @include mobile {
+    display: none;
+  }
+}

app/components/UserItem.tsx

@@ -0,0 +1,81 @@
+import { Link, useFetcher } from '@remix-run/react';
+
+import { MusicNoteIcon } from 'app/features/search/components/Icons';
+
+import styles from './UserItem.module.scss';
+
+interface RecommendedSong {
+  id: number;
+  title: string;
+  artist: string;
+  thumbnailUrl?: string | null;
+}
+
+export interface UserItemUser {
+  id: number;
+  handle: string;
+  avatarUrl?: string | null;
+  isFollowing?: boolean | null;
+  todayRecommendedSong?: RecommendedSong | null;
+}
+
+export interface UserItemProps {
+  user: UserItemUser;
+  currentUserId?: number | null;
+  showFollow?: boolean;
+}
+
+export function UserItem({ user, currentUserId = null, showFollow = true }: UserItemProps) {
+  const fetcher = useFetcher();
+  const isSubmitting = fetcher.state === 'submitting';
+  const isFollowing = fetcher.formData ? fetcher.formData.get('intent') === 'follow' : !!user.isFollowing;
+  const isCurrentUser = currentUserId === user.id;
+
+  return (
+    <li className={styles.userItem}>
+      <div className={styles.userInfo}>
+        <Link to={`/profile/${user.id}/show`} className={styles.userLink}>
+          <img
+            src={user.avatarUrl || '/images/features/profile/profile_default.png'}
+            alt={`${user.handle}의 프로필 사진`}
+            className={styles.avatar}
+          />
+          <span className={styles.handle}>@{user.handle}</span>
+        </Link>
+
+        {showFollow && !isCurrentUser && (
+          <fetcher.Form method="post">
+            <input type="hidden" name="intent" value={isFollowing ? 'unfollow' : 'follow'} />
+            <input type="hidden" name="targetUserId" value={String(user.id)} />
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className={`${styles.followButton} ${isFollowing ? styles.unfollow : styles.follow}`}
+            >
+              {isFollowing ? '언팔로우' : '팔로우'}
+            </button>
+          </fetcher.Form>
+        )}
+      </div>
+
+      {user.todayRecommendedSong ? (
+        <Link to={`/music/${user.todayRecommendedSong.id}/user/${user.id}`} className={styles.recommendedSong}>
+          <img
+            src={user.todayRecommendedSong.thumbnailUrl ?? 'https://placehold.co/36x36/ecf0f1/bdc3c7?text=...'}
+            alt={user.todayRecommendedSong.title}
+            className={styles.recommendedSong__thumbnail}
+          />
+          <div className={styles.recommendedSong__details}>
+            <span className={styles.recommendedSong__title}>{user.todayRecommendedSong.title}</span>
+            <span className={styles.recommendedSong__artist}>{user.todayRecommendedSong.artist}</span>
+          </div>
+        </Link>
+      ) : (
+        <div className={styles.noSongPlaceholder}>
+          <MusicNoteIcon />
+          <p>추천곡 없음</p>
+        </div>
+      )}
+    </li>
+  );
+}