🐛Fix : Address Copy Button - 실 주소값 Placeholder

src/pages/auth/index.tsx

@@ -1,11 +1,18 @@
 'use client';
+import { useState } from 'react';
 import { Icon } from '@/shared/icons';
 import { cn } from '@/shared/lib';
 import LoginButton from '@/pages/auth/components/LoginButton';
 import RecentLoginBubble from '@/pages/auth/components/RecentLoginBubble';
 
 export default function LoginPage() {
-  const handleLoginClick = (platform: string) => alert(`${platform} 로그인`);
+  const [recentPlatform, setRecentPlatform] = useState<string | null>(null);
+
+  const handleLoginClick = (platform: string) => {
+    alert(`${platform} 로그인 준비중`);
+    console.log(`${platform} 로그인 버튼 클릭`);
+    setRecentPlatform(platform);
+  };
 
   return (
     <main className='w-full flex flex-col items-center bg-white'>
@@ -37,7 +44,7 @@ export default function LoginPage() {
         </svg>
       </div>
 
-      {/* 콘텐츠  */}
+      {/* 콘텐츠 */}
       <section
         className={cn(
           'w-full flex flex-col items-center text-center',
@@ -50,7 +57,7 @@ export default function LoginPage() {
           <p className='text-label-md text-mint-900'>
             만화 속 부천 여행
             <br />
-            8개 명소를 탐험하고 엽서를 모아보세요!
+            10개 명소를 탐험하고 엽서를 모아보세요!
           </p>
         </div>
 
@@ -59,32 +66,47 @@ export default function LoginPage() {
           <Icon name='Stamp' size={132} color='mint-400' />
         </div>
 
-        {/* 로그인 버튼 */}
-        <div className='flex flex-col items-center gap-[2.1rem] relative'>
+        <div className='flex flex-col items-center gap-[2.1rem]'>
           <p className='text-label-lg text-gray-400'>start with</p>
 
-          {/* 최근 로그인 말풍선 */}
-          <div className='absolute -translate-x-1/2 z-50'>
-            <RecentLoginBubble />
-          </div>
+          <div className='flex gap-[1.5rem] relative'>
+            {/* 카카오 */}
+            <div className='relative'>
+              <LoginButton
+                platform='kakao'
+                onClick={() => handleLoginClick('카카오')}
+              />
+              {recentPlatform === '카카오' && (
+                <div
+                  className='absolute -top-[3.8rem] left-1/2 -translate-x-1/2 
+          w-auto min-w-max h-auto flex-shrink-0 pointer-events-none'
+                >
+                  <RecentLoginBubble />
+                </div>
+              )}
+            </div>
 
-          {/* 로그인 버튼 */}
-          <div className='flex gap-[1.5rem]'>
-            <LoginButton
-              platform='kakao'
-              onClick={() => handleLoginClick('카카오')}
-            />
-            <LoginButton
-              platform='google'
-              onClick={() => handleLoginClick('구글')}
-            />
+            {/* 구글 */}
+            <div className='relative'>
+              <LoginButton
+                platform='google'
+                onClick={() => handleLoginClick('구글')}
+              />
+              {recentPlatform === '구글' && (
+                <div
+                  className='absolute -top-[3.8rem] left-1/2 -translate-x-1/2 
+          w-auto min-w-max h-auto flex-shrink-0 pointer-events-none'
+                >
+                  <RecentLoginBubble />
+                </div>
+              )}
+            </div>
           </div>
 
           <p className='text-label-md text-gray-400 cursor-pointer underline underline-offset-[0.25rem]'>
             비회원 로그인
           </p>
         </div>
-
         {/* 안내문 */}
         <p className='mt-[5rem] text-label-sm text-gray-400'>
           비회원은 스탬프 저장과 공유 기능을 사용할 수 없습니다.

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: {