[Feature] - 여행기 상세 기능 구현 (#42)

* feat: 기본 폰트 설정

1. webpack 내 asset/resource 옵션 추가

2. pretendard 폰트 추가

3. woff에 대한 타입 추가

4. globalStyle 내 기본 폰트를 pretendard로 변경

* feat: svg 내 asset 설정

* feat: ThemeProvider 추가

1. theme 관련 declare 파일 추가

2. theme 추가

3. theme을 ThemeProvider 적용

* feat: svg를 컴포넌트 형태로 사용하도록 변경

1. @svgr/webpack 의존성 추가

2. webpack.common.js 내 관련 설정 추가(url, component 모두 사용)

3. svg.d.ts 내 svg 관련 타입 설정 추가

* feat: font 관련 local 함수 추가

* feat: assets/index.ts 내 marker url 설정 추가

* feat: tanstack query 의존성 추가

* chore: prettier 내 sort 순서 변경

* chore: 환경 변수 세팅

1. dotenv-webpack 의존성 추가

2. webpack config 파일 내 DotenvWebpack를 통해 환경변수 파일 동적으로 변경하도록 설정

* feat: axios instance 객체 생성

baseUrl 지정

* feat: react-query 및 devtools 설정 추가

* chore: @apis path alias 추가

* refactor: theme 내 detail에 font-family 제거

* feat: Box 컴포넌트 구현

* feat: Carousel 컴포넌트 구현

* feat: Header 컴포넌트 구현

* feat: Tab 컴포넌트 구현

* feat: TransformBottomSheet 컴포넌트 구현

* feat: PlaceDetailCard 컴포넌트 구현

* feat: TravelogueTabContent 컴포넌트 구현

* feat: GoogleMapView 컴포넌트 구현

* chore: re-export 관련 설정 추가

* feat: 초기 여행기 상세 페이지 구현

* chore: .gitignore 내 .env.development, .env.production만 오도록 변경

* chore: @react-google-maps/api 의존성 추가

* fix(Carousel): 이미지가 이동하지 않는 문제 해결

max-width 대신 transform 속성 추가

frontend/.gitignore

@@ -13,10 +13,8 @@
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env.development
+.env.production
 
 npm-debug.log*
 yarn-debug.log*

frontend/.prettierrc.json

@@ -11,16 +11,16 @@
   "prefer-const": true,
   "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "importOrder": [
+    "^react",
     "^@emotion/(.*)$",
+    "<THIRD_PARTY_MODULES>",
+    "^@tanstack/(.*)$",
     "^@apis/(.*)$",
-    "^@hooks/(.*)$",
-    "^(@|components/common)(.*|$)",
-    "^(@|components/layout)(.*|$)",
-    "^(@|components/pages)(.*|$)",
     "^@components/(.*)$",
+    "^@hooks/(.*)$",
+    "^@constants/(.*)$",
     "^@styles/(.*)$",
     "^@assets/(.*)$",
-    "^@constants/(.*)$",
     "^[./]"
   ],
   "importOrderSeparation": true,

frontend/package.json

@@ -11,10 +11,16 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@react-google-maps/api": "^2.19.3",
+    "@tanstack/react-query": "^5.51.1",
+    "@tanstack/react-query-devtools": "^5.51.1",
+    "axios": "^1.7.2",
+    "dotenv-webpack": "^8.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

frontend/src/App.tsx

@@ -1,3 +1,7 @@
-export default function App() {
-  return <div>App</div>;
-}
+import TravelogueDetailPage from "@components/pages/travelogueDetail/TravelogueDetailPage";
+
+const App = () => {
+  return <TravelogueDetailPage />;
+};
+
+export default App;

frontend/src/apis/client.ts

@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export const client = axios.create({
+  baseURL: process.env.REACT_APP_BASE_URL,
+});

frontend/src/assets/svg/index.ts

@@ -0,0 +1,9 @@
+export { default as Hamburger } from "./hamburger.svg";
+export { default as BackIcon } from "./back-icon.svg";
+export { default as NextArrow } from "./next-arrow.svg";
+export { default as PrevArrow } from "./prev-arrow.svg";
+export { default as UpArrow } from "./up-arrow.svg";
+export { default as DownArrow } from "./down-arrow.svg";
+export { default as Marker } from "./marker.svg";
+export { default as markerUrl } from "./marker.svg?url";
+export { default as EmptyHeart } from "./empty-heart.svg";

frontend/src/components/common/Box/Box.styled.ts

@@ -0,0 +1,29 @@
+import styled from "@emotion/styled";
+
+export const Box = styled.div`
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+
+  width: 100%;
+  height: 3.98rem;
+  padding-left: 1.6rem;
+  border: 1px solid ${(props) => props.theme.color.borderGray};
+
+  border-radius: 4px;
+`;
+
+export const PlaceName = styled.span`
+  ${({ theme }) => theme.typography.detailBold}
+`;
+
+export const TagList = styled.ul`
+  display: flex;
+  gap: 0.4rem;
+  color: #616161;
+`;
+
+export const Tag = styled.li`
+  ${(props) => props.theme.typography.detail}
+  color: ${(props) => props.theme.color.darkGray}
+`;

frontend/src/components/common/Box/Box.tsx

@@ -0,0 +1,21 @@
+import * as S from "./Box.styled";
+
+interface BoxProps {
+  placeName: string;
+  tags: string[];
+}
+
+const Box = ({ placeName, tags }: BoxProps) => {
+  return (
+    <S.Box>
+      <S.PlaceName>{placeName}</S.PlaceName>
+      <S.TagList>
+        {tags.map((tag) => (
+          <S.Tag key={tag}>{`#${tag}`}</S.Tag>
+        ))}
+      </S.TagList>
+    </S.Box>
+  );
+};
+
+export default Box;

frontend/src/components/common/Carousel/Carousel.styled.ts

@@ -0,0 +1,83 @@
+import styled from "@emotion/styled";
+
+export const CarouselContainer = styled.div`
+  position: relative;
+
+  width: 100%;
+  height: 233px;
+  overflow: hidden;
+`;
+
+export const CarouselImageList = styled.ul`
+  display: flex;
+
+  width: 100%;
+  height: 100%;
+
+  transition: transform 0.3s ease-in-out;
+`;
+
+export const CarouselImageItem = styled.li`
+  flex: 0 0 100%;
+
+  width: 100%;
+  height: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+    object-position: center;
+  }
+`;
+
+export const CarouselButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+
+  background-color: rgba(0, 0, 0, 0.5);
+
+  cursor: pointer;
+
+  &:first-of-type {
+    left: 10px;
+  }
+
+  &:last-of-type {
+    right: 10px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+
+export const CarouselImageBadge = styled.div`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+
+  border-radius: 20px;
+  padding: 6px 10px;
+
+  background-color: rgba(0, 0, 0, 0.5);
+
+  color: #fff;
+  font-size: 12px;
+
+  img {
+    height: 13px;
+  }
+`;

frontend/src/components/common/Carousel/Carousel.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+
+import { css } from "@emotion/react";
+
+import { NextArrow, PrevArrow } from "@assets/svg";
+
+import * as S from "./Carousel.styled";
+
+interface CarouselProps {
+  imageUrls: string[];
+}
+
+const carouselImageListStyling = (currentIndex: number) => css`
+  transform: translateX(-${currentIndex * 100}%);
+`;
+
+const Carousel = ({ imageUrls }: CarouselProps) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const isFirstImage = currentIndex === 0;
+  const isLastImage = currentIndex === imageUrls.length - 1;
+
+  const handleClickPrevButton = () => {
+    !isFirstImage && setCurrentIndex((prevIndex) => prevIndex - 1);
+  };
+
+  const handleClickNextButton = () => {
+    !isLastImage && setCurrentIndex((prevIndex) => prevIndex + 1);
+  };
+
+  return (
+    <S.CarouselContainer>
+      <S.CarouselImageList css={carouselImageListStyling(currentIndex)}>
+        {imageUrls.map((imageUrl, index) => (
+          <S.CarouselImageItem key={index}>
+            <img src={imageUrl} alt={`travels place img ${index + 1}`} />
+          </S.CarouselImageItem>
+        ))}
+      </S.CarouselImageList>
+      <S.CarouselImageBadge>{`${currentIndex + 1} / ${imageUrls.length}`}</S.CarouselImageBadge>
+      <S.CarouselButton
+        onClick={handleClickPrevButton}
+        aria-label="Previous image"
+        disabled={isFirstImage}
+      >
+        <PrevArrow />
+      </S.CarouselButton>
+      <S.CarouselButton
+        onClick={handleClickNextButton}
+        aria-label="Next image"
+        disabled={isLastImage}
+      >
+        <NextArrow />
+      </S.CarouselButton>
+    </S.CarouselContainer>
+  );
+};
+
+export default Carousel;