미션 현황 페이지 구현 (issue#49) #67
Conversation
- 진행 중인 미션 컴포넌트 mock data로 구현 - url 및 페이지 추가
| </div> | ||
|
|
||
| <S.PrButtonWrapper> | ||
| <Link to={pairPrLink} target="_blank" onClick={(e) => e.stopPropagation()}> |
There was a problem hiding this comment.
여기서 e.stopPropagation()은 이벤트 버블링 때문일까요?!
There was a problem hiding this comment.
네 맞아요! 바깥 부분의 카드에 링크 기능을 넣었더니 카드 안쪽에 있는 버튼의 라우팅이 동작하지 않더라구요..! 그래서 stopPropagation 을 넣었습니다
There was a problem hiding this comment.
아니면 안에 버튼 없이
<Link to={pairPrLink} target="_blank">
페어 PR 이동
</Link>이런식으로는 힘들까요..!? 🥹
There was a problem hiding this comment.
missionDetailButtonGroup 컴포넌트의 버튼에서도 비슷한 코드가 있었는데요! Link를 스타일 태그에 넣는 것보다는 Button 바깥을 Link로 감싸서 스타일과 컴포넌트를 명확하게 분리하는 것이 좋을 것 같다는 이야기를 했던 것 같아요! 다른 의견 있으시면 언제든지 말해주세용🫡
// missionDetailButtonGroup
<Link to={`/submit/${id}`}>
<S.Button>미션 제출하기</S.Button>
</Link>| export const ThumbnailImg = styled.img` | ||
| width: 100%; | ||
| height: -webkit-fill-available; // Chrome, Safari | ||
| height: -moz-available; // Firefox |
There was a problem hiding this comment.
오호 브라우저마다 height를 다르게 주어야하는군요 ?
There was a problem hiding this comment.
그러게요..! 저도 이번에 처음 알게 된 방법이에요😀😀 브라우저 엔진이 서로 달라서 다양한 브라우저를 지원하려면 여러가지 변수를 고려해야 할 것 같아요..!!
| export default function MyMissionCompleted() { | ||
| const navigate = useNavigate(); | ||
|
|
||
| const handleMissionClick = (id: number) => { |
There was a problem hiding this comment.
mission click은 Link 이용하지 않고 navigate로 라우팅을 처리하신 이유가 있으신지 궁금해요~!
There was a problem hiding this comment.
MyMissionCompleted 컴포넌트에 라우팅이 총 두 개 들어가게 되는데요! (바깥 카드, 내부 버튼) Link가 중첩되면 warning: validatedomnesting(...): <a> cannot appear as a descendant of <a> 메세지가 뜨더라구요😭 Link는 a 태그 역할을 하는데, Link가 두 번 들어가면 a 태그 내부에 a가 중첩되기 때문이었어요. 그래서 바깥 카드 부분은 navigate를 사용했습니다~!
| @@ -0,0 +1,33 @@ | |||
| import * as S from './MyMissionInProgress.styled'; | |||
|
|
|||
| export default function MyMissionInProgress() { | |||
There was a problem hiding this comment.
MyMissionXXX 형태의 통일성 있는 이름 넘 좋네요 👍🏻👍🏻
| <S.MyMissionPageContainer> | ||
| <MyMissionInProgress /> | ||
| <MyMissionCompleted /> | ||
| </S.MyMissionPageContainer> |
|
[추가 커밋 내역]
|
구현 요약
미션 현황 페이지 구현했습니다. 아직 api 연결 전이라 mock data로 대체했어요!
중첩 라우팅 문제로 아래와 같은 경고 메세지가 발생하여
MyMissionCompleted.tsx에서는Link와useNavigate두 종류를 사용했습니다. 더 좋은 아이디어 있으면 환영입니다~!!!warning: validatedomnesting(...): <a> cannot appear as a descendant of <a>MyMissionInProgress
MyMissionCompleted
연관 이슈
close #49
참고
코드 리뷰에
RCA 룰을 적용할 시 참고해주세요.