diff --git a/src/components/meal-plan/CalendarChip/CalendarChipM.tsx b/src/components/chip/CalendarChip/CalendarChipM.tsx
similarity index 100%
rename from src/components/meal-plan/CalendarChip/CalendarChipM.tsx
rename to src/components/chip/CalendarChip/CalendarChipM.tsx
diff --git a/src/components/meal-plan/CalendarChip/CalendarChipS.tsx b/src/components/chip/CalendarChip/CalendarChipS.tsx
similarity index 100%
rename from src/components/meal-plan/CalendarChip/CalendarChipS.tsx
rename to src/components/chip/CalendarChip/CalendarChipS.tsx
diff --git a/src/components/meal-plan/MenuChip.tsx b/src/components/chip/MenuChip.tsx
similarity index 100%
rename from src/components/meal-plan/MenuChip.tsx
rename to src/components/chip/MenuChip.tsx
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
deleted file mode 100644
index bba2abbd..00000000
--- a/src/components/common/Footer.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Background from "../../assets/icons/footer-background.svg";
-import Home from "../../assets/icons/home.svg";
-import Note from "../../assets/icons/note-edit.svg";
-import { useNavigate } from "react-router-dom";
-import CalendarIcon from "./icon/Calendar";
-
-export default function Footer() {
-  const navigate = useNavigate();
-
-  return (
-    <div className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[400px] text-[10px] font-medium z-10 text-center">
-      <div className="relative">
-        <img src={Background} className="w-full" alt="푸터 배경" />
-
-        <div className="absolute bottom-0 w-full aspect-[400/92] flex justify-between px-6">
-          <div className="flex justify-center w-19 pt-2">
-            <button
-              className="flex flex-col cursor-pointer gap-2"
-              onClick={() => navigate("/")}
-            >
-              <img src={Home} className="size-5" alt="홈 아이콘" />
-              <p>홈</p>
-            </button>
-          </div>
-
-          <div className="flex flex-col items-center w-19 pt-2">
-            <button
-              className="flex flex-col items-center cursor-pointer gap-2"
-              onClick={() => navigate("/meal-plan")}
-            >
-              <CalendarIcon color="#52525B" size={20} />
-              <p>식단표</p>
-            </button>
-          </div>
-        </div>
-
-        <button
-          className="
-            absolute left-1/2 -translate-x-1/2 bottom-[clamp(32px,calc(56/400*100vw),56px)]
-            flex flex-col justify-center items-center gap-1 
-            w-[clamp(40px,calc(68/400*100vw),56px)]
-            h-[clamp(40px,calc(68/400*100vw),56px)] 
-            rounded-full bg-primary-700 cursor-pointer"
-          onClick={() => navigate("/meal-plan/create")}
-        >
-          <img src={Note} className="size-5" alt="식단짜기 아이콘" />
-          <p className="text-white">식단 짜기</p>
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/meal-plan/BottomSheet.tsx b/src/components/meal-plan/BottomSheet.tsx
deleted file mode 100644
index 1a1590ef..00000000
--- a/src/components/meal-plan/BottomSheet.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import Button from "../common/Button";
-import { useEffect, useState } from "react";
-import MenuList from "../common/MenuList";
-import AlertModal from "../common/AlertModal";
-import useGetInfiniteFamilyWishList from "../../hooks/queries/use-get-infinite-family-wishlist";
-import { useFamilyStore } from "../../stores/use-family-store";
-import { useInView } from "react-intersection-observer";
-import { useGetRecommendList } from "../../hooks/queries/use-get-recommendations";
-import Chevron from "../common/icon/Chevron";
-import { useNavigate } from "react-router-dom";
-import toast from "react-hot-toast";
-
-type BottomSheetProps = {
-  open: boolean;
-  weekParam: string | null;
-  changeMenu: (
-    id: number,
-    title: string,
-    type: "RECIPE" | "TRANSFORMED_RECIPE",
-  ) => void;
-  onSubmit: () => void;
-};
-export default function BottomSheet({
-  open,
-  weekParam,
-  changeMenu,
-  onSubmit,
-}: BottomSheetProps) {
-  const [tab, setTab] = useState<"common" | "recommend">("common");
-  const [isOpen, setIsOpen] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selected, setSelected] = useState<{
-    id: number;
-    title: string;
-    type: "RECIPE" | "TRANSFORMED_RECIPE";
-  } | null>(null);
-  const navigate = useNavigate();
-  //안전한 순 위시리스트 코드
-  const { data: recommendList } = useGetRecommendList("안전한 순");
-
-  //가족 위시리스트 코드
-  const familyRoomId = useFamilyStore.getState().familyRoomId;
-  const {
-    data: familyWish,
-    isFetching,
-    hasNextPage,
-    fetchNextPage,
-  } = useGetInfiniteFamilyWishList(familyRoomId, 6);
-  // isPending, isError 등은 나중에...
-
-  const { ref, inView } = useInView({
-    threshold: 0,
-  });
-
-  useEffect(() => {
-    if (inView && hasNextPage && !isFetching) {
-      fetchNextPage();
-    }
-  }, [inView, isFetching, hasNextPage, fetchNextPage]);
-  /////////
-
-  useEffect(() => {
-    if (selected !== null) return;
-    if (tab === "common") {
-      const first = familyWish?.pages?.[0];
-      if (!first) return;
-      setSelected({ id: first.id, title: first.title, type: first.type });
-    } else {
-      const first = recommendList?.recipes?.[0];
-      if (!first) return;
-      const recipeType = first.transformed ? "TRANSFORMED_RECIPE" : "RECIPE";
-      setSelected({
-        id: Number(first.id),
-        title: first.title,
-        type: recipeType,
-      });
-    }
-  }, [tab, familyWish, recommendList, selected]);
-
-  useEffect(() => {
-    setIsOpen(open);
-  }, [open]);
-
-  //모달창 속 확인 버튼 눌렀을 때
-  const handleButton = () => {
-    if (weekParam === "THIS") {
-      navigate(`/meal-plan?tab=THIS`);
-    } else {
-      navigate(`/meal-plan?tab=NEXT`);
-    }
-    onSubmit();
-  };
-
-  const handleChange = () => {
-    if (!selected) {
-      toast.error("교체할 메뉴를 선택해주세요");
-      return;
-    }
-    changeMenu(selected.id, selected.title, selected.type);
-    setSelected(null);
-    setIsOpen(false);
-  };
-
-  return (
-    <div className="max-w-[400px] fixed bottom-0 p-[10px] rounded-t-2xl shadow-[0_-2px_4px_-2px_rgba(0,0,0,0.25)] overflow-hidden bg-white flex flex-col items-center">
-      <div>
-        {isModalOpen && (
-          <AlertModal
-            title=""
-            boldContent={`수정을 중단하시겠어요?`}
-            mediumContent={`완료된 식단표는 [다음주 식단]에 \n저장됩니다`}
-            buttonText="확인"
-            outsideText="탭해서 닫기"
-            onClick={handleButton}
-            handleModal={() => {
-              setIsModalOpen(false);
-            }}
-          />
-        )}
-
-        <button
-          className="flex items-center justify-center size-8 mb-3 cursor-pointer"
-          onClick={() => {
-            setIsOpen((prev) => !prev);
-          }}
-        >
-          {isOpen ? (
-            <Chevron rotate={180} color="black" size={32} />
-          ) : (
-            <Chevron rotate={0} color="black" size={32} />
-          )}
-        </button>
-      </div>
-      <div className="w-full flex font-semibold text-[18px] h-13">
-        <button
-          className={`flex-1 cursor-pointer ${tab === "common" ? "bg-gray-50 text-primary-700 " : "bg-white text-gray-300"} ${tab === "common" && isOpen ? "border-b-2 border-primary-700" : ""}`}
-          onClick={() => setTab("common")}
-        >
-          위시리스트
-        </button>
-        <button
-          className={`flex-1 cursor-pointer ${tab === "recommend" ? "bg-gray-50 text-primary-700" : "bg-white text-gray-300"} ${tab === "recommend" && isOpen ? "border-b-2 border-primary-700" : ""}`}
-          onClick={() => setTab("recommend")}
-        >
-          추천
-        </button>
-      </div>
-
-      <div
-        className={`w-full overflow-auto transition-[max-height,opacity,transform] duration-300 ${isOpen ? "max-h-[475px] opacity-100 translate-y-0" : "max-h-0 opacity-0 translate-y-4"}`}
-      >
-        <div className="py-4">
-          {tab === "common" ? (
-            <>
-              {familyWish?.pages.map((item) => {
-                const isMenuListSelect = selected?.id === item.id;
-                return (
-                  <MenuList
-                    key={item.id}
-                    type="profile"
-                    menu={item.title}
-                    img={item.imageUrl}
-                    isSafe={item.allergyStatus}
-                    rate={item.avgScore}
-                    category={item.category.label}
-                    ingredients={item.ingredientsRaw}
-                    profiles={item.sourceProfile.profiles}
-                    isSelected={isMenuListSelect}
-                    onClick={() =>
-                      setSelected({
-                        id: item.id,
-                        title: item.title,
-                        type: item.type,
-                      })
-                    }
-                    clickable={true}
-                  />
-                );
-              })}
-            </>
-          ) : (
-            <>
-              {recommendList?.recipes.map((item) => {
-                const recipeType = item.transformed
-                  ? "TRANSFORMED_RECIPE"
-                  : "RECIPE";
-                const isMenuListSelect = selected?.id === Number(item.id);
-                return (
-                  <MenuList
-                    key={item.id}
-                    type="rate"
-                    menu={item.title}
-                    img={item.imageUrl}
-                    isSafe={item.safe ? "SAFE" : "SAFETY"}
-                    rate={item.avgScore}
-                    category={item.category}
-                    ingredients={item.description}
-                    isSelected={isMenuListSelect}
-                    onClick={() =>
-                      setSelected({
-                        id: Number(item.id),
-                        title: item.title,
-                        type: recipeType,
-                      })
-                    }
-                    clickable={true}
-                  />
-                );
-              })}
-            </>
-          )}
-        </div>
-        <div ref={ref} className="h-2"></div>
-      </div>
-
-      <div className="fixed bottom-0 left-1/2 -translate-x-1/2 flex justify-center pb-10">
-        <Button
-          text={isOpen ? "바꾸기" : "수정완료"}
-          type="button"
-          onClick={() => {
-            if (isOpen) {
-              handleChange();
-            } else {
-              setIsModalOpen(true);
-            }
-          }}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/meal-plan/ChooseWeek.tsx b/src/components/meal-plan/ChooseWeek.tsx
deleted file mode 100644
index 44307726..00000000
--- a/src/components/meal-plan/ChooseWeek.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useEffect, useState } from "react";
-import { type DayOfWeek, type SlotRequest } from "../../types/meal-plan";
-import CalenderChip from "./CalendarChip/CalendarChipS";
-
-type ChooseWeekProps = {
-  mealTime: "점심" | "저녁";
-  onChangeSelected: (slots: SlotRequest[]) => void;
-};
-
-const week: { label: string; value: DayOfWeek }[] = [
-  { label: "월", value: "MONDAY" },
-  { label: "화", value: "TUESDAY" },
-  { label: "수", value: "WEDNESDAY" },
-  { label: "목", value: "THURSDAY" },
-  { label: "금", value: "FRIDAY" },
-  { label: "토", value: "SATURDAY" },
-  { label: "일", value: "SUNDAY" },
-];
-
-export default function ChooseWeek({
-  mealTime,
-  onChangeSelected,
-}: ChooseWeekProps) {
-  const mealType = mealTime === "점심" ? "LUNCH" : "DINNER";
-
-  const [selectedDays, setSelectedDays] = useState<DayOfWeek[]>([]);
-
-  const toggleDay = (day: DayOfWeek) => {
-    setSelectedDays((prev) =>
-      prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day],
-    );
-  };
-
-  useEffect(() => {
-    const slots: SlotRequest[] = selectedDays.map((d) => ({
-      dayOfWeek: d,
-      mealType,
-    }));
-    onChangeSelected(slots);
-  }, [selectedDays, mealType, onChangeSelected]);
-
-  return (
-    <div>
-      <p className="text-[18px] font-medium">{mealTime} 식사</p>
-      <div className="flex gap-3 pt-3">
-        {week.map((day, idx) => (
-          <CalenderChip
-            key={idx}
-            text={day.label}
-            type="select"
-            isSelect={selectedDays.includes(day.value)}
-            onClick={() => toggleDay(day.value)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/meal-plan/ListHeader.tsx b/src/components/meal-plan/ListHeader.tsx
deleted file mode 100644
index 6e5f3049..00000000
--- a/src/components/meal-plan/ListHeader.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Chevron from "../common/icon/Chevron";
-
-type ListHeaderProps = {
-  toggleable?: boolean;
-  title: string;
-  date: string;
-  isOpen?: boolean;
-  setIsOpen?: () => void;
-};
-
-export default function ListHeader({
-  toggleable = false,
-  title,
-  date,
-  isOpen = true,
-  setIsOpen,
-}: ListHeaderProps) {
-  return (
-    <div
-      className={`flex px-[10px] py-1 rounded-lg text-4 gap-2 ${
-        isOpen ? "bg-white" : "bg-gray-200"
-      }`}
-    >
-      {toggleable && (
-        <button
-          className="size-6 flex justify-center items-center cursor-pointer"
-          onClick={setIsOpen}
-        >
-          {isOpen ? <Chevron rotate={180} /> : <Chevron />}
-        </button>
-      )}
-      <p className="font-semibold text-gray-700 text-[16px]">{title}</p>
-      <p className="font-medium text-gray-500 text-[16px]">{date}</p>
-    </div>
-  );
-}
diff --git a/src/components/meal-plan/MealPlanResult.tsx b/src/components/meal-plan/MealPlanResult.tsx
deleted file mode 100644
index 8d3874ca..00000000
--- a/src/components/meal-plan/MealPlanResult.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import TryAgain from "../../assets/icons/try-again.svg";
-import CalendarChipM from "../../components/meal-plan/CalendarChip/CalendarChipM";
-import MenuChip from "../../components/meal-plan/MenuChip";
-import AlertModal from "../../components/common/AlertModal";
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import type { SlotItem } from "../../types/meal-plan";
-import { useFamilyStore } from "../../stores/use-family-store";
-import { postConfirmMealPlan } from "../../api/meal-plan";
-import toast from "react-hot-toast";
-
-type MealPlanResultProps = {
-  mealPlanId: number;
-  onClick: () => void;
-  weekParam: string | null;
-  isLoading: boolean;
-};
-
-type mealPlanResponse = Record<string, SlotItem[]>;
-const dayKor: Record<string, string> = {
-  MONDAY: "월",
-  TUESDAY: "화",
-  WEDNESDAY: "수",
-  THURSDAY: "목",
-  FRIDAY: "금",
-  SATURDAY: "토",
-  SUNDAY: "일",
-};
-
-export default function MealPlanResult({
-  mealPlanId,
-  onClick,
-  weekParam,
-  isLoading,
-}: MealPlanResultProps) {
-  const navigate = useNavigate();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const response = sessionStorage.getItem("mealPlan");
-  if (isLoading) return null;
-  if (!response) {
-    toast.error("올바른 접근이 아닙니다. 식단 생성부터 해주세요!");
-    return;
-  }
-  const data = JSON.parse(response) as mealPlanResponse;
-
-  const handleButton = () => {
-    setIsOpen(true);
-  };
-  const { familyRoomId } = useFamilyStore.getState();
-
-  const handleClick = async () => {
-    try {
-      if (familyRoomId == null) {
-        toast.error("familyRoomId 없음");
-        return;
-      }
-      await postConfirmMealPlan({
-        familyRoomId: familyRoomId,
-        mealPlanId: mealPlanId,
-      });
-    } catch (error) {
-      alert("주간 식단 확정 실패" + error);
-    } finally {
-      if (weekParam === "THIS") {
-        navigate(`/meal-plan?tab=THIS`);
-      } else {
-        navigate(`/meal-plan?tab=NEXT`);
-      }
-    }
-  };
-  return (
-    <div>
-      {isOpen && (
-        <AlertModal
-          title=""
-          boldContent={`생성을 완료하시겠어요?`}
-          mediumContent={`완료된 식단표는 [다음주 식단]에 \n저장됩니다.`}
-          buttonText="확인"
-          outsideText="탭해서 닫기"
-          onClick={handleClick}
-          handleModal={() => setIsOpen(false)}
-        />
-      )}
-      <p className="pl-4 pt-6 font-semibold text-[24px] text-gray-800 pb-4 whitespace-pre-line">
-        우리가족을 위한 식단표가 {"\n"}생성되었어요.
-      </p>
-      <div className="flex justify-end pr-[14px]">
-        <button
-          className="flex gap-1 p-[10px] bg-gray-200 rounded-lg font-medium text-[16px] cursor-pointer"
-          onClick={onClick}
-        >
-          <img src={TryAgain} alt="다시 생성하기 아이콘" />
-          <span className="shrink-0">다시 생성하기</span>
-        </button>
-      </div>
-      <div className="flex gap-2 pt-12 pb-[27px] overflow-x-auto pr-4">
-        <div className="flex flex-col items-center gap-3 font-medium text-gray-500 text-[14px]">
-          <CalendarChipM text="" />
-          <p className="pl-4 pr-2 flex items-center text-center shrink-0 h-[82px] whitespace-nowrap">
-            점심
-          </p>
-          <p className="pl-4 pr-2 flex items-center text-center shrink-0 h-[82px] whitespace-nowrap">
-            저녁
-          </p>
-        </div>
-        {Object.entries(data).map(([day, slots]) => {
-          const date = dayKor[day] ?? day;
-          const lunch = slots.find((slot) => slot.mealType === "LUNCH");
-          const dinner = slots.find((slot) => slot.mealType === "DINNER");
-          return (
-            <div className="flex flex-col items-center gap-3" key={day}>
-              <CalendarChipM text={date} />
-              {lunch ? (
-                <MenuChip text={lunch.title} key="slot" />
-              ) : (
-                <div className="w-[75px] h-[82px]" />
-              )}
-              {dinner ? (
-                <MenuChip text={dinner.title} key="slot" />
-              ) : (
-                <div className="w-[75px] h-[82px]" />
-              )}
-            </div>
-          );
-        })}
-      </div>
-      <div className="w-full max-w-[400px] fixed left-1/2 -translate-x-1/2 bottom-11 flex gap-3 px-4 font-semibold text-[20px]">
-        <button
-          className="w-full h-14 rounded-xl cursor-pointer text-primary-700 border border-primary-700"
-          onClick={() => navigate(`/meal-plan/edit?week=${weekParam}`)}
-        >
-          수정
-        </button>
-        <button
-          className="w-full h-14 rounded-xl cursor-pointer bg-primary-700 text-white"
-          onClick={handleButton}
-        >
-          완료
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/meal-plan/MemberMealPlanView.tsx b/src/components/meal-plan/MemberMealPlanView.tsx
deleted file mode 100644
index 49d588d0..00000000
--- a/src/components/meal-plan/MemberMealPlanView.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Background from "../../assets/icons/member-meal-background.svg";
-
-export default function MemberMealPlanView() {
-  return (
-    <div className="flex flex-col items-center justify-center pt-35">
-      <p className="font-semibold text-primary-700 text-[14px] pb-4">
-        방장이 식단을 생성하고 있어요.
-      </p>
-      <p className="font-medium text-[#4d4d4d] text-[18px] text-center whitespace-pre-line pb-10">
-        가족원의 위시리스트를 기반으로 {"\n"}다음주 식단이 생성돼요.
-      </p>
-      <img src={Background} alt="가족원 식단화면 배경 아이콘" />
-    </div>
-  );
-}
diff --git a/src/components/meal-plan/ReviewModal.tsx b/src/components/meal-plan/ReviewModal.tsx
deleted file mode 100644
index 17c05ab5..00000000
--- a/src/components/meal-plan/ReviewModal.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { useState } from "react";
-import X from "../../assets/icons/x-icon.svg";
-import Button from "../common/Button";
-import UnselectedStar from "../../assets/icons/star-unselected.svg";
-import SelectedStar from "../../assets/icons/star-selected.svg";
-import AlertModal from "../common/AlertModal";
-import type { createReview } from "../../types/review";
-import usePostReview from "../../hooks/mutations/use-post-review";
-import toast from "react-hot-toast";
-
-type ReviewModalProps = {
-  recipeId: number;
-  onClick: () => void;
-  type: "TRANSFORMED_RECIPE" | "RECIPE";
-};
-
-type Preference = boolean | null;
-
-export default function ReviewModal({
-  recipeId,
-  onClick,
-  type,
-}: ReviewModalProps) {
-  const [preference, setPreference] = useState<Preference>(null);
-  const star = [1, 2, 3, 4, 5];
-  const [score, setScore] = useState(0);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handlebutton = (select: Preference) => {
-    if (select == preference) {
-      setPreference(null);
-    } else {
-      setPreference(select);
-    }
-  };
-
-  const onModalClick = () => {
-    setIsOpen(false);
-    onClick();
-  };
-
-  const { mutate } = usePostReview();
-
-  const handleSubmitReview = ({
-    recipeId,
-    score,
-    isFavorite,
-  }: createReview) => {
-    mutate(
-      { recipeId, score, isFavorite, type },
-      {
-        onSuccess: () => {
-          setIsOpen(true);
-        },
-        onError: (e: any) => {
-          if (!score) {
-            toast.error("별을 클릭해주세요");
-            return;
-          }
-          toast.error(e.response?.data?.message);
-          onClick();
-        },
-      },
-    );
-  };
-  return (
-    <div className="fixed inset-0 z-30 flex justify-center items-end">
-      {isOpen && (
-        <AlertModal
-          boldContent="리뷰 등록 완료!"
-          mediumContent={`사용자님의 소중한 리뷰를\n기록했어요.`}
-          buttonText="확인"
-          onClick={onModalClick}
-        />
-      )}
-      <div className="bg-white rounded-t-2xl shadow-[0_-2px_4px_-2px_rgba(0,0,0,0.25)] w-[400px] flex flex-col gap-6 items-center text-center">
-        <button
-          className="pt-[10px] cursor-pointer flex justify-center items-center"
-          onClick={onClick}
-        >
-          <img src={X} alt="닫기버튼" className="size-6" />
-        </button>
-        <div className="font-semibold">
-          <p className="text-[20px] pb-6">오늘의 메뉴는 어떠셨나요</p>
-          <div className="pb-4 flex justify-center">
-            {star.map((idx) => (
-              <button
-                className="size-[58px] flex justify-center items-center cursor-pointer"
-                key={idx}
-                onClick={() => setScore(idx)}
-              >
-                <img
-                  src={idx <= score ? SelectedStar : UnselectedStar}
-                  alt="별점"
-                />
-              </button>
-            ))}
-          </div>
-          <div className="flex justify-center gap-[10px]">
-            <button
-              className={`px-[10px] py-2 rounded-lg cursor-pointer ${preference === false ? "text-white bg-primary-700" : "text-black bg-[#F0F0F0]"}`}
-              onClick={() => handlebutton(false)}
-            >
-              내 취향은 아니에요
-            </button>
-            <button
-              className={`px-[10px] py-2 rounded-lg cursor-pointer ${preference === true ? "text-white bg-primary-700" : "text-black bg-[#F0F0F0]"}`}
-              onClick={() => handlebutton(true)}
-            >
-              또 먹고 싶어요
-            </button>
-          </div>
-        </div>
-        <div className="w-full p-[10px] flex justify-center">
-          <Button
-            type="button"
-            text="등록"
-            onClick={() => {
-              const reviewData: createReview = {
-                recipeId,
-                score,
-              };
-              if (preference !== null) {
-                reviewData.isFavorite = preference;
-              }
-              handleSubmitReview(reviewData);
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/meal-plan/TodayMeal.tsx b/src/components/meal-plan/TodayMeal.tsx
deleted file mode 100644
index 962f3840..00000000
--- a/src/components/meal-plan/TodayMeal.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useState } from "react";
-import Button from "../common/Button";
-import ReviewModal from "./ReviewModal";
-import type { TodayMeal } from "../../types/meal-plan";
-import IngredientAndRecipe from "../common/IngredientAndRecipe";
-
-export default function TodayMeal({ data }: { data: TodayMeal }) {
-  const [isDone, setIsDone] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const handleOpen = () => setIsOpen(false);
-  return (
-    <>
-      <div className="flex justify-between items-center pt-3">
-        {isOpen && (
-          <ReviewModal
-            recipeId={data.id}
-            onClick={handleOpen}
-            type={data.type}
-          />
-        )}
-        <div>
-          {/* <p className="font-normal text-[16px] leading-[1.5]">우유대신,</p> */}
-
-          <p className="font-semibold text-[18px] tracking-[0.01em] text-gray-600">
-            {data.title.split(" ").map((title, idx) => (
-              <span key={idx}>
-                {title} {idx % 2 === 1 && <br />}
-              </span>
-            ))}
-          </p>
-        </div>
-
-        <img
-          src={data.imageUrl}
-          alt={`${data.title} 이미지`}
-          className="w-41 h-29 object-cover rounded-lg"
-        />
-      </div>
-      {!data.isReviewed && (
-        <div className="pt-6">
-          {!isDone ? (
-            <Button
-              type="button"
-              text="식사 완료"
-              onClick={() => setIsDone(true)}
-            />
-          ) : (
-            <Button
-              type="button"
-              text="리뷰 작성"
-              bgColor="white"
-              onClick={() => setIsOpen(true)}
-            />
-          )}
-        </div>
-      )}
-      <div className="pt-11 pb-29">
-        <IngredientAndRecipe
-          ingredients={data.ingredients}
-          step={data.recipeSteps}
-        />
-      </div>
-    </>
-  );
-}
diff --git a/src/components/meal-plan/WeekMeal.tsx b/src/components/meal-plan/WeekMeal.tsx
deleted file mode 100644
index 0cf421d8..00000000
--- a/src/components/meal-plan/WeekMeal.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import useGetWeekMealPlan from "../../hooks/queries/use-get-week-meal";
-import { useFamilyStore } from "../../stores/use-family-store";
-import { useProfileStore } from "../../stores/use-profile-store";
-import { changeAdditionalProp } from "../../utils/changeAdditionalProp";
-import { getNextMonday, getThisMonday, getWeekOfMonth } from "../../utils/date";
-import EmptyState from "../common/EmptyState";
-import CalendarChipS from "./CalendarChip/CalendarChipS";
-import DateMenuList from "./DateMenuList";
-import ListHeader from "./ListHeader";
-import { LoadingSpinner } from "../common/LoadingSpinner";
-
-export type weekMealProps = {
-  weekType: "THIS" | "NEXT";
-};
-export default function WeekMeal({ weekType }: weekMealProps) {
-  const { familyRoomId } = useFamilyStore();
-  const isLeader = useProfileStore().isLeader;
-  const baseDate = new Date();
-  const date =
-    weekType === "THIS" ? getThisMonday(baseDate) : getNextMonday(baseDate); //이번주/다음주 시작 월요일 날짜
-  const { data, isError, isLoading } = useGetWeekMealPlan(familyRoomId!, date);
-
-  const navigate = useNavigate();
-  if (isError) {
-    return (
-      <div className="pt-43">
-        {isLeader ? (
-          <EmptyState
-            text="아직 식단이 생성되지 않았어요"
-            buttonText="식단 생성"
-            onClick={() => navigate(`/meal-plan/create?week=${weekType}`)}
-          />
-        ) : (
-          <EmptyState
-            text="아직 식단이 생성되지 않았어요"
-            primaryText="방장이 식단을 생성하고 있어요"
-          />
-        )}
-      </div>
-    );
-  }
-  if (isLoading) {
-    return (
-      <div className="w-full pt-60">
-        <LoadingSpinner text="식단을 불러오고 있어요..." />
-      </div>
-    );
-  }
-  const weekData = changeAdditionalProp(data?.result.slots || {}, "WEEK");
-  const listHeaderDate =
-    date + "~" + date[5] + date[6] + "." + (Number(date[8] + date[9]) + 6);
-  const { month, weekKor } = getWeekOfMonth(new Date(date));
-
-  const dayKorMap: Record<string, string> = {
-    MONDAY: "월",
-    TUESDAY: "화",
-    WEDNESDAY: "수",
-    THURSDAY: "목",
-    FRIDAY: "금",
-    SATURDAY: "토",
-    SUNDAY: "일",
-  };
-  const dayNames = [
-    "MONDAY",
-    "TUESDAY",
-    "WEDNESDAY",
-    "THURSDAY",
-    "FRIDAY",
-    "SATURDAY",
-    "SUNDAY",
-  ];
-  const todayIdx = new Date().getDay();
-
-  const adjustedIdx =
-    weekType === "THIS" ? (todayIdx === 0 ? 6 : todayIdx - 1) : 0;
-
-  //오늘~앞으로 날
-  const futureDays = dayNames.slice(adjustedIdx).map((day) => ({
-    dayKor: dayKorMap[day],
-    meals: weekData[day] || [],
-  }));
-
-  //지난 날
-  const pastDays = dayNames.slice(0, adjustedIdx).map((day) => ({
-    dayKor: dayKorMap[day],
-    meals: weekData[day] || [],
-  }));
-  return (
-    <>
-      <div className="pt-[33px] pb-[11px]">
-        <ListHeader title={`${month}월 ${weekKor}`} date={listHeaderDate} />
-      </div>
-      <div className="flex flex-col gap-3 pb-30">
-        {futureDays.map((day) => {
-          if (day.meals.length > 0) {
-            return (
-              <div key={day.dayKor} className="flex gap-3">
-                <CalendarChipS text={day.dayKor} type="primary" />
-                <DateMenuList isSelect={true} data={day.meals} />
-              </div>
-            );
-          }
-        })}
-        {pastDays.map((day) => {
-          if (day.meals.length > 0) {
-            return (
-              <div key={day.dayKor} className="flex gap-3">
-                <CalendarChipS text={day.dayKor} type="gray" />
-                <DateMenuList isSelect={false} data={day.meals} />
-              </div>
-            );
-          }
-        })}
-      </div>
-    </>
-  );
-}
diff --git a/src/layouts/mobile-layout.tsx b/src/layouts/mobile-layout.tsx
index 3f148e54..d40cb9a4 100644
--- a/src/layouts/mobile-layout.tsx
+++ b/src/layouts/mobile-layout.tsx
@@ -1,6 +1,9 @@
-import { Outlet, useLocation } from "react-router-dom";
-import Footer from "../components/common/Footer";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import Background from "../assets/icons/footer-background.svg";
+import Home from "../assets/icons/home.svg";
+import Note from "../assets/icons/note-edit.svg";
 import UpButton from "../components/common/UpButton";
+import CalendarIcon from "../components/common/icon/Calendar";
 
 export default function MobileLayout() {
   const location = useLocation();
@@ -8,11 +11,54 @@ export default function MobileLayout() {
 
   const showFooter = footerPaths.includes(location.pathname);
 
+  const navigate = useNavigate();
+
   return (
     <div className="flex min-h-[100dvh] justify-center bg-gray-50">
       <div className="relative w-full max-w-[400px] bg-white shadow-md">
         <Outlet />
-        {showFooter && <Footer />}
+        {showFooter && (
+          <div className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[400px] text-[10px] font-medium z-10 text-center">
+            <div className="relative">
+              <img src={Background} className="w-full" alt="푸터 배경" />
+
+              <div className="absolute bottom-0 w-full aspect-[400/92] flex justify-between px-6">
+                <div className="flex justify-center w-19 pt-2">
+                  <button
+                    className="flex flex-col cursor-pointer gap-2"
+                    onClick={() => navigate("/")}
+                  >
+                    <img src={Home} className="size-5" alt="홈 아이콘" />
+                    <p>홈</p>
+                  </button>
+                </div>
+
+                <div className="flex flex-col items-center w-19 pt-2">
+                  <button
+                    className="flex flex-col items-center cursor-pointer gap-2"
+                    onClick={() => navigate("/meal-plan")}
+                  >
+                    <CalendarIcon size={20} />
+                    <p>식단표</p>
+                  </button>
+                </div>
+              </div>
+
+              <button
+                className="
+            absolute left-1/2 -translate-x-1/2 bottom-[clamp(32px,calc(56/400*100vw),56px)]
+            flex flex-col justify-center items-center gap-1 
+            w-[clamp(40px,calc(68/400*100vw),56px)]
+            h-[clamp(40px,calc(68/400*100vw),56px)] 
+            rounded-full bg-primary-700 cursor-pointer"
+                onClick={() => navigate("/meal-plan/create")}
+              >
+                <img src={Note} className="size-5" alt="식단짜기 아이콘" />
+                <p className="text-white">식단 짜기</p>
+              </button>
+            </div>
+          </div>
+        )}
         <UpButton />
       </div>
     </div>
diff --git a/src/pages/meal-plan/meal-plan-create-page.tsx b/src/pages/meal-plan/meal-plan-create-page.tsx
index ade4b673..d1684086 100644
--- a/src/pages/meal-plan/meal-plan-create-page.tsx
+++ b/src/pages/meal-plan/meal-plan-create-page.tsx
@@ -1,12 +1,14 @@
 import Button from "../../components/common/Button";
-import ChooseWeek from "../../components/meal-plan/ChooseWeek";
-import MemberMealPlanView from "../../components/meal-plan/MemberMealPlanView";
 import PublicHeader from "../../components/header/PublicHeader";
-import { useState } from "react";
-import type { CreateMealPlan, SlotRequest } from "../../types/meal-plan";
-import { postCreateMealPlans } from "../../api/meal-plan";
+import { useEffect, useState } from "react";
+import type {
+  CreateMealPlan,
+  DayOfWeek,
+  SlotItem,
+  SlotRequest,
+} from "../../types/meal-plan";
+import { postConfirmMealPlan, postCreateMealPlans } from "../../api/meal-plan";
 import { useFamilyStore } from "../../stores/use-family-store";
-import MealPlanResult from "../../components/meal-plan/MealPlanResult";
 import { changeAdditionalProp } from "../../utils/changeAdditionalProp";
 import AlertModal from "../../components/common/AlertModal";
 import { useNavigate, useSearchParams } from "react-router-dom";
@@ -14,6 +16,11 @@ import { getNextMonday, getThisMonday } from "../../utils/date";
 import { LoadingSpinner } from "../../components/common/LoadingSpinner";
 import toast from "react-hot-toast";
 import { useProfileStore } from "../../stores/use-profile-store";
+import CalendarChipS from "../../components/chip/CalendarChip/CalendarChipS";
+import Background from "../../assets/icons/member-meal-background.svg";
+import CalendarChipM from "../../components/chip/CalendarChip/CalendarChipM";
+import MenuChip from "../../components/chip/MenuChip";
+import TryAgain from "../../assets/icons/try-again.svg";
 
 const MealPlanCreatePage = () => {
   const [step, setStep] = useState<"create" | "result">("create");
@@ -151,3 +158,205 @@ const MealPlanCreatePage = () => {
 };
 
 export default MealPlanCreatePage;
+
+type ChooseWeekProps = {
+  mealTime: "점심" | "저녁";
+  onChangeSelected: (slots: SlotRequest[]) => void;
+};
+
+const week: { label: string; value: DayOfWeek }[] = [
+  { label: "월", value: "MONDAY" },
+  { label: "화", value: "TUESDAY" },
+  { label: "수", value: "WEDNESDAY" },
+  { label: "목", value: "THURSDAY" },
+  { label: "금", value: "FRIDAY" },
+  { label: "토", value: "SATURDAY" },
+  { label: "일", value: "SUNDAY" },
+];
+
+function ChooseWeek({ mealTime, onChangeSelected }: ChooseWeekProps) {
+  const mealType = mealTime === "점심" ? "LUNCH" : "DINNER";
+
+  const [selectedDays, setSelectedDays] = useState<DayOfWeek[]>([]);
+
+  const toggleDay = (day: DayOfWeek) => {
+    setSelectedDays((prev) =>
+      prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day],
+    );
+  };
+
+  useEffect(() => {
+    const slots: SlotRequest[] = selectedDays.map((d) => ({
+      dayOfWeek: d,
+      mealType,
+    }));
+    onChangeSelected(slots);
+  }, [selectedDays, mealType, onChangeSelected]);
+
+  return (
+    <div>
+      <p className="text-[18px] font-medium">{mealTime} 식사</p>
+      <div className="flex gap-3 pt-3">
+        {week.map((day, idx) => (
+          <CalendarChipS
+            key={idx}
+            text={day.label}
+            type="select"
+            isSelect={selectedDays.includes(day.value)}
+            onClick={() => toggleDay(day.value)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+//방장이 아닌 가족원이 이 페이지에 진입했을 때
+function MemberMealPlanView() {
+  return (
+    <div className="flex flex-col items-center justify-center pt-35">
+      <p className="font-semibold text-primary-700 text-[14px] pb-4">
+        방장이 식단을 생성하고 있어요.
+      </p>
+      <p className="font-medium text-[#4d4d4d] text-[18px] text-center whitespace-pre-line pb-10">
+        가족원의 위시리스트를 기반으로 {"\n"}다음주 식단이 생성돼요.
+      </p>
+      <img src={Background} alt="가족원 식단화면 배경 아이콘" />
+    </div>
+  );
+}
+
+//식단 생성 결과
+type MealPlanResultProps = {
+  mealPlanId: number;
+  onClick: () => void;
+  weekParam: string | null;
+  isLoading: boolean;
+};
+
+type mealPlanResponse = Record<string, SlotItem[]>;
+const dayKor: Record<string, string> = {
+  MONDAY: "월",
+  TUESDAY: "화",
+  WEDNESDAY: "수",
+  THURSDAY: "목",
+  FRIDAY: "금",
+  SATURDAY: "토",
+  SUNDAY: "일",
+};
+
+function MealPlanResult({
+  mealPlanId,
+  onClick,
+  weekParam,
+  isLoading,
+}: MealPlanResultProps) {
+  const navigate = useNavigate();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const response = sessionStorage.getItem("mealPlan");
+  if (isLoading) return null;
+  if (!response) {
+    toast.error("올바른 접근이 아닙니다. 식단 생성부터 해주세요!");
+    return;
+  }
+  const data = JSON.parse(response) as mealPlanResponse;
+
+  const handleButton = () => {
+    setIsOpen(true);
+  };
+  const { familyRoomId } = useFamilyStore.getState();
+
+  const handleClick = async () => {
+    try {
+      if (familyRoomId == null) {
+        toast.error("familyRoomId 없음");
+        return;
+      }
+      await postConfirmMealPlan({
+        familyRoomId: familyRoomId,
+        mealPlanId: mealPlanId,
+      });
+    } catch (error) {
+      alert("주간 식단 확정 실패" + error);
+    } finally {
+      if (weekParam === "THIS") {
+        navigate(`/meal-plan?tab=THIS`);
+      } else {
+        navigate(`/meal-plan?tab=NEXT`);
+      }
+    }
+  };
+  return (
+    <div>
+      {isOpen && (
+        <AlertModal
+          title=""
+          boldContent={`생성을 완료하시겠어요?`}
+          mediumContent={`완료된 식단표는 [다음주 식단]에 \n저장됩니다.`}
+          buttonText="확인"
+          outsideText="탭해서 닫기"
+          onClick={handleClick}
+          handleModal={() => setIsOpen(false)}
+        />
+      )}
+      <p className="pl-4 pt-6 font-semibold text-[24px] text-gray-800 pb-4 whitespace-pre-line">
+        우리가족을 위한 식단표가 {"\n"}생성되었어요.
+      </p>
+      <div className="flex justify-end pr-[14px]">
+        <button
+          className="flex gap-1 p-[10px] bg-gray-200 rounded-lg font-medium text-[16px] cursor-pointer"
+          onClick={onClick}
+        >
+          <img src={TryAgain} alt="다시 생성하기 아이콘" />
+          <span className="shrink-0">다시 생성하기</span>
+        </button>
+      </div>
+      <div className="flex gap-2 pt-12 pb-[27px] overflow-x-auto pr-4">
+        <div className="flex flex-col items-center gap-3 font-medium text-gray-500 text-[14px]">
+          <CalendarChipM text="" />
+          <p className="pl-4 pr-2 flex items-center text-center shrink-0 h-[82px] whitespace-nowrap">
+            점심
+          </p>
+          <p className="pl-4 pr-2 flex items-center text-center shrink-0 h-[82px] whitespace-nowrap">
+            저녁
+          </p>
+        </div>
+        {Object.entries(data).map(([day, slots]) => {
+          const date = dayKor[day] ?? day;
+          const lunch = slots.find((slot) => slot.mealType === "LUNCH");
+          const dinner = slots.find((slot) => slot.mealType === "DINNER");
+          return (
+            <div className="flex flex-col items-center gap-3" key={day}>
+              <CalendarChipM text={date} />
+              {lunch ? (
+                <MenuChip text={lunch.title} key="slot" />
+              ) : (
+                <div className="w-[75px] h-[82px]" />
+              )}
+              {dinner ? (
+                <MenuChip text={dinner.title} key="slot" />
+              ) : (
+                <div className="w-[75px] h-[82px]" />
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <div className="w-full max-w-[400px] fixed left-1/2 -translate-x-1/2 bottom-11 flex gap-3 px-4 font-semibold text-[20px]">
+        <button
+          className="w-full h-14 rounded-xl cursor-pointer text-primary-700 border border-primary-700"
+          onClick={() => navigate(`/meal-plan/edit?week=${weekParam}`)}
+        >
+          수정
+        </button>
+        <button
+          className="w-full h-14 rounded-xl cursor-pointer bg-primary-700 text-white"
+          onClick={handleButton}
+        >
+          완료
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/meal-plan/meal-plan-edit-page.tsx b/src/pages/meal-plan/meal-plan-edit-page.tsx
index 535bab06..ef32a924 100644
--- a/src/pages/meal-plan/meal-plan-edit-page.tsx
+++ b/src/pages/meal-plan/meal-plan-edit-page.tsx
@@ -1,8 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import PublicHeader from "../../components/header/PublicHeader";
-import CalendarChipM from "../../components/meal-plan/CalendarChip/CalendarChipM";
-import MenuChip from "../../components/meal-plan/MenuChip";
-import BottomSheet from "../../components/meal-plan/BottomSheet";
+import CalendarChipM from "../../components/chip/CalendarChip/CalendarChipM";
+import MenuChip from "../../components/chip/MenuChip";
 import { useSearchParams } from "react-router-dom";
 import {
   type Updates,
@@ -14,6 +13,13 @@ import { useFamilyStore } from "../../stores/use-family-store";
 import { patchEditMealPlans, postConfirmMealPlan } from "../../api/meal-plan";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
+import Button from "../../components/common/Button";
+import MenuList from "../../components/common/MenuList";
+import Chevron from "../../components/common/icon/Chevron";
+import AlertModal from "../../components/common/AlertModal";
+import useGetInfiniteFamilyWishList from "../../hooks/queries/use-get-infinite-family-wishlist";
+import { useInView } from "react-intersection-observer";
+import { useGetRecommendList } from "../../hooks/queries/use-get-recommendations";
 
 type mealPlanResponse = Record<string, SlotItem[]>;
 
@@ -213,3 +219,222 @@ const MealPlanEditPage = () => {
 };
 
 export default MealPlanEditPage;
+
+//bottomSheet
+type BottomSheetProps = {
+  open: boolean;
+  weekParam: string | null;
+  changeMenu: (
+    id: number,
+    title: string,
+    type: "RECIPE" | "TRANSFORMED_RECIPE",
+  ) => void;
+  onSubmit: () => void;
+};
+function BottomSheet({
+  open,
+  weekParam,
+  changeMenu,
+  onSubmit,
+}: BottomSheetProps) {
+  const [tab, setTab] = useState<"common" | "recommend">("common");
+  const [isOpen, setIsOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selected, setSelected] = useState<{
+    id: number;
+    title: string;
+    type: "RECIPE" | "TRANSFORMED_RECIPE";
+  } | null>(null);
+  const navigate = useNavigate();
+  //안전한 순 위시리스트 코드
+  const { data: recommendList } = useGetRecommendList("안전한 순");
+
+  //가족 위시리스트 코드
+  const familyRoomId = useFamilyStore.getState().familyRoomId;
+  const {
+    data: familyWish,
+    isFetching,
+    hasNextPage,
+    fetchNextPage,
+  } = useGetInfiniteFamilyWishList(familyRoomId, 6);
+
+  const { ref, inView } = useInView({
+    threshold: 0,
+  });
+
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetching) {
+      fetchNextPage();
+    }
+  }, [inView, isFetching, hasNextPage, fetchNextPage]);
+
+  useEffect(() => {
+    if (selected !== null) return;
+    if (tab === "common") {
+      const first = familyWish?.pages?.[0];
+      if (!first) return;
+      setSelected({ id: first.id, title: first.title, type: first.type });
+    } else {
+      const first = recommendList?.recipes?.[0];
+      if (!first) return;
+      const recipeType = first.transformed ? "TRANSFORMED_RECIPE" : "RECIPE";
+      setSelected({
+        id: Number(first.id),
+        title: first.title,
+        type: recipeType,
+      });
+    }
+  }, [tab, familyWish, recommendList, selected]);
+
+  useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
+
+  //모달창 속 확인 버튼 눌렀을 때
+  const handleButton = () => {
+    if (weekParam === "THIS") {
+      navigate(`/meal-plan?tab=THIS`);
+    } else {
+      navigate(`/meal-plan?tab=NEXT`);
+    }
+    onSubmit();
+  };
+
+  const handleChange = () => {
+    if (!selected) {
+      toast.error("교체할 메뉴를 선택해주세요");
+      return;
+    }
+    changeMenu(selected.id, selected.title, selected.type);
+    setSelected(null);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="max-w-[400px] fixed bottom-0 p-[10px] rounded-t-2xl shadow-[0_-2px_4px_-2px_rgba(0,0,0,0.25)] overflow-hidden bg-white flex flex-col items-center">
+      <div>
+        {isModalOpen && (
+          <AlertModal
+            title=""
+            boldContent={`수정을 중단하시겠어요?`}
+            mediumContent={`완료된 식단표는 [다음주 식단]에 \n저장됩니다`}
+            buttonText="확인"
+            outsideText="탭해서 닫기"
+            onClick={handleButton}
+            handleModal={() => {
+              setIsModalOpen(false);
+            }}
+          />
+        )}
+
+        <button
+          className="flex items-center justify-center size-8 mb-3 cursor-pointer"
+          onClick={() => {
+            setIsOpen((prev) => !prev);
+          }}
+        >
+          {isOpen ? (
+            <Chevron rotate={180} color="black" size={32} />
+          ) : (
+            <Chevron rotate={0} color="black" size={32} />
+          )}
+        </button>
+      </div>
+      <div className="w-full flex font-semibold text-[18px] h-13">
+        <button
+          className={`flex-1 cursor-pointer ${tab === "common" ? "bg-gray-50 text-primary-700 " : "bg-white text-gray-300"} ${tab === "common" && isOpen ? "border-b-2 border-primary-700" : ""}`}
+          onClick={() => setTab("common")}
+        >
+          위시리스트
+        </button>
+        <button
+          className={`flex-1 cursor-pointer ${tab === "recommend" ? "bg-gray-50 text-primary-700" : "bg-white text-gray-300"} ${tab === "recommend" && isOpen ? "border-b-2 border-primary-700" : ""}`}
+          onClick={() => setTab("recommend")}
+        >
+          추천
+        </button>
+      </div>
+
+      <div
+        className={`w-full overflow-auto transition-[max-height,opacity,transform] duration-300 ${isOpen ? "max-h-[475px] opacity-100 translate-y-0" : "max-h-0 opacity-0 translate-y-4"}`}
+      >
+        <div className="py-4">
+          {tab === "common" ? (
+            <>
+              {familyWish?.pages.map((item) => {
+                const isMenuListSelect = selected?.id === item.id;
+                return (
+                  <MenuList
+                    key={item.id}
+                    type="profile"
+                    menu={item.title}
+                    img={item.imageUrl}
+                    isSafe={item.allergyStatus}
+                    rate={item.avgScore}
+                    category={item.category.label}
+                    ingredients={item.ingredientsRaw}
+                    profiles={item.sourceProfile.profiles}
+                    isSelected={isMenuListSelect}
+                    onClick={() =>
+                      setSelected({
+                        id: item.id,
+                        title: item.title,
+                        type: item.type,
+                      })
+                    }
+                    clickable={true}
+                  />
+                );
+              })}
+            </>
+          ) : (
+            <>
+              {recommendList?.recipes.map((item) => {
+                const recipeType = item.transformed
+                  ? "TRANSFORMED_RECIPE"
+                  : "RECIPE";
+                const isMenuListSelect = selected?.id === Number(item.id);
+                return (
+                  <MenuList
+                    key={item.id}
+                    type="rate"
+                    menu={item.title}
+                    img={item.imageUrl}
+                    isSafe={item.safe ? "SAFE" : "SAFETY"}
+                    rate={item.avgScore}
+                    category={item.category}
+                    ingredients={item.description}
+                    isSelected={isMenuListSelect}
+                    onClick={() =>
+                      setSelected({
+                        id: Number(item.id),
+                        title: item.title,
+                        type: recipeType,
+                      })
+                    }
+                    clickable={true}
+                  />
+                );
+              })}
+            </>
+          )}
+        </div>
+        <div ref={ref} className="h-2"></div>
+      </div>
+
+      <div className="fixed bottom-0 left-1/2 -translate-x-1/2 flex justify-center pb-10">
+        <Button
+          text={isOpen ? "바꾸기" : "수정완료"}
+          type="button"
+          onClick={() => {
+            if (isOpen) {
+              handleChange();
+            } else {
+              setIsModalOpen(true);
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/meal-plan/meal-plan-page.tsx b/src/pages/meal-plan/meal-plan-page.tsx
index 43ed344f..6771c004 100644
--- a/src/pages/meal-plan/meal-plan-page.tsx
+++ b/src/pages/meal-plan/meal-plan-page.tsx
@@ -1,8 +1,6 @@
 import { useEffect, useState } from "react";
 import HomeHeader from "../../components/header/HomeHeader";
-import TodayMeal from "../../components/meal-plan/TodayMeal";
-import WeekMeal from "../../components/meal-plan/WeekMeal";
-import { useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import selectedSun from "../../assets/icons/sun-selected.svg";
 import unselectedSun from "../../assets/icons/sun-unselected.svg";
 import selectedMoon from "../../assets/icons/moon-selected.svg";
@@ -11,6 +9,22 @@ import useGetTodayMealPlan from "../../hooks/queries/use-get-today-meal-plan";
 import { useFamilyStore } from "../../stores/use-family-store";
 import EmptyState from "../../components/common/EmptyState";
 import { LoadingSpinner } from "../../components/common/LoadingSpinner";
+import IngredientAndRecipe from "../../components/common/IngredientAndRecipe";
+import Button from "../../components/common/Button";
+import type { TodayMeal } from "../../types/meal-plan";
+import { useProfileStore } from "../../stores/use-profile-store";
+import { getNextMonday, getThisMonday, getWeekOfMonth } from "../../utils/date";
+import useGetWeekMealPlan from "../../hooks/queries/use-get-week-meal";
+import { changeAdditionalProp } from "../../utils/changeAdditionalProp";
+import CalendarChipS from "../../components/chip/CalendarChip/CalendarChipS";
+import DateMenuList from "../../components/meal-plan/DateMenuList";
+import usePostReview from "../../hooks/mutations/use-post-review";
+import type { createReview } from "../../types/review";
+import toast from "react-hot-toast";
+import AlertModal from "../../components/common/AlertModal";
+import UnselectedStar from "../../assets/icons/star-unselected.svg";
+import SelectedStar from "../../assets/icons/star-selected.svg";
+import X from "../../assets/icons/x-icon.svg";
 
 const MealPlanPage = () => {
   const [searchParams] = useSearchParams();
@@ -103,17 +117,313 @@ const MealPlanPage = () => {
                     <EmptyState text={`${todayTab}식단이 생성되지 않았어요.`} />
                   </div>
                 ) : (
-                  <TodayMeal key={todayTab} data={tabData} />
+                  <TodayMealTab key={todayTab} data={tabData} />
                 )}
               </>
             )}
           </>
         )}
-        {tab == "이번주 식단" && <WeekMeal key="THIS" weekType="THIS" />}
-        {tab == "다음주 식단" && <WeekMeal key="NEXT" weekType="NEXT" />}
+        {tab == "이번주 식단" && (
+          <WeekMealTab key="THISWEEK" weekType="THISWEEK" />
+        )}
+        {tab == "다음주 식단" && (
+          <WeekMealTab key="NEXTWEEK" weekType="NEXTWEEK" />
+        )}
       </div>
     </div>
   );
 };
 
 export default MealPlanPage;
+
+// 오늘의 식단 탭
+function TodayMealTab({ data }: { data: TodayMeal }) {
+  const [isDone, setIsDone] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const handleClose = () => setIsOpen(false);
+  return (
+    <>
+      <div className="flex justify-between items-center pt-3">
+        {isOpen && (
+          <ReviewModal
+            recipeId={data.id}
+            onClick={handleClose}
+            type={data.type}
+          />
+        )}
+        <div>
+          {/* <p className="font-normal text-[16px] leading-[1.5]">우유대신,</p> */}
+          {/*현재 부연설명이 들어오고 있지 않아서 주석 처리 */}
+          <p className="font-semibold text-[18px] tracking-[0.01em] text-gray-600">
+            {data.title.split(" ").map((title, idx) => (
+              <span key={idx}>
+                {title} {idx % 2 === 1 && <br />}
+              </span>
+            ))}
+          </p>
+        </div>
+
+        <img
+          src={data.imageUrl}
+          alt={`${data.title} 이미지`}
+          className="w-41 h-29 object-cover rounded-lg"
+        />
+      </div>
+      {!data.isReviewed && (
+        <div className="pt-6">
+          {!isDone ? (
+            <Button
+              type="button"
+              text="식사 완료"
+              onClick={() => setIsDone(true)}
+            />
+          ) : (
+            <Button
+              type="button"
+              text="리뷰 작성"
+              bgColor="white"
+              onClick={() => setIsOpen(true)}
+            />
+          )}
+        </div>
+      )}
+      <div className="pt-11 pb-29">
+        <IngredientAndRecipe
+          ingredients={data.ingredients}
+          step={data.recipeSteps}
+        />
+      </div>
+    </>
+  );
+}
+
+// 이번주/다음주 탭
+function WeekMealTab({ weekType }: { weekType: "THISWEEK" | "NEXTWEEK" }) {
+  const { familyRoomId } = useFamilyStore();
+  const isLeader = useProfileStore().isLeader;
+  const baseDate = new Date();
+  const date =
+    weekType === "THISWEEK" ? getThisMonday(baseDate) : getNextMonday(baseDate); //이번주/다음주 시작 월요일 날짜
+  const { data, isError, isLoading } = useGetWeekMealPlan(familyRoomId!, date);
+
+  const navigate = useNavigate();
+  if (isError) {
+    return (
+      <div className="pt-43">
+        {isLeader ? (
+          <EmptyState
+            text="아직 식단이 생성되지 않았어요"
+            buttonText="식단 생성"
+            onClick={() => navigate(`/meal-plan/create?week=${weekType}`)}
+          />
+        ) : (
+          <EmptyState
+            text="아직 식단이 생성되지 않았어요"
+            primaryText="방장이 식단을 생성하고 있어요"
+          />
+        )}
+      </div>
+    );
+  }
+  if (isLoading) {
+    return (
+      <div className="w-full pt-60">
+        <LoadingSpinner text="식단을 불러오고 있어요..." />
+      </div>
+    );
+  }
+  const weekData = changeAdditionalProp(data?.result.slots || {}, "WEEK");
+  const listHeaderDate =
+    date + "~" + date[5] + date[6] + "." + (Number(date[8] + date[9]) + 6);
+  const { month, weekKor } = getWeekOfMonth(new Date(date));
+
+  const dayKorMap: Record<string, string> = {
+    MONDAY: "월",
+    TUESDAY: "화",
+    WEDNESDAY: "수",
+    THURSDAY: "목",
+    FRIDAY: "금",
+    SATURDAY: "토",
+    SUNDAY: "일",
+  };
+  const dayNames = [
+    "MONDAY",
+    "TUESDAY",
+    "WEDNESDAY",
+    "THURSDAY",
+    "FRIDAY",
+    "SATURDAY",
+    "SUNDAY",
+  ];
+  const todayIdx = new Date().getDay();
+
+  const adjustedIdx =
+    weekType === "THISWEEK" ? (todayIdx === 0 ? 6 : todayIdx - 1) : 0;
+
+  //오늘~앞으로 날
+  const futureDays = dayNames.slice(adjustedIdx).map((day) => ({
+    dayKor: dayKorMap[day],
+    meals: weekData[day] || [],
+  }));
+
+  //지난 날
+  const pastDays = dayNames.slice(0, adjustedIdx).map((day) => ({
+    dayKor: dayKorMap[day],
+    meals: weekData[day] || [],
+  }));
+  return (
+    <>
+      <div className="pt-[33px] pb-[11px]">
+        <div className="flex px-[10px] py-1 rounded-lg text-4 gap-2 bg-white">
+          <p className="font-semibold text-gray-700 text-[16px]">{`${month}월 ${weekKor}`}</p>
+          <p className="font-medium text-gray-500 text-[16px]">
+            {listHeaderDate}
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-col gap-3 pb-30">
+        {futureDays.map((day) => {
+          if (day.meals.length > 0) {
+            return (
+              <div key={day.dayKor} className="flex gap-3">
+                <CalendarChipS text={day.dayKor} type="primary" />
+                <DateMenuList isSelect={true} data={day.meals} />
+              </div>
+            );
+          }
+        })}
+        {pastDays.map((day) => {
+          if (day.meals.length > 0) {
+            return (
+              <div key={day.dayKor} className="flex gap-3">
+                <CalendarChipS text={day.dayKor} type="gray" />
+                <DateMenuList isSelect={false} data={day.meals} />
+              </div>
+            );
+          }
+        })}
+      </div>
+    </>
+  );
+}
+
+//리뷰 모달
+type ReviewModalProps = {
+  recipeId: number;
+  onClick: () => void;
+  type: "TRANSFORMED_RECIPE" | "RECIPE";
+};
+
+type Preference = boolean | null;
+
+function ReviewModal({ recipeId, onClick, type }: ReviewModalProps) {
+  const [preference, setPreference] = useState<Preference>(null);
+  const star = [1, 2, 3, 4, 5];
+  const [score, setScore] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handlebutton = (select: Preference) => {
+    if (select == preference) {
+      setPreference(null);
+    } else {
+      setPreference(select);
+    }
+  };
+
+  const onModalClick = () => {
+    setIsOpen(false);
+    onClick();
+  };
+
+  const { mutate } = usePostReview();
+
+  const handleSubmitReview = ({
+    recipeId,
+    score,
+    isFavorite,
+  }: createReview) => {
+    mutate(
+      { recipeId, score, isFavorite, type },
+      {
+        onSuccess: () => {
+          setIsOpen(true);
+        },
+        onError: (e: any) => {
+          if (!score) {
+            toast.error("별을 클릭해주세요");
+            return;
+          }
+          toast.error(e.response?.data?.message);
+          onClick();
+        },
+      },
+    );
+  };
+  return (
+    <div className="fixed inset-0 z-30 flex justify-center items-end">
+      {isOpen && (
+        <AlertModal
+          boldContent="리뷰 등록 완료!"
+          mediumContent={`사용자님의 소중한 리뷰를\n기록했어요.`}
+          buttonText="확인"
+          onClick={onModalClick}
+        />
+      )}
+      <div className="bg-white rounded-t-2xl shadow-[0_-2px_4px_-2px_rgba(0,0,0,0.25)] w-[400px] flex flex-col gap-6 items-center text-center">
+        <button
+          className="pt-[10px] cursor-pointer flex justify-center items-center"
+          onClick={onClick}
+        >
+          <img src={X} alt="닫기버튼" className="size-6" />
+        </button>
+        <div className="font-semibold">
+          <p className="text-[20px] pb-6">오늘의 메뉴는 어떠셨나요</p>
+          <div className="pb-4 flex justify-center">
+            {star.map((idx) => (
+              <button
+                className="size-[58px] flex justify-center items-center cursor-pointer"
+                key={idx}
+                onClick={() => setScore(idx)}
+              >
+                <img
+                  src={idx <= score ? SelectedStar : UnselectedStar}
+                  alt="별점"
+                />
+              </button>
+            ))}
+          </div>
+          <div className="flex justify-center gap-[10px]">
+            <button
+              className={`px-[10px] py-2 rounded-lg cursor-pointer ${preference === false ? "text-white bg-primary-700" : "text-black bg-[#F0F0F0]"}`}
+              onClick={() => handlebutton(false)}
+            >
+              내 취향은 아니에요
+            </button>
+            <button
+              className={`px-[10px] py-2 rounded-lg cursor-pointer ${preference === true ? "text-white bg-primary-700" : "text-black bg-[#F0F0F0]"}`}
+              onClick={() => handlebutton(true)}
+            >
+              또 먹고 싶어요
+            </button>
+          </div>
+        </div>
+        <div className="w-full p-[10px] flex justify-center">
+          <Button
+            type="button"
+            text="등록"
+            onClick={() => {
+              const reviewData: createReview = {
+                recipeId,
+                score,
+              };
+              if (preference !== null) {
+                reviewData.isFavorite = preference;
+              }
+              handleSubmitReview(reviewData);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}