배민 서바이벌 메인페이지 - React

주지홍·2022년 1월 30일

프로젝트 회고

프로젝트의 순간순간

목록 보기

2/6

프로젝트 시작

드디어 시작된 1차프로젝트!!! 위스타그램 프로젝트의 느낀점을 깨닫고 틈틈히 하나하나 회고를 시작해보고자 메인페이지 회고를 시작해본다.

팀으로 시작된 프로젝트이다. 기획은 기존에 있는 페이지를 우리만의 색깔로 바꾸고 아쉬웠던점 개선점에 대한 사항들이 무엇이 있는지 등을 해보는걸로 지었다.

우리는 배민 문방구를 첫 주제로 삼았다.

기존 초기 사이트

프로젝트 컨셉

배민사이트는 기본적으로 생활에 필요한 여러가지 물건들을 파는곳이다. 꼭 생활에 필요하지 않아도 되는 물건들 역시도 취급한다. 한마디로 말해 lifestyle 아이템을 그들만의 방식으로 재해석 해서 판다고 생각했다. 처음에 다양한 의견들이 나왔었다. 술을 팔자, 음료를 팔자, 등등 그러다가 팀원들끼리 서바이벌의 컨셉은 어떻냐고 해서 순간 나는 너무 재밌고 참신했다. 서바이벌을 다양한 사회의 어느 커뮤니티에서의 생존이라는 컨셉과 연계하여 구성해보고자 하였다.

우리만의 컨셉

인생은 실전이다! 배민 서바이벌과 함께 21세기를 살아남자! 🍗🍗🍗

메인서비스

21세기에 살아남기 위해 필요한 제품을 제공합니다.
배민서바이벌 멘토의 꿀 tip을 소개합니다.
커뮤니티를 통해 survival % 을 높일 수 있습니다.
랜덤박스 구독 서비스를 제공합니다.

기존의 인기있는 커머스 사이트들의 하나의 특징은 커뮤니티가 잘 활성화 되어 있다고 생각해 단순히 물건만을 파는것이 아닌 물건을 파는 사람들이 사는 행위에 그치는 것만이 아닌 커뮤니티를 만들어보고자 까지 생각했다.

프로젝트의 목표

그렇지만 시간이 2주 정도 밖에 되지 않아서 확실하게 구현하고자 하는 목표에 대한 설정이 필요했다. 필수 목표는 사용자가 해당사이트에서 물건을 구매하는 하나의 사이클까지를 일단 필수목표로 삼았다.

메인페이지

내가 맡은 페이지는 메인페이지이다.

기본적인 구성을 이렇게 초기에 나눠보았고 이러한것을 토대로 작업을 진행하였다.

내가 구현하고자 하는 기능은 캐러셀이미지구현 및 정렬기능이었다.

우선적으로 목데이터를 가지고 진행해보고자 하였고 하드코딩을 최대한 줄이는 방향으로 구현을 진행하였다.
페이지를 구성하는건 Main.js 였고 여기서 섹션과 아이템리스트, 아이템으로 프롭스를 쏴주는 과정이 진행되었다. 여기서 느끼는 부분이 하나있었다면 생각보다 많은 기능을 아는것이 아닌 지금까지 배운기능들을 잘 활용하는것이 중요하다고 생각을 했고 또한 실제로 구현과정에서 많은부분들이 어렵지 않았다.

메인 페이지 생각회로

메인 페이지 함수

  const [items, setItems] = useState([]);
  const [carouselItems, setCarouselItems] = useState([]);

  useEffect(() => {
    fetch('/data/Jihong/ItemListData.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        setItems(data);
        setCarouselItems(data.filter(item => item.price > 70000).slice(0, 4));
      });
  }, []);

  const sortFucntion = e => {
    const recent = [...items].sort(function (a, b) {
      let dateA = new Date(a.updateDate).getTime();
      let dateB = new Date(b.updateDate).getTime();
      return dateA < dateB ? 1 : -1;
    });
    const ascend = [...items].sort((a, b) => a.price - b.price);
    const decend = [...items].sort((a, b) => b.price - a.price);
    if (e.target.innerText === '최신순') {
      setItems(recent);
      return;
    }
    if (e.target.innerText === '낮은가격순') {
      setItems(ascend);
      return;
    }
    if (e.target.innerText === '높은가격순') {
      setItems(decend);
      return;
    }
  };

최상단 Main.js에서 작성된 함수부분들이다. useEffect를 통해 캐러셀 이미지와 기존 아이템 데이터를 첫 렌더링 될 시에만 가져와야했다. 하나 아쉬운점은 캐러셀 아이템은 분명 스테이트를 선언하지 않고 진행했을때는 정렬 버튼을 누르면 계속해서 이미지의 순서들이 변해서 이렇게 처리를 했는데 다른방법으로 할 수 있을것 같지만 그부분은 추후에 리팩토링 진행에서 해결해보고자 남기게 되었다. 정렬부분을 담당하는 함수는 받아온 아이템들을 분류해주고자 하였다. 복사를 하지않아고 그냥 items로 받아오게 되면 기존의 배열도 모두 바뀌기 때문에 기존의 배열을 바꾸지 않고자 복사를 해서 진행하게 되었다. 따라서 이 함수를 버튼에다가만 걸어주면 되는것이고 sortFunction 과정에서 버튼을 독립적으로 조작하는 법에 대해 공부해보았다.

삼항연산자에 대한 활용 이부분에서는 렌더링 과정에서 제품이 할인상태이거나, 여러가지 상태일때를 사용자에게 표현하고자 할때 유용하게 쓸 수 있었다.

캐러셀페이지 함수

 const [currentSlide, setCurrentSlide] = useState(0);
  const totalSlides = carouselItems.length - 1;
  const timeoutRef = useRef(null);

  function resetTimeout() {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  }

  useEffect(() => {
    resetTimeout();
    timeoutRef.current = setTimeout(
      () =>
        setCurrentSlide(currentSlide =>
          currentSlide === totalSlides ? 0 : currentSlide + 1
        ),
      8000
    );
    return () => {
      resetTimeout();
    };
  }, [currentSlide, totalSlides]);

  const nextSlide = () => {
    if (currentSlide !== totalSlides) {
      setCurrentSlide(currentSlide + 1);
    } else {
      setCurrentSlide(0);
    }
  };

  const moveDot = idx => {
    setCurrentSlide(idx);
  };