데이터 분석 웹 서비스 3주차 회고 (05/03~05/07)

어느덧 3주의 기간이 모두 지났다. 급격히 친해졌던 2주차를 뒤로하고, 3주차에 들어서면서는 프로젝트 마무리에 쫒겨 하루 하루가 정말 보람찬 하루였던 것 같다. 팀원 중 해결되지 않는 문제가 생기면 백엔드, 프론트엔드... 자신이 어떤 포지션인지에 국한되지 않고 누구든지 달려가서 서로를 도왔다...♥ 그렇게 계속 진행하다보니, 서로의 코드를 이해할 수 있는 시간이 된 것 같고, 함께 문제를 해결하면서 새로운 문제 해결 방법도 익힐 수 있었다~~!!

정말... 이번 프로젝트는 소통의 중요성를 크게 느끼게 해주었고, 이러한 팀원을 만나게 된 것은 나에게 넘나 큰 행운이다!

 

---

 

기능 구현 내용

• Boardgame 페이지 완성
• BoardgameData 컴포넌트 구현 : 보드게임 데이터 요청 후, 페이지네이션 적용하여 BoardgameCard로 데이터 전달
• BoardgameCategory 컴포넌트 구현 : 카테고리 조건, 검색 키워드, 랜덤으로 데이터 요청
• BoardgameCard 컴포넌트 구현 : 보드게임의 대한 정보 렌더링, 찜 기능 구현
• BoardgameDatail 컴포넌트 기능 추가 : Chart.js를 활용하여 보드게임 데이터 시각화

 

Note. BoardgameCard 컴포넌트 구현 : 찜 기능

• useState : 보드게임 찜 데이터 저장
• favoriteHandler : 보드게임 찜 아이콘이 선택될 때 실행할 함수 ("favorite" 엔드포인트로 put 요청)

 

전체 코드

import React, { useState } from "react";
import * as Api from "../../api";
import Card from "@mui/material/Card";
import IconButton from "@mui/material/IconButton";
import FavoriteIcon from "@mui/icons-material/Favorite";
import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import Button from "@mui/material/Button";

function BoardgameCard({ id, name, ..., favorite }) {
    const [favoriteToggle, setFavoriteToggle] = useState(favorite);

    const favoriteHandler = async () => {
        try {
            const res = await Api.put("favorite", {
                boardgameId: id,
                toggle: !favoriteToggle,
            }).then(() => {
                setFavoriteToggle(!favoriteToggle);
            });
        } catch (err) {
            console.log("errer message: ", err);
        }
    };

    return (
        <div style={{ width: 250, margin: 50 }}>
            <Card>
            	...
            </Card>
            <IconButton
                sx={{
                    position: "relative",
                    left: 200,
                    top: -160,
                    color: "#FF5A5A",
                }}
                aria-label="add to favorites"
                onClick={favoriteHandler}
            >
                {favoriteToggle ? <FavoriteIcon /> : <FavoriteBorderIcon />}
            </IconButton>
        </div>
    );
}

export default BoardgameCard;

 

결과 화면

보드게임 찜 기능 결과 화면