[FE] feat: Bottom Sheet Content 컴포넌트 추가 #48
Conversation
| @@ -0,0 +1,64 @@ | |||
| import { Button, Divider, theme } from '@fun-eat/design-system'; | |||
| import { useState } from 'react'; | |||
| import { styled } from 'styled-components'; | |||
There was a problem hiding this comment.
| import { styled } from 'styled-components'; | |
| import styled from 'styled-components'; |
| textColor={isSelected ? 'inherit' : theme.textColors.info} | ||
| variant="filled" | ||
| size="lg" | ||
| isSelected={isSelected} |
| @@ -0,0 +1 @@ | |||
| export const SORT_OPTIONS = ['높은 가격순', '낮은 가격순'] as const; | |||
There was a problem hiding this comment.
api 명세에 맞게 상수를 작성해보면 어떨까요?
요청을 보낼 쿼리 값이 같이 있는 객체의 배열이면 좋을 것 같아요 😊
?sort=price,desc
There was a problem hiding this comment.
export const SORT_OPTIONS = [
{ label: '높은 가격순', value: 'price,desc' },
{ label: '낮은 가격순', value: 'price,asc' },
] as const;위와 같이 수정하였습니다. value의 경우 추후 값 추가시 다시 생각해보도록 이야기 나눴습니다.
| border: none; | ||
| outline: transparent; | ||
| font-weight: ${({ isSelected, theme }) => (isSelected ? theme.fontWeights.bold : 'inherit')}; | ||
| cursor: pointer; |
There was a problem hiding this comment.
button이면 cursor pointer 기본으로 되어있지 않나요?
There was a problem hiding this comment.
button으로 바꾸고 지운다는걸 깜박했네용!
| close: () => void; | ||
| } | ||
|
|
||
| const BottomSheetContent = ({ close }: BottomSheetContentProps) => { |
There was a problem hiding this comment.
BottomSheetContent는 정렬 옵션 리스트 뿐만 아니라 다른 정보를 나타낼 수 있는 범용적인 이름 같아요. 정렬 옵션 리스트에 맞는 이름은 어떤가요?
There was a problem hiding this comment.
좋슴다. SortOptionList로 일단 수정했는데 더 좋은 이름 있으면 말씀 주세요~~
| {option} | ||
| </SortOption> | ||
| </li> | ||
| {index < SORT_OPTIONS.length - 1 && <Divider variant="disabled" />} |
There was a problem hiding this comment.
li의 border를 사용하는건 어떤가요?
ul 안에 li만 있는것이 맞아보여요.
There was a problem hiding this comment.
넵 border-bottom으로 수정했습니다~~
| textColor={isSelected ? 'inherit' : theme.textColors.info} | ||
| variant="filled" | ||
| size="lg" | ||
| isSelected={isSelected} |
|
SortButton가 해당 브랜치에서 분기하였기 때문에 본 수정사항은 |
Issue
✨ 구현한 기능
📢 논의하고 싶은 내용
x
🎸 기타
x