[Tu-139] 동아리 링크모음 ui 구현 #1573
[Tu-139] 동아리 링크모음 ui 구현 #1573
Conversation
|
pr 제목은 [이슈 번호] 이슈 요약 형식으로 작성해주세요~ |
There was a problem hiding this comment.
기존에 구현되어 있는 컴포넌트를 직접 구현하신 것들이 많은데, 뭔가 '이런거 있을 것 같은데' 싶은 것들은 프론트 채널에 질문 주셔도 좋을 것 같아요!
https://mui.com/material-ui/material-icons/ 여기에 아이콘 뭐 있는지 검색할 수 있어서 여기 보고 작업하시면 도움될거에요
There was a problem hiding this comment.
아이콘 svg로 안 하고 기존에 구현된 Icon 컴포넌트를 쓰면 좋을 것 같아요!
| <IconWrapper> | ||
| <Image src={icon} alt={`${title} Icon`} width={30} height={30} /> | ||
| </IconWrapper> | ||
| <TextWrapper>{title}</TextWrapper> |
There was a problem hiding this comment.
Typography 라는 컴포넌트가 있어서 그걸 사용하면 좋을 것 같아요!
| /> | ||
| )) | ||
| ) : ( | ||
| <EmptyLinkText>등록된 링크가 없습니다.</EmptyLinkText> |
There was a problem hiding this comment.
요것도 Typography 쓰면 좋을 것 같아요
There was a problem hiding this comment.
ClubDetailCard에 EmptyDetailText처럼 만든거였는데 typography랑 layout으로 따로 분리하는게 좋을까요??
There was a problem hiding this comment.
이건 코드 작성 스타일의 차이일 것 같네요!
Typography를 사용한 다음 style을 입혀주는 방법도 있고, 지금처럼 div를 정의할 수도 있고, styled(Typography) 이렇게 상속해서 쓰는 방법도 있는데 선택하기 나름일 것 같아요
| }, | ||
| ]; | ||
|
|
||
| const ClubLinksList: React.FC = () => ( |
There was a problem hiding this comment.
지금은 UI 구현이라 당장 수정하지 않아도 되지만, 리스트를 prop으로 받아오는 형태가 나중에 api 응답 받아서 쓸 때 더 좋을 것 같아요!
| style={{ | ||
| color: "theme.colors.PRIMARY", | ||
| textAlign: "center", | ||
| fontFamily: "Pretendard", | ||
| fontSize: "16px", | ||
| fontWeight: 400, | ||
| lineHeight: "20px", | ||
| }} | ||
| > |
There was a problem hiding this comment.
여기에서 textAlign을 제외하면 모두 Typography prop으로 나타낼 수 있어요!
fontFamily, fontWeight은 기본값이 pretendard, 400이라 쓰지 않아도 괜찮아요
| /> | ||
| )) | ||
| ) : ( | ||
| <EmptyLinkText>등록된 링크가 없습니다.</EmptyLinkText> |
There was a problem hiding this comment.
이건 코드 작성 스타일의 차이일 것 같네요!
Typography를 사용한 다음 style을 입혀주는 방법도 있고, 지금처럼 div를 정의할 수도 있고, styled(Typography) 이렇게 상속해서 쓰는 방법도 있는데 선택하기 나름일 것 같아요
📌 요약 *
It closes #issue_number
-동아리 링크 모음 UI 구현
⭐문서 링크⭐
디펜던시 있는 변경사항(혹은 리뷰어가 알아야 할 참고사항)
이후 작업해야 할 todo list
🔴 리뷰 Due Date: x월 x일 (x요일)
📸 스크린샷
프론트의 경우 리뷰가 필요한 화면 URL 목록: /main
