diff --git a/frontend/src/Cabinet/components/AdminInfo/Chart/ItemBarChart.tsx b/frontend/src/Cabinet/components/AdminInfo/Chart/ItemBarChart.tsx index a67b4c460..d29f57a54 100644 --- a/frontend/src/Cabinet/components/AdminInfo/Chart/ItemBarChart.tsx +++ b/frontend/src/Cabinet/components/AdminInfo/Chart/ItemBarChart.tsx @@ -68,7 +68,7 @@ const ItemBarChart = ({ data }: { data: IItemUseCountDto[] }) => { "페널티 감면권-3일", ]} indexBy="item" - margin={{ top: 60, right: 30, bottom: 50, left: 45 }} + margin={{ top: 60, right: 30, bottom: 50, left: 35 }} padding={0.3} layout="vertical" groupMode="stacked" @@ -126,19 +126,20 @@ const ItemBarChart = ({ data }: { data: IItemUseCountDto[] }) => { }; const ItemBarChartStyled = styled.div` - height: 90%; + height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; + @media screen and (min-width: 768px) { + padding-right: 80px; + padding-left: 50px; + } `; const ResponsiveBarStyled = styled.div` height: 100%; width: 100%; - @media screen and (min-width: 768px) { - padding-right: 80px; - } `; const ItemLegendsStyled = styled.div` diff --git a/frontend/src/Cabinet/components/Modals/StoreModal/StoreBuyItemModal.tsx b/frontend/src/Cabinet/components/Modals/StoreModal/StoreBuyItemModal.tsx index a2a32659e..11f889862 100644 --- a/frontend/src/Cabinet/components/Modals/StoreModal/StoreBuyItemModal.tsx +++ b/frontend/src/Cabinet/components/Modals/StoreModal/StoreBuyItemModal.tsx @@ -51,42 +51,37 @@ const StoreBuyItemModal: React.FC<{ setSelectedOption(option); }; - const [dropdownProps, setDropdownProps] = useState({ - options: [], - defaultValue: "", - onChangeValue: () => {}, - isOpen: false, - setIsOpen: () => {}, - }); - + let dropdownProps: IDropdown = { + options: + props.selectItem.items.length > 1 + ? [ + { + name: props.selectItem.items[props.selectItem.items.length - 3] + .itemDetails, + value: String(props.selectItem.items.length - 3), + }, + { + name: props.selectItem.items[props.selectItem.items.length - 2] + .itemDetails, + value: String(props.selectItem.items.length - 2), + }, + { + name: props.selectItem.items[props.selectItem.items.length - 1] + .itemDetails, + value: String(props.selectItem.items.length - 1), + }, + ] + : [], + defaultValue: + props.selectItem.items.length > 1 + ? props.selectItem.items[props.selectItem.items.length - 3].itemDetails + : "", + onChangeValue: handleDropdownChange, + isOpen: isOpen, + setIsOpen: setIsOpen, + }; useEffect(() => { if (props.selectItem.items.length > 3) setSelectedOption("1"); - if (props.selectItem.items.length > 1) { - setDropdownProps({ - options: [ - { - name: props.selectItem.items[props.selectItem.items.length - 3] - .itemDetails, - value: String(props.selectItem.items.length - 3), - }, - { - name: props.selectItem.items[props.selectItem.items.length - 2] - .itemDetails, - value: String(props.selectItem.items.length - 2), - }, - { - name: props.selectItem.items[props.selectItem.items.length - 1] - .itemDetails, - value: String(props.selectItem.items.length - 1), - }, - ], - defaultValue: - props.selectItem.items[props.selectItem.items.length - 3].itemDetails, - onChangeValue: handleDropdownChange, - isOpen: isOpen, - setIsOpen: setIsOpen, - }); - } }, [props]); const modalContents: IModalContents = { @@ -103,41 +98,11 @@ const StoreBuyItemModal: React.FC<{ }, renderAdditionalComponent: () => ( <> - {console.log("dropdown", dropdownProps)} {props.selectItem.items.length > 1 && ( {props.selectItem.itemName} 타입 - {/* */} {" "} )}