2023-03-29 -2

Problem : node_modules 및 .gitignore 문제.

원래 mantine 패키지를 사용해서 개발하려고 했는데, 디자인이 정교화되어서 쓸모가 없어졌다. 그래서, mantine template 으로 초기화했던 것을 드러내는 과정에서 .gitignore 파일을 만들지 않아 node_modules/ 폴더 전체가 리포지토리에 올라가게 되어버렸다. 아무리 .gitignore를 업데이트해도 이미 올라간 node_modules/ 는 지워지지 않았다.

그래서, repo를 모든 파일을 다 지워버리고 커밋을 한번 하고, 새로 vite project를 세웠다. 이번에는 .gitignore 파일을 제대로 넣어서 초기화했다.

Problem : viewport 꽉차게 맞춤

모든 페이지의 근간이 될 가장 큰 container Wrapper를 짰다. 양쪽에 비는 구간이 없도록 position : absolute 와 left:0;righ:0;top:0;bottom:0;을 사용하였고, 혹시 몰라 display : inline-block; min-height : 100vh; min-width : 100vw;을 맞췄다.

Problem : 적당한 padding

전체에서 자주 사용될 적당한 padding 값을 찾았다. 먼저, box-sizing:border-box;으로 모든 것들을 설정하고, margin대신 padding을 사용하기로 했다. 기본으로 사용될 padding은 css variable로 정의해서 사용했다. 나중에는 이것도 다 정의해서 사용하는 것이 디자인을 나중에 손볼 때 편할 것 같았다.

전체적으로 em단위를 적극적으로 사용하기로 했다.

Pending Page

Pending page는 로고도 중앙에 있고, 내려오는 글자도 있어서 전체를 position:absolute로 모두 정의하기로 했다. flex로 하기에는 로고 층에서는 가로로 배치하고 나머지는 세로로 배치하는 것이 귀찮기 때문이다. 로고는 중앙 (top : 50%; left :50%; transform: translate(-50%)) 을 잡고, 내려오는 글자는 writing-mode: vertical-rl; text-orientation: upright;으로 구현했다.