[bugfix] Slider 버그 수정

* 마우스로 슬라이드 내부의 텍스트 선택 안 되는 것 수정 * 원인: react-slick이 각 슬라이드의 user-select를 none으로 만들었음 * 슬라이드 내부에 버튼 같은 거 있을 때 클릭 안 되는 문제 수정 * 원인: react-slick은 슬라이드들의 opacity만 바꾸는 식으로 동작하기 때문에 마우스 이벤트가 특정 슬라이드에만 계속 먹음 * 기타 * .scoped.scss 안에서 .slick-slider 등의 global class를 사용하기 위해 ::v-deep 사용 * react-scoped-css 제작자 권장은 `/deep/` 또는 `>>>`이나, 두 문법은 sass(= dart-sass)에서 지원이 안 됨 (옛날 버전인 node-sass만 지원) * Vue에서는 같은 문제를 겪고 자체적으로 ::v-deep을 추가했는데, (<vuejs/vue-cli#3399 (comment)>) react-scoped-css도 내부적으로 Vue 컴파일러를 가져다가 쓰기 때문에 이 문법이 작동함
volunteer-project-1 · Mar 26, 2022 · 74372f8 · 74372f8
1 parent 878f614
commit 74372f8
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 39 deletions.
diff --git a/src/components/slider/SlickFix.scss b/src/components/slider/SlickFix.scss
@@ -0,0 +1,10 @@
+// 마우스로 슬라이드 내부의 텍스트 선택 안 되는 것 수정.
+.slick-slider {
+    user-select: auto;
+}
+
+// 슬라이드 내부에 버튼 같은 거 있을 때 클릭 안 되는 문제 수정.
+// 현재 슬라이드가 항상 가장 앞쪽에 그려지도록 함.
+.slick-current.slick-active {
+    z-index: 2;
+}
diff --git a/src/components/slider/Slider.scoped.scss b/src/components/slider/Slider.scoped.scss
@@ -1,9 +1,23 @@
 .mainVisualSlider {
-  max-width: 70%;
+  width: 100%;
 
   img {
     max-width: 100%;
     min-width: 100%;
     height: auto;
   }
 }
+
+.mainVisualSlider,
+.mainNoticeSlider {
+  // 마우스로 슬라이드 내부의 텍스트 선택 안 되는 것 수정.
+  ::v-deep .slick-slider {
+    user-select: auto;
+  }
+
+  // 슬라이드 내부에 버튼 같은 거 있을 때 클릭 안 되는 문제 수정.
+  // 현재 슬라이드가 항상 가장 앞쪽에 그려지도록 함.
+  ::v-deep .slick-current.slick-active {
+    z-index: 2;
+  }
+}
diff --git a/src/components/slider/index.tsx b/src/components/slider/index.tsx
@@ -1,21 +1,20 @@
 import React, { ReactNode, useState } from "react";
 import Slider, { Settings } from "react-slick";
-import classNames from "classnames";
 
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import "@/components/slider/Slider.scoped.scss";
 
 interface SliderProps {
-  className?: string;
   children: ReactNode;
 }
 
 const Sliders = ({ children }: SliderProps) => {
   <div>{children}</div>;
 };
-const MainVisualSlider = ({ className, children }: SliderProps) => {
-  const ref = React.useRef<any>();
+
+const MainVisualSlider = ({ children }: SliderProps) => {
+  const ref = React.useRef<Slider>(null);
   const [count, setCount] = useState(true);
 
   const settings: Settings = {
@@ -26,20 +25,26 @@ const MainVisualSlider = ({ className, children }: SliderProps) => {
     autoplaySpeed: 1000,
     fade: true,
   };
-  function play() {
+
+  const play = () => {
+    if (ref.current === null) {
+      return;
+    }
+
     if (count === true) {
       ref.current.slickPause();
       setCount(false);
     } else {
       ref.current.slickPlay();
       setCount(true);
     }
+
     console.log("count", count);
-  }
+  };
 
   return (
-    <div>
-      <Slider {...settings} className={classNames("mainVisualSlider", className)} ref={ref}>
+    <div className={"mainVisualSlider"}>
+      <Slider {...settings} ref={ref}>
         {children}
       </Slider>
       <div style={{ textAlign: "center" }}>
@@ -51,7 +56,7 @@ const MainVisualSlider = ({ className, children }: SliderProps) => {
   );
 };
 
-const MainNoticeSlider = ({ className, children }: SliderProps) => {
+const MainNoticeSlider = ({ children }: SliderProps) => {
   const settings: Settings = {
     dots: true,
     infinite: false,
@@ -88,15 +93,13 @@ const MainNoticeSlider = ({ className, children }: SliderProps) => {
   };
 
   return (
-    <div>
-      <Slider {...settings} className={classNames("visualSlider", className)}>
-        {children}
-      </Slider>
+    <div className="mainNoticeSlider">
+      <Slider {...settings}>{children}</Slider>
     </div>
   );
 };
 
 export default Object.assign(Sliders, {
   MainVisual: MainVisualSlider,
-  MainNotive: MainNoticeSlider,
+  MainNotice: MainNoticeSlider,
 });
diff --git a/src/containers/Main.scoped.scss b/src/containers/Main.scoped.scss
@@ -9,11 +9,6 @@
   margin-bottom: 176px;
 }
 
-.slider {
-  width: 1397px;
-  max-width: 100%;
-}
-
 .descriptionArea {
   box-sizing: border-box;
   position: absolute;

diff --git a/src/containers/Main.tsx b/src/containers/Main.tsx
@@ -1,28 +1,36 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import Slider from "@/components/slider";
 
+import Slider from "@/components/slider";
 import "@/containers/Main.scoped.scss";
+
 interface MainVisualSliderType {
   img: string;
   title: string;
   subTitle: string;
-  description: string;
+  description: ReactNode;
 }
+
 const mainVisualContent: Array<MainVisualSliderType> = [
   {
     img: "main-background1.jpg",
     title: "세상 밖으로 나오는 당신의 도전",
     subTitle: "당신의 능력을 보여주세요",
-    description:
-      "<div>세상과 소통하고 싶은 당신을 위해 준비했습니다. 세상밖으로 나와 당신의 능력을 마음껏 펼쳐보아요!  <br><br> 'See Me' 에서 여러분을 인도해 드릴것입니다. 'See Me' 는 당신을 기다리고 있습니다.</div>",
+    description: (
+      <div>
+        세상과 소통하고 싶은 당신을 위해 준비했습니다. 세상밖으로 나와 당신의 능력을 마음껏 펼쳐보아요!
+        <br />
+        <br />
+        &apos;See Me&apos; 에서 여러분을 인도해 드릴것입니다. &apos;See Me&apos; 는 당신을 기다리고 있습니다.
+      </div>
+    ),
   },
   {
     img: "main-background1.jpg",
     title: "sdfs",
     subTitle: "subtitle",
-    description: "<div>내용 123123123</div>",
+    description: <div>내용 123123123</div>,
   },
 ];
 
@@ -42,15 +50,15 @@ const mainNoticeContent: Array<MainNotiveSliderProps> = [
 const MainSection = () => (
   <div className="mainSection">
     <div className="content">
-      <Slider.MainVisual className="slider">
+      <Slider.MainVisual>
         {mainVisualContent.map((list, i) => (
           <div key={i}>
             <Image {...require(`@/images/home/${list.img}`).default} alt=" " />
 
             <div className="descriptionArea">
               <div className="title1">{list.title}</div>
               <div className="title2">{list.subTitle}</div>
-              <div className="description" dangerouslySetInnerHTML={{ __html: list.description }}></div>
+              <div className="description">{list.description}</div>
               <button className="moreButton" type="button">
                 Learn More
               </button>
@@ -59,21 +67,19 @@ const MainSection = () => (
         ))}
       </Slider.MainVisual>
 
-      <Slider.MainNotive className="slider">
+      <Slider.MainNotice>
         {mainNoticeContent.map((list, i) => (
           <div key={i}>
-            <div>
-              <span className="group">{list.group}</span>
-              <Link href="jvavscript:void(0)">
-                <a className="title">
-                  {list.title}
-                  <div className="more">더보기</div>
-                </a>
-              </Link>
-            </div>
+            <span className="group">{list.group}</span>
+            <Link href="jvavscript:void(0)">
+              <a className="title">
+                {list.title}
+                <div className="more">더보기</div>
+              </a>
+            </Link>
           </div>
         ))}
-      </Slider.MainNotive>
+      </Slider.MainNotice>
     </div>
   </div>
 );