slick 이 작동을 안합니다 !

Question

현재 화면의 상태입니다. 제가 강의를 보면서 작성한 코드가 작동을 하지 않아서 제공되는 코드를 git에서 긁어서 넣어 봤는데도 똑같은 현상이 일어납니다. \ ImagesZoom 에서 index.js와 styles.js를 만들고 그것을 zerocho teacher가 만든 코드를 넣엇습니다. 그런데도 클릭을 하면 배경이 검은색이 되고 넘길수 있어야 하는데 그런것은 없이 맨 상단의 사진처럼 그냥 맨 위에 상세 이미지와 x버튼만 나오는 것을 확인할 수 있습니다. import React , { useState } from 'react' ; import PropTypes from 'prop-types' ; import Slick from 'react-slick' ; import { Overlay , Header , CloseBtn , SlickWrapper , ImgWrapper , Indicator , Global } from './styles' ; const ImagesZoom = ({ images , onClose }) => { const [ currentSlide , setCurrentSlide ] = useState ( 0 ); return ( < Overlay > < Global /> < Header > < h1 > 상세 이미지 < CloseBtn onClick = { onClose } /> < SlickWrapper > < div > < Slick initialSlide = { 0 } beforeChange = { ( slide , newSlide ) => setCurrentSlide ( newSlide ) } infinite arrows = {false} slidesToShow = { 1 } slidesToScroll = { 1 } > { images . map (( v ) => ( < ImgWrapper key = { v . src } > < img src = { v . src } alt = { v . src } /> )) } < Indicator > < div > { currentSlide + 1 } { ' ' } / { images . length } ); }; ImagesZoom . propTypes = { images : PropTypes . arrayOf ( PropTypes . shape ({ src : PropTypes . string , })). isRequired , onClose : PropTypes . func . isRequired , }; export default ImagesZoom ; 위는 index.js이고 밑은 style.js입니다. import styled , { createGlobalStyle } from 'styled-components' ; import { CloseOutlined } from '@ant-design/icons' ; export const Global = createGlobalStyle ` .slick-slide { display: inline-block; } .ant-card-cover { transform: none !important; } ` export const Overlay = styled . div ` position: fixed; z-index: 5000; top: 0; left: 0; right: 0; bottom: 0; ` ; export const Header = styled . header ` height: 44px; background: white; position: relative; padding: 0; text-align: center; & h1 { margin: 0; font-size: 17px; color: #333; line-height: 44px; } ` ; export const SlickWrapper = styled . div ` height: calc(100% - 44px); background: #090909; ` ; export const CloseBtn = styled ( CloseOutlined ) ` position: absolute; right: 0; top: 0; padding: 15px; line-height: 14px; cursor: pointer; ` ; export const Indicator = styled . div ` text-align: center; & > div { width: 75px; height: 30px; line-height: 30px; border-radius: 15px; background: #313131; display: inline-block; text-align: center; color: white; font-size: 15px; } ` ; export const ImgWrapper = styled . div ` padding: 32px; text-align: center; & img { margin: 0 auto; max-height: 750px; } ` ; 도대체 무엇을 잘못한걸까요? import를 잘못햇으면 뭐가 선언이 되지 않앗다 오류가 날텐데 이 경우에는 직접 작성한 것이 작동하지 않아 심지어 그대로 긁어온것인데 말이죠 ㅠㅠ

zerocho · Answer

지금 상황은 css가 적용되지 않은 것인데요. 특히 SlickWrapper가 안 되어 있습니다. 왜 안된 것인지는 제가 여기서 짐작하기 어렵습니다. nodebird.com 에 들어가셔서 개발자도구로 제 사이트는 어떤 부분에서 css가 적용되어서 되는건지 비교해보세요. 아마 거기서 차이점이 보이실 겁니다.

seonjun Moon · Answer

잠시 놀다가 다시 자기전에 와서 보니까 이게 돌아가네요... 모종의 이유로 안됐던것 같은데 ... 왠지모르게 반영이 안됐던것 같습니다 ㅠㅠ 답변 감사합니다...