240612 lej : Detail & Header

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

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 (
-    <div className="App">
+    <div className="App" style ={{width : "100%"}}>
       <BrowserRouter>
-      <Header/>
+      <Header  clickedName={clickedName}/>
       <Routes>
-        <Route path = "/" element ={<Main/>} />
+        <Route path = "/main" element ={<Main updateClickedName={updateClickedName} />} />
         <Route path ="/*" element = {<NotFound/>}/>
         <Route path ="/login" element = {<Login/>}/>
-        <Route path ="/travel" element = {<Travel/>}/>
+        <Route path ="/travel" element = {<Travel updateClickedName={updateClickedName} />}/>
         <Route path ="/calendar" element = {<Calendar/>}/>
         <Route path ="/community" element = {<Community/>}/>
-        <Route path = "/main/:name" element = {<PlaceDetail/>}/>
-        <Route path = "/travel/:name" element = {<PlaceDetail/>}/>
+        <Route path = "/main/:name" element = {<PlaceDetail updateClickedName={updateClickedName} />} />
+        <Route path = "/travel/:name" element = {<PlaceDetail updateClickedName={updateClickedName} />}/>
         <Route path ="/mypage" element = {<Mypage/>}/>
         <Route path ="/login/callback" element = {<CallBack/>}/>
       </Routes>

src/components/SuggestedPlaces.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 (
-    <div className = "sug-place-wrapper">
+    <div className = "sug-place-wrapper" onClick={onClickPlaceItem}>
       <Box>
         <img src = {place.img_src} alt="?" style={{maxWidth:"150px",maxHeight:"150px", minWidth:"150px",minHeight:"150px",overflow:"hidden", borderRadius : "5px"}}/>
         <Title>{rename} </Title>
         <div style={{color : "#8C8D8A", fontSize:"14px"}}> {readdress} </div>
       </Box>  
-
-
     </div>
   );
-
-
-
 }

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);
+library.add(faSuitcaseRolling,faAngleRight,faAngleLeft,faPhone,faLocationDot,faCopy,faArrowLeft);

src/components/Footer.jsx

@@ -23,7 +23,7 @@ export default function Footer() {
 
   return (
     <div className ='footer-wrap'>
-        <Link to="/" className="nav-link" onClick={() => setActiveNav(1)}> 
+        <Link to="/main" className="nav-link" onClick={() => setActiveNav(1)}> 
             <div>
                 <FontAwesomeIcon
                 icon ="laptop"

src/components/Header.jsx

@@ -3,16 +3,49 @@ import "./FontAwesome";
 import '../styles/layout.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link, useLocation } from 'react-router-dom';
+import styled from 'styled-components';
 
-export default function Header() {
+
+const PlaceName = styled.div`
+  font-size : 20px;
+  font-weight : 700;
+`
+
+export default function Header({ clickedName }) {
   const location = useLocation();
 
   const renderComponent = () => {
+    // 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 (
+      <>
+          <Link to="/main" className="main-link">
+            <FontAwesomeIcon
+              icon="file"
+              size="xl"
+              className="logo-icon-wrapper" 
+              style={{marginRight : "10px"}}
+            />
+            WORAVEL
+          </Link>
+          <div className="search-icon-wrapper">
+            <FontAwesomeIcon
+              icon="magnifying-glass"
+              size="xl"
+              className=""
+            />
+          </div>
+        </>)
+    }else if (isTravelPath) {  // 여행 
       return (
         <>
           <Link to="/travel" className="main-link">
@@ -57,29 +90,44 @@ export default function Header() {
           </Link>
         </>
       )
-    }
-    else { // 홈화면 
+    }else if(isMainDetailPath) {
+      console.log('test하고 지우기 | 상세 페이지 입장 ~ ')
+      console.log('test하고 지우기 | :',location.pathname)
       return (
         <>
-          <Link to="/" className="main-link">
-            <FontAwesomeIcon
-              icon="file"
-              size="xl"
-              className="logo-icon-wrapper"
-              style={{marginRight : "10px"}}
-            />
-            WORAVEL
-          </Link>
-          <div className="search-icon-wrapper">
-            <FontAwesomeIcon
-              icon="magnifying-glass"
-              size="xl"
-              className=""
-            />
-          </div>
+            <Link to="/main" className="main-link">
+              <FontAwesomeIcon
+                icon="arrow-left"
+                size="lg"
+                className=""
+                style={{marginRight : "10px"}}
+              /></Link>
+
+              <PlaceName>{clickedName &&  <div>{clickedName}</div>}</PlaceName>
+
+              <div className="search-icon-wrapper">
+                <FontAwesomeIcon
+                  icon="magnifying-glass"
+                  size="xl"/>
+              </div>
         </>
-      );
-    } 
+      )
+    }else{
+      return(
+      <>
+        <Link to="/main" className="main-link" style={{alignContent:"center !important" }}>
+          <FontAwesomeIcon
+            icon="file"
+            size="xl"
+            className="logo-icon-wrapper" 
+            style={{marginRight : "10px"}}
+          />
+          WORAVEL
+        </Link>
+      </>
+      )
+
+    }
   };
 
   return (

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

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

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(
     <React.StrictMode>

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 (
     <div className = "main-page-wrapper">
       <div className = "main-filter-wrapper" >
-        <FontAwesomeIcon icon = "angles-left" style={{padding:"3px 0px"}} onClick={prevBtnClick}/>
+        <FontAwesomeIcon icon = "angle-left" style={{padding:"3px 0px"}} onClick={prevBtnClick}/>
         <div style={{padding: "0px 5px"}}> {filtersKor[pageSlider] }  </div>
-        <FontAwesomeIcon icon = "angles-right" style={{padding:"3px 0px"}} onClick={nextBtnClick}/>
+        <FontAwesomeIcon icon = "angle-right" style={{padding:"3px 0px"}} onClick={nextBtnClick}/>
 
       </div>
       <div className="main-attraction-wrapper">
         {currentFilter.map((place, index) => (
-          <Attraction key={index} place={place}/>
+          <Attraction key={index} place={place} onClick={handleClick}/>
         ))}
       </div>
     </div>