[refactor] 가이드 페이지 이미지 변경 및 구조 개선

[ff1451]

✨ 요약

- 가이드 페이지 이미지 경로를 신규 `.webp` 파일 기준으로 변경했습니다.
- `GUIDE_ITEMS`를 하드코딩 배열에서 파일명 배열 기반으로 생성하도록 리팩토링했습니다.
- 이미지 base URL, duration 상수를 분리해 데이터 구조를 정리했습니다.
- `encodeURIComponent`를 적용해 한글 파일명도 안전하게 URL로 생성되도록 수정했습니다.

😎 해결한 이슈

• close [refactor] 가이드 페이지 이미지 변경 반영 및 구조 리팩토링 #259

Summary by CodeRabbit

• 최적화

  • 가이드 이미지 형식을 PNG에서 WebP로 업그레이드하여 파일 크기 감소 및 로딩 성능 향상

• 개선사항

  • 가이드 항목의 데이터 구조 및 관리 방식 개선

[coderabbitai]

Walkthrough

src/pages/Guide/guideData.ts 파일의 GUIDE_ITEMS 배열이 리팩토링되었습니다. 기존 하드코딩된 배열을 GUIDE_IMAGE_FILE_NAMES 배열로부터 동적으로 생성하도록 변경되었으며, GUIDE_IMAGE_BASE_URL, GUIDE_ITEM_DURATION 상수가 추가되고, getGuideImageUrl() 함수로 이미지 URL을 구성합니다. 이미지 포맷은 .png에서 .webp로 변경되었고, GUIDE_ITEMS에 명시적 타입 어노테이션이 적용되었습니다.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 가이드 페이지의 이미지 변경과 구조 개선이라는 주요 변경사항을 명확히 요약하고 있습니다.
Linked Issues check	✅ Passed	PR의 변경사항이 이슈 #259의 요구사항을 충족합니다: 리디자인된 .webp 이미지 적용, 하드코딩된 배열의 구조 개선, encodeURIComponent를 통한 안전한 URL 변환.
Out of Scope Changes check	✅ Passed	모든 변경사항이 이슈 #259의 범위 내에 있습니다: 이미지 경로 변경, 데이터 구조 리팩토링, URL 인코딩 처리만 포함되어 있습니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 259-refactor-가이드-페이지-이미지-변경-반영-및-구조-리팩토링

---

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]

🧹 Nitpick comments (1)

src/pages/Guide/guideData.ts (1)

7-12: 이미지 호스트를 환경 변수로 분리하는 걸 권장합니다.

stage-static 도메인이 상수에 고정되어 있어 환경 전환 시 수정 포인트가 생깁니다. import.meta.env(또는 공통 config)로 분리하면 운영/스테이징 관리가 더 안전해집니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Guide/guideData.ts` around lines 7 - 12, GUIDE_IMAGE_BASE_URL is
hardcoded to the stage domain; change it to read from an environment variable
(e.g. import.meta.env.VITE_GUIDE_IMAGE_BASE_URL or your project's config) and
provide a sensible fallback to the existing URL. Update the constant
GUIDE_IMAGE_BASE_URL to use the env value, keep getGuideImageUrl(fileName:
string) as-is (it will reference the new constant), and ensure
GUIDE_IMAGE_FILE_NAMES remains unchanged; validate any build/env docs so
staging/production use the correct env key.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/pages/Guide/guideData.ts`:
- Around line 7-12: GUIDE_IMAGE_BASE_URL is hardcoded to the stage domain;
change it to read from an environment variable (e.g.
import.meta.env.VITE_GUIDE_IMAGE_BASE_URL or your project's config) and provide
a sensible fallback to the existing URL. Update the constant
GUIDE_IMAGE_BASE_URL to use the env value, keep getGuideImageUrl(fileName:
string) as-is (it will reference the new constant), and ensure
GUIDE_IMAGE_FILE_NAMES remains unchanged; validate any build/env docs so
staging/production use the correct env key.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: aa553643-22a4-4c41-829f-31c41df8e587

📥 Commits

Reviewing files that changed from the base of the PR and between c4d304a and 1ac0cc5.

📒 Files selected for processing (1)

• src/pages/Guide/guideData.ts