Feat/markup/login/DEVING-24 로그인 페이지 개발 #20
Conversation
…mService/Moim-FE into feat/markup/login/DEVING-24
…ice/Moim-FE into feat/markup/login/DEVING-24
…ice/Moim-FE into feat/markup/login/DEVING-24
…ice/Moim-FE into feat/markup/login/DEVING-24
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough이번 PR은 여러 새로운 의존성 추가와 함께, 로그인 및 회원가입 기능을 위한 새로운 컴포넌트와 커스텀 훅을 도입합니다. 또한 React Query 제공자를 활용하여 레이아웃 구조를 개선하고, Axios 인스턴스와 인터셉터를 통해 인증 관련 API 호출 로직을 추가하였습니다. 헤더 컴포넌트의 조건부 렌더링 로직을 반전시키는 수정도 포함되어 있습니다. Changes
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅ |
CI Status Report검사 결과
✅ 모든 검사가 통과되었습니다. |
CI Status Report검사 결과
✅ 모든 검사가 통과되었습니다. |
…e/Moim-FE into feat/markup/login/DEVING-24
…e/Moim-FE into feat/markup/login/DEVING-24
CI Status Report검사 결과
❌ 일부 검사가 실패했습니다. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/hooks/useDebounde.ts (1)
3-9: 문서화 개선 제안현재 문서화가 잘 되어있지만, 반환 값이나 사용 예시를 추가하면 더 좋을 것 같습니다.
JSDoc에 다음 내용을 추가하는 것을 제안드립니다:
/** * 특정 값이 변경된 후 지정된 시간이 지나면 콜백 함수를 실행하는 Debounce 훅 * * @param {T} value - 감지할 값 * @param {number} delay - 딜레이(ms) (기본값: 1000ms) * @param {Function} callback - 딜레이 후 실행할 콜백 함수 + * @returns {void} + * @example + * useDebounce({ + * value: searchTerm, + * delay: 500, + * callBack: () => validateSearch(searchTerm) + * }); */
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (9)
package.json(1 hunks)src/app/layout.tsx(2 hunks)src/app/login/page.tsx(1 hunks)src/components/common/Header.tsx(2 hunks)src/hooks/useDebounde.ts(1 hunks)src/hooks/useLoginForm.ts(1 hunks)src/lib/axios/authApi.ts(1 hunks)src/lib/serverActions.ts(1 hunks)src/styles/globals.css(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (7)
- src/lib/serverActions.ts
- src/styles/globals.css
- src/app/layout.tsx
- src/app/login/page.tsx
- src/hooks/useLoginForm.ts
- src/components/common/Header.tsx
- src/lib/axios/authApi.ts
🧰 Additional context used
🪛 GitHub Check: check
src/hooks/useDebounde.ts
[warning] 1-1:
'useState' is defined but never used. Allowed unused vars must match /^_/u
🔇 Additional comments (5)
package.json (5)
20-21: 검토: React Query 의존성 추가새로운
@tanstack/react-query및@tanstack/react-query-devtools의존성이 추가되었습니다. React Query를 활용한 데이터 페칭과 캐싱이 로그인 페이지와 관련 기능에 잘 활용될 것으로 보입니다. 이 변경 사항에 따른 사용법 문서와 예제를 참고하여 올바른 구현을 보장하시기 바랍니다.
23-23: 검토: Axios 의존성 추가
axios라이브러리가^1.7.9버전으로 추가되었습니다. API 요청 및 인터셉터 구성이 로그인 및 인증 흐름에 중요한 역할을 하므로, 최신 버전의 변경 사항을 확인하고 테스트하시기 바랍니다.
30-30: 검토: React Hook Form 의존성 추가
react-hook-form이^7.54.2버전으로 추가되어 로그인 폼의 입력 관리 및 유효성 검증에 활용될 예정입니다. 해당 라이브러리의 기능을 잘 활용하여 안정적인 폼 구현을 진행해주시기 바랍니다.
33-33: 검토: Zustand 의존성 추가상태 관리를 위해
zustand가^5.0.3버전으로 추가되었습니다. 간단하고 효율적인 글로벌 상태 관리를 지원하므로, 로그인 상태나 사용자 관련 정보를 관리하는 데 유용할 것입니다.
37-37: 검토: ESLint 플러그인 의존성 추가개발 의존성에
@tanstack/eslint-plugin-query가^5.66.1버전으로 추가되었습니다. 이는 React Query 관련 코드의 일관성과 품질을 유지하는 데 도움을 줄 것으로 보입니다. 적절히 설정하여 lint 규칙을 강화해 주세요.
| @@ -0,0 +1,32 @@ | |||
| import { useEffect, useState } from 'react'; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
사용하지 않는 import 제거 필요
useState를 import 했지만 코드에서 사용하지 않고 있습니다.
다음과 같이 수정해주세요:
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { useEffect, useState } from 'react'; | |
| import { useEffect } from 'react'; |
🧰 Tools
🪛 GitHub Check: check
[warning] 1-1:
'useState' is defined but never used. Allowed unused vars must match /^_/u
| useEffect(() => { | ||
| if (!value) return; | ||
| const timer = setTimeout(() => { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
빈 문자열 처리 로직 개선 필요
현재 구현에서는 빈 문자열("")이 falsy 값으로 처리되어 콜백이 실행되지 않습니다. 이는 사용자가 입력을 지웠을 때도 적절한 validation이 필요한 경우에 문제가 될 수 있습니다.
다음과 같이 수정하는 것을 제안드립니다:
useEffect(() => {
- if (!value) return;
+ if (value === null || value === undefined) return;
const timer = setTimeout(() => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| if (!value) return; | |
| const timer = setTimeout(() => { | |
| useEffect(() => { | |
| - if (!value) return; | |
| + if (value === null || value === undefined) return; | |
| const timer = setTimeout(() => { | |
| // callback logic here | |
| }, delay); | |
| return () => clearTimeout(timer); | |
| }, [value]); |
CI Status Report검사 결과
❌ 일부 검사가 실패했습니다. |
CI Status Report검사 결과
❌ 일부 검사가 실패했습니다. |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
src/app/login/page.tsx (1)
20-27: 접근성 개선을 위한 수정이 필요합니다.
- 페이지의 주요 영역을 semantic HTML을 사용하여 구분해주세요.
- 적절한 heading 태그를 추가하여 페이지 구조를 명확히 해주세요.
export default function Login() { return ( - <div className="flex min-h-screen flex-col items-center justify-center"> + <main className="flex min-h-screen flex-col items-center justify-center"> + <h1 className="sr-only">Deving 로그인</h1> <LoginForm /> <DummyUser /> - </div> + </main> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/app/login/components/DummyUser.tsx(1 hunks)src/app/login/page.tsx(1 hunks)
🧰 Additional context used
🪛 GitHub Check: check
src/app/login/page.tsx
[warning] 1-1:
'Button' is defined but never used. Allowed unused vars must match /^_/u
🔇 Additional comments (1)
src/app/login/page.tsx (1)
7-18: 메타데이터 설정을 환경에 맞게 개선해주세요.이전 리뷰 코멘트에서 지적된 메타데이터 관련 개선사항을 반영해주세요.
| email: '[email protected]', | ||
| password, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
테스트 계정 정보를 설정 파일로 분리해주세요.
이메일 주소가 코드에 직접 노출되어 있습니다. 테스트 계정 정보를 별도의 설정 파일로 분리하여 관리하는 것이 좋습니다.
src/config/testAccounts.ts 파일을 생성하여 다음과 같이 관리할 것을 제안합니다:
export const TEST_ACCOUNTS = [
{ email: '[email protected]', name: '강윤지' },
{ email: '[email protected]', name: '이윤재' },
{ email: '[email protected]', name: '이동석' },
{ email: '[email protected]', name: '이한나' },
] as const;그리고 컴포넌트를 다음과 같이 수정하세요:
+import { TEST_ACCOUNTS } from '@/config/testAccounts';
const DummyUser = () => {
// ...
return (
<div>
- <Button
- onClick={() =>
- mutate({
- email: '[email protected]',
- password,
- })
- }
- >
- 강윤지
- </Button>
- // ... other buttons
+ {TEST_ACCOUNTS.map(({ email, name }) => (
+ <Button
+ key={email}
+ onClick={() => mutate({ email, password })}
+ >
+ {name}
+ </Button>
+ ))}
</div>
);
};Also applies to: 30-31, 40-41, 50-51
|
|
||
| const DummyUser = () => { | ||
| const router = useRouter(); | ||
| const password = 'test1234'; |
There was a problem hiding this comment.
비밀번호를 코드에 직접 노출하지 마세요.
하드코딩된 비밀번호는 보안 위험을 초래할 수 있습니다. 환경 변수나 설정 파일을 통해 관리하는 것이 좋습니다.
- const password = 'test1234';
+ const password = process.env.NEXT_PUBLIC_TEST_PASSWORD;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const password = 'test1234'; | |
| const password = process.env.NEXT_PUBLIC_TEST_PASSWORD; |
| const DummyUser = () => { | ||
| const router = useRouter(); | ||
| const password = 'test1234'; | ||
|
|
||
| const { mutate } = useLoginMutation({ | ||
| onSuccessCallback: () => router.push('/'), | ||
| }); | ||
|
|
||
| return ( | ||
| <div> | ||
| <Button | ||
| onClick={() => | ||
| mutate({ | ||
| email: '[email protected]', | ||
| password, | ||
| }) | ||
| } | ||
| > | ||
| 강윤지 | ||
| </Button> | ||
| <Button | ||
| onClick={() => | ||
| mutate({ | ||
| email: '[email protected]', | ||
| password, | ||
| }) | ||
| } | ||
| > | ||
| 이윤재 | ||
| </Button> | ||
| <Button | ||
| onClick={() => | ||
| mutate({ | ||
| email: '[email protected]', | ||
| password, | ||
| }) | ||
| } | ||
| > | ||
| 이동석 | ||
| </Button> | ||
| <Button | ||
| onClick={() => | ||
| mutate({ | ||
| email: '[email protected]', | ||
| password, | ||
| }) | ||
| } | ||
| > | ||
| 이한나 | ||
| </Button> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
개발 환경에서만 DummyUser 컴포넌트가 렌더링되도록 수정해주세요.
프로덕션 환경에서 테스트 계정이 노출되지 않도록 환경 변수를 통해 조건부 렌더링을 추가하는 것이 좋습니다.
const DummyUser = () => {
+ if (process.env.NODE_ENV === 'production') {
+ return null;
+ }
const router = useRouter();
// ... rest of the component
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const DummyUser = () => { | |
| const router = useRouter(); | |
| const password = 'test1234'; | |
| const { mutate } = useLoginMutation({ | |
| onSuccessCallback: () => router.push('/'), | |
| }); | |
| return ( | |
| <div> | |
| <Button | |
| onClick={() => | |
| mutate({ | |
| email: '[email protected]', | |
| password, | |
| }) | |
| } | |
| > | |
| 강윤지 | |
| </Button> | |
| <Button | |
| onClick={() => | |
| mutate({ | |
| email: '[email protected]', | |
| password, | |
| }) | |
| } | |
| > | |
| 이윤재 | |
| </Button> | |
| <Button | |
| onClick={() => | |
| mutate({ | |
| email: '[email protected]', | |
| password, | |
| }) | |
| } | |
| > | |
| 이동석 | |
| </Button> | |
| <Button | |
| onClick={() => | |
| mutate({ | |
| email: '[email protected]', | |
| password, | |
| }) | |
| } | |
| > | |
| 이한나 | |
| </Button> | |
| </div> | |
| ); | |
| }; | |
| const DummyUser = () => { | |
| if (process.env.NODE_ENV === 'production') { | |
| return null; | |
| } | |
| const router = useRouter(); | |
| const password = 'test1234'; | |
| const { mutate } = useLoginMutation({ | |
| onSuccessCallback: () => router.push('/'), | |
| }); | |
| return ( | |
| <div> | |
| <Button | |
| onClick={() => | |
| mutate({ | |
| email: '[email protected]', | |
| password, | |
| }) | |
| } | |
| > | |
| 강윤지 | |
| </Button> | |
| <Button | |
| onClick={() => | |
| mutate({ | |
| email: '[email protected]', | |
| password, | |
| }) | |
| } | |
| > | |
| 이윤재 | |
| </Button> | |
| <Button | |
| onClick={() => | |
| mutate({ | |
| email: '[email protected]', | |
| password, | |
| }) | |
| } | |
| > | |
| 이동석 | |
| </Button> | |
| <Button | |
| onClick={() => | |
| mutate({ | |
| email: '[email protected]', | |
| password, | |
| }) | |
| } | |
| > | |
| 이한나 | |
| </Button> | |
| </div> | |
| ); | |
| }; |
| @@ -0,0 +1,27 @@ | |||
| import { Button } from '@/components/ui/Button'; | |||
There was a problem hiding this comment.
사용하지 않는 Button 컴포넌트 import를 제거해주세요.
-import { Button } from '@/components/ui/Button';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { Button } from '@/components/ui/Button'; | |
| // (The unused import statement has been removed) |
🧰 Tools
🪛 GitHub Check: check
[warning] 1-1:
'Button' is defined but never used. Allowed unused vars must match /^_/u
CI Status Report검사 결과
✅ 모든 검사가 통과되었습니다. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.github/workflows/pr-check.yml (1)
28-32: 환경 파일 생성 단계에서 파일 초기화 고려새롭게 추가된 Create .env file 단계는 secrets에 저장된 환경 변수를 올바르게 .env 파일에 기록하여 API 기본 URL 설정에 사용되는 점에서 좋습니다. 다만, 현재는
>>연산자를 사용하여 기존 .env 파일에 내용을 추가하기 때문에 이전 값이 남아있을 가능성이 있습니다.
이를 방지하기 위해 최초 기록 시>연산자를 사용하여 파일을 초기화한 후, 이후 추가 기록이 필요하면>>를 사용하는 방식을 고려해보세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
.github/workflows/pr-check.yml(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: check
📝 주요 작업 내용
📺 스크린샷
🔗 참고 사항
💬 리뷰 요구사항
📃 관련 이슈
DEVING-24
Summary by CodeRabbit
New Features
Style
Chores