Merge pull request #49 from AlongTheBlue/alongCourses

Along courses
AlongTheBlue · Oct 14, 2024 · c4a9947 · c4a9947
2 parents 43d558c + ea33bc0
commit c4a9947
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 91 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -16,6 +16,7 @@ import MyPage from './pages/MyPage.jsx';
 import axios from 'axios';
 import Auth from './components/Auth.jsx';
 import MyAlongCourses from './pages/MyAlongCourses.jsx';
+import MyAlongBlues from './pages/MyAlongBlues.jsx';
 
 function App() {
 
@@ -91,6 +92,8 @@ function App() {
           <Route path="/along/courses/my" element={<MyAlongCourses/>}/>     {/*내 여행따라 */}
           <Route path="/along/blues" element={<AlongBlues />} />          {/* 바당따라 */}
           <Route path="/along/blues/plan/:id" element={<AlongBluesPlan user={user}/>} />  {/* 바당따라 여행코스 */}
+          <Route path="/along/blues/my" element={<MyAlongBlues/>}/>     {/*내 바당따라 */}
+          <Route path="/along/blues/detail/:id" element={<CoursesDetail alongBluesMode={true}/>} /> {/* 바당따라 상세 */}
           <Route path="/course/list" element={<Courses />} />            {/* 여행코스 */}
           <Route path="/course/detail/:id" element={<CoursesDetail />} />{/* 여행코스 상세 */}
           <Route path="/search" element={<SearchPage searchPlaceMode={false}/>} />                {/* 검색페이지 */}

diff --git a/src/components/CourseItem.jsx b/src/components/CourseItem.jsx
@@ -2,12 +2,15 @@ import { useState } from 'react';
 import '../styles/CourseItem.css'; // 스타일을 위한 CSS 파일
 import { useNavigate } from 'react-router-dom';
 
-const CourseItem = ({ alongCourse }) => {
+const CourseItem = ({ course, alongCourse }) => {
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
   const navigate = useNavigate();
 
-  const handleCourseDetail = () => {
-    navigate(`/along/courses/detail/${alongCourse.id}`)
+  const handleAlongCourseDetail = () => {
+    if(alongCourse)
+      navigate(`/along/courses/detail/${course.id}`)
+    else
+      navigate(`/along/blues/detail/${course.id}`)
   }
 
   // const handleNextImage = () => {
@@ -26,22 +29,22 @@ const CourseItem = ({ alongCourse }) => {
   return (
     <div className="course-item">
       {/* 이미지 슬라이더 */}
-      <div onClick={handleCourseDetail} style={{cursor:"pointer"}}>
-        {alongCourse.imgUrl &&
+      <div onClick={handleAlongCourseDetail} style={{cursor:"pointer"}}>
+        {course.imgUrl &&
         <div className="image-slider">
           {/* <div className="image-count"> */}
             {/* {currentImageIndex + 1} / {images.length} */}
           {/* </div> */}
           {/* <button className="prev-btn" >{"<"}</button> */}
-          <img src={alongCourse.imgUrl} alt={alongCourse.title} className="main-img" />
+          <img src={course.imgUrl} alt={course.title} className="main-img" />
           {/* <button className="next-btn" >{">"}</button> */}
         </div>
         }
         <div className="course-info">
-          <h3>{alongCourse.title}</h3>
-          <p className="description">{alongCourse.content}</p>
+          <h3>{course.title}</h3>
+          <p className="description">{course.content}</p>
           <div className="hashtags">
-            {alongCourse.hashtags && alongCourse.hashtags.map((tag, index) => (
+            {course.hashtags && course.hashtags.map((tag, index) => (
               <span className="hashtag" key={index}>#{tag}</span>
             ))}
           </div>

diff --git a/src/components/CourseItemList.jsx b/src/components/CourseItemList.jsx
@@ -3,32 +3,29 @@ import "../styles/CourseItemList.css";
 import CourseItem from './CourseItem';
 import UserCard from "./UserCard";
 
-function CourseItemList({alongCourses}) {
+function CourseItemList({myPageMode, courses, alongCourse }) {
     const navigate = useNavigate();
 
     const handleAlongCoursesForm = () => {
-        const storedData = localStorage.getItem("id");
-        if(!storedData){
+        const uid = localStorage.getItem("id");
+        if(!uid){
             alert("로그인을 먼저 해주세요.")
             navigate(`/my`);
             return;
         }
-        navigate(`/along/courses/form/${storedData}`);
+        navigate(`/along/courses/form/${uid}`);
     }
 
-    console.log(alongCourses)
-
     return (
         <div className='courses-item-list-container'>
+            {!myPageMode &&
             <div className='courses-item-add' onClick={handleAlongCoursesForm}>작성</div>
+            }
             <div className='courses-item-list'>
-                {alongCourses && alongCourses.map((alongCourse, index) => (
+                {courses && courses.map((course, index) => (
                     <div className='courses-item-card' key={index}>
-                        <UserCard 
-                            user={alongCourse.user} />
-                        <CourseItem
-                            alongCourse = {alongCourse}
-                        />
+                        <UserCard user={course.user} />
+                        <CourseItem course = {course} alongCourse={alongCourse}/>
                     </div>
                 ))}
             </div>

diff --git a/src/components/DetailMap.jsx b/src/components/DetailMap.jsx
@@ -12,7 +12,7 @@ function DetailMap({ courseMarkers }) {
     const mapContainer = document.getElementById('map'); // 지도를 표시할 div
     const mapOption = {
       center: new kakao.maps.LatLng(33.386666, 126.55667),
-      level: 8, // 지도 확대 레벨
+      level: 10, // 지도 확대 레벨
     };
 
     // 지도 생성 (한 번만 실행)
@@ -33,14 +33,15 @@ function DetailMap({ courseMarkers }) {
     if (courseMarkers.length === 0) {
         map.setLevel(10); // 마커가 없으면 레벨 10
       } else {
-        map.setLevel(8); // 마커가 있으면 레벨 8
+        map.setLevel(4); // 마커가 있으면 레벨 8
       }
 
     // 기존 마커 제거
     markers.forEach(marker => marker.setMap(null));
 
     let newMarkers = [];
     let paths = [];
+    const bounds = new kakao.maps.LatLngBounds(); // Bounds 객체 생성
 
     // 새 마커 생성
     courseMarkers.forEach((courseMarker, index) => {
@@ -57,6 +58,8 @@ function DetailMap({ courseMarkers }) {
 
       newMarkers.push(marker);
       paths.push(new kakao.maps.LatLng(courseMarker.lat, courseMarker.lng));
+
+      bounds.extend(markerPosition); // 각 마커의 위치를 bounds에 추가
     });
 
     // 새 마커들 상태 업데이트
@@ -80,20 +83,25 @@ function DetailMap({ courseMarkers }) {
     newPolyline.setMap(map);
     setPolyline(newPolyline);
 
-    // 지도 중심을 마커들의 중앙으로 설정
-    if (paths.length > 0) {
-      let totalLat = 0, totalLng = 0;
-      paths.forEach((path) => {
-        totalLat += path.getLat();
-        totalLng += path.getLng();
-      });
-
-      const centerLat = totalLat / paths.length;
-      const centerLng = totalLng / paths.length;
-
-      const coords = new kakao.maps.LatLng(centerLat, centerLng);
-      map.setCenter(coords);
+    // 모든 마커를 포함하도록 지도의 범위 설정
+    if (courseMarkers.length > 0) {
+      map.setBounds(bounds); // 지도 범위를 마커들의 위치에 맞게 설정
     }
+
+    // 지도 중심을 마커들의 중앙으로 설정
+    // if (paths.length > 0) {
+    //   let totalLat = 0, totalLng = 0;
+    //   paths.forEach((path) => {
+    //     totalLat += path.getLat();
+    //     totalLng += path.getLng();
+    //   });
+
+    //   const centerLat = totalLat / paths.length;
+    //   const centerLng = totalLng / paths.length;
+
+    //   const coords = new kakao.maps.LatLng(centerLat, centerLng);
+    //   map.setCenter(coords);
+    // }
   }, [courseMarkers, map]); // courseMarkers나 map이 변경될 때만 실행
 
   return (

diff --git a/src/pages/AlongCourses.jsx b/src/pages/AlongCourses.jsx
@@ -5,58 +5,18 @@ import PageHeader from "../components/PageHeader";
 import { useEffect, useState } from "react";
 import { getAlongCourses } from "../utils/data";
 
-const courseData = [
-  {
-    id: 1,
-    userId: 1,
-    // profileImg: '/images/user/user1.jpg',
-    // userName: '치즈버거',
-    // userComment: '우와아아아아아아',
-    courseTitle: "제주의 해안가를 따라",
-    description:
-      "요즘 제주 여행을 많이 가는 것 같아서 3월에 다녀온 제주일정표 \n 별거 아니지만 혹시 계획 세우기 귀찮은 분들을 위해",
-    images: [
-      "http://tong.visitkorea.or.kr/cms/resource/37/3035537_image2_1.jpg",
-      "http://tong.visitkorea.or.kr/cms/resource/31/3035531_image2_1.jpg",
-      "http://tong.visitkorea.or.kr/cms/resource/37/3035537_image2_1.jpg",
-      "http://tong.visitkorea.or.kr/cms/resource/37/3035537_image2_1.jpg",
-      "http://tong.visitkorea.or.kr/cms/resource/37/3035537_image2_1.jpg",
-      "http://tong.visitkorea.or.kr/cms/resource/37/3035537_image2_1.jpg",
-      "http://tong.visitkorea.or.kr/cms/resource/37/3035537_image2_1.jpg",
-      "http://tong.visitkorea.or.kr/cms/resource/37/3035537_image2_1.jpg",
-      "http://tong.visitkorea.or.kr/cms/resource/37/3035537_image2_1.jpg",
-      "http://tong.visitkorea.or.kr/cms/resource/37/3035537_image2_1.jpg",
-    ],
-    tags: ["일출", "일출", "일출"],
-  },
-  {
-    id: 2,
-    userId: 2,
-    // profileImg: '/images/user/user2.jpg',
-    // userName: '호랑나비',
-    // userComment: '한 마리 가야아',
-    courseTitle: "제주도 가성비 코스",
-    description:
-      "요즘 제주 여행을 많이 가는 것 같아서 3월에 다녀온 제주일정표 \n 별거 아니지만 혹시 계획 세우기 귀찮은 분들을 위해",
-    images: [
-      "http://tong.visitkorea.or.kr/cms/resource/32/3035532_image2_1.jpg",
-      "http://tong.visitkorea.or.kr/cms/resource/40/3035540_image2_1.jpg",
-    ],
-    tags: ["일출", "일출", "일출"],
-  },
-];
 
-const AlongCourses = ({user}) => {
+const AlongCourses = () => {
   const [loading, setLoading] = useState(false);
-  const [alongCourses, setAlongCourses] = useState([]);
+  const [courses, setCourses] = useState([]);
 
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
       try {
         const data = await getAlongCourses();
         console.log(data)
-        setAlongCourses(data);
+        setCourses(data);
       } catch (error) {
         console.error("데이터를 불러오는데 문제가 발생했습니다.", error);
       } finally {
@@ -70,7 +30,7 @@ const AlongCourses = ({user}) => {
   return (
     <div className="page-container">
       <PageHeader title={"여행따라"} />
-      <CourseItemList alongCourses={alongCourses} />
+      <CourseItemList courses={courses} alongCourse={true}/>
       <Footer />
     </div>
   );

diff --git a/src/pages/CoursesDetail.jsx b/src/pages/CoursesDetail.jsx
@@ -5,12 +5,12 @@ import CoursesDetailCard from '../components/CoursesDetailCard';
 import { useParams } from 'react-router-dom';
 import UserCard from '../components/UserCard';
 import { useEffect, useState } from 'react';
-import { getDetailAlongCourse } from '../utils/data';
+import { getDetailAlongBlue, getDetailAlongCourse } from '../utils/data';
 
-function CoursesDetail({alongCoursesMode}) {
+function CoursesDetail({alongCoursesMode, alongBluesMode}) {
     const { id } = useParams();
     const [loading, setLoading] = useState(false);
-    const [alongCourse, setAlongCourse] = useState([]);
+    const [course, setCourse] = useState([]);
 
     useEffect(() => {
         if(!alongCoursesMode)
@@ -20,7 +20,28 @@ function CoursesDetail({alongCoursesMode}) {
           setLoading(true);
           try {
             const data = await getDetailAlongCourse(id);
-            setAlongCourse(data);
+            setCourse(data);
+            console.log(data)
+
+          } catch (error) {
+            console.error("데이터를 불러오는데 문제가 발생했습니다.", error);
+          } finally {
+            setLoading(false);
+          }
+        };
+
+        fetchData();
+      }, []);
+
+      useEffect(() => {
+        if(!alongBluesMode)
+            return;
+
+        const fetchData = async () => {
+          setLoading(true);
+          try {
+            const data = await getDetailAlongBlue(id);
+            setCourse(data);
             console.log(data)
 
           } catch (error) {
@@ -35,11 +56,12 @@ function CoursesDetail({alongCoursesMode}) {
 
     return (
         <div className="page-container">
-            <PageHeader title={alongCoursesMode ? "여행따라" : "여행코스"}/>
-            {alongCoursesMode && <UserCard 
-            user={alongCourse.user} />}
+            <PageHeader title={alongCoursesMode ? "여행따라" : (alongBluesMode ? "바당따라" : "여행코스")}/>
+            { alongBluesMode && alongCoursesMode && <UserCard user={course.user} />}
             {alongCoursesMode ?
-                !loading && <CoursesDetailCard alongCourse={alongCourse} />
+                !loading && <CoursesDetailCard alongCourse={course} />
+            : alongBluesMode ?
+                !loading && <CoursesDetailCard alongCourse={course} />
             : <CoursesDetailCard id={id} />
             }
             <Footer />

diff --git a/src/pages/MyAlongBlues.jsx b/src/pages/MyAlongBlues.jsx
@@ -0,0 +1,38 @@
+import "../styles/Page.css";
+import CourseItemList from "../components/CourseItemList";
+import Footer from "../components/Footer";
+import PageHeader from "../components/PageHeader";
+import { useEffect, useState } from "react";
+import { getMyAlongBlues } from "../utils/data";
+
+const MyAlongBlues = () => {
+  const [loading, setLoading] = useState(false);
+  const [courses, setCourses] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const data = await getMyAlongBlues();
+        setCourses(data);
+
+      } catch (error) {
+        console.error("데이터를 불러오는데 문제가 발생했습니다.", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <div className="page-container">
+      <PageHeader title={"내 바당따라"} />
+      <CourseItemList myPageMode={true} courses = {courses} alongCourse = {false}/>
+      <Footer />
+    </div>
+  );
+};
+
+export default MyAlongBlues;
diff --git a/src/pages/MyAlongCourses.jsx b/src/pages/MyAlongCourses.jsx
@@ -7,14 +7,14 @@ import { getMyAlongCourses } from "../utils/data";
 
 const MyAlongCourses = () => {
   const [loading, setLoading] = useState(false);
-  const [alongCourses, setAlongCourses] = useState([]);
+  const [courses, setCourses] = useState([]);
 
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
       try {
         const data = await getMyAlongCourses();
-        setAlongCourses(data);
+        setCourses(data);
 
       } catch (error) {
         console.error("데이터를 불러오는데 문제가 발생했습니다.", error);
@@ -29,7 +29,7 @@ const MyAlongCourses = () => {
   return (
     <div className="page-container">
       <PageHeader title={"내 여행따라"} />
-      <CourseItemList alongCourses={alongCourses} />
+      <CourseItemList myPageMode={true} courses={courses} alongCourse={true}/>
       <Footer />
     </div>
   );