Merge branch 'develop' into (#79)fix/css-detail

Team-Port · Nov 18, 2023 · d154cfd · d154cfd
2 parents 4b06d03 + dc885f2
commit d154cfd
Show file tree

Hide file tree

Showing 9 changed files with 329 additions and 191 deletions.
diff --git a/public/asset/Icon_filled_heart.svg b/public/asset/Icon_filled_heart.svg
diff --git a/src/NewApp.js b/src/NewApp.js
@@ -13,41 +13,43 @@ import UploadVideo from "./page/new-portal/UploadVideo";
 import UploadPost from "./page/new-portal/UploadPost";
 import Detail from "./page/new-portal/Detail";
 import Mypage from "./page/new-portal/Mypage";
+import { QueryClient, QueryClientProvider } from "react-query";
+
+const queryClient = new QueryClient();
 
 const NewApp = () => {
   return (
-    <BrowserRouter>
-      {window.location.pathname !== "/new-portal/login" &&
-        window.location.pathname !== "/new-portal/signin" &&
-        window.location.pathname !== "/new-portal/landing" && (
-          <>
-            <Header />
-            <Sidebar />
-            <img
-              className="fixed bottom-0 z-0 w-full m-0"
-              src="../asset/bg-gradation.svg"
-            />
-            <img
-              className="fixed m-0 right-0 bottom-0 h-[60%] z-0"
-              src="../asset/bg-word.svg"
-            />
-          </>
-        )}
-      <Routes>
-        <Route path="/new-portal/landing" element={<Landing />} />
-        <Route path="/new-portal" element={<Home />} />
-        <Route path="/new-portal/:category" element={<Home />} />
-        <Route path="/new-portal/login" element={<Login />} />
-        <Route path="/new-portal/signin" element={<Signin />} />
-        <Route path="/new-portal/upload-video" element={<UploadVideo />} />
-        <Route path="/new-portal/upload-post" element={<UploadPost />} />
-        <Route path="/new-portal/mypage" element={<Mypage />} />
-        <Route
-          path="/new-portal/video-detail"
-          element={<Detail />} // 추후 '/video/:id' 형식으로 바꿀 예정
-        />
-      </Routes>
-    </BrowserRouter>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        {window.location.pathname !== "/new-portal/login" &&
+          window.location.pathname !== "/new-portal/signin" &&
+          window.location.pathname !== "/new-portal/landing" && (
+            <>
+              <Header />
+              <Sidebar />
+              <img
+                className="fixed bottom-0 z-0 w-full m-0"
+                src="/asset/bg-gradation.svg"
+              />
+              <img
+                className="fixed m-0 right-0 bottom-0 h-[60%] z-0"
+                src="/asset/bg-word.svg"
+              />
+            </>
+          )}
+        <Routes>
+          <Route path="/new-portal/landing" element={<Landing />} />
+          <Route path="/new-portal" element={<Home />} />
+          <Route path="/new-portal/:category" element={<Home />} />
+          <Route path="/new-portal/login" element={<Login />} />
+          <Route path="/new-portal/signin" element={<Signin />} />
+          <Route path="/new-portal/upload-video" element={<UploadVideo />} />
+          <Route path="/new-portal/upload-post" element={<UploadPost />} />
+          <Route path="/new-portal/boards/:boardId" element={<Detail />} />
+          <Route path="/new-portal/mypage" element={<Mypage />} />
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
   );
 };
 

diff --git a/src/component/ new-portal/TextEditor.jsx b/src/component/ new-portal/TextEditor.jsx
@@ -78,24 +78,14 @@ const TextEditor = ({
       </div>
     );
   };
-
-  const categoryOld = [
-    { value: "IT", label: "IT" },
-    { value: "BACKEND", label: "Backend" },
-    { value: "JAVA", label: "Java" },
-    { value: "PYTHON", label: "Python" },
-    { value: "REACT", label: "React" },
-    { value: "DANCE", label: "Dance" },
-    { value: "LANGUAGE", label: "language" },
-  ]
 
   const category = [
     { value: "IT", label: "IT" },
-    { value: "design", label: "Design" },
-    { value: "dance", label: "Dance" },
-    { value: "exercise", label: "Exercise" },
-    { value: "language", label: "Language" },
-    { value: "sales", label: "Sales" },
+    { value: "DESIGN", label: "Design" },
+    { value: "DANCE", label: "Dance" },
+    { value: "EXERCISE", label: "Exercise" },
+    { value: "LANGUAGE", label: "Language" },
+    { value: "SALES", label: "Sales" },
   ];
 
   return (
@@ -110,7 +100,7 @@ const TextEditor = ({
         <ReactSelect
           className="w-[35%] lg:w-[30%] xl:w-[26%] outline-none"
           placeholder="카테고리를 선택하세요."
-          options={categoryOld}
+          options={category}
           isMulti
           closeMenuOnSelect={true}
           hideSelectedOptions={false}

diff --git a/src/component/ new-portal/VideoItem.jsx b/src/component/ new-portal/VideoItem.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import "../../../src/styles/tailwind.css";
 import Category from "../../component/ new-portal/Category";
+import { useNavigate } from "react-router-dom";
 
 const VideoItem = ({
   title,
@@ -19,8 +20,10 @@ const VideoItem = ({
   const day = createDate.getDate();
   const { nickname, imageUrl } = userSimpleDto;
 
+  const navigate = useNavigate();
+
   return (
-    <div className="flex w-full h-full px-3">
+    <div className="flex w-full h-full px-3 hover:cursor-pointer">
       <div className="w-full h-full ">
         <div className="flex flex-col bg-white bg-opacity-75 rounded-[10px] gap-[10px]">
           <div className="flex justify-between items-center px-[10px] mt-[10px]">
@@ -43,7 +46,7 @@ const VideoItem = ({
               </div>
             </div>
           </div>
-          <div className="flex justify-center">
+          <div className="flex justify-center h-[220px] w-[310px] object-cover">
             <img
               className="mx-[40px] rounded-[10px] h-full w-[95%]"
               src={thumbnailUrl}

diff --git a/src/component/ new-portal/VideoList.jsx b/src/component/ new-portal/VideoList.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import VideoItem from "./VideoItem";
 import axios from "axios";
 import { HOST_URL } from "../../lib/HostUrl";
+import { Link } from "react-router-dom";
 
 const VideoList = ({ division, filter }) => {
   // const [imageUrl, setimageUrl] = useState(null);
@@ -67,24 +68,26 @@ const VideoList = ({ division, filter }) => {
     <div className="w-full h-full">
       <div className="grid grid-cols-3 grid-rows-3 gap-4 pl-[20px] pr-[70px]">
         {items.map((item) => (
-          <div
-            key={item.id}
-            className="bg-white bg-opacity-75 rounded-[10px] gap-[10px]"
-          >
-            <VideoItem
-              title={item.title}
-              summary={item.summary}
-              category1={item.category1}
-              category2={item.category2}
-              createAt={item.createAt}
-              // imageUrl={imageUrl}
-              thumbnailUrl={item.thumbnailUrl}
-              view={item.view}
-              user_id={item.id}
-              division={item.division}
-              userSimpleDto={item.userSimpleDto}
-            />
-          </div>
+          <Link to={`/new-portal/boards/${item.id}`}>
+            <div
+              key={item.id}
+              className="bg-white bg-opacity-75 rounded-[10px] gap-[10px]"
+            >
+              <VideoItem
+                title={item.title}
+                summary={item.summary}
+                category1={item.category1}
+                category2={item.category2}
+                createAt={item.createAt}
+                // imageUrl={imageUrl}
+                thumbnailUrl={item.thumbnailUrl}
+                view={item.view}
+                user_id={item.id}
+                division={item.division}
+                userSimpleDto={item.userSimpleDto}
+              />
+            </div>
+          </Link>
         ))}
       </div>
     </div>