✨ Feat: 나의 코스 페이지 와이어 프레임

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" />

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"

src/components/MyRouteContent/index.tsx

@@ -1,43 +1,83 @@
-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 NoSearchData from '../mainContent/CardSection/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 handleSearchInputChange = (e: ChangeEvent) => {
+    setSearchValue((e.target as HTMLInputElement).value);
+    if (!sectionVisible) {
+      setSectionVisible(true);
+    }
+  };
+
   const handleOnDragEnd = (result: DropResult) => {
     const { destination, source, draggableId } = result;
 
     if (!destination) {
       return;
     }
 
-    if (destination.droppableId === 'searchBar' && source.droppableId === 'placeList') {
+    if (destination.droppableId === 'myPlace' && source.droppableId === 'placeList') {
       console.log(`${draggableId}`);
     }
   };
 
   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 h-760">
           <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>
         </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>
   );

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-10">{children}</div>
-      <Footer />
+      {hasFooter && <Footer />}
     </div>
   );
 };

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>
   );