240627 lej : JUNE final update

public/index.html

@@ -8,7 +8,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
 
     <title>🍊 탐라는, Woravel</title>
 

src/App.js

@@ -9,38 +9,41 @@ import Mypage from "./pages/Mypage";
 import PlaceDetail from "./pages/PlaceDetail";
 import Header from "./components/Header";
 import Login from "./pages/Login/Login";
-import useClickedName from './hooks/useClickedPlaceName';
+import useClickedPlace from './hooks/useClickedPlace';
 import Intro from "./pages/Intro";
 import Redirection from "./pages/Login/Redirection";
 import LoginSuccess from "./pages/Login/LoginSuccess";
+import { PlaceProvider } from "./contexts/clickedPlaceContexts";
 
 
 function App() {
 
-  const { clickedName, updateClickedName } = useClickedName();
+  const { clickedPlace, updateClickedPlace } = useClickedPlace(1);
 
   return (
+    <PlaceProvider>
     <div className="App" style ={{width : "100%"}}>
       <BrowserRouter>
-      <Header  clickedName={clickedName}/>
+      <Header  clickedPlace={clickedPlace}/>
       <Routes>
       <Route path = "/" element ={<Intro/>} />
-        <Route path = "/main" element ={<Main updateClickedName={updateClickedName} />} />
+        <Route path = "/main" element ={<Main updateClickedPlace={updateClickedPlace} />} />
         <Route path ="/*" element = {<NotFound/>}/>
         <Route path ="/login" element = {<Login/>}/>
         <Route path ="/login/callback" element = {<Redirection/>}/>
         <Route path ="/loginSuccess" element = {<LoginSuccess/>}/>
-        <Route path ="/travel" element = {<Travel updateClickedName={updateClickedName} />}/>
+        <Route path ="/travel" element = {<Travel updateClickedPlace={updateClickedPlace} />}/>
         <Route path ="/calendar" element = {<Calendar/>}/>
         <Route path ="/community" element = {<Community/>}/>
-        <Route path = "/main/:name" element = {<PlaceDetail updateClickedName={updateClickedName} />} />
-        <Route path = "/travel/:name" element = {<PlaceDetail updateClickedName={updateClickedName} />}/>
+        <Route path = "/main/:id" element = {<PlaceDetail updateClickedPlace={updateClickedPlace} />} />
+        <Route path = "/travel/:id" element = {<PlaceDetail updateClickedPlace={updateClickedPlace} />}/>
         <Route path ="/mypage" element = {<Mypage/>}/>
       </Routes>
       <Footer/>
       </BrowserRouter>
 
     </div>
+    </PlaceProvider>
   );
 }
 

src/components/SuggestedPlaces.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components'
+import sugAlt from '../assets/img/sugAlt.svg'
 
 
 const Box = styled.div `
@@ -21,18 +22,16 @@ export default function SuggestedPlaces({place}) {
 
   const onClickPlaceItem=()=>{
     window.scrollTo({ top: 0, behavior: 'smooth' });
-    console.log('test하고 지우기 | 맨 위로 가라 ')
     if (location.pathname.startsWith('/travel')) {
-      navigate(`/travel/${place.name}`, { state: place });
+      navigate(`/travel/${place.id}`, { state: place });
     } else if (location.pathname.startsWith('/main')) {
-      navigate(`/main/${place.name}`, { state: place });
+      navigate(`/main/${place.id}`, { 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;
+  let readdress = (place.address.length > 11)? place.address.substr(0,10)+'..' : place.address;
 
 
 
@@ -41,7 +40,7 @@ export default function SuggestedPlaces({place}) {
     <>
     <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"}}/>
+        <img src = {place.imageUrl ? place.imageUrl: sugAlt } alt="?" style={{maxWidth:"150px",maxHeight:"150px", minWidth:"150px",minHeight:"150px",overflow:"hidden", borderRadius : "2px"}}/>
         <Title>{rename} </Title>
         <div style={{color : "#8C8D8A", fontSize:"14px"}}> {readdress} </div>
       </Box>  

src/components/Header.jsx

@@ -1,19 +1,22 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import "./FontAwesome";
 import '../styles/layout.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
+import { PlaceContext } from '../contexts/clickedPlaceContexts';
 
 
 const PlaceName = styled.div`
   font-size : 20px;
   font-weight : 700;
 `
 
-export default function Header({ clickedName }) {
+export default function Header({ clickedPlaceId }) {
+  const { placeName } = useContext(PlaceContext); // Context 사용
   const location = useLocation();
 
+
   const renderComponent = () => {
     // const isMainPath = /^\/main(\/.*)?$/.test(location.pathname);
     const isMainDetailPath = /^\/main\/.+$/.test(location.pathname);
@@ -93,8 +96,6 @@ export default function Header({ clickedName }) {
         </>
       )
     }else if(isMainDetailPath) {
-      console.log('test하고 지우기 | 상세 페이지 입장 ~ ')
-      console.log('test하고 지우기 | :',location.pathname)
       return (
         <>
             <Link to="/main" className="main-link">
@@ -105,7 +106,7 @@ export default function Header({ clickedName }) {
                 style={{marginRight : "10px"}}
               /></Link>
 
-              <PlaceName>{clickedName &&  <div>{clickedName}</div>}</PlaceName>
+              <PlaceName>{placeName && <div>{placeName}</div>}</PlaceName>
 
               <div className="search-icon-wrapper">
                 <FontAwesomeIcon

src/components/KakaoMap.jsx

@@ -17,8 +17,16 @@ export default function KakaoMap({Lat,Lng}) {
               center: new window.kakao.maps.LatLng(Lat, Lng),
               level: 3
             };
-            new window.kakao.maps.Map(container, options);
+            const map = new window.kakao.maps.Map(container, options);
+
+            const markerPosition = new window.kakao.maps.LatLng(Lat, Lng);
+            const marker = new window.kakao.maps.Marker({
+              position: markerPosition
+            });
+            marker.setMap(map);
+
           });
+
         };
       }, [Lat,Lng]);
 

src/components/Places.jsx

@@ -1,16 +1,18 @@
 import React from 'react'
 import { useLocation, useNavigate } from 'react-router-dom';
 import '../styles/main.css'
+import defaul_img from '../assets/img/default_img.svg'
 
+// 메인 페이지에 나타나는 이미지 ! 
 export default function Places({ place }) {
     const navigate = useNavigate();
     const location = useLocation();
 
     const onClickPlaceItem=()=>{
         if (location.pathname === '/travel') {
-            navigate(`/travel/${place.name}`, { state: place });
+            navigate(`/travel/${place.id}`, { state: place });
         }else if(location.pathname === '/main'){
-            navigate(`/main/${place.name}`, { state: place });
+            navigate(`/main/${place.id}`, { state: place });
         }
     }
 
@@ -28,7 +30,8 @@ export default function Places({ place }) {
         </div>
 
         <div className="places-img-wrapper">
-            <img  src={place.img_src[0]} alt={`${place.name}`}/>
+
+            <img  src={place.imgSrc ? place.imgSrc : defaul_img} alt={`${place.name}`}/>
         </div>
       </div>
     )

src/contexts/clickedPlaceContexts.js

@@ -0,0 +1,13 @@
+import React, { createContext, useState } from 'react';
+
+export const PlaceContext = createContext();
+
+export const PlaceProvider = ({ children }) => {
+  const [placeName, setPlaceName] = useState('');
+
+  return (
+    <PlaceContext.Provider value={{ placeName, setPlaceName }}>
+      {children}
+    </PlaceContext.Provider>
+  );
+};

src/hooks/useClickedPlace.js

@@ -0,0 +1,18 @@
+import { useState } from 'react'
+
+
+
+const useClickedPlace = () =>{
+
+    const [clickedPlace , setClickedPlace] = useState(1);
+
+    const updateClickedPlace = (id)=>{
+        setClickedPlace(id);
+    }
+
+    return {clickedPlace,updateClickedPlace};
+};
+
+
+export default useClickedPlace;
+

src/pages/Calendar.jsx

@@ -7,36 +7,52 @@ import '../styles/calendar.css'
 
 const events = [
   {
-    title : "일~?",
+    title : "Work 1  ",
     start : "2024-05-30",
     type: "work"
   },
   {
-    title : "일12~23?",
+    title : "Work 2 ",
     start : "2024-05-31",
     type: "work"
   },
   {
-    title : "여행",
+    title : "Travel 1 ",
     start : "2024-05-28",
     type: "travel",
   },
   {
-    title : "work2.",
+    title : "Work 3 ",
     start : "2024-05-28",
     type: "work",
   },
 
   {
-    title : "일과여행의향연..",
-    start : "2024-05-28",
+    title : "일 일정 테스트 ",
+    start : "2024-06-28",
     type: "work",
   },
   {
-    title : "여행",
-    start : "2024-05-25",
+    title : "여행 일정 테스트 ",
+    start : "2024-06-25",
     type: "travel",
-  }
+  },
+  {
+    title : "테스트입니다(work) ",
+    start : "2024-06-05",
+    type: "work",
+  },
+  {
+    title : "일을 하자 ",
+    start : "2024-06-13",
+    type: "work",
+  },
+  {
+    title : "놀러가자 ",
+    start : "2024-06-13",
+    type: "travel",
+  },
+
 ]; 
 
 

src/pages/Community.jsx

@@ -1,10 +1,23 @@
 import React from 'react'
+import styled from 'styled-components'
 
-export default function Community() {
-  return (
-    <div>Community
 
 
+const CommunityWrapper = styled.div`
+  width : 100%;
+  height : 100%; 
+  text-align : center;
+  padding : 50px 0 ;
+
+`
+
+
+export default function Community() {
+  return (
+    <div style={{height : "100%"}}>
+      <CommunityWrapper>
+        열심히 개발 중 .. 🛠️ 
+      </CommunityWrapper>
     </div>
 
   )

src/pages/Login/Login.jsx

@@ -48,12 +48,10 @@ const LoginModal = () => {
   const REST_API_KEY= process.env.REACT_APP_REST_API_KEY
   const REDIRECT_URL = decodeURIComponent(process.env.REACT_APP_REDIRECT_URL) //Redirect URI
 
-  console.log('test하고 지우기 | REDIRECT_URL : ',REDIRECT_URL)
   // oauth 요청 URL
   const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code`
 
   const handleKakaoLoginClick = () =>{
-    console.log('test하고 지우기 | loginClick')
     window.location.href = kakaoURL
   }
 

src/pages/Login/Redirection.jsx

@@ -13,7 +13,7 @@ const fnUserInfoCheck = async (kakaoId, nickname) => {
 
     // Handle the response from your backend
     if (response.data.success) {
-      alert('test하고 지우기 | 사용자 : , ', response.data.user);
+
       // You can use the navigate hook if needed
     } else {
       console.error('User info check failed:', response.data.message);