Merge pull request #15 from collie-jun/main

QA전 확인
100-hours-a-week · Aug 25, 2024 · 350e2a7 · 350e2a7
2 parents e6120da + c8d87ab
commit 350e2a7
Show file tree

Hide file tree

Showing 17 changed files with 979 additions and 316 deletions.
diff --git a/travelday-fe/package-lock.json b/travelday-fe/package-lock.json
diff --git a/travelday-fe/package.json b/travelday-fe/package.json
@@ -15,6 +15,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-date-range": "^2.0.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^15.0.1",
     "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.12",

diff --git a/travelday-fe/src/App.js b/travelday-fe/src/App.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';
 import { useJsApiLoader } from '@react-google-maps/api';
 import FindPage from './pages/searchPage/searchingPage';
 import FlightResultPage from './pages/resultPage/flightResultPage';
@@ -22,6 +22,7 @@ import CreateSchedulePage from './pages/schedulePage/createSchedulePage';
 import FixSchedulePage from './pages/schedulePage/fixschedulePage';  
 
 import './App.css';
+import './i18n'; 
 
 const libraries = ['places']; 
 
@@ -38,28 +39,46 @@ function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<MainPage />} />
-        <Route path="/maindetail/:id" element={<MainDetailPage />} />
-        <Route path="/login" element={<LoginPage />} /> 
-        <Route path="/search" element={<FindPage />} />
-        <Route path="/flight" element={<FlightResultPage />} />
-        <Route path="/hotel" element={<HotelResultPage />} /> 
-        <Route path="/hotel/hotel-detail" element={<HotelDetailPage />} />
-        <Route path="/login/oauth2/success" element={<Callback />} />
-        <Route path="/mypage" element={<MyPage />} />
-        <Route path="/nickname" element={<Nickname />} />
-        <Route path="/map" element={<MapPage />} />
-        <Route path="/schedule" element={<SchedulePage />} />
-        <Route path="/schedule/:travelRoomId" element={<ScheduleDetail />} />
-        <Route path="/wishlist/:travelRoomId" element={<WishListPage />} /> 
-        <Route path="/maplocation/:travelRoomId" element={<MapLocationPage />} /> 
-        <Route path="/alarm" element={<AlarmPage />} />
-        <Route path="/intro" element={<IntroPage />} /> 
-        <Route path="/createschedule" element={<CreateSchedulePage />} /> 
-        <Route path="/fixschedule/:travelRoomId" element={<FixSchedulePage />} />
+        <Route path="/*" element={<MainRouter />} />
       </Routes>
     </Router>
   );
 }
 
+function MainRouter() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const isFirstVisit = !localStorage.getItem('visited');
+    if (isFirstVisit) {
+      localStorage.setItem('visited', 'true');
+      navigate('/intro');
+    }
+  }, [navigate]);
+
+  return (
+    <Routes>
+      <Route path="/" element={<MainPage />} />
+      <Route path="/maindetail/:id" element={<MainDetailPage />} />
+      <Route path="/login" element={<LoginPage />} /> 
+      <Route path="/search" element={<FindPage />} />
+      <Route path="/flight" element={<FlightResultPage />} />
+      <Route path="/hotel" element={<HotelResultPage />} /> 
+      <Route path="/hotel/hotel-detail" element={<HotelDetailPage />} />
+      <Route path="/login/oauth2/success" element={<Callback />} />
+      <Route path="/mypage" element={<MyPage />} />
+      <Route path="/nickname" element={<Nickname />} />
+      <Route path="/map" element={<MapPage />} />
+      <Route path="/schedule" element={<SchedulePage />} />
+      <Route path="/schedule/:travelRoomId" element={<ScheduleDetail />} />
+      <Route path="/wishlist/:travelRoomId" element={<WishListPage />} /> 
+      <Route path="/maplocation/:travelRoomId" element={<MapLocationPage />} /> 
+      <Route path="/alarm" element={<AlarmPage />} />
+      <Route path="/intro" element={<IntroPage />} /> 
+      <Route path="/createschedule" element={<CreateSchedulePage />} /> 
+      <Route path="/fixschedule/:travelRoomId" element={<FixSchedulePage />} />
+    </Routes>
+  );
+}
+
 export default App;
diff --git a/travelday-fe/src/components/mainPage/japanSaleList.js b/travelday-fe/src/components/mainPage/japanSaleList.js
@@ -1,19 +1,30 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
 import Image7 from '../../images/main/list2/7.png';
 import Image8 from '../../images/main/list2/8.png';
 import Image9 from '../../images/main/list2/9.png';
 import Image10 from '../../images/main/list2/10.png';
 
 const JapanSaleList = () => {
-  const images = [Image7, Image8, Image9, Image10];
+  const navigate = useNavigate();
+  const images = [
+    { src: Image7, id: 7 }, 
+    { src: Image8, id: 8 },
+    { src: Image9, id: 9 },
+    { src: Image10, id: 10 }
+  ];
+
+  const handleImageClick = (flightId) => {
+    navigate(`/maindetail/${flightId}`); 
+  };
 
   return (
     <Wrapper>
       <ListContainer>
         {images.map((image, index) => (
-          <ListItem key={index}>
-            <Image src={image} alt={`sale-${index}`} />
+          <ListItem key={index} onClick={() => handleImageClick(image.id)}>
+            <Image src={image.src} alt={`sale-${index}`} />
           </ListItem>
         ))}
       </ListContainer>
@@ -25,31 +36,32 @@ export default JapanSaleList;
 
 const Wrapper = styled.div`
   width: 100%;
-  overflow-x: auto; /* 가로 스크롤을 활성화 */
+  overflow-x: auto;
   padding-bottom: 10px;
-  -webkit-overflow-scrolling: touch; /* 스크롤에 부드러운 효과를 주기 위한 속성 */
-  scrollbar-width: none; /* Firefox에서 스크롤바 숨기기 */
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
   &::-webkit-scrollbar {
-    display: none; /* Webkit 기반 브라우저에서 스크롤바 숨기기 */
+    display: none;
   }
 `;
 
 const ListContainer = styled.div`
   display: flex;
   gap: 20px;
-  width: max-content; /* 컨텐츠의 크기에 맞게 컨테이너 크기를 설정 */
+  width: max-content;
 `;
 
 const ListItem = styled.div`
   width: 290px;
   height: 290px;
-  flex-shrink: 0; /* 아이템 크기를 고정 */
+  flex-shrink: 0;
   border-radius: 8px;
-  overflow: hidden; /* 이미지를 아이템 경계에 맞게 잘라냄 */
+  overflow: hidden;
+  cursor: pointer;
 `;
 
 const Image = styled.img`
   width: 100%;
   height: 100%;
-  object-fit: cover; /* 이미지가 박스에 맞게 크기 조정 */
+  object-fit: cover;
 `;