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

Feat: 체험 정렬 순서 드롭다운 기능 구현

Author: jaewan0

src/components/@Shared/category/MainCategory.tsx

@@ -9,7 +9,7 @@ export default function MainCategory({
 }: MainCategoryProps) {
   const CATEGORY_LIST = [
     '전체',
-    '문화・예술',
+    '문화 ・ 예술',
     '식음료',
     '스포츠',
     '투어',

src/components/@Shared/dropDown/DropDownMenu.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import clsx from 'clsx';
 
 interface FilterList {
@@ -11,6 +11,8 @@ interface DropDownMenuProps {
   size?: string;
   filterList: FilterList[];
   setFilterStatus: React.Dispatch<React.SetStateAction<string | null>>;
+  setSelectedSort: (sort: string | null) => void;
+  defaultText?: string;
 }
 
 /**
@@ -31,9 +33,18 @@ interface DropDownMenuProps {
 export default function DropDownMenu({
   filterList,
   setFilterStatus,
+  setSelectedSort,
+  defaultText = '전체', // 기본 텍스트 '전체'
 }: DropDownMenuProps) {
   const [isActive, setIsActive] = useState<boolean>(false);
-  const [filterText, setFilterText] = useState<string>('전체');
+  const [filterText, setFilterText] = useState<string>(defaultText); // 기본 텍스트 설정
+
+  // filterList의 첫 번째 항목이 있을 경우 filterText를 해당 항목으로 업데이트
+  useEffect(() => {
+    if (filterList.length > 0 && filterText === defaultText) {
+      setFilterText(defaultText); // defaultText가 기본값이면 그대로 두기
+    }
+  }, [filterList, defaultText, filterText]);
 
   return (
     <div className="relative bg-white z-10">
@@ -73,7 +84,8 @@ export default function DropDownMenu({
                 onClick={() => {
                   setFilterText(filter.text);
                   setIsActive(false);
-                  setFilterStatus(filter.id);
+                  setFilterStatus(filter.id); // 필터 상태 업데이트
+                  setSelectedSort(filter.id); // 정렬 상태 업데이트
                 }}
               >
                 {filter.text}

src/components/@Shared/dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { HiChevronDown } from 'react-icons/hi';
 
-const categories = ['문화 예술', '식음료', '스포츠', '투어', '관광'];
+const categories = ['문화 ・ 예술', '식음료', '스포츠', '투어', '관광'];
 
 interface DropdownProps {
   selectedCategory: string;

src/components/mainPage/ActivityCard.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import Link from 'next/link';
 import { ActivityCardProps } from '../../types/mainPage/ActivityCardTypes';
 
+const defaultImage = '/image/defaultImage.png'; // 기본 이미지
+
 export const ActivityCard: React.FC<ActivityCardProps> = ({
   id,
   image,
@@ -10,11 +12,18 @@ export const ActivityCard: React.FC<ActivityCardProps> = ({
   title,
   price,
 }) => {
+  // imageUrl이 없으면 기본 이미지로 대체
+  const imageUrl = image || defaultImage;
+
   return (
     <Link href={`/activity/${id}`} passHref>
       <div className="w-full max-w-sm rounded-lg overflow-hidden transform transition-transform hover:scale-105 cursor-pointer">
         <div className="w-full h-40 overflow-hidden rounded-lg">
-          <img src={image} alt={title} className="w-full h-full object-cover" />
+          <img
+            src={imageUrl}
+            alt={title}
+            className="w-full h-full object-cover"
+          />
         </div>
         <div className="p-3">
           <div className="flex items-center text-black text-left">

src/components/mainPage/ActivityList.tsx

@@ -13,9 +13,13 @@ interface Activity {
 
 interface ActivityListProps {
   selectedCategory: string | null;
+  selectedSort: string | null;
 }
 
-export default function ActivityList({ selectedCategory }: ActivityListProps) {
+export default function ActivityList({
+  selectedCategory,
+  selectedSort,
+}: ActivityListProps) {
   const [activities, setActivities] = useState<Activity[]>([]); // 체험 데이터 상태
   const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태
   const [itemsPerPage, setItemsPerPage] = useState(6); // 한 페이지 당 아이템 수
@@ -74,6 +78,11 @@ export default function ActivityList({ selectedCategory }: ActivityListProps) {
           params.category = selectedCategory;
         }
 
+        // 정렬 옵션을 API에 전달
+        if (selectedSort) {
+          params.sort = selectedSort; // 가격 낮은 순 / 가격 높은 순 등의 정렬 값
+        }
+
         // API 요청
         const response = await axios.get(apiUrl, { params });
 
@@ -86,13 +95,12 @@ export default function ActivityList({ selectedCategory }: ActivityListProps) {
         setLoading(false);
       } catch (err) {
         setError('데이터를 가져오는 데 실패했습니다.');
-        console.error('API 요청 오류:', err);
         setLoading(false);
       }
     };
 
     fetchActivities(); // 데이터 다시 불러오기
-  }, [selectedCategory, currentPage, itemsPerPage]);
+  }, [selectedCategory, selectedSort, currentPage, itemsPerPage]);
 
   // 페이지 변경 시 새 데이터를 가져오는 함수
   const handlePageChange = (page: number) => {

src/components/mainPage/Category&DropDown.tsx

@@ -3,19 +3,21 @@ import MainCategory from '../@Shared/category/MainCategory';
 import DropDownMenu from '../@Shared/dropDown/DropDownMenu';
 
 interface CategoryAndDropDownProps {
-  setSelectedCategory: (category: string | null) => void;
+  setSelectedCategory: (category: string | null) => void; // 카테고리 상태를 부모 컴포넌트에 전달
+  setSelectedSort: (sort: string | null) => void; // 정렬 상태를 부모 컴포넌트에 전달
 }
 
 export default function CategoryAndDropDown({
   setSelectedCategory,
+  setSelectedSort,
 }: CategoryAndDropDownProps) {
   const MENU_LIST = [
     {
-      id: null,
+      id: 'price_asc',
       text: '가격 낮은 순',
     },
     {
-      id: null,
+      id: 'price_desc',
       text: '가격 높은 순',
     },
   ];
@@ -29,6 +31,8 @@ export default function CategoryAndDropDown({
         size={'small'}
         filterList={MENU_LIST}
         setFilterStatus={setFilterStatus}
+        setSelectedSort={setSelectedSort}
+        defaultText={'가격'}
       />
     </div>
   );

src/pages/index.tsx

@@ -6,7 +6,8 @@ import CategoryAndDropDown from '@/components/mainPage/Category&DropDown';
 import ActivityList from '@/components/mainPage/ActivityList';
 
 export default function Home() {
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null); // 선택된 카테고리 상태
+  const [selectedSort, setSelectedSort] = useState<string | null>(null); // 선택된 정렬 상태
 
   return (
     <div className="relative w-full">
@@ -30,11 +31,17 @@ export default function Home() {
       </div>
       <div className="relative mobile:mt-[40px] tablet2:mt-[60px] pc:mt-[60px] z-30 flex justify-center">
         {/* 카테고리 선택 컴포넌트에 선택된 카테고리 상태 전달 */}
-        <CategoryAndDropDown setSelectedCategory={setSelectedCategory} />
+        <CategoryAndDropDown
+          setSelectedCategory={setSelectedCategory}
+          setSelectedSort={setSelectedSort}
+        />
       </div>
       <div className="relative flex justify-center mobile:mb-[83px] tablet2:mb-[153px] pc:mb-[222px]">
         {/* 선택된 카테고리에 맞춰 필터링된 체험 목록을 전달 */}
-        <ActivityList selectedCategory={selectedCategory} />
+        <ActivityList
+          selectedCategory={selectedCategory}
+          selectedSort={selectedSort}
+        />
       </div>
     </div>
   );