[Feat/#115] 메인 페이지 퍼블리싱 #118
Conversation
| category: CategoryType; | ||
| } | ||
|
|
||
| const CategoryCard = ({ category }: CategoryCardProps) => { |
There was a problem hiding this comment.
다시 한 번 꼭꼭 잘 기억하고, 찾아보지 않아도 사용할 수 있도록 이해하는 계기가 되었습니다! 늘 깔꼼 정리 잘하시는 채연님 최고최고
|
|
||
| export const categoryIconWrapper = style({ | ||
| position: 'absolute', | ||
| top: '1rem', |
There was a problem hiding this comment.
보이는 것에서 차이는 없겠지만 개인적으로 top보다 bottom을 기준으로 하는 게 더 자연스러워 보입니다...!
| { | ||
| width: '100%', | ||
| gap: '4.2rem', | ||
| padding: '3.3rem 0 7.3rem', |
There was a problem hiding this comment.
사소한 부분이기는 한데.. 피그마 상으로 7.3rem 부분이 7.4rem으로 표기되어 있는 듯 합니다!
| {isLogin ? ( | ||
| <h1 className={mainTextStyle}>{user.userName} 님,</h1> | ||
| ) : ( | ||
| <h1 className={mainTextStyle}>안녕하세요!</h1> | ||
| )} |
There was a problem hiding this comment.
<h1 className={mainTextStyle}>
{isLogin ? `${user.userName} 님,` : '안녕하세요!'}
</h1>
이렇게 하면 좀 가독성이 떨어질까요..? 흠..🥺
| <> | ||
| <CategoryCard category={category} /> | ||
| </> |
There was a problem hiding this comment.
혹시 빈 태그 (<>) 없애면 오류날까요? 안 난다면 없애는 게 좋을 것 같습니다!
| gap: '0.4rem', | ||
| width: '100%', | ||
| height: '8.7rem', | ||
| padding: '1.4rem 1rem', |
There was a problem hiding this comment.
padding: '1rem' 으로 수정 부탁드립니다!
|
|
||
| export const categoryTextStyle = style([ | ||
| vars.fonts.head02_b_20, | ||
| flexGenerator('row', 'flex-start'), |
There was a problem hiding this comment.
여기는 flexGenerator() 빼도 괜찮지 않나요?
| flexGenerator('row', 'flex-start'), | ||
| { | ||
| color: vars.colors.black, | ||
| width: '100%', |
There was a problem hiding this comment.
width: '100%도 빼도 괜찮을것 같기도 하고 테스트해보고 괜찮으면 빼주세요!
| import { DesignCard } from '@components'; | ||
| import { CATEGORY } from '@constants'; | ||
| import CategoryCard from '@pages/home/components/CategoryCard/CategoryCard'; | ||
| import { MainKeyVisual } from 'src/assets/images'; |
There was a problem hiding this comment.
이거 추후에 이미지 파일들은 경로를 통일해줘야 할 것 같아요!
|
|
||
| export const mainContentContainer = style([ | ||
| flexGenerator('column', 'flex-start', 'flex-start'), | ||
| { |
There was a problem hiding this comment.
gap: '0.4rem' 추가해주세요!
| export const mainTextContainer = style([ | ||
| flexGenerator('column', 'flex-start', 'flex-start'), | ||
| { | ||
| gap: '0.4rem', | ||
| }, | ||
| ]); |
| </div> | ||
| </section> | ||
|
|
||
| <section className={subSectionContainer}> |
There was a problem hiding this comment.
여기는 그럼 main태그로 바꿔주면 더 좋을거 같아요~
📌 관련 이슈번호
체크리스트
✅ Key Changes
CategoryCard 만들기
category 정보를 받아서, CATEGORY_COMPONENT 객체에서 text, hashtag, icon 내용을 가져오는 형태로 구현했습니다.
HomePage 만들기
피그마 보고 화면 뚝딱뚝딱 그렸습니다.
구현 결과는 용량이슈로 동영상이 안올라가서 카톡으로 파일 보내겠습니다 !-!
📢 To Reviewers
📸 스크린샷 or 실행영상