공통 컴포넌트: Header

src/app/globals.css

@@ -2,13 +2,15 @@
   --primary: #0075FF;
   --secondary: #B2D6FF;
   --red: #FF5247;
+  --gray:#F5F5F5;
   --gray-100: #CDCFD0;
   --gray-200: #979C9E;
   --gray-300: #72777A;
   --gray-400: #404446;
   --tertiary: #7A7A7A;
   --black: #090A0A;
-  --white: #FFF
+  --white: #FFF;
+  --pink: #F67272;
 }
 
 body {

src/app/page.tsx

@@ -1,13 +1,10 @@
 import Link from 'next/link';
 
-import BottomNav from '@/components/shared/bottom-nav/BottomNav';
-
 export default function Home() {
   return (
     <div>
-      <h1 style={{ fontSize: '20px' }}>Home</h1>
+      <h1>Home</h1>
       <Link href="/about">About</Link>
-      <BottomNav />
     </div>
   );
 }

src/components/icons/BackArrow.tsx

@@ -0,0 +1,20 @@
+import { Colors, colors } from '@styles/colorPalette';
+
+interface BackProps {
+  width?: number
+  height?:number
+  color?: Colors
+  onClick?: () => void
+}
+
+function BackArrow({
+  width = 9, height = 16, color = 'black', onClick,
+}:BackProps) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
+      <path d="M8 15.095L1.36705 8.82734C0.877651 8.3649 0.87765 7.61512 1.36705 7.15268L8 0.88501" stroke={colors[color]} strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export default BackArrow;

src/components/icons/Heart.tsx

@@ -0,0 +1,21 @@
+import { Colors, colors } from '@styles/colorPalette';
+
+interface HeartProps {
+  width: number
+  height:number
+  color?: Colors
+  fillColor?: Colors
+  onClick?: () => void
+}
+
+function Heart({
+  width, height, color = 'gray400', onClick, fillColor = 'white',
+}: HeartProps) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={onClick}>
+      <path d="M17.612 2.41452C17.1722 1.96607 16.65 1.61034 16.0752 1.36763C15.5005 1.12492 14.8844 1 14.2623 1C13.6401 1 13.0241 1.12492 12.4493 1.36763C11.8746 1.61034 11.3524 1.96607 10.9126 2.41452L9.99977 3.34476L9.08699 2.41452C8.19858 1.50912 6.99364 1.00047 5.73725 1.00047C4.48085 1.00047 3.27591 1.50912 2.38751 2.41452C1.4991 3.31992 1 4.5479 1 5.82833C1 7.10875 1.4991 8.33674 2.38751 9.24214L3.30029 10.1724L9.99977 17L16.6993 10.1724L17.612 9.24214C18.0521 8.79391 18.4011 8.26171 18.6393 7.67596C18.8774 7.09021 19 6.46237 19 5.82833C19 5.19428 18.8774 4.56645 18.6393 3.9807C18.4011 3.39494 18.0521 2.86275 17.612 2.41452Z" stroke={colors[color]} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill={colors[fillColor]} />
+    </svg>
+  );
+}
+
+export default Heart;