Skip to content

Commit

Permalink
๐Ÿ”จ Refactor(#100): SortDropdown ์ปดํฌ๋„ŒํŠธ์— top ์†์„ฑ ์ถ”๊ฐ€ ๋ฐ ์Šคํƒ€์ผ ์†์„ฑ ์„ ํƒ์  ๋ณ€๊ฒฝ
Browse files Browse the repository at this point in the history
  • Loading branch information
bluetree7878 committed Jan 15, 2025
1 parent 7512566 commit 319a76b
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 23 deletions.
19 changes: 11 additions & 8 deletions src/common/layout/SortDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface SortDropDownProps<T extends Record<PropertyKey, any>> {
width?: string; // ๋„ˆ๋น„
height?: string; // ๋†’์ด
fontSize?: string; // ๊ธ€์ž ์‚ฌ์ด์ฆˆ
top?: string; // li, ul ์‚ฌ์ด ๊ฑฐ๋ฆฌ
ulFontColor?: string; // ul ํฐํŠธ ์ƒ‰
liFontColor?: string; // li ํฐํŠธ ์ƒ‰
ulBackgroundColor?: string; // ul ๋ฐฐ๊ฒฝ ์ƒ‰
Expand Down Expand Up @@ -53,14 +54,15 @@ export default function SortDropdown<T extends Record<PropertyKey, any>>({
options,
selectedOption,
onSelectOption,
width = '136px',
height = '30px',
fontSize = '12px',
ulFontColor = '#FFF3C0;',
liFontColor = '#D37744',
ulBackgroundColor = '#d37744',
liBackgroundColor = '#fff3c0',
borderColor = '#c26b3b',
width,
height,
fontSize,
top,
ulFontColor,
liFontColor,
ulBackgroundColor,
liBackgroundColor,
borderColor,
}: SortDropDownProps<T>) {
const { isOpen, togglePopover, popoverRef } = usePopover();

Expand Down Expand Up @@ -88,6 +90,7 @@ export default function SortDropdown<T extends Record<PropertyKey, any>>({
{isOpen && (
<S.SortOptionUl
$width={width}
$top={top}
$backgroundColor={ulBackgroundColor}
$fontColor={ulFontColor}
$borderColor={borderColor}
Expand Down
31 changes: 16 additions & 15 deletions src/common/layout/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,12 @@ const getSortSelectButtonIcon = (isToggled: boolean) => {

export const SortSelectButton = styled.button<{
$isToggled: boolean;
$width: string;
$height: string;
$color: string;
$fontSize: string;
$backgroundColor: string;
$borderColor: string;
$width?: string;
$height?: string;
$color?: string;
$fontSize?: string;
$backgroundColor?: string;
$borderColor?: string;
}>`
width: ${({ $width }) => $width};
height: ${({ $height }) => $height};
Expand All @@ -77,13 +77,14 @@ export const SortSelectButton = styled.button<{
`;

export const SortOptionUl = styled.ul<{
$width: string;
$backgroundColor: string;
$fontColor: string;
$borderColor: string;
$top?: string;
$width?: string;
$backgroundColor?: string;
$fontColor?: string;
$borderColor?: string;
}>`
position: absolute;
top: 30px;
top: ${({ $top }) => $top};
width: ${({ $width }) => $width};
border-radius: 0 0 15px 15px;
background-color: ${({ $backgroundColor }) => $backgroundColor};
Expand All @@ -98,10 +99,10 @@ export const SortOptionUl = styled.ul<{
`;

export const SortOptionLi = styled.li<{
$height: string;
$color: string;
$backgroundColor: string;
$borderColor: string;
$height?: string;
$color?: string;
$backgroundColor?: string;
$borderColor?: string;
}>`
display: flex;
justify-content: center;
Expand Down
9 changes: 9 additions & 0 deletions src/features/ranking/ui/RankingContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,15 @@ export default function RankingContainer({
options={RANKING_OPTIONS}
selectedOption={selectedOption}
onSelectOption={onOptionChange}
width="136px"
height="30px"
fontSize="12px"
top="30px"
ulFontColor="#FFF3C0"
liFontColor="#D37744"
ulBackgroundColor="#d37744"
liBackgroundColor="#fff3c0"
borderColor="#c26b3b"
/>
</S.SortDropdownWrapper>

Expand Down

0 comments on commit 319a76b

Please sign in to comment.