[2022/10/06] 라이언의 개발일지

관리자 페이지 모바일 - LNB를 햄버거 버튼으로 변경

• npm 패키지 사용하여 간단하게 구현함: react-burger-menu

 

관리자 페이지 모바일 - 이미지 미리보기 - 세로로 볼 때 늘어나 보이는 현상 수정

• 기존에 그냥 width, height 등의 속성으로만 이미지 미리보기 페이지를 만들려다 보니, 특정 기기에서는 잘 작동하였지만, 다른 기기(예: 모바일)에서는 잘 작동하지 않는 문제가 있었다.
• 새로운 css 속성 적용: object-fit 속성
• 이 속성을 채택하여 아래와 같이 적용했더니 늘어나는 현상이 사라짐 (React)

<div style={{
            display: 'flex',
            width: '100vw',
            height: '100vh',
            justifyContent: 'center',
            background: 'black',
          
        }}>
            <img src={`***`} style={{
               width: '100%',
               height: '100%',
               objectFit: 'contain'
            }}/>
            
        </div>

• 추가적으로 수정한 문제: 모바일에서는 배경 검은 화면이 뒷 전체를 덮지 않는다.
• 그래서 아래와 같은 코드를 추가하여, body의 배경 자체를 검은색으로 만들었다.

useEffect(() => {
        document.body.style.backgroundColor = 'black'
    }, [])

 

PoLAB Admin 페이지 질문 그림 미리보기가 아래 영역을 침범하는 문제

• 동일한 이미지에 대하여 맥 크롬과 사파리에서는 침범하지 않는데, 윈도우 크롬 및 엣지에서는 침범한다.
• 브라우저에 따른 게 아니라 운영체제에 따라 다르게 나타난다니...
• 이것저것 테스트해 본 결과, 세로 크기에 대해 제대로 된 정보를 주지 않아서 생기는 문제로 보인다.
• 기존: 이미지를 감싸는 <div>에 가로 33% (width: 33%) 만 적용되어 있었음
• 수정: 가로 22vw, 세로 22vw 를 부여함 (세로 크기에 대한 정확한 정의)

 

관리자 페이지 - 이미지 첨부: 파일명을 임의로 수정하도록 변경.

• 파일 저장소로 aws s3를 사용 중.
• 첨부하는 일부 파일에서 이미지가 정상적으로 업로드되지 않아, 글(답변)을 쓰고 나면 없는 이미지로 나타나는 문제가 발생
• (글(답변)을 쓰는 중에는 문제가 없는 것처럼 보이는 이유: ckeditor에서 서버에서 가져온 이미지가 아닌 로컬 이미지를 보여주고 있기 때문)
• 대부분의 경우 문제가 없지만, 일부 케이스에서만 문제가 발생
• 따라서 업로드할 당시의 파일명이 문제를 일으키는 것으로 가닥을 잡음
• 업로드하기 전에 파일명을 안전하게 변경해주는 작업을 진행하기로 함
• react-s3 패키지를 사용 중인데, 이 패키지는 업로드 함수는 File Object를 파라미터로 받기 때문에, File Object 안의 파일명을 변경시켜 줄 필요가 있었음
• 그러나, File Object의 name Field는 readonly임
• 따라서 아래와 같은 방식으로 File Object를 다시 만들어냄

new File([file], newName, {type: file.type});

• 바뀐 이름으로 정상 업로드 확인 및 테스트 완료