[클론코딩] 2일차 진행상황

오늘 한 일

1) 게시물 작성 페이지 View 잡음

2) 게시물 작성 페이지 CSS 잡음

3) 게시물 작성 시 이미지 미리보기 구현 + 글 작성하는 부분 구현

4) 이미지와 글 작성 안했을 경우 버튼 비활성화 시킴 (disabled 설정)

5) 이미지 업로드 버튼 시 [게시물 이미지 업로드] API 요청

6) elements 폴더에 컴포넌트들 -> styled 부분은 각 요소를 사용 할 때 설정 할 수 있도록 props로 바꿨다.

const ElTextarea = styled.textarea`
  border: ${props => props.border};
  width: ${props => props.width};
  font-size: ${props => props.size};
  padding: ${props => props.padding};
  margin: ${props => props.margin};
  box-sizing: border-box;
  background-color: ${props => props.bg};
  border-radius: 3px;
  resize: none;
  word-break: keep-all;
  word-wrap: break-word;
  resize: none;
  border-color: #fff;

  &:focus { // textarea를 눌렀을 때 생기는 outline을 없앤다.
    outline: none;
  }
`;

7) 이미지 가운데 정렬하고 이미지 크키에 맞게 채우기

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

8) disabled 값에 따라 버튼 색상 다르게 설정

 

BE분들에게 질문 드린 사항

 

1) Form으로 Data를 보내달라고 하셨는 데 업로드 버튼을 클릭했을 경우 글 작성 전에 페이지가 새로고침 또는 페이지가 이동되는 문제를 발견하였고, 추후에 논의를 해볼 예정이다.

내 생각에는 업로드 버튼을 클릭 했을 때 onClick에 Upload 함수를 실행하도록 구현하고,

formData로 서버에 file의 데이터를 넘겨준 후 미리보기 HTML에 업로드한 사진을 띄우도록 구현하면 어떨까 생각한다.

  const upload = () => {

    const formData = new FormData();
    formData.append('file', files);
    axios({
      method: 'post',
      url: '/api/posts/images',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
        Authorization: getToken(),
      },
    })
      .then(response => {
        if (response.data.success) {
          window.alert('사진이 업로드 되었습니다.');
          setImgFile(response.data.url); // 서버에서 받아온 이미지 url
          setPreview(`http://3.37.36.119${response.data.url}`); // 이미지 url 변수에 저장
        } else {
          window.alert('파일을 업로드 하지 못했습니다.');
          setImgFile('');
          setPreview('');
        }
      })
      .catch(err => {
        window.alert('사진 업로드 실패');
      });
  };

 

CSS 시 참고한 사이트

 

1) Header를 고정 시켜 달라는 의견이 나와서 이 사이트를 참고해서 Header를 상단에 고정 시켰다.

https://www.daleseo.com/css-position-fixed-navigation/

[CSS] 메뉴바 상단에 고정 시키기

 

2) Header를 상단에 고정 할 때 자동으로 margin이 들어가서 margin을 없애서 전체화면으로 설정했다.

https://codingbroker.tistory.com/56

[HTML, CSS] div 요소를 전체화면으로 설정하기, 끝부분 적용안되는 문제, css reset

 

3) 글 작성 시 자동으로 줄바꿈이 되지 않아 word-wrap을 사용해서 width에 맞춰 자동으로 줄바꿈 해줬다.

https://www.codingfactory.net/10661

CSS / word-wrap / 긴 단어 처리 방법 정하는 속성

 

4) 버튼에 text를 삽입 할 때 가로는 가운데로 정렬 되는 데 세로는 정렬이 되지 않았고 height와 line-height를 설정해서 해결했다.

https://eunyoe.tistory.com/105

[CSS] div 가운데 정렬하기(가로,세로,중앙 정렬)

 

5) input type="file"을 사용 할 때 어떻게 꾸밀 수 있을까 고민 해보다 아래 사이트를 참고해서 아래와 같이 만들었다.

저 버튼을 누르면 사진을 선택 할 수 있는 창이 나온다! 이에 사진을 삽입해서 사진을 누르면 선택창이 나올 수 있도록 활용 할 수도 있다.

https://joon7180.tistory.com/19

[CSS #4] input type="file" css적용하기

 

6) position 설정하는 방법

https://deeplify.dev/front-end/markup/position-sticky

[HTML/CSS] Position sticky 적용 방법

 

7) textarea 크기 고정하기

<textarea style="resize : none"></textarea>

 

8) teaxtarea 테투리 없애기

<textarea style="border: none"></textarea>