[Mukbang] Favorite

2차 프로젝트 발표 당일 오전에 작성한 코드
열정 넘치는 팀원들 말에 이걸 또 작성하고 있는 나 자신이 너무 어이없었다. 🤦‍♀️😂

시간 내 가능하다고 하면 보여주는 것도 나쁘지 않겠다 싶어서
선택하는 기능은 뒤로 밀고 찜한 목록 가져오기+전체선택+전체삭제만 구현 했다.

index값을 이용해서 선택+삭제+배열필터까지 하고 싶었지만, checkbox에 대한 이해가 전혀 없어서 짧은 시간 내에 구현하진 못했다.

useEffect에 대한 나의 이해도를 테스트해볼 수 있었던 것 같다 ^^
useState와 useEffect가 없었다면 이렇게 빠르게 기능을 구현하지 못했을 거라고 생각한다.
추가 구현 하는김에 그동안 사용하지 않았던 Styled-component의 props 기능도 써보았다.

일정상 세상에 나오지 않을 페이지이자 나에겐 부록 같은 거였는데, 나오게 해줘서 고...고마워요 먹방 팀원분들^^

Favorite 페이지

import React from 'react';
import { useEffect, useState } from 'react/cjs/react.development';
import { URL } from '../../config';
import styled from 'styled-components';

const Favorite = () => {
  const [selectList, setSelect] = useState([]);
  const [index, setIndex] = useState(0);
  const [checkTrue, setCheck] = useState(false);
  
  const selectAll = e => {
    setCheck(!checkTrue);
  };
  
  const delectAll = e => {
    setSelect([]);
    setIndex(0);
  };
  
  useEffect(() => {
    fetch(`${URL}/user/wishlist`, {
      headers: {
        Authorization: localStorage.getItem('jwt-token'),
      },
    })
      .then(res => res.json())
      .then(res => setSelect([...res.results]));
  }, []);

  useEffect(() => {
    setIndex(selectList.length);
  }, [selectList]);

  return (
    <FavoriteMain>
      <section className="main">
        <Title main>💖 내가 찜한 식당 ({index})</Title>
        <Rayout>
          <Select onClick={selectAll}>전체선택</Select>
          <Select onClick={delectAll}>삭제</Select>
          {selectList.map(data => (
            <WishStore key={data.id}>
              <Checkbox
                type="checkbox"
                checked={checkTrue ? true : false}
              ></Checkbox>
              <WishInfo>
                <WishTitle>
                  <Title first>{data.store_name}</Title>
                  <Title sec>
                    평점:{data.rating}/5, 리뷰 {data.review}건
                  </Title>
                  <Title third>{data.category}</Title>
                </WishTitle>
                <Content grey>{data.full_address}</Content>
                <Content>{data.one_line_introduction}</Content>
              </WishInfo>
              <StoreImg src={data.image_url} />
            </WishStore>
          ))}
        </Rayout>
      </section>
    </FavoriteMain>
  );
};
export default Favorite;

const FavoriteMain = styled.main`
  margin-top: 130px;
`;

const Title = styled.span`
  padding: ${props => (props.main ? '0 0 0 10px' : '0 5px 0 0')};
  align-self: baseline;
  font-size: ${props => (props.first ? '23px' : props.sec ? '15px' : '15px')};
  font-weight: bold;
  color: ${props => (props.first ? 'red' : props.sec ? '#ffa409' : 'black')};
`;

const Rayout = styled.div`
  width: 50%;
  height: 100%;
  padding: 20px;
`;

const WishStore = styled.div`
  display: flex;
  padding: 10px;
  margin: 10px 0;
  width: 1000px;
  height: 100px;
  border: solid 1px lightgrey;
`;

const Checkbox = styled.input`
  align-self: center;
  width: 150px;
`;

const WishInfo = styled.div`
  display: flex;
  flex-direction: column;
  line-height: 25px;
  width: 100%;
  height: 30%;
`;

const Content = styled.p`
  color: ${props => (props.grey ? 'grey' : 'black')};
`;

const WishTitle = styled.div`
  display: flex;
  line-height: 30px;
`;

const Select = styled.button`
  color: grey;
  font-size: 15px;
  cursor: pointer;
`;

const StoreImg = styled.img`
  height: 100%;
  width: 300px;
`;

찜하기 버튼

버튼 클릭 후 상태값이 true로 변했을 때를 감지해서 찜한 가게의 id를 백엔드로 보내준다.

const [isActive, setActive] = useState(false);
  const activeToggle = () => {
    setActive(!isActive);
  };

useEffect(() => {
    fetch(`http://10.58.2.56:8000/user/wishlist?store_id=${props.id}`, {
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('jwt-token'),
      },
    })
  }, [isActive]);