[REFACTOR] 상세페이지 반응형 수정

[HiJuwon]

체크리스트

• 🧰 npm run dev로 실행 환경에서 잘 돌아가는걸 확인했나요?
• 🎋 base 브랜치를 develop 브랜치로 설정했나요?
• 🖌️ PR 제목은 형식에 맞게 잘 작성했나요?
• 🏷️ 라벨은 등록했나요?
• 🙆 리뷰어는 등록했나요?

---

📌 관련 이슈번호

• Closed [REFACTOR] 상세페이지 반응형 수정 #196

---

✅ Key Changes

반응형 문제점: 기존에는 뷰포트 가로 너비가 좁아지면 아래와 같이 나타났습니다.

• 상세페이지 우측 영역(속성 탭이 있는 영역)에 width 고정값 33rem이 적용되어 있었음
• 때문에 일정 이상 뷰포트 너비가 줄어들면 상세페이지 좌측 영역(제목, 텍스트에디터, 댓글창이 있는 영역)이 심하게 줄어들었습니다.

뷰포트 가로 너비가 좁아질 경우에 대비해 상세페이지 반응형을 수정했습니다.

• 상세페이지 좌측 영역(제목, 텍스트에디터, 댓글창이 있는 영역): 최소 width를 40rem으로` 설정
• 상세페이지 우측 영역(속성 탭이 있는 영역): width를 고정적으로 33rem으로 하지 않고, 최소 width를 33rem으로 변경
• 좌측 영역과 우측 영역을 감싸는 래퍼 컨테이너: min-w-max 속성을 적용하여 자식 요소들의 가로 너비만큼을 최소 너비로 차지하게끔 처리
• 최상위 컨테이너: overflow-x-auto 속성을 적용하여 뷰포트 가로 너비가 자식 요소들이 차지하는 영역보다 좁아지면 자동으로 스크롤되게끔 처리
  => 이를 통해 일정 이상 줄어들면 상세페이지 내부 영역들이 심하게 줄어들지 않고, 전체 페이지의 가로 스크롤바가 생기게 하여 영역을 지키도록 수정했습니다.

---

📸 스크린샷 or 실행영상

중점으로 볼 것:

• 뷰포트 가로 너비가 일정 이상 줄어들면 하단에 가로 스크롤바가 나타나고
• 더이상 상세페이지 좌측/우측 영역 중 하나가 심하게 줄어들지 않음

2025-08-22.2.37.50.mov

---

💬 To Reviewers

[github-actions]

✅ PREVIEW https://veco-jcsnrf046-gaeulzzangs-projects.vercel.app

[waldls]

수정한 것이 훨씬 좋은 것 같습니다 수고하셨어요!!

[jinj00oo]

반응형까지 고려해주셔서 이제 화면이 줄어들어도 편하게 작업할 수 있겠어요!! 수고하셨습니다😀