[FE] fix: media 유틸리티 함수 수정

[chysis]

• resolves [FE] 반응형 유틸리티 함수를 수정한다. #631

---

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

• 기존의 media 함수는 styled-components에 특화되어 사용 가능했습니다.
• emotion에서는 styled-component 방식과 css 방식 모두를 사용 가능하기 때문에 호환성의 문제가 있었습니다.
• styled와 css의 argument 타입이 다르기 때문에 하나의 함수로 이 둘을 모두 처리하는 것은 불가능하고, 재사용 가능한 미디어 쿼리 조건문을 생성하는 함수로 수정했습니다.

🔥 어떻게 해결했나요 ?

large: "@media (min-width: 1025px)"
medium: "@media (max-width: 1024px)"
small: "@media (max-width: 768px)"
xSmall: "@media (max-width: 425px)"
xxSmall: "@media (max-width: 320px)"

위와 같은 문자열을 반환하도록 함수를 수정했습니다.
함수 수정 과정에서 min-width와 max-width를 모두 사용해 범위를 구체적으로 명시했지만, 일부 breakpoint를 사용하지 않을 경우 스타일 코드의 중복이 발생하기 때문에 min과 max 둘 중 하나만을 사용하도록 했습니다.

// styled에서 적용
${media.xxSmall} {
  background-color: ${({ theme }) => theme.colors.red};
}

// css에서 적용
${media.medium}{
  background-color: ${theme.colors.red};
}

위와 같이 media를 사용 가능합니다. styled, css에서 모두 기존처럼 theme 사용 가능합니다.
media를 사용할 때 대괄호 표기법과 점 표기법을 모두 사용 가능한데, 익숙한 방식인 점 표기법을 그대로 사용하면 될 것 같습니다.

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

📚 참고 자료, 할 말

• https://emotion.sh/docs/media-queries#reusable-media-queries
• 모두 동의한다면 이 PR을 먼저 머지한 뒤에, 각자 반응형 작업한 브랜치에 적용시키는 것이 좋을 듯합니다.

[chysis]

템플릿 리터럴 내부에서는 number 타입으로 지정하게 되면 px 단위가 자동으로 안 붙는 것으로 알고 있어서 따로 기입했습니다.

[BadaHertz52]

기존에 올린 pr에서 변경된 media 적용해봤어요
모두 문제 없이 반응형 디자인 반영되네요

연휴 기간동안 media 수정하느라 고생했어요 !!

[ImxYJL]

연휴동안 미디어 만들고 리뷰 반영하느라 넘 수고 많았어요~!

[soosoo22]

오! 이제 media 유틸 안에서도 theme을 사용할 수 있군요! 수고했어요 에프이!