Merge pull request #85 from sparcs-kaist/feat/MainPage

Redesign Meal Component

Author: Killerwhale-Park

src/app/page.tsx

@@ -1,18 +1,18 @@
 "use client";
 
 import SearchBar from "@/components/searchBar";
-import ArticleList from "@/components/ArticleList/ArticleList";
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { ResponsePost } from "@/lib/types/post";
 import { fetchTopArticles, fetchArticles } from "@/lib/api/board";
 import { HotPreview, RecentPreview } from "@/containers/ArticleList";
+import MealData from "@/components/Meal/MealData";
 
 export default function Home() {
   const [inputValue, setInputValue] = useState("");
-  const [hotArticles, setHotArticles] = useState<ResponsePost[]>([]);
-  const [recentArticles, setRecentArticles] = useState<ResponsePost[]>([]);
+  const [, setHotArticles] = useState<ResponsePost[]>([]);
+  const [, setRecentArticles] = useState<ResponsePost[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -38,7 +38,7 @@ export default function Home() {
     <div className="max-w-[1200px] mx-auto">
       <div className="absolute top-0 left-0 w-full h-[400px] bg-gradient-to-b from-[#FFEDD2] to-[#FFFFFF] -z-10"></div>
 
-      <div className="h-[220px] w-full flex justify-center items-center">
+      <div className="h-[110px] w-full flex justify-center items-start pt-4">
         <SearchBar
           value={inputValue}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}
@@ -51,23 +51,26 @@ export default function Home() {
           <div className="text-center py-8">데이터를 불러오는 중...</div>
         ) : (
           <>
-            {/* HOT 게시물 */}
+            {/* 지금 핫한 글 */}
             <section className="w-full max-w-[550px] p-4 bg-white rounded-lg shadow-sm">
               <Link href="/board/hot" className="flex items-center space-x-2 mb-[10px]">
-                <h2 className="text-[20px] font-semibold">HOT 게시물</h2>
+                <h2 className="text-[20px] font-semibold">🔥지금 핫한 글</h2>
                 <Image src="/Right_Chevron.svg" width={8.84} height={15} alt="arrow" />
               </Link>
               <HotPreview/>
             </section>
 
-            {/* 최신 글 */}
+            {/* 방금 올라온 글 */}
             <section className="w-full max-w-[550px] p-4 bg-white rounded-lg shadow-sm">
               <Link href="/board/recent" className="flex items-center space-x-2 mb-[10px]">
-                <h2 className="text-[20px] font-semibold">최신 글</h2>
+                <h2 className="text-[20px] font-semibold">🕑방금 올라온 글</h2>
                 <Image src="/Right_Chevron.svg" width={8.84} height={15} alt="arrow" />
               </Link>
               <RecentPreview />
             </section>
+
+            {/* 오늘의 식단 */}
+            <MealData />  
           </>
         )}
       </main>

src/components/NewAraExtends/Floating/AllergyFilter.tsx renamed to src/components/Meal/AllergyFilter.tsx

@@ -29,9 +29,11 @@ const AllergyFilter = ({ onAllergyChange, initialAllergies = initialAllergens }:
 
   return (
     <div className="flex flex-col max-w-[366px] w-[306px] h-auto items-start gap-3 p-4 bg-white rounded-2xl shadow-md">
-      <h2 className="text-[14px] font-semibold text-black font-inter">
-        알러지 필터
-      </h2>
+      <div className="flex items-center gap-1">
+        <h2 className="text-[16px] font-semibold text-black font-inter">
+          ⚙️ 알러지 필터
+        </h2>
+      </div>
       <div className="flex flex-wrap gap-2 w-full">
         {allergens.map((allergen) => (
           <button
@@ -40,12 +42,13 @@ const AllergyFilter = ({ onAllergyChange, initialAllergies = initialAllergens }:
             className={`
               flex items-center justify-start 
               min-w-[85px] h-[24px] px-[8px] py-1 
-              rounded-[12px] text-[12px] font-semibold 
+              rounded-[12px] text-[12px] font-medium 
               cursor-pointer transition-colors font-inter 
+              bg-white text-black border
               ${
                 allergen.selected
-                  ? "bg-[#ed3a3a] text-white"
-                  : "bg-white text-[#c62626] border border-[#c62626]"
+                  ? "border-ara_red_bright border-2 text-ara_red_dark" 
+                  : "border-ara_gray_bright"
               }
             `}
           >

src/components/NewAraExtends/Floating/CafeteriaMenuList.tsx renamed to src/components/Meal/CafeteriaMenuList.tsx

@@ -7,6 +7,7 @@ import CourseMenuList from "./CourseMenuList";
 import CafeteriaMenuList from "./CafeteriaMenuList";
 import { Allergen, Restaurant, CafeteriaMenuItem, CafeteriaRestaurant } from './types';
 import { initialAllergens } from "./utils";
+import { fetchCafeteriaMenu, fetchCourseMenu } from '@/lib/api/meal'; 
 
 // 식당 ID를 API 응답의 키값으로 매핑
 type RestaurantKey = 'fclt' | 'west' | 'east1' | 'east2' | 'emp';
@@ -26,37 +27,6 @@ const mealTimeMap: { [key: string]: "morning_menu" | "lunch_menu" | "dinner_menu
   "저녁": "dinner_menu"
 };
 
-//functions for api
-const fetchCourseMenu = async (date: string) => {
-  try {
-    const response = await fetch(`http://localhost:8000/api/meals/${date}/course_menu/`);
-    if (response.status === 404) {
-      throw new Error("해당 날짜의 식단 정보가 없습니다.");
-    }
-    if (!response.ok) {
-      throw new Error("메뉴를 불러오는데 실패했습니다.");
-    }
-    return await response.json();
-  } catch (error) {
-    throw error;
-  }
-};
-
-const fetchCafeteriaMenu = async (date: string) => {
-  try {
-    const response = await fetch(`http://localhost:8000/api/meals/${date}/cafeteria_menu/`);
-    if (response.status === 404) {
-      throw new Error("해당 날짜의 식단 정보가 없습니다.");
-    }
-    if (!response.ok) {
-      throw new Error("메뉴를 불러오는데 실패했습니다.");
-    }
-    return await response.json();
-  } catch (error) {
-    throw error;
-  }
-};
-
 export default function MealData() {
   // 알러지 필터 상태
   const [isAllergyFilterVisible, setIsAllergyFilterVisible] = useState(false);
@@ -90,7 +60,6 @@ export default function MealData() {
   const handlePreviousDay = () => {
     const prevDate = new Date(currentDate.getTime() - 24 * 60 * 60 * 1000);
     setCurrentDate(prevDate);
-  
   };
 
   // 드롭다운 상태 관리
@@ -156,7 +125,6 @@ export default function MealData() {
     return menuData;
   };
 
-
   //API response 관련 state
   const [courseMenuData, setCourseMenuData] = useState<Record<string, Restaurant> | null>(null);
   const [cafeteriaMenuData, setCafeteriaMenuData] = useState<Record<string, CafeteriaRestaurant> | null>(null);
@@ -171,7 +139,7 @@ export default function MealData() {
     return `${year}-${month}-${day}`;
   };
 
-  //Load Menu Data
+  //Load Menu Data - 수정된 부분: 이미 import된 API 함수 사용
   const fetchMenuData = useCallback(async (date: Date) => {
     setIsLoading(true);
     setError(null);
@@ -217,20 +185,13 @@ export default function MealData() {
       <div className="flex flex-col gap-0">
         <div className="flex items-center justify-between">
           {/* 오늘의 학식 */}
-          <h2 className="font-semibold text-black text-[20px] mr-[8px]">오늘의 학식</h2>
+          <h2 className="font-semibold text-black text-[20px] mr-[8px]">🍽️ 오늘의 학식</h2>
           {/* 알러지 필터 */}
           <button 
-            className="flex items-center gap-1 text-[#c62626] text-xs font-semibold mr-auto"
+            className="flex items-center gap-1 text-gray-500 text-xs font-semibold mr-auto"
             onClick={() => setIsAllergyFilterVisible((prev) => !prev)}
           >
-            <span>알러지 필터</span>
-            <Image
-              src="/NewAraExtendIcons/filter-icon.svg"
-              alt="Filter Icon"
-              width={16}
-              height={16}
-              className="w-4 h-4"
-            />
+            <span>알러지 필터 ⚙️</span>
           </button>
           {isAllergyFilterVisible && (
             <div className="absolute top-0 right-full mr-2">
@@ -246,7 +207,7 @@ export default function MealData() {
               className="flex items-center gap-[5px]"
               onClick={toggleDropdown}
             >
-              <span className="font-semibold text-[#c62626] text-[16px]">
+              <span className="font-semibold text-black text-[16px]">
                 {selectedRestaurant}
               </span>
               <Image
@@ -305,11 +266,15 @@ export default function MealData() {
             <button
               key={meal}
               onClick={() => setSelectedMeal(meal)}
-              className={`px-3 h-[21px] rounded-[10px] text-[12px] font-semibold ${
-                meal === selectedMeal
-                  ? "bg-[#ed3a3a] text-white"
-                  : "bg-white border border-gray-300 text-black"
-              }`}
+              className={`
+                px-3 h-[21px] rounded-[10px] text-[12px] font-semibold
+                bg-white text-black border
+                ${
+                  meal === selectedMeal
+                    ? "border-ara_red_bright border-1 text-ara_red_dark"
+                    : "border-gray-200"
+                }
+              `}
             >
               {meal}
             </button>

src/components/NewAraExtends/Floating/CourseMenuList.tsx renamed to src/components/Meal/CourseMenuList.tsx

@@ -34,13 +34,14 @@ export default function RestaurantSelection({
                 }}
                 className={`
                   w-[84px] h-5 rounded-xl px-5 py-[3px] 
-                  font-semibold text-[11px] whitespace-nowrap 
+                  font-medium text-[11px] whitespace-nowrap 
                   transition-colors duration-200
                   flex items-center justify-center
+                  bg-white text-black border
                   ${
                     selectedLocation === restaurant
-                      ? "bg-[#ed3a3a] text-white"
-                      : "bg-white text-[#c62626] border-[0.75px] border-solid border-[#c62626]"
+                      ? "border-ara_red_bright border-2 text-ara_red_dark"
+                      : "border-ara_gray_bright"
                   }
                 `}
               >

src/components/NewAraExtends/Floating/MealData.tsx renamed to src/components/Meal/MealData.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import AraBetaButton from "./Floating/AraBetaButton";
 import MealExtensionButton from "./Floating/MealExtensionButton";
-import MealData from "./Floating/MealData"; 
+import MealData from "@/components/Meal/MealData"; 
 
 /*
 지금 프론트가 마이그레이션 중인 관계로 컴포넌트를 Next로 만들되되,