Merge pull request dnd-side-project#54 from dnd-side-project/feature/dnd-side-project#40

Author: ydw1996

next.config.ts

@@ -1,6 +1,15 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'zipzip-bucket.s3.amazonaws.com',
+        pathname: '/**',
+      },
+    ],
+  },
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,

package-lock.json

@@ -21,6 +21,7 @@
     "next": "15.4.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "swiper": "^11.2.10",
     "tailwind-merge": "^3.3.1",
     "zustand": "^5.0.7"
   },

package.json

@@ -1,28 +1,44 @@
+'use client';
+
 import React from 'react';
 import { MainLayout } from '@/components/layout';
-import Image from 'next/image';
-import { Title2xl } from '@/components/ui/Typography';
 import { VerticalSlider } from '@/components/main/VerticalSlider';
 import { RouteBox } from '@/components/main/RouteBox';
 import { IconTextRouter } from '@/components/main/IconTextRouter';
 import { TitleL } from '@/components/ui/Typography';
+import { Header } from '@/components/ui/Header';
+import { Icon } from '@/components/ui/Icon';
+import { useRouter } from 'next/navigation';
+
+export default function HomePage() {
+  const router = useRouter();
 
-export default function index() {
   return (
-    <MainLayout className="px-6">
-      <header className="flex w-full justify-between py-3">
-        <Image src={'assets/ico-logo.svg'} alt="logo" width={80} height={20} />
-        <Image src={'assets/ico-my-page.svg'} alt="my-page" width={30} height={20} />
-      </header>
-      <div className="flex flex-col items-start justify-center py-4">
-        <Title2xl className="text-xl font-semibold">내 기준에 맞는 집</Title2xl>
-        <div className="flex flex-row">
-          <Title2xl className="text-xl font-semibold text-[#669AFF]">.zip!</Title2xl>
-          <Title2xl className="text-xl font-semibold">해서 후회없게</Title2xl>
-        </div>
-      </div>
+    <MainLayout>
+      <Header
+        left={
+          <Icon
+            name="house"
+            color="primary-50"
+            className="cursor-pointer"
+            size={24}
+            padding={10}
+            onClick={() => router.push('/')}
+          />
+        }
+        right={
+          <Icon
+            name="myPage"
+            color="coolGray-50"
+            className="cursor-pointer"
+            size={24}
+            padding={10}
+            onClick={() => router.push('/mypage')}
+          />
+        }
+      />
 
-      <div className="w-full">
+      <div className="w-full px-6">
         <VerticalSlider />
 
         <div className="flex w-full flex-row justify-center gap-4 py-4">

public/assets/active-folder.svg

@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@import 'swiper/css';
 
 @font-face {
   font-family: 'Pretendard';
@@ -21,6 +22,7 @@
   --color-primary-50: #669aff;
   --color-primary-55: #4b8bff;
   --color-secondary-50: #fba907;
+  --color-secondary-10: #fff3d9;
   --color-static-black: #000000;
   --color-static-white: #ffffff;
   --color-status-red: #ff6648;
@@ -55,4 +57,41 @@
   .font-poppins {
     font-family: var(--font-poppins);
   }
+
+  /* Hide scrollbar but enable scrolling */
+  .scrollbar-hidden {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  .scrollbar-hidden::-webkit-scrollbar {
+    display: none; /* Chrome, Safari */
+  }
+
+  /* Dropdown reveal animation utilities */
+  .reveal-panel {
+    will-change: transform, opacity, clip-path;
+    transform-origin: top center;
+    transition:
+      transform 200ms ease,
+      opacity 200ms ease,
+      clip-path 220ms ease;
+  }
+  .reveal-panel-closed {
+    opacity: 0;
+    transform: translateY(-6px);
+    clip-path: inset(0 0 100% 0);
+    pointer-events: none;
+  }
+  .reveal-panel-open {
+    opacity: 1;
+    transform: translateY(0);
+    clip-path: inset(0 0 0 0);
+  }
+
+  .icon-rotate {
+    transition: transform 200ms ease;
+  }
+  .icon-rotate-open {
+    transform: rotate(180deg);
+  }
 }