> 레이아웃 짜기
전에 언급하였듯 파일을 업로드하면 바로 결과를 얻을 수 있는 간단한 ui를 원했다. 구글의 ui가 떠올랐다. 구글의 검색창처럼 빈 화면 가운데에 업로더만 있으면 심플하지 않을까. (대신 너무 허전하니깐 헤더만 살짝 추가하는 걸로...)
그 후 검사 버튼을 누르면 좌측엔 업로드한 파일의 소스 코드가 표시되고 수정을 제안하는 코드가 하이라이트 처리된다. 해당 코드를 클릭하면 우측엔 제안 코드와 이에 대한 설명이 출력되는 형태로 제작했다.
(↑개발새발로 만든 레이아웃)
> 구조
📦src
┣ 📂components
┃ ┣ 📂main
┃ ┃ ┣ ...
┃ ┣ 📂result
┃ ┃ ┣ ...
┃ ┗ 📜Header.tsx
┣ 📂pages
┃ ┣ 📜main.tsx
┃ ┗ 📜result.tsx
┣ 📜App.tsx
┗ ...간략하게 페이지 관련 구조만 나타냈다. main과 result 페이지만 있기에 간단한 편이다.
(VS Code file-tree-generartor를 사용했다.)
라우터 구조도 매우 간단하다.
> 메인 페이지
깔끔 그 자체.
tailwind를 처음 사용해봤는데 아직 익숙하지 않아서 그렇지 되게 편리하다고 느꼈다. 설정도 처음에만 깔끔하게 잡고 들어가면 무척 용이한 편이라고 생각한다.
> 결과 페이지 (기묘한 flex...)
아직 완성은 아니고 대충 짜둔 건데 역시 Description 색깔은 수정해야겠다.
flex를 사용했는데, 처음엔 App에 flex와 h-screen을 주고 Result를 포함한 그 아래 박스들엔 모두 flex-1을 주었다. 그러더니 코드 블록에 코드가 넘치면 자꾸 박스가 늘어났다. overflow를 주어도 scroll이 생기기는 하지만 header 높이만큼은 늘어난 후에 scroll이 생겼다.
추측컨데, header는 직접 height를 지정한 것이 아닌 padding과 text 높이만큼 영역을 차지하고 있었으며, 형제 요소 외의 공간을 전부 차지하는 flex-1이지만 사실상의 높이는 h-screen인 셈이지 않았을까. 그래서 넘치는 텍스트가 들어오면 h-screen만큼 늘어난 후 넘친 만큼 scroll이 생기지 않았을까 생각한다.
심플하게 Result 컴포넌트의 height를 전체 화면 높이인 h-screen이 아닌 전체 화면에서 header가 차지하는 영역을 뺀 높이를 적용해 주었다. tailwind 설정 파일에서 content 높이를 설정해준 뒤 h-content를 적용했다.
> 끝
나에겐 대부분의 개발자들에게 없는 강점이 하나 있다. 바로 css를 즐긴다는 것이다. 물론 능숙하다고 자신하기는 힘들지만 기묘한 css의 성질을 파헤치며 원하는 결과물을 뽑아내는 맛이 나쁘지 않다. 새롭게 사용해 본 tailwind도 마음에 들었다. 주력 css 라이브러리로 사용할까 싶다.
