Merge pull request #16 from dnd-side-project/feat/OZ-68

feat : 북마크 페이지

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

@@ -0,0 +1,16 @@
+import PhotoList from '../feed/components/PhotoList';
+import EmptyCase from '../feed/components/EmptyCase';
+
+export default function BookmarkPage() {
+  return (
+    <>
+      <EmptyCase
+        title={'포즈를 보관해 보세요!'}
+        text={`북마크 버튼으로 포즈를 보관할 수 있어요.\n포즈피드에서 멋진 포즈를 찾아 보관해 보세요.`}
+        button={'포즈피드 바로가기'}
+        path={'/feed'}
+      />
+      <PhotoList />
+    </>
+  );
+}

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

@@ -7,6 +7,7 @@ const tabData = [
   { path: '/pick', title: '포즈픽' },
   { path: '/talk', title: '포즈톡' },
   { path: '/feed', title: '포즈피드' },
+  { path: '/bookmark', title: '북마크' },
 ];
 
 export default function Tab() {

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

@@ -0,0 +1,28 @@
+import { PrimaryButton } from '@/components/Button';
+import { Spacing } from '@/components/Spacing';
+import Link from 'next/link';
+
+interface EmptyCase {
+  title: string;
+  text: string;
+  button: string;
+  path: string;
+}
+
+export default function EmptyCase(props: EmptyCase) {
+  const { title, text, button, path } = props;
+
+  return (
+    <div className="py-80 text-center">
+      <h4 className="text-secondary">{title}</h4>
+      <Spacing size={8} />
+      <p className="text-tertiary">{text}</p>
+      <Spacing size={32} />
+      <div className="flex justify-center">
+        <Link href={path}>
+          <PrimaryButton text={button} type="secondary" />
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { ICON } from '@/constants/icon';
+import Image from 'next/image';
+
+export default function Photo() {
+  return (
+    <div className={`relative mb-16 inline-block h-200 w-full rounded-8 bg-sub-white`}>
+      <div className="absolute bottom-6 right-6 h-36 w-36 rounded-24 bg-white bg-opacity-30 p-6">
+        <Image src={ICON.bookmark.empty} width={24} height={24} alt="🔖" />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+import Photo from './Photo';
+
+export default function PhotoList() {
+  return (
+    <>
+      <div className="columns-2	overflow-y-scroll">
+        <Photo />
+        <Photo />
+        <Photo />
+        <Photo />
+        <Photo />
+        <Photo />
+        <Photo />
+      </div>
+    </>
+  );
+}

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

@@ -1,23 +1,22 @@
 'use client';
 
+import EmptyCase from './components/EmptyCase';
 import Filter from './components/Filter';
-import Thumbnails from './components/Thumbnails';
 import FilterSheet from './components/FilterSheet';
+import PhotoList from './components/PhotoList';
 
 export default function Feed() {
   return (
     <>
       <Filter />
       <div className="pt-72">
-        <div className="columns-2	overflow-y-scroll bg-black">
-          <Thumbnails />
-          <Thumbnails />
-          <Thumbnails />
-          <Thumbnails />
-          <Thumbnails />
-          <Thumbnails />
-          <Thumbnails />
-        </div>
+        <EmptyCase
+          title={'신비한 포즈를 찾으시는군요!'}
+          text={'찾고 싶은 포즈를 저희에게 알려주세요.'}
+          button={'문의사항 남기기'}
+          path={''}
+        />
+        <PhotoList />
       </div>
       <FilterSheet />
     </>

src/app/(Main)/layout.tsx

@@ -7,7 +7,7 @@ export default function MainLayout({ children }: StrictPropsWithChildren) {
     <>
       <Spacing size={96} />
       <MainHeader />
-      {children}
+      <div className="px-20 py-16">{children}</div>
     </>
   );
 }

src/components/Button/PrimaryButton.tsx

@@ -3,13 +3,19 @@ import Image from 'next/image';
 interface Button {
   icon?: string;
   text: string;
-  onClick: () => void;
-  type?: 'fill' | 'outline';
+  onClick?: () => void;
+  type?: keyof style;
 }
 
-const style = {
+interface style {
+  fill: string;
+  outline: string;
+  secondary: string;
+}
+const style: style = {
   fill: `bg-main-violet text-white`,
   outline: `border-1 border-main-violet text-main-violet bg-main-violet-base`,
+  secondary: `bg-sub-white text-secondary w-fit`,
 };
 
 export default function PrimaryButton({ icon, text, onClick, type = 'fill' }: Button) {

src/constants/icon.ts

@@ -1,6 +1,10 @@
 export const ICON = {
   close: '/icons/close.svg',
   restart: '/icons/restart.svg',
+  bookmark: {
+    fill: '/icons/bookmark_fill.svg',
+    empty: '/icons/bookmark.svg',
+  },
   arrow: {
     back: '/icons/arrow_back.svg',
   },