GridCards antd Row Col 에서 에러가 발생합니다.

Question

강의와 관련있는 질문 을 남겨주세요. • 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등) • 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색 을 해주세요. (중복 질문을 자제해주세요.) • 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’ 를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달 에도 요령이 필요합니다. • 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요. • 강의실 페이지 (/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다. • 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재 해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드 를 남겨주세요! 구체적인 질문 일수록 명확한 답을 받을 수 있어요. • 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요. • 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요 . • 정확한 질문 내용과 함께 코드 를 적어주시거나, 캡쳐 이미지 를 첨부하면 더욱 좋습니다. 기본적인 예의 를 지켜주세요. • 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용 은 스팸 처리 등 제재를 가할 수 있습니다. 나름 styled-components를 섞어가며 코드를 작성중이었습니다. 지금 문제는 Col lg={6} md={8} xs={24} << 이 안먹는것같습니다. 모두 width :100%하면 Row 한줄을 꽉 차지하는데 어느 부분에서 문제가 발생한걸까요 하루종일 찾고있습니다..ㅠㅠ import React from 'react' ; import { Col } from 'antd' ; function GridCards ( props ){ return ( < Col xs = { 6 } md = { 8 } lg = { 24 } > < div style = { { position : 'relative' } } > < a href = { `/movie/ ${ props . movieId } ` } > < img style = { { width : '100%' , height : '320px' } } src = { props . image } alt = { props . movieName } /> ); }; export default GridCards ; import React ,{ useState , useEffect } from 'react' ; import axios from 'axios' ; import { API_URL , API_KEY , IMAGE_URL } from '../components/Config' ; import MainImage from '../components/Section/MainImage' ; import styled from 'styled-components' ; import GridCards from '../components/common/GridCards' ; import { Row } from 'antd' ; const MainImageBlock = styled . div ` width : 100% ; margin : 0 ; ` ; const LadingInfo = styled . div ` width : 85% ; margin : 1rem auto ; h2 { margin-bottom : 1rem ; text-align : center ; } hr { margin-bottom : 1rem ; } ` ; const LandingPage = () => { const [ movies , setMovies ] = useState ([]); const [ MainMovieImage , setMainMovieImage ] = useState ( null ); const [ loading , setLoading ] = useState ( false ); const [ error , setError ] = useState ( null ); useEffect (() => { const fetchMovie = async () => { try { setError ( null ); setMovies ( null ); setLoading ( true ); const response = await axios . get ( ` ${ API_URL } movie/popular?api_key= ${ API_KEY } &language=en-US&page=1` ); setMovies ([... response . data . results ]); setMainMovieImage ( response . data . results [ 0 ]); console . log ( response . data . results [ 0 ]. id ); // 데이터는 response.data 안에 들어있습니다. } catch ( e ) { setError ( e ); } setLoading ( false ); }; fetchMovie (); }, []); if ( loading ) return < div > 로딩중.. ; if ( error ) return < div > 에러가 발생했습니다 ; return ( <> < MainImageBlock > { MainMovieImage && < MainImage image = { ` ${ IMAGE_URL } w1280 ${ MainMovieImage . backdrop_path } ` } title = { MainMovieImage . original_title } text = { MainMovieImage . overview } /> } < LadingInfo > < h2 > Movies by latest < hr /> { /* Grid Cards */ } < Row gutter = { [ 16 , 16 ] } > { movies && movies . map (( movie , index ) => ( < React.Fragment key = { index } > < GridCards image = { movie . poster_path ? ` ${ IMAGE_URL } w500 ${ movie . poster_path } ` : null} movieId = { movie . id } movieName = { movie . original_title } /> )) } < div style = { { display : 'flex' , justifyContent : 'center' } } > < button > Load more ); }; export default LandingPage ;

rlaalsrb3559 · Answer

antd 으로는 아무리 해도 안되길레 Material-UI 로 대체해서 해결하였습니다.