Merge pull request #70 from collie-jun/main

Add: footer
100-hours-a-week · Aug 27, 2024 · 36ede84 · 36ede84
2 parents bf91926 + 373fd15
commit 36ede84
Show file tree

Hide file tree

Showing 16 changed files with 271 additions and 229 deletions.
diff --git a/travelday-fe/src/components/mainPage/mockData.js b/travelday-fe/src/components/mainPage/mockData.js
@@ -1,200 +0,0 @@
-// src/data/mockData.js
-
-import Image1 from '../../images/main/list1/1.png';
-import Image2 from '../../images/main/list1/2.png';
-import Image3 from '../../images/main/list1/3.png';
-import Image4 from '../../images/main/list1/4.png';
-import Image5 from '../../images/main/list1/5.png';
-import Image6 from '../../images/main/list1/6.png';
-
-export const images = {
-  1: Image1,
-  2: Image2,
-  3: Image3,
-  4: Image4,
-  5: Image5,
-  6: Image6,
-};
-
-export const flightData = {
-  1: {
-    airline: '대한항공',
-    segments: [
-      {
-        departure: {
-          iataCode: 'ICN',
-          at: '09:00',
-        },
-        arrival: {
-          iataCode: 'HND',
-          at: '11:30',
-        },
-        duration: '2시간 30분',
-      },
-    ],
-    returnSegments: [
-      {
-        departure: {
-          iataCode: 'HND',
-          at: '13:00',
-        },
-        arrival: {
-          iataCode: 'ICN',
-          at: '15:30',
-        },
-        duration: '2시간 30분',
-      },
-    ],
-    price: '1,000,000원',
-  },
-  2: {
-    airline: '아시아나항공',
-    segments: [
-      {
-        departure: {
-          iataCode: 'ICN',
-          at: '11:00',
-        },
-        arrival: {
-          iataCode: 'NRT',
-          at: '13:00',
-        },
-        duration: '2시간 0분',
-      },
-    ],
-    returnSegments: [
-      {
-        departure: {
-          iataCode: 'NRT',
-          at: '15:00',
-        },
-        arrival: {
-          iataCode: 'ICN',
-          at: '17:00',
-        },
-        duration: '2시간 0분',
-      },
-    ],
-    price: '900,000원',
-  },
-  3: {
-    airline: '제주항공',
-    segments: [
-      {
-        departure: {
-          iataCode: 'ICN',
-          at: '13:00',
-        },
-        arrival: {
-          iataCode: 'KIX',
-          at: '15:00',
-        },
-        duration: '2시간 0분',
-      },
-    ],
-    returnSegments: [
-      {
-        departure: {
-          iataCode: 'KIX',
-          at: '17:00',
-        },
-        arrival: {
-          iataCode: 'ICN',
-          at: '19:00',
-        },
-        duration: '2시간 0분',
-      },
-    ],
-    price: '150,000원',
-  },
-  4: {
-    airline: '진에어',
-    segments: [
-      {
-        departure: {
-          iataCode: 'PUS',
-          at: '09:30',
-        },
-        arrival: {
-          iataCode: 'HKG',
-          at: '12:30',
-        },
-        duration: '3시간 0분',
-      },
-    ],
-    returnSegments: [
-      {
-        departure: {
-          iataCode: 'HKG',
-          at: '14:00',
-        },
-        arrival: {
-          iataCode: 'PUS',
-          at: '17:00',
-        },
-        duration: '3시간 0분',
-      },
-    ],
-    price: '200,000원',
-  },
-  5: {
-    airline: '에어부산',
-    segments: [
-      {
-        departure: {
-          iataCode: 'PUS',
-          at: '08:00',
-        },
-        arrival: {
-          iataCode: 'FUK',
-          at: '10:00',
-        },
-        duration: '2시간 0분',
-      },
-    ],
-    returnSegments: [
-      {
-        departure: {
-          iataCode: 'FUK',
-          at: '12:00',
-        },
-        arrival: {
-          iataCode: 'PUS',
-          at: '14:00',
-        },
-        duration: '2시간 0분',
-      },
-    ],
-    price: '180,000원',
-  },
-  6: {
-    airline: '티웨이항공',
-    segments: [
-      {
-        departure: {
-          iataCode: 'ICN',
-          at: '10:00',
-        },
-        arrival: {
-          iataCode: 'DAD',
-          at: '13:00',
-        },
-        duration: '4시간 0분',
-      },
-    ],
-    returnSegments: [
-      {
-        departure: {
-          iataCode: 'DAD',
-          at: '15:00',
-        },
-        arrival: {
-          iataCode: 'ICN',
-          at: '20:00',
-        },
-        duration: '5시간 0분',
-      },
-    ],
-    price: '300,000원',
-  },
-};

diff --git a/travelday-fe/src/components/mainPage/newFlightList.js b/travelday-fe/src/components/mainPage/newFlightList.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 
-// 이미지 임포트
+
 import Image1 from '../../images/main/list1/PQC.png';
 import Image2 from '../../images/main/list1/OIT.png';
 import Image3 from '../../images/main/list1/DPS.png';

diff --git a/travelday-fe/src/components/resultPage/flightResultList.js b/travelday-fe/src/components/resultPage/flightResultList.js
@@ -78,11 +78,8 @@ const FlightResultList = () => {
 
 export default FlightResultList;
 
-// Styled components definitions remain the same as previously given.
 
 
-// styled-components 그대로 유지
-
 const ListContainer = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/travelday-fe/src/components/shared/footer.js b/travelday-fe/src/components/shared/footer.js
@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+
+function Footer() {
+  const [showTerms, setShowTerms] = useState(false);
+  const [showPrivacy, setShowPrivacy] = useState(false);
+  const [email, setEmail] = useState(''); // 이메일 입력값을 관리하는 state
+
+  const toggleTerms = () => {
+    setShowTerms(!showTerms);
+  };
+
+  const togglePrivacy = () => {
+    setShowPrivacy(!showPrivacy);
+  };
+
+  const handleSubscribe = () => {
+    // 구독 로직을 추가할 수 있는 부분
+    console.log(`Subscribed with email: ${email}`);
+    setEmail(''); // 구독 후 이메일 입력란을 초기화
+  };
+
+  return (
+    <footer style={styles.footer}>
+      <div style={styles.container}>
+        <h2 style={styles.title}>여행한 DAY</h2>
+        <p style={styles.description}>여행을 동행인과 함께 상의하고 관리할 수 있습니다.</p>
+
+        <div style={styles.toggleContainer}>
+          <button style={styles.toggleButton} onClick={toggleTerms}>이용약관</button>
+          <button style={styles.toggleButton} onClick={togglePrivacy}>개인정보 처리방침</button>
+        </div>
+
+        {showTerms && <p style={styles.terms}>[이용약관]</p>}
+        {showPrivacy && <p style={styles.privacy}>[개인정보 처리방침]</p>}
+
+        <p style={styles.contact}>문의: [email protected] | 전화: 123-456-7890</p>
+
+        <div style={styles.newsletter}>
+          <p style={styles.newsletterText}>뉴스레터 구독하기</p>
+          <input
+            type="email"
+            placeholder="이메일 입력"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)} // 입력값을 state에 저장
+            style={styles.emailInput}
+          />
+          <button style={styles.subscribeButton} onClick={handleSubscribe}>구독</button>
+        </div>
+
+        <p style={styles.address}>주소: 제주 제주시 도남로 168-12</p>
+        <p style={styles.copyright}>© 2024 여행한 DAY. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+}
+
+const styles = {
+  footer: {
+    width: '100%',
+    backgroundColor: '#fff',
+    color: '#333',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '20px',
+    boxSizing: 'border-box',
+    borderTop: '1px solid #e0e0e0',
+    flexDirection: 'column',
+  },
+  container: {
+    textAlign: 'center',
+    maxWidth: '500px',
+    width: '100%',
+  },
+  title: {
+    fontSize: '18px',
+    fontWeight: 'bold',
+    margin: '10px 0',
+    color: '#555',
+  },
+  description: {
+    fontSize: '14px',
+    margin: '0 0 20px 0',
+    lineHeight: '1.6',
+    color: '#666',
+  },
+  toggleContainer: {
+    marginBottom: '15px',
+  },
+  toggleButton: {
+    margin: '0 5px',
+    backgroundColor: '#e0e0e0',
+    color: '#555',
+    padding: '8px 15px',
+    fontSize: '12px',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    transition: 'background-color 0.3s ease',
+  },
+  terms: {
+    fontSize: '12px',
+    color: '#666',
+    margin: '10px 0',
+    textAlign: 'left',
+  },
+  privacy: {
+    fontSize: '12px',
+    color: '#666',
+    margin: '10px 0',
+    textAlign: 'left',
+  },
+  contact: {
+    fontSize: '12px',
+    color: '#888',
+    marginBottom: '20px',
+  },
+  newsletter: {
+    marginBottom: '20px',
+  },
+  newsletterText: {
+    fontSize: '14px',
+    marginBottom: '10px',
+    color: '#555',
+  },
+  emailInput: {
+    padding: '8px',
+    fontSize: '14px',
+    border: '1px solid #ddd',
+    borderRadius: '5px',
+    width: '70%',
+    marginRight: '10px',
+  },
+  subscribeButton: {
+    padding: '8px 15px',
+    fontSize: '14px',
+    border: 'none',
+    borderRadius: '5px',
+    backgroundColor: '#e0e0e0',
+    cursor: 'pointer',
+    transition: 'background-color 0.3s ease',
+  },
+  address: {
+    fontSize: '12px',
+    color: '#888',
+    marginTop: '20px',
+  },
+  copyright: {
+    fontSize: '12px',
+    color: '#aaa',
+    marginTop: '10px',
+  },
+};
+
+export default Footer;