[FE] feat: 꿀조합 전체 목록 페이지 구현(마크업) #403
Conversation
| return ( | ||
| <RecipeItemContainer> | ||
| <ImageWrapper> | ||
| <RecipeImage src={image} /> |
| <RecipeItemContainer> | ||
| <ImageWrapper> | ||
| <RecipeImage src={image} /> | ||
| <ProfileImage src={author.profileImage} /> |
| <Text color={theme.textColors.sub}> | ||
| {author.nickname} 님 | {getFormattedDate(createdAt)} | ||
| </Text> | ||
| <Text size="xl" weight="bold"> |
There was a problem hiding this comment.
Text 컴포넌트가 여러개 있어서 제목을 찾기 어렵네요 이런데에 Heading Tag를 써도 될까요? 흠 🤔
There was a problem hiding this comment.
상품 이름을 h3로 수정했습니다
| {title} | ||
| </Text> | ||
| {/*TODO: 임시 데이터, API 연동 후 수정*/} | ||
| <Text color={theme.textColors.info}>#불닭볶음면 #옥수수콘 #치즈...</Text> |
There was a problem hiding this comment.
여기 ... 처리 해주십쇼~~ 원래 디자인보다 글자 길이 더 길게 가도 될 듯??
There was a problem hiding this comment.
백엔드에 이야기했습니다
이름 임의로 작성해서 필드 만들고 작성해볼게요!
frontend/src/pages/RecipePage.tsx
Outdated
| </Title> | ||
| <LinkWrapper> | ||
| <Link as={RouterLink} to="/search"> | ||
| <SvgIcon variant="search" width={24} height={24} /> |
There was a problem hiding this comment.
svgicon default width height가 24입니다!
| @@ -18,6 +18,7 @@ const AuthLayoutContainer = styled.div` | |||
| `; | |||
|
|
|||
| const MainWrapper = styled.main` | |||
| position: relative; | |||
There was a problem hiding this comment.
이거 다 position:relative 준 이유가 스크롤 버튼 때문인가요?
There was a problem hiding this comment.
검색 버튼 두려고 적용했습니다
There was a problem hiding this comment.
검색버튼은 Title 컴포넌트에 들어가는게 아닌가요?
There was a problem hiding this comment.
헤딩을 박스안에 두지 않고 따로 해보고 싶었습니다. (타이틀 목적에 맞게 텍스트만 있게 하도록)
타이틀 안으로 옮길까요?? 타미는 어느것이 좋아 보이나요?
페이지 자식으로 absolute가 존재하면 기존에는 전체 화면 기준으로 위치를 잡더라구요.!
혹시 몰라서 main 기준으로 위치를 잡기 위해 모든 레이아웃에 적용했습니다!
There was a problem hiding this comment.
저는 postion:relative로 전체를 감싸는게 맞나 싶어서 여쭤봤습니다. 일단 알겠습니다~
| {title} | ||
| </Text> | ||
| {/*TODO: 임시 데이터, API 연동 후 수정*/} | ||
| <Text color={theme.textColors.info}>#불닭볶음면 #옥수수콘 #치즈...</Text> |
| display: flex; | ||
| align-items: center; | ||
| gap: 4px; |
| bottom: -20px; | ||
| right: 16px; |
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; |
| export default RecipeList; | ||
|
|
||
| const RecipeListContainer = styled.ul` | ||
| & > li + li { |
There was a problem hiding this comment.
ul 안에 li 두번째 부터 스타일 적용합니다
frontend/src/pages/RecipePage.tsx
Outdated
| 🍯 꿀조합 | ||
| </Title> | ||
| <LinkWrapper> | ||
| <Link as={RouterLink} to="/search"> |
frontend/src/pages/RecipePage.tsx
Outdated
| color={!member ? 'gray3' : 'primary'} | ||
| textColor={!member ? 'white' : 'default'} |
There was a problem hiding this comment.
근데 궁금한데 member ? 'primary' : 'gray3' 이렇게 쓰지 않은 이유가 뭔가요?
frontend/src/pages/RecipePage.tsx
Outdated
| font-size: 24px; | ||
| `; | ||
|
|
||
| const LinkWrapper = styled.div` |
There was a problem hiding this comment.
이거 styled(Link) 로 하면 안되나요?
|
리뷰 반영했습니다! |
Issue
✨ 구현한 기능
📢 논의하고 싶은 내용
🎸 기타
⏰ 일정