공통 - PopUp (Modal) 컴포넌트

[seondy]

#️⃣ 연관된 이슈

• close 공통 - PopUp (Modal) 컴포넌트 #25

📝 작업 내용

• 공통 컴포넌트 - PopUp (Modal) 컴포넌트 마크업

• 공통 컴포넌트 - PopUp (Modal) 컴포넌트 퍼블리싱

• 공통 컴포넌트 - PopUp (Modal) 컴포넌트 테스트

• max-width 설정 변경

• AttractionItem hover 퍼블리싱

• NavigationBar Routing 변경

• 스타일 변경 & 오타 수정 & 불필요 코드 제거

📸 스크린샷

• 경로 저장 및 삭제에서 사용하는 모달 컴포넌트를 작업했습니다.

• 타입으로 "DELETE"를 넘겨줬을 때, "SAVE"로 넘겨줬을 때로 구분하여 진행했습니다.
• 경로 저장의 경우, input 박스가 비어있으면 확인 버튼을 비활성화 시켰습니다.

• 네비게이션바의 Home과 My Trip을 눌렀을 때, 각 페이지로 이동하도록 변경했습니다.

• 여기에서 추가적인 수정이 필요할 것 같습니다!

• 추가로 일부 스타일 변경을 했습니다. (hover, cursor, max-width 등)

📌 이슈 사항

feat/myTripPage 브랜치에서 생성한 브랜치입니다!

모달 테스트가 필요해 진행된 브랜치에서 추가로 생성했습니다. (현재 myTripPage로 병합)

• 임의로 네비게이션바를 수정했습니다.
  현재 Location을 받아오는 형태로 생각해서 변경을 했는데, 추가적인 페이지에서 HOME 활성화되어 있는 것을 확인해 이 부분 체크 후 수정이 필요할 것 같습니다.

import { useEffect, useState } from "react";
import { Link, useLocation, useParams } from "react-router-dom";
import styled from "styled-components";
import { theme } from "../../../style/theme";
import { applyFontStyles } from "../../../utils/fontStyles";

const NavigationBar = () => {
  const location = useLocation();
  const [activeTab, setActiveTab] = useState(location.pathname);

  useEffect(() => {
    setActiveTab(location.pathname);
  }, [location.pathname]);

  const handleTabClick = (tab) => {
    setActiveTab(tab);
  };

  return (
    <NaviContainer>
      <NavbarLink to="/complete" onClick={() => handleTabClick("/map")}>
        <NaviBtn
          src={activeTab === "/map" ? "/src/assets/NavigationBar/mapOn.svg" : "/src/assets/NavigationBar/mapOff.svg"}
        />
        <NaviText $active={activeTab === "/map"}>Map</NaviText>
      </NavbarLink>
      <NavbarLink to="/home" onClick={() => handleTabClick("/home")}>
        <NaviBtn
          src={activeTab === "/home" ? "/src/assets/NavigationBar/homeOn.svg" : "/src/assets/NavigationBar/homeOff.svg"}
        />
        <NaviText $active={activeTab === "/home"}>Home</NaviText>
      </NavbarLink>
      <NavbarLink to="/trip" onClick={() => handleTabClick("/trip")}>
        <NaviBtn
          src={activeTab === "/trip" ? "/src/assets/NavigationBar/tripOn.svg" : "/src/assets/NavigationBar/tripOff.svg"}
        />
        <NaviText $active={activeTab === "/trip"}>My Trip</NaviText>
      </NavbarLink>
    </NaviContainer>
  );
};

export default NavigationBar;

• const location = useLocation(); 으로 받아온다고 생각해 "/trip"이러한 형태로 변경했습니다.
  그러나, 피그마 상에서 설화별 관광지에도 네비게이션 바가 있는 것으로 확인됩니다! => 회의 때 이야기해봐요🍀

💬리뷰 요구사항(선택)

• MyTripPage 브랜치에서 maxWidth 설정을 변경한 곳이 있습니다. 저번에 리뷰 드렸을 때, navigationBar의 width를 100%로 하는 것이 좋을 것 같다고 리뷰 드렸는데요, 제가 생각하지 못한 부분이 있었던 것 같습니다.
  position: fixed;의 경우, viewPort 기준이기 때문에 뷰포트 width를 전부 가져가게 되더라구요!
  그래서 우선 theme에 maxWidth를 설정해두고, 그 값을 가져다가 사용했습니다! 이유는, 저희가 maxWidth를 생각보다 작게가지고 있다고 생각을 해서, 언제든 변경을 할 수 있으려면 값을 담아두고 그 값만을 가지고 사용해야 된다고 생각했기 때문입니당!

export const theme = {
  maxWidth: "375px",

변경 코드

const NaviContainer = styled.div`
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: ${theme.maxWidth};
  display: flex;
  justify-content: space-around;
  background-color: #f6faed;

  height: 83px;
  border-top: 2px solid #c2d0a1;
  z-index: 1000;
`;

[kimmoonju-102]

수고하셨습니당👍