항해99-week9

8주차 WIL을 까먹고 작성을 못해서 사실상 8, 9주차 WIL이다. 2주간 내가 프로젝트에 추가 한 기능은 ckEditor로 작성한 컨텐츠 조회(상세페이지), 게시물 수정페이지, 게시물 모아보기(필터, 무한스크롤), 게시물 작성, 미디어쿼리를 이용한 반응형 웹 등 여러가지를 적용했다.

어려웠던 점 및 해결

1. ckEdotor 컨텐츠 조회 시 작성 프리뷰 대로 조회되지 않았다.

   <div className="ck-content">

   class를 위처럼 지정해주면 끝나는 문제였다.
2. 해결: 처음엔 작성 할 때 문제가 생기는거라고 생각하고 작성페이지에서 많은 시간을 썻다. 작성 도중에 css가 적용되지 않는거로 생각을 했었다. 하지만 구글링 결과(공식문서) 아주 간단한 문제였다. 바로 조회시에 ckEditor의 결과물 html에 들어가는 class 들의 행방이 결국 ckEditor의 내장 css의 것이라는 것을 알게되었다.
3. 수정 페이지로 넘어갈때 미리 커버이미지와 ckEditor의 내용이 미리 채워져있어야 하는 문제.커버이미지를 수정하지 않으면 빈 이미지로 수정하게돼서 이미지가 없어지는 문제가 생겼다.
   작성/수정 시에 formData 형식으로 request를 하는데 image가 비어있으면 백엔드에서 기존 이미지를 넣어주는 작업을 해주어서 해결했다.
4. 해결: ckEditor는 안될 줄 알았는데 생각보다 쉬웠다. 그냥 ckEditor 내용에 백엔드에서 받아오는 html형식으로 그대로 초기화 시켜주면 작성 했던 내용 그대로 보여진다.
5. 반응형 웹 display: grid vs flex
6. 해결: 반응형 웹을 구현하는데 display grid로 했을때 게시물 중간에 gap을 유지하고싶었지만 쉽지 않아서 display flex로 바꾸고 media query를 사용하여 gap은 유지가 가능했다.

// css
const ItemGrid = styled.div`
  width: 33.33333%;
  box-sizing: border-box;
  padding: 0px 10px;
  @media screen and (max-width: 768px) {
    width: 100%;
    margin-top: 20px;
  }
`;
const GridWrap = styled.div`
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0px;
  justify-content: flex-start;
`;

// 게시물
<GridWrap>
  {post_list.map((p, idx) => {
            return (
              <ItemGrid key={p.postId}>
                <CardPost
                  {...p}
                  onClick={() => {
                    history.push(`/detail/${p.postId}`);
                  }}
                />
              </ItemGrid>
            );
          })}
</GridWrap>