[Feat/#474] responsive basic setting & main page 임시 responsive 뷰 적용 #475
Conversation
…로 변경, stylelint 수정
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| type AvailableSize = 'mobile' | 'desktop'; | ||
|
|
||
| const Responsive = ({ children, only, asChild }: ResponsivePropTypes) => { | ||
| const [current, setCurrent] = useState<AvailableSize | null>(null); |
There was a problem hiding this comment.
P5) current의 초기 값을 null로 설정해준 이유가 궁금해요 !
There was a problem hiding this comment.
current는 추후 useEffect에 브라우저 API를 통해 값이 설정되므로 값이 할당되기 전에는 mobile, desktop이 아닌 null값을 가지고 있어야한다는 판단이였습니다.
| return current === null || only === current ? ( | ||
| <Comp className={`${selectedClassName()}`}>{children}</Comp> | ||
| ) : ( | ||
| <></> |
There was a problem hiding this comment.
P3) 삼항연산자 대신 && 연산자를 사용해서 불필요한 코드를 최소화 할 수 있을 것 같습니다 ! 아니면 빈 태그를 리턴해주시는 이유가 있을까요 ?
return current === null || only === current && (
<Comp className={`${selectedClassName()}`}>{children}</Comp>
);There was a problem hiding this comment.
코드가 거짓일 때 빈 fragment를 반환함으로서 명시적으로 빈 값을 나타내기 위해서 작성하였습니다.
논리연산자를 사용하면 undefined나 false를 반환하는데 반해 특정 조건에서 아무것도 렌더링 하지 않겠다 라는 의도를 명확히 표현할 수 있다고 생각했습니다.
| .${mobileOnlyClassName} { | ||
| display: none !important; | ||
| } |
There was a problem hiding this comment.
P3) !important를 사용하는 대신 쌓임맥락을 고려해서 스타일 우선순위를 높여볼 수도 있을 것 같습니다. 해당 방법이 통하지 않아서 !important 사용하신 걸까요 ??
There was a problem hiding this comment.
해당 로직은 모든 페이지에서 사용되는 부분입니다. 이것이 서드파트 라이브러리일 수도 있고 모든 부분의 쌓임맥락을 고려할 수는 없기에 !important를 사용하였습니다.
| const Responsive = ({ children, only, asChild }: ResponsivePropTypes) => { | ||
| const [current, setCurrent] = useState<AvailableSize | null>(null); | ||
|
|
||
| const Comp = asChild ? Slot : 'div'; |
| import { createContext } from 'react'; | ||
|
|
||
| interface ResponsiveContextValue { | ||
| mobileOnlyClassName: string; | ||
| desktopOnlyClassName: string; | ||
| } | ||
|
|
||
| export const ResponsiveContext = createContext<ResponsiveContextValue>( | ||
| //ResponsiveProvider로 감싸져있지 않은 컴포넌트에서 값을 접근했을 때 또는 Context가 제대로 초기화되지 않았을 때 에러를 발생시켜 디버깅을 쉽게하기 위함 | ||
| new Proxy({} as ResponsiveContextValue, { | ||
| get() { | ||
| throw new Error('ResponsiveProvider가 필요합니다.'); | ||
| }, | ||
| }), | ||
| ); |
There was a problem hiding this comment.
p5) 저희는 전체 컴포넌트들이 다 프로바이더로 감싸져있는데 이 디버깅이 필요한 경우가 있나요??
There was a problem hiding this comment.
누군가 실수로 프로바이더 영역 외에 컴포넌트를 만들어 해당 ResponsiveContext를 사용할 경우 디버깅에 유리합니다. 해당 로직은 에러처리를 용이하기 위해 작성한 로직입니다. 휴먼에러는 언제든 발생할 수 있으니까요!
| @@ -38,4 +41,10 @@ const DesktopWrapper = styled.div` | |||
| align-items: center; | |||
| width: 100%; | |||
| scroll-behavior: smooth; | |||
|
|
|||
| @media ${MOBILE_MEDIA_QUERY} { | |||
| /* width: 100%; */ | |||
| `; | ||
|
|
||
| const SubText = styled.span<{ isContainPhoto: boolean; isLast: boolean }>` | ||
| display: -webkit-box; |
There was a problem hiding this comment.
블록 컨테이너의 문자열을 지정한 줄 수만큼 제한할 수 있는 -webkit-line-clamp 속성을 사용하기 위해 추가하였습니다!
✨ 해당 이슈 번호 ✨
#474
todo
📌 내가 알게 된 부분
Slot 활용 전
📌 질문할 부분
📌스크린샷(선택)