diff --git a/frontend/src/pages/enhance/7-execute/grindStone/slot.tsx b/frontend/src/pages/enhance/7-execute/common/itemSlot2.tsx similarity index 80% rename from frontend/src/pages/enhance/7-execute/grindStone/slot.tsx rename to frontend/src/pages/enhance/7-execute/common/itemSlot2.tsx index 019c8fb..8456c96 100644 --- a/frontend/src/pages/enhance/7-execute/grindStone/slot.tsx +++ b/frontend/src/pages/enhance/7-execute/common/itemSlot2.tsx @@ -1,11 +1,19 @@ -import { AspectRatio, Box, Flex, useColorMode } from "@chakra-ui/react"; +import { + AspectRatio, + Box, + Flex, + ResponsiveValue, + useColorMode, +} from "@chakra-ui/react"; -export default function Slot({ +export default function ItemSlot2({ bgColorScheme, spec, + w, children, }: { - bgColorScheme: string; + bgColorScheme: "blue" | "purple"; + w?: ResponsiveValue; spec?: React.ReactNode; children?: React.ReactNode; }) { @@ -19,7 +27,8 @@ export default function Slot({ {message}; } + if (materialType == MATERIAL_TYPE.STARFORCE) + return ; + if ( [ MATERIAL_TYPE.POWERFUL, diff --git a/frontend/src/pages/enhance/7-execute/grindStone/grindStone.tsx b/frontend/src/pages/enhance/7-execute/grindStone/grindStone.tsx index 45e2845..bd03013 100644 --- a/frontend/src/pages/enhance/7-execute/grindStone/grindStone.tsx +++ b/frontend/src/pages/enhance/7-execute/grindStone/grindStone.tsx @@ -15,7 +15,7 @@ import GRINDSTONE from "../../../../assets/item/scroll/grindstone.png"; import MESO from "../../../../assets/item/meso/coin.png"; import { RxPlus, RxDoubleArrowRight } from "react-icons/rx"; import { FaPlus, FaMinus, FaPlusCircle } from "react-icons/fa"; -import Slot from "./slot"; +import ItemSlot2 from "../common/itemSlot2"; export default function GrindStone({ inventoryIndex, @@ -46,7 +46,7 @@ export default function GrindStone({ - @@ -59,27 +59,27 @@ export default function GrindStone({ src={item.item_icon} transform={{ base: undefined, sm: "scale(2)" }} /> - + - 1 / 5}> + 1 / 5}> - + - @@ -92,7 +92,7 @@ export default function GrindStone({ src={item.item_icon} transform={{ base: undefined, sm: "scale(2)" }} /> - + } /> diff --git a/frontend/src/pages/enhance/7-execute/potential/potential.tsx b/frontend/src/pages/enhance/7-execute/potential/potential.tsx index a457ae0..cd5dedc 100644 --- a/frontend/src/pages/enhance/7-execute/potential/potential.tsx +++ b/frontend/src/pages/enhance/7-execute/potential/potential.tsx @@ -277,8 +277,8 @@ export default function Potential({ @@ -286,8 +286,8 @@ export default function Potential({ {formatNumber( costMaterials.find(({ name }) => name.startsWith("메소"))?.value ?? 0 - )}{" "} - 메소 + )} +  메소 diff --git a/frontend/src/pages/enhance/7-execute/starforce/startforce.tsx b/frontend/src/pages/enhance/7-execute/starforce/startforce.tsx new file mode 100644 index 0000000..53308d2 --- /dev/null +++ b/frontend/src/pages/enhance/7-execute/starforce/startforce.tsx @@ -0,0 +1,123 @@ +import { + Box, + Button, + Checkbox, + Flex, + Image, + Stack, + Tag, + Text, + useColorMode, +} from "@chakra-ui/react"; +import ItemSlot2 from "../common/itemSlot2"; +import { useAppSelector } from "../../../../stores/hooks"; +import { FaAngleRight, FaPlusCircle } from "react-icons/fa"; +import MESO from "../../../../assets/item/meso/coin.png"; +import { formatNumber } from "../../../../utils/formatter"; + +export default function Startforce({ + inventoryIndex, +}: { + inventoryIndex: number; +}) { + const inventory = useAppSelector((state) => state.user.inventory); + const item = inventory[inventoryIndex].after; + + const dark = useColorMode().colorMode == "dark"; + const paletteGray50 = dark ? "gray.900" : "gray.50"; + + return ( + + + + 메소를 사용하여 장비를 강화합니다. + + + + + + + + + + 0성 + + 1성 + + 성공확률: 95.0% + 실패(유지)확률: 5.0% +   + + STR: +2222222222222222222222222222222222 + + DEX: +2 + INT: +2 + LUK: +2 + + + + + + + + + + 필요한 메소 : + {formatNumber(21500)} + + + + + + ); +}