Merge pull request #11 from AlongTheBlue/dev

route 변경
AlongTheBlue · Sep 29, 2024 · 330fa00 · 330fa00
2 parents 8145b3f + 7c6da99
commit 330fa00
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 21 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -47,7 +47,7 @@ function App() {
       <div className="App">
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="/list/:title" element={<ItemList />} />
+          <Route path="/:category/list" element={<ItemList />} />
           <Route path="/:title/detail/:id" element={<ItemDetail />} />
           <Route path="/around" element={<Around />}/>
           <Route path="/along/courses" element={<AlongCourses />} />

diff --git a/src/components/CardHeader.jsx b/src/components/CardHeader.jsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import "../styles/CardHeader.css"
 
-function CardHeader({title}) {
+function CardHeader({title, category}) {
   const navigate = useNavigate();
 
   const handleAllViewClick = () => {
-    navigate(`/list/${title}`);
+    navigate(`/${category}/list`);
   };
 
   return (

diff --git a/src/components/CircleCard.jsx b/src/components/CircleCard.jsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import "../styles/CircleCard.css";
 
-function CircleCard({ item, title }) {
+function CircleCard({ item, category }) {
   const navigate = useNavigate();
 
   const handleDetailViewClick = () => {
-    navigate(`/${title}/detail/${item.id}`);
+    navigate(`/${category}/detail/${item.id}`);
   };
 
   return (

diff --git a/src/components/CircleCardList.jsx b/src/components/CircleCardList.jsx
@@ -3,13 +3,13 @@ import "../styles/CircleCardList.css";
 import CardHeader from './CardHeader';
 import CircleCard from './CircleCard';
 
-function CircleCardList({ title, items }) {
+function CircleCardList({ category, title, items}) {
   return (
     <div className="circle-card-list-container">
-      <CardHeader title={title} />
+      <CardHeader title={title} category={category}/>
       <div className="circle-card-list">
         {items.map((item, index) => (
-          <CircleCard key={index} item={item} title={title}/>
+          <CircleCard key={index} item={item} category={category}/>
         ))}
       </div>
     </div>

diff --git a/src/components/ItemCardList.jsx b/src/components/ItemCardList.jsx
@@ -7,8 +7,8 @@ function ItemCardList({items}) {
     return (
         <div className="item-card-list-container">
             <div className="item-card-list">
-                {items.map(item => (
-                    <ItemCard key={item.id} item={item} />
+                {items.map((item, index)=> (
+                    <ItemCard key={index} item={item} />
                 ))}
             </div>
         </div>

diff --git a/src/components/SquareCard.jsx b/src/components/SquareCard.jsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import "../styles/SquareCard.css";
 
-function SquareCard({item, title}) {
+function SquareCard({item, category}) {
   const navigate = useNavigate();
 
   const handleDetailViewClick = () => {
-    navigate(`/${title}/detail/${item.id}`);
+    navigate(`/${category}/detail/${item.id}`);
   };
 
   return (

diff --git a/src/components/SquareCardList.jsx b/src/components/SquareCardList.jsx
@@ -3,13 +3,13 @@ import "../styles/SquareCardList.css";
 import SquareCard from './SquareCard';
 import CardHeader from './CardHeader';
 
-function SquareCardList({title, items}) {
+function SquareCardList({category, title, items}) {
   return (
     <div className="square-card-list-container">
-      <CardHeader title={title} />
+      <CardHeader title={title} category={category}/>
       <div className="square-card-list">
         {items.map((item, index) => (
-          <SquareCard key={index} item={item} title={title}/>
+          <SquareCard key={index} item={item} category={category}/>
         ))}
       </div>
     </div>

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -36,11 +36,11 @@ function Home() {
       <Header />
       <Search />
       <HomeCategory />
-      <CircleCardList title="관광" items={touristSpots}/>
-      <SquareCardList title="숙소" items={accommodations}/>
-      <SquareCardList title="음식" items={foods}/>
-      <SquareCardList title="카페" items={cafes}/>
-      <SquareCardList title="여행코스" items={accommodations}/>
+      <CircleCardList category="tour" title="관광" items={touristSpots}/>
+      <SquareCardList category="accommodation" title="숙소" items={accommodations}/>
+      <SquareCardList category="restaurant" title="음식" items={foods}/>
+      <SquareCardList category="cafe" title="카페" items={cafes}/>
+      <SquareCardList category="courses" title="여행코스" items={accommodations}/>
       <Footer/>
     </div>
   );

diff --git a/src/pages/ItemList.jsx b/src/pages/ItemList.jsx
@@ -35,7 +35,13 @@ const foods = [
 
 function ItemList() {
 
-    const { title } = useParams();
+    const { category } = useParams();
+
+    let title = '';
+    if(category == "tour") title = "관광";
+    else if(category == "restaurant") title = "음식";
+    else if(category == "accommodation") title = "숙소";
+    else title = "카페";
 
     return (
         <div className="page-container">