feat : addresscopy 버튼 주소값으로 변경

Author: KongMezu

src/shared/components/button/AddressCopy.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { Copy } from '@/shared/utils/copy';
 
 const addressCopyStyle = cva(
-  'flex items-center justify-start flex-shrink-0 rounded-full transition-all duration-200',
+  'flex items-center justify-start flex-shrink-0 rounded-full transition-all duration-200 overflow-hidden',
   {
     variants: {
       variant: {
@@ -23,14 +23,14 @@ const addressCopyStyle = cva(
 interface AddressCopyProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof addressCopyStyle> {
-  label: string;
   value: string;
+  truncate?: boolean;
 }
 
 const AddressCopy = ({
-  label = 'address copy',
-  value = label,
+  value,
   variant = 'gray',
+  truncate = true,
   className,
   ...props
 }: AddressCopyProps) => {
@@ -52,24 +52,29 @@ const AddressCopy = ({
       onClick={handleCopy}
       className={cn(
         addressCopyStyle({ variant }),
-        'w-[35.4rem] h-[4rem] px-[1.3rem] py-[1rem] gap-[0.4rem]',
+        'w-full h-[4rem] px-[1.3rem] py-[1rem] gap-[0.4rem]',
         'cursor-pointer select-none',
         className,
       )}
       {...props}
     >
-      <Icon
-        name='CopySimple'
-        size={18}
-        color={variant === 'mint' ? 'mint-400' : 'gray-400'}
-      />
+      <div className='flex-shrink-0'>
+        <Icon
+          name={copied ? 'Check' : 'CopySimple'}
+          size={18}
+          color={variant === 'mint' ? 'mint-400' : 'gray-400'}
+        />
+      </div>
       <span
         className={cn(
-          'text-label-lg',
+          'text-label-lg flex-1 min-w-0',
           variant === 'mint' ? 'text-mint-400' : 'text-gray-400',
+          truncate &&
+            'truncate whitespace-nowrap overflow-hidden text-ellipsis',
         )}
+        title={value}
       >
-        {label}
+        {value}
       </span>
     </div>
   );

src/shared/components/container/Card.tsx

@@ -11,9 +11,9 @@ const cardStyle = cva(
       },
       size: {
         medium:
-          'w-[17rem] h-[17rem] flex-col items-center justify-center p-[1.2rem]',
+          'w-full h-[17rem] flex-col items-center justify-center p-[1.2rem]',
         large:
-          'w-[35.4rem] h-[12rem] flex-row items-start justify-start px-[1.3rem] pt-[1.1rem] pb-[3.3rem]',
+          'w-full h-[12rem] flex-row items-start justify-start px-[1.3rem] pt-[1.1rem] pb-[3.3rem]',
       },
     },
     defaultVariants: {