From 71d91cde616c37f663aee2e019e6fc72dcbe899f Mon Sep 17 00:00:00 2001
From: mokjakA <youseungjua@gmail.com>
Date: Fri, 31 Oct 2025 20:53:47 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20feedPage=EC=97=90=20SearchBar=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80&=20ui=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/features/feed/pages/feedPage.module.scss | 17 ++++-
 app/features/feed/pages/feedPage.tsx         | 69 +++++++++++---------
 app/features/profile/pages/show.module.scss  |  6 +-
 3 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/app/features/feed/pages/feedPage.module.scss b/app/features/feed/pages/feedPage.module.scss
index b4b78da..9a1dfb5 100644
--- a/app/features/feed/pages/feedPage.module.scss
+++ b/app/features/feed/pages/feedPage.module.scss
@@ -1,11 +1,22 @@
 @use 'styles/layout' as *;
 
+.searchBarContainer {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  padding: 0 24px;
+
+  @include mobile {
+    padding: 0;
+  }
+}
 .feed {
   display: flex;
+  flex-direction: column;
   justify-content: center;
-  padding: 24px;
+  padding: 0 24px;
   @include mobile {
-    padding: 16px;
+    padding: 0 16px;
   }
 }
 
@@ -15,6 +26,7 @@
   display: grid;
   gap: 20px;
   padding: 0;
+  margin: 0;
 }
 
 .card {
@@ -22,7 +34,6 @@
   border: 1px solid #eee;
   border-radius: 16px;
   overflow: hidden;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
 }
 
 .cover-link {
diff --git a/app/features/feed/pages/feedPage.tsx b/app/features/feed/pages/feedPage.tsx
index 450ce28..01bf838 100644
--- a/app/features/feed/pages/feedPage.tsx
+++ b/app/features/feed/pages/feedPage.tsx
@@ -1,5 +1,7 @@
 import { Link, useLoaderData } from '@remix-run/react';
 
+import { SearchBar } from 'app/components/SearchBar';
+
 import styles from './feedPage.module.scss';
 import { feedLoader } from '../loader';
 
@@ -10,40 +12,45 @@ export default function feedPage() {
   const { feedList } = useLoaderData<typeof feedLoader>();
 
   return (
-    <div className={styles.feed}>
-      <ul className={styles.list}>
-        {feedList.map((item) => (
-          <li key={item.id} className={styles.card}>
-            <Link to={`/music/${item.memo.songId}/user/${item.memo.userId}`} className={styles['cover-link']}>
-              <div className={styles['cover-box']}>
-                <img
-                  className={styles.cover}
-                  src={item.memo.song.thumbnailUrl || DEFAULT_COVER}
-                  alt={`${item.memo.song.title} 앨범 커버`}
-                />
-              </div>
-            </Link>
-            <div className={styles.body}>
-              <p className={styles.memo}>
-                <Link to={`/music/${item.memo.songId}/user/${item.memo.userId}`} className={styles.memoLink}>
-                  {trimFirstLine(item.memo.content)}
-                </Link>
-              </p>
-              <div className={styles.meta}>
-                <Link to={`/profile/${item.memo.userId}/show`} className={styles.chip}>
+    <>
+      <div className={styles.searchBarContainer}>
+        <SearchBar />
+      </div>
+      <div className={styles.feed}>
+        <ul className={styles.list}>
+          {feedList.map((item) => (
+            <li key={item.id} className={styles.card}>
+              <Link to={`/music/${item.memo.songId}/user/${item.memo.userId}`} className={styles['cover-link']}>
+                <div className={styles['cover-box']}>
                   <img
-                    className={styles.avatar}
-                    src={(item.memo.user.avatarUrl ?? '').trim() || DEFAULT_AVATAR}
-                    alt=""
+                    className={styles.cover}
+                    src={item.memo.song.thumbnailUrl || DEFAULT_COVER}
+                    alt={`${item.memo.song.title} 앨범 커버`}
                   />
-                  <span className={styles.handle}>@{item.memo.user.handle}</span>
-                </Link>
+                </div>
+              </Link>
+              <div className={styles.body}>
+                <p className={styles.memo}>
+                  <Link to={`/music/${item.memo.songId}/user/${item.memo.userId}`} className={styles.memoLink}>
+                    {trimFirstLine(item.memo.content)}
+                  </Link>
+                </p>
+                <div className={styles.meta}>
+                  <Link to={`/profile/${item.memo.userId}/show`} className={styles.chip}>
+                    <img
+                      className={styles.avatar}
+                      src={(item.memo.user.avatarUrl ?? '').trim() || DEFAULT_AVATAR}
+                      alt=""
+                    />
+                    <span className={styles.handle}>@{item.memo.user.handle}</span>
+                  </Link>
+                </div>
               </div>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
   );
 }
 
diff --git a/app/features/profile/pages/show.module.scss b/app/features/profile/pages/show.module.scss
index ac7915c..c830200 100644
--- a/app/features/profile/pages/show.module.scss
+++ b/app/features/profile/pages/show.module.scss
@@ -1,7 +1,11 @@
 @use 'styles/layout' as *;
 
 .root {
-  padding: 24px;
+  padding: 0 24px 24px;
+
+  @include mobile {
+    padding: 0 0 16px;
+  }
 }
 .profile-box {
   display: flex;