From 56aa284550760ef54446b5575508992b1afc15a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=ED=99=98?= <joelkh784@gmail.com>
Date: Mon, 27 May 2024 19:37:10 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20no=20foote?=
 =?UTF-8?q?r=20option=20on=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyRouteContent/index.tsx | 4 ++--
 src/components/common/layout/index.tsx  | 4 ++--
 src/pages/my-route/index.tsx            | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/MyRouteContent/index.tsx b/src/components/MyRouteContent/index.tsx
index ac2b1e8..fe71bda 100644
--- a/src/components/MyRouteContent/index.tsx
+++ b/src/components/MyRouteContent/index.tsx
@@ -20,12 +20,12 @@ const MyRouteContent = () => {
   return (
     <DragDropContext onDragEnd={handleOnDragEnd}>
       <main className="flex gap-30 m-30">
-        <div className="bg-gray-50 pt-20 pb-50 px-30 flex flex-col gap-10 rounded-8 shadow-lg">
+        <div className="bg-gray-20 pt-20 pb-50 px-30 flex flex-col gap-10 rounded-8 shadow-main">
           <KakaoMap />
           <PlaceList />
 
           {/* 버튼에 모달 핸들러 등록 */}
-          <button className="w-full bg-blue-500 text-white rounded-8 p-15 flex justify-center items-center">
+          <button className="w-full bg-blue text-white rounded-8 p-15 flex justify-center items-center">
             <PlusIcon className="w-20" />
             일정 추가하기
           </button>
diff --git a/src/components/common/layout/index.tsx b/src/components/common/layout/index.tsx
index 87f03bd..9af0047 100644
--- a/src/components/common/layout/index.tsx
+++ b/src/components/common/layout/index.tsx
@@ -1,12 +1,12 @@
 import Header from './Header';
 import Footer from './Footer';
 
-const Layout = ({ children }: { children: React.ReactNode }) => {
+const Layout = ({ children, hasFooter = true }: { children: React.ReactNode; hasFooter?: boolean }) => {
   return (
     <div className="flex flex-col min-h-screen">
       <Header />
       <div className="flex-grow bg-gray-200">{children}</div>
-      <Footer />
+      {hasFooter && <Footer />}
     </div>
   );
 };
diff --git a/src/pages/my-route/index.tsx b/src/pages/my-route/index.tsx
index 8f820ee..f965210 100644
--- a/src/pages/my-route/index.tsx
+++ b/src/pages/my-route/index.tsx
@@ -6,7 +6,7 @@ import MyRouteContent from '@/src/components/MyRouteContent';
 
 const MyRoute = () => {
   return (
-    <Layout>
+    <Layout hasFooter={false}>
       <MyRouteContent />
     </Layout>
   );

From 8c83bc17a6f25fb71896ad13019a763b2f70fb80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=ED=99=98?= <joelkh784@gmail.com>
Date: Mon, 27 May 2024 20:29:37 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=20Feat:=20my=20place=20list=20wit?=
 =?UTF-8?q?h=20dnd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyRouteContent/PlaceItem.tsx |  2 +-
 src/components/MyRouteContent/index.tsx     | 65 +++++++++++++++++----
 2 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/src/components/MyRouteContent/PlaceItem.tsx b/src/components/MyRouteContent/PlaceItem.tsx
index 7d015ca..cccb0e7 100644
--- a/src/components/MyRouteContent/PlaceItem.tsx
+++ b/src/components/MyRouteContent/PlaceItem.tsx
@@ -15,7 +15,7 @@ type PlaceItemProps = {
 
 const PlaceItem: React.FC<PlaceItemProps> = ({ place, index }) => {
   return (
-    <Draggable draggableId={place.id.toString()} index={index}>
+    <Draggable draggableId={`${place.name}-${index}`} index={index}>
       {(provided) => (
         <li
           className="flex justify-between rounded-8 bg-white p-15 items-center shadow-lg"
diff --git a/src/components/MyRouteContent/index.tsx b/src/components/MyRouteContent/index.tsx
index fe71bda..504fd5a 100644
--- a/src/components/MyRouteContent/index.tsx
+++ b/src/components/MyRouteContent/index.tsx
@@ -1,10 +1,30 @@
-import SearchBar from '../common/searchBar';
 import KakaoMap from './KakaoMap';
 import PlaceList from './PlaceList';
 import { PlusIcon } from '@heroicons/react/24/outline';
 import { DragDropContext, DropResult, Droppable } from '@hello-pangea/dnd';
+import { ChangeEvent, useState } from 'react';
+import { MockDataItem } from '@/src/lib/types';
+import { mock } from '@/src/components/mainContent/mock';
+import { useFilteredData } from '@/src/hooks/useFilteredData';
+// import { useRelatedSearch } from '@/src/hooks/useRelatedSearch';
+// import RelatedSearchInfo from '../mainContent/ListSearchSection/RelatedSearchInfo';
+import NoSearchData from '../mainContent/ListSearchSection/NoSearchData';
+import ListCard from '../common/ListCard';
+import { Draggable } from '@hello-pangea/dnd';
 
 const MyRouteContent = () => {
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [sectionVisible, setSectionVisible] = useState<boolean>(false);
+  const GRID_ROW = Math.ceil(mock.data.length / 4);
+  const filteredData: MockDataItem[] = useFilteredData({ data: mock.data }, searchValue);
+  // const { relatedData, visible } = useRelatedSearch(searchValue, sectionVisible);
+  const handleSearchInputChange = (e: ChangeEvent) => {
+    setSearchValue((e.target as HTMLInputElement).value);
+    if (!sectionVisible) {
+      setSectionVisible(true);
+    }
+  };
+
   const handleOnDragEnd = (result: DropResult) => {
     const { destination, source, draggableId } = result;
 
@@ -12,7 +32,7 @@ const MyRouteContent = () => {
       return;
     }
 
-    if (destination.droppableId === 'searchBar' && source.droppableId === 'placeList') {
+    if (destination.droppableId === 'myPlace' && source.droppableId === 'placeList') {
       console.log(`${draggableId}`);
     }
   };
@@ -20,7 +40,7 @@ const MyRouteContent = () => {
   return (
     <DragDropContext onDragEnd={handleOnDragEnd}>
       <main className="flex gap-30 m-30">
-        <div className="bg-gray-20 pt-20 pb-50 px-30 flex flex-col gap-10 rounded-8 shadow-main">
+        <div className="bg-gray-20 pt-20 pb-50 px-30 flex flex-col gap-10 rounded-8 shadow-main h-760">
           <KakaoMap />
           <PlaceList />
 
@@ -30,14 +50,37 @@ const MyRouteContent = () => {
             일정 추가하기
           </button>
         </div>
-        <Droppable droppableId="searchBar">
-          {(provided) => (
-            <div ref={provided.innerRef} {...provided.droppableProps}>
-              <SearchBar />
-              {provided.placeholder}
-            </div>
-          )}
-        </Droppable>
+
+        <div className="relative flex flex-col">
+          <input
+            value={searchValue}
+            className="text-center border-2 rounded-15 w-570 py-10 px-30 mb-30 "
+            placeholder="검색하기"
+            onChange={handleSearchInputChange}
+          />
+          <Droppable droppableId="myPlace">
+            {(provided) => (
+              <div ref={provided.innerRef} {...provided.droppableProps}>
+                {filteredData.length !== 0 ? (
+                  <div className={`grid grid-cols-4 grid-rows-${GRID_ROW} gap-40`}>
+                    {filteredData.map((datas, index) => (
+                      <Draggable key={index} draggableId={`${datas.title}-${index}`} index={index}>
+                        {(provided) => (
+                          <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                            <ListCard data={datas} />
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
+                  </div>
+                ) : (
+                  <NoSearchData />
+                )}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </div>
       </main>
     </DragDropContext>
   );

From a242ba3df34d730d9803fa007c491424d6f8de70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=ED=99=98?= <joelkh784@gmail.com>
Date: Mon, 27 May 2024 20:40:43 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20remove=20script=20str?=
 =?UTF-8?q?ategy=20prop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyRouteContent/KakaoMap.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MyRouteContent/KakaoMap.tsx b/src/components/MyRouteContent/KakaoMap.tsx
index 6804093..6b8587b 100644
--- a/src/components/MyRouteContent/KakaoMap.tsx
+++ b/src/components/MyRouteContent/KakaoMap.tsx
@@ -7,7 +7,7 @@ const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT
 const KakaoMap = () => {
   return (
     <>
-      <Script src={KAKAO_SDK_URL} strategy="beforeInteractive" />
+      <Script src={KAKAO_SDK_URL} />
       {/* <Script src={KAKAO_SDK_LIB_URL} strategy="beforeInteractive" /> */}
 
       <Map center={{ lat: 33.450701, lng: 126.570667 }} className="w-500 h-300 rounded-8 shadow-md" />

From d772336da70ae0bcde41dfdd79e425f1977b626d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=ED=99=98?= <joelkh784@gmail.com>
Date: Wed, 29 May 2024 13:32:01 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20import=20root=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyRouteContent/index.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/MyRouteContent/index.tsx b/src/components/MyRouteContent/index.tsx
index 504fd5a..21aec84 100644
--- a/src/components/MyRouteContent/index.tsx
+++ b/src/components/MyRouteContent/index.tsx
@@ -6,9 +6,7 @@ import { ChangeEvent, useState } from 'react';
 import { MockDataItem } from '@/src/lib/types';
 import { mock } from '@/src/components/mainContent/mock';
 import { useFilteredData } from '@/src/hooks/useFilteredData';
-// import { useRelatedSearch } from '@/src/hooks/useRelatedSearch';
-// import RelatedSearchInfo from '../mainContent/ListSearchSection/RelatedSearchInfo';
-import NoSearchData from '../mainContent/ListSearchSection/NoSearchData';
+import NoSearchData from '../mainContent/CardSection/NoSearchData';
 import ListCard from '../common/ListCard';
 import { Draggable } from '@hello-pangea/dnd';
 
@@ -17,7 +15,6 @@ const MyRouteContent = () => {
   const [sectionVisible, setSectionVisible] = useState<boolean>(false);
   const GRID_ROW = Math.ceil(mock.data.length / 4);
   const filteredData: MockDataItem[] = useFilteredData({ data: mock.data }, searchValue);
-  // const { relatedData, visible } = useRelatedSearch(searchValue, sectionVisible);
   const handleSearchInputChange = (e: ChangeEvent) => {
     setSearchValue((e.target as HTMLInputElement).value);
     if (!sectionVisible) {