Merge pull request #33 from codeit-sprint-part4-8-1/feat-F81-10-메인페이지

Feat: 메인 페이지 레이아웃 제작

Author: jaewan0

src/components/@Shared/Footer.tsx

@@ -8,7 +8,7 @@ interface FooterProps {
 const Footer: React.FC<FooterProps> = ({ className = '' }) => {
   return (
     <footer
-      className={`bg-nomadBlack text-gray-900 h-40 mt-10 flex flex-col items-center justify-center px-4 ${className}`}
+      className={`bg-nomadBlack text-gray-900 h-40 mt-[120px] flex flex-col items-center justify-center px-4 ${className}`}
     >
       <div className="w-full max-w-7xl flex flex-col tablet:flex-row justify-between items-center py-6">
         {/* 저작권 텍스트 */}

src/components/mainPage/ActivityList.tsx

@@ -48,7 +48,7 @@ export default function ActivityList() {
   };
 
   return (
-    <div className="container mx-auto py-8">
+    <div className="container mx-auto">
       <h2 className="text-2xl text-black text-left font-semibold mb-4">
         🛼 모든 체험
       </h2>

src/components/mainPage/Category&DropDown.tsx

@@ -0,0 +1,14 @@
+import MainCategory from '../@Shared/category/MainCategory';
+import DropDownMenu from '../@Shared/dropDown/DropDownMenu';
+
+export default function CategoryAndDropDown() {
+  return (
+    <div className="flex flex-row justify-between mobile:w-[343px] tablet2:w-[696px] pc:w-[1200px] mobile:mb-[24px] tablet2:mb-[35px] pc:mb-[35px]">
+      <MainCategory />
+      <DropDownMenu
+        size={'small'}
+        filterList={['가격 낮은 순', '가격 높은 순']}
+      />
+    </div>
+  );
+}

src/pages/index.tsx

@@ -1,6 +1,8 @@
 import Banner from '@/components/main/Banner';
 import SearchBar from '@/components/@Shared/searchBar/SearchBar';
 import HotActivityList from '@/components/mainPage/HotActivityList';
+import CategoryAndDropDown from '@/components/mainPage/Category&DropDown';
+import ActivityList from '@/components/mainPage/ActivityList';
 
 export default function Home() {
   return (
@@ -23,8 +25,11 @@ export default function Home() {
       <div className="relative mobile:mt-[100px] tablet2:mt-[142px] pc:mt-[158px] z-30 flex justify-center">
         <HotActivityList />
       </div>
-      <div className="text-center py-8">
-        <p>메인 페이지 내용</p>
+      <div className="relative mobile:mt-[40px] tablet2:mt-[60px] pc:mt-[60px] z-30 flex justify-center">
+        <CategoryAndDropDown />
+      </div>
+      <div className="relative flex justify-center mobile:mb-[83px] tablet2:mb-[153px] pc:mb-[222px]">
+        <ActivityList />
       </div>
     </div>
   );