feat(toks-components, quiz): Image Preview 기능 구현 #403
Conversation
| extends Pick<QuizButtonProps, 'OXType' | 'imageUrl' | 'className'>, | ||
| HTMLAttributes<HTMLDivElement> { |
There was a problem hiding this comment.
혹시 onClick이 필요해서 HTMLAttributes<HTMLDivElement>이 타입을 붙인거라면 QuizButtonProps에 onClick이 있기 때문에 Pick<QuizButtonProps, 'OXType' | 'imageUrl' | 'className' | 'onClick'>해주었어도 좋았을 것 같습니다...!
There was a problem hiding this comment.
'onClick' 속성의 형식이 호환되지 않습니다. 'MouseEventHandler<HTMLButtonElement> | undefined' 형식은 'MouseEventHandler<HTMLDivElement> | undefined' 형식에 할당할 수 없습니다. onClick이 호환이 안되는 문제 때문에 따로 extends 해주었습니다!
There was a problem hiding this comment.
근데 썸네일 컴포넌트 내부로 모달 컴포넌트를 종속시키면 해당 attribute extends는 더이상 필요 없을 것 같네요!
There was a problem hiding this comment.
아아 그러네요 그나저나 저렇게 하면 안되는군요 흠흠
| <Thumbnail | ||
| className="mb-24px w-full" | ||
| OXType={OXType} | ||
| imageUrl={imageUrl} | ||
| name={name} | ||
| onClick={() => { | ||
| setIsShow(true); | ||
| }} | ||
| /> | ||
| {!OXType && ( | ||
| <Modal isShow={isShow} onClose={() => setIsShow(false)}> | ||
| <img | ||
| className="rounded-8px" | ||
| src={imageUrl} | ||
| alt={`${name}사진`} | ||
| style={{ | ||
| width: '100%', | ||
| objectFit: 'cover', | ||
| objectPosition: 'center', | ||
| }} | ||
| /> | ||
| </Modal> | ||
| )} |
There was a problem hiding this comment.
썸네일 클릭 => 모달 등장이 서비스 내 고정적인 스펙이라면 해당 썸네일 확대용 모달을 썸네일 컴포넌트 안에 종속시키면 어떨까요?
모달이 썸네일 안으로 들어가고 isShow state를 썸네일 안에 두면 어떨지 의견 남겨봅니다!
There was a problem hiding this comment.
저도 같은 의견으로 Preview + Modal은 세트로 가져가도 좋을 것 같습니다
There was a problem hiding this comment.
넵넵 썸네일과 모달 컴포넌트 하나로 합쳐볼게요~!
There was a problem hiding this comment.
40a8a69 썸네일 컴포넌트에 모달 컴포넌트 종속시키는 방식으로 수정했습니다!
| className="h-auto w-24px" | ||
| src={ICON_URL.CHEVRON_RIGHT} | ||
| alt="로그아웃 버튼" | ||
| width={24} | ||
| height={24} | ||
| width="0" | ||
| height="0" |
There was a problem hiding this comment.
next Image를 사용할 때 콘솔에 src has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio. warning이 여러번 떴었는데요, 해당 warning을 해결하기 위해서는 width나 height 둘 중 하나를 auto로 설정해서 ratio를 맞춰야하는데 next Image를 사용할 때에는 width와 height 두 속성 모두 지정을 해줘야만했기 때문에 위와 같은 방식으로 작성하게 되었습니다!
next/image
| <Thumbnail | ||
| className="mb-24px w-full" | ||
| OXType={OXType} | ||
| imageUrl={imageUrl} | ||
| name={name} | ||
| onClick={() => { | ||
| setIsShow(true); | ||
| }} | ||
| /> | ||
| {!OXType && ( | ||
| <Modal isShow={isShow} onClose={() => setIsShow(false)}> | ||
| <img | ||
| className="rounded-8px" | ||
| src={imageUrl} | ||
| alt={`${name}사진`} | ||
| style={{ | ||
| width: '100%', | ||
| objectFit: 'cover', | ||
| objectPosition: 'center', | ||
| }} | ||
| /> | ||
| </Modal> | ||
| )} |
There was a problem hiding this comment.
저도 같은 의견으로 Preview + Modal은 세트로 가져가도 좋을 것 같습니다
| <div | ||
| onClick={() => { | ||
| onClose(); | ||
| }} | ||
| className={cn( | ||
| 'fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-gray-120/80 p-20px', | ||
| { | ||
| hidden: !isShow, | ||
| 'animate-fade-in-back-drop': isShow, | ||
| } | ||
| )} | ||
| > | ||
| <div className="flex flex-col"> | ||
| <button className="flex justify-end pb-16px" onClick={() => onClose()}> | ||
| <Image src={ICON_URL.CLOSE} alt="close" width={24} height={24} /> | ||
| </button> | ||
| {children} | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
이거 framer-motion 라이브러리 있는데 요거로 바꾸면 좋을 것 같습니다.
AnimationPresence 등 유용한 유틸을 추후에 추가하기 편할 것 같아서 제시해봅니당
There was a problem hiding this comment.
dfa9684 framer 적용했습니다 ~!
💡 왜 PR을 올렸나요?
💁 무엇이 어떻게 바뀌나요?
디자인 레퍼런스:
관련 슬랙 링크: https://5gaeanmal.slack.com/archives/C048PJ7E7FX/p1707739196054969
💬 리뷰어분들께