Trendithon-cardo · sinyoung6491 · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025
diff --git a/src/assets/scss/history_style/_history.scss b/src/assets/scss/history_style/_history.scss
@@ -1,4 +1,5 @@
 #historypage_contain {
+    height: calc(100vh - 150px);
     .top_list_style {
         display: flex;
         justify-content: space-between;
@@ -81,7 +82,7 @@
     .history_bottom_div {
         width: 100%;
         position: fixed;
-        bottom: 0;
+        bottom: 100px;
         padding: 7px 30px 0;
         background-color: #FFF;
 

diff --git a/src/constant/routeConstants.js b/src/constant/routeConstants.js
@@ -1,6 +1,5 @@
 // src/constants/routeConstants.js
 export const ROUTE_PATHS = {
-  HOME: "/",
   MAIN: "/main",
   SIGNUP: "/signup",
   LOGIN: "/login",
@@ -16,7 +15,7 @@ export const ROUTE_PATHS = {
   HOMECHECKFIX:"/home_check_fix",
   HOMEWRITE:"/home_write",
   HOMEWRITEFIX:"/home_write_fix",
-  SPLASH:"/splash",
+  SPLASH:"/",
   MYPAGE:"/mypage",
   ONBOARDING:"/onboarding",
   NOT_FOUND: "*",

diff --git a/src/layouts/DefaultLayout.jsx b/src/layouts/DefaultLayout.jsx
@@ -5,7 +5,7 @@ import { Header } from "@components/layout/header/Header";
 export const DefaultLayout = () => {
   const location = useLocation();
 
-  const isHomePage = location.pathname === "/splash";
+  const isHomePage = location.pathname === "/";
 
   return (
     <>

diff --git a/src/pages/historypage/HistoryDetailPage.jsx b/src/pages/historypage/HistoryDetailPage.jsx
@@ -45,26 +45,27 @@ const HistoryDetailPage = () => {
             <div className="date_div">
                 <p className="title">경험 기간</p>
                 <div className="calender">
-                    <input type="date" name="" id="" />
+                    <input type="date" value="2025-02-24" />
                     <hr />
-                    <input type="date" name="" id="" />
+                    <input type="date" value="2025-02-25" />
                 </div>
             </div>
             <div className="feel_div">
                 <p className="title">느낀 점</p>
-                <input type="text" className='feel' placeholder='이 경험에서 느낀 점을 자세히 작성해주세요.' />
+                <input type="text" className='feel' placeholder='이 경험에서 느낀 점을 자세히 작성해주세요.' value={"너무 신기했습니다"}/>
                 <div className="img_slide_div">
 
                 </div>
             </div>
             <div className="after_div">
                 <p className="title">발전 방향</p>
-                <textarea className='after_text' rows={1} onChange={autoResizeTextarea}>
-
+                <textarea className='after_text' rows={1} onChange={autoResizeTextarea} value={"앞으로도 더 많이 가봐야겠다."}>
+                    앞으로도 더 많이 가봐야겠다.
                 </textarea>
             </div>
             <div className="history_detail_bottom_div">
                 <div className="next_btn">수정하기</div>
+
             </div>
 
         </div>

diff --git a/src/pages/historypage/Historypage.jsx b/src/pages/historypage/Historypage.jsx
@@ -6,6 +6,7 @@ import type_arrow from '../../assets/icons/history/type_arrow.svg'
 import close from '../../assets/icons/history/close.svg'
 import icon from '../../assets/icons/history/popup_icon.svg'
 import HistoryList from '@components/history/HistoryList'
+import { MainFooter } from '@components/layout/footer/mainfooter/MainFooter';
 
 const Historypage = () => {
     const [isPopupVisible, setIsPopupVisible] = useState(false);
@@ -14,7 +15,7 @@ const Historypage = () => {
     const navigate = useNavigate();
 
     const historyData = [
-        { id: 1, title: '혼자 여행 떠나기', rating: 4.25, experienceType: '내가 따라한 경험' },
+        { id: 1, title: '혼자 여행 떠나기', rating: 4.5, experienceType: '내가 따라한 경험' },
         { id: 2, title: '요리 배우기', rating: 4.5, experienceType: '내가 작성한 경험' },
         { id: 3, title: '마라톤 참가하기', rating: 5.0, experienceType: '내가 따라한 경험' },
       ];
@@ -105,6 +106,7 @@ const Historypage = () => {
             <div className="history_bottom_div">
                 <div className={`next_btn ${selectedHistories.length > 0 ? 'active' : 'inactive'}`} onClick={openPopup}>결산하기</div>
             </div>
+            <MainFooter/>
             {isPopupVisible && (
                 <div className="popup_div">
                     <div className="loading_div">

diff --git a/src/pages/homecheck/HomeCheck.jsx b/src/pages/homecheck/HomeCheck.jsx
@@ -1,18 +1,48 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { instance } from '../../services/instance';
 import card_img_r from '../../assets/icons/history/card_img_r.svg'
 import card_img_l from '../../assets/icons/history/card_img_l.svg'
 
 const HomeCheck = () => {
     const navigate = useNavigate();
+    const [experienceData, setExperienceData] = useState(null);
+    const [startDate, setStartDate] = useState('');
+    const [endDate, setEndDate] = useState('');
+
+    useEffect(() => {
+        const fetchExperienceData = async () => {
+          try {
+            const response = await instance.get('/cards/experience'); // ✅ 토큰이 자동으로 포함된 요청
+            if (response.data.success) {
+              setExperienceData(response.data);
+              setStartDate(response.data.startDate);
+              setEndDate(response.data.endDate);
+            }
+          } catch (error) {
+            console.error('API 요청 실패:', error);
+          }
+        };
 
-        const GotoFix = () => {
-            navigate('/home_check_fix');
-        }
+        fetchExperienceData();
+      }, []);
+
+      const GotoFix = () => {
+        // ✅ 데이터 전달
+        navigate('/home_check_fix', {
+          state: {
+            experienceData,
+            startDate,
+            endDate
+          }
+        });
+      };
     return (
         <div className='home_check_container'>
             <p className="page_root">홈 &gt; 확인하기</p>
-            <div className="top_card_div">
+            <div className="top_card_div" style={{
+          backgroundColor: experienceData ? experienceData.cover : '#FFFFFF',
+        }}>
                 <img src={card_img_l} className="card_img" />
                 <div className="text_div">
                     <p className="bottom">혼자 여행 떠나기</p>
@@ -22,9 +52,11 @@ const HomeCheck = () => {
             <div className="date_div">
                 <p className="title">목표 기간</p>
                 <div className="calender">
-                    <input type="date" name="" id="" />
+                    <input type="date" value={startDate}
+            onChange={(e) => setStartDate(e.target.value)} />
                     <hr />
-                    <input type="date" name="" id="" />
+                    <input type="date" value={endDate}
+            onChange={(e) => setEndDate(e.target.value)} />
                 </div>
             </div>
             <div className="history_detail_bottom_div">

diff --git a/src/pages/homecheck/HomeCheckFix.jsx b/src/pages/homecheck/HomeCheckFix.jsx
@@ -1,6 +1,6 @@
 import * as S from "./styled.js";
-import React from 'react'
-import { useNavigate } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
 import card_img_r from '../../assets/icons/history/card_img_r.svg'
 import card_img_l from '../../assets/icons/history/card_img_l.svg'
 import plus from "/images/apply/plus.svg";
@@ -11,15 +11,19 @@ import { useSelect } from "@hooks/useSelect";
 
 const HomeCheckFix = () => {
     const navigate = useNavigate();
+    const location = useLocation(); // ✅ 데이터 받기
+    const { experienceData, startDate: initialStartDate, endDate: initialEndDate } = location.state || {};
     const { SelectData, SelectHandlers } = useSelect();
+    const [startDate, setStartDate] = useState(initialStartDate || '');
+  const [endDate, setEndDate] = useState(initialEndDate || '');
 
     const GotoDone = () => {
         navigate('/home_check');
     }
     return (
         <div className='home_check_fix_container'>
             <p className="page_root">홈 &gt; 확인하기</p>
-            <div className="top_card_div">
+            <div className="top_card_div" style={{ backgroundColor: experienceData ? experienceData.cover : '#FFFFFF' }}>
                 <img src={card_img_l} className="card_img" />
                 <div className="text_div">
                     <p className="bottom">혼자 여행 떠나기</p>
@@ -29,9 +33,9 @@ const HomeCheckFix = () => {
             <div className="date_div">
                 <p className="title">목표 기간</p>
                 <div className="calender">
-                    <input type="date" name="" id="" />
+                    <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
                     <hr />
-                    <input type="date" name="" id="" />
+                    <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
                 </div>
             </div>
             <hr className='separate_line' />

diff --git a/src/pages/homecheck/HomeWrite.jsx b/src/pages/homecheck/HomeWrite.jsx
@@ -9,6 +9,7 @@ import empty_star from '../../assets/icons/history/empty_star.svg'
 import plus from "/images/apply/plus.svg";
 import { InputAndTitle } from "@components/common/inputs/inputandtitle/InputAndTitle";
 import { useSelect } from "@hooks/useSelect";
+import { instance } from '../../services/instance';
 
 const HomeWrite = () => {
     const navigate = useNavigate();
@@ -45,6 +46,16 @@ const HomeWrite = () => {
 
         setStarRatings(updatedStars);
     };
+
+    const calculateScore = () => {
+        let score = 0;
+        starRatings.forEach((rating) => {
+          if (rating === 'full') score += 1;
+          else if (rating === 'half') score += 0.5;
+        });
+        return score;
+      };
+
     const handleImageUpload = (event) => {
         const files = event.target.files;
         const newImages = [];
@@ -87,6 +98,40 @@ const HomeWrite = () => {
     const GotoDone = () => {
         navigate('/history_detail');
     }
+    const handleSubmit = async () => {
+        const formData = new FormData();
+        const score = calculateScore();
+
+        // ✅ 리뷰 정보 추가
+        formData.append(
+            'createReviewRequest',
+            new Blob(
+              [JSON.stringify({
+                experienceId: 1, // 경험 ID
+                score: score,
+                endDate: endDate,
+                content: feelingText,
+              })],
+              { type: 'application/json' } // 명시적으로 JSON으로 설정
+            )
+          );
+
+        // ✅ 이미지 파일 추가
+        uploadedImages.forEach((img) => {
+          formData.append('images', img.file);
+        });
+
+        try {
+          const response = await instance.post('/reviews', formData);
+
+          if (response.status === 200) {
+            alert('리뷰가 성공적으로 등록되었습니다.');
+            navigate('/history_detail');
+          }
+        } catch (error) {
+          console.error('리뷰 등록 실패:', error);
+        }
+      };
 
     return (
         <div className='home_write_container'>
@@ -130,7 +175,7 @@ const HomeWrite = () => {
                 <div className="calender">
                     <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)}/>
                     <hr />
-                    <input type="date" name="" id="" value={endDate} onChange={(e) => setEndDate(e.target.value)}/>
+                    <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)}/>
                 </div>
             </div>
             <div className="feel_div">
@@ -202,7 +247,7 @@ const HomeWrite = () => {
             </div>
 
             <div className="history_detail_bottom_div">
-                <div className={`next_btn ${isFormValid ? 'active' : 'inactive'}`} onClick={GotoDone}>등록하기</div>
+                <div className={`next_btn ${isFormValid ? 'active' : 'inactive'}`} onClick={isFormValid ? handleSubmit : null}>등록하기</div>
             </div>
 
         </div>

diff --git a/src/pages/mainpage/MainPage.jsx b/src/pages/mainpage/MainPage.jsx
@@ -165,7 +165,7 @@ export const MainPage = () => {
               <S.CardSubmitArrow src={Arrow} />
             </S.CardSubmit>
             <S.CardSubmit
-              onClick={() => goToPage("/history")}
+              onClick={() => goToPage("/home_write")}
             >
               <S.CardSubmitContent>기록하기</S.CardSubmitContent>
               <S.CardSubmitArrow src={Arrow} />

diff --git a/src/pages/profile/Mypage.jsx b/src/pages/profile/Mypage.jsx
@@ -4,6 +4,7 @@ import mypage2 from '../../assets/icons/history/mypage2.svg'
 import mypage3 from '../../assets/icons/history/mypage3.svg'
 import mypage4 from '../../assets/icons/history/mypage4.svg'
 import mypage_arrow from '../../assets/icons/history/mypage_arrow.svg'
+import { MainFooter } from '@components/layout/footer/mainfooter/MainFooter'
 
 const Mypage = () => {
     return (
@@ -40,6 +41,7 @@ const Mypage = () => {
                 </div>
                 <img src={mypage_arrow} alt="" className="next" />
             </div>
+            <MainFooter/>
 
         </div>
     )

diff --git a/vite.config.js b/vite.config.js
@@ -8,7 +8,7 @@ import dotenv from 'dotenv';
 
 dotenv.config();
 
-export default defineConfig(({mode}) => {
+export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
 
   return {
@@ -57,10 +57,14 @@ export default defineConfig(({mode}) => {
       }
     },
     server: process.env.NODE_ENV === 'development' ? {
-      https: {
+      https:
+        {
         key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
         cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')),
-      },
+        }
+        ,
+      port: 5173,        // 강제로 5173 포트를 사용
+      strictPort: true,
       proxy: {
         "/api": {
           target: env.VITE_BASE_URL,
@@ -94,4 +98,4 @@ export default defineConfig(({mode}) => {
       },
     },
   }
-});
+});