[FIX] posts 화면 수정

📌 이슈 분석

posts 화면에서 posts들이 짤려 보이는 건 layout 관련해서 style 지정을 잘 못 한 거 같았고, ListItem의 경우, ListItem에서 margin이 정의되어있어 중복으로 여백 설정이 지정되어 발생한 이슈이지 않을까 짐작하였다.

📌 문제 해결

    <html lang="en" style={{ height: "100%" }}>
      <body
        className="bg-[#2294FF]"
        style={{ height: "100%", overflow: "hidden" }}
      >
        <Navbar />
        <div
          className="mt-[120px]"
          style={{
            paddingTop: "20px",
            overflowY: "scroll",
            height: "calc(100% - 120px)",
          }}
        >
          {children}
        </div>
      </body>
    </html>

Navbar가 absoulte이기 때문에 pt를 지정 안 하면 Navbar에 하단 내용들이 가리는 이슈가 발생했다. 따라서 paddingTop: "20px",을 지정하였고, overflowY와 height도 지정하였다.

하지만 🤔 다른 방법은 없을지 계속 고민해 볼 계획이다.

ListItem의 경우, 내 예측대로 mx-auto가 지정되어 있었다. 따라서 해당 속성을 지워주니, 원하던대로 보이게 되었다.

najakgil / najakgil-blog

[FIX] posts 화면 수정 #5

📌 문제 상황

📌 이슈 분석

📌 문제 해결