diff --git a/src/components/CardDisplay/CardAddDisplay.tsx b/src/components/CardDisplay/CardAddDisplay.tsx
index 9c2fed49e..136886918 100644
--- a/src/components/CardDisplay/CardAddDisplay.tsx
+++ b/src/components/CardDisplay/CardAddDisplay.tsx
@@ -4,15 +4,15 @@ import { styleToken } from '@/shared/styles';
 type CardAddDisplayProps = {
   onClick?: () => void;
 };
-export const CardAddDisplay = (props: CardAddDisplayProps) => (
+export const CardAddDisplay = ({ onClick }: CardAddDisplayProps) => (
   <Button
     alignItems="center"
     justifyContent="center"
     width="208px"
     height="130px"
     backgroundColor={styleToken.color.gray300}
+    onClick={onClick}
     _hover={{ backgroundColor: styleToken.color.gray300 }}
-    {...props}
   >
     <Typography variant="headline" fontSize="36px" color={styleToken.color.gray600}>
       +
diff --git a/src/components/CardProvider/CardProvider.tsx b/src/components/CardProvider/CardProvider.tsx
index f85f058fb..86d243c7a 100644
--- a/src/components/CardProvider/CardProvider.tsx
+++ b/src/components/CardProvider/CardProvider.tsx
@@ -1,14 +1,5 @@
 import { createContext, useState, useContext, PropsWithChildren, useMemo } from 'react';
-
-type CardState = {
-  cardNumber: string[];
-  expirationDate: string;
-  ownerName: string;
-  securityCode: string;
-  label: string;
-  color: string;
-  description: string;
-};
+import { CardState } from '@/type';
 
 type CardContextType = {
   card: CardState;
diff --git a/src/components/CardSelectBottomSheet/CardSelectBottomSheet.tsx b/src/components/CardSelectBottomSheet/CardSelectBottomSheet.tsx
index ab89d50e8..fdc566680 100644
--- a/src/components/CardSelectBottomSheet/CardSelectBottomSheet.tsx
+++ b/src/components/CardSelectBottomSheet/CardSelectBottomSheet.tsx
@@ -9,43 +9,38 @@ type CardSelectBottomSheetProps = {
   onSubmit?: (cardBrand: CardBrand) => void;
 };
 
-export const CardSelectBottomSheet = ({ onOverlayClick, onSubmit }: CardSelectBottomSheetProps) => {
-  const handleOverlayClick = () => {
-    onOverlayClick?.();
-  };
-  return (
-    <BackDrop onClick={handleOverlayClick}>
-      <VStack
-        position="absolute"
-        bottom="0"
-        left="0"
-        width="100%"
-        height="230px"
-        backgroundColor="white"
-        borderRadius="5px 5px 15px 15px"
+export const CardSelectBottomSheet = ({ onOverlayClick, onSubmit }: CardSelectBottomSheetProps) => (
+  <BackDrop onClick={onOverlayClick}>
+    <VStack
+      position="absolute"
+      bottom="0"
+      left="0"
+      width="100%"
+      height="230px"
+      backgroundColor="white"
+      borderRadius="5px 5px 15px 15px"
+    >
+      <Grid
+        gridTemplateColumns="repeat(4, 1fr)"
+        alignItems="center"
+        justifyContent="center"
+        height="100%"
+        padding="20px 20px"
       >
-        <Grid
-          gridTemplateColumns="repeat(4, 1fr)"
-          alignItems="center"
-          justifyContent="center"
-          height="100%"
-          padding="20px 20px"
-        >
-          {CARD_BRANDS.map(({ label, color }) => (
-            <CardSelectButton
-              key={`card-select-${label}`}
-              color={color}
-              label={label}
-              onClick={() => {
-                onSubmit?.({ label, color });
-              }}
-            />
-          ))}
-        </Grid>
-      </VStack>
-    </BackDrop>
-  );
-};
+        {CARD_BRANDS.map(({ label, color }) => (
+          <CardSelectButton
+            key={`card-select-${label}`}
+            color={color}
+            label={label}
+            onClick={() => {
+              onSubmit?.({ label, color });
+            }}
+          />
+        ))}
+      </Grid>
+    </VStack>
+  </BackDrop>
+);
 
 type CardSelectButtonProps = {
   onClick: () => void;
diff --git a/src/pages/CardListPage.tsx b/src/pages/CardListPage.tsx
index e140af880..6b5d825b0 100644
--- a/src/pages/CardListPage.tsx
+++ b/src/pages/CardListPage.tsx
@@ -19,14 +19,7 @@ export const CardListPage = () => {
         <VStack gap="20px" padding="20px 0">
           {ownerCards.map((ownerCard, index) => (
             <VStack key={`card-list-${index}`} gap="10px" alignItems="center" justifyContent="center">
-              <CardDisplay
-                size="small"
-                label={ownerCard.label}
-                color={ownerCard.color}
-                cardNumber={ownerCard.cardNumber}
-                expirationDate={ownerCard.expirationDate}
-                ownerName={ownerCard.ownerName}
-              />
+              <CardDisplay size="small" {...ownerCard} />
               <Typography variant="body" textAlign="center">
                 {ownerCard.description}
               </Typography>
diff --git a/src/shared/components/Button/Button.util.ts b/src/shared/components/Button/Button.token.ts
similarity index 85%
rename from src/shared/components/Button/Button.util.ts
rename to src/shared/components/Button/Button.token.ts
index c9abc929c..ca4aee788 100644
--- a/src/shared/components/Button/Button.util.ts
+++ b/src/shared/components/Button/Button.token.ts
@@ -1,7 +1,6 @@
-import type { ButtonVariant, ButtonVariantState, ButtonColorScheme } from './Button.type';
 import { styleToken } from '@/shared/styles';
 
-export const buttonColorMap = {
+export const buttonColorToken = {
   teal: {
     solid: {
       default: {
@@ -79,8 +78,3 @@ export const buttonColorMap = {
     },
   },
 } as const;
-
-export const getButtonColor = (colorScheme: ButtonColorScheme, variant: ButtonVariant, state: ButtonVariantState) => {
-  const colorInfo = buttonColorMap[colorScheme][variant];
-  return colorInfo[state];
-};
diff --git a/src/shared/components/Button/Button.tsx b/src/shared/components/Button/Button.tsx
index 259d26c51..6d272f5b6 100644
--- a/src/shared/components/Button/Button.tsx
+++ b/src/shared/components/Button/Button.tsx
@@ -1,7 +1,7 @@
 import { HTMLProps, PropsWithChildren } from 'react';
 import styled from '@emotion/styled';
 import { ButtonHoverProps, ButtonOptionalProps } from './Button.type';
-import { getButtonColor } from './Button.util';
+import { getButtonColor } from './Button.utils.ts';
 import { styleToken } from '@/shared/styles';
 import type { AsProps, StyleProps } from '@/shared/types';
 
@@ -9,16 +9,17 @@ type ButtonProps = PropsWithChildren<
   StyleProps & AsProps & HTMLProps<HTMLButtonElement> & ButtonOptionalProps & ButtonHoverProps
 >;
 
-export const Button = ({ children, type, variant, colorScheme, ...rest }: ButtonProps) => {
-  const buttonType = type || 'button';
-  const buttonVariant = variant || 'solid';
-  const buttonColorScheme = colorScheme || 'teal';
-  return (
-    <Root type={buttonType} variant={buttonVariant} colorScheme={buttonColorScheme} {...rest}>
-      {children}
-    </Root>
-  );
-};
+export const Button = ({
+  children,
+  type = 'button',
+  variant = 'solid',
+  colorScheme = 'teal',
+  ...rest
+}: ButtonProps) => (
+  <Root type={type} variant={variant} colorScheme={colorScheme} {...rest}>
+    {children}
+  </Root>
+);
 
 const Root = styled.button<ButtonProps & Required<ButtonOptionalProps> & ButtonHoverProps>`
   width: ${({ width }) => width || 'auto'};
diff --git a/src/shared/components/Button/Button.utils.ts b/src/shared/components/Button/Button.utils.ts
new file mode 100644
index 000000000..fc756def7
--- /dev/null
+++ b/src/shared/components/Button/Button.utils.ts
@@ -0,0 +1,7 @@
+import { buttonColorToken } from './Button.token';
+import type { ButtonColorScheme, ButtonVariant, ButtonVariantState } from './Button.type';
+
+export const getButtonColor = (colorScheme: ButtonColorScheme, variant: ButtonVariant, state: ButtonVariantState) => {
+  const colorInfo = buttonColorToken[colorScheme][variant];
+  return colorInfo[state];
+};
diff --git a/src/shared/components/Circle/Circle.tsx b/src/shared/components/Circle/Circle.tsx
index 5b50654f2..1ff599999 100644
--- a/src/shared/components/Circle/Circle.tsx
+++ b/src/shared/components/Circle/Circle.tsx
@@ -5,23 +5,31 @@ import type { AsProps, StyleProps } from '@/shared/types';
 
 type CircleProps = PropsWithChildren<StyleProps & AsProps>;
 
-export const Circle = ({ children, ...props }: CircleProps) => {
-  const { display, alignItems, justifyContent, width, height, borderRadius, backgroundColor } = props;
-  const circleProps = {
-    display: display || 'flex',
-    alignItems: alignItems || 'center',
-    justifyContent: justifyContent || 'center',
-    width: width || '37px',
-    height: height || '37px',
-    borderRadius: borderRadius || '50%',
-    backgroundColor: backgroundColor || styleToken.color.gray200,
-  };
-  return (
-    <Root as="span" {...circleProps} {...props}>
-      {children}
-    </Root>
-  );
-};
+export const Circle = ({
+  children,
+  display = 'flex',
+  alignItems = 'center',
+  justifyContent = 'center',
+  width = '37px',
+  height = '37px',
+  borderRadius = '50%',
+  backgroundColor = styleToken.color.gray200,
+  ...props
+}: CircleProps) => (
+  <Root
+    as="span"
+    display={display}
+    alignItems={alignItems}
+    justifyContent={justifyContent}
+    width={width}
+    height={height}
+    borderRadius={borderRadius}
+    backgroundColor={backgroundColor}
+    {...props}
+  >
+    {children}
+  </Root>
+);
 
 const Root = styled(DefaultStyled)<CircleProps>``;
 
diff --git a/src/shared/components/TextField/TextField.tsx b/src/shared/components/TextField/TextField.tsx
index 8745875a9..b9234c93e 100644
--- a/src/shared/components/TextField/TextField.tsx
+++ b/src/shared/components/TextField/TextField.tsx
@@ -12,19 +12,34 @@ export type TextFieldProps = StyleProps &
     _focus?: FocusProps;
   };
 
-export const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
-  const { type, variant, width, height, padding, borderRadius, fontSize, ...restProps } = props;
-  const buttonProps = {
-    type: type || 'text',
-    variant: variant || 'outline',
-    width: width || styleToken.width.w100,
-    height: height || '45px',
-    padding: padding || '13px 12px 13px 11px',
-    borderRadius: borderRadius || '6px',
-    fontSize: fontSize || '18px',
-  };
-  return <Root as="input" ref={ref} {...buttonProps} {...restProps} />;
-});
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    {
+      type = 'text',
+      variant = 'outline',
+      width = styleToken.width.w100,
+      height = '45px',
+      padding = '13px 12px 13px 11px',
+      borderRadius = '6px',
+      fontSize = '18px',
+      ...props
+    },
+    ref,
+  ) => (
+    <Root
+      as="input"
+      ref={ref}
+      type={type}
+      variant={variant}
+      width={width}
+      height={height}
+      padding={padding}
+      borderRadius={borderRadius}
+      fontSize={fontSize}
+      {...props}
+    />
+  ),
+);
 
 const Root = styled(DefaultStyled)<TextFieldProps>`
   ${({ width }) => width || styleToken.width.w100};
diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
index e18aee0c4..0aedff373 100644
--- a/src/shared/types/index.ts
+++ b/src/shared/types/index.ts
@@ -1 +1 @@
-export * from './props/index';
+export * from './props';
diff --git a/src/shared/utils/replaceMaskText.ts b/src/shared/utils/replaceMaskText.ts
index 688723e7b..d479d024b 100644
--- a/src/shared/utils/replaceMaskText.ts
+++ b/src/shared/utils/replaceMaskText.ts
@@ -1 +1 @@
-export const replaceMaskText = (text: string, maskChar?: string) => text.replace(/\d/g, maskChar || '●');
+export const replaceMaskText = (text: string, maskChar: string = '●') => text.replace(/\d/g, maskChar);