Merge pull request #43 from depromeet/refactor/28/convention

컨벤션 적용

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/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;