feat: Logo 컴포넌트 구현

[ccconac]

✅ 체크리스트

• Logo 컴포넌트 구현

📝 작업 상세 내용

임시 로고 컴포넌트 구현을 완료했습니다. 아래와 같이 사용 가능합니다.

return (
  <div className="flex flex-col w-screen gap-3 items-center justify-center pt-5">
    <Logo.Icon />
    <Logo.Basic />
  </div>
);

📸 스크린샷 (선택 사항)

✅ 셀프 체크리스트

• 브랜치 확인하기
• 불필요한 코드가 들어가지 않았는지 재확인하기
• issue 닫기
• reiewers, assignees, Lables 등록 확인하기

이슈 번호: #7

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 앱에 클릭 시 홈으로 이동하는 로고 컴포넌트와 작은 아이콘 변형을 추가하여 네비게이션과 브랜드 표시 강화

• 스타일

  • 전역 폰트를 Pretendard로 적용하여 전체 타이포그래피 일관성 개선

• 기타

  • 로고 관련 타입 선언을 추가하여 컴포넌트 사용 안정성 향상

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

프로젝트에 react-router-dom 의존성을 추가하고, 클릭 가능한 텍스트 로고와 아이콘 로고를 제공하는 Logo 컴포넌트를 새로 추가했으며, 전역 폰트로 Pretendard를 적용했습니다.

Changes

Cohort / File(s)	변경 요약
의존성 추가 package.json	react-router-dom: "^7.11.0" 의존성 추가
Logo 컴포넌트 추가 src/components/Logo/Logo.tsx, src/components/Logo/Logo.types.ts	Logo.Basic(클릭 시 /로 네비게이션, 텍스트 레이블 포함) 및 Logo.Icon(그라디언트 정사각 아이콘) 추가; LogoProps 타입 추가
전역 스타일 변경 src/global.css	body { font-family: 'Pretendard', sans-serif; } 추가 (Pretendard 전역 적용)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related issues

• feat: Logo 컴포넌트 구현 #7: 동일한 Logo 컴포넌트 추가(파일 및 타입)와 직접적으로 일치함.

Possibly related PRs

• feat: Logo 컴포넌트 구현 #9: 동일 파일들(package.json, src/components/Logo/*, src/global.css)을 수정하여 동일한 Logo 기능과 폰트/의존성 변경을 포함함.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 주요 변경 사항인 Logo 컴포넌트 구현을 명확하게 요약하고 있으며, 간결하고 명확한 형식을 따르고 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3dc23b8 and b8dabd2.

📒 Files selected for processing (2)

• src/components/Logo/Logo.tsx
• src/components/Logo/Logo.types.ts

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/Logo/Logo.tsx (1)

16-27: 접근성 및 성능 최적화를 고려해보세요.

현재 구현은 정상 동작하지만, 다음 개선사항들을 고려할 수 있습니다:

1. 키보드 접근성: <button> 요소나 role="button", tabIndex={0}, onKeyDown 핸들러를 추가하여 키보드 사용자도 로고를 클릭할 수 있도록 할 수 있습니다.
2. 성능: onClick 핸들러가 매 렌더마다 새로 생성됩니다. useCallback을 사용하여 최적화할 수 있습니다.

🔎 개선 제안

+import { useNavigate } from 'react-router-dom';
+import { useCallback } from 'react';
 import { Icon } from '../Icon/Icon';

 const BasicLogo = () => {
   const navigate = useNavigate();
+  const handleClick = useCallback(() => {
+    navigate('/');
+  }, [navigate]);

   return (
-    <div
+    <button
       className="flex items-center gap-2 hover:opacity-80 transition-opacity cursor-pointer"
-      onClick={() => navigate('/')}>
+      onClick={handleClick}>
       <IconLogo />
       <span className="text-xl text-gray-900">프롬로그</span>
-    </div>
+    </button>
   );
 };

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1106a68 and 3dc23b8.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (3)

• package.json
• src/components/Logo/Logo.tsx
• src/global.css

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/Logo/Logo.tsx (1)

src/components/Icon/Icon.tsx (1)

• Icon (4-18)

🔇 Additional comments (4)

src/global.css (1)

28-30: LGTM!

전역 폰트 패밀리 설정이 기존 @font-face 선언과 일치하며 올바르게 구현되었습니다.

src/components/Logo/Logo.tsx (2)

31-34: LGTM!

Logo.Basic과 Logo.Icon으로 구성된 네임스페이스 패턴이 명확하고 사용하기 편리합니다. PR 설명의 사용 예시와도 일치합니다.

---

9-9: "logo" 아이콘이 iconMap에 정상적으로 등록되어 있습니다.

iconMap.ts의 line 20에서 logo: Icon.Logo,로 등록되어 있고, src/components/Icon/generated/Logo.tsx 파일도 존재합니다. Icon 컴포넌트는 존재하지 않는 아이콘에 대해 null을 반환하는 안전 장치도 구현되어 있으므로 문제없습니다.

Likely an incorrect or invalid review comment.

package.json (1)

26-26: react-router-dom 7.11.0 버전 확인 필요

여러 패키지 인덱스(Snyk, Socket.dev)에서는 react-router-dom 7.11.0이 2025년 12월 17일에 배포된 것으로 표시되지만, 공식 npm 페이지에는 최신 버전이 7.8.2로 표시되어 있습니다. 설치 전에 실제 버전 사용 가능 여부를 직접 확인하고, 특히 Express 어댑터를 사용하는 SSR 설정(CVE-2025-31137 관련)에서는 보안 권고사항을 검토하세요.