미디어 쿼리에 따라 표시되어야 하는 내용이 달라지는 경우

[SolKimDev]

https://github.com/DevCommunity-ko/Front/blob/b8cafc361c3517fd4aeef900ae841a2cf8acfff6/src/components/auth/RegisterAgreement.tsx#L21 https://github.com/DevCommunity-ko/Front/blob/b8cafc361c3517fd4aeef900ae841a2cf8acfff6/src/components/auth/RegisterAgreement.tsx#L91-L93

미디어 쿼리에 따라 표시되어야 할 내용이 달라지는 경우가 생겨 위와 같이 useEffect와 useState를 이용해 해결하였습니다.

1. isMobile이 가입에서도 쓰이고 로그인에서도 쓰이는데, 이후 더 많은 곳에서 쓰일 것 같다면 Redux에 올려 사용하는 건 어떨까요?
2. 그러나, Redux에 올린다면, 사용되지 않는 페이지에서도 matchMedia에 붙은 핸들러때문에 계속 화면 크기를 체크하게 되어 리소스가 낭비될 것 같다는 생각이 들어 선뜻 반겨지지 않습니다.
3. 또, useState를 사용하지 않더라도, ::after 의 content 속성 등을 이용하면 같은 레이아웃을 구현할 수 있을 것 같은데, 어느 방법이 더 좋은 방법이 될 지 이야기를 나눠보고 싶습니다.
4. 혹은 생각하고 계신 더 나은 해결 방안이 있을까요?

[blurfx]

1. 보통 중복을 최소화 하라는 뜻에서 DRY(Don't Repeat Yourself)한 코드를 작성하라지만 저는 WET(Write Everything Twice)한 코드는 충분히 감당 가능한 수준이라고 생각합니다. 그러니, 말씀하신대로 이후 더 많은 곳에서 쓰이게 된다면 그 때는 확실히 리팩토링이 필요해보이지만, 딱 지금까지는 당장 고치지 않아도 크게는 문제가 없을 것 같다는 의견입니다.

2. 희수님 의견에 동의합니다! 또, Redux를 사용하여 앱 전역에서 상태 관리가 들어가야하는 값은 아니라고 생각해서, 리팩토링을 하게 된다면 커스텀 훅을 만들어 사용하면 좋지 않을까 싶습니다. (e.g. useMediaQuery())

3,4. 희수님이 3번에서 말씀하신 방법이 궁금합니다! 한번 더 이야기해보고 방향을 잡으면 좋을 것 같아요 :)

[SolKimDev]

알겠습니다. 저도 WET한 코드 까지는 괜찮을 거라고 생각했지만, 창희님의 의견도 한 번 듣고 싶었어요 :) 제가 3번에서 언급했던 방법은, 92번 라인에 isState를 이용하는 구문을 빼고, 거기에 빈 요소를 하나 만든 뒤에, 그 요소에 대한 ::after 요소를 만들어서 content 내용을 변경하는 식으로 하면 미디어 쿼리만을 가지고 보여질 내용을 다룰 수 있게 되니 useState를 이용하는것보다 낫지 않을까 했던 거였어요. 이 방법은 어떨까요??

<SNSItemTemplateForTest onClick={loginNaver}>
    <TemplatePlaceholder />
</SNSItemTemplateForTest />

const TemplatePlaceholder = styled('div',{
    '&::before: {
        content: '',
        '@mobileLarge': {
            content: 'N',
            // 기타 스타일 지정 요소들...
         },
    },
    '&::after' : {
        content: '',
        '@mobileLarge': {
            content : '네이버 계정으로 가입하기'
            // 기타 스타일 지정 요소들...
        },
    },
}

이런 느낌으루요!

[blurfx]

텍스트는 가능하면 가상 요소보다는 DOM에서 정의하는게 더 나을거 같아서 지금이 더 나을거 같아요.

아 그리고 갑자기 생각난건데 보통 SSO 로그인을 지원하는 서비는 https://developers.naver.com/docs/login/bi/bi.md 이렇게 미리 만들어둔 로그인 버튼을 제공하더라구요. 혹시 이걸 쓰지 않고 직접 커스터마이징하는 이유가 있을까요!?

[SolKimDev]

앗, 디자인쪽에서 전달받은대로 별 생각 없이 쓰다 보니 이런 일이 일어나 버렸네요 , , ! 아직 리소스 전달 받은 게 없어 임시 버튼이라고 생각해 두긴 했지만, 아무래도 디자인 분께 전달해서 이야기 한 번 나눠보는 것도 좋을 듯 하네요! 제가 이야기 전달해 보겠습니다!

[blurfx]

앗 감사합니다 👀