From 6d06824c54f71a137063e8bb98b7dbaecd53a7c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EB=8B=A4=EC=A0=95?= <ekwjd990913@gmail.com>
Date: Wed, 21 Sep 2022 00:57:14 +0900
Subject: [PATCH] =?UTF-8?q?[=EC=A7=80=EB=8F=84=20+=20=EB=B2=88=EA=B0=9C]?=
 =?UTF-8?q?=20=ED=8F=B0=ED=8A=B8=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../place/controller/PlaceController.java     |   6 +
 .../resources/static/css/gathering/list.css   | 151 ++--
 .../resources/templates/gathering/list.html   |  41 +-
 .../resources/templates/map/categoryMap.html  | 101 ++-
 .../main/resources/templates/map/homeMap.html | 754 ++++++++++++++++++
 .../resources/templates/map/searchMap.html    | 110 ++-
 6 files changed, 1036 insertions(+), 127 deletions(-)
 create mode 100644 your-anmok/src/main/resources/templates/map/homeMap.html

diff --git a/your-anmok/src/main/java/com/lion/youranmok/place/controller/PlaceController.java b/your-anmok/src/main/java/com/lion/youranmok/place/controller/PlaceController.java
index c420b17c..c91199ff 100644
--- a/your-anmok/src/main/java/com/lion/youranmok/place/controller/PlaceController.java
+++ b/your-anmok/src/main/java/com/lion/youranmok/place/controller/PlaceController.java
@@ -43,6 +43,7 @@ public class PlaceController {
     public String home(Model model){
         Integer mostPopularCategoryId = 1;
         List<Integer> placeIdList= placeCategoryMapService.getPlaceIdByCategoryId(mostPopularCategoryId);
+        Category category = categoryService.getCategoryById(1);
 
         List<Place> categoryPlaceList = new ArrayList<>();
 
@@ -53,6 +54,7 @@ public String home(Model model){
 
         model.addAttribute("allPlaceList",categoryPlaceList);
         model.addAttribute("categoryId",mostPopularCategoryId);
+        model.addAttribute("categoryName", category.getTagName());
 
         return "map/categoryMap";
 
@@ -119,6 +121,7 @@ public String addPlace(HttpServletRequest request, String placeName, String addr
     @GetMapping("/category")
     public String getPlaceByCategoryId(@RequestParam("id") Integer id, Model model){
         List<Integer> placeIdList = placeCategoryMapService.getPlaceIdByCategoryId(id);
+        Category category = categoryService.getCategoryById(id);
 
         List<Place> categoryPlaceList = new ArrayList<>();
 
@@ -130,6 +133,7 @@ public String getPlaceByCategoryId(@RequestParam("id") Integer id, Model model){
 
         model.addAttribute("allPlaceList",categoryPlaceList);
         model.addAttribute("categoryId",id);
+        model.addAttribute("categoryName", category.getTagName());
 
         return "map/categoryMap";
 
@@ -140,6 +144,8 @@ public String searchPlace(@AuthenticationPrincipal MemberContext member,@Request
         List<CategoryDto> categoryList = categoryService.findAll();
         Category category = categoryService.getCategoryById(categoryId);
 
+        model.addAttribute("categoryName", category.getTagName());
+
         model.addAttribute("categoryList",categoryList);
         model.addAttribute("categoryObject",category);
 
diff --git a/your-anmok/src/main/resources/static/css/gathering/list.css b/your-anmok/src/main/resources/static/css/gathering/list.css
index d0ef6f0f..9ad7eb62 100644
--- a/your-anmok/src/main/resources/static/css/gathering/list.css
+++ b/your-anmok/src/main/resources/static/css/gathering/list.css
@@ -1,5 +1,19 @@
 @charset "utf-8";
 
+@font-face {
+    font-family: 'Cafe24SsurroundAir';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cafe24Ssurround';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
 
 body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,li,dt,table,tr,td,th,input,select,option,textarea {
     margin: 0;
@@ -9,6 +23,7 @@ body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,li,dt,table,tr,td,th,input,select,option,te
 
 a {
     text-decoration: none;
+    font-family : Cafe24SsurroundAir;
 }
 
 li{
@@ -35,6 +50,12 @@ h1{
     /*background-color: blue;*/
     padding: 50px 0;
 }
+
+.gathering-title > a {
+    font-size: 40px;
+    font-family: Cafe24Ssurround;
+}
+
 .write-gather{
     float: right;
     /*margin: 30px 0;*/
@@ -42,23 +63,28 @@ h1{
     font-size: 16px;
     margin-right: 15px;
     margin-bottom: 20px;
-    background: #01C9C6;
+    background: #00C385;
     border-radius: 25px;
 }
 
+form {
+    font-family: Cafe24SsurroundAir;
+}
+
 .gather-category {
 
     margin: 10px;
     clear: both;
     display: flex;
     flex-flow : row wrap;
+    font-family: Cafe24SsurroundAir;
     /*background: red;*/
 }
 
 .gather-category > div > div {
-    color:#01C9C6;
+    color:#00C385;
     font-size: 14px;
-    outline-color: #01C9C6;
+    outline-color: #00C385;
     margin-right: 15px;
     margin-bottom: 10px;
     padding: 10px 20px;
@@ -98,7 +124,7 @@ h1{
     height: 50px;
     border: 0;
     border-radius: 15px;
-    background: #01C9C6;
+    background: #00C385;
     margin-left: 15px;
     font-size: 16px;
 }
@@ -111,8 +137,11 @@ h1{
     margin-bottom: 20px;
 }
 
+.places {
+    font-family: Cafe24SsurroundAir;
+}
 .places>div:hover{
-    background: #01C9C6;
+    background: #7FD1AE;
 }
 
 .places >div img{
@@ -138,7 +167,7 @@ h1{
 
 .gather-category input[type="checkbox"]:checked + div {
     color:white;
-    background-color: #01C9C6;
+    background-color: #00C385;
 }
 
 .gather-category > div {
@@ -156,14 +185,32 @@ h1{
 }
 
 
-/* (158~) 사이드바 관련 css */
+/* 사이드바 관련 css */
+#my_location_button{position: absolute;bottom:-150px;right:0;z-index: 100;}
 
-#hamburger_button {
-    position: fixed;
-    top: 20px;
-    left: 20px;
+html > body .categoryBtn {
+    /*all: unset;*/
+
+    background: #7FD1AE;
+    border-color: #7FD1AE;
+    border-right-color: white;
+    font-size:20px;
+    font-family: 'Cafe24SsurroundAir';
+}
+
+#categoryCard {
+    all: unset;
+    cursor:pointer;
+    display: flex;
+    flex-direction: row;
+    position:fixed;
+    top: 0px;
+    left: 0px;
+    /*width: 300px;*/
+    z-index: 200;
 }
 
+
 /* 추가된 부분 */
 .hamburger_line {
     display: inline-block;
@@ -179,9 +226,9 @@ h1{
 
 .left_sub_menu {
     position: fixed;
-    top: 70px;
-    width: 250px;
-    z-index: 10;
+    top: 0px;
+    width: 300px;
+    z-index: 210;
     left: 0px;
     background: white;
     border-right: 1px solid rgba(0, 0, 0, 0.07);
@@ -208,19 +255,20 @@ h1{
     font-size: 17px;
     font-weight: 600;
     padding: 20px 0px 8px 14px;
-    border-bottom: 1px solid #e1e1e1;
+    /*border-bottom: 1px solid #e1e1e1;*/
 }
 
-.sub_menu>h2 {
+.sub_menu>div {
     padding-bottom: 4px;
     border-bottom: 3px solid #797979;
-    margin-top: 30px;
-    font-size: 21px;
+    margin-top: 100px;
     font-weight: 600;
     color: #333;
     margin-left: 10px;
     margin-right: 10px;
-    font-family: 'NotoKrB';
+
+    font-size:20px;
+    font-family: 'Cafe24SsurroundAir';
     line-height: 35px;
 }
 
@@ -232,13 +280,26 @@ h1{
     margin-right: 20px;
 }
 
-.sub_menu>.big_menu>.small_menu li {
+.sub_menu>.big_menu a {
     color: #333;
-    font-size: 14px;
+    /*font-size: 14px;*/
     font-weight: 600;
-    border-bottom: 0px solid #e1e1e1;
+    /*border-bottom: 0px solid #e1e1e1;*/
     margin-left: 14px;
     padding-top: 8px;
+    font-size: 17px;
+    font-family: 'Cafe24SsurroundAir';
+}
+
+
+html > body .categoryBtn:hover {
+    /*all: unset;*/
+
+    background: #00C385;
+    border-color: #00C385;
+    border-right-color: white;
+    font-size:20px;
+    font-family: 'Cafe24SsurroundAir';
 }
 
 .big_menu {
@@ -249,13 +310,13 @@ ul {
     padding-inline-start: 0px;
 }
 
-/*a {*/
-/*    color: #797979;*/
-/*    text-decoration: none;*/
-/*    background-color: transparent;*/
-/*    display: block;*/
-/*    cursor: pointer;*/
-/*}*/
+a {
+    color: #797979;
+    text-decoration: none;
+    background-color: transparent;
+    display: block;
+    cursor: pointer;
+}
 
 ul {
     list-style: none;
@@ -282,8 +343,9 @@ ul {
     display: none;
 }
 
-
 /* */
+#my_location_button{position: absolute;bottom:0;right:0;z-index: 100}
+#my_location_button1{position: absolute;bottom:0;right:0;z-index: 100}
 
 .map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
 .map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;}
@@ -294,37 +356,10 @@ ul {
 #search_wrap .option{text-align: center;}
 #search_wrap .option p {margin:10px 0;}
 #search_wrap .option button {margin-left:5px;}
-#placesList li {list-style: none;}
-#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;}
-#placesList .item span {display: block;margin-top:4px;}
-#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
-#placesList .item .info{padding:10px 0 10px 55px;}
-#placesList .info .gray {color:#8a8a8a;}
-#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;}
-#placesList .info .tel {color:#009900;}
-#placesList .item .markerbg {float:left;position:absolute;width:36px; height:37px;margin:10px 0 0 10px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;}
-#placesList .item .marker_1 {background-position: 0 -10px;}
-#placesList .item .marker_2 {background-position: 0 -56px;}
-#placesList .item .marker_3 {background-position: 0 -102px}
-#placesList .item .marker_4 {background-position: 0 -148px;}
-#placesList .item .marker_5 {background-position: 0 -194px;}
-#placesList .item .marker_6 {background-position: 0 -240px;}
-#placesList .item .marker_7 {background-position: 0 -286px;}
-#placesList .item .marker_8 {background-position: 0 -332px;}
-#placesList .item .marker_9 {background-position: 0 -378px;}
-#placesList .item .marker_10 {background-position: 0 -423px;}
-#placesList .item .marker_11 {background-position: 0 -470px;}
-#placesList .item .marker_12 {background-position: 0 -516px;}
-#placesList .item .marker_13 {background-position: 0 -562px;}
-#placesList .item .marker_14 {background-position: 0 -608px;}
-#placesList .item .marker_15 {background-position: 0 -654px;}
-#pagination {margin:10px auto;text-align: center;}
-#pagination a {display:inline-block;margin-right:10px;}
-#pagination .on {font-weight: bold; cursor: default;color:#777;}
 
 .gather-category input[type="checkbox"]:checked + div {
     color:white;
-    background-color: #01C9C6;
+    background-color: #00C385;
 }
 
 .gather-category > div {
diff --git a/your-anmok/src/main/resources/templates/gathering/list.html b/your-anmok/src/main/resources/templates/gathering/list.html
index e1612ad8..eada3448 100644
--- a/your-anmok/src/main/resources/templates/gathering/list.html
+++ b/your-anmok/src/main/resources/templates/gathering/list.html
@@ -16,7 +16,7 @@
 <body>
 <section id="container">
     <div class="gathering-title">
-        <a class="h1 m-2 text-decoration-none text-dark" href="/gathering/list">같이 갈사람🤚🏻</a>
+        <a class="m-2 text-decoration-none text-dark" href="/gathering/list">같이 갈사람🤚🏻</a>
     </div>
     <div class="flex justify-end mr-[25px] mt-[25px]">
         <button sec:authorize="isAuthenticated()" class="write-gather"><a class="text-white text-decoration-none" th:href="@{/gathering/create}">모집하기⚡️</a></button>
@@ -24,7 +24,7 @@
         <button sec:authorize="isAuthenticated()" class="write-gather"><a class="text-white text-decoration-none" href="/logout">로그아웃</a></button>
     </div>
 
-    <form method="get" th:action="|@{/gathering/list}|" th:object="${criteria}">
+    <form id="gathering-main" method="get" th:action="|@{/gathering/list}|" th:object="${criteria}">
         <div class="gather-category">
             <div th:each="category,index:${categoryList}">
                 <input type="checkbox" name="category" th:value="${category.id}">
@@ -32,21 +32,6 @@
 <!--                <label><input type="button" name="category" class="btn btn-outline-info" th:value="${category.tagName}" th:id="${category.id}" onclick="onClick(this.id)"></label>-->
             </div>
         </div>
-
-<!--        <div class="input-group mb-3">-->
-<!--            <div class="input-group-prepend">-->
-<!--                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>-->
-<!--                <div class="dropdown-menu">-->
-<!--                    <a class="dropdown-item" href="#">Action</a>-->
-<!--                    <a class="dropdown-item" href="#">Another action</a>-->
-<!--                    <a class="dropdown-item" href="#">Something else here</a>-->
-<!--                    <div role="s parator" class="dropdown-divider"></div>-->
-<!--                    <a class="dropdown-item" href="#">Separated link</a>-->
-<!--                </div>-->
-<!--            </div>-->
-<!--            <input type="text" class="form-control" aria-label="Text input with dropdown button">-->
-<!--        </div>-->
-
         <div class="input-group my-5">
 
             <form class="input-group-prepend">
@@ -81,20 +66,30 @@
         <div id="menu">
             <div class="close"></div>
 
-            <a id="hamburger_button" class="fas fa-bars fa-3x"></a>
+            <div id="categoryCard" class="d-flex flex-row btn-group my-3 " role="group">
+                <button id="hamburger_button" type="button" class="categoryBtn btn btn-secondary text-nowrap center-block">
+                    <!--                <div class="fas fa-bars fa-2x"></div>-->
+                    <i class="fas fa-bars fa-2x"></i>
+                </button>
+<!--                <button type="button" class="categoryBtn btn btn-secondary text-nowrap mr-3"  th:text="${categoryName}"></button>-->
+            </div>
+
 
             <div class="left_sub_menu">
                 <div class="sub_menu">
-                    <h2>메뉴</h2>
+                    <div class="d-flex flex-row justify-between">
+                        <a class="h3" href="/">당신의 안목 👀</a>
+                    </div>
                     <ul class="big_menu">
-                    <li><a href="/">지도보기</a></li>
+                    <li><a href="/">🗺 지도보기</a></li>
                     <!--                    <ul class="small_menu">-->
                     <!--                        <li><a href="#">소메뉴2-1</a></li>-->
                     <!--                        <li><a href="#"></a>소메뉴2-2</a></li>-->
                     <!--                    </ul>-->
                     </ul>
                     <ul class="big_menu">
-                        <li><a href="/category/home">카테고리</a></li>
+                        <li><a href="/category/home">🏞 카테고리</a></li>
+
                         <!--                    <ul class="small_menu">-->
                         <!--                        <li><a href="#">소메뉴1-1</a></li>-->
                         <!--                        <li><a href="#">소메뉴1-2</a></li>-->
@@ -103,7 +98,7 @@ <h2>메뉴</h2>
                         <!--                    </ul>-->
                     </ul>
                     <ul class="big_menu">
-                        <li><a href="/mypage">마이페이지</a></li>
+                        <li><a sec:authorize="isAuthenticated()" href="/mypage">🛍 마이페이지</a></li>
                     </ul>
                 </div>
             </div>
@@ -136,7 +131,7 @@ <h2>메뉴</h2>
         //     $("ul", this).slideToggle(300);
         // });
         // 외부 클릭 시 좌측 사이드 메뉴 숨기기
-        $('#map').on('click', function () {
+        $('#gathering-main').on('click', function () {
             $('.left_sub_menu').fadeOut();
             $('.hide_sidemenu').fadeIn();
         });
diff --git a/your-anmok/src/main/resources/templates/map/categoryMap.html b/your-anmok/src/main/resources/templates/map/categoryMap.html
index 32c0c036..b315d49e 100644
--- a/your-anmok/src/main/resources/templates/map/categoryMap.html
+++ b/your-anmok/src/main/resources/templates/map/categoryMap.html
@@ -5,23 +5,61 @@
     <title>당신의 안목 메인페이지</title>
 
     <style>
+        @font-face {
+            font-family: 'Cafe24SsurroundAir';
+            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
+            font-weight: normal;
+            font-style: normal;
+        }
+
+        @font-face {
+            font-family: 'Cafe24Ssurround';
+            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
+            font-weight: normal;
+            font-style: normal;
+        }
+
         #my_location_button{position: absolute;bottom:-150px;right:0;z-index: 100;}
         #searchMapFormByCategoryId{position: absolute;bottom:-100px;right:0;z-index: 100;}
         #makeMyCategory{position: absolute;bottom:-200px;right:0;z-index: 100;}
         /*슬라이드 버튼 관련 CSS*/
-        #hamburger_button {
+        /*#hamburger_button {*/
+        /*    cursor:pointer;*/
+        /*    position:absolute;*/
+        /*    top:0px;*/
+        /*    left:0px;*/
+        /*    z-index: 200;*/
+        /*}*/
+
+        html > body .categoryBtn {
+            /*all: unset;*/
+
+            background: #7FD1AE;
+            border-color: #7FD1AE;
+            border-right-color: white;
+            font-size:20px;
+            font-family: 'Cafe24SsurroundAir';
+        }
+
+        #categoryCard {
+            all: unset;
             cursor:pointer;
-            position:absolute;
-            top:0px;
-            left:0px;
+            display: flex;
+            flex-direction: row;
+            position:fixed;
+            top: 0px;
+            left: 0px;
+            width: 300px;
             z-index: 200;
         }
 
+
+
         .left_sub_menu {
             position: fixed;
-            top: 50px;
+            top: 0px;
             width: 300px;
-            z-index: 10;
+            z-index: 210;
             left: 0px;
             background: white;
             border-right: 1px solid rgba(0, 0, 0, 0.07);
@@ -48,19 +86,19 @@
             font-size: 17px;
             font-weight: 600;
             padding: 20px 0px 8px 14px;
-            border-bottom: 1px solid #e1e1e1;
+            /*border-bottom: 1px solid #e1e1e1;*/
         }
 
         .sub_menu>div {
             padding-bottom: 4px;
             border-bottom: 3px solid #797979;
-            margin-top: 30px;
-            font-size: 21px;
+            margin-top: 100px;
             font-weight: 600;
             color: #333;
             margin-left: 10px;
             margin-right: 10px;
-            font-family: 'NotoKrB';
+            font-size:20px;
+            font-family: 'Cafe24SsurroundAir';
             line-height: 35px;
         }
 
@@ -72,13 +110,23 @@
             margin-right: 20px;
         }
 
-        .sub_menu>.big_menu>.small_menu li {
+        .sub_menu>.big_menu a {
             color: #333;
-            font-size: 14px;
             font-weight: 600;
-            border-bottom: 0px solid #e1e1e1;
             margin-left: 14px;
             padding-top: 8px;
+            font-size: 17px;
+            font-family: 'Cafe24SsurroundAir';
+        }
+
+        html > body .categoryBtn:hover {
+            /*all: unset;*/
+
+            background: #00C385;
+            border-color: #00C385;
+            border-right-color: white;
+            font-size:20px;
+            font-family: 'Cafe24SsurroundAir';
         }
 
         .big_menu {
@@ -177,38 +225,33 @@
     <div id="menu">
         <div class="close"></div>
 
-        <a id="hamburger_button" class="fas fa-bars fa-3x"></a>
+        <div id="categoryCard" class="d-flex flex-row btn-group my-3 " role="group">
+            <button id="hamburger_button" type="button" class="categoryBtn btn btn-secondary text-nowrap center-block">
+                <!--                <div class="fas fa-bars fa-2x"></div>-->
+                <i class="fas fa-bars fa-2x"></i>
+            </button>
+            <button type="button" class="categoryBtn btn btn-secondary text-nowrap mr-3"  th:text="${categoryName}"></button>
+        </div>
+
 
         <div class="left_sub_menu">
             <div class="sub_menu">
                 <div class="d-flex flex-row justify-between">
                     <a class="h3" href="/">당신의 안목 👀</a>
-<!--                    <div>-->
                         <form action="/auth/loginProc" method="post">
                             <a sec:authorize="isAnonymous()" href="https://kauth.kakao.com/oauth/authorize?client_id=84bb53ddc4e742b0c6aa6c06a6372dbc&redirect_uri=http://localhost:8080/auth/kakao/callback&response_type=code"><img width="70px" height="50px" src="/image/KakaoLoginBtn.jpg"></a>
                             <div class="btn btn-warning" sec:authorize="isAuthenticated()"><a class="text-white text-decoration-none" href="/logout">로그아웃</a></div>
                         </form>
-<!--                    </div>-->
                 </div>
 
                 <ul class="big_menu">
-                    <li><a href="/category/home">카테고리</a></li>
-<!--                    <ul class="small_menu">-->
-<!--                        <li><a href="#">소메뉴1-1</a></li>-->
-<!--                        <li><a href="#">소메뉴1-2</a></li>-->
-<!--                        <li><a href="">소메뉴1-3</a></li>-->
-<!--                        <li><a href="#">소메뉴1-4</a></li>-->
-<!--                    </ul>-->
+                    <li><a href="/category/home">🏞 카테고리</a></li>
                 </ul>
                 <ul class="big_menu">
-                    <li><a href="/gathering/list">번개모임</a></li>
-<!--                    <ul class="small_menu">-->
-<!--                        <li><a href="#">소메뉴2-1</a></li>-->
-<!--                        <li><a href="#"></a>소메뉴2-2</a></li>-->
-<!--                    </ul>-->
+                    <li><a href="/gathering/list">⚡️ 번개모임</a></li>
                 </ul>
                 <ul class="big_menu">
-                    <li><a href="/mypage">마이페이지</a></li>
+                    <li><a sec:authorize="isAuthenticated()" href="/mypage">🛍 마이페이지</a></li>
                 </ul>
             </div>
         </div>
diff --git a/your-anmok/src/main/resources/templates/map/homeMap.html b/your-anmok/src/main/resources/templates/map/homeMap.html
new file mode 100644
index 00000000..efa93dcc
--- /dev/null
+++ b/your-anmok/src/main/resources/templates/map/homeMap.html
@@ -0,0 +1,754 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8" />
+    <title>당신의 안목 메인페이지</title>
+
+    <style>
+        @font-face {
+            font-family: 'Cafe24SsurroundAir';
+            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
+            font-weight: normal;
+            font-style: normal;
+        }
+
+        @font-face {
+            font-family: 'Cafe24Ssurround';
+            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
+            font-weight: normal;
+            font-style: normal;
+        }
+
+        #my_location_button{position: absolute;bottom:-150px;right:0;z-index: 100;}
+
+        html > body .categoryBtn {
+            /*all: unset;*/
+
+            background: #7FD1AE;
+            border-color: #7FD1AE;
+            border-right-color: white;
+            font-size:20px;
+            font-family: 'Cafe24SsurroundAir';
+        }
+
+        #categoryCard {
+            all: unset;
+
+            cursor:pointer;
+            display: flex;
+            flex-direction: row;
+            position:fixed;
+            top: 0px;
+            left: 0px;
+            width: 300px;
+            z-index: 200;
+        }
+
+
+        /* 추가된 부분 */
+        .hamburger_line {
+            display: inline-block;
+            background:black;
+            margin: 2px !important;
+            width:56px;
+            height:7px;
+            border-radius:2px;
+            box-shadow:0 1px 3px rgba(0,0,0,.5);
+            position:relative;
+            z-index: 200;
+        }
+
+        .left_sub_menu {
+            position: fixed;
+            top: 0px;
+            width: 300px;
+            z-index: 210;
+            left: 0px;
+            background: white;
+            border-right: 1px solid rgba(0, 0, 0, 0.07);
+            bottom: 50px;
+            height: 100%;
+            margin-bottom: -70px;
+            margin-top: 0px;
+            padding-bottom: 0px;
+            box-shadow: 0 0px 24px 0 rgb(0 0 0 / 6%), 0 1px 0px 0 rgb(0 0 0 / 2%);
+            color: black;
+        }
+
+        .sub_menu {
+            margin-top: 50px;
+        }
+
+        .left_sub_menu>.sub_menu li:hover {
+            color: #ff5858;
+            background-color: #e1e1e1;
+        }
+
+        .left_sub_menu>.sub_menu li {
+            color: #333;
+            font-size: 17px;
+            font-weight: 600;
+            padding: 20px 0px 8px 14px;
+            /*border-bottom: 1px solid #e1e1e1;*/
+        }
+
+        .sub_menu>div {
+            padding-bottom: 4px;
+            border-bottom: 3px solid #797979;
+            margin-top: 100px;
+            font-weight: 600;
+            color: #333;
+            margin-left: 10px;
+            margin-right: 10px;
+
+            font-size:20px;
+            font-family: 'Cafe24SsurroundAir';
+            line-height: 35px;
+        }
+
+        .sub_menu .fas {
+            color: #ff5858;
+            font-size: 20px;
+            line-height: 20px;
+            float: right;
+            margin-right: 20px;
+        }
+
+        .sub_menu>.big_menu a {
+            color: #333;
+            /*font-size: 14px;*/
+            font-weight: 600;
+            /*border-bottom: 0px solid #e1e1e1;*/
+            margin-left: 14px;
+            padding-top: 8px;
+            font-size: 17px;
+            font-family: 'Cafe24SsurroundAir';
+        }
+
+
+        html > body .categoryBtn:hover {
+            /*all: unset;*/
+
+            background: #00C385;
+            border-color: #00C385;
+            border-right-color: white;
+            font-size:20px;
+            font-family: 'Cafe24SsurroundAir';
+        }
+
+        .big_menu {
+            cursor: pointer;
+        }
+
+        ul {
+            padding-inline-start: 0px;
+        }
+
+        a {
+            color: #797979;
+            text-decoration: none;
+            background-color: transparent;
+            display: block;
+            cursor: pointer;
+        }
+
+        ul {
+            list-style: none;
+        }
+
+        ol,
+        ul {
+            margin-top: 0;
+            margin-bottom: 10px;
+        }
+
+        .has_sub {
+            width: 100%;
+        }
+
+        .overlay {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+        }
+
+        .hide_sidemenu {
+            display: none;
+        }
+
+        /* */
+        #my_location_button{position: absolute;bottom:0;right:0;z-index: 100}
+        #my_location_button1{position: absolute;bottom:0;right:0;z-index: 100}
+
+        .map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
+        .map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;}
+        .map_wrap {position:relative;width:100%;height:500px;}
+        #search_wrap {position:absolute;top:0;right:0;bottom:0;width:250px;margin:10px 0 30px 10px;padding:5px;overflow-y:auto;background:rgba(255, 255, 255, 0.7);z-index: 1;font-size:12px;border-radius: 10px;}
+        .bg_white {background:#fff;}
+        #search_wrap hr {display: block; height: 1px;border: 0; border-top: 2px solid #5F5F5F;margin:3px 0;}
+        #search_wrap .option{text-align: center;}
+        #search_wrap .option p {margin:10px 0;}
+        #search_wrap .option button {margin-left:5px;}
+    </style>
+
+    <!--제이쿼리-->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+    <!--bxSlider JS-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
+    <!--bxSlider CSS-->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />
+    <!--테일윈드-->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!--부트스트랩 CSS-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <!--부트스트랩 JS-->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <!--데이지UI-->
+    <link href="https://cdn.jsdelivr.net/npm/daisyui@2.20.0/dist/full.css" rel="stylesheet" type="text/css" />
+    <!--폰트어썸-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
+    <!--카카오-->
+    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=0faeb3dc4793a50259747d85fd7d9a89&libraries=services"></script>
+    <!--CSS파일-->
+    <link rel="stylesheet" type="text/css" href="/css/popup/popup.css">
+</head>
+
+<body>
+<div class="map_wrap" style="position: relative;">
+    <div id="map" class="w-screen h-screen" >
+
+    </div>
+
+
+    <button id="my_location_button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded fas fa-crosshairs" onclick="getCurrentPosBtn()">
+    </button>
+    <br>
+<!--    <button id="my_location_button1" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="ajaxTest()">ajax 테스트</button>-->
+    <div id="search_wrap" class="bg_white" style="position: absolute; top:0; right: 0; z-index: 90;">
+        <div class="option">
+            <div>
+                <form th:action="@{/map/searchMap}" >
+                    키워드 : <input type="text" name="placeKeyword" value="" id="keyword" size="15" />
+                    <button type="submit">검색하기</button>
+                </form>
+            </div>
+        </div>
+        <hr>
+        <ul id="placeList" style="position: absolute; top: 30px; right: 0; z-index: 90;"></ul>
+        <div id="pagination" style="position: absolute; top: 30px; right: 0; z-index: 90;"></div>
+    </div>
+    <div id="menu">
+        <div class="close"></div>
+
+        <div id="categoryCard" class="d-flex flex-row btn-group my-3 " role="group">
+            <button id="hamburger_button" type="button" class="categoryBtn btn btn-secondary text-nowrap center-block">
+<!--                <div class="fas fa-bars fa-2x"></div>-->
+                <i class="fas fa-bars fa-2x"></i>
+            </button>
+            <button type="button" class="categoryBtn btn btn-secondary text-nowrap mr-3"  th:text="${categoryName}"></button>
+        </div>
+
+        <div class="left_sub_menu">
+            <div class="sub_menu">
+                <div class="d-flex flex-row justify-between">
+                    <a class="h3" href="/">당신의 안목 👀</a>
+<!--                    <div>-->
+                        <form action="/auth/loginProc" method="post">
+                            <a sec:authorize="isAnonymous()" href="https://kauth.kakao.com/oauth/authorize?client_id=84bb53ddc4e742b0c6aa6c06a6372dbc&redirect_uri=http://localhost:8080/auth/kakao/callback&response_type=code"><img width="70px" height="50px" src="/image/KakaoLoginBtn.jpg"></a>
+                            <div class="btn btn-warning" sec:authorize="isAuthenticated()"><a class="text-white text-decoration-none" href="/logout">로그아웃</a></div>
+                        </form>
+<!--                    </div>-->
+                </div>
+
+                <ul class="big_menu">
+                    <li><a href="/category/home">🏞 카테고리</a></li>
+                </ul>
+                <ul class="big_menu">
+                    <li><a href="/gathering/list">⚡️ 번개모임</a></li>
+                </ul>
+                <ul class="big_menu">
+<!--                    onClick="if(!confirm('정말로 삭제하시겠습니까?')) return false;"-->
+                    <li><a sec:authorize="isAuthenticated()" href="/mypage">🛍 마이페이지</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+<!--    <div th:each="placeInfo, status: ${placeList}">-->
+<!--        <a style="color: #01C9C6" th:text="${placeInfo.name}" th:text="${placeInfo.address}" th:onload="displayDbMarker(${placeInfo.name}, ${placeInfo.address})" ></a>-->
+<!--    </div>-->
+</div>
+
+<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=0faeb3dc4793a50259747d85fd7d9a89&libraries=services&autoload=false"></script>
+
+
+<script th:inline="javascript">
+    // 컨트롤러에 있는 값을 th:inline="javascript"를 통해 자바스크립트로 가져오기 밑에 있는 주석은 꼭 달아줘야 한다.
+
+    /*<![CDATA[*/
+
+    let allPlaceList = [[${allPlaceList}]];
+    console.log(allPlaceList);
+
+    /*]]>*/
+
+</script>
+
+<script>
+    // console.log("잘 넘어오는지확인해보기 : "+allPlaceList[1].name);
+    let container = document.getElementById("map");
+    let options = {
+        // 일단 홍대를 중심으로 잡는 맵 생성
+        center: new kakao.maps.LatLng(37.511133583298516, 126.97978788338133),
+        // // 일단 적당한 지도의 높이 레벨 7 정도로 수정
+        level: 7
+    };
+
+    let map = new kakao.maps.Map(container, options);
+
+    // markerPosition(포지션)을 Latlng로 포지션화(좌표화) -> 스타벅스 홍대점 좌표 구해서 넣었습니다.
+    let starbucksHondaeMarkerPosition = new kakao.maps.LatLng(37.55751541928109, 126.92520449490704);
+
+    // starbucksHondaeMarker 생성자
+    let starbucksHondaeMarker = new kakao.maps.Marker({
+        position: starbucksHondaeMarkerPosition,
+        clickable: true
+    })
+    // displayInfowindow(starbucksHondaeMarker, "스타벅스닷");
+
+    // starbucksHongdaeMarker를 지도 위에 표시 -> setMap
+    starbucksHondaeMarker.setMap(map);
+
+    $(function () {
+        $(".left_sub_menu").hide();
+        $("#hamburger_button").click(function () {
+            $(".left_sub_menu").fadeToggle(300);
+        });
+        // // 왼쪽메뉴 드롭다운
+        // $(".sub_menu ul.small_menu").hide();
+        // $(".sub_menu ul.big_menu").click(function () {
+        //     $("ul", this).slideToggle(300);
+        // });
+        // 외부 클릭 시 좌측 사이드 메뉴 숨기기
+        $('#map').on('click', function () {
+            $('.left_sub_menu').fadeOut();
+            $('.hide_sidemenu').fadeIn();
+        });
+    });
+
+    // 주소 - 좌표 변환 객체를 생성한다.
+    let geocoder = new kakao.maps.services.Geocoder();
+
+    function closePopup() {
+        document.getElementById("detail_popup_layer").style.display = "none"
+    }
+
+    function slider() {
+        var slide = $('.bxslider').bxSlider({
+            mode: "horizontal",    // 가로 수평으로 슬라이드된다.
+            speed: 200,        // 이동 속도를 설정한다.
+            pager: false,    // 현재 위치 페이지 표시 여부를 설정한다.
+            moveSlides: 2,    // 슬라이드 이동 시 개수를 설정한다.
+            slideWidth: 280,    // 슬라이드 너비를 설정한다.
+            minSlides: 4,    // 최소 노출 개수를 설정한다.
+            maxSlides: 4,    // 최대 노출 개수를 설정한다.
+            slideMargin: 28, // 슬라이드 간의 간격을 설정한다.
+            auto: true,         // 자동으로 흐를지 여부를 설정한다.
+            autoHover: true, // 마우스오버 시 정지할지를 설정한다.
+            controls: true    // 이전 버튼, 다음 버튼 노출 여부를 설정한다.
+        });
+
+        slide.reloadSlider();
+    };
+
+    // 주소로 좌표를 검색한다. 테이블 주소 -> 좌표 -> 지도에 마커로 표시
+    for (let i =0;i<allPlaceList.length;i++) {
+
+        geocoder.addressSearch(allPlaceList[i].address, function (result, status) {
+            let coords = new kakao.maps.LatLng(result[0].y, result[0].x);
+
+            // 결과값으로 받은 위치를 마커로 표시
+            let marker = new kakao.maps.Marker({
+                map: map,
+                position: coords
+            });
+
+
+
+            kakao.maps.event.addListener(marker, 'click', function (){
+               // location.href="/place/"+allPlaceList[i].id+"#load";
+
+                $.ajax({
+                    url : "/place/"+allPlaceList[i].id,
+                    type : "GET",
+                    async: false,
+                    success : function(data){
+                        console.log(data);
+                        console.log(data.place.name);
+                        $('p[id=place_info_placeName]').text(data.place.name);
+                        $('p[id=place_info_placeAddress]').text(data.place.address);
+
+
+                        let categorySize = data.categoryList.length;
+                        let gatheringSize = data.placeGatheringDtos.length;
+                        let imageSize = data.placeImages.length;
+                        let starSize = data.place.star;
+                        let emptyStarSize = 5-data.place.star;
+
+                        console.log("카테고리 사이즈는"+categorySize);
+                        console.log("카테고리 이름:"+data.categoryList[0].tagName);
+                        function categoryDOM(categoryList){
+                            let tr = '';
+
+                            tr+=`<tr>`;
+                            for (let i=0;i<categorySize;i++) {
+                                tr += `    <button class="btn btn-accent rounded-[50px] btn-sm btn-outline mb-1" onclick="location.href='/category?id=${categoryList[i].id}'">${categoryList[i].tagName}</button>`
+                            }
+
+                            tr+=`</tr>`;
+                            console.log(tr);
+                            document.getElementById("place_info_categoryList").innerHTML=tr;
+                        }
+
+                        function gatheringDOM(gatheringList){
+                            let tr = '';
+
+                            tr+=`<tr>`;
+                            for (let i=0;i<gatheringSize;i++){
+                                tr +=`    <button class="btn btn-accent rounded-[50px] btn-sm btn-outline mb-1" onclick="location.href='/gathering/${gatheringList[i].id}'">${gatheringList[i].title}</button>`
+                            }
+                            tr+=`</tr>`;
+                            console.log(tr);
+                            document.getElementById("place_info_gatheringList").innerHTML=tr;
+                        }
+
+                        function starDOM(star){
+                            let tr = '';
+
+                            tr+=`<tr>`;
+                            for (let i=0;i<starSize;i++){
+                                tr +=`    <img src="/images/star.png" class="star">`
+                            }
+                            tr+=`</tr>`;
+
+                            tr+=`<tr>`;
+                            for (let i=0;i<emptyStarSize;i++){
+                                tr +=`    <img src="/images/empty_star.png" class="star">`
+                            }
+                            tr+=`</tr>`;
+                            console.log(tr);
+                            document.getElementById("star_box").innerHTML=tr;
+                        }
+
+                        function imageDOM(placeImages){
+                            let ul='';
+                            ul+=`<ul class="bxslider">`;
+                            ul+=`    <tr>`;
+                            for (let i=0;i<imageSize;i++){
+                                ul+=`        <li><img class="usr_img" src="/placeimg/${placeImages[i].filePath}"></li>`
+                            }
+                            ul+=`    </tr>`;
+                            ul+=`</ul>`;
+                            document.getElementById("place_info_imageList").innerHTML=ul;
+                        }
+
+                        categoryDOM(data.categoryList);
+                        gatheringDOM(data.placeGatheringDtos);
+                        imageDOM(data.placeImages);
+                        starDOM(data.place.star);
+
+                        document.getElementById("detail_popup_layer").style.display='block'
+                        slider();
+                    }
+                });
+
+            });
+
+
+            let infowindow = new kakao.maps.InfoWindow({
+                content: '<div style="width:150px;text-align:center;padding:6px 0;">' + allPlaceList[i].name + '</div>'
+            });
+
+
+
+            infowindow.open(map, marker);
+
+            // kakao.maps.event.addEventListener(marker, 'mouseout', function () {
+            //     // 마커에 마우스아웃 이벤트 발생하면 인포윈도우 제거
+            //     infowindow.close();
+            //
+            // });
+
+            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다.
+
+        })
+    }
+
+        function locationLoadSuccess(pos) {
+            let currentPos = new kakao.maps.LatLng(
+                pos.coords.latitude,
+                pos.coords.longitude
+            );
+
+            map.panTo(currentPos);
+            map.setLevel(4);
+        }
+
+        function getCurrentPosBtn() {
+            navigator.geolocation.getCurrentPosition(locationLoadSuccess, null);
+            console.log("현재위치 버튼 클릭됨");
+        }
+
+        kakao.maps.event.addListener(starbucksHondaeMarker, 'click', function () {
+            document.getElementById("detail_popup_layer").style.display = 'block'
+            slider();
+            console.log("스타벅스 클릭");
+        });
+
+        kakao.maps.event.addListener(starbucksHondaeMarker, 'click', function () {
+
+        });
+
+        // 마커 클릭시 장소명 표출하는 인포윈도우
+
+        let infowindow = new kakao.maps.InfoWindow({zIndex: 1});
+
+        // 장소 검색 객체를 생성
+        var ps = new kakao.maps.services.Places();
+
+        // ------------------------ 키워드 검색 ----------
+
+        let markers = [];
+
+
+        function searchPlaces() {
+            // input에 들어가는 키워드의 value값이 keyword
+            let keyword = document.getElementById('keyword').value;
+
+            // keyword가 공백이면 alert 뜨도록
+//         if(!keyword.replace(/^\s+|\s+$/g,'')){
+//             alert('키워드를 입력해주세요!');
+//             return false;
+//             // 잘 작동중
+//         }
+
+            // if(!keyword.replace(/^\s+|\s+$/g,'')){
+            //     alert('키워드를 입력해주세요!');
+            //     return false;
+            //     // 잘 작동중
+            // }
+
+            ps.keywordSearch(keyword, placesSearchCB); // keyword = 해운대맛집 => keywordSearch("해운대맛집",placeSearchCB);
+            console.log("ps.keywordSearch 작동중")
+        }
+
+        // 키워드로 검색 완료시 호출되는 콜백함수
+        // function placesSearchCB(data, status, pagination){
+        //     console.log("placeSearhCB들어옴")
+        //     if(status === kakao.maps.services.Status.OK){
+        //         console.log("placeSearchCB status 일치");
+        //         // 검색된 장소 위치를 기준으로 지도 범위 재설정하기 위해
+        //         // LatLngBounds 객체에 좌표를 추가한다.
+        //
+        //         displayPlaces(data);
+        //
+        //         displayPagination(pagination);
+        //
+        //         console.log("displayplaces 통과");
+        //         // boundss와 data 개수에 따라 마커 표시하고 bound에 추가하는 코드는
+        //         // SearchListPlaces 함수로 넣어서 관리
+        //         // let bounds = new kakao.maps.LatLngBounds();
+        //
+        //         // for(let i=0; i<data.length;i++){
+        //         //     displayMarker(data[i]);
+        //         //     bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
+        //         // }
+        //
+        //         //  검색된 장소 위치를 기준으로 지도 범위를 재설정 -> setBounds
+        //         // map.setBounds(bounds);
+        //     }
+        // }
+
+        // function getListItem(index, places){
+        //     let el = document.createElement('li'),
+        //
+        //         itemStr = '<span class="markerbg marker_' + (index+1) + '"></span>' +
+        //             '<div class="info">' +
+        //             '   <h5>' + places.place_name + '</h5>';
+        //
+        //     if(places.address_name){
+        //         itemStr += '    <span class="jibun gray">'+places.address_name+'</span>';
+        //         console.log("주소는 : "+places.address_name);
+        //     }
+        //
+        //     // 아이템 내 button 추가
+        //     // itemStr += '    <a class="btn btn-secondary btn-sm" onclick='+ hrefLink() +'>장소 등록</a>'
+        //     itemStr += '    <a class="btn btn-secondary btn-sm" href=/map/addPlace/'+ encodeURIComponent(places.place_name) +'/'+encodeURIComponent(places.address_name)+'>장소 등록</a>'
+        //     itemStr += '</div>'
+        //
+        //     el.innerHTML = itemStr;
+        //     el.className = 'item';
+        //
+        //     return el;
+        // }
+
+        function addMarker(position, idx, title) {
+            var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
+                imageSize = new kakao.maps.Size(36, 37),  // 마커 이미지의 크기
+                imgOptions = {
+                    spriteSize: new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
+                    spriteOrigin: new kakao.maps.Point(0, (idx * 46) + 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
+                    offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
+                },
+                markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
+                marker = new kakao.maps.Marker({
+                    position: position, // 마커의 위치
+                    image: markerImage
+                });
+            console.log(marker);
+            console.log("가게이름은" + title);
+            displayInfowindow(marker, title);
+            // 지도 위에 마커 표출
+            marker.setMap(map);
+            // 배열에 생성된 마커를 추가한다.
+            markers.push(marker);
+
+            return marker;
+        }
+
+
+        // 지도 위에 표시되는 마커를 모두 제거
+        function removeMarker() {
+            for (let i = 0; i < markers.length; i++) {
+                markers[i].setMap(null);
+            }
+            markers = [];
+        }
+
+        // infowindow에 장소명을 표시한다.
+        function displayInfowindow(marker, title) {
+            let content = '<div style="padding:5px;z-index:1;">' + title + '</div>';
+
+            infowindow.setContent(content);
+            infowindow.open(map, marker);
+        }
+
+        function removeAllchildNodes(el) {
+            while (el.hasChildNodes()) {
+                el.removeChild(el.lastChild);
+            }
+        }
+
+        function displayPlaces(places) {
+            let listEl = document.getElementById('placeList'),
+                menuEl = document.getElementById('search_wrap'),
+                fragment = document.createDocumentFragment(),
+                bounds = new kakao.maps.LatLngBounds();
+            let listStr = '';
+
+            // 검색 결과 목록에 추가된 항목들을 제거한다.
+            removeAllchildNodes(listEl);
+
+            // 지도에 표시되고 있는 마커를 제거한다.
+            removeMarker();
+
+            for (let i = 0; i < places.length; i++) {
+                console.log(places[i]);
+
+            }
+
+            for (let i = 0; i < places.length; i++) {
+                console.log(places[i]);
+                let placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
+                    marker = addMarker(placePosition, i, places[i].place_name),
+                    itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다
+
+                bounds.extend(placePosition);
+
+                console.log("여기까지 오나");
+                console.log(marker);
+                (function () {
+                    console.log("익명함수 실행해보기");
+                })();
+
+                (function (marker, title) {
+
+                    // kakao.maps.event.addListener(marker, 'mouseover', function() {
+                    //     displayInfowindow(marker, title);
+                    // });
+                    //
+                    // kakao.maps.event.addListener(marker, 'mouseout', function() {
+                    //     infowindow.close();
+                    // });
+
+
+                    itemEl.onmouseover = function () {
+                        displayInfowindow(marker, title);
+                        console.log(title);
+                    };
+
+                    itemEl.onmouseout = function () {
+                        infowindow.close();
+                    };
+                })(marker, places[i].place_name);
+
+                fragment.appendChild(itemEl);
+                console.log("반복문 도는지 확인");
+            }
+
+            console.log(fragment);
+            listEl.appendChild(fragment);
+            console.log(listEl);
+            menuEl.scrollTop = 0;
+            // 검색된 장소 위치를 기준으로 지도 범위 설정
+            map.setBounds(bounds);
+        }
+
+        function displayPagination(pagination) {
+            var paginationEl = document.getElementById('pagination'),
+                fragment = document.createDocumentFragment(),
+                i;
+
+            // 기존에 추가된 페이지번호를 삭제합니다
+            while (paginationEl.hasChildNodes()) {
+                paginationEl.removeChild(paginationEl.lastChild);
+            }
+
+            for (i = 1; i <= pagination.last; i++) {
+                var el = document.createElement('a');
+                el.href = "#";
+                el.innerHTML = i;
+
+                if (i === pagination.current) {
+                    el.className = 'on';
+                } else {
+                    el.onclick = (function (i) {
+                        return function () {
+                            pagination.gotoPage(i);
+                        }
+                    })(i);
+                }
+
+                fragment.appendChild(el);
+            }
+            paginationEl.appendChild(fragment);
+        }
+
+</script>
+
+<!--장소 상세 팝업창 레이아웃 html-->
+<div id="detail_popup_layer">
+    <div id="popup_box1">
+        <!--팝업 컨텐츠 영역-->
+        <div id="popup_contents ">
+            <th:block th:replace="popup/detailPopup"></th:block>
+        </div>
+    </div>
+</div>
+</body>
+<script>
+
+</script>
+</html>
+<!--git remote update  -> git checkout 해당 브랜치 -> git merge  -->
+<!-- -->
diff --git a/your-anmok/src/main/resources/templates/map/searchMap.html b/your-anmok/src/main/resources/templates/map/searchMap.html
index 04f1afe7..14a7bb13 100644
--- a/your-anmok/src/main/resources/templates/map/searchMap.html
+++ b/your-anmok/src/main/resources/templates/map/searchMap.html
@@ -5,22 +5,74 @@
     <title>당신의 안목 검색페이지</title>
 
     <style>
+        /*.map_wrap {position:relative;width:100%;height:500px;}*/
+        @font-face {
+            font-family: 'Cafe24SsurroundAir';
+            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
+            font-weight: normal;
+            font-style: normal;
+        }
+
+        @font-face {
+            font-family: 'Cafe24Ssurround';
+            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
+            font-weight: normal;
+            font-style: normal;
+        }
+
+
         #my_location_button{position: absolute;bottom:-150px;right:0;z-index: 100;}
 
         /*슬라이드 버튼 관련 CSS*/
-        #hamburger_button {
+        /*#hamburger_button {*/
+        /*    cursor:pointer;*/
+        /*    position:absolute;*/
+        /*    top:0px;*/
+        /*    left:0px;*/
+        /*    z-index: 200;*/
+        /*}*/
+
+        html > body .categoryBtn {
+            /*all: unset;*/
+
+            background: #7FD1AE;
+            border-color: #7FD1AE;
+            border-right-color: white;
+            font-size:20px;
+            font-family: 'Cafe24SsurroundAir';
+        }
+
+        #categoryCard {
+            all: unset;
             cursor:pointer;
-            position:absolute;
-            top:0px;
-            left:0px;
+            display: flex;
+            flex-direction: row;
+            position:fixed;
+            top: 0px;
+            left: 0px;
+            width: 300px;
+            z-index: 200;
+        }
+
+
+        /* 추가된 부분 */
+        .hamburger_line {
+            display: inline-block;
+            background:black;
+            margin: 2px !important;
+            width:56px;
+            height:7px;
+            border-radius:2px;
+            box-shadow:0 1px 3px rgba(0,0,0,.5);
+            position:relative;
             z-index: 200;
         }
 
         .left_sub_menu {
             position: fixed;
-            top: 50px;
+            top: 0px;
             width: 300px;
-            z-index: 10;
+            z-index: 210;
             left: 0px;
             background: white;
             border-right: 1px solid rgba(0, 0, 0, 0.07);
@@ -47,19 +99,19 @@
             font-size: 17px;
             font-weight: 600;
             padding: 20px 0px 8px 14px;
-            border-bottom: 1px solid #e1e1e1;
+            /*border-bottom: 1px solid #e1e1e1;*/
         }
 
         .sub_menu>div {
             padding-bottom: 4px;
             border-bottom: 3px solid #797979;
-            margin-top: 30px;
-            font-size: 21px;
+            margin-top: 100px;
             font-weight: 600;
             color: #333;
             margin-left: 10px;
             margin-right: 10px;
-            font-family: 'NotoKrB';
+            font-size:20px;
+            font-family: 'Cafe24SsurroundAir';
             line-height: 35px;
         }
 
@@ -71,15 +123,29 @@
             margin-right: 20px;
         }
 
-        .sub_menu>.big_menu>.small_menu li {
+        .sub_menu>.big_menu a {
             color: #333;
-            font-size: 14px;
             font-weight: 600;
-            border-bottom: 0px solid #e1e1e1;
+            /*border-bottom: 0px solid #e1e1e1;*/
             margin-left: 14px;
             padding-top: 8px;
+            font-size: 17px;
+            font-family: 'Cafe24SsurroundAir';
+
+        }
+
+
+        html > body .categoryBtn:hover {
+            /*all: unset;*/
+
+            background: #00C385;
+            border-color: #00C385;
+            border-right-color: white;
+            font-size:20px;
+            font-family: 'Cafe24SsurroundAir';
         }
 
+
         .big_menu {
             cursor: pointer;
         }
@@ -209,7 +275,14 @@
     <div id="menu">
         <div class="close"></div>
 
-        <a id="hamburger_button" class="fas fa-bars fa-3x"></a>
+        <div id="categoryCard" class="d-flex flex-row btn-group my-3 " role="group">
+            <button id="hamburger_button" type="button" class="categoryBtn btn btn-secondary text-nowrap center-block">
+                <!--                <div class="fas fa-bars fa-2x"></div>-->
+                <i class="fas fa-bars fa-2x"></i>
+            </button>
+            <button type="button" class="categoryBtn btn btn-secondary text-nowrap mr-3"  th:text="${categoryName}"></button>
+        </div>
+
         <input type="hidden" id="isAuthorized" th:value="${#authentication.getPrincipal() != 'anonymousUser'}?'Y':'N'"/>
 
         <div class="left_sub_menu">
@@ -224,7 +297,8 @@
                     <!--                    </div>-->
                 </div>
                 <ul class="big_menu">
-                    <li><a href="/category/home">카테고리</a></li>
+                    <li><a href="/category/home">🏞 카테고리</a></li>
+
                     <!--                    <ul class="small_menu">-->
                     <!--                        <li><a href="#">소메뉴1-1</a></li>-->
                     <!--                        <li><a href="#">소메뉴1-2</a></li>-->
@@ -233,14 +307,16 @@
                     <!--                    </ul>-->
                 </ul>
                 <ul class="big_menu">
-                    <li><a href="/gathering/list">번개모임</a></li>
+                    <li><a href="/gathering/list">⚡️ 번개모임</a></li>
+
                     <!--                    <ul class="small_menu">-->
                     <!--                        <li><a href="#">소메뉴2-1</a></li>-->
                     <!--                        <li><a href="#"></a>소메뉴2-2</a></li>-->
                     <!--                    </ul>-->
                 </ul>
                 <ul class="big_menu">
-                    <li><a href="/mypage">마이페이지</a></li>
+                    <li><a sec:authorize="isAuthenticated()" href="/mypage">🛍 마이페이지</a></li>
+
                 </ul>
             </div>
         </div>