• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

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

20.08.08 02:51 작성 조회수 162

0

강의와 관련있는 질문을 남겨주세요.
• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)
• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)
서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등)

질문 전달에도 요령이 필요합니다.
• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.
• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.
• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. 
• 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요!

구체적인 질문일수록 명확한 답을 받을 수 있어요.
• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.
• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.
• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다.

기본적인 예의를 지켜주세요.
• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. 
• 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. 
반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다. 

나름 styled-components를 섞어가며 코드를 작성중이었습니다. 

지금 문제는 Col lg={6} md={8} xs={24} << 이 안먹는것같습니다. 모두 width :100%하면 Row 한줄을 꽉 차지하는데 

어느 부분에서 문제가 발생한걸까요 하루종일 찾고있습니다..ㅠㅠ

import React from 'react';
import {Colfrom '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}/>
                </a>
            </div>
        </Col>
        
    );
};

export default GridCards;
import React,{useState,useEffectfrom 'react';
import axios from 'axios';
import {API_URL,API_KEY,IMAGE_URLfrom '../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 [moviessetMovies] = useState([]);
    const [MainMovieImage,setMainMovieImage] = useState(null);
    const [loadingsetLoading] = useState(false);
    const [errorsetError] = 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 (loadingreturn <div>로딩중..</div>;
      if (errorreturn <div>에러가 발생했습니다</div>;
      
    return(
    <>
        <MainImageBlock>
        {MainMovieImage &&
        <MainImage 
        image={`${IMAGE_URL}w1280${MainMovieImage.backdrop_path}`}
        title={MainMovieImage.original_title}
        text={MainMovieImage.overview}
        />
      }
        <LadingInfo>
            <h2>Movies by latest</h2>
            <hr/>
            {/* Grid Cards */}

            <Row gutter={[1616]}>
              {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}
                />  
                </React.Fragment>
              ))}
            </Row>
        </LadingInfo>
        <div style={{display:'flex'justifyContent:'center'}}>
            <button>Load more</button>
        </div>
       </MainImageBlock>
    </>
    );
};

export default LandingPage;

답변 1

답변을 작성해보세요.

0

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