Feature/fe-057 : mobile 대응 먹팟 등록페이지 css 수정 #83
Conversation
| const [isMobile, setMobile] = useState<boolean>(false); | ||
| const mobile = useMediaQuery(); | ||
| useEffect(() => { | ||
| setMobile(mobile); | ||
| }, [mobile]); |
There was a problem hiding this comment.
useMediaQuery를 통해서 이미 모바일인지 아닌지를 알고있는 상태가 있으니 추가적으로 useState, useEffect를 선언할 필요는 없어보여요!
There was a problem hiding this comment.
이 부분과 관련해서 참고 사항에 링크 달아뒀는데, state를 사용하지 않을 경우 위와 같이 Hydrate에러가 발생합니다!
state없이도 로컬에서 잘 작동하지만 혹시 몰라서 state로 에러를 해결해뒀는데 state를 사용하는 것과 사용하지 않는 것 둘 중에 어떤 방법이 좋을까요 ..?
There was a problem hiding this comment.
useEffect 사용은 서버사이드 환경에서는 어쩔수 없어 보이네요..! useMediaQuery, useState, useEffect 부분을 하나의 훅으로 묶어서 공통 훅으로 만들어주시면 좋을듯합니다!
| <div></div> | ||
| <Typography variant="body3" as="p" color="secondary"> | ||
| 베타서비스에서는 채팅 기능이 제공되지 않습니다. <br /> 효율적인 소통을 위해 오픈 채팅방을 만들어주세요. | ||
| </Typography> | ||
| </InputSection> | ||
| <Button size="xLarge" type="submit" disabled={!method.formState.isDirty}> | ||
| <Button style={{ width: '100%' }} type="submit" disabled={!method.formState.isDirty}> |
There was a problem hiding this comment.
Button 컴포넌트 모바일인 케이스에서 "100%" 이게 수정 했는데, 그것때문에 추가하신 건가요?
There was a problem hiding this comment.
오 맞아요.. writing page의 버튼들은 부모에서 width를 받는 동시에, writing page에서 모바일 첫 스텝은 Button 위에 margin이 추가되는 반면 두번째 스텝은 마진이 추가되질 않아서 첫 스텝의 버튼은 className으로 스타일링 하고 두번째 스텝의 버튼은 width만 인라인으로 주었었습니다..!
제가 paddingSmall하고 medium이 추가된 걸 놓치고 있었네요 ! 수정해보겠습니다
| @@ -1,8 +1,12 @@ | |||
| import { useState, useEffect } from 'react'; | |||
| import { breakPoints } from '@/styles/theme.css'; | |||
| import { breakPoints, BreakPoints } from '@/styles/theme.css'; | |||
There was a problem hiding this comment.
BreakPoints theme.css에 안보이는데 ..! 제가 잘못본걸까요?
There was a problem hiding this comment.
아 이거 타입으로 만들어서 테스트했던 코드였는데 제가 깜빡하고 수정안했던거네요! 수정해서 commit하겠습니다 감사합니당
|
Kudos, SonarCloud Quality Gate passed!
|
[FE] 게시글 등록 페이지 모바일 버전
체크 리스트
작업 내역
문제 상황과 해결
useMediaQuery훅을 만들었습니다.비고