style(custom): #4 Add theme guideline.

src/App.tsx

@@ -1,10 +1,16 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Flex, Button } from "@chakra-ui/react";
 
 function App() {
   return (
-    <Box pos="fixed" zIndex={100} top={50} right={0} w="200px" h="90vh" mr="15px" opacity={0.5}>
+    <Box pos="fixed" zIndex={100} top={0} right={0} w="200px" h="90vh" mt="25px" mr="15px" opacity={0.7}>
       <Box>Drawer</Box>
       <Flex h="100%" flexDirection="column" alignItems="center" justifyContent="space-around" borderRadius="15px" bgColor="primaryBg">
+        <Button size="customBtn" variant="quickRespButton">
+          Testing
+        </Button>
+        <Button size="customBtn" variant="promptButton">
+          Testing
+        </Button>
       </Flex>
     </Box>
   );

src/styles/theme.ts

@@ -1,18 +1,31 @@
 import { extendTheme } from "@chakra-ui/react";
 
-const config = {
-  initialColorMode: "light",
-  useSystemColorMode: false,
-};
-
 const theme = extendTheme({
-  config,
   colors: {
     primaryBg: "#112D4E",
     promptBtn: "#3F72AF",
     quickRespBtn: "#DBE2Ef",
     settingBtn: "#F9F7F7",
   },
+  components: {
+    Button: {
+      sizes: {
+        customBtn: {
+          width: "180px",
+          height: "35px",
+        },
+      },
+      variants: {
+        promptButton: (props: any) => ({
+          bg: props.theme.colors.promptBtn,
+          color: "white",
+        }),
+        quickRespButton: (props: any) => ({
+          bg: props.theme.colors.quickRespBtn,
+        }),
+      },
+    },
+  },
 });
 
 export default theme;