[FE] feature: 리뷰 연결, 목록, 상세 페이지의 반응형 레이아웃 구현

[ImxYJL]

• resolves [FE] 리뷰 목록, 상세, 연결(ReviewZone) 페이지에 반응형 스타일을 추가한다. #622

---

🚀 어떤 기능을 구현했나요 ?

• 반응형 페이지 구현

  • 레이아웃이 크게 변경된 부분은 없고, 주로 화면 사이즈별로 font-size, flex-direction, margin, padding 등을 조절했습니다.
  • 목록
    • 리뷰 연결 페이지
    • 리뷰 목록 페이지
    • 리뷰 상세 페이지

• 반응형 Topbar, Footer

  • Topbar에는 리뷰미 로고(?)만 있고, 이 로고가 페이지 너비가 작을 때 너무 커 보이는 것 같아 폰트 크기를 살짝 줄였습니다. (2.8 -> 2.6rem)
  • Footer에서는 너비가 작을 때 리뷰미 안내와 icons8 안내가 붙어버리고, 가까이 있어도 보기 좋지 않아서 일정 너비 이하에서는 flex-direction: column으로 정렬했습니다.
    

• ContentModal과 AlertModal의 일부 스타일 수정

  • AlertModal의 Button 스타일을 일부(minWIdth) 수정했습니다. HomePage에서도 사용하고 있어서 확인차 다시 명시합니다~

  style={{ width: '100%', minWidth: '30%', height: '4rem' }}

• (24.9.19 new!) ContentModal에 style prop을 열고 비밀번호 모달에 다음과 같이 스타일을 적용했습니다.

    <ContentModal
      ....
      // NOTE: ContentModal의 미디어 쿼리로 인해 padding이 줄어드는 것을 방어하기 위한 인라인 스타일 적용
      $style={{ padding: '3.2rem' }}
    >

• (24.9.19 new!) 새롭게 개편된 media 유틸을 적용했습니다.

🔥 어떻게 해결했나요 ?

• 아래 이슈는 미디어 쿼리 크기를 내림차순으로 적용해서 해결했습니다!
• media 유틸과 일반 미디어 쿼리를 혼합해서 사용했습니다.

  • 기본적으로는 media 유틸에서 theme을 사용할 때의 타입 문제 때문에 혼합 방식으로 구현했습니다.

  • theme 사용이 없는데도 일반 미디어 쿼리를 사용한 부분이 있는데, 아래와 같은 문제를 겪었기 때문입니다.

     ${media.small`
      width: 92%; 
    `};
    
    ${media.medium`
      width: 80%; 
    `};
    
    ${media.large`
      width: 70%; 
    `};

  • 예를 들어 위처럼 ~ small, medium, large ~ 범위로 값을 적용하고 싶을 때, medium이 small 범위의 값을 전부 덮어서 80% 이상의 너비가 적용되지 않습니다. (large는 둘과 달리 max-width 기준이 아닌 min-width라 정상적으로 적용됨)

  • 그래서 현재 위처럼 and 연산을 통해 구체적인 범위를 지정해줘야 하는 경우는 아래처럼 px로 사이즈를 명시했습니다.

      @media (max-width: 767px) {
      width: 92%;
    }
    
    @media (min-width: 768px) and (max-width: 1023px) {
      width: 80%;
    }
    
    @media (min-width: 1024px) {
      width: 70%;
    }

    => 다른 방법이 없다면 media의 범위 서술을 더 구체적으로 하는 것을 제안합니다.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

• 기본적으로 사용자가 볼 수 있는 최소한의 너비는 320 정도라고 생각하고 작업했습니다. (아이폰 3~5 정도가 320이고 mini 라인도 370은 넘더라구요)

  • 그래도 300까지는 어찌저찌 커버됩니다.

• ~~경계값을 어떻게 적용해야 하는지가 헷갈렸습니다. 768px부터 태블릿 세로 사이즈라면, 이전 사이즈는 ~767까지 잡는 거겠지요…? (max-width: 767px)~~

• 리뷰 작성일 처리 관련
  : 리뷰 상세 페이지에서 작성일을 명시하며 시계 아이콘을 쓰고 있는데, 화면이 작아졌을 때 이것들을 보여주는 데 한계가 있어 모바일에서는 그냥 날짜만 표기하는 방식으로 구현했습니다.
  
  예전에 논의하던 방식(리뷰 기간이 존재하고 리뷰이가 스스로 마감할 수 있음)에서는 리뷰 작성일이 갖는 의미가 있었는데 지금은 사실상 무기한 작성 가능이라 받은 리뷰에 날짜가 있을 때 자연스럽게 리뷰 작성일임을 떠올릴 수 있을 거라고 생각했습니다.
  이 정보를 살려야 한다면 화면이 작아졌을 때 리뷰 작성일-작성일자를 다시 column 스타일로 보여줄 수 있을 것 같습니다. 이에 대한 의견이 궁금합니다~

📚 참고 자료, 할 말

처음에 구현할 때 %를 적극적으로 사용해야 반응형 도입할 때 편하다! 고정 width는 필요할 때만 사용하자!

[BadaHertz52]

theme 사용이 없는데도 일반 미디어 쿼리를 사용한 부분이 있는데, 아래와 같은 문제를 겪었기 때문입니다.

 ${media.small`
  width: 92%; 
`};

${media.medium`
  width: 80%; 
`};

${media.large`
  width: 70%; 
`};
예를 들어 위처럼 ~ small, medium, large ~ 범위로 값을 적용하고 싶을 때, medium이 small 범위의 값을 전부 덮어서 80% 이상의 너비가 적용되지 않습니다. (large는 둘과 달리 max-width 기준이 아닌 min-width라 정상적으로 적용됨

이 부분 오류가 css 속성 우선 순위에 따라 뒤에 정의된 media.medium가 적용되어서 그런 것 같네요
(large는 min-width니까 제외하고, small, medium이 max-width라서 1024px 이하인 뷰 포트에서 모듀 80%가 적용된 듯해요.)

혹시 medium과 small의 선언 순서를 바꿔서 적용해보셨나요?

[BadaHertz52]

Suggested change

	@media (min-width: 1024px) {
	export const DetailedReviewPageContents = styled.div`
	width:80%
	@media (max-width: 767px) {
	width: 92%;
	}

이렇게 해도 되는데 @media (min-width: 1024px)로 width를 지정한 이유가 있을까요?

[ImxYJL]

[위] 크기를 덮어 쓰는 문제라 바다 말대로 반대로 하면 적용될 것 같네요!
미디어 쿼리를 사용할 때 항상 크기가 작은 것 -> 큰 것 순서대로 오름차순 나열을 해야 한다(Gxx 피셜)고 알고 있었어서 순서를 유지하되 더 촘촘히 범위를 설정해줘야 하는 줄 알았는데..알고보니 반대였군요 😂

지금 바다와 에프이가 개선된 media 유틸 이야기를 나눈 걸 다 보고 온 상태입니다. 거기서 나왔던 말대로, 미디어 쿼리에 and를 적용하면 특정 breakpoint 이하에 일괄적으로 적용할 때 중복 코드가 생기니까 내림차순 크기 정렬을 하는 것까지 이해했습니다! 이 부분은 새 유틸을 적용할 때 함께 고칠게요.

[아래]이대로라면 기본이 80%, 767px까지 92%이면 1024부터는 70%대신 다시 80%가 적용되는 게 아닌가요?
사실 제가 질문을 잘 이해하지 못했습니다 😅😅

[BadaHertz52]

미디어 쿼리 지정할 때 큰 크기-> 작은 크기, 작은 크기-> 큰 크기로 두 가지로 방법으로 지정할 수 있어요. (어떤 것을 선택할지에는 정답이 없어요. 단! 미디어 쿼리의 범위가 헷갈리지 않게 흐름을 유지하는게 좋아요. )
media가 max 기준으로 되어 있고, 데스크탑 기준으로 기존에 한 디자인 작업이 있기 때문에 큰 크기-> 작은 크기 흐름으로 뷰를 좁혀간다고 생각하면 쉬울 거에요

큰 크기에서 작은 크기 기준으로 좁혀가니까, media.medium -> media.small 순으로 width를 지정한다면 마지막에 min-width를 사용할 필요가 없어져요.

media를 작은 크기에서 큰 크기로 갔기 때문에, 기존에 작업 했던 데스크탑 기준의 크기 설정을 유지하기 위해서 마지막에 min-width를 사용한 경우들이 보여서 이야기 나누고 싶었어요 😊

[ImxYJL]

오 당초 default 해상도가 데스크탑이었으니 큰 -> 작으로 간다는 흐름이 자연스럽네요!! 1024px도 그런 맥락에서 나온 이야기였군요 ㅎㅎㅎ
이번에 새 media 받고 수정할 때 내림차순으로 작업할게요~ 친절하게 알려주셔서 감사합니당ㅋㅋㅋㅋ

[BadaHertz52]

리뷰 제출 확인 모달에서 gap이 이 정도 발생하네요
공통 컴포넌트의 스타일이 변경되면, 해당 컴포넌트를 사용하는 모든 곳에 영향이 가요.
되도록이면 스타일이 변경되어야하는 곳에서만 공통 컴포넌트의 스타일을 변경하는 게 좋을 것 같아요.

$styles 라는 props를 추가했으니, $styles를 사용해서 2.8 rem의 gap을 주는 것은 어떨까요?

gap: 2.8rem (수정본)

gap: 2rem , Header에 margin-bottom 없을 때 (원본)

[ImxYJL]

헉 나름 확인한답시고 한번 들어가봤는데 캐치를 못 했네요 😂 바보다...
따로 스타일 주입해둘게요~

• 모달에서 텍스트 잘리는 건 단어를 기준으로 텍스트를 자르는 css 속성을 전역으로 빼보자는 이야기가 디코에서 한 번 나왔던 것 같은데, 그걸 반영하는 여부와 관계없이 조만간 얘기가 또 나올 것 같아서 별도로 적용해두진 않았습니다!

[BadaHertz52]

문장이 컨테이너 너비를 넘어갈 경우, 단어가 아닌 글자대로 잘리네요
의도한 부분인가요?

[BadaHertz52]

올리 반응형 작업 하느라 고생했어요.
브랜치 pull 받아서 반응형 모두 확인했어요. 잘 작동하네요 😊

ContentModal의 경우 리뷰 제출 확인 모달에 영향이 가서 이 부분과 글자 넘김 부분은 다시 확인해보면 좋을 것 같아request changes로 남겨둘게요.

공통 컴포넌트의 스타일이 변경이 필요할 때, 해당 공통 컴포넌트를 사용하는 곳에 영향을 없도록 올리가 사용하는 것 처럼 style을 props로 넣어서 해결하는 방향으로 가면 좋겠어요. 이 부분을 프론트 회의에서 이야기해봐요

[BadaHertz52]

빠른 리뷰 반영이네요 😄

글자 넘김은 프론트 회의에서 확정하고 globalStyle에서 적용해보는 걸로 하죠!
구현하느라 고생했어요

[chysis]

리뷰 확인할 때 비밀번호 모달 부분 줄바꿈 이슈가 있었는데, 이거는 회의가 필요한 부분이라 지금은 괜찮을 것 같아요.
반응형 작업 고생했어요!

[soosoo22]

노트북에서 확인해보니 "리뷰 확인을 위해 설정한 비밀번호를 입력해주세요" 문구가 2줄로 나와서 조금 어색한 것 같아요. 태블릿, 데스크탑에서는 한 줄로 보이되 모바일로 넘어갈때는 2줄로 보이게 해도 괜찮지 않을까?합니다.

[soosoo22]

min-height을 주고 있어서 오히려 밑에 빈공간이 생겨서 어색한 것 같아요.