feat: calendar

components/atoms/ColorLabel.tsx

@@ -0,0 +1,24 @@
+import { Box, Flex } from "@chakra-ui/react";
+
+import { CustomColor } from "../../types/globals/interaction";
+import PointCircle from "./PointCircle";
+
+export interface ColorLabelProps {
+  color?: CustomColor;
+  colorText?: string;
+  //이후 colorText를 color로 변경
+  text: string;
+}
+
+function ColorLabel({ text, color, colorText }: ColorLabelProps) {
+  return (
+    <Flex h="24px" align="center">
+      <PointCircle color={!colorText ? color : null} colorText={colorText} />
+      <Box fontSize="12px" as="span" color={colorText || `var(--color-${color})`}>
+        {text}
+      </Box>
+    </Flex>
+  );
+}
+
+export default ColorLabel;

components/atoms/LocationSelector.tsx

@@ -1,7 +1,7 @@
 import { Select } from "@chakra-ui/react";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 
-import { LOCATION_CONVERT } from "../../constants/location";
+import { LOCATION_TO_FULLNAME } from "../../constants/location";
 import { DispatchType } from "../../types/hooks/reactTypes";
 import { ActiveLocation } from "../../types/services/locationTypes";
 import { isLocationType } from "../../utils/validationUtils";
@@ -57,7 +57,7 @@ export default function LocationSelector({
       >
         {options.map((option, idx) => (
           <option key={idx} value={option}>
-            {LOCATION_CONVERT[option]}
+            {LOCATION_TO_FULLNAME[option]}
           </option>
         ))}
       </Select>

components/atoms/MonthNav.tsx

@@ -1,42 +1,30 @@
+import { Box, Flex } from "@chakra-ui/react";
 import { Dayjs } from "dayjs";
-import styled from "styled-components";
 
 import { DispatchType } from "../../types/hooks/reactTypes";
 
-interface IMonthNav {
-  month: number;
-  setNavMonth: DispatchType<Dayjs>;
+interface MonthNavProps {
+  monthNum: number;
+  changeMonth: DispatchType<Dayjs>;
 }
 
-function MonthNav({ month, setNavMonth }: IMonthNav) {
-  const onClick = (dir: "left" | "right") => {
-    if (dir === "left") setNavMonth((old) => old.subtract(1, "month"));
-    else setNavMonth((old) => old.add(1, "month"));
+function MonthNav({ monthNum, changeMonth }: MonthNavProps) {
+  const handleMonthChange = (dir: "left" | "right") => {
+    if (dir === "left") changeMonth((old) => old.subtract(1, "month"));
+    else changeMonth((old) => old.add(1, "month"));
   };
 
   return (
-    <Layout>
-      <IconWrapper onClick={() => onClick("left")}>
+    <Flex align="center" fontSize="20px" fontWeight={800}>
+      <Box as="button" px={2} onClick={() => handleMonthChange("left")}>
         <i className="fa-solid fa-caret-left fa-xs" />
-      </IconWrapper>
-      <span>{month + 1}월</span>
-      <IconWrapper onClick={() => onClick("right")}>
+      </Box>
+      <span>{monthNum + 1}월</span>
+      <Box as="button" px={2} onClick={() => handleMonthChange("right")}>
         <i className="fa-solid fa-caret-right fa-xs" />
-      </IconWrapper>
-    </Layout>
+      </Box>
+    </Flex>
   );
 }
 
-const Layout = styled.div`
-  display: flex;
-  align-items: center;
-
-  font-size: 20px;
-  font-weight: 700;
-`;
-
-const IconWrapper = styled.button`
-  padding: 0 var(--gap-1);
-`;
-
 export default MonthNav;

components/atoms/PointCircle.tsx

@@ -4,12 +4,13 @@ import { CustomColor } from "../../types/globals/interaction";
 
 interface PointCircleProps {
   color?: CustomColor;
+  colorText?: string;
 }
 
-function PointCircle({ color = "mint" }: PointCircleProps) {
+function PointCircle({ color = "mint", colorText }: PointCircleProps) {
   return (
     <Flex w="16px" h="16px" justify="center" align="center">
-      <Box w="4px" h="4px" borderRadius="50%" bgColor={`var(--color-${color})`} />
+      <Box w="4px" h="4px" borderRadius="50%" bgColor={colorText || `var(--color-${color})`} />
     </Flex>
   );
 }

components/molecules/groups/ButtonGroups.tsx

@@ -1,44 +1,64 @@
 import { Button, Flex } from "@chakra-ui/react";
 import styled from "styled-components";
 
-export interface IButtonOptions {
+export interface ButtonOptionsProps {
   text: string;
   func: () => void;
+  color?: string;
 }
 
 export interface IButtonGroups {
-  buttonItems: IButtonOptions[];
+  buttonOptionsArr: ButtonOptionsProps[];
   currentValue: string;
   size?: "sm" | "md";
   isWrap?: boolean;
   isEllipse?: boolean;
+  type?: "block" | "text";
 }
 
 export default function ButtonGroups({
-  buttonItems,
+  buttonOptionsArr,
   currentValue,
   size,
   isWrap = false,
   isEllipse = false,
+  type = "block",
 }: IButtonGroups) {
+  console.log(buttonOptionsArr, currentValue);
   return (
     <Layout isWrap={isWrap}>
-      {buttonItems.map((buttonData, idx) => (
-        <Flex flexShrink={0} key={idx} onClick={buttonData.func}>
-          <Button
-            mr="8px"
-            colorScheme={buttonData.text === currentValue ? "mintTheme" : undefined}
-            variant={buttonData.text === currentValue ? undefined : "outline"}
-            bg={buttonData.text === currentValue ? undefined : "white"}
-            size={size}
-            rounded={isEllipse ? "2xl" : "md"}
-            _focus={{
-              outline: "none",
-              boxShadow: "none",
-            }}
-          >
-            {buttonData.text}
-          </Button>
+      {buttonOptionsArr.map((buttonOptions, idx) => (
+        <Flex flexShrink={0} key={idx} onClick={buttonOptions.func}>
+          {type === "block" ? (
+            <Button
+              mr="8px"
+              colorScheme={buttonOptions.text === currentValue ? "mintTheme" : undefined}
+              variant={buttonOptions.text === currentValue ? undefined : "outline"}
+              bg={buttonOptions.text === currentValue ? undefined : "white"}
+              size={size}
+              rounded={isEllipse ? "2xl" : "md"}
+              _focus={{
+                outline: "none",
+                boxShadow: "none",
+              }}
+            >
+              {buttonOptions.text}
+            </Button>
+          ) : (
+            <Button
+              mr="8px"
+              color={buttonOptions.color}
+              fontWeight={buttonOptions.text === currentValue ? 600 : 400}
+              variant="ghost"
+              size="xs"
+              _focus={{
+                outline: "none",
+                boxShadow: "none",
+              }}
+            >
+              {buttonOptions.text}
+            </Button>
+          )}
         </Flex>
       ))}
     </Layout>

components/molecules/rows/ColorLabelRow.tsx

@@ -0,0 +1,21 @@
+import { Box, Flex } from "@chakra-ui/react";
+
+import ColorLabel, { ColorLabelProps } from "../../atoms/ColorLabel";
+
+interface ColorLabelRowProps {
+  props: ColorLabelProps[];
+}
+
+function ColorLabelRow({ props }: ColorLabelRowProps) {
+  return (
+    <Flex>
+      {props.map((prop, idx) => (
+        <Box key={idx} mr={idx !== props.length - 1 && 2}>
+          <ColorLabel text={prop.text} color={prop.color} colorText={prop.colorText} />
+        </Box>
+      ))}
+    </Flex>
+  );
+}
+
+export default ColorLabelRow;