["나의 ESG궁합" 개발 일기] (251116) 리엔지니어링한 PRD로 토스 TDS 적용 해보기

1. 현재까지 ESGSAJU2 개발 내용을 a-z 분석해줘 
2. 그 다음에 해당 내용을 토스 TDS용 PRD로 역엔지니어링해줘 (해당 PRD를 가지고 토스 TDS라이브러리를 입힌 피그마에서 재작업할거야)
3. https://www.notion.so/21b714bbfde780fb84bac2acfbb4a6b9?pvs=21  토스 TDS 내용은 여기를 참고해줘

ESGSAJU2 Reverse-Engineering PRD (for Toss TDS + Figma Rework)
목적
개인 ESG 가치관(E/S/G) 진단 결과로 기업과의 궁합을 계산·설명하고, 매칭 히스토리와 프로필을 관리한다.
Toss TDS 컴포넌트로 재작업 가능한 구조/요구사항을 제공한다. 참고: 아이콘/컴포넌트 가이드라인 https://www.notion.so/21b714bbfde780fb84bac2acfbb4a6b9?pvs=21.
범위
화면: 스플래시, 온보딩, 로그인, 진단, 프로필결과, 홈, 기업상세, 궁합결과, 자세한궁합, 내궁합(히스토리), 비교, ESG정보, 마이페이지
데이터: 사용자 프로필, 진단 히스토리, 매칭 기록(Firestore), 기업 데이터(로컬 시드)
성공지표(KPI)
진단 완료율 ≥ 60%
궁합 상세 진입률 ≥ 40%
매칭 저장(히스토리) 비율 ≥ 30%
재방문 시 재매칭 비율 ≥ 25%
비범위(Non‑Goals)
실시간 외부 ESG 지표 수집/갱신
결제/구독, 서버 사이드 추천 알고리즘 고도화
사용자 및 시나리오
사용자: ESG 관심자(취업/투자/윤리소비), 초심자부터 라이트 유저
시나리오
신규: 온보딩 → 구글 로그인 → 10문항 진단 → 프로필 저장 → 홈 → 기업 선택 → 궁합결과 → 자세한 궁합
복귀: 자동 로그인 → 저장 프로필/최근 진단 로드 → 홈 → 히스토리/비교/새 매칭
정보구조/내비게이션
하단 탭(고정): 홈, 내 궁합, ESG 정보, 마이페이지
흐름: 스플래시 → 온보딩 → 인증 → 진단 → 프로필결과 → 홈 → 기업상세 → 궁합결과 → 자세한궁합
상태 라우팅: 단일 상태머신(유니온 타입) 전환
핵심 비즈니스 규칙
진단: 10문항, 0–100 슬라이더. E/S/G 각 영역 평균점 산출. 최댓값 문항의 주제를 민감이슈로 설정.
매칭 점수: 영역별 매칭 = 100 − |사용자점수 − 기업점수|. 총점은 사용자 점수를 가중치로 가중평균.
매칭 타입 구간
85+ 천생연분
70–84 좋은 케미
50–69 보통
<50 불일치 주의
코드 근거:
MatchResultScreen.tsxLines 25-35
const eMatch = 100 - Math.abs(userProfile.eScore - company.eScore);const sMatch = 100 - Math.abs(userProfile.sScore - company.sScore);const gMatch = 100 - Math.abs(userProfile.gScore - company.gScore);const totalWeight = userProfile.eScore + userProfile.sScore + userProfile.gScore;const totalMatch = Math.round(  (eMatch * userProfile.eScore + sMatch * userProfile.sScore + gMatch * userProfile.gScore) / totalWeight);
데이터 모델(요약)
UserProfile
nickname, type, typeDescription, eScore, sScore, gScore, sensitiveTopic
ESGDiagnosisRecord
UserProfile 필드 + createdAt
Company
id, name, esgGrade, e/s/gScore, strengths[], weaknesses[], recentIssues[{category, title, severity, date}], carbonEmission, diversityScore, transparencyScore
CompanyMatchRecord
companyId, companyName, e/s/gScore, totalScore, matchType, timestamp
Firestore 연동 근거:
db.tsLines 112-127
export async function fetchUserProfile(uid: string): Promise<StoredUserProfile | null> {  const ref = doc(db, 'users', uid);  const snap = await getDoc(ref);  if (!snap.exists()) return null;  const data = snap.data() as any;  if (!data?.profile) return null;  const p = data.profile as Partial<StoredUserProfile>;  return {    nickname: p.nickname ?? '사용자',    type: p.type ?? '환경 수호자',    typeDescription: p.typeDescription ?? '',    eScore: Number(p.eScore ?? 50),    sScore: Number(p.sScore ?? 50),    gScore: Number(p.gScore ?? 50),    sensitiveTopic: p.sensitiveTopic ?? ''  };}
화면별 요구사항 + Toss TDS 매핑
참고: TDS 컴포넌트/아이콘 가이드라인 https://www.notion.so/21b714bbfde780fb84bac2acfbb4a6b9?pvs=21.
공통
화면 상단 Mobile_Navigation 필수
텍스트는 Mobile_Text만 사용(더큰텍스트)
375px 아트보드, 오토레이아웃 gap/Padding・Margin 프리셋
에러는 Alert, 로딩은 Skeleton
Splash
목적: 브랜드/로딩
구성: Mobile_Navigation + Mobile_Top(앱명), Mobile_Text(슬로건)
상태: 1.5–2s 후 온보딩으로 전환
Onboarding
목적: 가치제안, 시작 CTA
구성: Mobile_Top(스킵), Mobile_Text(요약), Button(시작), 필요시 Carousel
Auth(로그인)
목적: 구글 로그인
구성: Mobile_Top(뒤로), Mobile_Text(설명), Button(구글), ListRow(약관/개인정보), Dialog(정책 본문)
Assessment(진단)
목적: 10문항 슬라이더 응답
구성: Mobile_Top(제목/진행 n/10), Progress, Mobile_Text(문항), Slider(0–100), Button(이전/다음/완료)
검증: 없음(기본값 50), 완료 시 프로필 계산/저장
ProfileResult
목적: 유형/점수 요약
구성: Card(요약), Badge(유형), Progress(E/S/G), Button(홈으로/기업 살펴보기)
Home
목적: 검색, 트렌딩 기업, 뉴스
구성: Mobile_Top(프로필 미니), Input(검색), Card Grid(기업), ListRow(뉴스), BottomNavigation
상호작용: 기업 탭 → 기업상세
CompanyDetail
목적: 기업 정보/지표 확인, 매칭 실행
구성: Card(기업 설명/지표), Badge(ESG 등급), Button(궁합 보기)
MatchResult
목적: 총점/영역별 매칭, 타입 안내
구성: Card(총점/타입), Progress(E/S/G 매칭), Badge(타입), Button(자세히 보기)
DetailedMatch
목적: 민감이슈 기반 경보, 영역별 코멘트, 대체 제안
구성: Alert(S high 이슈시), Card×3(E/S/G 상세+Badge), ListRow(참고/이슈), Button(다른 기업 보기)
MyCompass(히스토리)
목적: 저장 매칭 목록
구성: ListRow(기업명/점수/시각), 빈 상태 안내 + CTA, 필요시 Pagination/Infinite
Comparison(비교)
목적: 기업 간 지표 비교
구성: Tabs(E/S/G/종합), Table(행:기업/열:지표) 또는 Card Grid, Badge(강점/주의)
ESGInfo
목적: ESG 자료/뉴스
구성: ListRow(기사), Accordion(FAQ), Link
MyPage
목적: 프로필/설정/로그아웃
구성: Avatar, Card(점수 3행), Badge(민감이슈), ListRow(알림/환경/도움말), Button(로그아웃), BottomNavigation
상태/에러/로딩
로딩: 진단 계산/Firestore fetch 시 Skeleton
빈 상태: 히스토리 없음 → “첫 궁합 보러가기” CTA
에러: 인증 실패/네트워크 → Alert + 재시도
접근성
Mobile_Text로 폰트/행간 일관, 대비 준수
터치 타깃 최소 44px
모든 아이콘에 대체 텍스트
분석 이벤트
login_success, assessment_complete
match_view(companyId,totalScore), detailed_view(companyId)
save_match(companyId), compare_open
mypage_logout
기술/통합
인증: Firebase Auth(구글)
저장소: Firestore
users/{uid}.profile
users/{uid}/diagnoses/*
users/{uid}/matches/{companyId}
기업 데이터: 초기 시드(로컬), 이후 확장 가능
오픈 이슈/결정 필요
기업 데이터 소스(외부 API vs 수동 업데이트)
비교 화면 UI(Table vs Card) 확정
알림 기능(푸시/이메일) 범위
국제화 범위(한/영)
Figma 작업 가이드(TDS)
상단 Mobile_Navigation 고정, Mobile_Top + Mobile_ListRow로 상단 구조
텍스트 Mobile_Text 사용(더큰텍스트)
컴포넌트 속성은 우측 패널로만 조절
아이콘: 제공 세트 우선, 직접 제작 시 아이콘 가이드라인 참조
참고 링크: https://www.notion.so/21b714bbfde780fb84bac2acfbb4a6b9?pvs=21
원본 구현 근거(선택 발췌)
라우팅/플로우: src/App.tsx
진단 로직: src/components/AssessmentScreen.tsx
매칭 계산/타입: src/components/MatchResultScreen.tsx
상세 경보: src/components/DetailedMatchScreen.tsx
데이터: src/services/db.ts, src/data/companies.ts