Style : 포즈피드 화면 구현

src/app/(Main)/components/Tab.tsx

@@ -19,7 +19,9 @@ export default function Tab() {
           {item.path === path ? (
             <>
               <div className="py-12">
-                <h5 className="text-brand">{item.title}</h5>
+                <h5 id="subtitle-1" className="text-brand">
+                  {item.title}
+                </h5>
               </div>
               <div className="relative top-0.5 border-b-2 border-b-main-violet" />
             </>

src/app/(Main)/feed/components/Filter.tsx

@@ -0,0 +1,13 @@
+import { ICON } from '@/constants/icon';
+import Image from 'next/image';
+
+export default function Filter() {
+  return (
+    <div className="fixed inset-x-0 top-116 flex h-56 items-center bg-white px-20">
+      <button className="flex items-center gap-8 rounded-8 bg-sub-white px-16 py-9">
+        <h5 id="subtitle-2">필터</h5>
+        <Image src={ICON.carat.down} alt="▾" width={16} height={16} priority />
+      </button>
+    </div>
+  );
+}

src/app/(Main)/feed/components/Thumbnails.tsx

@@ -0,0 +1,3 @@
+export default function Thumbnails({ height }: { height: number }) {
+  return <div className={`inline-block bg-sub-white h-${height} mb-16 w-full rounded-8`} />;
+}

src/app/(Main)/feed/page.tsx

@@ -1,3 +1,27 @@
+'use client';
+
+import Filter from './components/Filter';
+import Thumbnails from './components/Thumbnails';
+
+const tmp = [
+  44, 203, 250, 7, 136, 44, 105, 193, 122, 270, 232, 213, 243, 35, 244, 73, 271, 109, 30, 76, 11,
+  198, 132, 48, 227, 201, 241, 140, 63, 115, 187, 80, 35, 6, 123, 55, 286, 220, 23, 293, 50, 297,
+  50, 265, 117, 89, 27, 77, 143, 37, 87, 267, 158, 11, 99, 203, 229, 287, 258, 78, 213, 176, 214,
+  11, 11, 141, 290, 258, 223, 109, 125, 217, 267, 288, 0, 274, 270, 34, 274, 219, 49, 137, 27, 2,
+  52, 202, 2, 101, 101, 287, 17, 43, 210, 146, 170, 68, 163, 89, 191, 62,
+];
+
 export default function Feed() {
-  return <>포즈피드</>;
+  return (
+    <>
+      <Filter />
+      <div className="pt-72">
+        <div className="columns-2	overflow-y-scroll">
+          {tmp.map((item, idx) => (
+            <Thumbnails height={item} key={idx} />
+          ))}
+        </div>
+      </div>
+    </>
+  );
 }

src/constants/icon.ts

@@ -0,0 +1,9 @@
+export const ICON = {
+    arrow: {
+        back: "/icons/arrow_back.svg"
+    },
+    carat: {
+        up: "/icons/carat_up.svg",
+        down: "/icons/carat_down.svg"
+    }
+} as const

styles/typography.css

@@ -23,16 +23,24 @@ h4 {
     letter-spacing: -0.2px;
 }
 
-/*
-subtitle-1 에 해당하는 타이포입니다.
-hifi에서 subtitle-2, subtitle-3은 아직 쓰이지 않는 것 같아서 임의로 h5로 사용했어요
-*/
-h5 {
+#subtitle-1 {
     font-weight: 500;
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: -0.2px;
 }
+#subtitle-2 {
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+    letter-spacing: -0.1px;
+}
+#subtitle-3 {
+    font-weight: 500;
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+    letter-spacing: -0px;
+}
 
 h6 {
     font-weight: 500;