Merge branch 'develop' into feat/11/AddBottomSheet

src/app/MainPage.tsx

@@ -2,8 +2,8 @@
 import { useAtom } from "jotai";
 
 import Button from "@/component/Button/Button";
-import { Modal } from "@/component/common/Modal/Modal";
-import { Toast } from "@/component/common/Toast/Toast";
+import { Modal } from "@/component/common/Modal";
+import { Toast } from "@/component/common/Toast";
 import { useModal } from "@/hooks/useModal";
 import { useToast } from "@/hooks/useToast";
 import { messageAtom } from "@/store/messageAtom.tsx";

src/app/test/Staging.tsx

@@ -9,6 +9,9 @@ import { Input, InputLabelContainer, Label } from "@/component/common/Input";
 import Radio from "@/component/common/RadioButton/Radio";
 import RadioButtonGroup from "@/component/common/RadioButton/RadioButtonGroup";
 import { useBottomSheet } from "@/hooks/useBottomSheet.ts";
+import { CheckBox, CheckBoxGroup } from "@/component/common/checkBox";
+import { Input, InputLabelContainer, Label } from "@/component/common/input";
+import { Radio, RadioButtonGroup } from "@/component/common/radioButton";
 import { useCheckBox } from "@/hooks/useCheckBox";
 import { useInput } from "@/hooks/useInput";
 import { useRadioButton } from "@/hooks/useRadioButton";

src/component/common/Icon/Icon.tsx

@@ -14,7 +14,7 @@ type Props = {
 
 const DEFAULT_ICON_COLOR = "#000000";
 
-function Icon({ icon, color = DEFAULT_ICON_COLOR, size = "2rem", onClick, ...props }: Props) {
+export const Icon = memo(function Icon({ icon, color = DEFAULT_ICON_COLOR, size = "2rem", onClick, ...props }: Props) {
   // eslint-disable-next-line import/namespace
   const SVGIcon = icons[icon];
   const widthRem = typeof size === "number" ? `${size}rem` : size;
@@ -31,6 +31,4 @@ function Icon({ icon, color = DEFAULT_ICON_COLOR, size = "2rem", onClick, ...pro
       {...props}
     />
   );
-}
-
-export default memo(Icon);
+});

src/component/common/Icon/index.ts

@@ -0,0 +1 @@
+export { Icon } from "@/component/common/Icon/Icon";

src/component/common/Modal/Modal.tsx

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import { useEffect, useRef } from "react";
 
-import { Portal } from "@/component/common/Portal/Portal";
+import { Portal } from "@/component/common/Portal";
 import { useModal } from "@/hooks/useModal";
 
 export function Modal() {

src/component/common/Modal/index.ts

@@ -0,0 +1 @@
+export { Modal } from "@/component/common/Modal/Modal";

src/component/common/Portal/index.ts

@@ -0,0 +1 @@
+export { Portal } from "@/component/common/Portal/Portal";

src/component/common/Toast/Toast.tsx

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 
-import { Portal } from "@/component/common/Portal/Portal";
-import { ToastItem } from "@/component/common/Toast/ToastItem";
+import { Portal } from "@/component/common/Portal";
+import { ToastItem } from "@/component/common/Toast";
 import { useToast } from "@/hooks/useToast";
 
 export function Toast() {

src/component/common/Toast/ToastItem.tsx

@@ -1,12 +1,12 @@
 import { css } from "@emotion/react";
 import { useRef, useState } from "react";
 
+import { Icon } from "@/component/common/Icon";
 import { useToast } from "@/hooks/useToast";
 import { ANIMATION } from "@/style/common/animation";
 import { toastMap } from "@/style/common/toast";
 import { ToastType } from "@/types/toast";
 import { collapseToast } from "@/util/toast/collapseToast";
-import Icon from "@/component/common/Icon/Icon";
 
 export function ToastItem({ type, content, id, duration = 3000 }: ToastType) {
   const { removeToast } = useToast();

src/component/common/Toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast } from "./Toast";
+export { ToastItem } from "./ToastItem";

src/component/common/appBar/AppBar.tsx

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 
-import Icon from "@/component/common/Icon/Icon";
+import { Icon } from "@/component/common/Icon";
 
 export type AppBarProps = {
   title?: string;

src/component/common/CheckBox/CheckBox.tsx → src/component/common/checkBox/CheckBox.tsx

@@ -10,7 +10,7 @@ type CheckBoxProps = {
   children: React.ReactNode;
 };
 
-const CheckBox = ({ value, children }: CheckBoxProps) => {
+export function CheckBox({ value, children }: CheckBoxProps) {
   const checkboxContext = useContext(CheckBoxContext);
   return (
     <ListItemCard variant={checkboxContext?.isChecked(value) ? "theme" : "default"}>
@@ -41,6 +41,4 @@ const CheckBox = ({ value, children }: CheckBoxProps) => {
       />
     </ListItemCard>
   );
-};
-
-export default CheckBox;
+}

src/component/common/CheckBox/CheckBoxGroup.tsx → src/component/common/checkBox/CheckBoxGroup.tsx

@@ -12,7 +12,7 @@ type CheckBoxGroupProps = {
   children: React.ReactNode;
 } & CheckBoxContextState;
 
-const CheckBoxGroup = ({ children, ...props }: CheckBoxGroupProps) => {
+export function CheckBoxGroup({ children, ...props }: CheckBoxGroupProps) {
   return (
     <div
       css={css`
@@ -24,6 +24,4 @@ const CheckBoxGroup = ({ children, ...props }: CheckBoxGroupProps) => {
       <CheckBoxContext.Provider value={props}>{children}</CheckBoxContext.Provider>
     </div>
   );
-};
-
-export default CheckBoxGroup;
+}

src/component/common/checkBox/index.ts

@@ -0,0 +1,2 @@
+export { CheckBox } from "./CheckBox";
+export { CheckBoxGroup } from "./CheckBoxGroup";

src/component/common/RadioButton/Radio.tsx → src/component/common/radioButton/Radio.tsx

@@ -10,7 +10,7 @@ type RadioProps = {
   children: React.ReactNode;
 };
 
-const Radio = ({ value, children }: RadioProps) => {
+export function Radio({ value, children }: RadioProps) {
   const radioContext = useContext(RadioContext);
   return (
     <ListItemCard variant={radioContext?.isChecked(value) ? "theme" : "default"}>
@@ -42,6 +42,4 @@ const Radio = ({ value, children }: RadioProps) => {
       />
     </ListItemCard>
   );
-};
-
-export default Radio;
+}

src/component/common/RadioButton/RadioButtonGroup.tsx → src/component/common/radioButton/RadioButtonGroup.tsx

@@ -13,7 +13,7 @@ type RadioButtonGroupProps = {
   children: React.ReactNode;
 } & RadioContextState;
 
-const RadioButtonGroup = ({ children, ...props }: RadioButtonGroupProps) => {
+export function RadioButtonGroup({ children, ...props }: RadioButtonGroupProps) {
   return (
     <div
       css={css`
@@ -25,6 +25,4 @@ const RadioButtonGroup = ({ children, ...props }: RadioButtonGroupProps) => {
       <RadioContext.Provider value={props}>{children}</RadioContext.Provider>
     </div>
   );
-};
-
-export default RadioButtonGroup;
+}

src/component/common/radioButton/index.ts

@@ -0,0 +1,2 @@
+export { Radio } from "./Radio";
+export { RadioButtonGroup } from "./RadioButtonGroup";