Fix: 강의페이지 요구사항 반영

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

@@ -45,6 +45,9 @@
                 flex: none;
                 object-fit: contain;
             }
+            li:hover {
+                cursor: pointer;
+            }
         }
     }
 
@@ -61,9 +64,9 @@
         transition: border 300ms;
 
         img {
-            flex-shrink: 0;
-            min-width: 100%;
-            min-height: 100%;
+            display: block;
+            width: 100%;
+            object-fit: contain;
         }
     }
 

src/components/lecture-page/Carousel.tsx

@@ -1,13 +1,19 @@
 import styles from "./Carousel.module.scss";
 import { useEffect, useRef, useState } from "react";
 import { ButtonCircle } from "../../interfaces/forms/Button";
+
+import { ICarouselList } from "../../constants/Carousel";
+import { useNavigate } from "react-router-dom";
+
 interface Props {
-    carouselList: string[];
+    carouselList: ICarouselList[];
 }
 
 export const Carousel = ({ carouselList }: Props) => {
+    const navigate = useNavigate();
+
     const [currIndex, setCurrIndex] = useState(1);
-    const [currList, setCurrList] = useState<string[]>();
+    const [currList, setCurrList] = useState<ICarouselList[]>([]);
 
     const carouselRef = useRef<HTMLUListElement>(null);
 
@@ -66,11 +72,11 @@ export const Carousel = ({ carouselList }: Props) => {
                 <ButtonCircle type="left" className={styles.swipeLeft} onClick={() => handleSwipe(-1)}></ButtonCircle>
                 <ButtonCircle type="right" className={styles.swipeRight} onClick={() => handleSwipe(1)}></ButtonCircle>
                 <ul className={styles.carousel} ref={carouselRef}>
-                    {currList?.map((image, idx) => {
-                        const key = `${image}-${idx}`;
+                    {currList?.map((element, idx) => {
+                        const key = `${element.imgSrc}-${idx}`;
                         return (
-                            <li key={key} className={styles.carouselItem}>
-                                <img src={image} alt="carousel-img" />
+                            <li key={key} className={styles.carouselItem} onClick={() => navigate(element.link)}>
+                                <img src={element.imgSrc} alt="carousel-img" />
                             </li>
                         );
                     })}

src/constants/Carousel.ts

@@ -0,0 +1,11 @@
+export interface ICarouselList {
+    imgSrc: string;
+    link: string;
+}
+
+export const CarouselList: ICarouselList[] = [
+    {
+        imgSrc: "/carousel/carousel-item1.png",
+        link: "/test",
+    },
+];

src/interfaces/forms/Button.module.scss

@@ -23,16 +23,26 @@
 
 .btn_circle {
     display: block;
-    width: 60px;
-    height: 60px;
+    width: 45px;
+    height: 45px;
 
     border: 1px solid $color-primary;
     border-radius: 50%;
 
     color: $color-primary;
     background-color: #fff;
 
+    font-size: 0.8rem;
+
     &:hover {
         cursor: pointer;
     }
 }
+
+@include mobile {
+    .btn_circle {
+        width: 40px;
+        height: 40px;
+        font-size: 0.6rem;
+    }
+}

src/pages/lecture-page/LecturePage.tsx

@@ -7,11 +7,13 @@ import { Loader } from "../../interfaces/feedback/Loader";
 import { LectureSection } from "../../components/lecture-page/LectureSection";
 import { LectureCard } from "../../components/lecture-page/LectureCard";
 import { Carousel } from "../../components/lecture-page/Carousel";
+
 import { STATUS, useGetRequest } from "../../hooks/useRequest";
 import { IGetAllLectureResponse } from "../../api/ResponseTypes";
 
 import styles from "./LecturePage.module.scss";
 
+import { CarouselList } from "../../constants/Carousel";
 //test
 import { ParseVideoId } from "../../utils/YoutubeLinks";
 
@@ -30,15 +32,9 @@ export default function LecturePage() {
         navigate(`/lectures/search?key=${searchRef.current?.value}`);
     };
 
-    const CAROUSEL_LINK = [
-        "https://img.freepik.com/free-vector/hand-drawn-collage-design_23-2149543516.jpg?w=1800&t=st=1704845048~exp=1704845648~hmac=90a735e8f1f6ac7b1877466412724360ea3405a5b66610507ef5308ce8c69a1b",
-        "https://img.freepik.com/premium-vector/abstract-pastel-color-background-with-pink-purple-gradient-effect-graphic-design-decoration_120819-463.jpg",
-        "https://img.freepik.com/premium-vector/hand-painted-background-violet-orange-colours_23-2148427578.jpg",
-    ];
-
     return (
         <>
-            <Carousel carouselList={CAROUSEL_LINK}></Carousel>
+            <Carousel carouselList={CarouselList}></Carousel>
             <div className={styles.search_section}>
                 <Search ref={searchRef} onClick={onSearchBtnClick} placeholder="원하는 강좌를 검색해보세요!"></Search>
 

src/pages/lecture-page/LectureUploadPage.tsx

@@ -26,7 +26,13 @@ export default function LectureUploadPage() {
 
     const onHashTagAddClicked = () => {
         if (hashtagRef.current?.value) {
+            if (hashtags.includes(hashtagRef.current.value)) {
+                alert("이미 등록된 해시태그입니다");
+                return;
+            }
+
             setHashTags([...hashtags, hashtagRef.current.value]);
+            hashtagRef.current.value = "";
         }
     };