[Feat/#488] 모임초대페이지 반응형

[se0jinYoon]

✨ 해당 이슈 번호 ✨

closes #488

todo

• 모임초대페이지 반응형

📌 내가 알게 된 부분

• 반응형이라 별거 없습니당
• 헤더랑 모달은 아직 머지 전이라 해당 부분 제외 구현되어있습니다

📌 질문할 부분

• 흠 반응형일 경우 placeholder가 다음과 같이 변경되어야 하는데요

데스크탑 : "띄어쓰기 포함 8자 이내로 입력해주세요."
모웹 : "띄어쓰기 포함 8자 이내"

이걸 코드로 구현하려면 Responsive 컴포넌트를 사용해서 렌더링 하는 방법밖에 없을까요 ?
흠 . . 현재가 모웹인지 아닌지를 변수로 잡아올 순 없나?

현재는 이렇게 되어있답니당

  <Responsive only="desktop">
      <WriterNameInput
        placeholder="띄어쓰기 포함 8자 이내로 입력해주세요."
        onChange={onChangeWriterName}
        $isConflict={isWriterNameConflict || false}
        $isValidLength={isWriterNameLimit}
      />
  </Responsive>
  <Responsive only="mobile">
      <WriterNameInput
        placeholder="띄어쓰기 포함 8자 이내"
        onChange={onChangeWriterName}
        $isConflict={isWriterNameConflict || false}
        $isValidLength={isWriterNameLimit}
      />
</Responsive>

📌스크린샷(선택)

(placeholder 변경하기 전에 녹화해서 반영 안되어있슴니다)

[반응형]

2024-12-08.4.28.22.mov

[모바일뷰]

2024-12-08.4.28.50.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mile-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2024 0:37am

[namdaeun]

고생하셨습니다 !!🚀

[namdaeun]

P2) label태그 사용하고 htmlfor 로 아이디 부여해주면 라벨을 클릭해도 인풋에 접근할 수 있으니 사용하는 측면에서 더 좋을 것 같아용

[namdaeun]

어이쿠 감사함니다

[moondda]

p5) 글씨 안보일뻔햇네요

[ljh0608]

고생 많으셨습니다!

데스크탑 : "띄어쓰기 포함 8자 이내로 입력해주세요."
모웹 : "띄어쓰기 포함 8자 이내"

이걸 코드로 구현하려면 Responsive 컴포넌트를 사용해서 렌더링 하는 방법밖에 없을까요 ?
흠 . . 현재가 모웹인지 아닌지를 변수로 잡아올 순 없나?

현재는 이렇게 되어있답니당

이부분에 대한건 저도 고려해보았는데 변수로 가져오더라도 해당 변수로 조건부렌더링 해야될 것 같은데 조금의 가독성을 위해서 고려중이신건지 아니면 조건부 렌더링 말고 다른 방법이 있는지 궁금합니다!

변수화에 대한건 react-responsive 라이브러리에 useDevice 부분 참고해보면 좋을 듯합니다~
https://github.com/yocontra/react-responsive/blob/master/src/useMediaQuery.ts#L40

[se0jinYoon]

고생 많으셨습니다!

데스크탑 : "띄어쓰기 포함 8자 이내로 입력해주세요."

모웹 : "띄어쓰기 포함 8자 이내"



이걸 코드로 구현하려면 Responsive 컴포넌트를 사용해서 렌더링 하는 방법밖에 없을까요 ?

흠 . . 현재가 모웹인지 아닌지를 변수로 잡아올 순 없나?



현재는 이렇게 되어있답니당

이부분에 대한건 저도 고려해보았는데 변수로 가져오더라도 해당 변수로 조건부렌더링 해야될 것 같은데 조금의 가독성을 위해서 고려중이신건지 아니면 조건부 렌더링 말고 다른 방법이 있는지 궁금합니다!

변수화에 대한건 react-responsive 라이브러리에 useDevice 부분 참고해보면 좋을 듯합니다~

https://github.com/yocontra/react-responsive/blob/master/src/useMediaQuery.ts#L40

가독성을 고려했다기보다는 해당 부분은 변수로 작성해서 placeholder만 조건부 렌더링한다면 조금 더 중복 코드를 줄일 수 있지 않을까? 해서였습니다!
하지만 여기서먼 변수로 잡아와서 하게되면 responsive 컴포넌트를 구현해둔 의미가 떨어질것 같아서 의견 여쭤봤습니다!

첨부해주신 아티클들 참고해보겠습니다 감사합니당

[moondda]

lgtm