diff --git a/README.md b/README.md index e1c5eae..23ed625 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,12 @@ ## 프로젝트 소개 -ECHub (카페 지도 & 해시태그 추천 사이트) 이대역 주변의 카페를 대상으로 한 지도 페이지에서 해시태그, 카페명으로 카페를 검색할 수 있고, 카페 리스트에서 간단한 카페의 운영시간, 위치, 특이사항, 대표 메뉴등을 알 수 있다. 자세한 내용을 클릭하면 카페의 기본 정보와 이용자 리뷰도 확인 할 수 있다. +ECHub (Ewha Cafe Hub) +이화여대 주변 카페 지도 사이트. 카페 정보와 추천 기능이 제공된다. +웹페이지에서 해시태그, 카페명으로 카페를 검색할 수 있고, 해시태그 검색을 통해 원하는 조건에 맞는 카페 리스트를 추천받을 수 있다. 카페 리스트에서 카페의 운영시간, 위치, 특이사항, 대표 메뉴 등 간단한 정보를 알 수 있다. 또한 지도 마커에 마우스를 올리면 카페 이름 및 영업 정보가 표시되며, 클릭 시 상세페이지로 들어간다. 상세페이지에서는 카페의 기본 정보와 이용자 리뷰를 확인할 수 있다. + +[ECC 1팀 카페지도 (https://ewhacafeuhub.netlify.app) -[ECC 1팀 카페지도 (eccproject1.netlify.app)](https://eccproject1.netlify.app/) ## 팀 소개 ### 팀명: EP.1 (ECC Project team 1) @@ -33,6 +36,8 @@ ECHub (카페 지도 & 해시태그 추천 사이트) 이대역 주변의 카페 [Figma](https://www.figma.com/file/QWNPoMThFe3JL2yZ4vckKn/ECHUB?type=design&node-id=0-1&mode=design&t=zUJ4ESH3nYinGoko-0) + + ## 커밋 메시지 작성 규칙 메시지 구조 : ` : ` - 타입은 소문자로 diff --git a/frontend/package.json b/frontend/package.json index 0cbe57c..8f788c6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,7 +22,7 @@ "node-emoji": "^2.1.3", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.22.1", + "react-router-dom": "^6.21.3", "react-kakao-maps-sdk": "^1.1.26", "react-scripts": "^5.0.1", "sort-by": "^1.2.0", diff --git a/frontend/src/App.css b/frontend/src/App.css index 52843b1..dfb8dcd 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -16,99 +16,6 @@ main { height: 100vh; } - -Resources fieldset { - width: 98%; - height: 300px; -} -header { - width: 100%; - height: 109px; - background-color: #224932; - border-bottom: 5px solid black; -} - -/* 로고 */ -#logo { - float: left; - width: 50px; - height: 65px; - padding: 20px; - color: white; -} - -/* 배너 이름 */ -#siteName { - color: white; - font-family: 'EHWA'; - font-size: 15px; - font-weight: 400; - line-height: 30px; - letter-spacing: 0em; - text-align: center; - padding-top: 40px; -} - -/* button { - padding: 10px; - cursor: pointer; - background: #D9D9D9; - - } - - #loginPopup { - display: none; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: 20px; - z-index: 1000; - background: white; - border: 1px solid black; - } */ - -/* 사이드 영역 */ - -aside { - width: 30%; - max-width: 350px; - border-right: 5px solid black; - padding: 20px; - overflow-y: auto; - flex-shrink: 0; - max-height: 800px; -} - -#side { - width: 98%; - padding: 0; - margin: 0 auto; -} - -/* 카페 검색 */ -form { - height: auto; -} - -#cafe-search { - width: 98%; - height: 50px; - padding: 8px; - border-radius: 10px; - background: #fafafaed; -} - -/* 해시태그 */ -#hashtags { - background: #d9d9d9; - width: 98%; - height: 50px; - border-radius: 10px; - margin-top: 10px; - font-size: 15px; -} - /* 카페 리스트 */ .cafeList { margin-left: 0; @@ -206,18 +113,6 @@ li { border: 2px solid #333; } -/* -------------- */ -/* 지도 영역 */ - -section { - flex: 1; -} - -/* Resources fieldset { - width: 98%; - height: 300px; -} */ - /* 추가된 스타일 */ #loginPopup { display: none; @@ -259,58 +154,3 @@ section { color: #fff; border: none; } - -/* -------------- */ -/* 지도 영역 */ - -section { - width: 70%; - flex: 1; -} - -.map_wrap { - position: relative; - overflow: hidden; - width: 100%; - height: 100vh; -} - -.radius_border { - border: 1px solid #919191; - border-radius: 5px; -} -.custom_zoomcontrol { - position: absolute; - top: 10px; - right: 10px; - width: 36px; - height: 80px; - overflow: hidden; - z-index: 1; - background-color: #f5f5f5; -} -.custom_zoomcontrol span { - display: block; - width: 36px; - height: 40px; - text-align: center; - cursor: pointer; -} -.custom_zoomcontrol span img { - width: 15px; - height: 15px; - padding: 12px 0; - border: none; -} -.custom_zoomcontrol span:first-child { - border-bottom: 1px solid #bfbfbf; -} - -.InfoWindow { - padding: 2px; - margin: 2px; - color: #000; - text-align: center; - line-height: 1.5; - white-space: nowrap; /* 텍스트가 가로로 길 경우 줄 바꿈 방지 */ -} diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index f9a43f3..972ee59 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,6 +1,22 @@ +import { Route, BrowserRouter as Router, Routes } from 'react-router-dom'; import './App.css'; +import { CardInfoContainer } from './cardInfo'; import { Main } from './main'; export default function App() { - return
; + // + // + // + // + // + // ; + + return ( + + + } /> + } /> + + + ); } diff --git a/frontend/src/Aside.css b/frontend/src/Aside.css deleted file mode 100644 index 99c8bde..0000000 --- a/frontend/src/Aside.css +++ /dev/null @@ -1,224 +0,0 @@ -.App { - text-align: center; - } - - .App-logo { - height: 40vmin; - pointer-events: none; - } - - @media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } - } - - .App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; - } - - .App-link { - color: #61dafb; - } - - @keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - * { - margin:0; - padding:0; - height: 100vh; - } - body{ - overflow: hidden; - } - /*body { - - - overflow: hidden; - }*/ - - /*main { - display: flex; - flex: 1; - }*/ - - /* 헤더 영역 */ - - .header { - width: 100%; - height: 109px; - background-color:#224932; - border-bottom: 5px solid black; - } - - /* 로고 */ - #logo { - float: left; - width: 50px; - height: 65px; - padding: 20px; - color: white; - } - - /* 배너 이름 */ - #siteName { - color: white; - font-family: 'EHWA'; - font-size: 15px; - font-weight: 400; - line-height: 30px; - letter-spacing: 0em; - text-align: center; - padding-top: 40px; - height :30px; - } - - /* button { - padding: 10px; - cursor: pointer; - background: #D9D9D9; - } - #loginPopup { - display: none; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: 20px; - z-index: 1000; - background: white; - border: 1px solid black; - } */ - - - - /* 사이드 영역 */ - - aside { - width: 30%; - max-width: 350px; - border-right: 5px solid black; - padding: 20px; - overflow-y: auto; - flex-shrink: 0; - max-height:800px; - } - - #side { - width: 98%; - padding: 0; - margin: 0 auto; - } - - /* 카페 검색 */ - form { - height: auto; - } - - #cafe-search { - width: 98%; - height: 50px; - padding: 8px; - border-radius: 10px; - background: #FAFAFAED; - } - - /* 해시태그 */ - #hashtags { - background: #D9D9D9; - width: 98%; - height: 50px; - border-radius: 10px; - margin-top: 10px; - font-size: 15px; - } - - /* 카페 리스트 */ - .cafeList { - margin-left: 0; - height: auto; - } - - ul, li { - list-style: none; - padding: 0; - margin: 0; - height: auto; - } - #cafename{ - font-size: 15px; - } - .container{ - width: 100px; - height: 100px; - } - .flex-container{ - display: flex; - margin: 5px; - border:1px solid lightgray; - border-radius: 10px; - background-color: rgb(85, 85, 85); - font-size: 24px; - } - /*.flex-container.row{flex-direction: row;}*/ - .cafe-box { - background-color: #fff; - margin:5px; - height: 300px; - padding: 20px; - border: 2px solid #333; - border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - text-align: center; - display: flex; flex-direction: column; justify-content: center; - } - - .cafe-name { - font-size: 24px; - font-weight: bold; - color: #333; - } - - .operating-hours,.operating-state,.menu { - font-size: 15px; - color: #666; - - } - - /*Resources - fieldset { - width: 98%; - height: 300px; - }*/ - - /* -------------- */ - /* 지도 영역 */ - - /*section { - flex: 1; - }*/ - - /* 추가된 스타일 */ - - - /* - @use postcss-color-function; - @use postcss-nested; - @import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900'); - */ - - - /* Base styling */ \ No newline at end of file diff --git a/frontend/src/Aside.js b/frontend/src/Aside.js deleted file mode 100644 index 6c9f774..0000000 --- a/frontend/src/Aside.js +++ /dev/null @@ -1,50 +0,0 @@ -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( - - ); -} - -export default App; \ No newline at end of file diff --git a/frontend/src/cardInfo/CardInfo.jsx b/frontend/src/cardInfo/CardInfo.jsx index ce31f7c..146238b 100644 --- a/frontend/src/cardInfo/CardInfo.jsx +++ b/frontend/src/cardInfo/CardInfo.jsx @@ -4,50 +4,40 @@ import './cardInfo.css'; export function CardInfo() { return (
- back -
카페명
+ back +
카페명2
cafeimg2
-
+
+
#포토존
#포토존
#포토존
#포토존
-
#포토존
평일 12:0~22:00 / 주말 11:00~22:00
- {/* cof - */} -
평점
- -
-
-

리뷰

-

멀티탭이 많아요

-
- - {/*
+ {/* cof + */} +
평점
+
+
+

리뷰

+

멀티탭이 많아요

+
+ {/*

리뷰

멀티탭이 많아요

*/} - -
- - - +
- - - +
menu menu menu menu -
-
); } diff --git a/frontend/src/cardInfo/CardInfoContainer.jsx b/frontend/src/cardInfo/CardInfoContainer.jsx new file mode 100644 index 0000000..07438d0 --- /dev/null +++ b/frontend/src/cardInfo/CardInfoContainer.jsx @@ -0,0 +1,17 @@ +import { Header } from '../header'; +import KakaoMap from '../map/KakaoMap.jsx'; +import { CardInfo } from './CardInfo.jsx'; + +export function CardInfoContainer() { + return ( + +
+
+ +
+ +
+
+ + ); +} diff --git a/frontend/src/cardInfo/cardInfo.css b/frontend/src/cardInfo/cardInfo.css index e1e8837..f66344b 100644 --- a/frontend/src/cardInfo/cardInfo.css +++ b/frontend/src/cardInfo/cardInfo.css @@ -1,116 +1,110 @@ - .cafeinfo-box { - background-color: #fff; - margin: 5px; - height: 1050px; - padding: 20px; - border: 2px solid #333; - border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - } - .review-box{ - background-color: #7AC66D; - width: 230px; - height: 200px; - padding: 20px; - border: 2px solid #333; - border-radius: 10px; - - } - #review-name{ - position: relative; - font-size: 23px; - top:0px; - left: -70px; - height: 30px; - font-weight: bold; - - } - .review-wrap{ - display:flex; - flex-wrap:wrap; - justify-content: center; - } - .review{ - position: relative; - border: 2px solid #000000; - background-color: #ffffff; - font-size: 15px; - color: #000000; - padding: 8px; - top:0px; - margin: 5px; - width: 200px; - height: 20px; - border-radius: 10px; - font-weight: lighter; - } - h3{ - position:relative; - font-weight:lighter; - font-size: 18px; - width: 50px; - height: 20px; - left: 0px; - } - h4{ - position:relative; - font-weight: lighter; - font-size:15px; - width: 200px; - height: 20px; - left: 20px; - top: -16px; - } - .hash-warp { - display: flex; - flex-wrap: wrap; - justify-content: center; - } - .hash { - border: 2px solid #276830; - background-color: #419764; - font-size: 15px; - color: #fff; - padding: 8px; - position: relative; - top: -20px; - margin: 5px; - width: 90px; - height: 18px; - border-radius: 10px; - font-weight: lighter; - } - #cafeinfoimg { - position: relative; - left: 0px; - top: -20px; - width: 270px; - height: 270px; - border-radius: 30px; - border: 2px solid #333; - } - #back_icon{ - position:relative; - left:0px; - top:0px; - width:30px; - height:30px; - - } - #cof-icon{ - - position:relative; - width:10px; - height:10px; - left:0px; - top:10px; - - } + background-color: #fff; + margin: 5px; + height: 1050px; + padding: 20px; + border: 2px solid #333; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; +} +.review-box { + background-color: #7ac66d; + width: 230px; + height: 200px; + padding: 20px; + border: 2px solid #333; + border-radius: 10px; +} +#review-name { + position: relative; + font-size: 23px; + top: 0px; + left: -70px; + height: 30px; + font-weight: bold; +} +.review-wrap { + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.review { + position: relative; + border: 2px solid #000000; + background-color: #ffffff; + font-size: 15px; + color: #000000; + padding: 8px; + top: 0px; + margin: 5px; + width: 200px; + height: 20px; + border-radius: 10px; + font-weight: lighter; +} +h3 { + position: relative; + font-weight: lighter; + font-size: 18px; + width: 50px; + height: 20px; + left: 0px; +} +h4 { + position: relative; + font-weight: lighter; + font-size: 15px; + width: 200px; + height: 20px; + left: 20px; + top: -16px; +} +.hash-warp { + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.hash { + border: 2px solid #276830; + background-color: #419764; + font-size: 15px; + color: #fff; + padding: 8px; + position: relative; + top: -20px; + margin: 5px; + width: 90px; + height: 18px; + border-radius: 10px; + font-weight: lighter; +} +#cafeinfoimg { + position: relative; + left: 0px; + top: -20px; + width: 270px; + height: 270px; + border-radius: 30px; + border: 2px solid #333; +} +#back_icon { + position: relative; + left: 0px; + top: 0px; + width: 30px; + height: 30px; +} +#cof-icon { + position: relative; + width: 10px; + height: 10px; + left: 0px; + top: 10px; +} #cafe-name { font-size: 24px; @@ -123,24 +117,23 @@ } #operating-hours, -#operating-state{ +#operating-state { position: relative; border: 2px solid #276830; background-color: #d8e2dc; top: -10px; - height:30px; + height: 30px; margin: 5px; left: 0px; font-size: 17px; color: #333; } -#menu{ +#menu { + position: relative; + top: 20px; - position:relative; - top:20px; - font-size: 17px; - color:#333; + color: #333; } .menulist-warp { display: flex; @@ -148,18 +141,15 @@ justify-content: center; } -#menulist{ - +#menulist { position: relative; left: 0px; - top: 0px; + top: 0px; width: 100px; height: 100px; - + padding: 10px; - margin:5px; + margin: 5px; border-radius: 30px; border: 1px solid #333; - } - \ No newline at end of file diff --git a/frontend/src/cardInfo/index.js b/frontend/src/cardInfo/index.js index 7ee39e1..b97066b 100644 --- a/frontend/src/cardInfo/index.js +++ b/frontend/src/cardInfo/index.js @@ -1 +1,2 @@ export * from './CardInfo.jsx'; +export * from './CardInfoContainer.jsx'; diff --git a/frontend/src/hashtags/hashtags.css b/frontend/src/hashtags/hashtags.css index 7e0eaa6..c551941 100644 --- a/frontend/src/hashtags/hashtags.css +++ b/frontend/src/hashtags/hashtags.css @@ -1,8 +1,9 @@ +/* 해시태그 */ #hashtags { - background: #d9d9d9; - width: 98%; - height: 50px; - border-radius: 10px; - margin-top: 10px; - font-size: 15px; - } \ No newline at end of file + background: #d9d9d9; + width: 98%; + height: 50px; + border-radius: 10px; + margin-top: 10px; + font-size: 15px; +} diff --git a/frontend/src/header/header.css b/frontend/src/header/header.css index 82c6c97..d261282 100644 --- a/frontend/src/header/header.css +++ b/frontend/src/header/header.css @@ -1,28 +1,48 @@ +/* 헤더 영역 */ + header { - width: 100%; - height: 109px; - background-color: #224932; - border-bottom: 5px solid black; - } + width: 100%; + height: 109px; + background-color: #224932; + border-bottom: 5px solid black; +} + +/* 로고 */ +#logo { + float: left; + width: 50px; + height: 65px; + padding: 20px; + color: white; +} + +/* 배너 이름 */ +#siteName { + color: white; + font-family: 'EHWA'; + font-size: 15px; + font-weight: 400; + line-height: 30px; + letter-spacing: 0em; + text-align: center; + padding-top: 40px; +} + +/* button { + padding: 10px; + cursor: pointer; + background: #D9D9D9; - /* 로고 */ - #logo { - float: left; - width: 50px; - height: 65px; - padding: 20px; - color: white; } - /* 배너 이름 */ - #siteName { - color: white; - font-family: 'EHWA'; - font-size: 15px; - font-weight: 400; - line-height: 30px; - letter-spacing: 0em; - text-align: center; - padding-top: 40px; - } - \ No newline at end of file + #loginPopup { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 20px; + z-index: 1000; + background: white; + border: 1px solid black; + } */ diff --git a/frontend/src/index.html b/frontend/src/index.html deleted file mode 100644 index f042a4c..0000000 --- a/frontend/src/index.html +++ /dev/null @@ -1,92 +0,0 @@ - - - - - - - ECC 1팀 카페지도 - - - - - -
- - -
- - - -
-

Ewha w. univ cafe Map

-
- -
- -
- - - -
- - -
- - -
-
- -
- -
- - - \ No newline at end of file diff --git a/frontend/src/main/Main.jsx b/frontend/src/main/Main.jsx index ee01859..ab08f50 100644 --- a/frontend/src/main/Main.jsx +++ b/frontend/src/main/Main.jsx @@ -1,10 +1,8 @@ -// import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import { Header } from '../header'; -import { SideBar } from '../sideBar'; import KakaoMap from '../map/KakaoMap.jsx'; +import { SideBar } from '../sideBar'; // import {CardInfo} from '../cardInfo'; -import "./main.css"; - +// import "./main.css"; export function Main() { return ( @@ -18,15 +16,6 @@ export function Main() {
- - {/* - - - - - - */} - ); } diff --git a/frontend/src/main/main.css b/frontend/src/main/main.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/map/KakaoMap.jsx b/frontend/src/map/KakaoMap.jsx index 6878377..a003ef1 100644 --- a/frontend/src/map/KakaoMap.jsx +++ b/frontend/src/map/KakaoMap.jsx @@ -1,38 +1,41 @@ // eslint-disable-next-line import/no-extraneous-dependencies +import { useEffect, useRef, useState } from 'react'; import { Map, MapMarker } from 'react-kakao-maps-sdk'; -import { useRef, useState, useEffect } from 'react'; +import './map.css'; import useKakaoLoader from './useKakaoLoader.jsx'; export default function KakaoMap() { useKakaoLoader(); - // eslint-disable-next-line - const mapRef = useRef(null); /* prettier-ignore */ + const mapRef = useRef(null); const [isOpen, setIsOpen] = useState(false); - const [info, setInfo] = useState(); const [markers, setMarkers] = useState([]); const [map, setMap] = useState(); + const [{ lat, lng }, setLatLng] = useState({ lat: 37.559716, lng: 126.945468 }); + console.log(setLatLng); + + /* 지도 확대, 축소 버튼 */ + const zoomIn = () => { + const map = mapRef.current; + if (!map) return; + map.setLevel(map.getLevel() - 1); + }; + + const zoomOut = () => { + const map = mapRef.current; + if (!map) return; + map.setLevel(map.getLevel() + 1); + }; /* 장소 검색 */ useEffect(() => { if (!map) return; const ps = new window.kakao.maps.services.Places(); - // 키워드 검색 - ps.keywordSearch('카페', placesSearchCB, { - radius: 1000, - location: new window.kakao.maps.LatLng(37.559716, 126.945468), - }); - // 카테고리 검색 - 카페: CE7 - ps.categorySearch('CE7', placesSearchCB, { - radius: 1000, - location: new window.kakao.maps.LatLng(37.559716, 126.945468), - }); - // 키워드 검색 완료 시 호출되는 콜백함수 - function placesSearchCB(data, status, pagination) { + const placesSearchCB = (data, status) => { if (status === window.kakao.maps.services.Status.OK) { // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해 // LatLngBounds 객체에 좌표를 추가합니다 @@ -40,7 +43,6 @@ export default function KakaoMap() { const markers = []; for (let i = 0; i < data.length; i++) { - // @ts-ignore markers.push({ position: { lat: data[i].y, @@ -48,7 +50,6 @@ export default function KakaoMap() { }, content: data[i].place_name, }); - // @ts-ignore bounds.extend(new window.kakao.maps.LatLng(data[i].y, data[i].x)); } setMarkers(markers); @@ -56,20 +57,19 @@ export default function KakaoMap() { // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다 map.setBounds(bounds); } - } - }, [map]); + }; - /* 지도 확대, 축소 버튼 */ - const zoomIn = () => { - const map = mapRef.current; - if (!map) return; - map.setLevel(map.getLevel() - 1); - }; - const zoomOut = () => { - const map = mapRef.current; - if (!map) return; - map.setLevel(map.getLevel() + 1); - }; + // 키워드 검색 + ps.keywordSearch('카페', placesSearchCB, { + radius: 1000, + location: new window.kakao.maps.LatLng(lat, lng), + }); + // 카테고리 검색 - 카페: CE7 + ps.categorySearch('CE7', placesSearchCB, { + radius: 1000, + location: new window.kakao.maps.LatLng(lat, lng), + }); + }, [map, lat, lng]); return (
@@ -77,8 +77,8 @@ export default function KakaoMap() {
- {/* 마커 생성 */} {markers.map(marker => ( -

{marker.content}

+

{marker.content}

월~금: 12:00~22:00
diff --git a/frontend/src/map/map.css b/frontend/src/map/map.css new file mode 100644 index 0000000..6e0d176 --- /dev/null +++ b/frontend/src/map/map.css @@ -0,0 +1,53 @@ +section { + width: 70%; + flex: 1; +} + +.map_wrap { + position: relative; + overflow: hidden; + width: 100%; + height: 100vh; +} + +.radius_border { + border: 1px solid #919191; + border-radius: 5px; +} +.custom_zoomcontrol { + position: absolute; + top: 10px; + right: 10px; + width: 36px; + height: 80px; + overflow: hidden; + z-index: 1; + background-color: #f5f5f5; +} +.custom_zoomcontrol span { + display: block; + width: 36px; + height: 40px; + text-align: center; + cursor: pointer; +} +.custom_zoomcontrol span img { + width: 15px; + height: 15px; + padding: 12px 0; + border: none; +} +.custom_zoomcontrol span:first-child { + border-bottom: 1px solid #bfbfbf; +} + +.InfoWindow { + padding: 2px; + margin: 2px; + color: #000; + text-align: center; + line-height: 1.5; + max-height: 200px; /* 최대 높이 조절 */ + max-width: 400px; /* 최대 가로 너비 조절 */ + white-space: nowrap; /* 텍스트가 가로로 길 경우 줄 바꿈 방지 */ +} diff --git a/frontend/src/search/search.css b/frontend/src/search/search.css index 169f41a..27eac50 100644 --- a/frontend/src/search/search.css +++ b/frontend/src/search/search.css @@ -1,12 +1,13 @@ +/* 카페 검색 */ + form { - height: auto; - } - - #cafe-search { - width: 98%; - height: 50px; - padding: 8px; - border-radius: 10px; - background: #fafafaed; - } - \ No newline at end of file + height: auto; +} + +#cafe-search { + width: 98%; + height: 50px; + padding: 8px; + border-radius: 10px; + background: #fafafaed; +} diff --git a/frontend/src/sideBar/SideBar.jsx b/frontend/src/sideBar/SideBar.jsx index eee37cf..9e59717 100644 --- a/frontend/src/sideBar/SideBar.jsx +++ b/frontend/src/sideBar/SideBar.jsx @@ -1,18 +1,14 @@ +import '../App.css'; import { Card } from '../card'; import { CardInfo } from '../cardInfo'; -import { Search } from '../search'; import { Hashtags } from '../hashtags'; -import '../App.css'; +import { Search } from '../search'; import './sideBar.css'; - - export function SideBar() { return ( -

- ); } diff --git a/frontend/src/sideBar/sideBar.css b/frontend/src/sideBar/sideBar.css index cbe219d..df01e8a 100644 --- a/frontend/src/sideBar/sideBar.css +++ b/frontend/src/sideBar/sideBar.css @@ -1,17 +1,17 @@ +/* 사이드 영역 */ aside { - width: 30%; - max-width: 350px; - border-right: 5px solid black; - padding: 20px; - overflow-y: auto; - flex-shrink: 0; - max-height: 800px; - } - - #side { - width: 98%; - padding: 0; - margin: 0 auto; - } - \ No newline at end of file + width: 30%; + max-width: 350px; + border-right: 5px solid black; + padding: 20px; + overflow-y: auto; + flex-shrink: 0; + max-height: 800px; +} + +#side { + width: 98%; + padding: 0; + margin: 0 auto; +} diff --git a/netlify.toml b/netlify.toml index 567a6d6..6e8b139 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,2 +1,4 @@ [build] base = "frontend" + command = "npm run build" + publish = "build"