🐛Fix : SVG Fill 문제 해결 by KongMezu · Pull Request #65 · geulDa/FE

KongMezu · 2025-10-27T04:44:20Z

🔥 작업 내용

fill/stroke 동적 할당
SVGO 최적화

🤔 추후 작업 사항

마이페이지

🔗 이슈

close #[fix] SVGO fill 오류 해결 #45

PR Point (To Reviewer)

리뷰는 icon.tsx 와 svg.config.mjs 만 보면 됩니다!

fill/stroke 컬러 분리 & 동적할당

stroke의 컬러는 currentColor로 변환(기존과 동일) 하고
이번에 fill과 stroke 모두를 동적으로 별도의 컬러로 할당 가능하도록 svg 원본(path)에서 fill/stroke 속성을 완전히 바꿨습니다.
각 svg path에 fill 속성이 있으면 fillColor가 제대로 반영되지 않는 구조임을 파악하고 fill 속성 자체를 제거하고 stroke만 남겨뒀습니다.

fillColor를 준 아이콘은 내부가 원하는 색으로 채워지고 fill+stroke 조합도 가능합니다.

svgo.config.mjs 수정

먼저 기존에 있던 removeAttrs 먼저 삭제했습니다.
앞서 말한 path 설정에서 fill을 제거하는 방향으로 갔습니다. removeAttrs에서 fill/stroke 속성을 일괄 삭제해 활용이 어려웠던 것 같았습니다.
또 addAttributesToSVGElement 에서 fill= none / storke =currentColor 로 강제하고 있어 유연하게 토큰화가 이루어지지 못했던 것 같아 삭제했습니다.

사용법

기존이랑 다르지 않고 fillColor 만 추가됐습니다.

<Icon name='CopySimple' size={24} color='mint-500' fillColor='mint-200'/>
<Icon name='HeartStraight' size={24} color='red-300' fillColor='red-400' />
<Icon name='HeartStraight' size={24} />
<Icon name='Stamp' size={24} color='pink-300' />

카카오, 구글은 별도의 SVG 사용

카카오랑 구글은 기존 아이콘들이랑 크기가 다르기도하고, 또 구글의 경우 칸마다 fill 컬러를 다르게 채워야 하기에 이 부분은 public 에서 가져와 쓰는방법이 좋을 거 같습니다.

📸 피그마 스크린샷 or 기능 GIF

Summary by CodeRabbit

릴리스 노트

새 기능
- 클릭형 보상 페이지와 노드 상세 페이지가 추가되었습니다.
- 현재 위치 확인(위치 권한) 기능이 도입되었습니다.
UI 개선
- 메인 섹션을 아이콘 중심으로 리디자인했습니다.
- 각 로그인 버튼 옆에 최근 로그인 플랫폼이 개별 표시됩니다.
- 카드와 주소 복사 컴포넌트가 반응형 및 텍스트 트렁케이트로 개선되었습니다.
- 아이콘에 채우기 색상 옵션과 새 아이콘(PressStamp)이 추가되었습니다

vercel · 2025-10-27T04:44:25Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
af-fe	Ready	Preview	Comment	Oct 29, 2025 2:44pm

coderabbitai · 2025-10-27T04:44:29Z

Warning

Rate limit exceeded

@KongMezu has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 17 minutes and 36 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between ad023b7 and af19597.

📒 Files selected for processing (2)

src/pages/main/Node.tsx (1 hunks)
src/shared/components/button/AddressCopy.tsx (3 hunks)

Walkthrough

로그인 페이지에 최근 클릭 플랫폼 상태와 버튼별 조건부 RecentLoginBubble 렌더링이 추가되었고, 홈·아이콘·Card·AddressCopy의 UI/스타일이 변경되며 새 페이지(Node, HiddenReward), 라우터 사용 변경, 위치 유틸(getLocation) 추가, svgo 플러그인 2개가 제거되었습니다.

Changes

코호트 / 파일(s)	변경 요약
인증 페이지 상태 및 UI `src/pages/auth/index.tsx`	`useState`로 `recentPlatform` 추가, `handleLoginClick`이 알림·로그·`recentPlatform` 업데이트, 각 `LoginButton`을 상대 컨테이너로 래핑해 플랫폼 일치 시 `RecentLoginBubble` 조건부 렌더링, 텍스트 "8개 명소" → "10개 명소", 레이아웃/클래스 정리
홈 페이지 렌더링 변경 `src/pages/index.tsx`	기존 제목/문단 제거 후 `CopySimple`, `HeartStraight`, `Stamp` 아이콘 컴포넌트로 교체(렌더링 내용 변경, 컴포넌트 시그니처 불변)
주소 복사 컴포넌트 변경 `src/shared/components/button/AddressCopy.tsx`	`label` 제거, `truncate?: boolean` 추가(기본 true), `value` 직접 렌더링, 아이콘 상태에 따라 `CopySimple`/`Check` 전환, `overflow-hidden` 추가, 고정 너비→`w-full`, 아이콘 래핑·텍스트에 `title` 추가
카드 컴포넌트 스타일 수정 `src/shared/components/container/Card.tsx`	medium/large variants 너비를 고정값에서 `w-full`로 변경(높이·내부 레이아웃 유지)
아이콘 처리 확장 `src/shared/icons/components/icon.tsx`, `src/shared/icons/iconNames.ts`, `src/shared/icons/index.ts`	`IconProps`에 `fillColor?: IconColor` 추가, CSS 변수(`--fill-color`, `--color`) 기반 조건부 스타일 적용, SVG에 `viewBox="0 0 24 24"` 추가, `PressStamp` 아이콘명 및 자산 추가/임포트 조정
새 페이지 및 라우터 네비게이션 `src/pages/main/Node.tsx`, `src/pages/main/HiddenReward.tsx`, `src/pages/main/Board.tsx`, `src/pages/main/components/board/Boardgame.tsx`, `src/pages/main/index.tsx`	새 페이지 `HiddenReward`/`Node` 추가, 여러 컴포넌트에서 `useRouter` 도입 및 라우팅 동작(셀 클릭 → `/main/Node`, 뒤로가기 등)으로 변경
위치 유틸 추가 `src/shared/utils/handleGetLocation.ts`	`getLocation(onSuccess, onError?)` 유틸 추가(geolocation 사용, enableHighAccuracy, timeout 5000, maximumAge 0)
SVGO 구성 변경 `svgo.config.mjs`	`removeAttrs`(attrs: ['fill','stroke']) 및 `addAttributesToSVGElement` 플러그인 제거

Sequence Diagram(s)

sequenceDiagram
  participant User as 사용자
  participant Button as LoginButton
  participant Page as AuthPage
  participant State as recentPlatform

  rect rgba(135,206,250,0.12)
    User->>Button: 클릭 (platform)
    Button->>Page: handleLoginClick(platform)
    Page->>State: setRecentPlatform(platform)
    Page-->>Button: re-render
    Note right of Button: 플랫폼 일치 시\nRecentLoginBubble 조건부 표시
  end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25분

추가로 주의할 파일/영역:
- src/shared/icons/components/icon.tsx — fillColor 적용 및 SVG fill/stroke 일관성 확인
- svgo.config.mjs — 플러그인 제거로 인한 아이콘 SVG 출력 차이 확인
- src/shared/components/button/AddressCopy.tsx, src/shared/components/container/Card.tsx — 너비 변경에 따른 레이아웃/반응형 영향 검토
- src/pages/auth/index.tsx — RecentLoginBubble 조건부 렌더링의 접근성·포커스/레이어링 확인

Possibly related PRs

✨Feat: node page layout #56 — 노드/보드 관련 라우팅과 위치 유틸 및 아이콘/컴포넌트 변경이 중복될 가능성 있음.
🐛Fix : Address Copy Button - 실 주소값 Placeholder #63 — AddressCopy 변경 및 auth RecentLoginBubble 관련 연속/중복 변경 가능성.
✨Feat: 히든 리워드 페이지 #58 — HiddenReward 페이지 추가가 동일 파일(또는 유사 구현)을 포함할 가능성.

Suggested labels

fix, setting

Suggested reviewers

jjangminii
skyblue1232

Poem

🐰
버튼 톡, 버블 퐁 — 깜짝 인사해,
아이콘 반짝, 너비는 쭉쭉,
길 따라 새 페이지로 홱—훌쩍,
당근 하나로 축하드려요, 껑충! 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	PR 제목 "🐛Fix : SVG Fill 문제 해결"은 변경 사항의 주요 내용을 명확하게 요약하고 있습니다. 이 PR의 핵심은 SVG 아이콘의 fill/stroke 속성을 동적으로 할당 가능하도록 수정한 것이며, 제목은 이러한 SVG Fill 문제 해결이라는 주요 변화를 정확하게 전달하고 있습니다. 비록 이모지를 포함하고 있지만, 의미를 명확하게 전달하며 팀원이 변경 이력을 스캔할 때 즉시 이해할 수 있는 수준의 구체성을 갖추고 있습니다.
Description Check	✅ Passed	PR 설명은 저장소의 필수 템플릿 구조를 완벽하게 따르고 있습니다. 🔥 작업 내용, 🤔 추후 작업 사항, 🔗 이슈, PR Point (To Reviewer), 📸 피그마 스크린샷이 모두 포함되어 있으며, 각 섹션이 실질적인 정보로 채워져 있습니다. 특히 PR Point 섹션은 reviewers를 위한 핵심 파일 지정, 상세한 변경 설명, 사용 예시, 설계 결정의 근거 등을 제공하고 있어 템플릿 요구 사항을 훨씬 초과하는 질의 설명을 제공하고 있습니다.

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

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

github-actions · 2025-10-27T04:46:18Z

🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message.
Please verify that they are correct before merging.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/pages/auth/index.tsx (1)
72-103: 버블 렌더링 로직의 중복을 고려해보세요.

각 로그인 버튼마다 동일한 구조로 RecentLoginBubble을 조건부 렌더링하고 있습니다. 현재 코드는 작동하지만, 향후 유지보수성을 위해 플랫폼 배열을 map으로 순회하는 방식으로 리팩토링을 고려할 수 있습니다.

선택적 리팩토링 예시:
const platforms = [
  { id: 'kakao', label: '카카오' },
  { id: 'google', label: '구글' }
] as const;

<div className='flex gap-[1.5rem] relative'>
  {platforms.map(({ id, label }) => (
    <div key={id} className='relative'>
      <LoginButton
        platform={id}
        onClick={() => handleLoginClick(label)}
      />
      {recentPlatform === label && (
        <div className='absolute -top-[3.8rem] left-1/2 -translate-x-1/2 w-auto min-w-max h-auto flex-shrink-0 pointer-events-none'>
          <RecentLoginBubble />
        </div>
      )}
    </div>
  ))}
</div>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 07d6602 and 9f32183.

⛔ Files ignored due to path filters (17)

src/shared/icons/source/CalendarBlank.svg is excluded by !**/*.svg
src/shared/icons/source/Caret.svg is excluded by !**/*.svg
src/shared/icons/source/ChatCircle.svg is excluded by !**/*.svg
src/shared/icons/source/Check.svg is excluded by !**/*.svg
src/shared/icons/source/CopySimple.svg is excluded by !**/*.svg
src/shared/icons/source/Export.svg is excluded by !**/*.svg
src/shared/icons/source/FadersHorizontal.svg is excluded by !**/*.svg
src/shared/icons/source/GoogleIcon.svg is excluded by !**/*.svg
src/shared/icons/source/HeartStraight.svg is excluded by !**/*.svg
src/shared/icons/source/HouseSimple.svg is excluded by !**/*.svg
src/shared/icons/source/KakaoIcon.svg is excluded by !**/*.svg
src/shared/icons/source/MapPin.svg is excluded by !**/*.svg
src/shared/icons/source/MapPin_.svg is excluded by !**/*.svg
src/shared/icons/source/Save.svg is excluded by !**/*.svg
src/shared/icons/source/User.svg is excluded by !**/*.svg
src/shared/icons/source/backto.svg is excluded by !**/*.svg
src/shared/icons/source/x.svg is excluded by !**/*.svg

📒 Files selected for processing (6)

src/pages/auth/index.tsx (4 hunks)
src/pages/index.tsx (1 hunks)
src/shared/components/button/AddressCopy.tsx (3 hunks)
src/shared/components/container/Card.tsx (1 hunks)
src/shared/icons/components/icon.tsx (3 hunks)
svgo.config.mjs (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (3)

src/pages/index.tsx (2)

src/shared/icons/components/icon.tsx (1)

Icon (55-109)

src/shared/icons/index.ts (1)

Icon (21-21)

src/pages/auth/index.tsx (1)

src/pages/auth/components/LoginButton.tsx (1)

LoginButton (33-67)

src/shared/components/button/AddressCopy.tsx (1)

src/shared/lib/utils.ts (1)

cn (71-73)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

🔇 Additional comments (9)

src/shared/components/container/Card.tsx (1)

14-16: 반응형 너비로의 전환이 적절합니다.

고정 너비에서 w-full로 변경하여 카드 컴포넌트가 컨테이너에 맞춰 유연하게 조정됩니다. 높이와 내부 레이아웃은 그대로 유지되어 일관성이 보장됩니다.

src/pages/auth/index.tsx (1)

9-15: 최근 로그인 플랫폼 추적 로직이 올바릅니다.

상태 관리와 클릭 핸들러가 적절하게 구현되어 사용자가 마지막으로 클릭한 로그인 플랫폼을 추적합니다.

src/shared/components/button/AddressCopy.tsx (2)

61-78: 텍스트 잘림 처리와 아이콘 전환 로직이 우수합니다.

flex-shrink-0으로 아이콘 크기 보호

flex-1 min-w-0과 truncate 클래스로 텍스트 오버플로우 처리

title 속성으로 전체 텍스트 접근성 제공

복사 상태에 따른 아이콘 전환으로 시각적 피드백 제공

이러한 구현은 긴 주소 텍스트를 우아하게 처리하며 사용자 경험을 향상시킵니다.

26-27: 리뷰 의견이 사실에 기반하지 않습니다.

검증 결과, AddressCopy 컴포넌트는 현재 전체 코드베이스에서 단 한 곳도 사용되지 않습니다. 따라서 Props API 변경이 기존 사용처에 영향을 주지 않습니다.

AddressCopy 컴포넌트의 유일한 사용처는 정의 파일 자체뿐

src/shared/components/index.ts에서 내보내지 않음

JSX에서 인스턴스화되는 곳이 없음

변경사항 (label 제거, value/truncate 추가)은 현재 유효한 breaking change가 아닙니다. 이 컴포넌트가 향후 사용될 예정이거나 내부 전용 컴포넌트라면 문제가 없습니다.

Likely an incorrect or invalid review comment.

src/pages/index.tsx (1)

8-25: 데모 페이지가 프로덕션용인지 확인하세요.

현재 홈페이지가 세 개의 아이콘만 표시하도록 변경되었습니다. 이는 새로운 fillColor 기능을 테스트하기 위한 임시 데모로 보이며, 프로덕션 환경에는 적합하지 않습니다.

이 변경사항이 의도적인 프로덕션 변경인지, 아니면 개발/테스트 중 실수로 포함된 것인지 확인해주세요. 만약 데모/테스트 목적이라면 별도의 테스트 페이지로 분리하거나 이 PR에서 제외하는 것을 권장합니다.

src/shared/icons/components/icon.tsx (3)

48-48: fillColor 속성 추가가 타입 안전하게 구현되었습니다.

새로운 fillColor 속성이 기존 IconColor 타입을 재사용하여 타입 안전성을 보장합니다.

97-98: fill과 stroke의 조건부 로직이 정확합니다.

fill과 stroke 속성의 처리 방식이 올바르게 구현되었습니다:

fillColor가 있으면 CSS 변수로 채우기, 없으면 투명

color가 있으면 currentColor로 외곽선, 없으면 외곽선 없음

이 로직은 다음 4가지 경우를 모두 지원합니다:

둘 다 없음: 투명 아이콘

color만: 외곽선만

fillColor만: 채우기만

둘 다: 채우기 + 외곽선

89-94: CSS 변수가 모두 정의되어 있음 - 문제 없음

코드베이스 검증 결과, 모든 CSS 커스텀 변수가 완벽하게 정의되어 있습니다.

src/styles/globals.css의 @theme 블록에 모든 --color-* 변수가 정의됨 (mint, pink, gray, blue, red 포함)

IconColor 타입이 정의된 색상 목록과 CSS 변수 정의가 정확하게 일치

타입 시스템이 유효한 색상만 전달되도록 보장

--fill-color는 올바르게 인라인 CSS 커스텀 프로퍼티로 생성되며, var(--color-${fillColor})를 참조

코드는 안전하고 문제가 없습니다.

svgo.config.mjs (1)

1-7: 검토 의견이 현재 코드베이스 상태와 일치하지 않습니다.

검토 의견에서 언급한 removeAttrs와 addAttributesToSVGElement 플러그인이 현재 svgo.config.mjs에 존재하지 않습니다. 현재 설정은 preset-default와 removeDimensions만 포함하고 있습니다.

또한 SVG 파일들은 이미 stroke="currentColor" 속성을 보유하고 있으며, Icon 컴포넌트는 이미 color와 fillColor props를 통해 동적 속성 처리를 올바르게 구현하고 있습니다. 따라서 검토 의견에서 우려한 렌더링 변경은 발생하지 않습니다.

Likely an incorrect or invalid review comment.

jjangminii

이걸 드디어 해결했네요-! 다만 궁금한점이 있습니다

기존 코드에서 너비,높이 지정이 되어 있으면 원하는 사이즈로 조정이 힘들어 viewBox만 남기고 삭제하는걸로 자동화 해뒀었는데 이 pr에서 viewBox를 추가적으로 지운 이유가 궁금합니다-!

그리거 혹시 아이콘이 추후 추가된다면 stroke, fill 자동화 부분이 사라졌는데 이건 수동으로 해결해야하나요?

KongMezu · 2025-10-28T16:08:46Z

이걸 드디어 해결했네요-! 다만 궁금한점이 있습니다

기존 코드에서 너비,높이 지정이 되어 있으면 원하는 사이즈로 조정이 힘들어 viewBox만 남기고 삭제하는걸로 자동화 해뒀었는데 이 pr에서 viewBox를 추가적으로 지운 이유가 궁금합니다-!

그리거 혹시 아이콘이 추후 추가된다면 stroke, fill 자동화 부분이 사라졌는데 이건 수동으로 해결해야하나요?

현재 아이콘이 더 추가될 거 같지 않아 사실상 자동화 대신 기존 코드에서 제약을 줄이는 방향으로 가게 되었습니다. 이 부분에서는 아이콘 추가에 대한 강제성을 두어.. 추후에 다시 고려해봐야할거 같습니다.
fill/stroke 자동화는 오히려 토큰화와 컬러 분리에 제약이 생겨 제거하게 되었고
또 ViewBox의 경우는 icon.tsx 파일 내에서 고정 선언(viewBox="0 0 24 24")하는 걸로 바꿨습니다.
기존 처럼 SVG 원본의 비율은 유지하면서 크기, 색상 모두 동적으로 할당할 수 있는 방향을 초점을 뒀습니다.

jjangminii · 2025-10-28T16:19:11Z

현재 아이콘이 더 추가될 거 같지 않아 사실상 자동화 대신 기존 코드에서 제약을 줄이는 방향으로 가게 되었습니다. 이 부분에서는 아이콘 추가에 대한 강제성을 두어.. 추후에 다시 고려해봐야할거 같습니다. fill/stroke 자동화는 오히려 토큰화와 컬러 분리에 제약이 생겨 제거하게 되었고 또 ViewBox의 경우는 icon.tsx 파일 내에서 고정 선언(viewBox="0 0 24 24")하는 걸로 바꿨습니다. 기존 처럼 SVG 원본의 비율은 유지하면서 크기, 색상 모두 동적으로 할당할 수 있는 방향을 초점을 뒀습니다.

음 ViewBox를 굳이 icon.tsx 파일 내에서 고정 선언 해야하는 이유가 있었나요? 현재 아이콘이 하나 빼고는 다 같은 크기이기도 하고 비율은 같아서 현재 방식으로는 문제가 없을 수 있겠지만 추후 아이콘이 달라지거나 다른 비율의 아이콘이 추가 될 수 도 있을 것같아 이 방식의 장점은 잘 모르겠어요

The merge-base changed after approval.

KongMezu · 2025-10-29T03:07:48Z

현재 아이콘이 더 추가될 거 같지 않아 사실상 자동화 대신 기존 코드에서 제약을 줄이는 방향으로 가게 되었습니다. 이 부분에서는 아이콘 추가에 대한 강제성을 두어.. 추후에 다시 고려해봐야할거 같습니다. fill/stroke 자동화는 오히려 토큰화와 컬러 분리에 제약이 생겨 제거하게 되었고 또 ViewBox의 경우는 icon.tsx 파일 내에서 고정 선언(viewBox="0 0 24 24")하는 걸로 바꿨습니다. 기존 처럼 SVG 원본의 비율은 유지하면서 크기, 색상 모두 동적으로 할당할 수 있는 방향을 초점을 뒀습니다.

음 ViewBox를 굳이 icon.tsx 파일 내에서 고정 선언 해야하는 이유가 있었나요? 현재 아이콘이 하나 빼고는 다 같은 크기이기도 하고 비율은 같아서 현재 방식으로는 문제가 없을 수 있겠지만 추후 아이콘이 달라지거나 다른 비율의 아이콘이 추가 될 수 도 있을 것같아 이 방식의 장점은 잘 모르겠어요

기존에 있던 플러그인 2개를 제거함으로 써, 로컬로 실행시켰을 때, viewBox 속성이 누락되는 것을 확인했습니다. 여기 다른 곳에서도 동일한 이슈가 있더라고요 다른 이슈
하지만 2개 플러그인을 계속 유지하기엔 fill과 stroke 속성을 강제하고 덮어씌우고 있어 여전히 저희의 문제인 fill color 문제를 해결할 수 없는 상황이었습니다.

그래서 저는 이버 fix 에서는 fill과 stroke 동적할다을 우선시 해 플러그인을 제거하면서, viewbox를 명시할 수 밖에 없었던.. 어쩔 수 없는 선택이었습니다.

The merge-base changed after approval.

…/svgo

coderabbitai

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/shared/icons/index.ts (1)

1-20: 자동 생성 파일에 대한 수동 편집 불일치.

파일 상단의 주석은 "이 파일은 자동 생성 파일입니다. (직접 수정 금지)"라고 명시하고 있지만, PressStamp.svg 추가 및 backto.svg 순서 변경 등 수동 편집이 이루어졌습니다. 이는 다음 문제를 야기할 수 있습니다:

자동 생성 스크립트 재실행 시 변경사항이 덮어써질 수 있음

팀원들이 파일 수정 정책에 대해 혼란을 느낄 수 있음

다음 중 하나를 선택하세요:

파일이 실제로 자동 생성되는 경우, 아이콘 생성 스크립트를 업데이트하여 이러한 변경사항을 반영

파일이 수동 관리되는 경우, 주석을 제거하거나 "수동으로 관리됩니다"로 변경

♻️ Duplicate comments (1)

src/shared/icons/iconNames.ts (1)

1-22: 자동 생성 파일 주석과 수동 편집의 불일치.

iconNames.ts 파일도 index.ts와 동일하게 자동 생성 파일로 표시되어 있으나 PressStamp가 수동으로 추가되었습니다. 아이콘 시스템의 일관성을 위해 생성 스크립트를 업데이트하거나 주석을 수정해야 합니다.

참고: src/shared/icons/index.ts에서도 동일한 문제가 발견되었습니다.

🧹 Nitpick comments (3)

src/pages/main/components/board/Boardgame.tsx (1)
36-45: 클릭 가능한 요소에 시각적 피드백을 추가하세요.

현재 div 요소가 클릭 가능하지만 시각적 표시가 없어 사용자가 인터랙티브 요소임을 인지하기 어렵습니다. 커서 스타일과 호버 효과를 추가하는 것을 권장합니다.

다음 diff를 적용하여 클릭 가능한 요소임을 명확히 표시하세요:
              <div
                key={key}
+               className='cursor-pointer hover:opacity-80 transition-opacity'
                onClick={() => {
                  // TODO : 로그인 여부 체크
                  router.push({
                    pathname: '/main/Node',
                    query: { label: cell.label },
                  });
                }}
              ></div>
src/shared/utils/handleGetLocation.ts (2)
5-8: 브라우저 미지원 시 에러 콜백 호출을 고려하세요.

현재 구현은 브라우저가 Geolocation을 지원하지 않을 때 조용히 반환합니다. 호출자가 실패를 처리할 수 있도록 onError 콜백을 호출하는 것이 더 일관된 에러 처리 패턴입니다.

다음과 같이 개선할 수 있습니다:
 export const getLocation = (
   onSuccess: (pos: GeolocationPosition) => void,
   onError?: (err: GeolocationPositionError) => void,
 ) => {
   if (!navigator.geolocation) {
     console.error('❌ 현재 브라우저에서 위치 정보 사용이 불가능합니다.');
+    onError?.({
+      code: 0,
+      message: '현재 브라우저에서 위치 정보 사용이 불가능합니다.',
+      PERMISSION_DENIED: 1,
+      POSITION_UNAVAILABLE: 2,
+      TIMEOUT: 3,
+    } as GeolocationPositionError);
     return;
   }
6-6: i18n 고려사항: 에러 메시지 다국어화.

현재 에러 메시지가 한국어로만 작성되어 있습니다. 향후 서비스가 국제화될 가능성을 고려하면, 에러 메시지를 영어로 작성하거나 i18n 시스템을 도입하는 것을 권장합니다.

예시:
console.error('❌ Geolocation is not supported by this browser.');

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7cac66c and 8641bd5.

⛔ Files ignored due to path filters (1)

src/shared/icons/source/PressStamp.svg is excluded by !**/*.svg

📒 Files selected for processing (8)

src/pages/main/Board.tsx (1 hunks)
src/pages/main/HiddenReward.tsx (1 hunks)
src/pages/main/Node.tsx (1 hunks)
src/pages/main/components/board/Boardgame.tsx (2 hunks)
src/pages/main/index.tsx (1 hunks)
src/shared/icons/iconNames.ts (1 hunks)
src/shared/icons/index.ts (1 hunks)
src/shared/utils/handleGetLocation.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/pages/main/Node.tsx (2)

src/shared/lib/utils.ts (1)

cn (71-73)

src/shared/utils/handleGetLocation.ts (1)

getLocation (1-15)

🪛 GitHub Actions: Next.js CI/CD with Vercel

src/pages/main/HiddenReward.tsx

[warning] 2-2: 'Image' is defined but never used. @typescript-eslint/no-unused-vars

[warning] 6-6: router is assigned a value but never used. @typescript-eslint/no-unused-vars

src/pages/main/Node.tsx

[error] 64-64: Type '{ variant: "mint"; value: string; label: string; }' is not assignable to type 'IntrinsicAttributes & AddressCopyProps'. Property 'label' does not exist on type 'AddressCopyProps'.

🔇 Additional comments (3)

src/pages/main/components/board/Boardgame.tsx (1)

4-7: 라우터 통합이 올바르게 구현되었습니다.

useRouter 훅을 사용한 라우터 통합이 적절하며, Next.js 15의 권장 패턴을 따르고 있습니다.

src/pages/main/index.tsx (1)

5-9: 라우터 훅 마이그레이션이 올바르게 완료되었습니다.

useRouter 훅으로의 마이그레이션이 Next.js 15의 권장 패턴을 따르고 있으며, PR 전반의 라우팅 변경사항과 일관성을 유지하고 있습니다.

src/pages/main/Board.tsx (1)

3-9: 라우터 통합이 깔끔하게 구현되었습니다.

useRouter 훅 사용과 router.back() 호출이 적절하며, PR의 다른 라우팅 변경사항들과 일관된 패턴을 따르고 있습니다.

coderabbitai · 2025-10-29T11:52:44Z

src/pages/main/HiddenReward.tsx

+import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+const HiddenReward = () => {
+  const router = useRouter();


⚠️ Potential issue | 🔴 Critical

사용하지 않는 import를 제거하세요.

파이프라인에서 감지한 대로 Image와 router가 선언되었으나 사용되지 않고 있습니다. 이는 빌드 경고를 발생시키며 코드 품질을 저하시킵니다.

다음 diff를 적용하여 사용하지 않는 import를 제거하세요:

'use client'; -import Image from 'next/image'; -import { useRouter } from 'next/router'; const HiddenReward = () => { - const router = useRouter(); - return (

참고: 향후 페이지 이동 로직을 구현할 때 router가 필요한 경우, 그때 다시 추가하세요.

🧰 Tools

🪛 GitHub Actions: Next.js CI/CD with Vercel

[warning] 2-2: 'Image' is defined but never used. @typescript-eslint/no-unused-vars

[warning] 6-6: router is assigned a value but never used. @typescript-eslint/no-unused-vars

🤖 Prompt for AI Agents

In src/pages/main/HiddenReward.tsx around lines 2 to 6, remove the unused imports and variables: delete the import of Image and the useRouter import and the router const since neither is referenced; update the import list to only include what this component actually uses (or remove the import block entirely if nothing remains). If you later need navigation or images, re-add useRouter/Image at that time.

coderabbitai · 2025-10-29T11:52:44Z

src/pages/main/HiddenReward.tsx

+        flex flex-col justify-center items-center text-center
+        overflow-hidden
+      '
+      onClick={() => console.log('히든 리워드 클릭: 다음 페이지 이동')}


🛠️ Refactor suggestion | 🟠 Major

프로덕션 코드에서 console.log를 제거하세요.

console.log는 개발 중 디버깅에는 유용하지만, 프로덕션 코드에서는 제거하거나 적절한 로깅 시스템으로 대체해야 합니다.

다음 중 하나를 선택하세요:

실제 페이지 이동 로직을 구현하고 console.log 제거

임시로 남겨야 하는 경우 // eslint-disable-next-line no-console 주석 추가 및 이슈 트래킹

onClick={() => console.log('히든 리워드 클릭: 다음 페이지 이동')} + // TODO: 실제 페이지 이동 로직 구현 필요 (이슈 #XX)

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents

In src/pages/main/HiddenReward.tsx around line 16, remove the production console.log in the onClick handler; either implement the real navigation (call the router/navigation function to go to the next page) and delete the console.log, or if you must keep a temporary log add "// eslint-disable-next-line no-console" above it and create a tracking issue referencing why it remains and when to remove it. Ensure production builds contain no plain console.log calls.

coderabbitai · 2025-10-29T11:52:44Z

src/pages/main/Node.tsx

+const Board = () => {
+  const router = useRouter();
+  const { label } = router.query;
+  const isStamp = true;


⚠️ Potential issue | 🟠 Major

하드코딩된 isStamp 값을 제거하고 실제 상태로 관리하세요.

isStamp가 true로 하드코딩되어 있어 Lines 29-32, 36, 45-49의 모든 조건부 로직이 의미가 없습니다. 이는 스탬프 누르기 전/후의 UI 상태를 표현하기 위한 것으로 보이므로, 실제 상태로 관리해야 합니다.

다음과 같이 수정하세요:

+import { useState } from 'react'; + const Board = () => { const router = useRouter(); const { label } = router.query; - const isStamp = true; + const [isStamp, setIsStamp] = useState(false); return ( <div className='relative w-full h-[100vh] overflow-auto px-[2.4rem]'> {/* ... */} <button className={cn('absolute bottom-0 right-0', isStamp && 'p-[2.5rem]')} onClick={() => getLocation( - (pos) => console.log('📍 현재 위치:', pos.coords), + (pos) => { + console.log('📍 현재 위치:', pos.coords); + setIsStamp(true); + // TODO: 리워드 페이지로 이동 + }, (err) => console.error('⚠️ 위치 에러:', err.message), - //TODO : 리워드 페이지로 이동 , 위치 에러일경우 모달창 + // TODO: 위치 에러일 경우 모달창 ) }

Committable suggestion skipped: line range outside the PR's diff.

coderabbitai · 2025-10-29T11:52:44Z

src/pages/main/Node.tsx

+                (pos) => console.log('📍 현재 위치:', pos.coords),
+                (err) => console.error('⚠️ 위치 에러:', err.message),
+                //TODO : 리워드 페이지로 이동 , 위치 에러일경우 모달창


🛠️ Refactor suggestion | 🟠 Major

프로덕션 코드에서 console.log 사용을 재고하세요.

console.log와 console.error가 프로덕션 코드에 포함되어 있습니다. 개발 단계에서는 유용하지만, 프로덕션 환경에서는 적절한 로깅 시스템이나 에러 핸들링으로 대체하는 것이 좋습니다.

TODO 주석에 언급된 대로 리워드 페이지 이동과 모달창 표시를 구현할 때 이러한 console 문을 제거하고 실제 로직으로 대체하세요.

🤖 Prompt for AI Agents

In src/pages/main/Node.tsx around lines 39 to 41, remove the console.log and console.error calls and replace them with production-safe handling: on success, invoke the existing navigation to the reward page (or call the provided route/redirect function) and record the event with the app logger (e.g., logger.info or analytics.event) instead of console.log; on error, trigger the UI error modal (use the project's modal/dialog helper) and log the error via the app logger or error reporting service (e.g., logger.error or Sentry.captureException) rather than console.error. Ensure the TODO behavior (navigate to reward page and show modal on location error) is implemented and that no console.* calls remain.

src/pages/main/Node.tsx

fix : SVGO 해결- stamp 보완전

9f32183

KongMezu requested review from jjangminii and skyblue1232 as code owners October 27, 2025 04:44

github-actions bot assigned KongMezu Oct 27, 2025

github-actions bot added the comment 필요한 주석 추가 및 변경 label Oct 27, 2025

coderabbitai bot reviewed Oct 27, 2025

View reviewed changes

fix : view box 추가

7cac66c

vercel bot deployed to Preview October 27, 2025 04:53 View deployment

KongMezu linked an issue Oct 27, 2025 that may be closed by this pull request

[fix] SVGO fill 오류 해결 #45

Closed

1 task

jjangminii reviewed Oct 28, 2025

View reviewed changes

jjangminii previously approved these changes Oct 28, 2025

View reviewed changes

jjangminii previously approved these changes Oct 29, 2025

View reviewed changes

KongMezu requested a review from jjangminii October 29, 2025 11:33

jjangminii previously approved these changes Oct 29, 2025

View reviewed changes

KongMezu added 3 commits October 29, 2025 20:45

fix : SVGO 해결- stamp 보완전

40d68cb

fix : view box 추가

81d7199

Merge branch 'fix/#45/svgo' of https://github.com/cukCS/FE into fix/#45…

8641bd5

…/svgo

vercel bot had a problem deploying to Preview October 29, 2025 11:48 Failure

fix : bulid 문제 해결

ad023b7

vercel bot deployed to Preview October 29, 2025 11:52 View deployment

coderabbitai bot reviewed Oct 29, 2025

View reviewed changes

fix : bulid 문제 해결

841b754

vercel bot deployed to Preview October 29, 2025 11:56 View deployment

fix : bulid 문제 해결

e913a45

vercel bot deployed to Preview October 29, 2025 11:57 View deployment

fix : bulid 문제 해결

af19597

vercel bot deployed to Preview October 29, 2025 12:01 View deployment

fix : bulid 문제 해결

bb9f104

vercel bot deployed to Preview October 29, 2025 12:05 View deployment

back : 기존코드

1ff9e92

vercel bot deployed to Preview October 29, 2025 12:08 View deployment

Merge branch 'develop' into fix/#45/svgo

baa28be

vercel bot deployed to Preview October 29, 2025 14:44 View deployment

KongMezu merged commit 3d69a1e into develop Oct 29, 2025
5 checks passed

This was referenced Oct 29, 2025

✨Feat: course setting-page ui 구현 #60

Merged

✨ Feat: course result 페이지 및 지도 페이지 구현 #64

Merged

This was referenced Nov 9, 2025

✨Feat : 로그인 디자인 수정 & api 연결 완료 #100

Merged

Api&feat: board api 연결 및 stamp 추가 #113

Merged

Api: 스탬프 획득 api 연동 및 페이지 분기 처리 #122

Merged

Conversation

KongMezu commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔥 작업 내용

🤔 추후 작업 사항

🔗 이슈

PR Point (To Reviewer)

리뷰는 icon.tsx 와 svg.config.mjs 만 보면 됩니다!

fill/stroke 컬러 분리 & 동적할당

svgo.config.mjs 수정

사용법

카카오, 구글은 별도의 SVG 사용

📸 피그마 스크린샷 or 기능 GIF

Summary by CodeRabbit

릴리스 노트

Uh oh!

vercel bot commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

github-actions bot commented Oct 27, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

jjangminii left a comment

Choose a reason for hiding this comment

Uh oh!

KongMezu commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jjangminii commented Oct 28, 2025

Uh oh!

KongMezu commented Oct 29, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

KongMezu commented Oct 27, 2025 •

edited

Loading

vercel bot commented Oct 27, 2025 •

edited

Loading

coderabbitai bot commented Oct 27, 2025 •

edited

Loading

KongMezu commented Oct 28, 2025 •

edited

Loading