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

[KongMezu]

🔥 작업 내용

• 버튼 기존 고정 label(address copy) 에서 실 주소값 받아오도록 컴포넌트 수정
• 컴포넌트 밖으로 글자 벗어나면 축약

🤔 추후 작업 사항

• svgo

🔗 이슈

• close #[fix] 주소 복사 컴포넌트 수정 #62

PR Point (To Reviewer)

버튼 고정 라벨 -> 실주소값으로 변경

address copy 가 버튼 전체 고정 ui 인줄 알고 작업했으나, 실 주소가 보여져야 한다고 해서 바꿔놨습니다.
고정 버튼 값이 였던 label 과 주소값 value 분리를 value 하나로 통합했습니다.

사용법

저번이랑 크게 다르지 않습니다.

<AddressCopy
        value='인천광역시 계양구 어쩌구로 0000 우리집 11층이다 '
        variant='mint'
      />

축약 & 주소 복사시 액션

글자는 컴포넌트를 벗어나면 축약되게 해놨습니다.
주소 복사하고 팝업창이나 멘트를 띄울까 하다가 아이콘에 체크 표시가 있는것을 확인하고 1.5초간 체크 표시 보여주는게 좋을 거 같아서 바꿔봤습니다.
자세한건 영상보시면 이해가 빠릅니다!

📸 피그마 스크린샷 or 기능 GIF

KakaoTalk_20251027_011413350.mp4

Summary by CodeRabbit

릴리즈 노트

• 새로운 기능

  • 최근 사용한 로그인 플랫폼 추적 및 표시 기능 추가
  • 장소 탐험 권장 개수를 10개로 업데이트

• 스타일

  • 버튼 및 카드 컴포넌트의 너비를 고정값에서 반응형 전체 너비로 변경
  • 주소 복사 컴포넌트 텍스트 말줄임 및 레이아웃 개선

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
af-fe	Ready	Preview	Comment	Oct 26, 2025 4:15pm

[coderabbitai]

🚀 전체 요약

Walkthrough

본 PR은 세 개의 핵심 컴포넌트를 수정합니다. 인증 페이지에서 최근 로그인 플랫폼 추적 상태를 추가하고 로그인 버튼별 피드백 UI를 통합했으며, AddressCopy 컴포넌트의 props 구조를 변경(label → value + truncate)하고, Card 컴포넌트의 너비를 고정값에서 반응형으로 조정했습니다.

Changes

응집군 / 파일(들)	변경 요약
인증 페이지 로직 및 UI 구조 개선 src/pages/auth/index.tsx	로그인 플랫폼 추적을 위한 recentPlatform 상태 추가; handleLoginClick 핸들러 강화(콘솔 로깅 및 상태 업데이트); 최근 로그인 버블을 각 LoginButton 근처에 조건부 렌더링하도록 구조 변경; 팁 텍스트 업데이트("8개" → "10개 명소")
AddressCopy 컴포넌트 Props 및 렌더링 재설계 src/shared/components/button/AddressCopy.tsx	AddressCopyProps 인터페이스: label 제거, truncate 옵션 추가; 렌더링: 고정 너비(w-[35.4rem])에서 w-full로 변경; 아이콘을 copied 상태별로 조건부 렌더링(CopySimple/Check); 텍스트 span에 flex-1 min-w-0 및 선택적 잘림 스타일 추가; title 속성으로 value 표시
Card 컴포넌트 너비 반응형 조정 src/shared/components/container/Card.tsx	크기 배리언트(medium/large)의 고정 너비(w-[17rem], w-[35.4rem])를 w-full로 통일; 높이는 유지(medium: 17rem, large: 12rem)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25 minutes

추가 주의 필요 영역:

• AddressCopy의 공개 API 변경(label 제거, truncate 추가)으로 인한 기존 사용처 영향 검증 필수
• 로그인 페이지의 상태 관리 로직(recentPlatform)과 UI 통합 흐름이 의도대로 동작하는지 확인
• Card 컴포넌트 너비 변경이 전체 페이지 레이아웃과 일관성 있게 작동하는지 검토

Possibly related issues

• [fix] 주소 복사 컴포넌트 수정 #62: AddressCopy 컴포넌트의 props 구조 변경(label → value) 및 렌더링 로직 업데이트가 해당 이슈에서 요청한 동일한 컴포넌트 개선과 직접 부합함

Possibly related PRs

• ✨Feat : 로그인 컴포넌트 & 로그인 레이아웃 #50: 본 PR이 인증 페이지에서 로그인 버튼과 RecentLoginBubble 컴포넌트를 수정하므로, 해당 PR에서 도입된 동일 컴포넌트들과 직접적인 코드 수준 연관성 있음
• ✨Feat & ⚙️Setting : (행사,장소,주소 복사 ,주소 말풍선) 컴포넌트 구현 & 오버레이 파일 & 디자인 시스템 weight 값 변경 #37: AddressCopy(props 및 렌더링) 및 Card(너비 클래스) 동일 파일 수정으로 코드 수준 중복 발생

Suggested labels

comment

Suggested reviewers

• skyblue1232
• jjangminii

Poem

🐰 로그인 흐름을 다듬고,
주소 복사는 더욱 유연하게,
카드는 화면 가득 펼쳐지고,
10개 명소가 기다리는 모험 준비 완료!
변화와 다듬음의 춤을 춘다네 ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	PR 제목 "🐛Fix : Address Copy Button - 실 주소값 Placeholder"는 changeset의 주요 변경사항을 정확히 반영하고 있습니다. raw_summary에 따르면 AddressCopy 컴포넌트의 공개 API가 변경되어 (label 속성 제거, truncate 속성 추가) 실제 주소값을 표시하도록 수정된 것이 가장 중요한 변경이며, 제목이 이를 명확하게 설명합니다. 비록 Card 컴포넌트와 auth 페이지에도 변경이 있지만, AddressCopy 버튼 수정이 이 PR의 핵심 의도이며 제목이 이를 정확하게 전달하고 있습니다.
Description Check	✅ Passed	PR 설명이 저장소의 필수 template을 충실히 따르고 있습니다. 🔥 작업 내용, 🤔 추후 작업 사항, 🔗 이슈, PR Point (To Reviewer), 📸 피그마 스크린샷 섹션이 모두 포함되어 있으며, 각 섹션이 명확하고 상세하게 작성되었습니다. 특히 PR Point 섹션에서는 변경 사유, 사용 예제 코드, 동작 방식 설명이 체계적으로 제시되어 있고, 동작을 보여주는 GIF까지 첨부되어 리뷰어가 변경사항을 충분히 이해할 수 있게 작성되었습니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#62/addresscopy-button

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message.
Please verify that they are correct before merging.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/shared/components/button/AddressCopy.tsx (1)

51-59: Clickable div → button 전환으로 키보드 접근성/역할 보장

현재 div에 onClick만 있어 키보드 조작(Enter/Space)과 포커스, 역할이 보장되지 않습니다. 네이티브 <button>으로 교체하고 type="button", 적절한 aria-label/라이브 리전에 의한 피드백을 제공해주세요.

Apply this diff:

-interface AddressCopyProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+interface AddressCopyProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof addressCopyStyle> {
   value: string;
   truncate?: boolean;
 }
 
 const AddressCopy = ({
   value,
   variant = 'gray',
   truncate = true,
   className,
   ...props
 }: AddressCopyProps) => {
   const [copied, setCopied] = useState(false);
@@
-  return (
-    <div
-      onClick={handleCopy}
+  const ariaLabel = copied ? '주소가 복사되었습니다' : '주소 복사';
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
       className={cn(
         addressCopyStyle({ variant }),
         'w-full h-[4rem] px-[1.3rem] py-[1rem] gap-[0.4rem]',
-        'cursor-pointer select-none',
+        'cursor-pointer select-none',
         className,
       )}
       {...props}
-    >
+      aria-label={ariaLabel}
+    >
@@
-    </div>
+      <span className="sr-only" aria-live="polite" aria-atomic="true">
+        {copied ? '복사됨' : ''}
+      </span>
+    </button>
   );

🧹 Nitpick comments (6)

src/shared/components/container/Card.tsx (2)

14-16: w-full 전환 시 flex-shrink-0와의 상호작용 점검 필요

부모가 좁거나 gap/padding이 큰 플렉스 컨테이너일 때, w-full + flex-shrink-0 조합이 수평 오버플로를 유발할 수 있습니다. 레이아웃 상 문제가 없으면 OK지만, 이슈가 보이면 flex-shrink 허용(예: flex-shrink 제거) 또는 부모에 min-w-0/overflow-hidden 보완을 고려해주세요.

---

39-44: large의 기존 padding과 customPadding의 병합 결과 재확인

large는 pt/pb/px를 지정하고, customPadding은 py/px를 추가합니다. twMerge 순서상 py가 pt/pb를 덮어 동일한 상하 패딩(1.4rem)으로 바뀝니다. 의도라면 OK, 아니라면 customPadding을 더 구체적으로(예: pt 또는 pb만) 지정해 주세요.

src/pages/auth/index.tsx (3)

11-15: 알림(alert) 대신 비차단 피드백으로 전환 권장

alert는 UI 흐름을 막습니다. 상단 버블/토스트로 대체하거나 개발 환경에서만 동작하도록 가드하는 편이 좋습니다.

Apply this diff (개발 환경에서만 alert 유지):

-  const handleLoginClick = (platform: string) => {
-    alert(`${platform} 로그인 준비중`);
-    console.log(`${platform} 로그인 버튼 클릭`);
-    setRecentPlatform(platform);
-  };
+  const handleLoginClick = (platform: string) => {
+    if (process.env.NODE_ENV === 'development') {
+      // dev 전용 안내
+      alert(`${platform} 로그인 준비중`);
+    }
+    console.info(`[auth] ${platform} 로그인 버튼 클릭`);
+    setRecentPlatform(platform);
+  };

---

72-103: 버블 포지셔닝은 👍 — a11y 보완은 별도 컴포넌트에서 검토

pointer-events-none로 클릭 간섭을 막은 점 좋습니다. RecentLoginBubble에 role="status"와 aria-live="polite"를 추가하면 보조기기에 복귀 신호를 전달할 수 있습니다. 컴포넌트 내부에서 처리 제안드립니다.

---

9-15: Platform 식별자를 문자열 상태에서 분리하여 유형 안전성 향상

검증 결과, 제안된 리팩토링이 정확하고 필요합니다. 현재 코드는 한국어 문자열('카카오', '구글')을 상태로 사용하고 있어, 라벨 변경 시 이를 추적하기 어렵습니다.

핵심 문제:

• 라인 9: useState<string | null>(null) - 타입이 과도하게 광범위
• 라인 77, 79, 93, 95: 한국어 문자열이 핸들러 호출과 조건 비교에 직접 사용됨
• LoginButton.tsx는 이미 ID 기반 설계('kakao' | 'google')를 모범적으로 구현 중

제안된 해결책(diff 참고):

+  type PlatformId = 'kakao' | 'google';
+  const [recentPlatform, setRecentPlatform] = useState<PlatformId | null>(null);
+  const labelMap: Record<PlatformId, string> = { kakao: '카카오', google: '구글' };
-  const handleLoginClick = (platform: string) => {
+  const handleLoginClick = (platform: PlatformId) => {
-    onClick={() => handleLoginClick('카카오')}
+    onClick={() => handleLoginClick('kakao')}
-    {recentPlatform === '카카오' && (
+    {recentPlatform === 'kakao' && (

이 변경은 LoginButton.tsx의 설계 패턴과 일관되며, 다른 파일에 영향을 주지 않습니다. 라벨 유지보수가 한 곳(labelMap)에서만 이루어져 버그 가능성을 줄입니다.

src/shared/components/button/AddressCopy.tsx (1)

39-48: 복사 실패 콜백 처리 추가 권장

Copy(..., onSuccess, undefined)로 실패 처리 부재. 네트워크/권한 문제 시 사용자 피드백이 없습니다. 최소한 콘솔/토스트로 알려주세요.

Apply this diff:

   const handleCopy = () => {
     Copy(
       value,
       () => {
         setCopied(true);
         setTimeout(() => setCopied(false), 1500);
       },
-      undefined,
+      (err) => {
+        console.warn('[AddressCopy] copy failed', err);
+        // TODO: 필요 시 토스트/알림으로 사용자에게 안내
+      },
     );
   };

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 07d6602 and d8ef795.

📒 Files selected for processing (3)

• src/pages/auth/index.tsx (4 hunks)
• src/shared/components/button/AddressCopy.tsx (3 hunks)
• src/shared/components/container/Card.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

src/pages/auth/index.tsx (1)

src/pages/auth/components/LoginButton.tsx (1)

• LoginButton (33-67)

src/shared/components/button/AddressCopy.tsx (1)

src/shared/lib/utils.ts (1)

• cn (71-73)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-and-deploy

🔇 Additional comments (3)

src/shared/components/button/AddressCopy.tsx (3)

9-9: 컨테이너 overflow-hidden 추가는 적절합니다

둥근 모서리에서 내용 넘침 잘림 처리에 유효합니다. 스타일 변경은 문제 없어 보입니다.

---

55-55: w-full 전환 영향 범위 점검

고정 폭에서 w-full로 바뀌면서 부모 레이아웃에 따라 줄바꿈/축약 폭이 달라집니다. 사용처에서 의도대로 동작하는지 확인 부탁드립니다.

---

23-28: API 변경 호환성 검증 결과: 기존 호출부 없음 - 추가 검증 필요

AddressCopy 컴포넌트는 정의만 있고 현재 코드베이스에서 사용처가 없습니다 (import/usage 검색 결과 0). 따라서 label → value API 변경으로 인한 기존 호출부의 호환성 문제는 발생하지 않습니다.

그러나 빈 문자열 처리에 대한 방어 로직은 여전히 권장됩니다:

• value가 빈 문자열일 때 사용자 경험 개선 (disabled 상태 또는 폴백 텍스트)
• 예제 제안은 유효하나 필수 사항은 아님

확인 필요: 이 컴포넌트가 새로운 것인지, 또는 완전히 교체된 것인지 개발자 확인 권장.

[skyblue1232]

빠른 수정 감사합니다!!