[SRLT-128] QA #96
[SRLT-128] QA #96
Conversation
…into SRLT-128-출시-전-qa
Walkthrough랜딩 페이지의 여러 컴포넌트에 로그인 인증 게이팅 로직을 추가하여, 인증되지 않은 사용자가 특정 액션(사업계획서 작성, PDF 업로드 등)을 시도할 때 로그인 모달을 표시하도록 수정했습니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/app/_components/landing/Landing.tsx (1)
34-40: LGTM! 인증 게이팅 로직이 올바르게 적용되었습니다.두 버튼 모두 인증 상태에 따라 적절하게 동작합니다:
- 인증된 사용자: 의도한 액션 실행 (라우팅 또는 모달 열기)
- 비인증 사용자: 로그인 모달 표시
코드 중복 개선을 고려해보세요.
동일한 인증 게이팅 패턴이
Landing.tsx,StickyBar.tsx,LandingPaySection.tsx에 반복됩니다. 커스텀 훅으로 추출하면 유지보수성이 향상됩니다.♻️ 제안: 커스텀 훅으로 추출
새 파일
src/hooks/useAuthGate.ts생성:import { useState, useEffect } from 'react'; import { useAuthStore } from '@/store/auth.store'; export const useAuthGate = () => { const [isLoginModalOpen, setIsLoginModalOpen] = useState(false); const { isAuthenticated, checkAuth } = useAuthStore(); useEffect(() => { checkAuth(); }, [checkAuth]); const gateAction = (action: () => void) => { if (isAuthenticated) { action(); } else { setIsLoginModalOpen(true); } }; return { isLoginModalOpen, setIsLoginModalOpen, gateAction, }; };그런 다음 각 컴포넌트에서 사용:
- const [isLoginModalOpen, setIsLoginModalOpen] = useState(false); - const { isAuthenticated, checkAuth } = useAuthStore(); - - useEffect(() => { - checkAuth(); - }, [checkAuth]); + const { isLoginModalOpen, setIsLoginModalOpen, gateAction } = useAuthGate(); <button - onClick={() => { - if (isAuthenticated) { - router.push('/business'); - } else { - setIsLoginModalOpen(true); - } - }} + onClick={() => gateAction(() => router.push('/business'))} >Also applies to: 46-52
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
public/images/landing/landing_expert1.pngis excluded by!**/*.pngpublic/images/landing/landing_expert2.pngis excluded by!**/*.pngpublic/images/landing/landing_expert3.pngis excluded by!**/*.pngsrc/assets/icons/black_check.svgis excluded by!**/*.svgsrc/assets/icons/polygon.svgis excluded by!**/*.svg
📒 Files selected for processing (6)
src/app/_components/landing/Landing.tsxsrc/app/_components/landing/LandingPaySection.tsxsrc/app/_components/landing/LandingRelation.tsxsrc/app/_components/landing/StickyBar.tsxsrc/app/expert/detail/components/ExpertDetailSidebar.tsxsrc/app/mypage/components/MyAccount.tsx
🧰 Additional context used
🧬 Code graph analysis (3)
src/app/_components/landing/LandingPaySection.tsx (1)
src/store/auth.store.ts (1)
useAuthStore(11-31)
src/app/_components/landing/StickyBar.tsx (1)
src/store/auth.store.ts (1)
useAuthStore(11-31)
src/app/_components/landing/Landing.tsx (1)
src/store/auth.store.ts (1)
useAuthStore(11-31)
🔇 Additional comments (9)
src/app/expert/detail/components/ExpertDetailSidebar.tsx (1)
50-58: LGTM! 아이콘과 텍스트의 일관성 개선
hasRequested상태에서 아이콘을GrayPlus에서GrayCheck로 변경한 것은 적절합니다. "신청완료" 텍스트와 체크 아이콘이 의미상 더 잘 맞으며, 사용자에게 명확한 시각적 피드백을 제공합니다.src/app/mypage/components/MyAccount.tsx (2)
7-50: 컴포넌트 단순화 승인요금제 관리 UI 제거 및 반응형 레이아웃(full-width) 변경이 적절하게 구현되었습니다. 사용자 프로필 표시 로직은 그대로 유지되어 기존 기능이 보존되었습니다.
다만, 제거된 요금제 관리 기능이 다른 곳에서 여전히 필요한 경우, 해당 기능이 앱의 다른 곳에서 처리되는지 확인하시기 바랍니다.
11-12:bg-gray-80은 표준 Tailwind 클래스가 아니라 프로젝트의 커스텀 색상입니다.src/app/globals.css의--color-gray-80: #f8f9fc;로 정의되어 있으며, 전체 코드베이스에서 일관되게 사용되고 있습니다. 문제 없습니다.src/app/_components/landing/LandingRelation.tsx (1)
42-49: LGTM! 이미지 재배치가 적절합니다.관련 기관 이미지를 컴포넌트 상단으로 이동한 변경사항이 올바르게 구현되었습니다. Next.js Image 컴포넌트의
priority속성을 사용하여 above-the-fold 콘텐츠를 최적화한 점도 좋습니다.src/app/_components/landing/Landing.tsx (2)
15-20: LGTM! 인증 상태 초기화가 올바르게 구현되었습니다.컴포넌트 마운트 시
checkAuth()를 호출하여 인증 상태를 확인하는 로직이 적절합니다. Zustand store의 함수는 안정적인 참조를 제공하므로 의존성 배열에checkAuth를 포함하는 것이 안전합니다.
75-78: LGTM! 로그인 모달이 올바르게 렌더링됩니다.모달의 open/close 상태 관리가 적절하게 구현되었습니다.
src/app/_components/landing/StickyBar.tsx (1)
16-21: LGTM! 인증 게이팅이 일관되게 구현되었습니다.
Landing.tsx와 동일한 패턴으로 인증 로직이 올바르게 적용되었습니다. 두 버튼 모두 인증 상태에 따라 적절하게 동작하며, 로그인 모달도 올바르게 렌더링됩니다.이 파일 역시
Landing.tsx및LandingPaySection.tsx와 동일한 코드 중복 패턴을 포함하고 있습니다.Landing.tsx리뷰에서 제안한 커스텀 훅 추출을 고려해주세요.Also applies to: 34-40, 47-53, 64-64
src/app/_components/landing/LandingPaySection.tsx (2)
13-18: LGTM! 인증 로직이 일관되게 구현되었습니다.다른 랜딩 컴포넌트들과 동일한 패턴으로 인증 게이팅이 적용되었으며, CTA 버튼이 인증 상태에 따라 올바르게 동작합니다.
Landing.tsx에서 제안한 커스텀 훅 추출을 이 컴포넌트에도 적용하면 코드 중복을 제거할 수 있습니다.Also applies to: 100-106, 112-115
20-127: LGTM! 가격 섹션 UI가 효과적으로 개선되었습니다.새로운 두 컬럼 레이아웃이 대면 멘토링과 비대면 멘토링의 비용 차이를 명확하게 전달합니다. 다음 요소들이 잘 구현되었습니다:
- 비교 가격 표시 (300,000원 vs 0원)
- 시각적 계층 구조 (회색 vs 프라이머리 컬러)
- 할인가 표시 (취소선 처리된 49,000원)
- 폴리곤 아이콘을 통한 시각적 연결
#️⃣ 관련 이슈
✍️ 작업 내용 요약
💡 작업 내용
기능
🖥️ 구현 화면
x
기타 사항
x
Summary by CodeRabbit
릴리스 노트
New Features
UI Changes
✏️ Tip: You can customize this high-level summary in your review settings.