From 0b7b7fee8abbe15998fc1a96bfc383ae50158205 Mon Sep 17 00:00:00 2001
From: sue <dldustn2040@gmail.com>
Date: Sat, 20 Jan 2024 21:51:40 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20Plan=20Info=20=EC=86=8C=EC=BC=93=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Plan/PlanSchedule.tsx   | 29 ++++++++++++++++++++++++++
 src/components/Plan/PlanSectionTop.tsx |  4 ++--
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Plan/PlanSchedule.tsx

diff --git a/src/components/Plan/PlanSchedule.tsx b/src/components/Plan/PlanSchedule.tsx
new file mode 100644
index 00000000..4e96dc4f
--- /dev/null
+++ b/src/components/Plan/PlanSchedule.tsx
@@ -0,0 +1,29 @@
+import { UserIcon } from '@components/common/icons/Icons';
+import { socketContext } from '@hooks/useSocket';
+import { useContext } from 'react';
+
+const PlanSchedule = () => {
+  const { tripInfo } = useContext(socketContext);
+  const trip = tripInfo?.data;
+
+  return (
+    <div className="my-5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <div className="title1 mb-[10px] mr-1">{trip?.tripName}</div>
+          <div className="flex items-center pb-[10px]">
+            <UserIcon size={20} fill="#888" color="#888" />
+            <span className="body4 pt-[1px] text-gray4">
+              {trip?.numberOfPeople}
+            </span>
+          </div>
+        </div>
+      </div>
+      <span className="body1 text-gray4">
+        {trip?.startDate} ~ {trip?.endDate}
+      </span>
+    </div>
+  );
+};
+
+export default PlanSchedule;
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx
index 114ee5a5..d8b60ad9 100644
--- a/src/components/Plan/PlanSectionTop.tsx
+++ b/src/components/Plan/PlanSectionTop.tsx
@@ -12,7 +12,7 @@ import { useRecoilValue, useRecoilState } from 'recoil';
 import { dayState, dateState } from '@recoil/plan';
 import { tripIdState, memberIdState } from '@recoil/socket';
 import { calculateDayAndDate } from '@utils/utils';
-import { TripSchedule } from '@components/Trip/TripSchedule';
+import PlanSchedule from './PlanSchedule';
 
 const PlanSectionTop = () => {
   const navigate = useNavigate();
@@ -57,7 +57,7 @@ const PlanSectionTop = () => {
         }}
       />
       <TripRealtimeEditor />
-      <TripSchedule />
+      <PlanSchedule />
       <TripBudget />
       <Tab
         lists={DayArr}