[React] 영양제 추천 사이트 - 졸업 작품 예행 연습(1)

안녕하세요 오랜만에 돌아왔네요.

개강 후 수강신청하고 졸업작품 준비하느라 시간에 허덕이고 있습니다.

다행히 지금은 방향이 정해져서 프론트엔드 쪽으로 일단 진행하고

백엔드 부분을 도와주는 식으로 나아갈 것 같습니다.

아직 파트 분배를 하지 않았지만 미리 사이트를 만들고 있습니다.

저희 조는 영양제를 추천해주는 웹사이트를 만들기로 했습니다.

사용자의 건강 정보와 식단을 입력받으면

사용자의 영양소 섭취량과 권장 섭취량을 비교해서

나온 수치로 부족한 영양소 성분을 보충해주는 영양제 사이트 입니다.

먼저 디자인의 방향성을 잡기 위해 로고를 만들었습니다.

로고 1도 괜찮았지만 좀 더 범용성이 넓을 것 같은 로고 2를 채택했습니다.

사이트 이름은 로고처럼 NUTRIGUIDE가 될 것 같습니다.

먼저 랜딩페이지를 만들어야겠죠?

import React from 'react';

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

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

import logoImage from '../logo.png';

const LandingPage = () => {

const navigate = useNavigate();

const navigateToHealthProfile = () => {

navigate('/input');

};

const navigateToMealPlanner = () => {

navigate('/input/inputMenu');

};

const navigateToCustomNutrition = () => {

navigate('/product');

};

return (

</div>

<div className="text-container"> <h1>개인 맞춤 영양제를 찾아드립니다!</h1>

<h2>1. <span className="action" onClick={navigateToHealthProfile}>건강 프로필을 입력하세요.</span></h2>

<h2>2. <span className="action" onClick={navigateToMealPlanner}>일주일 동안의 식단을 기록하세요.</span></h2>

</div>

);

};

export default LandingPage;

랜딩 페이지에는 로고와 문구를 넣었습니다.

왼쪽에는 로고 오른쪽에는 페이지 설명 문구가 있습니다.

숫자별로 문구를 누르면 해당 페이지로 이동하게 useNavigate함수를 사용했습니다.

(이 부분은 가시성이 좋게 수정될 예정입니다.)

랜딩페이지 위에 보이시는 NavBar(메뉴 바)도 만들었습니다.

import React, { useState, useEffect} from 'react';

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

import {Button} from './Button';

import './css/Navbar.css';

import logoImage from './logo3.png';

function Navbar() {

const [click, setClick] = useState(false);

const [button, setButton] = useState(true);

const location = useLocation();

const handleClick = () => setClick(!click) ;

const closeMobileMenu = () => setClick(false);

const showButton = () => {

if(window.innerWidth <= 960){

setButton(false)

}

else {

setButton(true);

}

};

useEffect(() => {

showButton();

}, []);

window.addEventListener('resize', showButton);

return (

<div className = 'navbar-logo'>Nutri</div>

<div className = 'navbar-logo2'>Guide</div>

</Link>

</div>

Home

</Link>

</li>

Input

</Link>

</li>

Product

</Link>

</li>

</ul>

</div>

</nav>

</>

);

}

export default Navbar

NavBar에서는 왼쪽 위에 있는 로고를 누르면 랜딩페이지로 이동하고

오른쪽 메뉴를 누르면 각 페이지로 이동하도록 라우팅을 하였습니다.

css 코드는 길어서 생략하겠습니다.

폰트는 구글폰트

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

font-size : 30px;

font-style: normal;

고운다움을 사용했습니다.

다음은 InputPage입니다.

import React from 'react';

import { Typography, Form, Input,Button,message } from 'antd';

import { useState } from 'react';

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

import styles from '../css/Button.css';

import '../css/InputPage.css';

function InputPage() {

const Gender = [

{ key: 1, value: "남성" },

{ key: 2, value: "여성" }

];

const Exercise = [

{ key: 1, value: "유산소" },

{ key: 2, value: "팔굽혀펴기" },

{ key: 3, value: "상체운동" },

{ key: 4, value: "하체운동" },

{ key: 5, value: "윗몸일으키기" },

{ key: 6, value: "스포츠" }

];

const navigate = useNavigate();

const [genderValue, setGenderValue] = useState(1);

const [AgeValue, setAgeValue] = useState(0);

const [height, setHeight] = useState(0);

const [weight, setWeight] = useState(0);

const [exerciseTime, setExerciseTime] = useState(0);

const [ExerciseValue, setExerciseValue] = useState(1);

const onHeightChange = (event) => {

setHeight(event.currentTarget.value);

};

const onWeightChange = (event) => {

setWeight(event.currentTarget.value);

};

const onExerciseTimeChange = (event) => {

setExerciseTime(event.currentTarget.value);

};

const onExerciseSelectChange = (event) => {

setExerciseValue(event.currentTarget.value);

};

const onAgeChange = (event) => {

setAgeValue(event.currentTarget.value);

};

const onGenderSelectChange = (event) => {

setGenderValue(event.currentTarget.value);

};

const onSubmit = (event) => {

event.preventDefault();

message.success(`프로필이 입력되었습니다`);

navigate('inputMenu');

};

return (

<br />

{Gender.map(item => (

<option key={item.key} value={item.key}>{item.value} </option>

))}

</select>

<br />

<Input

onChange={onAgeChange}

value={AgeValue}

type="number"

<br />

<Input

onChange={onHeightChange}

value={height}

type="number"

<br />

<Input

onChange={onWeightChange}

value={weight}

type="number"

{Exercise.map(item => (

<option key={item.key} value={item.key}>{item.value} </option>

))}

</select>

<br />

<br />

<Input

onChange={onExerciseTimeChange}

value={exerciseTime}

type="number"

<br />

제출하기

</Button>

</Form>

</div>

);

}

export default InputPage;

InputPage에서는 사용자의 건강 정보를 입력받고 데이터를 저장합니다.

border와 색상을 이용해 모바일 입력 폼처럼 만들었습니다.

성별과 운동 종류의 경우 select box를 사용해서 선택할 수 있게 하였고

나머지는 사용자가 입력하는 형식입니다.

여기도 지금보니까 css가 마음에 안드네요.

색상이 매치가 잘 안되는데 배경색을 바꾸든 글자 색을 바꾸든 해야겠습니다.

다음은 식단 입력페이지인데 코드가 길어서

다음 포스팅에서 리뷰해보도록 하겠습니다.

감사합니다!

ps. 깃으로 깃허브 업로드를 하는데 git add .가 계속 되지 않았습니다.

레포지토리에 이미 깃폴더가 있어서 그렇다는데 확인되지가 않네요.

 rm -rf .git/

하여튼 이 코드를 깃에 입력해서 다시 커밋할 수 있습니다.

다음에도 이런 에러가 발생할 것 같아서 적어놨습니다

'React' 카테고리의 다른 글

[React] 캡스톤 디자인 진행과정 (0)	2024.05.28
[React] Nutriguide 프로젝트 코드 리뷰 (0)	2024.03.07
[React] 로그인 여부 확인 - Auth (0)	2024.02.26
[React] 로그아웃 기능 (0)	2024.02.23
[React] 로그인 기능 최종 구현 (0)	2024.02.23

Puft의 풀스택 도전기

[React] 영양제 추천 사이트 - 졸업 작품 예행 연습(1)

'React' 카테고리의 다른 글

티스토리툴바

[React] 영양제 추천 사이트 - 졸업 작품 예행 연습(1)

'React' 카테고리의 다른 글

'React' Related Articles

티스토리툴바