diff --git a/package-lock.json b/package-lock.json index 51f60ac..05e7f94 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@testing-library/user-event": "^13.5.0", "css-loader": "^7.1.2", "node-sass": "^7.0.3", + "normalize.css": "^8.0.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-kakao-login": "^2.1.1", @@ -14062,6 +14063,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "node_modules/npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", diff --git a/package.json b/package.json index 4cac164..fd65b96 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@testing-library/user-event": "^13.5.0", "css-loader": "^7.1.2", "node-sass": "^7.0.3", + "normalize.css": "^8.0.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-kakao-login": "^2.1.1", diff --git a/src/App.js b/src/App.js index 07051eb..0f16e28 100644 --- a/src/App.js +++ b/src/App.js @@ -10,22 +10,26 @@ import PlaceDetail from "./pages/PlaceDetail"; import Header from "./components/Header"; import Login from "./pages/Login"; import CallBack from "./components/CallBack"; +import useClickedName from './hooks/useClickedPlaceName'; function App() { + + const { clickedName, updateClickedName } = useClickedName(); + return ( -
+
-
+
- } /> + } /> }/> }/> - }/> + }/> }/> }/> - }/> - }/> + } /> + }/> }/> }/> diff --git a/src/assets/img/Intro1.jpeg b/src/assets/img/Intro1.jpeg new file mode 100644 index 0000000..323f037 Binary files /dev/null and b/src/assets/img/Intro1.jpeg differ diff --git a/src/assets/img/Intro2.jpeg b/src/assets/img/Intro2.jpeg new file mode 100644 index 0000000..eb41349 Binary files /dev/null and b/src/assets/img/Intro2.jpeg differ diff --git a/src/assets/img/Intro3.png b/src/assets/img/Intro3.png new file mode 100644 index 0000000..aed2cce Binary files /dev/null and b/src/assets/img/Intro3.png differ diff --git "a/src/components/\bSuggestedPlaces.jsx" "b/src/components/\bSuggestedPlaces.jsx" index 6cabab3..503372d 100644 --- "a/src/components/\bSuggestedPlaces.jsx" +++ "b/src/components/\bSuggestedPlaces.jsx" @@ -1,35 +1,49 @@ import React from 'react' +import { useLocation, useNavigate } from 'react-router-dom'; import styled from 'styled-components' -export default function SuggestedPlaces({place}) { - - let rename = (place.name.length > 12 )? place.name.substr(0,11)+'..' : place.name; - let readdress = (place.address.length > 13)? place.address.substr(0,12)+'..' : place.address; - - const Box = styled.div ` - padding : 0 15px 0 0 ; - +const Box = styled.div ` + padding : 0 15px 0 0 ; `; const Title = styled.div ` font-family : "sans-serif"; font-size : 16px; font-weight : 700; - ` + `; + +export default function SuggestedPlaces({place}) { + + const navigate = useNavigate(); + const location = useLocation(); + + + const onClickPlaceItem=()=>{ + window.scrollTo({ top: 0, behavior: 'smooth' }); + console.log('test하고 지우기 | 맨 위로 가라 ') + if (location.pathname.startsWith('/travel')) { + navigate(`/travel/${place.name}`, { state: place }); + } else if (location.pathname.startsWith('/main')) { + navigate(`/main/${place.name}`, { state: place }); + } + //맨 위로 가는 코드 추가 + + } + + let rename = (place.name.length > 12 )? place.name.substr(0,11)+'..' : place.name; + let readdress = (place.address.length > 13)? place.address.substr(0,12)+'..' : place.address; + + + return ( -
+
? {rename}
{readdress}
- -
); - - - } diff --git a/src/components/FontAwesome.jsx b/src/components/FontAwesome.jsx index 3301f5e..23c2c81 100644 --- a/src/components/FontAwesome.jsx +++ b/src/components/FontAwesome.jsx @@ -14,13 +14,14 @@ import { faMessage } from "@fortawesome/free-regular-svg-icons"; import { faShareNodes } from "@fortawesome/free-solid-svg-icons"; import { faSuitcaseRolling } from "@fortawesome/free-solid-svg-icons"; -import { faAnglesLeft } from "@fortawesome/free-solid-svg-icons"; -import { faAnglesRight} from "@fortawesome/free-solid-svg-icons"; +import { faAngleLeft } from "@fortawesome/free-solid-svg-icons"; +import { faAngleRight} from "@fortawesome/free-solid-svg-icons"; import { faPhone } from "@fortawesome/free-solid-svg-icons"; import { faLocationDot } from "@fortawesome/free-solid-svg-icons"; import { faCopy } from "@fortawesome/free-solid-svg-icons"; +import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; library.add(faHouse,faLaptop,faSuitcase,faComments,faCalendar,faUser,faMagnifyingGlass,faFile,faMessage,faShareNodes,faBookmarkSolid,faBookmarkRegular); -library.add(faSuitcaseRolling,faAnglesRight,faAnglesLeft,faPhone,faLocationDot,faCopy); \ No newline at end of file +library.add(faSuitcaseRolling,faAngleRight,faAngleLeft,faPhone,faLocationDot,faCopy,faArrowLeft); \ No newline at end of file diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 3c77733..12d99fd 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -23,7 +23,7 @@ export default function Footer() { return (
- setActiveNav(1)}> + setActiveNav(1)}>
{ + // const isMainPath = /^\/main(\/.*)?$/.test(location.pathname); + const isMainDetailPath = /^\/main\/.+$/.test(location.pathname); const isTravelPath = /^\/travel(\/.*)?$/.test(location.pathname); const isCommnuPath = /^\/community(\/.*)?$/.test(location.pathname); const isCalendarPath = /^\/calendar(\/.*)?$/.test(location.pathname); const isMypagePath = /^\/mypage(\/.*)?$/.test(location.pathname); - if (isTravelPath) { // 여행 + + + + + if (location.pathname === '/main'){ //메인 페이지 + return ( + <> + + + WORAVEL + +
+ +
+ ) + }else if (isTravelPath) { // 여행 return ( <> @@ -57,29 +90,44 @@ export default function Header() { ) - } - else { // 홈화면 + }else if(isMainDetailPath) { + console.log('test하고 지우기 | 상세 페이지 입장 ~ ') + console.log('test하고 지우기 | :',location.pathname) return ( <> - - - WORAVEL - -
- -
+ + + + {clickedName &&
{clickedName}
} + +
+ +
- ); - } + ) + }else{ + return( + <> + + + WORAVEL + + + ) + + } }; return ( diff --git a/src/components/Places.jsx b/src/components/Places.jsx index e1a1870..01fe9d7 100644 --- a/src/components/Places.jsx +++ b/src/components/Places.jsx @@ -9,7 +9,7 @@ export default function Places({ place }) { const onClickPlaceItem=()=>{ if (location.pathname === '/travel') { navigate(`/travel/${place.name}`, { state: place }); - }else if(location.pathname === '/'){ + }else if(location.pathname === '/main'){ navigate(`/main/${place.name}`, { state: place }); } } diff --git a/src/hooks/useClickedPlaceName.js b/src/hooks/useClickedPlaceName.js new file mode 100644 index 0000000..4caaeea --- /dev/null +++ b/src/hooks/useClickedPlaceName.js @@ -0,0 +1,17 @@ +import { useState } from 'react' + + + +const useClickedPlaceName = () =>{ + + const [clickedName , setClickedName] = useState(''); + + const updateClickedName = (name)=>{ + setClickedName(name); + } + return {clickedName,updateClickedName}; +}; + + +export default useClickedPlaceName; + diff --git a/src/index.js b/src/index.js index fab0f87..94326e7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; +import 'normalize.css'; ReactDOM.render( diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx index 004a637..2acecad 100644 --- a/src/pages/Main.jsx +++ b/src/pages/Main.jsx @@ -25,7 +25,7 @@ const bookCafes = [ const libraries = [ { - name: "도서관 ? 도토관", + name: "도토관", address: "제주 제주시 조천읍 신북로 453 도토관", img_src: [ "https://mblogthumb-phinf.pstatic.net/MjAyMzAzMTdfMjM3/MDAxNjc5MDQyMjI5ODYy.6TU04oH0AC3eD_8gFoqcWQdNKxbse03Mm7jgHwsB7ucg.581kNlJScHA2fDFN2FLnwjGf1vF41zYgueARpQgad_Ug.JPEG.hyeyoung217/20230313%EF%BC%BF155851.jpg?type=w800"], tel : "0507-1406-0938", @@ -72,7 +72,10 @@ const cafes = [ ] -export default function Main() { +export default function Main ({ updateClickedName }) { + const handleClick = (name) => { + updateClickedName(name); + }; const filters = [bookCafes, libraries, cafes]; const filtersKor = ["북카페","도서관","카페"] @@ -94,14 +97,14 @@ export default function Main() { return (
- +
{filtersKor[pageSlider] }
- +
{currentFilter.map((place, index) => ( - + ))}
diff --git a/src/pages/PlaceDetail.jsx b/src/pages/PlaceDetail.jsx index 6a76492..6433dfe 100644 --- a/src/pages/PlaceDetail.jsx +++ b/src/pages/PlaceDetail.jsx @@ -1,6 +1,6 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import '../styles/main.css' -import { useLocation } from 'react-router-dom' +import { useLocation, useParams } from 'react-router-dom' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import KakaoMap from '../components/KakaoMap'; import logo from '../assets/img/kakaomap_basic.png' @@ -8,8 +8,37 @@ import SuggestedPlaces from '../components/\bSuggestedPlaces'; import styled from 'styled-components'; +const Wrapper = styled.div ` +display : flex; +overflow-x : scroll; +min-width: 100%; +` + + +const Title = styled.div ` +color: ${props => props.color || 'black'}; +font-family : 'sans-serif'; +font-weight : 800; +font-size : 20px ; +padding : 10px 0 ; +` + +const Text = styled.div` +font-size : 13px; +color : #3E3F3C; + +` + +export default function PlaceDetail({ updateClickedName }) { + + const { name } = useParams(); + const decodedName = decodeURIComponent(name); + + useEffect(() => { + updateClickedName(decodedName); + }, [decodedName, updateClickedName]); + -export default function PlaceDetail() { const {state} = useLocation(); const [savePlace,setSavePlace] = useState(0); @@ -28,26 +57,7 @@ export default function PlaceDetail() { }) } - const Wrapper = styled.div ` - display : flex; - overflow-x : scroll; - min-width: 100%; - ` - - - const Title = styled.div ` - color: ${props => props.color}; - font-family : 'sans-serif'; - font-weight : 800; - font-size : 20px ; - padding : 10px 0 ; - ` - - const Text = styled.div` - font-size : 13px; - color : #3E3F3C; - ` const suggestedWork = [ { @@ -146,7 +156,7 @@ export default function PlaceDetail() {   카카오맵
diff --git a/src/styles/layout.css b/src/styles/layout.css index 4e90b23..bd4cfbe 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -1,7 +1,7 @@ /* header, footer layout css */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap'); -/* Header */ +/* Footer */ .footer-wrap{ background-color: #fff; position: fixed; @@ -20,7 +20,6 @@ float: left; width: 20%; text-align: center; - /* 세로길이 설정 */ height: 45px; line-height: 45px; } @@ -35,7 +34,7 @@ .active { color: #FF9559; -} +} /* Header */ @@ -43,8 +42,8 @@ display: flex; justify-content: space-between; align-items: center; /* 세로 중앙 정렬을 위해 추가 */ - border-bottom: 1px solid #000; padding: 10px; /* 필요에 따라 패딩 추가 */ + box-shadow: 0px 1px 5px; } .main-link {