fix: 내 인증샷에 이모지가 있는데 출력되지 않는 현상

[jihun32]

🔗 관련 이슈

• Close fix: 내 인증샷에 이모지가 있는데 출력되지 않는 현상 #185

📙 작업 내역

• 내 인증샷 이모지 있을 때 UI 구현

🎨 스크린샷 또는 시연 영상 (선택)

Simulator.Screen.Recording.-.iPhone.17.Pro.26.-.2026-02-25.at.12.30.19.mov

[clxxrlove]

@coderabbitai summary

[coderabbitai]

ℹ️ Recent review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2926c73 and ebde71d.

⛔ Files ignored due to path filters (1)

• Projects/Shared/DesignSystem/Resources/Image/ImageAssets.xcassets/Shape/your_emoji.imageset/your_emoji.svg is excluded by !**/*.svg

📒 Files selected for processing (7)

• Projects/Feature/GoalDetail/Interface/Sources/GoalDetailReducer.swift
• Projects/Feature/GoalDetail/Sources/Detail/FlyingReactionSupport.swift
• Projects/Feature/GoalDetail/Sources/Detail/GoalDetailView.swift
• Projects/Feature/GoalDetail/Sources/Detail/ReactionBarView.swift
• Projects/Shared/DesignSystem/Resources/Image/ImageAssets.xcassets/Shape/Contents.json
• Projects/Shared/DesignSystem/Resources/Image/ImageAssets.xcassets/Shape/your_emoji.imageset/Contents.json
• Projects/Shared/DesignSystem/Sources/Resources/Image/Images.swift

---

📝 Walkthrough

Pull Request 요약: 내 인증샷 이모지 표시 버그 수정 (#196)

개요

내 인증샷(currentUser == .mySelf)에서 이모지 선택 시 UI가 표시되지 않는 버그를 수정하고, 이모지 표시와 함께 애니메이션 효과를 추가합니다.

아키텍처 및 상태 관리 변경

1. TCA 상태 확장 (GoalDetailReducer.State)

• 새 계산 속성 추가: myHasEmoji: Bool
  • currentUser == .mySelf && selectedReactionEmoji != nil 조건으로 내 이모지 표시 여부 판단
  • 기존 상태(currentUser, selectedReactionEmoji)에서 파생되는 읽기 전용 속성

2. 독립적인 이모지 애니메이션 시스템 (FlyingReactionSupport.swift)

새로운 아키텍처로 이모지 비행 애니메이션을 구현:

• FlyingReactionEmitter (MainActor, ObservableObject)

  • @Published reactions 배열로 활성 파티클 관리
  • emit(emoji:config:): 배치 처리로 파티클 생성, 자동 제거 스케줄링 (duration + delay + 0.2초)
  • clear(): 모든 활성 반응 즉시 제거

• FlyingReactionParticle (Identifiable)

  • 이모지별 상태 캡슐화: 위치(startX/Y), 타이밍(startDate, duration, delay), 동작(height, amplitude, frequency, drift, phase, scale, wobble)
  • 애니메이션 헬퍼 메서드: progress(), xOffset(), yOffset(), opacity() - 시간 기반 계산

• FlyingReactionConfig

  • 배치별 애니메이션 매개변수 범위 정의 (개수, 위치, 타이밍, 동작, 시각 효과)

• FlyingReactionOverlay (View)

  • TimelineView로 60fps 업데이트, 파티클별 위치/투명도/스케일 동적 계산
  • allowsHitTesting(false) 적용

3. View 계층의 이모지 애니메이션 통합

GoalDetailView:

• @StateObject myEmojiFlyingReactionEmitter 추가: 내 이모지 애니메이션 전담
• @State didPlayMyEmojiAppearAnimation 플래그: 일회성 애니메이션 실행 제어
• 라이프사이클 관리:
  • onAppear: 기존 로직 유지
  • onDisappear: 애니메이션 플래그 리셋, 이미터 초기화 (clear())
• UI 렌더링:
  • myEmoji: 이모지 배지를 카드 우상단에 표시 (52x52, Image.Shape.emojiBubble 배경)
  • myEmojiFlyingReactionOverlay: 하단 기준 애니메이션 오버레이
• 상태 변경 감지:
  • onChange(of: store.selectedReactionEmoji): 이모지 선택 시 playMyEmojiAppearAnimationIfNeeded 트리거
  • 설정: goalDetailBottom(width:height:) - 컨테이너 크기 기반 30개 파티클, 최대 여행 거리 동적 계산

ReactionBarView:

• 인라인 FloatingReaction 모델 제거 → FlyingReactionEmitter 채택 (StateObject)
• 이모지 선택 시 액션:

  flyingReactionEmitter.emit(emoji: emoji, config: .reactionBar(width: proxy.size.width))

• 설정 추상화: reactionBarConfig(width:) 정적 메서드 → FlyingReactionConfig.reactionBar(width:) 확장
• 이모지 선택 피드백: 20개 파티클, 상단 기준 애니메이션

액션 흐름

.reactionEmojiTapped(ReactionEmoji) 액션 (currentUser == .you인 경우만):

1. state.selectedReactionEmoji 업데이트
2. .updateCurrentCardReaction(emoji.rawValue) 액션 전송
3. 비동기: photoLogClient.updateReaction() 호출 (실패 시 이전 상태 복원)

→ selectedReactionEmoji 변경 감지 → myHasEmoji 자동 계산 → onChange 트리거 → 애니메이션 실행

디자인 시스템 확장

• 새 이미지 에셋: your_emoji.svg → Image.Shape.emojiBubble
• 에셋 네임스페이스: Image.Shape 확장으로 공개 API 제공

주요 동작 변경

1. 내 인증샷 이모지 표시: myHasEmoji가 true일 때 배지 렌더링 (피그마 디자인 반영)
2. 이모지 애니메이션: 선택 시 자동으로 하단 기준 비행 애니메이션 (30개 파티클, 1.05~1.55초)
3. 상반된 사용자 관점:
   • 내가 보는 화면(mySelf): 이모지 배지만 표시 (ReactionBar 숨김)
   • 상대방이 보는 화면(you): ReactionBar에서 이모지 선택 시 비행 애니메이션 + 상태 업데이트

테스트 커버리지

테스트 파일 추가 없음 (기존 Source.swift 유지)

개요

이모지 애니메이션 시스템을 구현하여 목표 상세 화면에서 선택된 이모지가 떨어지는 반응 효과를 표시합니다. 이모지 방출기, 입자 렌더링, 상태 관리 및 구성을 추가하며 반응 막대 뷰를 리팩토링합니다.

변경 사항

코호트 / 파일(s)	요약
이모지 반응 애니메이션 엔진 Projects/Feature/GoalDetail/Sources/Detail/FlyingReactionSupport.swift	FlyingReactionEmitter, FlyingReactionParticle, FlyingReactionOverlay, FlyingReactionConfig를 도입하여 이모지 기반 떨어지는 반응 시스템을 구현합니다. 시간 진행, 입자 움직임, 투명도 애니메이션 및 자동 정리를 포함합니다.
상태 및 뷰 통합 Projects/Feature/GoalDetail/Sources/Detail/GoalDetailView.swift, Projects/Feature/GoalDetail/Interface/Sources/GoalDetailReducer.swift	GoalDetailView에 이모지 방출기를 추가하고 선택된 이모지 배지를 표시합니다. Reducer에 myHasEmoji 계산 속성을 추가하여 상태 추적을 지원합니다.
반응 막대 리팩토링 Projects/Feature/GoalDetail/Sources/Detail/ReactionBarView.swift	인라인 FloatingReaction 모델을 FlyingReactionEmitter 기반 시스템으로 교체하고 reactionBarConfig 구성을 도입합니다.
디자인 시스템 에셋 Projects/Shared/DesignSystem/Resources/Image/ImageAssets.xcassets/Shape/*, Projects/Shared/DesignSystem/Sources/Resources/Image/Images.swift	이모지 버블 모양 에셋을 추가하고 Image.Shape 네임스페이스 및 emojiBubble 접근자를 노출합니다.

시퀀스 다이어그램

sequenceDiagram
    participant User
    participant GoalDetailView
    participant FlyingReactionEmitter
    participant FlyingReactionParticle
    participant FlyingReactionOverlay
    participant TimelineView

    User->>GoalDetailView: 이모지 선택
    GoalDetailView->>GoalDetailView: playMyEmojiAppearAnimationIfNeeded() 호출
    GoalDetailView->>FlyingReactionEmitter: emit(emoji, config)
    FlyingReactionEmitter->>FlyingReactionParticle: 배치 입자 생성
    FlyingReactionEmitter->>FlyingReactionEmitter: reactions 배열에 입자 추가
    FlyingReactionEmitter->>FlyingReactionEmitter: 지연 후 제거 예약
    
    TimelineView->>FlyingReactionOverlay: 렌더링 트리거 (주기적 업데이트)
    FlyingReactionOverlay->>FlyingReactionParticle: progress(at:) 호출
    FlyingReactionParticle->>FlyingReactionParticle: xOffset, yOffset, opacity 계산
    FlyingReactionOverlay->>FlyingReactionOverlay: 위치/불투명도/크기로 입자 렌더링
    
    FlyingReactionEmitter->>FlyingReactionEmitter: 지연 만료 시 입자 제거
    FlyingReactionEmitter->>FlyingReactionOverlay: reactions 배열 업데이트
    FlyingReactionOverlay->>TimelineView: 렌더링 완료

Loading

예상 코드 리뷰 노력

🎯 3 (중간) | ⏱️ ~20분

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#185

---

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.}

[coderabbitai]

@clxxrlove: PR 요약을 생성하겠습니다.

✅ Actions performed

Summary regeneration triggered.