5.1. 저장한 관광지/경로 목록 페이지

[seondy]

#️⃣ 연관된 이슈

• close 5.1. 저장한 관광지/경로 목록 페이지 #24

📝 작업 내용

• 5.1.1. 저장한 관광지 목록 페이지 마크업 + 퍼블리싱
• 5.1.2. 저장한 경로 목록 페이지 마크업 + 퍼블리싱
• TabButton Style 분리 및 퍼블리싱

📸 스크린샷

• 내 여행 페이지의 마크업 & 퍼블리싱을 진행했습니다.
• 상단의 탭바 (장소 / 경로) 는 디테일페이지에 재사용될 것이라고 생각해 스타일을 따로 분리해뒀습니다.

📌 이슈 사항

• 상단 탭바는 공통 컴포넌트의 버튼 폴더에, TabButton.style.jsx로 분리해뒀습니다. 코드 내용은 다음과 같습니다.

import styled from "styled-components";
import { theme } from "../../../style/theme";
import { applyFontStyles } from "../../../utils/fontStyles";

export const TabButton = styled.button`
  ${({ fontSize }) => applyFontStyles(fontSize)}
  background-color: inherit;
  width: ${({ btnCnt }) => (btnCnt ? `${100 / btnCnt}%` : "auto")};
  height: 48px;
  border: none;
  border-bottom: 3px solid ${({ isActive }) => (isActive ? theme.color.primary : theme.color.gray3)};
  color: ${({ isActive }) => !isActive && theme.color.gray2};
`;

• 이렇게 분리된 버튼을 사용하는 방법은, 아래 코드와 같습니다.

<nav aria-label="내 여행 (장소 / 경로)">
  <TabButton
    onClick={() => setActiveTab("places")}
    isActive={activeTab === "places"}
    fontSize={theme.font.body1}
    btnCnt={2}
  >
    장소
  </TabButton>
  <TabButton
    onClick={() => setActiveTab("routes")}
    isActive={activeTab === "routes"}
    fontSize={theme.font.body1}
    btnCnt={2}
  >
    경로
  </TabButton>
</nav>

• isActive={activeTab === "places"} : 활성화된 탭버튼 표시
• fontSize={theme.font.body1} : 폰트 사이즈 prop
• btnCnt={2} : 한 줄에 들어갈 탭버튼 개수 -> 개수에 따라 width가 변경됩니다.

💬리뷰 요구사항(선택)

[kimmoonju-102]

수고하셨습니다👍

[kimmoonju-102]

maxWidth가 global style에 정의되어 있던 건가요?

[seondy]

아니요! PopUp(Modal 컴포넌트) 작업 때, 추가했던 부분입니다!!!
이후에 375px로 사용했던 부분을 한 번에 변경해야할 가능성이 있다고 생각했어요! (현재 max-width 값이 작은 편인 것 같아서요!) 그래서 375px로 작업됐던 부분들을 maxWidth로 정의해둔 값으로 변경했습니닷!
참고 pr 링크입니당!❤️