공부 내용

Ant design의 Form 을 사용하여 사용자의 input을 받는 UI를 구현했습니다.

반응형을 위해 Grid 에 대해 공부한 후 각 요소 배치를 했습니다.

Grid 배치를 하며 화면의 vw, vh에 대해 다시 알아보는 시간을 가졌습니다.

height을 100%로 했음에도 스크롤이 생겨서 vh에 문제가 생겼는지 알아보았고 100vh에 하단 바의 높이까지 포함시켜서 더 크게 인식했음을 알 수 있었습니다.

이를 해결하기 위해 global.js에 아래 코드를 추가하고

height: 100vh;// css property 지원 안하는 브라우저 대비용
height: calc(var(--vh, 1vh) * 100);

각 Col에 화면에서 차지하는 비율을 넣어주어 반응형 웹페이지를 구현했습니다.

 return (
      <>
        <Row gutter={[17, 10]} type="flex" style={{ height: "100%" }}>
          <Col span={20} style={{ height: "2%" }}>
            <Typography.Title
              level={5}
              style={{
                margin: 0,
              }}>
              탐색결과
            </Typography.Title>
          </Col>
          <Col span={14} style={{ height: "35%" }}>
            <IntelligentBasicInfo />
          </Col>
          <Col span={10} style={{ height: "35%" }}>
            <IntelligentSearchOption />
          </Col>
          <Col span={14} style={{ height: "55%" }}>
            <IntelligentMap />
          </Col>
          <Col span={10} style={{ height: "55%" }}>
            <IntelligentSearchResult />
          </Col>
        </Row>
      </>
    );

소감

이전까지는 반응형을 크게 신경쓰지 않았기에 그냥 모르고 지나친 내용이 은근 많았다는 것을 알게 되었습니다. 반응형을 구현하며 새롭게 알게 된 내용을 정리하고 나중에 같은 문제가 생겼을 때 이를 참고하면 좋을 것 같습니다.