refactor: 컴포넌트 책임 정리

src/domains/profile/layouts/MyAccount.tsx

@@ -14,7 +14,7 @@ export default function MyAccount({}: MyAccountProps) {
   if (!data?.data) return <div>Not Found</div>;
 
   return (
-    <>
+    <section>
       <Spacing heightGap={15} />
       <SubTitle text="보유 포인트" />
       <DisplayPoint point={data.data.me.points} />
@@ -30,6 +30,6 @@ export default function MyAccount({}: MyAccountProps) {
         <TransferAccessButton />
       </div>
       <Spacing heightGap={15} />
-    </>
+    </section>
   );
 }

src/domains/shared/component/Button.tsx

@@ -8,6 +8,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   outline?: boolean;
   color?: Color;
   fullWidth?: boolean;
+  variant?: "clear" | "solid";
 };
 
 const defaultButtonStyle = css`
@@ -29,6 +30,7 @@ export default function Button({
   color = "#4B7FF0",
   children,
   fullWidth,
+  variant = "solid",
   ...args
 }: ButtonProps) {
   const buttonStyle = useMemo(
@@ -69,8 +71,25 @@ export default function Button({
       `}
     `;
   }, [size, fullWidth]);
+
+  const buttonVariantStyle = useMemo(() => {
+    if (variant === "clear") {
+      return css`
+        background: none;
+        border: none;
+      `;
+    }
+  }, [variant]);
   return (
-    <button css={[defaultButtonStyle, buttonStyle, buttonSizeStyle]} {...args}>
+    <button
+      css={[
+        defaultButtonStyle,
+        buttonStyle,
+        buttonSizeStyle,
+        buttonVariantStyle,
+      ]}
+      {...args}
+    >
       {children}
     </button>
   );

src/domains/shared/component/Navigation.tsx

@@ -4,10 +4,10 @@ import GameIcon from "public/icons/CodeSandboxOutlined.svg";
 import NotiIcon from "public/icons/BellOutlined.svg";
 import UnionIcon from "public/icons/CrownOutlined.svg";
 import ProfileIcon from "public/icons/UserOutlined.svg";
-import GhostButton from "./GhostButton";
 import useRouting from "../hooks/useRouting";
-import IconWithText from "./IconWithText";
+import IconWithText from "./TextedIcon";
 import { useRouter } from "next/router";
+import Button from "./Button";
 
 export default function Navigation() {
   const moveTo = useRouting("push");
@@ -33,7 +33,7 @@ export default function Navigation() {
             `,
           ]}
         >
-          <GhostButton onClick={() => moveTo("/game")}>
+          <Button variant="clear" onClick={() => moveTo("/game")}>
             <IconWithText
               color={router.pathname === "/game" ? "#4B7FF0" : "#000000"}
               icon={
@@ -43,8 +43,8 @@ export default function Navigation() {
               }
               bottomText="Game"
             />
-          </GhostButton>
-          <GhostButton onClick={() => moveTo("/notification")}>
+          </Button>
+          <Button variant="clear" onClick={() => moveTo("/notification")}>
             <IconWithText
               color={
                 router.pathname === "/notification" ? "#4B7FF0" : "#000000"
@@ -58,8 +58,8 @@ export default function Navigation() {
               }
               bottomText="Noti"
             />
-          </GhostButton>
-          <GhostButton onClick={() => moveTo("/union")}>
+          </Button>
+          <Button variant="clear" onClick={() => moveTo("/union")}>
             <IconWithText
               color={router.pathname === "/union" ? "#4B7FF0" : "#000000"}
               icon={
@@ -69,8 +69,8 @@ export default function Navigation() {
               }
               bottomText="Union"
             />
-          </GhostButton>
-          <GhostButton onClick={() => moveTo("/")}>
+          </Button>
+          <Button variant="clear" onClick={() => moveTo("/")}>
             <IconWithText
               color={router.pathname === "/" ? "#4B7FF0" : "#000000"}
               icon={
@@ -80,7 +80,7 @@ export default function Navigation() {
               }
               bottomText="Profile"
             />
-          </GhostButton>
+          </Button>
         </nav>
       </section>
     </footer>

src/domains/shared/component/StatusRow.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import { commaizeNumber } from "@toss/utils";
 import { ReactElement } from "react";
 
-interface ProfileRowProps {
+interface StatusRowProps {
   image: string | null;
   name: string;
   point: number;
@@ -34,12 +34,12 @@ const iconBoxStyle = css`
   margin-left: 10px;
 `;
 
-export default function ProfileRow({
+export default function StatusRow({
   image,
   name,
   point,
   icon,
-}: ProfileRowProps) {
+}: StatusRowProps) {
   return (
     <li>
       <div css={profileRowStyle}>

src/domains/shared/component/IconWithText.tsx → src/domains/shared/component/TextedIcon.tsx

@@ -1,22 +1,27 @@
 import { Color } from "@/styles/sharedStyles";
 import { css } from "@emotion/react";
-import { ReactElement } from "react";
+import { ReactElement, useMemo } from "react";
 
-type IconWithTextProps = {
+type TextedIconProps = {
   bottomText: string;
   icon: ReactElement;
+  size?: number;
   color?: Color;
 };
 
-function IconWithText({
+function TextedIcon({
   bottomText,
   icon,
+  size = 16,
   color = "#000000",
-}: IconWithTextProps) {
-  const IconText = css`
-    font-size: 16px;
-    color: ${color};
-  `;
+}: TextedIconProps) {
+  const IconText = useMemo(
+    () => css`
+      font-size: ${size}px;
+      color: ${color};
+    `,
+    [size, color]
+  );
 
   return (
     <div css={IconContainer} aria-labelledby={bottomText}>
@@ -33,8 +38,4 @@ const IconContainer = css`
   flex-direction: column;
 `;
 
-const IconText = css`
-  font-size: 16px;
-`;
-
-export default IconWithText;
+export default TextedIcon;