Merge pull request #15 from codeit9-temporary/feature/favorite

Design: Layout 분리 및 즐겨찾기 페이지 UI 구현

Author: 99minji

components/Layout/CardsLayout.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+interface CardsLayoutProps {
+  children: React.ReactNode;
+}
+
+const CardsLayout = ({ children }: CardsLayoutProps) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 lg:gap-[10px] w-full">
+      {children}
+    </div>
+  );
+};
+
+export default CardsLayout;

components/Layout/ContentLayout.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+interface ContentLayoutProps {
+  children: React.ReactNode;
+}
+
+const ContentLayout = ({ children }: ContentLayoutProps) => {
+  return (
+    <div className="w-full max-w-[1125px] mx-auto p-[10px] md:p-10 px-[32.5px]">
+      {children}
+    </div>
+  );
+};
+
+export default ContentLayout;

pages/favorite/index.tsx

@@ -0,0 +1,27 @@
+import CardsLayout from "@/components/Layout/CardsLayout";
+import ContentLayout from "@/components/Layout/ContentLayout";
+
+const Favorite = () => {
+  return (
+    <>
+      <div className="page-title pt-[10px] md:pt-5 pb-10 md:pb-[60px] bg-gray100 text-center">
+        <h2 className="text-[32px] md:text-[40px] font-semibold">
+          ⭐️ 즐겨찾기
+        </h2>
+      </div>
+      <ContentLayout>
+        <CardsLayout>
+          {/* 카드 공통 컴포넌트로 구현 예정 */}
+          <div className="border border-red-800">card</div>
+          <div className="border border-red-800">card</div>
+          <div className="border border-red-800">card</div>
+          <div className="border border-red-800">card</div>
+          <div className="border border-red-800">card</div>
+          <div className="border border-red-800">card</div>
+        </CardsLayout>
+      </ContentLayout>
+    </>
+  );
+};
+
+export default Favorite;