[FEAT] 로고를 정적 asset에서 SVGR 아이콘으로 교체한다

[jjangminii]

ISSUE 🔗

close #271

What is this PR? 🔍

로고 SVG를 디자인 시스템의 아이콘 코드젠 파이프라인에 편입시키고, 사이드바·로그인·정책 페이지에서 정적 asset 대신 SVGR로 생성된 LogoTimoIcon 컴포넌트를 사용하도록 교체했습니다.

배경

• 기존 구조: 로고는 packages/timo-design-system/src/assets/images/logo/timo-text-logo.svg 정적 파일을 next/image로 불러와 사용하고 있었습니다.
• 발생 문제: 디자인 시스템의 다른 아이콘들은 모두 SVGR 코드젠 파이프라인(icons/source → pnpm icons:generate → icons/generated/*.tsx)을 통해 컴포넌트로 관리되는데, 로고만 예외적으로 별도 asset import 방식을 쓰고 있어 관리 방식이 일관되지 않았습니다.
• 해결 방향: 로고 SVG를 icons/source에 추가해 코드젠 대상에 포함시키고, 로고를 사용하는 모든 화면을 LogoTimoIcon으로 교체한 뒤 더 이상 참조되지 않는 정적 asset을 삭제했습니다.

아이콘 파이프라인

• 변경 요약: packages/timo-design-system/src/icons/source/logo_timo.svg를 추가하고 pnpm icons:generate로 LogoTimoIcon 컴포넌트를 생성했습니다.
• 이유: 다른 아이콘과 동일한 파이프라인에 편입시켜 관리 방식을 통일하기 위해서입니다.
• 구현 방식: generate-icons.mjs가 source/*.svg를 읽어 generated/*.tsx와 index.ts를 생성합니다. 두 산출물은 gitignore 대상이라 커밋에는 소스 SVG만 포함됩니다. 원본 SVG는 순수 벡터가 아니라 <pattern>으로 감싼 base64 PNG를 포함하고 있어 다른 아이콘(2~5KB)보다 훨씬 큰 약 92KB이지만, 실제 로고 이미지 특성상 의도된 형태로 판단했습니다.

로고 사용처 (사이드바 · 로그인 · 정책 페이지)

• 변경 요약: NavigationSidebar, LoginContainer, PolicyPage에서 next/image + 정적 asset 방식을 LogoTimoIcon 컴포넌트로 교체했습니다.
• 이유: 정적 asset을 참조하는 곳을 모두 없애 로고를 SVGR 아이콘 하나로만 관리하기 위해서입니다.
• 구현 방식: 다른 네비게이션 아이콘과 동일하게 width/height prop을 직접 지정하는 패턴(<LogoTimoIcon width={92} height={35} />)으로 사용했습니다. LogoTimoIcon은 SVG 자체에 aria-hidden="true"가 고정되어 있어, 로고가 <Link>로 감싸진 사이드바 · 정책 페이지에서는 아이콘 대신 Link에 aria-label="Timo"를 부여해 접근성 라벨을 유지했습니다. 로그인 페이지는 로고 바로 아래 헤드라인 텍스트가 있어 별도 라벨을 추가하지 않았습니다.
• 경계 · 제약: 정적 asset(timo-text-logo.svg)은 모든 참조가 제거된 것을 확인한 뒤 별도 커밋으로 삭제했습니다.

To Reviewers

LogoTimoIcon의 원본 SVG가 순수 벡터가 아니라 base64 PNG를 <pattern>으로 감싼 형태라 소스 파일 크기가 92KB로 다른 아이콘보다 큽니다. 로고 이미지 특성상 의도된 것으로 판단했는데, 번들 크기 관점에서 문제 없는지 확인 부탁드립니다.
이번 세션에는 브라우저 자동화 도구가 없어 로컬 브라우저로 실제 렌더링을 직접 확인하지 못했습니다 — 타입체크/린트는 통과했고 다른 아이콘과 동일한 사용 패턴이라 문제 가능성은 낮다고 판단했지만, 로그인 후 사이드바 · 로그인 · 정책 페이지 로고가 기존과 동일하게 보이는지 확인 부탁드립니다.

Screenshot 📷

Test Checklist ✔

• pnpm check-types 통과
• 변경 파일 대상 eslint --max-warnings 0 통과
• 로컬 브라우저에서 사이드바 · 로그인 · 정책 페이지 로고 렌더링 확인 — 미실행: 브라우저 자동화 도구 없어 로컬 확인 필요

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
timo	Ready	Preview, Comment	Jul 17, 2026 8:36am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 2fcc2ea0-987e-41b5-93b0-a869130fafb4

📥 Commits

Reviewing files that changed from the base of the PR and between fd06b80 and 4d48810.

⛔ Files ignored due to path filters (2)

• packages/timo-design-system/src/assets/images/logo/timo-text-logo.svg is excluded by !**/*.svg
• packages/timo-design-system/src/icons/source/logo_timo.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• apps/timo-web/app/[locale]/login/_containers/LoginContainer.tsx
• apps/timo-web/app/[locale]/policy/page.tsx
• apps/timo-web/components/layout/sidebar/navigation/NavigationSidebar.tsx

---

Walkthrough

로그인, 정책 페이지, 사이드바에서 next/image와 SVG 에셋 기반 로고를 LogoTimoIcon으로 교체했습니다. 로그인 로고 크기는 92x35로 유지되며, 정책 및 사이드바 링크에 aria-label이 추가되었습니다.

Changes

로고 아이콘 컴포넌트 적용

Layer / File(s)	Summary
인증 및 정책 로고 교체 apps/timo-web/app/[locale]/login/_containers/LoginContainer.tsx, apps/timo-web/app/[locale]/policy/page.tsx	기존 next/image 및 SVG 로고 에셋을 제거하고 LogoTimoIcon을 렌더링하도록 변경했습니다.
사이드바 로고 및 접근성 라벨 반영 apps/timo-web/components/layout/sidebar/navigation/NavigationSidebar.tsx	사이드바 홈 링크의 로고를 LogoTimoIcon으로 교체하고 aria-label="Timo"를 추가했습니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• Team-Timo/Timo-client#55: SVGR 기반 아이콘 생성 및 배럴 export를 추가해 LogoTimoIcon 제공과 직접 연결됩니다.
• Team-Timo/Timo-client#102: 사이드바 네비게이션과 로고 영역 변경을 다룹니다.

Suggested labels: ♦️ 민아

Suggested reviewers: yumin-kim2

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	실사용 변경은 확인되지만, packages/timo-design-system/src/icons/source/logo_timo.svg는 !**/*.svg로 제외되어 소스 추가·코드젠 반영을 검증할 수 없습니다.	SVG 관련 제외 필터를 해제한 diff나 icons/index.ts/generated 산출물 변경 내역을 추가로 제공해 주세요.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 정적 asset을 SVGR 아이콘으로 바꾸는 핵심 변경을 잘 요약합니다.
Description check	✅ Passed	설명이 변경 범위와 배경을 일치하게 설명하고 있습니다.
Out of Scope Changes check	✅ Passed	사이드바·로그인·정책 페이지의 로고 교체와 접근성 라벨 추가만 보여 범위를 벗어난 변경은 보이지 않습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/ui/271-add-svg-icon

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

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

[github-actions]

Storybook Preview

항목	링크
Storybook	열기
Chromatic 빌드	확인

마지막 업데이트: 2026-07-17 08:37 UTC

[github-actions]

Timo Performance Report

Bundle Size — timo-web

라우트	크기	First Load JS
/[locale]/home	274.75 kB	🔴 480.56 kB
/[locale]/today	258.90 kB	🔴 464.72 kB
/[locale]/focus	221.54 kB	🔴 427.35 kB
/[locale]/settings	228.46 kB	🔴 434.27 kB
/[locale]/statistics	210.14 kB	🔴 415.95 kB
/[locale]/[...rest]	0 B	🟡 205.81 kB
/[locale]/login	281.84 kB	🔴 487.65 kB
/[locale]/oauth/calendar/callback	120.93 kB	🟡 326.75 kB
/[locale]/oauth/callback	120.60 kB	🟡 326.41 kB
/[locale]/onboarding	294.31 kB	🔴 500.13 kB
/[locale]	119.91 kB	🟡 325.73 kB
/[locale]/policy	120.88 kB	🟡 326.70 kB
/robots.txt/route	0 B	🟡 205.81 kB
/sitemap.xml/route	0 B	🟡 205.81 kB

공유 번들: 205.81 kB
🟢 < 200kB  |  🟡 < 350kB  |  🔴 ≥ 350kB (First Load JS · gzip)

Lighthouse — timo-web

URL	Perf	A11y	LCP	CLS	TBT
/en/home	🔴 67	🟢 96	🔴 16.4s	🟢 0.000	🟡 333ms
/en/today	🔴 61	🟢 96	🔴 16.1s	🟢 0.000	🟡 534ms
/en/focus	🔴 62	🟢 96	🔴 16.1s	🟢 0.000	🟡 489ms
/en/statistics	🔴 62	🟢 96	🔴 16.0s	🟢 0.000	🟡 479ms

Perf ≥ 70 / A11y ≥ 85 목표
LCP 🟢 < 2.5s 🟡 < 4s 🔴 ≥ 4s  |  CLS 🟢 < 0.1 🟡 < 0.25 🔴 ≥ 0.25  |  TBT 🟢 < 200ms 🟡 < 600ms 🔴 ≥ 600ms

Image Optimization — timo-web

파일	크기	포맷	상태
favicon.png	27.84 kB	PNG ⚠️	🟢
images/google-calendar.png	36.20 kB	PNG ⚠️	🟢
images/google-logo.png	26.79 kB	PNG ⚠️	🟢
og.png	437.44 kB	PNG ⚠️	🟡

총 4개 · 528.28 kB  |  🟢 < 200KB  |  🟡 < 500KB  |  🔴 ≥ 500KB
⚠️ 4개 파일 WebP/AVIF 변환 권장

측정 커밋: 1bae648

[ehye1]

로고 잘 보이네요
수고하셨습니다!!