Merge branch 'main' of https://github.com/SPARCS-Service-Hackathon-20…

…24/A16-web
SPARCS-Service-Hackathon-2024 · Feb 15, 2024 · 6f5a8ad · 6f5a8ad
2 parents 6bd0a7e + f922392
commit 6f5a8ad
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 47 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -1,6 +1,20 @@
 import axios from 'axios';
 
-const api = axios.create({ baseURL: 'https://wayu.hackathon.sparcs.net/' });
+const api = axios.create({
+  baseURL: 'https://wayu.hackathon.sparcs.net/',
+  paramsSerializer: (params) => {
+    const searchParams = new URLSearchParams();
+    for (const key of Object.keys(params)) {
+      const param = params[key];
+      if (Array.isArray(param)) {
+        searchParams.append(key, param.join(','));
+      } else {
+        searchParams.append(key, param);
+      }
+    }
+    return searchParams.toString();
+  },
+});
 
 api.interceptors.request.use((config) => {
   const token = localStorage.getItem('accessToken');

diff --git a/src/pages/Videos.tsx b/src/pages/Videos.tsx
@@ -1,13 +1,12 @@
-import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
 import Header from './component/Header';
-import { FaLocationArrow } from "react-icons/fa";
-import { Link } from 'react-router-dom';
-import Category from './component/Category'; 
-import Grade from './component/Grade';
-import Feel from './component/Feel'; 
-import Reviews from './component/Reviews';
 import Menu from './component/Menu';
 import Video from './component/Video';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import api from '../api';
+import { useEffect, useState } from 'react';
 // type VideosProps = {
 //     type: string;
 //     profileImg: string;
@@ -16,19 +15,46 @@ import Video from './component/Video';
 //     videoImg?: string;
 //     followChk?: boolean;
 //     videoUrl: string;
-//     Categorys: string[];    
+//     Categorys: string[];
 // }
 
 export default function Videos() {
-    return (
-        <div className='h-[100vh] mb-[60px]'>
-            <Header back={true} review={true} white={true} text=' ' />
-            <Video  />
-            <Video  />
-            <Video  />
-            <Video  />
-            <Menu video={true}/>
-        </div>
-    );
-}
+  const { id } = useParams();
+  const { data, error } = useQuery({
+    queryKey: [
+      '/reviews',
+      { regions: ['서구', '중구', '유성구', '대덕구', '동구'] },
+    ],
+  });
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (id) return;
+    if (!data) return;
+    navigate(`/review/${data.data.list[0].id}`);
+  }, [data, id, navigate]);
 
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  return (
+    <div className="flex flex-col h-screen">
+      <Header back review white text=" " fixed />
+      <Swiper
+        className="w-full h-full flex-1 bg-black"
+        direction="vertical"
+        slidesPerView={1}
+        onSlideChange={(swiper) => setActiveIndex(swiper.activeIndex)}
+      >
+        {data?.data.list.map((review, index) => (
+          <SwiperSlide key={review.id}>
+            <div className="h-full w-full">
+              <Video {...review} active={activeIndex === index} />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      <Menu video={true} />
+    </div>
+  );
+}
diff --git a/src/pages/component/Header.tsx b/src/pages/component/Header.tsx
@@ -11,6 +11,7 @@ type HeaderProps = {
   className?: string;
   border?: boolean;
   white?: boolean;
+  fixed?: boolean;
 };
 
 const Header: React.FC<HeaderProps> = ({
@@ -22,6 +23,7 @@ const Header: React.FC<HeaderProps> = ({
   setting,
   border,
   white,
+  fixed = false,
 }) => {
   const navigate = useNavigate();
 
@@ -31,7 +33,9 @@ const Header: React.FC<HeaderProps> = ({
 
   return (
     <div
-      className={`max-w-screen-sm w-[100%] h-[56px] left-50% px-5 z-50 sticky top-0 flex justify-between items-center pl-3 leading-[56px] ${
+      className={`max-w-screen-sm w-[100%] h-[56px] left-50% px-5 z-50 ${
+        fixed ? 'fixed' : 'sticky'
+      } top-0 flex justify-between items-center pl-3 leading-[56px] ${
         white ? 'bg-inherit' : 'bg-white'
       } ${border && 'border-b border-[#E5E5E5]'} ${className}`}
     >

diff --git a/src/pages/component/Menu.tsx b/src/pages/component/Menu.tsx
@@ -36,7 +36,7 @@ const Menu: React.FC<MenuProps> = ({ home, map, video, mypage }) => {
         <p>지도</p>
       </Link>
       <Link
-        to="/Videos"
+        to="/review"
         className={`flex flex-col items-center justify-center text-sm w-[25%] h-[60px] ${
           video ? 'text-[#000000]' : 'text-[#828282]'
         }`}

diff --git a/src/pages/component/Video.tsx b/src/pages/component/Video.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import Menu from './Menu';
 import Grade from './Grade';
@@ -10,36 +10,51 @@ type VideoProps = {
   grade?: string;
 };
 
-const Video: React.FC<VideoProps> = ({ src, grade, name }) => {
-  const [isPlaying, setIsPlaying] = useState<boolean>(true);
+const Video = ({ user, place, tags, stars, likes, active }: VideoProps) => {
+  const videoEl = React.useRef<HTMLVideoElement>(null);
 
   const handleVideoClick = () => {
-    setIsPlaying((prevState) => !prevState);
-    console.log(isPlaying);
+    if (videoEl.current) {
+      if (videoEl.current.paused) {
+        videoEl.current.play();
+      } else {
+        videoEl.current.pause();
+      }
+    }
   };
 
+  useEffect(() => {
+    if (videoEl.current) {
+      if (active) {
+        videoEl.current.play();
+      } else {
+        videoEl.current.pause();
+      }
+    }
+  }, [active]);
+
   return (
     <div
       className="w-full h-custom overflow-hidden relative bg-black"
       onClick={handleVideoClick}
     >
       <video
         className="w-auto h-full object-contain m-auto"
-        autoPlay={isPlaying}
+        ref={videoEl}
         playsInline
         src="/no.mp4"
         muted
       ></video>
       <div className="bg-gradient-video w-full h-full absolute top-0 left-0"></div>
-      <div className="absolute right-5 bottom-[30%] z-10">
+      <div className="absolute right-5 bottom-[10%] z-10">
         <div className="heart flex flex-col justify-center items-center">
-          <div className="cursor-pointer">
+          <div className="cursor-pointer flex flex-col items-center">
             <img
               className="h-[20px] object-cover mt-6"
               src="/assets/heart.png"
               alt=""
             />
-            <p className="text-white text-xs mt-1">1235</p>
+            <p className="text-white text-xs mt-1">{likes}</p>
           </div>
           <div className="cursor-pointer">
             <img
@@ -67,20 +82,24 @@ const Video: React.FC<VideoProps> = ({ src, grade, name }) => {
       <div className="absolute left-5 bottom-[30px]">
         <div className="flex items-center">
           <div className="w-[48px] h-[48px] shrink-0 bg-gray-400 rounded-[48px] overflow-hidden">
-            <img className="" src="/" alt="" />
+            <img
+              className=""
+              src={`https://randomuser.me/api/portraits/men/${Math.floor(
+                Math.random() * 100,
+              )}.jpg`}
+              alt=""
+            />
           </div>
           <div className="pl-2">
             <div className="flex items-center text-white text-sm">
-              <p className="text-white font-bold">__A___D___</p>
+              <p className="text-white font-bold">{user.nickname}</p>
               <button className="px-2 bg-inherit ml-2 border boer-1 rounded-xlrd border-white text-white ">
-                팔로우
+                {user.isFollowing ? '팔로잉' : '팔로우'}
               </button>
             </div>
-            <p className="text-white text-sm leading-7">
-              유성구 둔산동 백년식당
-            </p>
+            <p className="text-white text-sm leading-7">{place.name}</p>
             <Grade
-              grade={4.8}
+              grade={stars}
               className={`w-[3%]`}
               className2={`text-sm text-white font-light`}
             />
@@ -90,14 +109,13 @@ const Video: React.FC<VideoProps> = ({ src, grade, name }) => {
           유성구 둔산동에 위치한 백년식당입니다.
           <br /> 다양한 반찬을 즐길 수 있습니다.
         </p>
-        <span className="px-2 bg-inherit mr-2 border border-1 rounded-xl border-white text-white">
-          #가족
-        </span>
-        <span className="px-2 bg-inherit mr-2 border border-1 rounded-xl border-white text-white">
-          #맛집
-        </span>
+        {tags.map((tag) => (
+          <span className="px-2 bg-inherit mr-2 border border-1 rounded-xl border-white text-white">
+            {`#${tag}`}
+          </span>
+        ))}
       </div>
-      <Comments />
+      {/* <Comments /> */}
     </div>
   );
 };

diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
@@ -29,7 +29,8 @@ const Router = () => {
             <Route path="/SearchPerson" element={<SearchPerson />} />
             <Route path="/SearchPlace" element={<SearchPlace />} />
             <Route path="/Store" element={<Store />} />
-            <Route path="/Videos" element={<Videos />} />
+            <Route path="/review" element={<Videos />} />
+            <Route path="/review/:id" element={<Videos />} />
             <Route path="/mypage" element={<MyPage />} />
             <Route path="/setting" element={<Setting />} />
             <Route path="/profileChange" element={<ProfileChange />} />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -13,7 +13,7 @@ export default {
       },
       backgroundImage: {
         'gradient-video':
-          'linear-gradient(to top,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 160px),linear-gradient(to bottom,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 96px)',
+          'linear-gradient(to top,rgba(0,0,0,.8) 120px,rgba(0,0,0,0) 260px),linear-gradient(to bottom,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 96px)',
       },
       height: {
         custom: 'calc(100vh - 60px)',