Merge branch 'FE-6--feat/Tours' of https://github.com/FinalDoubleTen/…

…TenTenFE into FE-4--feat/Search/publish

README.md

@@ -1,3 +1,7 @@
+## 📝 프로젝트 소개
+여정공유 여행플랫폼
+
+## 📖 Commit convention
 - Feat : 새로운 기능 추가
 - Fix : 버그 수정
 - Env : 개발 환경 관련 설정

src/api/auth.ts

@@ -1,12 +1,4 @@
-import axios from 'axios';
-
-export const client = axios.create({
-  baseURL: import.meta.env.VITE_SERVER_URL,
-  headers: {
-    'content-type': 'application/json',
-    withCredentials: true,
-  },
-});
+import client from './client';
 
 // 인증 관련 API
 

src/api/category.ts

@@ -1,12 +1,4 @@
-import axios from 'axios';
-
-export const client = axios.create({
-  baseURL: import.meta.env.VITE_SERVER_URL,
-  headers: {
-    'content-type': 'application/json',
-    withCredentials: true,
-  },
-});
+import client from './client';
 
 // 카테고리 관련 API
 

src/api/client.ts

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+const client = axios.create({
+  baseURL: import.meta.env.VITE_SERVER_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+});
+
+export default client;

src/api/comments.ts

@@ -1,12 +1,4 @@
-import axios from 'axios';
-
-export const client = axios.create({
-  baseURL: import.meta.env.VITE_SERVER_URL,
-  headers: {
-    'content-type': 'application/json',
-    withCredentials: true,
-  },
-});
+import client from './client';
 
 // 댓글 관련 API
 

src/api/member.ts

@@ -1,12 +1,4 @@
-import axios from 'axios';
-
-export const client = axios.create({
-  baseURL: import.meta.env.VITE_SERVER_URL,
-  headers: {
-    'content-type': 'application/json',
-    withCredentials: true,
-  },
-});
+import client from './client';
 
 // 유저 관련 API
 

src/api/region.ts

@@ -1,12 +1,4 @@
-import axios from 'axios';
-
-export const client = axios.create({
-  baseURL: import.meta.env.VITE_SERVER_URL,
-  headers: {
-    'content-type': 'application/json',
-    withCredentials: true,
-  },
-});
+import client from './client';
 
 // 지역 관련 API
 

src/api/review.ts

@@ -1,12 +1,4 @@
-import axios from 'axios';
-
-export const client = axios.create({
-  baseURL: import.meta.env.VITE_SERVER_URL,
-  headers: {
-    'content-type': 'application/json',
-    withCredentials: true,
-  },
-});
+import client from './client';
 
 // 리뷰 관련 API
 

src/api/tours.ts

@@ -1,12 +1,4 @@
-import axios from 'axios';
-
-export const client = axios.create({
-  baseURL: import.meta.env.VITE_SERVER_URL,
-  headers: {
-    'content-type': 'application/json',
-    withCredentials: true,
-  },
-});
+import client from './client';
 
 // 여행지 관련 API
 

src/api/trips.ts

@@ -1,12 +1,4 @@
-import axios from 'axios';
-
-export const client = axios.create({
-  baseURL: import.meta.env.VITE_SERVER_URL,
-  headers: {
-    'content-type': 'application/json',
-    withCredentials: true,
-  },
-});
+import client from './client';
 
 // 여정 관련 API
 

src/components/DetailSectionTop/DetailSectionTop.tsx

@@ -0,0 +1,18 @@
+import {
+  DetailToursInfo,
+  DetailToursRating,
+  DetailToursMap,
+  DetailTourButtons,
+} from '.';
+
+// 담당 컴포넌트들 호출하는 컴포넌트(분업 때문에 페이지 느낌으로 나눠봤습니다), API 호출 컴포넌트,
+export default function DetailSectionTop() {
+  return (
+    <>
+      <DetailToursInfo />
+      <DetailToursRating />
+      <DetailToursMap />
+      <DetailTourButtons />
+    </>
+  );
+}

src/components/DetailSectionTop/DetailTourButtons.tsx

@@ -0,0 +1,17 @@
+import { ReactComponent as PenIcon } from '../../assets/images/Pen.svg';
+import { ReactComponent as CalendarIcon } from '../../assets/images/Calendar.svg';
+
+export default function DetailTourButtons() {
+  return (
+    <div className="mt-2 flex w-full items-center justify-between py-2.5">
+      <button className="flex h-[53px] w-[157.5px] items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2">
+        <CalendarIcon />
+        <span className="text-sm">일정 추가</span>
+      </button>
+      <button className="flex h-[53px] w-[157.5px] items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2">
+        <PenIcon />
+        <span className="text-sm">리뷰 쓰기</span>
+      </button>
+    </div>
+  );
+}

src/components/DetailSectionTop/DetailToursInfo.tsx

@@ -0,0 +1,21 @@
+import { ReactComponent as HeartIcon } from '../../assets/images/Heart.svg';
+
+export default function DetailToursInfo() {
+  return (
+    <>
+      <div className="column mt-1 flex aspect-[3/2] h-[11.938rem] w-full items-start overflow-hidden rounded-lg">
+        <img
+          src="https://images.unsplash.com/photo-1609825488888-3a766db05542?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"
+          alt="tour-image"
+          className="h-full w-full"
+        />
+      </div>
+      <div className="mt-1 flex w-full items-center justify-between py-2">
+        <h1 className="text-2xl font-bold">강릉 세인트존스 호텔</h1>
+        <div className="top-75 h-[24px] w-[24px] cursor-pointer">
+          <HeartIcon fill="#D7D7D7" />
+        </div>
+      </div>
+    </>
+  );
+}

src/components/DetailSectionTop/DetailToursRating.tsx

@@ -0,0 +1,15 @@
+import { ReactComponent as StarIcon } from '../../assets/images/Star.svg';
+
+export default function DetailToursRating() {
+  return (
+    <div className="flex w-full items-center gap-1">
+      <StarIcon fill="yellow" />
+      <StarIcon fill="yellow" />
+      <StarIcon fill="yellow" />
+      <StarIcon fill="yellow" />
+      <StarIcon fill="#EDEDED" />
+
+      <p className="text-xs font-normal leading-4">(4)</p>
+    </div>
+  );
+}

src/components/DetailSectionTop/DetailToutsMap.tsx

@@ -0,0 +1,22 @@
+import { ReactComponent as MapIcon } from '../../assets/images/Map.svg';
+import { ReactComponent as CheckIcon } from '../../assets/images/Check.svg';
+import { ReactComponent as PhoneIcon } from '../../assets/images/Phone.svg';
+
+export default function DetailToursMap() {
+  return (
+    <div className="mt-4 w-full">
+      <div className="flex items-center justify-between gap-2.5">
+        <div className="flex">
+          <MapIcon />
+          <span className="ml-1 text-sm">강원 강릉시 창해로 307</span>
+        </div>
+        <CheckIcon className="cursor-pointer" />
+      </div>
+      <div className="border-8 border-sky-500 py-10 text-sm">지도 정보</div>
+      <div className="flex gap-1">
+        <PhoneIcon />
+        <span className="text-sm">064-743-0703</span>
+      </div>
+    </div>
+  );
+}

src/components/DetailSectionTop/index.tsx

@@ -0,0 +1,11 @@
+import DetailToursInfo from './DetailToursInfo';
+import DetailToursRating from './DetailToursRating';
+import DetailToursMap from './DetailToutsMap';
+import DetailTourButtons from './DetailTourButtons';
+
+export {
+  DetailToursInfo,
+  DetailToursRating,
+  DetailToursMap,
+  DetailTourButtons,
+};

src/components/common/footer/Footer.tsx

@@ -1,9 +1,50 @@
-const Footer = () => (
-  <footer
-    className="
-    sticky bottom-0 flex h-16 items-center justify-center bg-lightgray">
-    nav bar
-  </footer>
-);
+import { useLocation, useNavigate } from 'react-router-dom';
+import { CalendarIcon, HeartIcon, HomeIcon, UserIcon } from '../icons/Icons';
+
+const Footer = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+
+  return (
+    <footer
+      className="
+    bg-lightgray sticky bottom-0 flex h-16 items-center justify-center">
+      <nav className="flex w-[90%] items-center justify-between space-x-4">
+        <div
+          onClick={() => navigate('/')}
+          className="flex-col items-center justify-center hover:cursor-pointer">
+          <div className="flex justify-center">
+            <HomeIcon fill={isActive('/') ? 'currentColor' : 'none'} />
+          </div>
+          <p className="mt-2 text-center text-xs/[11px]">홈</p>
+        </div>
+        <div
+          onClick={() => navigate('/')}
+          className="flex-col items-center justify-center hover:cursor-pointer">
+          <CalendarIcon />
+          <p className="mt-2 text-center text-xs/[11px]">일정</p>
+        </div>
+        <div
+          onClick={() => navigate('/')}
+          className="flex-col items-center justify-center hover:cursor-pointer">
+          <div className="flex justify-center">
+            <HeartIcon />
+          </div>
+          <p className="mt-2 text-center text-xs/[11px]">찜</p>
+        </div>
+        <div
+          onClick={() => navigate('/')}
+          className="flex-col items-center justify-center hover:cursor-pointer">
+          <div className="flex justify-center">
+            <UserIcon />
+          </div>
+          <p className="mt-2 text-center text-xs/[11px]">내정보</p>
+        </div>
+      </nav>
+    </footer>
+  );
+};
 
 export default Footer;

src/components/common/header/DetailHeader.tsx

@@ -0,0 +1,16 @@
+import { useNavigate } from 'react-router-dom';
+import { ReactComponent as LeftIcon } from '../../../assets/images/Left.svg';
+
+export default function DetailHeader() {
+  const navigate = useNavigate();
+
+  const goBack = () => {
+    navigate(-1);
+  };
+
+  return (
+    <header className="flex h-6 h-[48px] w-full items-center pl-1">
+      <LeftIcon className="cursor-pointer" onClick={goBack} />
+    </header>
+  );
+}

src/components/common/header/index.tsx

@@ -1,2 +1,4 @@
 import Header from './Header';
-export { Header };
+import DetailHeader from './DetailHeader';
+
+export { Header, DetailHeader };