diff --git a/src/pages/Intro.jsx b/src/pages/Intro.jsx index 6e95501..32d98dd 100644 --- a/src/pages/Intro.jsx +++ b/src/pages/Intro.jsx @@ -1,34 +1,27 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; +import { BsArrowDownCircleFill, BsEmojiLaughingFill } from 'react-icons/bs'; import { useNavigate } from 'react-router-dom'; - -// import RiceBalloon from '../assets/images/rice_balloon.svg'; import ProcessTitle from '../components/ProcessTitle'; import ImageSliding from '../components/ImgSliding'; import DolLogo from '../images/DoL-Logo.png'; import TextLogoImg from '../images/smallLogo.png'; - import img1 from '../images/service00.png'; import img2 from '../images/service01.png'; import img3 from '../images/service02.png'; -// import img3 from '../assets/images/Intro/2_waiting_component.svg'; import img4 from '../images/service03.png'; -// import img5 from '../assets/images/Intro/2_finished_component.svg'; -// import img4 from '../images/service03.png'; import img7 from '../images/service06.png'; -import img8 from '../images/service08.png' -import img9 from '../images/service09.png' -import img10 from '../images/service10.png' -import img11 from '../images/service11.png' -import img12 from '../images/service12.png' -import img13 from '../images/service13.png' -import img14 from '../images/service14.png' - -import { BsEmojiLaughingFill } from 'react-icons/bs'; -// import { useSelector } from 'react-redux'; -// import { selectIsLoggedIn } from '../redux/userSlice.js'; - -const Scroll = styled.div``; +import img8 from '../images/service08.png'; +import img9 from '../images/service09.png'; +import img10 from '../images/service10.png'; +import img11 from '../images/service11.png'; +import img12 from '../images/service12.png'; +import img13 from '../images/service13.png'; +import img14 from '../images/service14.png'; + +const Scroll = styled.div` + position: relative; +`; const LogoContainer = styled.div` display: flex; @@ -37,15 +30,11 @@ const LogoContainer = styled.div` margin-top: 20px; margin-bottom: 40px; `; + const LogoImage = styled.img` width: 210px; height: 210px; `; -/* //밥풍선 -const LogoImage = styled.img` -width: 181px; -height: 159px; -`; */ const TextLogoContainer = styled.div` display: flex; @@ -57,6 +46,7 @@ const TextLogoContainer = styled.div` const Title = styled.div` color: #540090; `; + const Text1 = styled.div` font-weight: 700; font-size: 20px; @@ -64,13 +54,7 @@ const Text1 = styled.div` justify-content: center; margin-top: 10px; `; -/* const Text2 = styled.div` -font-Weight: 700; -font-size: 34px; -display: flex; -justify-content: center; -margin-top: 10px; -`; */ + const Text3 = styled.div` font-weight: 500; font-size: 12px; @@ -88,15 +72,6 @@ const GraContainer1 = styled.div` ); height: 500px; `; -const GraContainer2 = styled.div` - background: linear-gradient( - to bottom, - #fff 0%, - #E6E6FA 30%, - #fff 0% - ); - height: 480px; -`; const Container = styled.div` margin-top: 40px; @@ -104,23 +79,21 @@ const Container = styled.div` const ImageSlidingContainer1 = styled.div` img { - /* width: 255px !important; // 이미지 너비 조정 */ - height: 255px !important; // 이미지 높이 조정 - object-fit: cover; // 비율 유지 + height: 255px !important; + object-fit: cover; } `; const ImageSlidingContainer2 = styled.div` img { - /* width: 310px !important; // 이미지 너비 조정 */ - height: 165px !important; // 이미지 높이 조정 - object-fit: cover; // 비율 유지 + height: 165px !important; + object-fit: cover; } `; const ImgDiv1 = styled.div` display: flex; - justify-content: center; // 자식 요소를 가로 방향으로 가운데 정렬 + justify-content: center; margin-top: 40px; margin-left: auto; margin-right: auto; @@ -130,7 +103,7 @@ const ImgDiv1 = styled.div` const ImgDiv2 = styled.div` display: flex; - justify-content: center; // 자식 요소를 가로 방향으로 가운데 정렬 + justify-content: center; margin-top: 40px; margin-left: auto; margin-right: auto; @@ -146,6 +119,7 @@ const Text4 = styled.div` margin-top: 70px; color: #540090; `; + const Text5 = styled.div` font-weight: 700; font-size: 18px; @@ -159,7 +133,6 @@ const Buttondiv = styled.div` display: flex; justify-content: center; align-items: center; - /* margin-bottom: 70px; */ `; const CreateButton = styled.button` @@ -174,9 +147,7 @@ const CreateButton = styled.button` display: flex; justify-content: center; align-items: center; - transition: background-color 0.1s; - cursor: pointer; &:hover { @@ -184,13 +155,42 @@ const CreateButton = styled.button` } `; +const ArrowContainer = styled.div` + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + display: ${props => (props.visible ? 'block' : 'none')}; + z-index: 10; + text-align: center; + /* cursor: pointer; */ +`; + +const ArrowText = styled.div` + font-size: 16px; + color: #540090; + margin-top: 8px; +`; + function Intro() { const images1 = [img1, img2, img3]; const images2 = [img8, img9, img10]; const images3 = [img11, img12, img13, img14]; const navigate = useNavigate(); - // const isLoggedIn = useSelector(selectIsLoggedIn); + const [arrowVisible, setArrowVisible] = useState(true); + + const handleScroll = () => { + const scrollY = window.scrollY; + setArrowVisible(scrollY <= 100); + }; + + useEffect(() => { + window.addEventListener('scroll', handleScroll); + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); return ( @@ -223,6 +223,11 @@ function Intro() { + + + 스크롤해주세요 + + - {/* - - */} @@ -245,9 +247,6 @@ function Intro() { title="1일 최대 15개 식단 제공" text="AI가 퍼스널 식품교환표를 기준으로 균형있는 식단을 제공해줘요!" /> - {/* - 월별 명예의 전당 리스트 사진 - */} @@ -272,9 +271,6 @@ function Intro() { title="식단톤을 통한 나만의 레시피 공유" text="식단톤에 출전해서 나만의 혈당 레시피를 공유하고 리워드를 받아요!" /> - {/* - 보은 버튼 - */} @@ -283,15 +279,8 @@ function Intro() { 로그인 후 무료로 이용이 가능합니다!! 밀당으로 혈당을 관리하러 가볼까요?? - - navigate('/login') - } - > - + navigate('/login')}> + 서비스 이용하러 가기!! diff --git a/src/pages/Main/AfterMain.jsx b/src/pages/Main/AfterMain.jsx index aaa218c..e8ca29d 100644 --- a/src/pages/Main/AfterMain.jsx +++ b/src/pages/Main/AfterMain.jsx @@ -6,6 +6,8 @@ import { FoodRecommendBack } from '../../components/FoodRecommendBack'; import { IoIosArrowRoundForward } from "react-icons/io"; import getMain from '../../APIs/get/getMain'; import patchMainHeart from '../../APIs/patch/patchMainHeart'; +import postFoodRecommend from '../../APIs/post/postFoodRecommend'; +import { useNavigate } from 'react-router-dom'; const Container = styled.div` display: flex; @@ -57,12 +59,14 @@ const RecommendButton = styled.div` `; function AfterMain() { + const navigate = useNavigate(); const [nickname, setNickname] = useState(''); const [userData, setUserData] = useState({ recommendCount: 0, dietSets: [] }); const [currentDietSetId, setCurrentDietSetId] = useState(null); + const [isLoading, setIsLoading] = useState(false); useEffect(() => { fetchUserData(); @@ -104,14 +108,38 @@ function AfterMain() { alert('식단 추천은 세 번까지 받을 수 있습니다.'); return; } + setIsLoading(true); + try { + // 기본 요청 데이터 (필요에 따라 조정 가능) + const requestData = { + diet_combination: '식사3', + breakfast: '한식', + lunch: '한식', + dinner: '한식', + ingredient1: '', + ingredient2: '', + ingredient3: '', + }; + + // 식단 추천 API 호출 + const response = await postFoodRecommend(requestData); + console.log('추천 응답:', response); + + // 추천 후 업데이트된 데이터 가져오기 const updatedData = await fetchUserData(); if (updatedData.diet_sets.length > 0) { setCurrentDietSetId(updatedData.diet_sets[0].diet_set_id); } - console.log('Updated Data after recommendation:', updatedData); + console.log('추천 후 업데이트된 데이터:', updatedData); + + // 필요한 경우 다른 페이지로 이동하거나 UI 업데이트 + // navigate('/some-path'); } catch (error) { - console.error('AfterMain 내 getMain에서 에러 발생:', error); + console.error('추천 중 오류 발생:', error); + alert('식단 추천 중 오류가 발생했습니다. 다시 시도해주세요.'); + } finally { + setIsLoading(false); } }; @@ -138,8 +166,8 @@ function AfterMain() { = 3}> - 다시 추천받기 + disabled={userData.recommendCount >= 3 || isLoading}> + {isLoading ? '추천 중...' : '다시 추천받기'} { className={classNames({ hidden: !showLogo, })} - onClick={() => navigate('/')} + onClick={() => navigate('/main')} />