Merge pull request #13 from AlongTheBlue/dev

route 적용
AlongTheBlue · Sep 29, 2024 · f18a0f4 · f18a0f4
2 parents 330fa00 + a78a763
commit f18a0f4
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 27 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -47,15 +47,15 @@ function App() {
       <div className="App">
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="/:category/list" element={<ItemList />} />
-          <Route path="/:title/detail/:id" element={<ItemDetail />} />
-          <Route path="/around" element={<Around />}/>
-          <Route path="/along/courses" element={<AlongCourses />} />
-          <Route path="/along/courses/:id" element={<CoursesDetail alongCoursesMode={true}/>} />
-          <Route path="/along/blues" element={<AlongBlues />} />
-          <Route path="/along/blues/:id" element={<AlongBluesPlan />} />
-          <Route path="/courses" element={<Courses />} />
-          <Route path="/courses/:id" element={<CoursesDetail />} />
+          <Route path="/:category/list" element={<ItemList />} />         {/* 전체보기 */}
+          <Route path="/:title/detail/:id" element={<ItemDetail />} />    {/* 상세보기 */}
+          <Route path="/around" element={<Around />}/>                    {/* 내주변 */}
+          <Route path="/along/courses" element={<AlongCourses />} />      {/* 여행따라 */}
+          <Route path="/along/courses/:id" element={<CoursesDetail alongCoursesMode={true}/>} /> {/* 여행따라 상세 */}
+          <Route path="/along/blues" element={<AlongBlues />} />          {/* 바당따라 */}
+          <Route path="/along/blues/:id" element={<AlongBluesPlan />} />  {/* 바당따라 여행코스 */}
+          <Route path="/courses/list" element={<Courses />} />            {/* 여행코스 */}
+          <Route path="/courses/detail/:id" element={<CoursesDetail />} />{/* 여행코스 상세 */}
         </Routes>
       </div>
     </BrowserRouter>

diff --git a/src/components/HomeCategory.jsx b/src/components/HomeCategory.jsx
@@ -5,14 +5,14 @@ import "../styles/HomeCategory.css" ;
 const categories = [
   { icon: '/images/icon/category_1.svg', label: '바당따라', route: '/along/blues'},
   { icon: '/images/icon/category_2.svg', label: '내주변', route: '/around'},
-  { icon: '/images/icon/category_3.svg', label: '여행코스', route: '/courses'},
+  { icon: '/images/icon/category_3.svg', label: '여행코스', route: '/courses/list'},
   { icon: '/images/icon/category_4.svg', label: '여행따라', route:'/along/courses' },
-  // { icon: '/images/icon/category_5.svg', label: '찜' , route: '/my/likes'},
-  { icon: '/images/icon/category_6.svg', label: '관광' , route: '/list/관광'},
-  { icon: '/images/icon/category_7.svg', label: '숙소', route: '/list/숙소' },
-  { icon: '/images/icon/category_8.svg', label: '음식', route: '/list/음식' },
-  { icon: '/images/icon/category_9.svg', label: '카페', route: '/list/카페' },
-  // { icon: '/images/icon/category_10.svg', label: '마이', route: '/my' }
+  { icon: '/images/icon/category_5.svg', label: '찜' , route: '/my/likes'},
+  { icon: '/images/icon/category_6.svg', label: '관광' , route: '/tour/list'},
+  { icon: '/images/icon/category_7.svg', label: '숙소', route: '/accommodation/list' },
+  { icon: '/images/icon/category_8.svg', label: '음식', route: '/restaurant/list' },
+  { icon: '/images/icon/category_9.svg', label: '카페', route: '/cafe/list' },
+  { icon: '/images/icon/category_10.svg', label: '마이', route: '/my' }
 ];
 
 function Category() {

diff --git a/src/components/SquareCard.jsx b/src/components/SquareCard.jsx
@@ -6,7 +6,7 @@ function SquareCard({item, category}) {
   const navigate = useNavigate();
 
   const handleDetailViewClick = () => {
-    navigate(`/${category}/detail/${item.id}`);
+      navigate(`/${category}/detail/${item.id}`)
   };
 
   return (
@@ -25,8 +25,15 @@ function SquareCard({item, category}) {
         }}
       />
       <div className="square-card-info">
-        <div className="square-card-name">{item.name}</div>
-        <div className="square-card-address">{item.address}</div>
+        <div>
+          <div className="square-card-name">{item.name}</div>
+        </div>
+        <div>
+          {item.address ? 
+            <div className="square-card-address">{item.address}</div> : 
+            <div className="square-card-hashtag">{item.hashtag}</div>
+          } 
+        </div>
       </div>
     </div>
   );

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -28,7 +28,10 @@ const cafes = [
   { id: 2, name: '가는곶 세화', address: '제주시 세화14길', image: 'http://tong.visitkorea.or.kr/cms/resource/08/2850908_image2_1.jpg'}
 ];
 
-// const tourCourses = [];
+const tourCourses = [
+  {id:1, name: "제주 맛집 리스트", hashtag: "#맛집", image: '/images/course/jeju.jpg'},
+  {id:2, name: "제주 바다 여행지", hashtag: "#바다", image: '/images/course/jeju3.jpg'}
+];
 
 function Home() {
   return (
@@ -40,7 +43,7 @@ function Home() {
       <SquareCardList category="accommodation" title="숙소" items={accommodations}/>
       <SquareCardList category="restaurant" title="음식" items={foods}/>
       <SquareCardList category="cafe" title="카페" items={cafes}/>
-      <SquareCardList category="courses" title="여행코스" items={accommodations}/>
+      <SquareCardList category="courses" title="여행코스" items={tourCourses}/>
       <Footer/>
     </div>
   );

diff --git a/src/pages/ItemList.jsx b/src/pages/ItemList.jsx
@@ -41,7 +41,8 @@ function ItemList() {
     if(category == "tour") title = "관광";
     else if(category == "restaurant") title = "음식";
     else if(category == "accommodation") title = "숙소";
-    else title = "카페";
+    else if(category == "cafe") title = "카페";
+    else title = "여행코스"
 
     return (
         <div className="page-container">

diff --git a/src/styles/HomeCategory.css b/src/styles/HomeCategory.css
@@ -19,10 +19,10 @@
 } */
 
 .home-category {
-  width: 80%;
+  width: 90%;
   display: grid;
-  grid-template-columns: repeat(4, 1fr); /* 4열로 설정 */
-  margin: 2% auto 0;
+  grid-template-columns: repeat(5, 1fr);
+  margin: 3% auto 0;
 }
 
 .home-category-item {
@@ -33,5 +33,5 @@
 }
 
 .home-category-icon {
-  width: 30%; /* 아이콘 크기 조정 */
+  width: 30%;
 }
diff --git a/src/styles/SquareCard.css b/src/styles/SquareCard.css
@@ -19,8 +19,15 @@
     font-weight: 700;
 }
 
+.square-card-address, .square-card-hashtag {
+    font-weight: 300;
+}
 .square-card-address {
     font-size: 0.6em;
-    font-weight: 300;
     padding: 0.8em 0;
 }
+
+.square-card-hashtag {
+    font-size: 0.8em;
+    padding: 0.6em 0;
+}