[FE] SISC1-182 [FIX] 로그인, 회원가입 페이지 기능&디자인 수정 #60
Conversation
Walkthrough루트 라우트가 Login 대신 Home을 렌더링하도록 변경됨. 로그인 UI 구조와 스타일이 재구성되었고, 소셜 로그인 버튼이 Naver→GitHub로 교체됨. 회원가입은 닉네임·휴대폰 인증 흐름으로 개편되어 인증번호 전송 상태를 관리. 일부 CSS가 삭제/치환됨. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant SU as SignUpForm
participant VS as VerificationService (mock)
U->>SU: 휴대폰 번호 입력
U->>SU: "인증번호 전송" 클릭
SU->>VS: sendVerificationCode(phone)
VS-->>SU: 전송 완료
SU->>SU: isVerificationNumberSent = true
U->>SU: 인증번호 입력
U->>SU: 회원가입 제출
SU->>SU: 폼 검증(닉네임/전화/인증번호/이메일)
alt 검증 성공
SU-->>U: 가입 진행
else 검증 실패
SU-->>U: 에러 표시
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 6
🧹 Nitpick comments (2)
frontend/src/components/signup/SignUpForm.jsx (2)
27-29: 전화번호 정규식 검증을 강화하세요.현재 정규식
/^0\d{8,10}$/는 0으로 시작하는 9-11자리 숫자를 허용하지만, 한국 전화번호 형식을 정확히 검증하지 못합니다.더 정확한 한국 휴대전화번호 형식을 검증하는 정규식을 사용하는 것을 고려하세요:
const isPhoneNumberValid = () => { - const phoneRegex = /^0\d{8,10}$/; + const phoneRegex = /^01[0-9]-?\d{3,4}-?\d{4}$/; return phoneRegex.test(phoneNumber); };이 정규식은 하이픈 유무와 관계없이
010-1234-5678또는01012345678형식을 모두 허용합니다.
39-45: 휴대전화 인증 로직 구현이 필요합니다.현재
handleSendVerificationNumber함수는 alert만 표시하는 플레이스홀더입니다. PR 설명에서 언급된 대로 실제 API 통합이 필요합니다.다음 사항을 확인하세요:
- 인증번호 발송 API 엔드포인트가 준비되었는지
- 인증번호 유효성 검증 로직이 어디에 구현될 예정인지
- 인증 성공/실패 시 사용자 피드백 처리 방법
실제 API 통합 코드 구현을 도와드릴까요?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
frontend/src/assets/github.pngis excluded by!**/*.pngfrontend/src/assets/google.pngis excluded by!**/*.pngfrontend/src/assets/kakao.pngis excluded by!**/*.png
📒 Files selected for processing (8)
frontend/src/App.jsx(1 hunks)frontend/src/components/LoginAndSignUpForm.module.css(6 hunks)frontend/src/components/login/LoginForm.jsx(1 hunks)frontend/src/components/login/SocialLoginButtons.jsx(1 hunks)frontend/src/components/login/SocialLoginButtons.module.css(2 hunks)frontend/src/components/signup/SignUpForm.jsx(5 hunks)frontend/src/pages/Login.css(0 hunks)frontend/src/pages/LoginAndSignUp.module.css(1 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/pages/Login.css
🧰 Additional context used
🧬 Code graph analysis (2)
frontend/src/components/signup/SignUpForm.jsx (1)
frontend/src/components/VerificationModal.jsx (1)
phoneNumber(5-5)
frontend/src/App.jsx (1)
frontend/src/pages/Home.jsx (1)
Home(1-3)
🪛 Biome (2.1.2)
frontend/src/components/LoginAndSignUpForm.module.css
[error] 61-61: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
color is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
🔇 Additional comments (5)
frontend/src/components/login/LoginForm.jsx (1)
52-62: LGTM!헤더 구조가 로고와 타이틀을 포함하도록 잘 재구성되었습니다. 의미론적으로 더 명확한 구조이며, CSS 모듈의 새로운 스타일과 잘 통합됩니다.
frontend/src/pages/LoginAndSignUp.module.css (1)
7-7: LGTM!배경색 변경이 깔끔하게 적용되었습니다. shorthand
background속성 사용이 적절합니다.frontend/src/components/login/SocialLoginButtons.jsx (1)
7-7: LGTM!소셜 로그인 제공자를 Naver에서 GitHub로 변경한 것이 올바르게 반영되었습니다.
frontend/src/components/signup/SignUpForm.jsx (1)
59-68: LGTM!헤더 구조가 로그인 폼과 일관되게 잘 구현되었습니다.
frontend/src/components/LoginAndSignUpForm.module.css (1)
138-161: LGTM!인증 버튼의 스타일링이 새로운 디자인 가이드라인에 맞게 잘 업데이트되었습니다. 버튼 크기, 색상, 타이포그래피가 일관성 있게 적용되었습니다.
| <Route path="/signup" element={<SignUp />} /> | ||
| <Route element={<Layout />}> | ||
| <Route path="/" element={<Login />} /> | ||
| <Route path="/" element={<Home />} /> |
There was a problem hiding this comment.
🧩 Analysis chain
빈 Home 컴포넌트로의 라우팅 변경을 확인하세요.
루트 경로가 Login에서 Home으로 변경되었습니다. 제공된 코드 스니펫에 따르면 Home 컴포넌트는 현재 빈 div만 반환합니다. 다음 사항을 확인해주세요:
- 이 변경이 의도된 것인지 (예: 개발 중이거나 다른 PR에서 구현 예정)
- 인증되지 않은 사용자가 루트 경로에 접근할 때 로그인 페이지로 리디렉션되는 로직이 있는지
- 빈 Home 페이지가 사용자에게 표시되지 않도록 보호 장치가 마련되어 있는지
다음 스크립트를 실행하여 Home 컴포넌트의 현재 구현을 확인하세요:
🏁 Script executed:
#!/bin/bash
# Description: Home 컴포넌트의 구현 확인
# Home 컴포넌트 파일 내용 확인
cat frontend/src/pages/Home.jsx
# 인증 관련 리디렉션 로직이 있는지 확인
rg -n "useNavigate|Navigate.*login|redirect" frontend/src/pages/Home.jsx frontend/src/components/Layout.jsxLength of output: 67
루트 경로를 빈 Home 컴포넌트로 변경하며 인증 제어 로직이 없습니다
- Home 컴포넌트가
<div></div>만 반환합니다. - 인증되지 않은 사용자의 루트 접근 시 로그인 페이지로 리디렉션하지 않습니다.
변경 의도를 확인하고, 루트 접근에 대한 인증 리디렉션을 구현하세요.
🤖 Prompt for AI Agents
In frontend/src/App.jsx around line 22, the Route for "/" currently renders an
empty Home component and lacks authentication control; implement an auth gate so
unauthenticated users are redirected to "/login". Either replace the Route
element with a ProtectedRoute wrapper that reads auth state (from your auth
context/store) and navigates to "/login" when unauthenticated, or add an auth
check inside Home that reads the same auth state and uses navigation (or
<Navigate />) to send unauthenticated users to "/login"; if authenticated,
render the actual Home UI instead of an empty <div />.
There was a problem hiding this comment.
@NaturalSoda4552, 알겠습니다! 나중에 수정하시는 것으로 확인했습니다.
이 작업을 추적하기 위해 별도의 이슈를 생성하시겠습니까? 원하신다면 인증 제어 로직 추가에 대한 후속 이슈를 만들어 드릴 수 있습니다.
| type="button" | ||
| className={`${styles.btn} ${styles.google}`} | ||
| onClick={onGoogle} | ||
| alt="구글로 로그인" |
There was a problem hiding this comment.
button 요소에서 잘못된 alt 속성을 제거하세요.
alt 속성은 <img> 요소에만 유효합니다. <button> 요소에는 적용할 수 없으며, HTML 유효성 검사에 실패합니다. 대신 aria-label 속성을 사용하여 접근성을 개선하세요.
다음 diff를 적용하여 수정하세요:
<button
type="button"
className={`${styles.btn} ${styles.google}`}
onClick={onGoogle}
- alt="구글로 로그인"
+ aria-label="구글로 로그인"
>
<button
type="button"
className={`${styles.btn} ${styles.github}`}
onClick={onGithub}
- alt="깃허브로 로그인"
+ aria-label="깃허브로 로그인"
>
<button
type="button"
className={`${styles.btn} ${styles.kakao}`}
onClick={onKakao}
- alt="카카오로 로그인"
+ aria-label="카카오로 로그인"
>Also applies to: 25-25, 37-37
🤖 Prompt for AI Agents
In frontend/src/components/login/SocialLoginButtons.jsx around lines 15, 25 and
37, the button elements incorrectly use an alt attribute (valid only on img);
remove the alt attributes from those <button> tags and add appropriate
aria-label attributes (e.g., aria-label="Sign in with Google" or matching
provider) to preserve accessibility and HTML validity; ensure no alt remains on
buttons and run a quick lint/validator to confirm.
There was a problem hiding this comment.
@NaturalSoda4552, 감사합니다! 수정해 주셔서 감사합니다. button 요소에 aria-label 속성을 사용하면 접근성과 HTML 표준 준수가 개선됩니다. 👍
| src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg" | ||
| alt="구글로 로그인" | ||
| /> | ||
| <img src={googleIcon} /> |
There was a problem hiding this comment.
이미지에 대체 텍스트를 추가하세요.
모든 <img> 요소에는 접근성을 위해 alt 속성이 필요합니다. 스크린 리더 사용자가 이미지의 목적을 이해할 수 있도록 의미 있는 대체 텍스트를 제공해야 합니다.
다음 diff를 적용하세요:
- <img src={googleIcon} />
+ <img src={googleIcon} alt="Google 아이콘" />
- <img src={githubIcon} />
+ <img src={githubIcon} alt="GitHub 아이콘" />
- <img src={kakaoIcon} />
+ <img src={kakaoIcon} alt="Kakao 아이콘" />Also applies to: 27-27, 39-39
🤖 Prompt for AI Agents
In frontend/src/components/login/SocialLoginButtons.jsx around lines 17, 27 and
39, the <img> tags are missing alt attributes; add meaningful alt text for each
image (e.g., "Sign in with Google" for the Google icon, equivalent descriptive
text for the other icons) so screen readers convey the button purpose, or use an
empty alt="" only if the image is strictly decorative and its purpose is already
conveyed by adjacent text/button labels.
| .btnText .githubBtnText { | ||
| color: #fff; | ||
| } |
There was a problem hiding this comment.
CSS 선택자를 수정하세요.
현재 선택자 .btnText .githubBtnText는 .btnText 내부의 자식 요소인 .githubBtnText를 찾습니다. 하지만 JSX 코드(Line 28-30)를 보면 .githubBtnText는 .btnText와 함께 동일한 요소에 적용되는 클래스입니다.
다음 diff를 적용하세요:
-.btnText .githubBtnText {
+.btnText.githubBtnText {
color: #fff;
}📝 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.
| .btnText .githubBtnText { | |
| color: #fff; | |
| } | |
| .btnText.githubBtnText { | |
| color: #fff; | |
| } |
🤖 Prompt for AI Agents
frontend/src/components/login/SocialLoginButtons.module.css around lines 60 to
62: the selector ".btnText .githubBtnText" targets a child element but in JSX
the classes are applied to the same element; replace the descendant selector
with a combined class selector ".btnText.githubBtnText" (no space) and keep the
rule body the same so the style applies when both classes are present on the
same element.
| color: #555; | ||
| color: #000; | ||
| font-family: Pretendard; | ||
| font-size: 14px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| } |
There was a problem hiding this comment.
중복된 color 속성을 제거하세요.
Line 58에 color: #555;가 있고 Line 58에 color: #000;이 다시 선언되어 있습니다. 중복된 속성은 혼란을 야기하고 의도하지 않은 동작을 유발할 수 있습니다.
다음 diff를 적용하세요:
.inputGroup label {
display: block;
margin-bottom: 12px;
font-weight: 500;
- color: #555;
color: #000;
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}📝 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.
| color: #555; | |
| color: #000; | |
| font-family: Pretendard; | |
| font-size: 14px; | |
| font-style: normal; | |
| font-weight: 400; | |
| line-height: normal; | |
| } | |
| .inputGroup label { | |
| display: block; | |
| margin-bottom: 12px; | |
| font-weight: 500; | |
| color: #000; | |
| font-family: Pretendard; | |
| font-size: 14px; | |
| font-style: normal; | |
| font-weight: 400; | |
| line-height: normal; | |
| } |
🧰 Tools
🪛 Biome (2.1.2)
[error] 61-61: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
color is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
🤖 Prompt for AI Agents
frontend/src/components/LoginAndSignUpForm.module.css around lines 57 to 64:
there are duplicate color declarations (color: #555; and color: #000;); remove
the redundant one so only the intended color remains (e.g., delete color: #555;
and keep color: #000;) to avoid conflicting styles.
| type="phoneNumber" | ||
| id="text" |
There was a problem hiding this comment.
input 요소의 type과 id 속성을 수정하세요.
두 가지 오류가 있습니다:
type="phoneNumber"는 유효한 HTML input type이 아닙니다.type="tel"을 사용해야 합니다.id="text"는 휴대전화 입력 필드에 적합하지 않습니다.id="phoneNumber"를 사용해야 합니다.
다음 diff를 적용하세요:
<input
- type="phoneNumber"
- id="text"
+ type="tel"
+ id="phoneNumber"
value={phoneNumber}
onChange={(e) => setPhoneNumber(e.target.value)}
placeholder="ex) 01012345678"
className={styles.phoneNumberInput}
/>📝 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.
| type="phoneNumber" | |
| id="text" | |
| <input | |
| type="tel" | |
| id="phoneNumber" | |
| value={phoneNumber} | |
| onChange={(e) => setPhoneNumber(e.target.value)} | |
| placeholder="ex) 01012345678" | |
| className={styles.phoneNumberInput} | |
| /> |
🤖 Prompt for AI Agents
In frontend/src/components/signup/SignUpForm.jsx around lines 84-85, the input
uses an invalid type and wrong id; change type="phoneNumber" to type="tel" and
id="text" to id="phoneNumber" so the field is a valid telephone input and the id
matches the phoneNumber purpose.
| font-weight: 500; | ||
| color: #555; | ||
| color: #000; | ||
| font-family: Pretendard; |
There was a problem hiding this comment.
index.css 파일에서 전역으로 font-family: 'Pretendard'를 설정해뒀기 때문에 해당 속성은 중복 선언으로 지우셔도 됩니다.
| outline: none; | ||
|
|
||
| color: #aaa; | ||
| font-family: Pretendard; |
|
|
||
| color: #fff; | ||
| text-align: center; | ||
| font-family: Pretendard; |
| flex: 0 0 40px; | ||
| .btn .btnText { | ||
| /* color: #000; */ | ||
| font-family: Pretendard; |
| @@ -5,12 +5,15 @@ import sejong_logo from '../../assets/sejong_logo.png'; | |||
| import EmailVerificationModal from './../VerificationModal'; | |||
There was a problem hiding this comment.
모달 사용 안하실거면 해당 import문은 지워도 되지 않을까요?
| const [isModalOpen, setModalOpen] = useState(false); | ||
| const [confirmEmail, setConfirmEmail] = useState(false); | ||
|
|
||
| const [isVerificationNumberSent, setVerificationNumberSent] = useState(false); |
There was a problem hiding this comment.
isVerificationNumberSent는 선언만 되고 아직 사용은 안하셨는대 회원가입 제출 유효성 검사하는 isFormValid에 사용하실 생각이신가요?
| password === confirmPassword && | ||
| confirmEmail; | ||
| password === confirmPassword; | ||
|
|
There was a problem hiding this comment.
해당 로직에서 유효성 검사를 하는데 인증번호가 틀렸거나 비밀번호가 동일하지 않다던가 하는 경우에 버튼이 활성화가 되지 않는데 이때 인증번호가 틀렸습니다. 또는 비밀번호가 일치하지 않습니다.와 같은 안내 메시지를 넣어 알려주는 건 어떻게 생각하시나요?
3 participants
SISC1-182 로그인 및 회원가입 페이지 기능&디자인 수정
무엇을 변경했는지:
왜 변경했는지(문제/목표): 디자인이 변경되었으므로 수정
3) 스크린샷/동영상 (UI 변경 시)
전/후 비교, 반응형(모바일/데스크톱) 캡쳐
Before:
After:
상세 변경사항 (전부 다)
라우팅/페이지:
컴포넌트: LoginForm,jsx, SignUpForm.jsx, SocialLoginButtons.jsx(소셜로그인 버튼 그룹 컴포넌트),
상태관리:
API 호출:
스타일: LoginAndSignUpForm.module.css(로그인과 회원가입 페이지에서 같은 디자인 사용), SocialLoginButtons.module.css(소셜 로그인 버튼 그룹 디자인), LoginAndSignUp.module.css(배경 색 변경)
기타:
참고사항
Summary by CodeRabbit
New Features
Refactor
Style
Chores