[React] Nutriguide Landing Page 코드 리뷰

안녕하세요!

 

오늘 부터는 완성된 Nutriguide의 페이지 코드를

 

하루에 하나씩 리뷰해보려고 합니다.

 

그럼 시작하겠습니다 : )

 

 

NutriGuide 랜딩 페이지

 

 

NutriGuide는 3일치의 식단을 입력받고

 

사용자에게 부족한 영양소 정보를 추출해서

 

영양제를 추천해주는 사이트입니다.

 

LandingPage에는 간단히 각 페이지의 정보를 보여줍니다.

 

AI 건강 상담 버튼을 누르면 AI 건강 상담 페이지로,

 

AI 영양제 추천 버튼을 누르면 식단 인풋 페이지로 이동합니다.

 

LandingPage

 

import React from 'react';

import { Link, useNavigate } from 'react-router-dom';

import { Button } from 'antd';

import myImage from '../img/logo.png';

import '../css/LandingPage.css';

import styled from 'styled-components';

function LandingPage() {

  const navigate = useNavigate();

  const DetailButton = styled(Link)`

  background-color: #ffffff;

  color: #333333;

  font-size: 1.5rem;

  padding: 1rem 2rem;

  border-radius: 5px;

  text-decoration: none;

  transition: background-color 0.3s ease;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  &:hover {

    background-color: #f7d06d;

  }

`;

  const navigateToQuestionPage = () => {

    // 디테일 페이지로 이동하는 함수

    navigate('/question');

  };

  const navigateToRecommendationPage = () => {

    // 디테일 페이지로 이동하는 함수

    navigate('/recommendation');

  };

  return (

    <div className='landing-page2'>

      <div className='container-landing'>

        <div className='landing-content'>

          <div className='landing-img'>

            <Link to="/detail">

              <img src={myImage} alt="My Image" style={{ width: '700px', height: 'auto' }} />

            </Link>

          </div>

          <div className='landing-text'>

            <h1 className='title'> Nutri Guide?</h1>

            <h2>

            <strong className='bigname'>NutriGuide</strong> 는 사용자 개개인의 건강 상태에 맞춰 영양제를<br/> <br/> 추천해주는 웹사이트입니다.<br/><br/>

<strong className='bigname'>AI 건강 상담</strong> 에서 가이드라인에 따른 맞춤형 건강 조언을<br/><br/> AI에게 받아보세요.<br/><br/>

<strong className='bigname'>AI 영양제 추천</strong> 에서 사용자의 정보를 입력하면, <br/><br/>인공지능이 최적의 영양제를 추천해드립니다.<br/><br/>

            </h2>

            <button type="default" className="custom-button-landing" onClick={navigateToQuestionPage}>

            AI 건강 상담

            </button>

            <button type="default" className="custom-button-landing" onClick={navigateToRecommendationPage}>

              AI 영양제 추천  

            </button>

          </div>

         

        </div>

      </div>

    </div>

  );

}

export default LandingPage;

 

전체 코드입니다.

 

import styled from 'styled-components';

function LandingPage() {

  const navigate = useNavigate();

  const DetailButton = styled(Link)`

  background-color: #ffffff;

  color: #333333;

  font-size: 1.5rem;

  padding: 1rem 2rem;

  border-radius: 5px;

  text-decoration: none;

  transition: background-color 0.3s ease;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  &:hover {

    background-color: #f7d06d;

  }

`;

 

버튼은 styled 컴포넌트를 사용해서 별도의 css 없이 

 

디자인하였습니다. 

 

투명도와 그림자를 주어 모던한 느낌을 주었습니다.

 

const navigateToQuestionPage = () => {

    // 디테일 페이지로 이동하는 함수

    navigate('/question');

  };

  const navigateToRecommendationPage = () => {

    // 디테일 페이지로 이동하는 함수

    navigate('/recommendation');

  };

 

각각 버튼에는 useNavigate 함수를 써서

 

버튼을 누르면 해당 페이지로 이동하게 하였습니다.

 

 return (

    <div className='landing-page2'>

      <div className='container-landing'>

        <div className='landing-content'>

          <div className='landing-img'>

            <Link to="/detail">

              <img src={myImage} alt="My Image" style={{ width: '700px', height: 'auto' }} />

            </Link>

          </div>

          <div className='landing-text'>

            <h1 className='title'> Nutri Guide?</h1>

            <h2>

            <strong className='bigname'>NutriGuide</strong> 는 사용자 개개인의 건강 상태에 맞춰 영양제를<br/> <br/> 추천해주는 웹사이트입니다.<br/><br/>

<strong className='bigname'>AI 건강 상담</strong> 에서 가이드라인에 따른 맞춤형 건강 조언을<br/><br/> AI에게 받아보세요.<br/><br/>

<strong className='bigname'>AI 영양제 추천</strong> 에서 사용자의 정보를 입력하면, <br/><br/>인공지능이 최적의 영양제를 추천해드립니다.<br/><br/>

            </h2>

            <button type="default" className="custom-button-landing" onClick={navigateToQuestionPage}>

            AI 건강 상담

            </button>

            <button type="default" className="custom-button-landing" onClick={navigateToRecommendationPage}>

              AI 영양제 추천  

            </button>

          </div>

         

        </div>

      </div>

    </div>

  );

}

export default LandingPage;

 

화면 왼쪽에 로고 이미지를 배치하였고,

 

h1과 h2가 글자의 두께를 변경하는 코드인데

 

이 태그에 css를 덧붙여서 좀 더 강조되게 하였습니다.

 

그리고 strong태그를 써서 중요한 키워드를 더욱 강조하였습니다.

 

.landing-page2 {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    background-color: #D7ECD9;

    font-family: "Gowun Dodum", sans-serif;}

.container-landing {

    display: flex;

    justify-content: flex-end;

    padding: 20px;

  }

  .container-landing h1 {

    font-size: 48px;

    margin-bottom: 30px;

    color:#FFA726;

    opacity: 0;

    animation: fadeInAnimation 2s ease-in-out forwards;

    font-family: "Gowun Dodum", sans-serif;

    text-transform: uppercase;

    letter-spacing: 2px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);

  }

  .container-landing h2 {

    margin-bottom: 40px;

    color :  #444444;

    opacity: 0; /* 초기에 투명하게 설정 */

    animation: fadeInAnimation 2s ease-in-out forwards; /* 페이드인 애니메이션 적용 */

   

    font-family: "Gowun Dodum", sans-serif;

  }

 

  .landing-content {

    display: flex;

    align-items: center;

  }

 

  .landing-img {

    flex: 1;

    margin-right: 30px;

  }

  .landing-text {

    flex: 1;

    padding: 20px; /* 여백 추가 */

    margin-right: 0; /* 오른쪽 여백 제거 */

    animation: fadeInAnimation 2s ease-in-out forwards; /* 애니메이션 적용 */

    text-align: center; /* 텍스트 중앙 정렬 */

    position: relative;

    margin-bottom: 30px; /* 아래 여백 조정 */

    max-width: 700px; /* 최대 너비 제한 */

    line-height: 1.6; /* 줄 높이 조정 */

    font-family: "Gowun Dodum", sans-serif; /* 폰트 설정 */

    background-color: rgba(255, 255, 255, 0.8); /* 반투명 배경색 */

    border-radius: 10px; /* 둥근 모서리 */

    padding: 30px; /* 내부 여백 추가 */

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 박스 그림자 */

    margin-left: 100px; /* 좌우 중앙 정렬 */

    margin-right: auto; /* 좌우 중앙 정렬 */

  }

 

  .landing-text h1 {

    font-size: 3rem; /* 제목 폰트 크기 */

    color: #353434;

    margin-bottom: 20px; /* 제목 아래 여백 */

    font-weight: bold; /* 제목 두께 */

    text-shadow: 1px 1px 3px rgba(236, 124, 31, 0.2); /* 제목 그림자 */

  }

 

  .landing-text h2 {

    font-size: 1.5rem; /* 부제목 폰트 크기 */

    color: #444444; /* 부제목 색상 */

    margin-bottom: 20px; /* 부제목 아래 여백 */

  }

 

 .landing-text .bigname {

  font-size: 2rem; /* 텍스트 크기 확대 */

  color: #f87f69; /* 강조 색상 */

  font-weight: bold;

  background-color: #ffffff; /* 텍스트 배경색 추가 */

  border-radius: 5px; /* 배경색의 둥근 모서리 */

  padding: 5px 10px; /* 텍스트 주변 여백 추가 */

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* 텍스트 그림자 추가 */

}

  .landing-text p {

    margin-bottom: 15px; /* 문단 아래 여백 */

  }

 

  .landing-text br {

    display: block; /* 줄바꿈 효과 추가 */

    margin-bottom: 10px; /* 줄바꿈 아래 여백 */

  }

 

 

@keyframes fadeInAnimation {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

.custom-button-landing {

  background-color: #ffffff; /* 기본 배경색 */

  color: #333333; /* 기본 글자 색상 */

  font-size: 1.5rem; /* 글자 크기 */

  padding: 1rem 2rem; /* 내부 여백 */

  border-radius: 12px; /* 둥근 모서리 */

  border: 2px solid transparent; /* 투명한 테두리 */

  text-decoration: none; /* 밑줄 제거 */

  transition: all 0.3s ease; /* 모든 변화에 대한 트랜지션 */

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 그림자 */

  cursor: pointer; /* 포인터 커서 */

  margin: 10px; /* 여백 */

  font-family: "Gowun Dodum", sans-serif; /* 폰트 */

  text-align: center; /* 텍스트 중앙 정렬 */

  display: inline-block; /* 버튼 크기 조절 */

  position: relative; /* 포지션 설정 */

}

.custom-button-landing:hover::before {

  width: 100%; /* 호버 시 너비 */

  height: 100%; /* 호버 시 높이 */

}

.custom-button-landing:hover {

  color:#f7996d; /* 호버 시 글자 색상 */

  border-color: #f7996d; /* 호버 시 테두리 색상 */

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* 호버 시 그림자 */

}

 

Landing Page의 css코드입니다.

 

페이지에 처음 이동하였을 때

 

FadeIn 애니메이션을 넣어 효과를 주었고,

 

각 버튼에 hover(마우스 갖다댄 상태)시 효과를 부여하였습니다.

 

버튼과 hover시 색상은 배경색과 어울리는 색을 선별하여

 

디자인했습니다.

 

 

 

오늘은 졸업 작품 Nutriguide의 Landing 페이지 코드를 리뷰해보았는데요.

 

Landing 페이지는 기능이 별로 없고

 

코드 또한 간단하여

 

짧게 리뷰한 것 같습니다.

 

읽어주셔서 감사합니다!