design: 톡앤픽 플레이스 Page UI 구현 #155
Conversation
areumH
added
✔︎pull requests
| @@ -8,7 +8,8 @@ export const containerStyle = css({ | |||
| display: 'flex', | |||
| alignItems: 'center', | |||
| justifyContent: 'space-between', | |||
| backgroundColor: '#ffffff', | |||
| backgroundColor: color.WT, | |||
| boxShadow: '0px 4px 11px rgba(0, 0, 0, 0.1)', | |||
There was a problem hiding this comment.
이부분 저도 이번에 확인하고 수정했는데..! 감사합니다🙂
아마 현재 페이지에 max-height가 100vh로 적용되어있어서 그럴거에요!! 해당 코드 지우면 해결될 것 같습니당 |
| const getTalkPickId = (): number | undefined => { | ||
| switch (type) { | ||
| case 'default': | ||
| return talkPickItem.id; | ||
| case 'best': | ||
| return rank; | ||
| case 'header': | ||
| default: | ||
| return undefined; | ||
| } | ||
| }; |
There was a problem hiding this comment.
talkpickId를 props 로 받게 된다면, case에 따른 로직을 utils에 정의하는 것도 좋아보여요 😄
| @@ -6,7 +6,7 @@ export const footerContainer = css` | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: ${color.BLUE_LIGHT}; | |||
| width: 1920px; | |||
| width: 100%; | |||
There was a problem hiding this comment.
header와 footer의 경우, 전체 layout을 , 나머지 요소들은 양 옆 간격을 가지고 표시되기 때문에 1920px 로 지정해놨었는데, 100%로 처리하고 안에 요소들에 margin 을 설정하는 것도 좋은 방법이네요!
| <Pagination | ||
| pages={pages} | ||
| selected={selectedPage} | ||
| maxPage={totalPages} | ||
| onChangeNavigate={handleChangeNavigate} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
오늘 논의 된 페이지제이션 관련 수정 사항 제가 반영해서 이 부분까지 처리하는 걸로 미리 노티 드립니다.
| <li css={storyInnerContainer}> | ||
| <h3>Header </h3> | ||
| <TalkPickItem {...args} /> | ||
| <h3>Defult</h3> |
There was a problem hiding this comment.
오타가 있었네요..!!! 알려주셔서 감사합니다 바로 수정하겠습니다!! 🥹
💡 작업 내용
💡 자세한 설명
✅ TalkPickItem
default,best,header로 지정했습니다.<TalkPickItem type="header" />의 코드로 리스트의 헤더처럼 사용할 수 있습니다!TalkPickListItem타입 내에 톡픽의 순위가 없기 때문에 props에rank를 추가하여 인기 톡픽 배열의 index 값을 사용하여 순위를 표기할 수 있도록 하였습니다....와 같은 말줄임표로 표기됩니다.✅TalkPickListSection
✅TalkPickPlacePage
boxShadow속성을 추가하였고, Footer의 width를100%로 수정해두었습니다.layout파일의 헤더 및 푸터를 수정해주었고,App.tsx파일에 해당 페이지를 추가해두었습니다./talkpickplace페이지 실행하면 확인 가능합니다!+)
styles/reset.css파일의max-height코드를 지우니 스토리북 내에서 발생했던 컴포넌트의 UI가 깨지는 현상이 사라졌습니다!! 페이지에 적용되는 스타일 속성이 스토리북 내에도 동일하게 적용되는 것 같아요 😶📗 참고 자료 (선택)
📢 리뷰 요구 사항 (선택)
🚩 후속 작업 (선택)
✅ 셀프 체크리스트
closes #154