이미지 엑박 에러내용

wndtlr1024·2020년 9월 21일
0

먼저 저는 리액트 thunk를 사용하고있습니다.

-postList.js 파일에서 모든 포스트들을 불러오고있습니다.

import React, { useEffect } from 'react';
import styled, { keyframes } from 'styled-components';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { getAllPosts } from '../../actions/write';

// components
import Header from '../Header/Header';
import Loading from '../common/Loading';
import Alert from '../../components/common/Alert';

// 페이지 전환 효과
const ScreenFrames = keyframes`
 from{
  opacity:0.9;
  transform:translateY(-80px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
`;

const Container = styled.div`
  min-height: 100vh;
  background: #000;
  overflow: hidden;
`;

const Columns = styled.div`
  column-width: 320px;
  column-gap: 15px;
  width: 90%;
  max-width: 1100px;
  margin: 50px auto;
  animation: ${ScreenFrames} 0.75s;

  figure {
    display: inline-block;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    border: 0.5px solid #777;
    border-radius: 10px;
    margin: 0;
    margin-bottom: 15px;
    padding: 15px;
    overflow: hidden;
    /* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); */
    /* box-shadow: 0px 5px 7px 1px rgba(0, 10, 20, 0.14); */

    @media (max-width: 768px) {
      overflow: hidden;
    }

    img {
      width: 100%;
      height: 100%;
      transition: transform 1s;

      :hover {
        transform: scale(1.1);
        /* transform: translateY(-6px);
      transition: all 200ms; */
      }
    }

    figcaption {
      font-size: 0.9rem;
      color: #999;
      line-height: 1.5;
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      padding: 10px;
      margin-top: 12px;

      p {
        color: #fff;
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 10px;
      }
    }
  }

  /* @media screen and (max-width: 750px) {
    column-gap: 0px;
    width: 100%;
  } */
`;

const PostList = ({ write: { posts, loading }, getAllPosts }) => {
  useEffect(() => {
    getAllPosts();
  }, [getAllPosts]);

  return (
    <Container>
      <Header />
      <Alert />

      {posts === null || loading ? (
        <Loading />
      ) : (
        <Columns>
          {posts.map((post) => (
            <Link to={`/postpage/${post._id}`} key={post._id}>
              <figure>
                <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRq6MvximRKiu0XTDp7J2omL4ZgOT6zMzseIg&usqp=CAU' />
                <figcaption>{post.text}</figcaption>
              </figure>
            </Link>
          ))}
          <Link to='/postPage'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRq6MvximRKiu0XTDp7J2omL4ZgOT6zMzseIg&usqp=CAU' />
              <figcaption>
                <p>테스트1</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>

          <Link to='#'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQh2TM-trBZcxJMFJm-mLFkloU2HDHHkZzZXQ&usqp=CAU' />
              <figcaption>
                <p>테스트2</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>

          <Link to='#'>
            <figure>
              <img src='https://nimage.g-enews.com/phpwas/restmb_allidxmake.php?idx=5&simg=2018052309411600967fd4d2b07dc12114162187.jpg' />
              <figcaption>
                <p>테스트3</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>

          <Link to='#'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRhR9_x9NyLSp1VXFtwTbZOU-mHADy8heQNfg&usqp=CAU' />
              <figcaption>
                <p>테스트4</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>
          <Link to='#'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRCINfG09lpCiQQWSgzppcxubNh643jbqoEVA&usqp=CAU' />
              <figcaption>
                <p>테스트5</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>

          <Link to='#'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSdvXcKyxJVuTL0ExD32a2daSWSn6TgPhiugA&usqp=CAU' />
              <figcaption>
                <p>테스트6</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>

          <Link to='#'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRx7epj1rwmX5A9k2XOH6vHhmpErIPEbZITVA&usqp=CAU' />
              <figcaption>
                <p>테스트7</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>

          <Link to='#'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSTtoNEEKROdvsObn6oRIv1aUUKvldDdu4Paw&usqp=CAU' />
              <figcaption>
                <p>테스트8</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>

          <Link to='#'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS417N_I3kJuQqLXHbUTu0kbXMLP9TY2xLodw&usqp=CAU' />
              <figcaption>
                <p>테스트9</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>

          <Link to='#'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT5qhZ5UfXeqrkn-cSsB483oyb6ADrlV1xQ-g&usqp=CAU' />
              <figcaption>
                <p>테스트</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>

          <Link to='#'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRzUQ52Yd97u08XWbNNuGmwiSYfUttNfcGerA&usqp=CAU' />
              <figcaption>
                <p>테스트</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>

          <Link to='#'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQI1IfH0uOhF2eHmF8dVXkcXO9hO5jfQIHfAw&usqp=CAU' />
              <figcaption>
                <p>테스트</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>

          <Link to='#'>
            <figure>
              <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTMgUKaLHWTgg6zcVcM4GBsijBA3nyanRCQ0w&usqp=CAU' />
              <figcaption>
                <p>테스트</p>
                Cinderella wearing European fashion of the mid-1860’s
              </figcaption>
            </figure>
          </Link>
        </Columns>
      )}
    </Container>
  );
};

PostList.propTypes = {
  write: PropTypes.object.isRequired,
  getAllPosts: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  write: state.write,
});

export default connect(mapStateToProps, { getAllPosts })(PostList);

위의 코드에서 아래부분만 주목해주세요 (주석처리한건 임시코드입니다.)
이 게시글을누르면 해당 게시글로가는데 postPage.js파일로 가집니다.

 
{posts.map((post) => (
            <Link to={`/postpage/${post._id}`} key={post._id}>
         /*     <figure>
                <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRq6MvximRKiu0XTDp7J2omL4ZgOT6zMzseIg&usqp=CAU' />
                <figcaption>{post.text}</figcaption>
              </figure>*/
            </Link>
          ))}
          ))}
  • PostPage.js
import React, { useEffect } from 'react';
import styled, { keyframes } from 'styled-components';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
// Component
import Header from '../Header/Header';
import CommentList from './CommentList';
import CommentPost from './CommentPost';
import Loading from '../common/Loading';

// icons
import { AiOutlineHeart } from 'react-icons/ai';
import { FcLike } from 'react-icons/fc';
import { GoTrashcan } from 'react-icons/go';
// actions
import { readPost, removePost } from '../../actions/write';

/**
 * first 모바일 화면
 */

// 페이지 전환 효과
const ScreenFrames = keyframes`
 from{
  opacity:0.9;
  transform:translateY(-80px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
`;

const Container = styled.div`
  min-height: 100vh;
  background: #000;
  overflow: hidden;

  /* 데스크 탑 */
  @media (min-width: 1024px) {
  }
`;

const Wrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 3rem;

  /* 데스크 탑 */
  @media (min-width: 1024px) {
    flex-direction: row;
    /* padding-left: 1rem;
    padding-right: 1rem; */
    padding: 1rem;
    /* height: 100vh; */
    /* width: 1024px; */
    margin: 0 auto; /*중앙 정렬 */
    animation: ${ScreenFrames} 0.75s;
  }
`;

const ImageBox = styled.div`
  width: 100%;
  height: 100%;
  margin: 0;

  img {
    width: 100%;
    height: 100%;
    flex: auto;
    border-radius: 8px;
  }

  @media (min-width: 1024px) {
    flex-basis: 33.3%;
  }
`;

const ContentsBox = styled.div`
  height: 100%;
  color: #fff;

  /* 데스크 탑 */
  @media (min-width: 1024px) {
    max-width: 400px;
  }
`;

const OneBox = styled.div`
  width: 100%;
  display: flex;
  align-items: center;

  font-size: 0.9rem;
  color: #fff;
  line-height: 1.5;
  padding: 16px 16px 10px 16px;

  .icon-like {
    /* 데스크 탑 */
    @media (min-width: 1024px) {
      margin-right: 0;
      cursor: pointer;
      margin-left: auto;
    }

    padding: 10px;
    margin-right: 10px;
    margin-left: auto;
    cursor: pointer;
  }
`;

const TwoBox = styled.div`
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.5;
  padding: 0px 16px 16px 16px;
  height: 15rem;
  overflow-y: auto;
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width: 1px;
    background: 0 0;
  }
`;

const Avatar = styled.div`
  /* 모바일 버전에선 비활성화 */
  display: none;
  margin: 0;

  /* 데스크 탑 */
  @media (min-width: 1024px) {
    display: block;
    width: 32px;
    height: 32px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
`;

const UserAndTitle = styled.div`
  .RPhNB {
    color: #fff;
    margin-left: 4px;
    margin-right: 4px;
  }

  /* 데스크 탑 */
  @media (min-width: 1024px) {
    margin-left: 17px;
  }
`;

const Title = styled.span`
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
  margin-left: 6px;
`;

const Text = styled.div``;

const PostPage = ({
  match,
  readPost,
  removePost,
  history,
  write: { post, loading },
  user,
}) => {
  const { id } = match.params;

  useEffect(() => {
    readPost(id);
  }, [readPost, id]);

  const isDelete = (user && user._id) === (post && post.user);

  const onHandleRemove = () => {
    removePost(id, history);
  };

  return (
    <Container>
      <Header />
      {post === null ? (
        <Loading />
      ) : (
        <Wrapper>
          <ImageBox>
            <img
              src="게시글 이미지 파일입니다. 너무 커서 제가 짤랐습니다."
              alt='views'
            />
          </ImageBox>
          <ContentsBox>
            <OneBox>
    
              {/* 모바일 버전에서는 비활성화됨 */}
// 이부분을 봐주세요!
              <Avatar>
                <img src={post.avatar} />
              </Avatar>

              <UserAndTitle>
                {post.name}
                <span className='RPhNB'></span>
                <span>{post.date.slice(0, 10)}</span>
              </UserAndTitle>

              {/* to do: 좋아요 누를시 하트 색깔 변하게 */}
              <AiOutlineHeart size='24' className='icon-like' />

              {/* 로그인한 사용자와 포스트작성자가 일치하면 나타남 */}
              {isDelete && (
                <GoTrashcan
                  size='24'
                  style={{ marginRight: '20px', cursor: 'pointer' }}
                  onClick={onHandleRemove}
                />
              )}
            </OneBox>
            <TwoBox>
              <Text>{post.text}</Text>

              {/* 댓글 창 */}
              <CommentList />
            </TwoBox>
            {/* 댓글 입력창 */}
            <CommentPost />
          </ContentsBox>
        </Wrapper>
      )}
    </Container>
  );
};

PostPage.propTypes = {
  write: PropTypes.object.isRequired,
  user: PropTypes.object,
  readPost: PropTypes.func.isRequired,
  removePost: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  write: state.write,
  user: state.auth.user,
});

export default connect(mapStateToProps, { readPost, removePost })(
  withRouter(PostPage)
);
// const ownPost = (user && user._id) === (post && post.user._id);

위의 코드에서 이부분이 엑박이나옵니다.

              {/* 모바일 버전에서는 비활성화됨 */}
// 이부분을 봐주세요!
              <Avatar>
                <img src={post.avatar} />
              </Avatar>
profile
https://jungsikjeong.github.io/ 이곳으로 옮겼습니다!

0개의 댓글