Feature: 실시간 인기강의 및 좋아요 API 연결

src/App.tsx

@@ -1,5 +1,6 @@
 import "@/styles/globals.scss";
-import { Route, Routes } from "react-router-dom";
+import { useEffect } from "react";
+import { Route, Routes, useLocation } from "react-router-dom";
 import { Provider } from "react-redux";
 import { store } from "./store/store";
 import { CookiesProvider } from "react-cookie";
@@ -23,6 +24,12 @@ import QuestionPage from "./pages/test-page/QuestionPage";
 import ResultPage from "./pages/test-page/ResultPage";
 
 export default function App() {
+    const pathname = useLocation();
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, [pathname]);
+
     return (
         <CookiesProvider>
             <Provider store={store}>

src/api/ResponseTypes.ts

@@ -3,6 +3,7 @@ export interface IGetAllLectureResponse {
         {
             id: number;
             video_link: string;
+            author: string;
             title: string;
             description: string;
             tags: string[];
@@ -16,6 +17,7 @@ export interface IGetLectureByIdResponse {
     response: {
         id: number;
         video_link: string;
+        author: string;
         title: string;
         description: string;
         tags: string[];

src/components/lecture-page/Carousel.module.scss

@@ -1,75 +1,87 @@
+@import "@/styles/utils";
 
 .container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  margin-bottom: 70px;
-  .carouselWrapper {
-    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
-    overflow: hidden;
+    margin-bottom: 70px;
+    .carouselWrapper {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
 
-    &:hover {
-      .swipeLeft,
-      .swipeRight {
-        position: absolute;
-        top: 45%;
-        z-index: 1;
-        display: block;
-        padding: 8px 6px;
-
-        border-radius: 50px;
-      }
-    }
+        &:hover {
+            .swipeLeft,
+            .swipeRight {
+                position: absolute;
+                top: 45%;
+                z-index: 1;
+                display: block;
+                padding: 8px 6px;
 
-    .swipeLeft,
-    .swipeRight {
-      display: none;
-    }
+                border-radius: 50px;
+            }
+        }
 
-    .swipeLeft {
-      left: 0;
-    }
+        .swipeLeft,
+        .swipeRight {
+            display: none;
+        }
 
-    .swipeRight {
-      right: 0;
-    }
+        .swipeLeft {
+            left: 0;
+        }
+
+        .swipeRight {
+            right: 0;
+        }
 
-    .carousel {
-      display: flex;
-      width: 100%;
+        .carousel {
+            display: flex;
+            width: 100%;
 
-      li {
-        flex: none;
-        object-fit: contain;
-      }
+            li {
+                flex: none;
+                object-fit: contain;
+            }
+        }
     }
-  }
 
-  .carouselItem {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 350px;
-    padding: 10px 0 15px;
-    overflow: hidden;
-    border-right: 2px solid white;
-    border-left: 2px solid white;
-    transition: border 300ms;
+    .carouselItem {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 350px;
+        padding: 10px 0 15px;
+        overflow: hidden;
+        border-right: 2px solid white;
+        border-left: 2px solid white;
+        transition: border 300ms;
 
-    img {
-      flex-shrink: 0;
-      min-width: 100%;
-      min-height: 100%;
+        img {
+            flex-shrink: 0;
+            min-width: 100%;
+            min-height: 100%;
+        }
     }
-  }
 
-  :root[color-theme='dark'] & {
-    .carouselItem {
-      border-right: 2px solid gray;
-      border-left: 2px solid gray;
+    :root[color-theme="dark"] & {
+        .carouselItem {
+            border-right: 2px solid gray;
+            border-left: 2px solid gray;
+        }
+    }
+}
+
+@include mobile {
+    .container {
+        margin-bottom: 30px;
+        .carouselWrapper {
+            .carouselItem {
+                height: 200px;
+            }
+        }
     }
-  }
-}
+}

src/components/lecture-page/LectureCard.module.scss

@@ -11,12 +11,15 @@
     img {
         display: block;
         width: 100%;
-        height: 160px;
+        aspect-ratio: 30/16;
         object-fit: cover;
     }
     &:hover {
         cursor: pointer;
     }
+    @include mobile {
+        width: 200px;
+    }
 }
 
 .lecture_card_default {
@@ -73,6 +76,10 @@
             font-size: 2rem;
             font-weight: bold;
         }
+        div:last-child {
+            @include vertical-center;
+            @include text-overflow(elipsis);
+        }
     }
 }
 

src/interfaces/navigation/Nav.module.scss

@@ -25,11 +25,12 @@
 }
 
 .nav_head {
-    @include vertical-center;
-    height: 100%;
-
+    a {
+        @include vertical-center;
+        height: 100%;
+    }
     img {
-        height: 50px;
+        height: 35px;
     }
 }
 
@@ -50,7 +51,7 @@
 @include mobile {
     .nav_head {
         img {
-            height: 40px;
+            height: 30px;
         }
     }
     .nav_item {

src/interfaces/navigation/Nav.tsx

@@ -54,7 +54,7 @@ export const NavHeadItem: React.FC = () => {
     return (
         <li className={styles.nav_head}>
             <Link to="/">
-                <img src="/icons/stocodi.svg" alt="" />
+                <img src="/icons/stocodi-letter.png" alt="" />
             </Link>
         </li>
     );

src/pages/lecture-page/LecturePage.module.scss

@@ -7,17 +7,6 @@
     padding-right: 15px;
 }
 
-.logo_container {
-    width: 100%;
-
-    img {
-        display: block;
-        height: 200px;
-
-        margin: 0px auto;
-    }
-}
-
 .badge_container {
     width: min(100%, 700px);
     height: 45px;

src/pages/lecture-page/LecturePage.tsx

@@ -39,10 +39,6 @@ export default function LecturePage() {
         <>
             <Carousel carouselList={CAROUSEL_LINK}></Carousel>
             <div className={styles.search_section}>
-                <div className={styles.logo_container}>
-                    <img src="/icons/stocodi-letter.png" alt="stocodi-letter" />
-                </div>
-
                 <Search ref={searchRef} onClick={onSearchBtnClick} placeholder="원하는 강좌를 검색해보세요!"></Search>
 
                 <div className={styles.badge_container}>
@@ -66,7 +62,7 @@ export default function LecturePage() {
                                 <LectureCard.Light
                                     key={index}
                                     title={element.title}
-                                    publisher={element.description}
+                                    publisher={element.author}
                                     imgSrc={`https://img.youtube.com/vi/${ParseVideoId(element.video_link)}/0.jpg`}
                                     onClick={() => navigate(`/lectures/view/${element.id}`)}
                                 />
@@ -77,11 +73,22 @@ export default function LecturePage() {
             )}
 
             <LectureSection title="실시간 인기강의">
-                {LectureData.map((element, index) => {
-                    return (
-                        <LectureCard.Rank key={index} rank={index + 1} title={element.title} publisher={element.publisher} imgSrc={element.imgSrc} />
-                    );
-                })}
+                {// 조회수 가장많은 5개의 강의를 가져옴
+                data?.response
+                    .sort((e1, e2) => e2.views - e1.views)
+                    .slice(0, 10)
+                    .map((element, index) => {
+                        return (
+                            <LectureCard.Rank
+                                key={index}
+                                rank={index + 1}
+                                title={element.title}
+                                publisher={element.author}
+                                imgSrc={`https://img.youtube.com/vi/${ParseVideoId(element.video_link)}/0.jpg`}
+                                onClick={() => navigate(`/lectures/view/${element.id}`)}
+                            />
+                        );
+                    })}
             </LectureSection>
 
             <LectureSection title="지금 주목받는 강사진">

src/pages/lecture-page/LectureUploadPage.tsx

@@ -9,7 +9,7 @@ import { Badge } from "../../interfaces/display/Badge";
 import { UploadPlaceholder } from "../../components/lecture-page/UploadPlaceholder";
 
 import { PostRequest } from "../../api/Request";
-import { GetAccessToken } from "../../api/Authentication";
+import { GetAccessToken, GetNickName } from "../../api/Authentication";
 
 import styles from "./LectureUploadPage.module.scss";
 
@@ -61,6 +61,7 @@ export default function LectureUploadPage() {
                     {
                         video_link: videolinkRef.current?.value,
                         title: titleRef.current?.value,
+                        author: GetNickName(),
                         description: descriptionRef.current?.value,
                         tags: hashtags,
                     },

src/pages/lecture-page/LectureViewPage.tsx

@@ -13,13 +13,20 @@ import { ParseVideoId } from "../../utils/YoutubeLinks";
 import { PutRequest } from "../../api/Request";
 import styles from "./LectureViewPage.module.scss";
 import { LectureCommentContainer } from "../../components/lecture-page/LectureComment";
+import { GetAccessToken } from "../../api/Authentication";
 
 export default function LectureViewPage() {
     const { id } = useParams();
     const { status, data } = useGetRequest<IGetLectureByIdResponse>(`/lectures/${id as string}`);
 
-    const onHeartClick = () => {
-        alert("서비스 준비중입니다");
+    const onHeartClick = async () => {
+        const response = await PutRequest<Record<string, never>, { response: boolean }>(
+            `/likes/${data?.response.id.toString() as string}`,
+            {},
+            GetAccessToken(),
+        );
+        if (response.response === true) alert("좋아요한 강의에 추가되었습니다");
+        else alert("좋아요가 취소되었습니다");
     };
     const onBookmarkClick = () => {
         alert("서비스 준비중입니다");
@@ -55,7 +62,7 @@ export default function LectureViewPage() {
                         <h2>{data?.response.title}</h2>
 
                         <LectureProvider
-                            name="스토코디"
+                            name={data?.response.author as string}
                             description={`조회수 ${data?.response.views.toString() as string} 회 | 좋아요 ${
                                 data?.response.likes.toString() as string
                             } 개`}