DOCS/journey/troubleshooting/250828_UI_디자인_수정_잘못된_컴포넌트.md

Gmail, Slack, Calendar 통합 UI 디자인 수정 - 잘못된 컴포넌트 수정

작성일: 2025-08-28

작성자: Claude

관련 서비스: frontend-customer

상태: ✅ 해결됨

---

1. 문제 상황

1.1 요구사항

• Gmail, Slack, Google Calendar 통합 UI 색상을 파스텔톤으로 변경
• Font Awesome 아이콘 대신 실제 서비스 로고 SVG 사용

1.2 발생한 문제

• UI 변경사항이 화면에 적용되지 않음
• /game 페이지에서 디자인 변경 확인 불가

---

2. 원인 분석

2.1 잘못된 컴포넌트 수정

실수한 부분:

• IntegrationTab 컴포넌트 수정 (사용되지 않는 컴포넌트)
• AssistantProfile 내부에서만 사용되는데, 이 컴포넌트는 어디서도 호출 안 됨
• /api/assistant/${assistantId}/integrations API 엔드포인트 없음

실제 필요했던 것:

• /game 페이지에서 실제 사용되는 SkillsItemsPanel 컴포넌트 수정

2.2 추측한 정보들

1. Integration 개념 (문서에 없음, Item만 있음)
2. assistant.id 존재 여부 확인 안 함
3. calendar 타입 추가 (문서엔 Gmail, Slack만 있음)
4. API 응답 형식 가정
5. 백엔드 없이 UI만 구현

---

3. 해결 과정

3.1 올바른 컴포넌트 찾기

# IntegrationTab 사용처 확인 → AssistantProfile 안에서만 사용
# AssistantProfile 사용처 확인 → 사용 안 됨
# /game 페이지 구조 확인 → SkillsItemsPanel 사용 확인

3.2 SkillsItemsPanel 수정

// 권한 아이템 섹션에 이미 Gmail, Slack, Calendar 구현되어 있음
const permissionItems: PermissionItem[] = [
  {
    id: 'gmail',
    icon: <img src="/assets/integrations/gmail-logo.svg" className="w-8 h-8" />,
    color: 'from-red-100 to-red-200 border border-red-300'
  },
  // Slack, Calendar 동일하게 수정
]

3.3 SVG 로고 파일 추가

• 초기: 추측으로 만든 SVG → 실제 로고와 다름
• 수정: 사용자 제공 실제 로고 파일로 교체
  • /home/happybell/projects/ivada/gmail-icon.svg
  • /home/happybell/projects/ivada/slack-icon.svg

---

4. 교훈

4.1 컴포넌트 사용 확인 필수

• 수정 전 실제 사용되는 컴포넌트인지 확인
• 페이지 구조와 컴포넌트 연결 관계 파악

4.2 API 존재 여부 확인

• 백엔드 API 없이 프론트만 만들면 동작 안 함
• 하드코딩 더미 데이터 필요시 명시적 처리

4.3 추측 대신 확인

• 문서 확인 후 구현
• 실제 데이터 구조 파악 필요

---

5. 최종 결과

수정된 파일

• src/components/skills-items-panel.tsx - 실제 사용되는 컴포넌트
• public/assets/integrations/gmail-logo.svg - 공식 로고
• public/assets/integrations/slack-logo.svg - 공식 로고
• public/assets/integrations/google-calendar-logo.svg - 공식 로고

적용된 변경사항

• 파스텔 색상: red-100, purple-100, blue-100
• 실제 서비스 로고 SVG 사용
• 로고 크기: w-8 h-8 (50% 증가)
• 텍스트 색상: 검은색으로 변경 (가독성 향상)

---

6. 관련 커밋

• e7fcf1d - Integration 탭 변경사항 되돌림
• 5735e79 - SkillsItemsPanel에 파스텔톤 및 실제 로고 적용
• 204e724 - Gmail SVG 공식 로고로 교체
• b70da09 - Slack SVG 공식 로고로 교체