[feat] 명함 공유 애니메이션 구현 #138
Conversation
JaeIn1
requested review from
semnil5202,
jangwonyoon,
youngju6143 and
evenway2025
as code owners
📝 WalkthroughWalkthrough이 PR은 공유 카드 기능과 관련된 다양한 React 컴포넌트, 배경, 아이콘, 컨테이너, 커스텀 훅, 그리고 모의 데이터 파일을 추가합니다. 새롭게 도입된 페이지 컴포넌트는 애니메이션 효과를 포함하는 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 사용자
participant P as Page 컴포넌트
participant ASW as AnimatedShareCardWrapper
participant SCC as ShareCardContentContainer
participant SCB as ShareClipboardContainer
participant Q as useCardQuery
U->>P: 페이지 요청
P->>ASW: AnimatedShareCardWrapper 렌더링
ASW->>SCC: ShareCardContentContainer 렌더링 및 애니메이션 시작
SCC->>Q: 카드 데이터 요청
Q-->>SCC: CARD_MOCK 반환
ASW->>SCB: isAnimating 상태 전달
SCB-->>U: 클립보드 UI 렌더링 (버튼 표시)
Suggested reviewers
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (22)
src/features/share/mocks/index.ts (2)
12-12: 중복된 태그를 제거하세요.태그 배열에 'React', 'Typescript', 'Next'가 중복으로 포함되어 있습니다. 이는 사용자 인터페이스에서 중복 표시될 수 있으며, 실제 데이터를 모방하는 목적이 아니라면 제거하는 것이 좋습니다.
- tags: ['React', 'Typescript', 'Next', 'React', 'Typescript', 'Next'], + tags: ['React', 'Typescript', 'Next'],
3-20: 타입 정의를 추가하세요.
CARD_MOCK객체에 타입 정의가 없습니다. 타입스크립트 프로젝트에서는 명시적인 타입 정의를 통해 타입 안전성을 확보하는 것이 좋습니다.+interface CardMockType { + id: number; + type: JopType; + profileImg: string; + name: string; + organization: string; + job: string; + introduction: string; + tags: string[]; + project: { + imageUrl: string; + footerTitle: string; + title: string; + description: string; + }; +} -export const CARD_MOCK = { +export const CARD_MOCK: CardMockType = { id: 1, type: 'designer' as JopType, // 나머지 속성들...src/app/(share)/card-share/page.tsx (1)
3-9: 메타데이터를 추가하세요.SEO와 접근성을 위해 페이지에 제목, 설명 등의 메타데이터를 추가하는 것이 좋습니다. Next.js에서는
metadata객체나generateMetadata함수를 사용할 수 있습니다.+export const metadata = { + title: '명함 공유 | Took', + description: '명함을 공유하고 연결해보세요.', +}; function Page() { return ( <div className="relative mx-auto h-dvh w-full max-w-[600px] justify-center"> <AnimatedShareCardWrapper /> </div> ); }src/features/share/icons/DesignerIcon.tsx (2)
3-14: 아이콘 컴포넌트 접근성 개선이 필요합니다.SVG 아이콘에 접근성 속성(aria-* 속성)이 없습니다. 스크린 리더와 같은 보조 기술을 사용하는 사용자를 위해 적절한 접근성 속성을 추가하세요.
export const DesignerIcon = (props: SVGProps<SVGSVGElement>) => { return ( <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" + aria-hidden="true" + role="img" {...props} > <path fillRule="evenodd" clipRule="evenodd" d="M4.51027 6.18323C4.37595 6.11291 4.37595 5.88709 4.51027 5.81677C5.06805 5.52474 5.52537 5.06692 5.81685 4.50873C5.88718 4.37404 6.11409 4.37404 6.18442 4.50873C6.47589 5.06692 6.93322 5.52473 7.49099 5.81677C7.62531 5.88709 7.62531 6.11291 7.49099 6.18323C6.93322 6.47526 6.47589 6.93308 6.18442 7.49127C6.11409 7.62596 5.88718 7.62596 5.81685 7.49127C5.52537 6.93308 5.06805 6.47526 4.51027 6.18323ZM6.18442 10.3421C6.11409 10.2074 5.88718 10.2074 5.81684 10.3421C5.30232 11.3274 4.27102 12 3.08266 12C1.38016 12 0 10.6196 0 8.91669C0 7.72909 0.671287 6.69831 1.65504 6.18324C1.78936 6.11291 1.78936 5.88709 1.65504 5.81676C0.671287 5.30169 0 4.27091 0 3.08331C0 1.38045 1.38016 0 3.08266 0C4.27102 0 5.30232 0.672565 5.81684 1.65789C5.88718 1.79258 6.11409 1.79258 6.18442 1.65789C6.69894 0.672565 7.73024 0 8.9186 0C10.6211 0 12.0013 1.38045 12.0013 3.08331C12.0013 4.27091 11.33 5.3017 10.3462 5.81676C10.2119 5.88709 10.2119 6.11292 10.3462 6.18324C11.33 6.69831 12.0013 7.72909 12.0013 8.91669C12.0013 10.6196 10.6211 12 8.9186 12C7.73024 12 6.69894 11.3274 6.18442 10.3421Z" fill="white" /> </svg> ); };
10-10: 아이콘 색상을 동적으로 설정할 수 있게 개선하세요.현재 아이콘 색상이
white로 하드코딩되어 있어, 다양한 배경에서 사용하기 어렵습니다. props를 통해 색상을 받아 적용할 수 있도록 개선하세요.-export const DesignerIcon = (props: SVGProps<SVGSVGElement>) => { +export const DesignerIcon = ({ fill = "white", ...props }: SVGProps<SVGSVGElement> & { fill?: string }) => { return ( <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}> <path fillRule="evenodd" clipRule="evenodd" d="M4.51027 6.18323C4.37595 6.11291 4.37595 5.88709 4.51027 5.81677C5.06805 5.52474 5.52537 5.06692 5.81685 4.50873C5.88718 4.37404 6.11409 4.37404 6.18442 4.50873C6.47589 5.06692 6.93322 5.52473 7.49099 5.81677C7.62531 5.88709 7.62531 6.11291 7.49099 6.18323C6.93322 6.47526 6.47589 6.93308 6.18442 7.49127C6.11409 7.62596 5.88718 7.62596 5.81685 7.49127C5.52537 6.93308 5.06805 6.47526 4.51027 6.18323ZM6.18442 10.3421C6.11409 10.2074 5.88718 10.2074 5.81684 10.3421C5.30232 11.3274 4.27102 12 3.08266 12C1.38016 12 0 10.6196 0 8.91669C0 7.72909 0.671287 6.69831 1.65504 6.18324C1.78936 6.11291 1.78936 5.88709 1.65504 5.81676C0.671287 5.30169 0 4.27091 0 3.08331C0 1.38045 1.38016 0 3.08266 0C4.27102 0 5.30232 0.672565 5.81684 1.65789C5.88718 1.79258 6.11409 1.79258 6.18442 1.65789C6.69894 0.672565 7.73024 0 8.9186 0C10.6211 0 12.0013 1.38045 12.0013 3.08331C12.0013 4.27091 11.33 5.3017 10.3462 5.81676C10.2119 5.88709 10.2119 6.11292 10.3462 6.18324C11.33 6.69831 12.0013 7.72909 12.0013 8.91669C12.0013 10.6196 10.6211 12 8.9186 12C7.73024 12 6.69894 11.3274 6.18442 10.3421Z" - fill="white" + fill={fill} /> </svg> ); };src/features/share/container/ShareCardContentContainer.tsx (2)
14-32: 컴포넌트 성능 최적화가 필요합니다.렌더링 최적화를 위해 메모이제이션을 적용하는 것이 좋습니다. 특히 데이터가 자주 변경되지 않는 경우
React.memo를 사용하여 불필요한 리렌더링을 방지할 수 있습니다.+import React from 'react'; import { WrappedCard, // 다른 import들... } from '../components/ShareCard'; import { useCardQuery } from '../hooks/queries/useCardQuery'; -export const ShareCardContentContainer = () => { +export const ShareCardContentContainer = React.memo(() => { const { data } = useCardQuery(); return ( <WrappedCard cardType={data.type} style={{ marginBottom: '20px' }}> {/* 컴포넌트 내용 */} </WrappedCard> ); -}; +}); + +ShareCardContentContainer.displayName = 'ShareCardContentContainer';
18-18: 인라인 스타일 대신 className 사용을 권장합니다.인라인 스타일(
style={{ marginBottom: '20px' }}) 대신 Tailwind CSS 클래스를 사용하는 것이 일관성 있는 스타일링을 위해 권장됩니다.- <WrappedCard cardType={data.type} style={{ marginBottom: '20px' }}> + <WrappedCard cardType={data.type} className="mb-5">src/features/share/container/ShareClipboardContainer.tsx (1)
16-18: 접근성을 위한 button 요소 개선이 필요합니다.현재 버튼에는 클릭 이벤트나 접근성을 위한 속성이 없습니다. 명확한 의도와 기능이 필요합니다.
다음과 같이 접근성 속성과 클릭 이벤트를 추가하세요:
- <button className="flex h-[40px] w-[252px] items-center justify-center gap-1 rounded-full bg-opacity-purple-30"> + <button + className="flex h-[40px] w-[252px] items-center justify-center gap-1 rounded-full bg-opacity-purple-30" + onClick={() => {/* 필요한 동작 구현 */}} + aria-label="명함 세부정보 열람" + type="button" + > <Typography variant="body-4">명함을 택해 세부정보를 열람해보세요</Typography> </button>src/features/share/components/ShareCardTag.tsx (1)
25-36: 컴포넌트 구현이 잘 되었지만 paddingTop이 누락되었습니다.컴포넌트의 전반적인 구현은 좋지만,
paddingBottom만 설정되어 있고paddingTop이 누락되어 있어 태그의 상하 패딩이 불균형할 수 있습니다.다음과 같이 패딩을 균형있게 적용하세요:
- className={cn(cardTagVariants({ tagType }), spacingStyles({ paddingX: 'sm', paddingBottom: 'xs' }), className)} + className={cn(cardTagVariants({ tagType }), spacingStyles({ paddingX: 'sm', paddingY: 'xs' }), className)}src/features/share/components/background/DeveloperCardBackground.tsx (2)
8-9: 애니메이션 관련 주석 코드 구현 필요현재 애니메이션 상태(
isAnimating)와 관련된 코드가 주석 처리되어 있습니다. 이 PR의 목적이 명함 공유 애니메이션 구현이므로, 이 부분을 구현하거나 주석을 제거하는 것이 좋겠습니다.- {/* 애니메이션 중일 때 회색 배경 추가 */} - {/* {isAnimating && <div className="absolute z-0 h-full w-full rounded-2xl bg-gray-200"></div>} */} + {isAnimating && <div className="absolute z-0 h-full w-full rounded-2xl bg-gray-200"></div>} - {/* className={isAnimating ? 'opacity-0' : 'opacity-100'} */} + <div className={isAnimating ? 'opacity-0' : 'opacity-100'}>Also applies to: 13-13
41-41: 빈 foreignObject 요소
foreignObject요소가 사용되고 있지만 내부에 콘텐츠가 없습니다. 이 요소의 목적이 무엇인지 확인하고, 필요하지 않다면 제거하는 것이 좋겠습니다.src/features/share/components/background/DesignerCardBackground.tsx (2)
8-9: 애니메이션 관련 주석 코드 구현 필요현재 애니메이션 상태(
isAnimating)와 관련된 코드가 주석 처리되어 있습니다. 이 PR의 목적이 명함 공유 애니메이션 구현이므로, 이 부분을 구현하거나 주석을 제거하는 것이 좋겠습니다. DeveloperCardBackground와 일관성 있게 처리해주세요.- {/* 애니메이션 중일 때 회색 배경 추가 */} - {/* {isAnimating && <div className="absolute z-0 h-full w-full rounded-2xl bg-gray-200"></div>} */} + {isAnimating && <div className="absolute z-0 h-full w-full rounded-2xl bg-gray-200"></div>} - {/* 애니메이션 중에는 SVG 숨기기 */} + <div className={isAnimating ? 'opacity-0' : 'opacity-100'}>Also applies to: 13-14
41-41: 빈 foreignObject 요소
foreignObject요소가 사용되고 있지만 내부에 콘텐츠가 없습니다. 이 요소의 목적이 무엇인지 확인하고, 필요하지 않다면 제거하는 것이 좋겠습니다.src/features/share/container/AnimatedShareCardWrapper.tsx (2)
37-52: 배경 요소의 성능 최적화 고려애니메이션 중에만 보이는 여러 배경 요소들이 있습니다. 현재 구현은 깔끔하지만, 이러한 요소들이 렌더링 성능에 영향을 줄 수 있습니다. 가능하다면 이러한 요소들을 CSS 변수나 단일 컴포넌트로 최적화하는 것을 고려해보세요.
66-68: 컴포넌트 프로퍼티 전달 필요현재
ShareCardContentContainer에 애니메이션 상태isAnimating를 전달하지 않고 있습니다.ShareClipboardContainer에는 전달하고 있는데, 일관성을 위해ShareCardContentContainer에도 전달하는 것을 고려해보세요. 이를 통해 DeveloperCardBackground와 DesignerCardBackground의 주석 처리된 애니메이션 관련 코드를 활성화할 수 있습니다.- <ShareCardContentContainer /> + <ShareCardContentContainer isAnimating={isAnimating} />src/features/share/components/background/ShareBarckground.tsx (1)
67-67: className 순서 수정 필요절대 위치(absolute) 클래스가 배경색과 backdrop-blur 뒤에 있습니다. 클래스 순서를 더 읽기 쉽게 정리하는 것이 좋겠습니다.
- <div className="bg-[rgba(255,255,255, 0.1)] absolute h-full w-full backdrop-blur-[60px]" /> + <div className="absolute h-full w-full bg-[rgba(255,255,255, 0.1)] backdrop-blur-[60px]" />src/features/share/components/ShareCard.tsx (6)
41-48: 컴포넌트 이름과 displayName이 일치하지 않습니다.ShareCardAvatar 컴포넌트의 displayName이 'CardAvatar'로 설정되어 있습니다. 컴포넌트 이름과 일치하도록 'ShareCardAvatar'로 변경하는 것이 좋습니다.
-ShareCardAvatar.displayName = 'CardAvatar'; +ShareCardAvatar.displayName = 'ShareCardAvatar';
120-146: 이미지 없는 경우에 대한 처리가 필요합니다.ShareCardFooter 컴포넌트에서 imageUrl이 빈 문자열일 때에도 Image 컴포넌트가 렌더링됩니다. 이미지가 없는 경우 대체 UI를 표시하거나 이미지 컴포넌트를 조건부로 렌더링하는 것이 좋습니다.
<div className="max-h-[60px] min-h-[60px] min-w-[60px] max-w-[60px] overflow-hidden rounded-md bg-white opacity-20"> - <Image src={imageUrl} alt="프로젝트 썸네일" width={60} height={60} style={{ objectFit: 'cover' }} /> + {imageUrl ? ( + <Image src={imageUrl} alt="프로젝트 썸네일" width={60} height={60} style={{ objectFit: 'cover' }} /> + ) : ( + <div className="h-full w-full bg-gray-200" /> + )} </div>
4-4: 타입 이름에 오타가 있습니다.
JopType이라는 타입 이름에 오타가 있는 것 같습니다. 올바른 이름은JobType이 되어야 합니다.-import { JopType } from '@/features/home/types'; +import { JobType } from '@/features/home/types';그리고 파일 내의 모든
JopType사용 부분도 함께 수정해야 합니다:- cardType: JopType; + cardType: JobType;
102-109: key 값 개선이 필요합니다.태그를 렌더링할 때 현재
${tag}-${index}를 key로 사용하고 있는데, 이는 태그 내용이 바뀌면 React가 DOM 요소를 효율적으로 업데이트하지 못할 수 있습니다. 가능하다면 고유한 ID를 사용하거나, 태그 내용만으로 충분히 고유하다면 index 없이 tag만 key로 사용하는 것이 좋습니다.- <ShareCardTag key={`${tag}-${index}`} tagType={tagType}> + <ShareCardTag key={tag} tagType={tagType}>만약 태그 내용이 중복될 수 있다면 다음과 같이 변경할 수 있습니다:
- <ShareCardTag key={`${tag}-${index}`} tagType={tagType}> + <ShareCardTag key={index} tagType={tagType}>
95-96: 타입 정의 개선이 필요합니다.
CardTagsProps와HTMLAttributes<HTMLDivElement>를 합친 타입을 사용하고 있으나, props 구조분해할당에서...rest에 타입이 명확하게 지정되지 않아 TypeScript의 타입 안전성 이점을 완전히 활용하지 못합니다.-export const ShareCardTags = ({ tags, tagType, ...rest }: CardTagsProps & HTMLAttributes<HTMLDivElement>) => { +type ShareCardTagsProps = CardTagsProps & HTMLAttributes<HTMLDivElement>; + +export const ShareCardTags = ({ tags, tagType, ...rest }: ShareCardTagsProps) => {이 방식은 다른 컴포넌트들에도 동일하게 적용될 수 있습니다.
125-125: 접근성 개선이 필요합니다.이미지에
alt속성이 "프로젝트 썸네일"로 고정되어 있습니다. 화면 읽기 프로그램 사용자를 위해 더 구체적인 설명을 제공하는 것이 좋습니다. 프로젝트 제목과 연결하여 더 의미 있는 alt 텍스트를 생성할 수 있습니다.- <Image src={imageUrl} alt="프로젝트 썸네일" width={60} height={60} style={{ objectFit: 'cover' }} /> + <Image src={imageUrl} alt={`${title || '프로젝트'} 썸네일`} width={60} height={60} style={{ objectFit: 'cover' }} />
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
src/app/(share)/card-share/page.tsx(1 hunks)src/features/share/components/ShareCard.tsx(1 hunks)src/features/share/components/ShareCardTag.tsx(1 hunks)src/features/share/components/background/DesignerCardBackground.tsx(1 hunks)src/features/share/components/background/DeveloperCardBackground.tsx(1 hunks)src/features/share/components/background/ShareBarckground.tsx(1 hunks)src/features/share/container/AnimatedShareCardWrapper.tsx(1 hunks)src/features/share/container/ShareCardContentContainer.tsx(1 hunks)src/features/share/container/ShareClipboardContainer.tsx(1 hunks)src/features/share/hooks/queries/useCardQuery.ts(1 hunks)src/features/share/icons/DesignerIcon.tsx(1 hunks)src/features/share/icons/DeveloperIcon.tsx(1 hunks)src/features/share/mocks/index.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (3)
src/features/share/container/ShareCardContentContainer.tsx (1)
src/features/share/components/ShareCard.tsx (7)
WrappedCard(22-33)ShareCardAvatar(41-47)ShareCardName(54-61)ShareCardJob(67-76)ShareCardDescription(78-88)ShareCardTags(95-111)ShareCardFooter(120-146)
src/features/share/container/AnimatedShareCardWrapper.tsx (2)
src/features/share/container/ShareCardContentContainer.tsx (1)
ShareCardContentContainer(14-32)src/features/share/container/ShareClipboardContainer.tsx (1)
ShareClipboardContainer(8-21)
src/features/share/hooks/queries/useCardQuery.ts (1)
src/features/share/mocks/index.ts (1)
CARD_MOCK(3-20)
🔇 Additional comments (11)
src/features/share/mocks/index.ts (1)
1-1:✅ Verification successful
import 이름에 오타가 있는지 확인하세요.
JopType이라는 이름이 의도적인 것인지 확인해주세요. 일반적으로 'Job'으로 사용되는 경우가 많습니다.
🏁 Script executed:
#!/bin/bash # JopType이 실제로 존재하는지 확인합니다 grep -r "export type JopType" --include="*.ts" --include="*.tsx" . grep -r "export enum JopType" --include="*.ts" --include="*.tsx" .Length of output: 220
검증 결과:
JopType이름이 의도한 대로 사용되고 있습니다.
src/features/home/types/index.ts파일에export type JopType = 'designer' | 'developer';로 선언되어 있는 것을 확인했습니다.- 따라서 현재 import 구문에 사용된
JopType에는 오타가 없으며, 별도의 수정이 필요하지 않습니다.src/app/(share)/card-share/page.tsx (1)
5-5:❓ Verification inconclusive
h-dvh에 대한 브라우저 호환성 고려하세요.
h-dvh속성은 비교적 최신 CSS 기능으로, 일부 오래된 브라우저에서는 지원되지 않을 수 있습니다. 폴백(fallback) 스타일이나 지원 확인을 고려하세요.
🌐 Web query:
Which browsers support the dvh CSS unit?💡 Result:
The
dvh(Dynamic Viewport Height) CSS unit is widely supported in modern browsers, with varying version requirements. Here's a breakdown of browser compatibility as of March 2025:Major Browser Support
- Firefox
- Fully supported from version 102 onward[2][7]
- Older versions (≤101) lack support[2]
- Chrome
- Available starting from version 109[2][7]
- Partial implementation in Chrome 108[7]
- Safari
- Supported since version 15.5 (both desktop and iOS)[2][3]
- Earlier iOS versions (≤15) lack support[1][2]
- Edge
- Full compatibility from version 108 onward[2]
- Opera
- Supported in version 94 and newer[2]
Mobile Browser Compatibility
- Chrome for Android: Supported from version 108 onward[2]
- Firefox for Android: Available in version 101 and later[2]
- Samsung Internet: Fully supported from version 21[2]
Key Considerations
Dynamic vs Static Units
dvhautomatically adjusts for browser UI elements like address bars, unlike traditionalvhunits[3][4]. This prevents layout shifts when scrolling on mobile devices[4].Legacy Browser Limitations
Safari versions older than 15.5 and Chrome versions below 108 lack support[2][3]. Approximately 75% of global browsers currently support these viewport units[2].Firefox Implementation
While Firefox supportsdvhin standard CSS usage, it doesn't yet support these units in the CSS Houdini Typed OM API[1]. This distinction explains some early confusion about Firefox's compatibility status[1].For projects requiring cross-browser consistency, consider using feature detection or progressive enhancement strategies when implementing dynamic viewport units.
Citations:
- 1: https://connect.mozilla.org/t5/ideas/support-for-new-css-units-dvh-and-svh/idi-p/28536
- 2: https://www.lambdatest.com/web-technologies/viewport-unit-variants
- 3: https://tailscan.com/blog/tailwind-css-dynamic-viewport-unit-classes
- 4: https://www.terluinwebdesign.nl/en/blog/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/
- 5: https://www.w3schools.com/cssref/css3_browsersupport.php
- 6: https://caniuse.com
- 7: https://web.dev/blog/viewport-units
주의: dvh 단위 브라우저 호환성 점검 요청
현재 코드(
src/app/(share)/card-share/page.tsx, 줄 5)의h-dvh사용은 최신 버전의 Chrome(109 이상), Firefox(102 이상), Safari(15.5 이상), Edge(108 이상) 등에서는 지원됩니다. 다만 대상 브라우저에 구버전 또는 호환성 이슈가 있는 환경이 포함된다면, 아래 사항을 고려해 주시기 바랍니다.
- 폴백 스타일 적용: 구버전 브라우저에서는
dvh를 지원하지 않을 수 있으므로, 기존의vh단위나 다른 안정적인 대체 방안을 함께 제공하는 방식으로 코드를 보완해 주세요.- Feature Detection: 사용자의 브라우저에서
dvh지원 여부를 동적으로 확인하고, 조건부 스타일 적용을 고려해 볼 수 있습니다.이 점들을 확인하여 대상 브라우저의 호환성이 확보되는지 재검토해 주시기 바랍니다.
src/features/share/icons/DeveloperIcon.tsx (1)
1-14: SVG 아이콘 구현이 잘 되었습니다.React 컴포넌트로 SVG 아이콘을 구현한 방식이 좋습니다. props를 SVG 요소에 전달하여 재사용성을 높인 점이 인상적입니다.
src/features/share/container/ShareClipboardContainer.tsx (1)
4-6: Props 타입 정의가 잘 되었습니다.명확한 타입 정의로 컴포넌트의 입력값을 잘 문서화했습니다.
src/features/share/components/ShareCardTag.tsx (1)
13-23: 스타일 변형 구현이 잘 되었습니다.class-variance-authority를 사용한 스타일 변형 구현이 깔끔합니다. 디자이너와 개발자 타입에 따라 다른 스타일을 적용하는 방식이 좋습니다.
src/features/share/components/background/DeveloperCardBackground.tsx (1)
5-64: 개발자 카드 배경 구현이 잘 되어 있습니다.SVG를 사용하여 시각적으로 매력적인 개발자 카드 배경을 구현했습니다. 코드는 깔끔하고 구성요소가 논리적으로 조직되어 있습니다.
src/features/share/components/background/DesignerCardBackground.tsx (1)
5-64: 디자이너 카드 배경 구현이 잘 되어 있습니다.개발자 카드와 마찬가지로 SVG를 활용하여 디자이너용 카드 배경을 잘 구현했습니다. 코드가 깔끔하고 명확합니다.
src/features/share/container/AnimatedShareCardWrapper.tsx (2)
11-73: 애니메이션 구현이 훌륭합니다!Framer Motion을 사용한 명함 애니메이션 구현이 매우 효과적입니다. 스프링 효과, 타이밍, 투명도 변화 등의 세부 사항이 잘 고려되어 있습니다.
7-8:⚠️ Potential issue파일 이름 오타 수정 필요
임포트하는 컴포넌트의 파일 이름에 오타가 있습니다:
ShareBarckground가 아닌ShareBackground가 올바른 이름입니다. 파일 이름을 수정하고 가져오기를 업데이트해야 합니다.-import { ShareBackground } from '../components/background/ShareBarckground'; +import { ShareBackground } from '../components/background/ShareBackground';Likely an incorrect or invalid review comment.
src/features/share/components/background/ShareBarckground.tsx (1)
1-72: 공유 배경 컴포넌트 구현이 훌륭합니다.SVG를 사용한 상단 및 하단 배경 요소와 전체 배경의 구현이 잘 되어 있습니다. 코드가 깔끔하고 구성이 논리적입니다.
src/features/share/components/ShareCard.tsx (1)
1-14: 컴포넌트 구성이 잘 되어 있습니다.컴포넌트 구조와 네이밍이 명확하고, 재사용성을 고려한 설계가 돋보입니다. 또한 코드가 체계적으로 구성되어 있어 유지보수가 용이해 보입니다.
| export const ShareCardContentContainer = () => { | ||
| const { data } = useCardQuery(); | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
데이터 로딩 및 오류 상태 처리가 필요합니다.
useCardQuery 훅에서 반환된 데이터에 대한 로딩 및 오류 상태 처리가 없습니다. 데이터가 로딩 중이거나 오류가 발생했을 때 사용자 경험을 개선하기 위한 처리를 추가하세요.
export const ShareCardContentContainer = () => {
- const { data } = useCardQuery();
+ const { data, isLoading, error } = useCardQuery();
+
+ if (isLoading) {
+ return <div className="flex justify-center items-center h-full">로딩 중...</div>;
+ }
+
+ if (error || !data) {
+ return <div className="flex justify-center items-center h-full">데이터를 불러오는 중 오류가 발생했습니다.</div>;
+ }
return (
<WrappedCard cardType={data.type} style={{ marginBottom: '20px' }}>
{/* 나머지 코드 */}
</WrappedCard>
);
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const ShareCardContentContainer = () => { | |
| const { data } = useCardQuery(); | |
| export const ShareCardContentContainer = () => { | |
| const { data, isLoading, error } = useCardQuery(); | |
| if (isLoading) { | |
| return <div className="flex justify-center items-center h-full">로딩 중...</div>; | |
| } | |
| if (error || !data) { | |
| return <div className="flex justify-center items-center h-full">데이터를 불러오는 중 오류가 발생했습니다.</div>; | |
| } | |
| return ( | |
| <WrappedCard cardType={data.type} style={{ marginBottom: '20px' }}> | |
| {/* 나머지 코드 */} | |
| </WrappedCard> | |
| ); | |
| }; |
| const _getCard = async () => { | ||
| const data = await client.get<MyCardDto>(`/api/card/my`); | ||
|
|
||
| return data; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
에러 처리 로직이 누락되었습니다.
API 호출 함수에 에러 처리 로직이 없습니다. API 요청 실패 시 적절하게 처리되지 않을 수 있습니다.
다음과 같이 에러 처리 로직을 추가하세요:
const _getCard = async () => {
- const data = await client.get<MyCardDto>(`/api/card/my`);
-
- return data;
+ try {
+ const data = await client.get<MyCardDto>(`/api/card/my`);
+ return data;
+ } catch (error) {
+ console.error('카드 정보를 가져오는데 실패했습니다:', error);
+ throw error;
+ }
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const _getCard = async () => { | |
| const data = await client.get<MyCardDto>(`/api/card/my`); | |
| return data; | |
| }; | |
| const _getCard = async () => { | |
| try { | |
| const data = await client.get<MyCardDto>(`/api/card/my`); | |
| return data; | |
| } catch (error) { | |
| console.error('카드 정보를 가져오는데 실패했습니다:', error); | |
| throw error; | |
| } | |
| }; |
| export const useCardQuery = () => { | ||
| const { data: _ } = useQuery({ | ||
| queryKey: [MY_CARD_QUERY_KEY], | ||
| queryFn: () => _getCard(), | ||
| }); | ||
|
|
||
| return { data: CARD_MOCK }; | ||
| }; |
There was a problem hiding this comment.
API 호출은 되지만 실제 데이터를 사용하지 않습니다.
현재 구현에서는 API를 호출하지만 그 결과를 사용하지 않고 목(mock) 데이터를 반환합니다. 이는 개발 과정에서는 유용할 수 있지만, 실제 API 통합을 위해서는 수정이 필요합니다.
다음과 같이 수정하여 실제 API 응답을 사용하도록 변경하세요:
export const useCardQuery = () => {
- const { data: _ } = useQuery({
+ const { data, isLoading, error } = useQuery({
queryKey: [MY_CARD_QUERY_KEY],
queryFn: () => _getCard(),
});
- return { data: CARD_MOCK };
+ // API 연결 전까지 목 데이터 사용
+ return {
+ data: data || CARD_MOCK,
+ isLoading,
+ error
+ };
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const useCardQuery = () => { | |
| const { data: _ } = useQuery({ | |
| queryKey: [MY_CARD_QUERY_KEY], | |
| queryFn: () => _getCard(), | |
| }); | |
| return { data: CARD_MOCK }; | |
| }; | |
| export const useCardQuery = () => { | |
| const { data, isLoading, error } = useQuery({ | |
| queryKey: [MY_CARD_QUERY_KEY], | |
| queryFn: () => _getCard(), | |
| }); | |
| // API 연결 전까지 목 데이터 사용 | |
| return { | |
| data: data || CARD_MOCK, | |
| isLoading, | |
| error | |
| }; | |
| }; |
| import { cva } from 'class-variance-authority'; | ||
| import { HTMLAttributes, PropsWithChildren } from 'react'; | ||
|
|
||
| import { JopType } from '@/features/home/types'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
타입 이름에 오타가 있습니다.
JopType은 JobType의 오타로 보입니다.
다음과 같이 수정하세요:
- import { JopType } from '@/features/home/types';
+ import { JobType } from '@/features/home/types';그리고 코드 내 모든 JopType 참조를 JobType으로 변경하세요.
🏁 Script executed:
#!/bin/bash
# 타입 정의와 사용 확인
echo "코드베이스에서 JopType과 JobType 정의 찾기"
rg "type (Jop|Job)Type" --type tsLength of output: 282
타입 이름 오타 수정 필요: JopType → JobType
src/features/share/components/ShareCardTag.tsx의 import 구문이 현재JopType을 사용하고 있는데, 이는 오타입니다.- 코드베이스 내에서
src/features/home/types/index.ts파일에export type JopType = 'designer' | 'developer';로 정의되어 있으며, 다른 파일에서는 올바른 이름인JobType이 사용되고 있습니다. - 따라서, 아래와 같이 해당 파일과 관련 모든 참조에서
JopType을JobType으로 통일해야 합니다:
- import { JopType } from '@/features/home/types';
+ import { JobType } from '@/features/home/types';모든 JopType 참조와 정의를 JobType으로 수정하여 코드의 일관성을 확보해 주세요.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { JopType } from '@/features/home/types'; | |
| import { JobType } from '@/features/home/types'; |
| export const ShareBackground = (props: HTMLAttributes<HTMLDivElement>) => { | ||
| const { className, ...restProps } = props; | ||
|
|
||
| return ( | ||
| <div {...restProps} className={cn('relative h-dvh w-full', className)}> | ||
| <div className="bg-[rgba(255,255,255, 0.1)] absolute h-full w-full backdrop-blur-[60px]" /> | ||
| <ShareTopSvg /> | ||
| <ShareBottomSvg /> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
파일 이름 수정 필요
현재 파일 이름은 ShareBarckground.tsx로 되어 있으나, 내보내는 컴포넌트 이름은 ShareBackground입니다. 파일 이름을 컴포넌트 이름과 일치하도록 ShareBackground.tsx로 수정해야 합니다.
|
|
||
| export const ShareTopSvg = () => { | ||
| return ( | ||
| <div className="pt-40px flex w-full items-center justify-center"> |
There was a problem hiding this comment.
클래스 이름 문법 수정 필요
"pt-40px"는 유효한 Tailwind 클래스가 아닙니다. 아마도 "pt-[40px]" 또는 Tailwind에서 지원하는 값(예: "pt-10")을 사용하려고 한 것 같습니다.
- <div className="pt-40px flex w-full items-center justify-center">
+ <div className="pt-[40px] flex w-full items-center justify-center">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="pt-40px flex w-full items-center justify-center"> | |
| <div className="pt-[40px] flex w-full items-center justify-center"> |
| export const ShareCardTags = ({ tags, tagType, ...rest }: CardTagsProps & HTMLAttributes<HTMLDivElement>) => { | ||
| let convertedTags = tags; | ||
|
|
||
| if (tags.length > 4) { | ||
| convertedTags = [...tags.slice(0, 3), `+ ${tags.length - 3}`]; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="mt-[44px] flex flex-wrap items-center gap-1" {...rest}> | ||
| {convertedTags.map((tag, index) => ( | ||
| <ShareCardTag key={`${tag}-${index}`} tagType={tagType}> | ||
| {tag} | ||
| </ShareCardTag> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
태그 개수 제한 로직에 오류가 있습니다.
태그가 4개 이상일 때의 처리 로직이 명확하지 않습니다. 현재 코드는 태그가 4개 초과일 때 3개만 표시하고 나머지를 "+n"으로 표시합니다. 주석이나 요구사항에 따라 최대 4개를 표시하려면 슬라이싱 범위를 수정해야 합니다.
if (tags.length > 4) {
- convertedTags = [...tags.slice(0, 3), `+ ${tags.length - 3}`];
+ convertedTags = [...tags.slice(0, 4), `+ ${tags.length - 4}`];
}또는 최대 3개 + 나머지 수를 표시하는 것이 의도적인 UI 디자인이라면, 변수명이나 주석을 추가하여 의도를 명확히 하는 것이 좋습니다.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const ShareCardTags = ({ tags, tagType, ...rest }: CardTagsProps & HTMLAttributes<HTMLDivElement>) => { | |
| let convertedTags = tags; | |
| if (tags.length > 4) { | |
| convertedTags = [...tags.slice(0, 3), `+ ${tags.length - 3}`]; | |
| } | |
| return ( | |
| <div className="mt-[44px] flex flex-wrap items-center gap-1" {...rest}> | |
| {convertedTags.map((tag, index) => ( | |
| <ShareCardTag key={`${tag}-${index}`} tagType={tagType}> | |
| {tag} | |
| </ShareCardTag> | |
| ))} | |
| </div> | |
| ); | |
| }; | |
| export const ShareCardTags = ({ tags, tagType, ...rest }: CardTagsProps & HTMLAttributes<HTMLDivElement>) => { | |
| let convertedTags = tags; | |
| if (tags.length > 4) { | |
| convertedTags = [...tags.slice(0, 4), `+ ${tags.length - 4}`]; | |
| } | |
| return ( | |
| <div className="mt-[44px] flex flex-wrap items-center gap-1" {...rest}> | |
| {convertedTags.map((tag, index) => ( | |
| <ShareCardTag key={`${tag}-${index}`} tagType={tagType}> | |
| {tag} | |
| </ShareCardTag> | |
| ))} | |
| </div> | |
| ); | |
| }; |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
src/features/share/container/AnimatedShareCardWrapper.tsx (4)
11-14: 컴포넌트 초기화 및 상태 관리가 잘 구현되었습니다.framer-motion의
useAnimation훅과 애니메이션 상태 추적을 위한isAnimating상태 변수가 적절히 사용되었습니다. 다만, 주석은 영어로 작성하여 코드 일관성을 유지하는 것이 좋습니다.- const [isAnimating, setIsAnimating] = useState(true); // 애니메이션 상태를 추적 + const [isAnimating, setIsAnimating] = useState(true); // Tracks animation state
15-35: 애니메이션 로직의 명확한 구현, 추가 개선 가능애니메이션 로직이
useEffect내에서 잘 구현되어 있지만, 애니메이션 속성과 설정 값을 상수로 추출하면 가독성과 유지보수성이 향상될 것입니다.+ // Animation configuration constants + const INITIAL_ANIMATION_STATE = { + y: -350, + x: 0, + rotate: 10, + opacity: 0, + }; + + const FINAL_ANIMATION_STATE = { + y: 0, + x: 0, + rotate: 0, + scale: 1, + opacity: 1, + transition: { + type: 'spring', + damping: 14, + stiffness: 70, + duration: 2, + }, + }; useEffect(() => { // 페이지 로드 시 애니메이션 시작 controls .start({ - y: 0, // y축 최종 위치: 원래 위치로 이동 (중앙) - x: 0, // x축 최종 위치: 원래 위치로 이동 (중앙) - rotate: 0, // 회전 최종 상태: 기울어짐 없이 수평으로 - scale: 1, // 크기 최종 상태: 원래 크기 (100%) - opacity: 1, // 투명도 최종 상태: 완전히 불투명 - transition: { - type: 'spring', // 애니메이션 유형: 스프링(탄성) 효과 - damping: 14, // 감쇠: 낮을수록 더 많이 튕김 (진동 감소 속도) - stiffness: 70, // 강성: 스프링의 강도, 높을수록 빠르게 목표에 도달 - duration: 2, // 애니메이션 총 지속 시간: 2초 - }, + ...FINAL_ANIMATION_STATE }) .then(() => { // 애니메이션이 완료되면 상태 업데이트 setIsAnimating(false); }); }, [controls]);
37-53: 오버레이 및 그라데이션 효과의 적절한 구현애니메이션 중에만 표시되는 배경 요소들이 잘 구현되어 있습니다. z-index 값을 상수화하고 의미 있는 이름을 부여하면 더 명확할 것입니다.
+ // z-index constants for better readability + const Z_INDEX_BACKGROUND = -10; + const Z_INDEX_OVERLAY = -5; return ( <div className="relative h-full w-full"> - <ShareBackground className="absolute z-[-10]" /> + <ShareBackground className={`absolute z-[${Z_INDEX_BACKGROUND}]`} /> {isAnimating && ( <> {/* 전체 배경 오버레이 */} - <div className="absolute inset-0 z-[-5] bg-white opacity-5 transition-opacity duration-500" /> + <div className={`absolute inset-0 z-[${Z_INDEX_OVERLAY}] bg-white opacity-5 transition-opacity duration-500`} /> {/* 왼쪽 그라데이션 */} - <div className="absolute left-0 top-0 z-[-5] h-full w-[18%] bg-gradient-to-r from-white to-transparent opacity-10 transition-opacity duration-500" /> + <div className={`absolute left-0 top-0 z-[${Z_INDEX_OVERLAY}] h-full w-[18%] bg-gradient-to-r from-white to-transparent opacity-10 transition-opacity duration-500`} /> {/* 오른쪽 그라데이션 */} - <div className="absolute right-0 top-0 z-[-5] h-full w-[18%] bg-gradient-to-l from-white to-transparent opacity-10 transition-opacity duration-500" /> + <div className={`absolute right-0 top-0 z-[${Z_INDEX_OVERLAY}] h-full w-[18%] bg-gradient-to-l from-white to-transparent opacity-10 transition-opacity duration-500`} /> </> )}
54-72: motion.div 설정 및 컴포넌트 구조가 잘 구현되었습니다.motion.div의 초기 상태와 애니메이션 제어가 적절히 설정되어 있으며, 하위 컴포넌트들이 논리적으로 배치되어 있습니다. 이전 코멘트에서 제안한 상수 적용시:
<motion.div className="flex h-full w-full flex-col items-center justify-center" - initial={{ - y: -350, // 더 높은 위치에서 시작 - x: 0, - rotate: 10, // 비스듬하게 기울어진 상태에서 시작 - opacity: 0, - }} + initial={INITIAL_ANIMATION_STATE} animate={controls} >src/features/share/components/background/ShareBackground.tsx (2)
5-30: ShareTopSvg 컴포넌트가 잘 구현되어 있지만 개선 가능합니다.SVG 경로 데이터가 인라인으로 포함되어 있어 코드 가독성이 저하될 수 있습니다. SVG 경로 데이터를 별도의 상수로, 또는 별도의 파일로 분리하는 것이 유지보수에 더 좋을 수 있습니다.
+ // Constants for SVG path data + const TOP_SVG_PATH_1 = { + d: "M167.019 103.077C227.057 66.7077 291.654 59.4617 316.016 99.678C353.384 161.365 307.715 236.556 247.678 272.925C187.64 309.295 94.3037 320.473 69.9416 280.257C45.5795 240.041 106.982 139.446 167.019 103.077Z", + fill: "#5A23FF", + opacity: "0.7", + fillOpacity: "1" + }; + + const TOP_SVG_PATH_2 = { + d: "M53.8871 173.59C25.495 115.518 23.4804 56.0203 61.1553 37.6006C118.944 9.34721 161.928 48.8149 190.32 106.887C218.712 164.959 181.854 266.073 144.179 284.493C106.504 302.913 82.2792 231.662 53.8871 173.59Z", + fill: "#0073FF", + opacity: "0.7", + fillOpacity: "1" + }; export const ShareTopSvg = () => { return ( <div className="flex w-full items-center justify-center pt-[40px]"> <svg className="mt-[54px] h-auto w-full max-w-[340px] md:max-w-[420px]" viewBox="0 0 340 354" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" > - <path - opacity="0.7" - d="M167.019 103.077C227.057 66.7077 291.654 59.4617 316.016 99.678C353.384 161.365 307.715 236.556 247.678 272.925C187.64 309.295 94.3037 320.473 69.9416 280.257C45.5795 240.041 106.982 139.446 167.019 103.077Z" - fill="#5A23FF" - fillOpacity="1" - /> - <path - opacity="0.7" - d="M53.8871 173.59C25.495 115.518 23.4804 56.0203 61.1553 37.6006C118.944 9.34721 161.928 48.8149 190.32 106.887C218.712 164.959 181.854 266.073 144.179 284.493C106.504 302.913 82.2792 231.662 53.8871 173.59Z" - fill="#0073FF" - fillOpacity="1" - /> + <path {...TOP_SVG_PATH_1} /> + <path {...TOP_SVG_PATH_2} /> </svg> </div> ); };
32-60: ShareBottomSvg 컴포넌트의 구현이 적절합니다.그라데이션 정의와 SVG 구성이 잘 되어 있습니다. 하지만 여기서도 선형 그라데이션의 설정을 별도의 상수로 추출하는 것이 코드 가독성 측면에서 더 좋을 수 있습니다.
+ // Constants for gradient configuration + const BOTTOM_GRADIENT = { + id: "paint0_linear_2245_53621", + x1: "180", + y1: "41.2234", + x2: "180", + y2: "319", + stops: [ + { offset: "0", color: "#2370FF", opacity: "0" }, + { offset: "1", color: "#7023FF", opacity: "1" } + ] + }; export const ShareBottomSvg = () => { return ( <div className="absolute bottom-0 left-0 right-0 w-full"> <svg width="100%" height="290" preserveAspectRatio="none" viewBox="0 0 360 319" fill="none" xmlns="http://www.w3.org/2000/svg" > - <rect width="360" height="319" fill="url(#paint0_linear_2245_53621)" fillOpacity="0.5" /> + <rect width="360" height="319" fill={`url(#${BOTTOM_GRADIENT.id})`} fillOpacity="0.5" /> <defs> - <linearGradient - id="paint0_linear_2245_53621" - x1="180" - y1="41.2234" - x2="180" - y2="319" - gradientUnits="userSpaceOnUse" - > - <stop stopColor="#2370FF" stopOpacity="0" /> - <stop offset="1" stopColor="#7023FF" /> - </linearGradient> + <linearGradient + id={BOTTOM_GRADIENT.id} + x1={BOTTOM_GRADIENT.x1} + y1={BOTTOM_GRADIENT.y1} + x2={BOTTOM_GRADIENT.x2} + y2={BOTTOM_GRADIENT.y2} + gradientUnits="userSpaceOnUse" + > + {BOTTOM_GRADIENT.stops.map((stop, index) => ( + <stop + key={index} + offset={stop.offset} + stopColor={stop.color} + stopOpacity={stop.opacity} + /> + ))} + </linearGradient> </defs> </svg> </div> ); };
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/features/share/components/background/ShareBackground.tsx(1 hunks)src/features/share/container/AnimatedShareCardWrapper.tsx(1 hunks)
🔇 Additional comments (4)
src/features/share/container/AnimatedShareCardWrapper.tsx (2)
1-10: 모듈 import 문의 구성이 적절합니다.클라이언트 컴포넌트 선언과 필요한 라이브러리 및 컴포넌트가 잘 임포트되어 있습니다.
73-76: 컴포넌트 내보내기 구현이 적절합니다.컴포넌트가 기본 내보내기로 올바르게 구현되어 있습니다.
src/features/share/components/background/ShareBackground.tsx (2)
1-4: 필요한 모듈 import가 잘 되어 있습니다.필요한 React의 HTMLAttributes 타입과 유틸리티 함수가 적절히 임포트되어 있습니다.
62-72: ShareBackground 컴포넌트의 구현이 깔끔합니다.props 구조 분해와 컴포넌트 조합이 잘 이루어져 있습니다. 하지만 backdrop-blur 값이 높은 편으로(60px), 성능 최적화를 위해 타겟 디바이스에서 테스트해보는 것을 권장합니다.
고급 시각적 효과인
backdrop-blur-[60px]는 일부 모바일 기기에서 성능 저하를 일으킬 수 있습니다. 타겟 디바이스에서 성능을 테스트하고, 필요하다면 값을 낮추거나 대체 방법을 고려해보세요.
* [feat] 명함 공유 애니메이션 구현 (#138) * ✨feat : card-share 페이지 생성 * ✨feat : 명함 공유 카드 배경 구현 * ✨feat : 명함 공유 카드 구현 * ✨feat : 명함 공유 카드 애니메이션 구현 * ✨feat : 명함 공유 카드 구현 * ✨feat : 명함 공유 카드 임시 데이터 생성 * ✨feat : 명함 공유 카드 직군별 svg 추가 * ♻️ refactor : 카드 회색 배경 제거 * ♻️ refactor : 배경 blur 수정 * ♻️ refactor : 카드 속도 , blur 속성값 수정 * ♻️ refactor : 파일명 수정 * [feat] 에러 핸들링 구현 (#131) * ✨feat : react-error-boundary 설치 * ✨feat : 스켈레톤 공통 컴포넌트 생성 * ✨feat error boundary provider 생성 * ✨feat : 에러 처리 임시 구현중 * ✨feat : 임시 에러 상태별 UI 디자인 * ✨feat : 에러 핸들링 임시 구현중 * refactor : 불필요한 파일 제거 * feat : 에러 상태별 관리 함수 생성 * feat : errorboundary 제거 및 toast 임시 적용 * refactor : middleware , route.ts 임시 수정 * ♻️ refactor : 로딩 화면 css 임시 수정 * ♻️ refactor : empty 컴포넌트 텍스트 내용 수정 * ♻️ refactor : 불필요한 css 제거 * ♻️ refactor : 명함 상세 탭 예외 케이스 UI 수정 * ♻️ refactor : 쿼리 스트링 타입 수정 * ♻️ refactor : error 타입 예외처리 수정 * ✨feat : 명함 타입 쿼리 스트링으로 구별 * [feat] 명함 상세 페이지 API 연동 (#140) * ♻️ refactor : 명함 상세 페이지 api 응답 임시 코드 제거 * ✨feat : 스크롤 감지 함수 추가 * ♻️ refactor : appbar isBlurred props 추가 * ✨feat : 한줄 메모 기능 추가 * ✨feat : 명함 상세 타입 수정 * ✨feat : 바텀 시트 공통 컴포넌트로 분리 * ✨feat : 명함 상세 타입 추가 및 헤더 blur 처리 추가 * ♻️ refactor : 바텀 시트 간격 수정 * ♻️ refactor : 명함 상세 임시 데이터 수정
* [feat] 명함 공유 애니메이션 구현 (#138) * ✨feat : card-share 페이지 생성 * ✨feat : 명함 공유 카드 배경 구현 * ✨feat : 명함 공유 카드 구현 * ✨feat : 명함 공유 카드 애니메이션 구현 * ✨feat : 명함 공유 카드 구현 * ✨feat : 명함 공유 카드 임시 데이터 생성 * ✨feat : 명함 공유 카드 직군별 svg 추가 * ♻️ refactor : 카드 회색 배경 제거 * ♻️ refactor : 배경 blur 수정 * ♻️ refactor : 카드 속도 , blur 속성값 수정 * ♻️ refactor : 파일명 수정 * [feat] 에러 핸들링 구현 (#131) * ✨feat : react-error-boundary 설치 * ✨feat : 스켈레톤 공통 컴포넌트 생성 * ✨feat error boundary provider 생성 * ✨feat : 에러 처리 임시 구현중 * ✨feat : 임시 에러 상태별 UI 디자인 * ✨feat : 에러 핸들링 임시 구현중 * refactor : 불필요한 파일 제거 * feat : 에러 상태별 관리 함수 생성 * feat : errorboundary 제거 및 toast 임시 적용 * refactor : middleware , route.ts 임시 수정 * ♻️ refactor : 로딩 화면 css 임시 수정 * ♻️ refactor : empty 컴포넌트 텍스트 내용 수정 * ♻️ refactor : 불필요한 css 제거 * ♻️ refactor : 명함 상세 탭 예외 케이스 UI 수정 * ♻️ refactor : 쿼리 스트링 타입 수정 * ♻️ refactor : error 타입 예외처리 수정 * ✨feat : 명함 타입 쿼리 스트링으로 구별 * [feat] 명함 상세 페이지 API 연동 (#140) * ♻️ refactor : 명함 상세 페이지 api 응답 임시 코드 제거 * ✨feat : 스크롤 감지 함수 추가 * ♻️ refactor : appbar isBlurred props 추가 * ✨feat : 한줄 메모 기능 추가 * ✨feat : 명함 상세 타입 수정 * ✨feat : 바텀 시트 공통 컴포넌트로 분리 * ✨feat : 명함 상세 타입 추가 및 헤더 blur 처리 추가 * ♻️ refactor : 바텀 시트 간격 수정 * ♻️ refactor : 명함 상세 임시 데이터 수정 * ♻️ refactor : 임시 데이터 설정 및 토스트 error svg 경로 수정 (#147)
📌 개요
명함 공유 애니메이션 구현
📋 변경사항
화면
| 기능 | 스크린샷 |
2025-03-29.4.29.39.mov
전달사항
✅ 체크사항
Summary by CodeRabbit