24.09.06 day62 작업 일지

useNavigate와 useLocation을 이용해 경로 연결을 해줬다. SPA의 경우에는 이동이나 뒤로가기가 직접 경로를 넣기에 좀 복잡할 수 있다고 useNavigate의 기능을 이용하면 편하다고 했다.

import styled from "styled-components";
import Signup1 from "../components/signup/signup1";
import Signup2 from "../components/signup/signup2";
import Signup3 from "../components/signup/signup3";
import BackHeader from "../components/common/backHeader";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

const Signup: React.FC = () => {
  const navigate = useNavigate();
  const [step, setStep] = useState(1);

  const handleNext = () => {
    if (step < 3) {
      setStep(step + 1);
    }
  };

  const handleBack = () => {
    if (step > 1) {
      setStep(step - 1);
    } else {
      navigate(-1);
    }
  };

  return (
    <>
      <SignupWrapper>
        <BackHeader onBack={handleBack} />
        {step === 1 && <Signup1 onNext={handleNext} />}
        {step === 2 && <Signup2 onNext={handleNext} />}
        {step === 3 && <Signup3 />}
      </SignupWrapper>
    </>
  );
};
export default Signup;

const SignupWrapper = styled.div`
  width: 55%;
  margin: 0 auto;
`;

예시로 회원가입의 코드를 가져왔는데 navigate에 -1값을 입력하면 이동하기 전의 페이지로 돌아간다고 한다. 이런 간단한 걸 미리 알았으면 정글에서 한 모션 비트 때 시간단축으로 좀 더 많은 기능을 할 수있었을 텐데 이 부분은 너무 아쉽다.

다만 회원가입의 경우 여러 단계가 있으며 해당 단계는 페이지 이동이 아닌 컴포넌트 교환 방식이라 첫 번째 페이지일 때만 navigate가 작동되고 두 번째 페이지부터는 회원가입 페이지가 변경되는 걸로 적용했다.

그래서 현재 작성되어있는 페이지는 전부 연결시켜놨다.

 

기존에 있던 메인 푸터에 제품, 홈, 장바구니, 마이페이지 4개가 있었는데 보통 홈은 가운데에 있기 때문에 뭔가 부족해서 어색해보였는데 루틴 페이지를 넣는걸 깜빡했었다. 그래서 바로 넣고 5개로 보니까 매우 편안하다.

import styled from "styled-components";
import CategoryBox from "./categoryBox";
import cartLogo from "../../img/cart.png";
import itemLogo from "../../img/item.png";
import homeLogo from "../../img/home.png";
import mypageLogo from "../../img/mypage.png";
import routineLogo from "../../img/routine.png";
import { useNavigate } from "react-router-dom";

const MainFooter = () => {
  const navigate = useNavigate();

  const handleMoveItem = () => {
    navigate("/ranking");
  };

  const handleMoveRoutine = () => {
    navigate("/about");
  };

  const handleMoveHome = () => {
    navigate("/");
  };

  const handleMoveOrder = () => {
    navigate("/order");
  };

  const handleMoveMypage = () => {
    navigate("/mypage");
  };

  return (
    <>
      <FooterWrapper>
        <FooterCategory>
          <CategoryBox
            onClick={handleMoveItem}
            imgName={itemLogo}
            alt="제품"
            title="제품"
          />
          <CategoryBox
            onClick={handleMoveRoutine}
            imgName={routineLogo}
            alt="루틴"
            title="루틴"
          />
          <CategoryBox
            onClick={handleMoveHome}
            imgName={homeLogo}
            alt="홈"
            title="홈"
          />
          <CategoryBox
            onClick={handleMoveOrder}
            imgName={cartLogo}
            alt="장바구니"
            title="장바구니"
          />
          <CategoryBox
            onClick={handleMoveMypage}
            imgName={mypageLogo}
            alt="마이페이지"
            title="마이페이지"
          />
        </FooterCategory>
      </FooterWrapper>
      <Space></Space>
    </>
  );
};
export default MainFooter;

const FooterWrapper = styled.div`
  width: 30%;
  min-width: 430px;
  border-top: 3px solid #d9d9d9;
  position: fixed;
  bottom: 0;
  background-color: white;
  z-index: 1000;
`;

const FooterCategory = styled.div`
  width: 100%;
  margin-top: 5px;
  margin-bottom: -5px;
  display: flex;
  justify-content: space-around;
`;

const Space = styled.div`
  height: 80px;
  /* margin-top: 30px; */
`;

장바구니와 마이페이지에 적용한 이미지도 다른 이미지와 달리 꽉 채워지지 않아서 다른 이미지로 변경했다.

 

그리고 메인 페이지에 있는 배너 슬라이드를 구현하려 했는데.. 이놈의 배너슬라이드는 예전부터 왜 이렇게 적용이 안되는지 모르겠다.

결론부터 말하면 말끔하게 구현이 안 됐다.

구현에 시도한 방법은 세 가지가 있는데, react-draggable, react-slick, css와 javascript를 이용해 구현이 있었다.

 

기획한 페이지는 웹앱이기 때문에 드래그를 통한 슬라이드가 필요하며 데스크탑 페이지에서도 드래그로 구현하자고 했기 때문에 이 기능에 제일 적합한 react-draggable 기능을 사용해서 구현해봤다.

draggable을 사용해서 드래그 자체는 구현이 되었으나 마우스를 클릭하고 페이지 바깥까지 빼서 마우스를 떼면 div에 커서가 달라붙어서 안떼지는 버그가 있었다. 이걸 어떻게든 수정해보고자 이것저것 찾아서 넣어봤는데 해결이 안되서 패스

 

slick을 사용했을 땐 배너 div의 안에 Slider라는 slick 자체 div를 넣어서 사용하는데 자체 div에는 css적용을 하지 못해서 display: flex를 통해 x좌표로 이동되게 하려했는데 그 부분을 해결하지 못했다. 

  return (
    <TopRoutineBanner ref={bannerRef} onMouseDown={handleMouseDown}>
      <Slice {...setting}>
        <BannerBox />
        <BannerBox />
        <BannerBox />
      </Slice>
    </TopRoutineBanner>
  );

 

이런식으로 작성을 해야 하는데 flex가 TopRoutineBanner에 작성되어있기 때문에 자식 컴포넌트에 간섭하기가 안됐다.

안쪽에다가 flex를 먹이면 Slice 기능이 바깥에 있기 때문에 통쨰로 이동이 되서 실패했다.

 

그래서 기능을 사용하지 않고 javascript와 css를 사용해서 구현하려고 구글링해가며 작성했는데 이건 작동이 아예 안된다. 개망했다;

import styled from "styled-components";
import BannerBox from "./bannerBox";
import { useEffect, useRef, useState } from "react";

const TopRoutineBox: React.FC = () => {
  const bannerRef = useRef<HTMLDivElement>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [startX, setStartX] = useState(0);
  const [scrollLeft, setScrollLeft] = useState(0);

  const handleMouseDown = (e: React.MouseEvent) => {
    if (bannerRef.current) {
      setIsDragging(true);
      setStartX(e.pageX - bannerRef.current.offsetLeft);
      setScrollLeft(bannerRef.current.scrollLeft);
    }
  };

  const handleMouseMove = (e: MouseEvent) => {
    if (isDragging && bannerRef.current) {
      const x = e.pageX - bannerRef.current.offsetLeft;
      const walk = (x - startX) * 2; // Adjust scroll speed
      bannerRef.current.scrollLeft = scrollLeft - walk;
    }
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("mouseup", handleMouseUp);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("mouseup", handleMouseUp);
    };
  }, [isDragging]);

  return (
    <TopRoutineBanner ref={bannerRef} onMouseDown={handleMouseDown}>
      <BannerBox />
      <BannerBox />
      <BannerBox />
    </TopRoutineBanner>
  );
};

export default TopRoutineBox;

const TopRoutineBanner = styled.div`
  width: max-content;
  margin: 20px 0;
  overflow-x: auto;
  position: relative;
  display: flex;
  justify-content: flex-start;
  cursor: grab;

  &:active {
    cursor: grabbing;
  }

  &::-webkit-scrollbar {
    display: none;
  }
`;

이것저것 찾아보면서 코드를 너무 많이 떡칠해놔서 싹 지우고 다시 구현해볼 예정이다.

css문제도 좀 있는 것 같긴한데 아직은 원인을 못찾았다.