깃허브 링크 연결하기 ( #issue 320 ) #349
Conversation
|
""" Walkthrough이 변경사항은 마이페이지에서 깃허브 링크 인증 기능을 도입하고, 관련된 UI 및 라우팅을 추가합니다. 깃허브 인증 성공/실패 시 모달 메시지와 함께 페이지 이동이 이루어지며, 깃허브 링크는 인증 후 자동으로 입력되고, 링크는 새 창에서 열리도록 스타일이 적용되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant EditProfile
participant OAuthGithub
participant ProfileGithubSuccess
participant Modal
participant Router
User->>EditProfile: "인증" 버튼 클릭
EditProfile->>OAuthGithub: 깃허브 OAuth URL로 리다이렉트
OAuthGithub-->>User: 인증 후 githubUrl 포함 리다이렉트
User->>ProfileGithubSuccess: /oauth/github-success?githubUrl=...
ProfileGithubSuccess->>Modal: 성공/실패 모달 표시
Modal-->>User: 모달 메시지 확인
ProfileGithubSuccess->>Router: 1초 후 EditProfile로 이동 (githubUrl state 전달)
Router->>EditProfile: githubUrl state로 진입
EditProfile->>User: 깃허브 링크 자동 입력 및 UI 갱신
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes(해당 변경사항에서는 모든 코드 변경이 이슈 #320의 요구사항과 직접적으로 연관되어 있습니다.) Suggested labels
Suggested reviewers
Poem
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
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/components/user/mypage/myProfile/editProfile/ProfileGithubSuccess.tsx (2)
16-16: 프로덕션 코드에서 console.log 제거 필요디버깅용 console.log가 남아있습니다. 프로덕션 배포 전에 제거해야 합니다.
- console.log(githubUrl);
13-31: useEffect 내부 로직 개선 제안현재 구현에서 개선할 수 있는 부분들이 있습니다:
- 비동기 작업이 없는데 async IIFE 사용
- 하드코딩된 1초 타이머
- 의존성 배열 최적화 가능
useEffect(() => { - (async () => { const githubUrl = searchParams.get('githubUrl'); - console.log(githubUrl); if (githubUrl) { handleModalOpen(MODAL_MESSAGE.githubProfileSuccess); setTimeout(() => { navigate(`${ROUTES.mypage}/${ROUTES.mypageEdit}`, { state: { githubUrl }, }); - }, 1000); + }, 1500); // 사용자가 메시지를 읽을 충분한 시간 제공 } else { handleModalOpen(MODAL_MESSAGE.githubProfileFail); setTimeout(() => { navigate(`${ROUTES.mypage}/${ROUTES.mypageEdit}`); - }, 1000); + }, 1500); } - })(); - }, [searchParams, handleModalOpen, navigate]); + }, [searchParams, handleModalOpen, navigate]);src/components/user/mypage/myProfile/editProfile/EditProfile.tsx (2)
68-74: 폼 리셋 로직의 중복 처리 개선 필요깃허브 값 삭제 시
reset과setValue를 모두 호출하고 있어 중복 처리가 발생할 수 있습니다.다음과 같이 단순화할 수 있습니다:
const handleClickDeleteGithubValue = () => { - reset({ - ...control._defaultValues, - github: '', - }); setValue('github', '', { shouldValidate: true, shouldDirty: true }); };
278-326: 깃허브 입력 필드 UI 개선이 잘 구현되었습니다.읽기 전용 입력 필드와 조건부 버튼 렌더링으로 사용자 경험이 크게 개선되었습니다. 인증/삭제 버튼의 토글 방식도 직관적입니다.
하지만 접근성 개선을 위해 다음 사항을 고려해보세요:
<InputText inputType='text' placeholder='깃허브 주소를 인증하면 자동으로 가져옵니다.' autoComplete='auto' readOnly + aria-label='깃허브 주소 입력 필드' {...field} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/components/user/mypage/myProfile/editProfile/EditProfile.styled.ts(2 hunks)src/components/user/mypage/myProfile/editProfile/EditProfile.tsx(6 hunks)src/components/user/mypage/myProfile/editProfile/ProfileGithubSuccess.tsx(1 hunks)src/components/user/mypage/myProfile/profile/Profile.styled.ts(3 hunks)src/components/user/mypage/myProfile/profile/Profile.tsx(2 hunks)src/constants/routes.ts(2 hunks)src/constants/user/modalMessage.ts(1 hunks)src/routes/AppRoutes.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/components/user/mypage/myProfile/profile/Profile.tsx (1)
src/constants/routes.ts (1)
ROUTES(1-33)
src/components/user/mypage/myProfile/editProfile/EditProfile.tsx (1)
src/api/http.api.ts (1)
BASE_URL(5-5)
src/routes/AppRoutes.tsx (2)
src/components/user/mypage/myProfile/editProfile/ProfileGithubSuccess.tsx (1)
ProfileGithubSuccess(8-38)src/constants/routes.ts (1)
ROUTES(1-33)
src/components/user/mypage/myProfile/profile/Profile.styled.ts (1)
src/components/user/customerService/inquiry/Inquiry.styled.ts (1)
SendButton(205-222)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (15)
src/constants/user/modalMessage.ts (1)
33-34: 새로운 GitHub 모달 메시지가 적절히 추가되었습니다.기존 코드 패턴과 일치하며 한국어 메시지도 명확합니다.
src/constants/routes.ts (2)
32-32: GitHub OAuth 성공 처리용 라우트가 적절히 추가되었습니다.라우트 경로
/oauth/github-success가 OAuth 콜백 처리에 적합합니다.
54-58: Admin 라우트 일관성 개선과 타입 안전성 강화
appliedProject값을'applied-project'로 수정하여 일관성을 맞추고,as const를 추가하여 타입 안전성을 향상시켰습니다.src/components/user/mypage/myProfile/editProfile/EditProfile.styled.ts (2)
46-48: GitHub 컨테이너 스타일링이 적절합니다.85% 너비 설정이 기존 UI 패턴과 일치합니다.
60-75: GitHub 삭제 아이콘과 span 스타일 추가Flexbox 레이아웃과 SVG 크기 지정이 적절하게 구현되었습니다. 컴포넌트 명명도 목적에 맞게 명확합니다.
src/routes/AppRoutes.tsx (2)
50-55: ProfileGithubSuccess 컴포넌트의 lazy import가 적절합니다.컴포넌트 경로와 lazy loading 패턴이 기존 코드와 일치합니다.
119-122: GitHub 성공 라우트 추가 - 인증 없이 접근 가능한 점 확인 필요라우트가 적절한 위치에 추가되었지만, OAuth 콜백 처리 라우트가 인증 없이 접근 가능합니다. 이것이 의도된 동작인지 확인해 주세요.
OAuth 콜백 라우트의 보안을 확인하기 위해 다음을 검토해 주세요:
- GitHub OAuth 콜백에서 적절한 state 검증이 이루어지는지
- 악의적인 사용자가 임의의 githubUrl 파라미터로 접근할 수 있는지
src/components/user/mypage/myProfile/editProfile/ProfileGithubSuccess.tsx (1)
8-38: 전체적인 컴포넌트 구조는 적절합니다.GitHub OAuth 콜백 처리 로직이 명확하고, 성공/실패 케이스를 모두 적절히 처리합니다. 모달과 네비게이션을 통한 사용자 경험도 좋습니다.
src/components/user/mypage/myProfile/profile/Profile.tsx (2)
134-141: 깃허브 링크 조건부 렌더링이 잘 구현되었습니다.사용자의 깃허브 URL이 있을 때만 링크를 표시하고, 없을 때는 적절한 기본 메시지를 보여주는 로직이 정확합니다. 새 창에서 링크가 열리도록
target='_blank'속성도 적절히 설정되어 있습니다.
197-201: 비밀번호 재설정 링크 스타일링이 개선되었습니다.기존의 일반 Link 컴포넌트를 스타일드 컴포넌트로 변경하여 일관된 디자인을 적용한 것이 좋습니다.
as={Link}prop을 사용하여 라우팅 기능을 유지하면서 스타일링을 적용한 방식이 적절합니다.src/components/user/mypage/myProfile/editProfile/EditProfile.tsx (2)
82-89: 깃허브 URL 상태 처리 로직이 적절합니다.OAuth 콜백에서 전달된 깃허브 URL을 폼에 자동으로 설정하는 로직이 잘 구현되어 있습니다.
shouldValidate와shouldDirty옵션도 적절히 설정되어 있습니다.
39-42: 환경 변수 사용에 대한 검증이 필요합니다.깃허브 OAuth URL을 환경 변수에서 가져오고 있는데, 해당 환경 변수가 정의되지 않은 경우의 처리가 없습니다.
다음 스크립트로 환경 변수 사용을 확인해주세요:
#!/bin/bash # 환경 변수 VITE_APP_BASE_URL_GITHUB_LINK 사용 확인 rg -A 3 -B 3 "VITE_APP_BASE_URL_GITHUB_LINK"src/components/user/mypage/myProfile/profile/Profile.styled.ts (3)
1-3: 새로운 의존성 추가가 적절합니다.react-router-dom의 Link와 기존 SendButton 컴포넌트를 재사용하여 일관된 스타일링을 구현한 것이 좋습니다.
119-123: 깃허브 링크 호버 효과가 잘 구현되었습니다.Link 컴포넌트를 확장하여 호버 시 색상 변경 효과를 추가한 것이 사용자 경험 개선에 도움이 됩니다. 테마 색상을 활용한 것도 좋습니다.
175-181: 비밀번호 변경 링크 스타일링이 적절합니다.기존 SendButton을 확장하여 일관된 디자인을 유지하면서 필요한 커스터마이징을 적용한 것이 좋습니다. 크기와 색상 조정이 적절해 보입니다.
…Auth URL 유효성 검사 추가
구현내용
깃허브 링크 연결하기
연관이슈
close #320
Summary by CodeRabbit
신규 기능
UI/스타일 개선
버그 수정
기타