Open
Conversation
📝 WalkthroughWalkthrough이 PR은 세 개의 React + TypeScript + Vite 프로젝트(mission1, mission2, mission3)를 추가합니다. mission1은 TMDB API를 통해 영화 데이터를 조회하는 영화 앱이고, mission2와 mission3은 이메일/비밀번호 기반의 로그인 및 회원가입 페이지가 포함된 프론트엔드 프로젝트입니다. 각 프로젝트는 라우팅, 폼 검증, 타입스크립트 설정을 포함합니다. Changes
Sequence DiagramsequenceDiagram
actor User
participant DetailPage
participant useCustomFetch
participant tmdbApi
participant TMDB API
User->>DetailPage: 영화 상세 페이지 접속 (/movies/:movieId)
Note over DetailPage: useCustomFetch로 2개 요청 병렬 수행
DetailPage->>useCustomFetch: url = "/movie/{movieId}?language=ko-KR"
DetailPage->>useCustomFetch: url = "/movie/{movieId}/credits?language=ko-KR"
useCustomFetch->>useCustomFetch: AbortController 생성<br/>isLoading = true
useCustomFetch->>tmdbApi: GET 요청<br/>(signal, headers)
tmdbApi->>TMDB API: HTTP GET<br/>(Authorization 헤더 포함)
TMDB API-->>tmdbApi: 영화 정보 JSON 응답
TMDB API-->>tmdbApi: 크루/배우 정보 JSON 응답
tmdbApi-->>useCustomFetch: 데이터 수신
useCustomFetch->>useCustomFetch: 취소되지 않으면<br/>data 업데이트<br/>isLoading = false
useCustomFetch-->>DetailPage: { data, isLoading, isError }
alt 로딩 중
DetailPage->>DetailPage: LoadingSpinner 렌더
else 에러 또는 데이터 없음
DetailPage->>DetailPage: ErrorDisplay + 뒤로가기 버튼
else 성공
DetailPage->>DetailPage: 포스터, 제목, 평점,<br/>출연진/제작진, 장르 렌더
DetailPage->>DetailPage: CrewSection으로<br/>감독/배우 표시
end
DetailPage-->>User: 상세 정보 화면 표시
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts
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: 16
🧹 Nitpick comments (12)
Week04/mint0326/mission2/fe/src/hooks/useForm.ts (1)
22-27: 제네릭 훅인데handleChange값 타입이string으로 고정되어 있습니다이렇게 되면 훅 재사용 시 숫자/불리언 필드 폼에서 타입 안정성이 깨집니다. 키별 값 타입을 유지하도록 시그니처를 좁히는 편이 안전합니다.
♻️ 제안 수정안
- const handleChange = (name: keyof T, value: string) => { + const handleChange = <K extends keyof T>(name: K, value: T[K]) => { setValues((prev) => ({ ...prev, [name]: value, })); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission2/fe/src/hooks/useForm.ts` around lines 22 - 27, handleChange currently forces value to string which breaks type safety for non-string fields; change its signature to be generic over the key so the value type is derived from T (e.g. make handleChange generic like <K extends keyof T>(name: K, value: T[K]) => { ... }) and keep the existing setValues call using the name to update state so each field preserves its declared type in T (refer to handleChange and setValues in useForm).Week04/mint0326/mission3/fe/src/App.css (1)
1-2: Tailwind 엔트리포인트를 한 곳으로 고정해 주세요.
Week04/mint0326/mission3/fe/src/index.css에서도 동일한@import "tailwindcss";를 선언하고 있어 중복 스타일 생성 리스크가 있습니다.App.css에서는 제거하고 컴포넌트 전용 스타일만 두는 구성이 더 안전합니다.✂️ 제안 수정
-/* App.css - Cleaned up for Tailwind */ -@import "tailwindcss"; +/* component-scoped styles only */🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission3/fe/src/App.css` around lines 1 - 2, App.css에서 중복된 Tailwind 엔트리포인트(`@import` "tailwindcss";)를 제거하고 Tailwind는 index.css에만 남기세요; App.css는 컴포넌트 전용 스타일(추가 클래스나 커스텀 CSS)만 포함하도록 정리하여 중복 스타일 생성 리스크를 제거합니다.Week04/mint0326/mission3/fe/src/App.tsx (2)
15-15: 홈 페이지 컴포넌트 추출을 고려해보세요.
/login과/signup은 별도의 페이지 컴포넌트를 사용하지만, 홈 라우트는 인라인 JSX를 사용하고 있습니다. 일관성을 위해HomePage컴포넌트를 만드는 것이 좋습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission3/fe/src/App.tsx` at line 15, Extract the inline JSX used in the Route for path="/" into a new React component named HomePage (e.g., function or const HomePage) that returns the current div content, export it, and then replace the Route element prop from the inline JSX to <HomePage /> so the routing uses the HomePage component consistently with /login and /signup.
14-14:key={location.pathname}사용에 대한 고려가 필요합니다.
Routes에key={location.pathname}을 전달하면 경로가 변경될 때마다 전체 라우트 트리가 언마운트/리마운트됩니다. 이는 페이지 전환 애니메이션에 의도적으로 사용될 수 있지만, 컴포넌트 상태가 손실되고 불필요한 리렌더링이 발생할 수 있습니다.특별한 애니메이션 요구사항이 없다면
keyprop을 제거하는 것이 좋습니다.♻️ 제안된 수정
- <Routes location={location} key={location.pathname}> + <Routes>
useLocation훅도 함께 제거할 수 있습니다:-import { Routes, Route, useLocation } from 'react-router-dom'; +import { Routes, Route } from 'react-router-dom';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission3/fe/src/App.tsx` at line 14, The Routes component is being forced to unmount/remount on every path change due to key={location.pathname}; remove the key prop from <Routes> to avoid losing component state and unnecessary remounts, and also remove the related useLocation import/variable (location) if it's now unused; keep Routes without a key unless you intentionally need full remounts for animation.Week04/mint0326/mission1/src/components/ErrorDisplay.tsx (1)
1-15: 재시도 동작을 콜백으로 주입하면 재사용성과 UX가 좋아집니다.지금 방식은 전체 페이지를 강제 새로고침합니다.
onRetryprop을 받아 페이지 단에서 재요청 로직을 연결하면 더 유연합니다.♻️ 제안 리팩터링
interface ErrorDisplayProps { message?: string; + onRetry?: () => void; } -const ErrorDisplay = ({ message = '데이터를 불러오는 중에 문제가 발생했습니다.' }: ErrorDisplayProps) => { +const ErrorDisplay = ({ + message = '데이터를 불러오는 중에 문제가 발생했습니다.', + onRetry, +}: ErrorDisplayProps) => { return ( <div className="flex flex-col items-center justify-center min-h-[60vh] text-white p-4 text-center"> <h1 className="text-2xl font-bold mb-2">에러가 발생했습니다</h1> <p className="text-gray-400 mb-6 max-w-md">{message}</p> <button - onClick={() => window.location.reload()} + onClick={() => (onRetry ? onRetry() : window.location.reload())} className="px-8 py-3 bg-red-600 hover:bg-red-700 rounded-full transition-colors shadow-lg font-bold" > 다시 시도하기 </button> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission1/src/components/ErrorDisplay.tsx` around lines 1 - 15, Add an optional onRetry callback to the ErrorDisplayProps and use it instead of always calling window.location.reload(): update ErrorDisplayProps to include onRetry?: () => void, change the ErrorDisplay param destructuring to accept onRetry, and modify the button onClick to call onRetry?.() or fallback to window.location.reload() so consumers can inject custom retry logic while preserving the current reload behavior.Week04/mint0326/mission1/src/components/LoadingSpinner.tsx (1)
7-10: 로딩 상태를 접근성 트리에도 노출해 주세요.현재는 시각적 표현만 있어 보조기기에서 상태 인지가 약합니다.
♿ 제안 수정안
- <div className="flex flex-col items-center justify-center min-h-[60vh] text-white"> - <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-red-500 mb-4"></div> + <div className="flex flex-col items-center justify-center min-h-[60vh] text-white" role="status" aria-live="polite" aria-busy="true"> + <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-red-500 mb-4" aria-hidden="true"></div> <p className="text-xl font-medium">{text}</p> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission1/src/components/LoadingSpinner.tsx` around lines 7 - 10, The visual spinner in LoadingSpinner (the outer div and the inner animate-spin element) is not exposed to assistive tech; modify the component to add an accessible status role and live region: set role="status" and aria-live="polite" (or aria-live="assertive" if appropriate) on the container and include the provided text in a screen-reader-only element (e.g., a visually-hidden / sr-only span) so assistive technologies announce the loading message; ensure the visible <p>{text}</p> remains for sighted users and that the inner spinner element retains its presentational role.Week04/mint0326/mission2/fe/src/pages/LoginPage.tsx (3)
57-60: 구글 로그인 버튼에 핸들러 없음구글 로그인 버튼에
onClick핸들러가 없습니다. 구현 예정이라면 TODO 주석을 추가하거나, 현재 구현 범위가 아니라면 버튼을 비활성화하는 것이 좋습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission2/fe/src/pages/LoginPage.tsx` around lines 57 - 60, The Google login button in LoginPage.tsx lacks an onClick handler; either wire it to the existing login function (e.g., call your Google auth method or dispatch the Google sign-in action from the component) or explicitly mark it as not-yet-implemented by adding a TODO comment and disabling the button (set disabled + appropriate styling/aria-disabled) so users can’t interact with it; locate the JSX for the button in the LoginPage component and update it accordingly (attach the handler or disable and document the TODO).
9-28:validate함수를useCallback으로 메모이제이션 권장
validate함수가 렌더링마다 새로 생성되어useForm훅 내부의useEffect의존성이 매번 변경됩니다. 이로 인해 불필요한 유효성 검사가 반복 실행될 수 있습니다.♻️ 제안된 수정
+import { useNavigate } from 'react-router-dom'; +import { useCallback } from 'react'; import { ChevronLeft } from 'lucide-react'; import useForm from '../hooks/useForm'; const LoginPage = () => { const navigate = useNavigate(); - const validate = (values: { email: string; password: string }) => { + const validate = useCallback((values: { email: string; password: string }) => { const errors: { email?: string; password?: string } = {}; // ... validation logic return errors; - }; + }, []);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission2/fe/src/pages/LoginPage.tsx` around lines 9 - 28, Wrap the validate function in React's useCallback to avoid recreating it on every render: replace the standalone validate declaration with a memoized version using useCallback((values: { email: string; password: string }) => { ... }, [/* include any external dependencies if used, otherwise [] */]) and ensure useCallback is imported; this will keep the validate reference stable for useForm's internal useEffect and prevent unnecessary re-validation (refer to the validate function and the useForm hook usage).
70-70: 로그인 폼 제출 로직 미구현
onSubmit이e.preventDefault()만 호출하고 실제 로그인 로직이 없습니다. PR 설명에 로그인 기능 구현이 목표로 명시되어 있으므로, 실제 API 호출 로직이 필요해 보입니다.제가 로그인 API 호출 로직을 추가하거나 관련 이슈를 생성해 드릴까요?
Also applies to: 104-112
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission2/fe/src/pages/LoginPage.tsx` at line 70, The form currently only calls e.preventDefault() inline and has no login logic; replace the inline onSubmit with a real async submit handler (e.g., handleSubmit) in LoginPage.tsx that prevents default, reads form state (email/password), calls the login API client (or fetch to the backend), handles success by storing the auth token/session and redirecting (or calling a passed-in onLogin), and handles errors by setting error state for UI; update the form to onSubmit={handleSubmit} and ensure the handler name (handleSubmit) and any state variables (email, password, setError) are used so the login flow runs instead of just preventing default.Week04/mint0326/mission1/src/pages/MoviesPage.tsx (3)
77-79: 외부 placeholder 서비스 의존성
via.placeholder.com은 외부 서비스로 가용성이 보장되지 않습니다. 프로젝트 내 로컬 placeholder 이미지를 사용하거나 data URI를 고려해 보세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission1/src/pages/MoviesPage.tsx` around lines 77 - 79, The image src fallback in MoviesPage.tsx currently uses an external placeholder (via.placeholder.com); update the fallback to use a local asset or inline data URI instead of the external URL: locate the img/src expression that checks movie.poster_path (the ternary using movie.poster_path) and replace the false branch with a project-local image import (e.g., import a placeholder image and reference it) or a compact data URI so the app doesn't depend on an external placeholder service.
31-32:window.location.reload()대신 훅의 refetch 사용 권장전체 페이지 새로고침은 사용자 경험을 저해하고 불필요한 리소스 로딩을 유발합니다.
useCustomFetch훅에서refetch함수를 제공한다면 그것을 사용하는 것이 좋습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission1/src/pages/MoviesPage.tsx` around lines 31 - 32, The button currently calls window.location.reload() in MoviesPage which forces a full page reload; instead obtain and use the refetch function provided by useCustomFetch (or whatever hook instance in this component) and replace the onClick handler to call refetch so the component reloads data without a full page refresh—ensure refetch is imported/destructured from the useCustomFetch call in MoviesPage and is in scope for the button's onClick.
19-21:category변경 시 불필요한 API 호출 가능성
category가 변경될 때useEffect가page를 1로 리셋하지만, 이 업데이트가 반영되기 전에useCustomFetch가 이전page값으로 새 카테고리의 API를 호출할 수 있습니다.page를 의존성에 포함하거나, 커스텀 훅 내부에서 카테고리 변경을 감지하여 페이지를 리셋하는 방식을 고려해 보세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission1/src/pages/MoviesPage.tsx` around lines 19 - 21, When category changes the current effect calls setPage(1) but useCustomFetch may fire with the old page before that state update applies; update the logic so the fetch can't run with a stale page — either include page in the useEffect dependency (useEffect(() => setPage(1), [category, page]) or similar) so state changes are sequenced, or move the reset logic into the custom hook (modify useCustomFetch to detect category changes and call setPage(1) internally before issuing the request). Locate the existing useEffect, setPage, category usage in MoviesPage.tsx and/or the fetch trigger inside useCustomFetch to implement the chosen fix.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@Week04/mint0326/mission1/.gitignore`:
- Around line 14-16: The .gitignore currently only ignores .env and .env.local
which is too narrow; expand the ignore patterns to cover all environment files
by replacing or augmenting the entries with broader patterns such as .env*,
.env.* (and explicitly mention common variants like .env.production and
.env.development.local) and optionally whitelist a committed example file like
!.env.example; update the .gitignore so entries include ".env*", ".env.*" (and
keep or remove the current ".env" and ".env.local" lines) to ensure no future
.env.* files are accidentally tracked.
In `@Week04/mint0326/mission1/src/apis/tmdb.ts`:
- Around line 3-10: The current getTmdbToken/getTmdbHeaders always constructs an
Authorization header even when the env token is missing, causing "Bearer
undefined"; update getTmdbToken to validate import.meta.env.VITE_TMDB_TOKEN and
throw a clear error (or return null) when it's not set, and update
getTmdbHeaders to either call getTmdbToken inside a try/catch and rethrow a
descriptive error or return undefined/no Authorization header when token is
absent so no malformed header is sent; reference getTmdbToken and getTmdbHeaders
when making the change.
In `@Week04/mint0326/mission1/src/pages/DetailPage.tsx`:
- Around line 24-25: The page-level isLoading/isError should be driven only by
the movie request so slow/failing credits don't hide the movie: change isLoading
and isError to use only isMovieLoading and isMovieError (remove
isCreditsLoading/isCreditsError) in DetailPage (symbols: isLoading, isError,
isMovieLoading, isMovieError, isCreditsLoading, isCreditsError); keep credits
nullable and let CrewSection render/handle credits === null or its own
loading/error state (see CrewSection), and update the fallback rendering
branches around the full-page spinner/error (the blocks referenced at lines
27-43 and the conditional at 113) so they only consider the movie-level flags.
- Around line 61-76: The page is building image URLs even when
movie.backdrop_path or movie.poster_path is null, causing requests to /null;
update the two img src usages in DetailPage (the backdrop img using
movie.backdrop_path and the poster img using movie.poster_path) to use the same
fallback logic as MoviesPage (check for truthiness and fall back to the
project's placeholder URL or a default image constant) so that when a path is
null you supply the fallback URL instead of concatenating "null".
In `@Week04/mint0326/mission1/src/pages/MoviesPage.tsx`:
- Around line 85-88: The JSX in MoviesPage.tsx calls
movie.vote_average.toFixed(1) which can throw if vote_average is null/undefined;
update the render in the MoviesPage component (the JSX block using
movie.vote_average) to guard against nullish values before calling toFixed —
e.g., check if movie.vote_average != null and call toFixed(1) only then,
otherwise render a safe fallback like "-" or "0.0".
In `@Week04/mint0326/mission1/src/types/movie.ts`:
- Around line 1-9: Update the Movie interface so poster_path and backdrop_path
allow null (change types to string | null) to match TMDB API, then update any
image URL construction in DetailPage.tsx (the code that builds image URLs around
lines where poster_path/backdrop_path are used) to check for null before
inserting into the URL and fall back to a safe alternative (e.g., skip rendering
the <img> or use a placeholder) to avoid forming ".../null" links; ensure
MoviesPage.tsx behavior remains compatible with the new types.
In `@Week04/mint0326/mission2/fe/.gitignore`:
- Around line 10-14: 현재 .gitignore에 '*.local'만 있어 .env 계열 파일이 무시되지 않으니 실수 커밋을 막기
위해 '.env'와 모든 환경변수 변형을 포함하도록 패턴을 추가하세요; 예를 들어 '.env'와 '.env.*'를 현재 '*.local',
'node_modules', 'dist', 'dist-ssr' 항목과 함께 유지하도록 업데이트하면 됩니다.
In `@Week04/mint0326/mission2/fe/src/components/common/Header.tsx`:
- Line 5: The fixed header (header element in Header.tsx with class "fixed ...
h-16") overlaps page content; update the page wrapper so the main content is
offset by the header height (e.g., add padding-top or margin-top equal to h-16)
where the <main> is rendered in App.tsx, or alternatively apply equivalent body
padding-top in a global layout; ensure the selector that renders the main (the
App.tsx main element) gets the offset so content is no longer hidden under the
Header component.
In `@Week04/mint0326/mission2/fe/src/hooks/useForm.ts`:
- Around line 13-20: The initial errors state is set to an empty object causing
isValid to be true on first render; initialize errors by running the validate
function against the current values up front (e.g., change the errors useState
to a lazy initializer that returns validate(values) or otherwise call
validate(values) synchronously before first render) and keep the existing
useEffect for subsequent updates—update the useState declaration for errors (the
const [errors, setErrors] = useState<...>) to use validate(values) so the form's
initial validity reflects actual validation.
In `@Week04/mint0326/mission3/fe/.gitignore`:
- Around line 10-14: 현재 .gitignore에 node_modules 등만 포함되어 있어 .env 계열 파일이 커밋될 위험이
있으니 .gitignore에 .env 관련 패턴을 추가하세요; 제외할 항목으로는 기본 .env, 모든 환경별 파일(.env.*)과 로컬
전용(.env.local 및 .env.*.local)을 포함하도록 업데이트하여 API 키/토큰 등의 민감 정보가 저장소에 올라가지 않게 하세요
(참조: .gitignore 파일의 existing entries 및 프로젝트 루트 .gitignore).
In `@Week04/mint0326/mission3/fe/src/hooks/useForm.ts`:
- Around line 13-27: The errors state is initialized to {} so initial invalid
initialValues show as valid, and the effect only depends on values so when the
validate function changes errors are not recomputed; fix by computing initial
errors and recomputing whenever either values or validate changes: initialize
errors by running validate(initialValues) (or run a mount effect to
setErrors(validate(values))) and change the validation effect to depend on both
values and validate (or call validateRef.current but include validate in its
updater) so setErrors(validateRef.current(values)) runs on initial render and
whenever the validator function changes (referencing the errors state,
validateRef, validate, and the useEffect that currently setsErrors).
In `@Week04/mint0326/mission3/fe/src/hooks/useLocalStorage.ts`:
- Around line 23-34: The setValue callback uses the closed-over storedValue
which causes stale updates for functional updaters; change the logic so when
value is a function you call setStoredValue(prev => { const newVal =
value(prev); window.localStorage.setItem(key, JSON.stringify(newVal)); return
newVal; }) (and for non-function values call setStoredValue and write to
localStorage similarly), and update the useCallback deps to remove storedValue
(i.e., depend only on key) so the updater always uses the latest state;
reference setValue, storedValue, setStoredValue, and the useCallback wrapper
when making this change.
In `@Week04/mint0326/mission3/fe/src/pages/LoginPage.tsx`:
- Around line 24-26: Remove the sensitive console output in the onSubmit handler
that prints the full LoginFormValues (including password); locate the onSubmit
function and delete or replace the console.log('로그인 시도 데이터:', data) call in
LoginPage.tsx, and if you must log, log only non-sensitive fields (e.g.,
username/email) or a generic success/failure message rather than the full
payload so passwords are never written to console.
In `@Week04/mint0326/mission3/fe/src/pages/SignUpPage.tsx`:
- Around line 77-80: The "구글 로그인" button and the "편집" overlay currently show
interactive affordances (e.g., cursor-pointer) but have no handlers; update
SignUpPage.tsx so these elements are non-interactive until implemented: for the
<button> with text "구글 로그인" remove the interactive classes and add disabled (and
appropriate styling like reduced opacity) or aria-disabled plus
pointer-events-none to prevent clicks; for the overlay element with text "편집"
remove cursor-pointer and either hide it (conditional render) or mark it
aria-disabled/pointer-events-none similarly. Ensure you reference the elements
by their visible text ("구글 로그인" button and "편집" overlay) or their className that
includes cursor-pointer when making these changes.
- Around line 55-58: The onSubmit handler currently logs the entire
SignUpFormValues (including password and passwordConfirm) to the console; remove
or sanitize that debug output in the onSubmit function so sensitive credentials
are not printed. Modify the onSubmit implementation (referencing onSubmit and
setToken) to either remove console.log entirely or build a sanitized object that
excludes or masks password and passwordConfirm before any logging, then proceed
to call setToken and show the alert.
In `@Week04/mint0326/mission3/fe/src/schemas/authSchema.ts`:
- Around line 3-16: Reorder and tighten string validations in loginSchema and
signUpSchema: for email/password fields swap the checks so required-empty
validation runs before format/length (e.g., for email use nonempty(...) then
email(...); for password use nonempty(...) then min(...)); for nickname use
trim() then check nonempty first and then min length (e.g.,
z.string().trim().min(1, '닉네임을 입력해주세요.').min(2, '닉네임은 최소 2자 이상이어야 합니다.')); apply
similar trim+nonempty ordering to passwordConfirm if needed; update loginSchema
and signUpSchema accordingly so messages reflect required-empty before
format/length errors.
---
Nitpick comments:
In `@Week04/mint0326/mission1/src/components/ErrorDisplay.tsx`:
- Around line 1-15: Add an optional onRetry callback to the ErrorDisplayProps
and use it instead of always calling window.location.reload(): update
ErrorDisplayProps to include onRetry?: () => void, change the ErrorDisplay param
destructuring to accept onRetry, and modify the button onClick to call
onRetry?.() or fallback to window.location.reload() so consumers can inject
custom retry logic while preserving the current reload behavior.
In `@Week04/mint0326/mission1/src/components/LoadingSpinner.tsx`:
- Around line 7-10: The visual spinner in LoadingSpinner (the outer div and the
inner animate-spin element) is not exposed to assistive tech; modify the
component to add an accessible status role and live region: set role="status"
and aria-live="polite" (or aria-live="assertive" if appropriate) on the
container and include the provided text in a screen-reader-only element (e.g., a
visually-hidden / sr-only span) so assistive technologies announce the loading
message; ensure the visible <p>{text}</p> remains for sighted users and that the
inner spinner element retains its presentational role.
In `@Week04/mint0326/mission1/src/pages/MoviesPage.tsx`:
- Around line 77-79: The image src fallback in MoviesPage.tsx currently uses an
external placeholder (via.placeholder.com); update the fallback to use a local
asset or inline data URI instead of the external URL: locate the img/src
expression that checks movie.poster_path (the ternary using movie.poster_path)
and replace the false branch with a project-local image import (e.g., import a
placeholder image and reference it) or a compact data URI so the app doesn't
depend on an external placeholder service.
- Around line 31-32: The button currently calls window.location.reload() in
MoviesPage which forces a full page reload; instead obtain and use the refetch
function provided by useCustomFetch (or whatever hook instance in this
component) and replace the onClick handler to call refetch so the component
reloads data without a full page refresh—ensure refetch is imported/destructured
from the useCustomFetch call in MoviesPage and is in scope for the button's
onClick.
- Around line 19-21: When category changes the current effect calls setPage(1)
but useCustomFetch may fire with the old page before that state update applies;
update the logic so the fetch can't run with a stale page — either include page
in the useEffect dependency (useEffect(() => setPage(1), [category, page]) or
similar) so state changes are sequenced, or move the reset logic into the custom
hook (modify useCustomFetch to detect category changes and call setPage(1)
internally before issuing the request). Locate the existing useEffect, setPage,
category usage in MoviesPage.tsx and/or the fetch trigger inside useCustomFetch
to implement the chosen fix.
In `@Week04/mint0326/mission2/fe/src/hooks/useForm.ts`:
- Around line 22-27: handleChange currently forces value to string which breaks
type safety for non-string fields; change its signature to be generic over the
key so the value type is derived from T (e.g. make handleChange generic like <K
extends keyof T>(name: K, value: T[K]) => { ... }) and keep the existing
setValues call using the name to update state so each field preserves its
declared type in T (refer to handleChange and setValues in useForm).
In `@Week04/mint0326/mission2/fe/src/pages/LoginPage.tsx`:
- Around line 57-60: The Google login button in LoginPage.tsx lacks an onClick
handler; either wire it to the existing login function (e.g., call your Google
auth method or dispatch the Google sign-in action from the component) or
explicitly mark it as not-yet-implemented by adding a TODO comment and disabling
the button (set disabled + appropriate styling/aria-disabled) so users can’t
interact with it; locate the JSX for the button in the LoginPage component and
update it accordingly (attach the handler or disable and document the TODO).
- Around line 9-28: Wrap the validate function in React's useCallback to avoid
recreating it on every render: replace the standalone validate declaration with
a memoized version using useCallback((values: { email: string; password: string
}) => { ... }, [/* include any external dependencies if used, otherwise [] */])
and ensure useCallback is imported; this will keep the validate reference stable
for useForm's internal useEffect and prevent unnecessary re-validation (refer to
the validate function and the useForm hook usage).
- Line 70: The form currently only calls e.preventDefault() inline and has no
login logic; replace the inline onSubmit with a real async submit handler (e.g.,
handleSubmit) in LoginPage.tsx that prevents default, reads form state
(email/password), calls the login API client (or fetch to the backend), handles
success by storing the auth token/session and redirecting (or calling a
passed-in onLogin), and handles errors by setting error state for UI; update the
form to onSubmit={handleSubmit} and ensure the handler name (handleSubmit) and
any state variables (email, password, setError) are used so the login flow runs
instead of just preventing default.
In `@Week04/mint0326/mission3/fe/src/App.css`:
- Around line 1-2: App.css에서 중복된 Tailwind 엔트리포인트(`@import` "tailwindcss";)를 제거하고
Tailwind는 index.css에만 남기세요; App.css는 컴포넌트 전용 스타일(추가 클래스나 커스텀 CSS)만 포함하도록 정리하여 중복
스타일 생성 리스크를 제거합니다.
In `@Week04/mint0326/mission3/fe/src/App.tsx`:
- Line 15: Extract the inline JSX used in the Route for path="/" into a new
React component named HomePage (e.g., function or const HomePage) that returns
the current div content, export it, and then replace the Route element prop from
the inline JSX to <HomePage /> so the routing uses the HomePage component
consistently with /login and /signup.
- Line 14: The Routes component is being forced to unmount/remount on every path
change due to key={location.pathname}; remove the key prop from <Routes> to
avoid losing component state and unnecessary remounts, and also remove the
related useLocation import/variable (location) if it's now unused; keep Routes
without a key unless you intentionally need full remounts for animation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b25e8cdc-cb76-458a-8fcf-442f812e3626
⛔ Files ignored due to path filters (18)
Week04/mint0326/mission1/package-lock.jsonis excluded by!**/package-lock.jsonWeek04/mint0326/mission1/public/favicon.svgis excluded by!**/*.svgWeek04/mint0326/mission1/public/icons.svgis excluded by!**/*.svgWeek04/mint0326/mission1/src/assets/hero.pngis excluded by!**/*.pngWeek04/mint0326/mission1/src/assets/react.svgis excluded by!**/*.svgWeek04/mint0326/mission1/src/assets/vite.svgis excluded by!**/*.svgWeek04/mint0326/mission2/fe/package-lock.jsonis excluded by!**/package-lock.jsonWeek04/mint0326/mission2/fe/public/favicon.svgis excluded by!**/*.svgWeek04/mint0326/mission2/fe/public/icons.svgis excluded by!**/*.svgWeek04/mint0326/mission2/fe/src/assets/hero.pngis excluded by!**/*.pngWeek04/mint0326/mission2/fe/src/assets/react.svgis excluded by!**/*.svgWeek04/mint0326/mission2/fe/src/assets/vite.svgis excluded by!**/*.svgWeek04/mint0326/mission3/fe/package-lock.jsonis excluded by!**/package-lock.jsonWeek04/mint0326/mission3/fe/public/favicon.svgis excluded by!**/*.svgWeek04/mint0326/mission3/fe/public/icons.svgis excluded by!**/*.svgWeek04/mint0326/mission3/fe/src/assets/hero.pngis excluded by!**/*.pngWeek04/mint0326/mission3/fe/src/assets/react.svgis excluded by!**/*.svgWeek04/mint0326/mission3/fe/src/assets/vite.svgis excluded by!**/*.svg
📒 Files selected for processing (62)
Week04/mint0326/mission1/.gitignoreWeek04/mint0326/mission1/README.mdWeek04/mint0326/mission1/eslint.config.jsWeek04/mint0326/mission1/index.htmlWeek04/mint0326/mission1/package.jsonWeek04/mint0326/mission1/src/App.cssWeek04/mint0326/mission1/src/App.tsxWeek04/mint0326/mission1/src/apis/tmdb.tsWeek04/mint0326/mission1/src/components/CrewSection.tsxWeek04/mint0326/mission1/src/components/ErrorDisplay.tsxWeek04/mint0326/mission1/src/components/LoadingSpinner.tsxWeek04/mint0326/mission1/src/components/layout/Layout.tsxWeek04/mint0326/mission1/src/components/layout/Navbar.tsxWeek04/mint0326/mission1/src/hooks/useCustomFetch.tsWeek04/mint0326/mission1/src/index.cssWeek04/mint0326/mission1/src/main.tsxWeek04/mint0326/mission1/src/pages/DetailPage.tsxWeek04/mint0326/mission1/src/pages/HomePage.tsxWeek04/mint0326/mission1/src/pages/MoviesPage.tsxWeek04/mint0326/mission1/src/types/movie.tsWeek04/mint0326/mission1/tailwind.config.jsWeek04/mint0326/mission1/tsconfig.app.jsonWeek04/mint0326/mission1/tsconfig.jsonWeek04/mint0326/mission1/tsconfig.node.jsonWeek04/mint0326/mission1/vite.config.tsWeek04/mint0326/mission2/UMC-8th-BEWeek04/mint0326/mission2/fe/.gitignoreWeek04/mint0326/mission2/fe/README.mdWeek04/mint0326/mission2/fe/eslint.config.jsWeek04/mint0326/mission2/fe/index.htmlWeek04/mint0326/mission2/fe/package.jsonWeek04/mint0326/mission2/fe/src/App.cssWeek04/mint0326/mission2/fe/src/App.tsxWeek04/mint0326/mission2/fe/src/components/common/Header.tsxWeek04/mint0326/mission2/fe/src/hooks/useForm.tsWeek04/mint0326/mission2/fe/src/index.cssWeek04/mint0326/mission2/fe/src/main.tsxWeek04/mint0326/mission2/fe/src/pages/LoginPage.tsxWeek04/mint0326/mission2/fe/tsconfig.app.jsonWeek04/mint0326/mission2/fe/tsconfig.jsonWeek04/mint0326/mission2/fe/tsconfig.node.jsonWeek04/mint0326/mission2/fe/vite.config.tsWeek04/mint0326/mission3/UMC-8th-BEWeek04/mint0326/mission3/fe/.gitignoreWeek04/mint0326/mission3/fe/README.mdWeek04/mint0326/mission3/fe/eslint.config.jsWeek04/mint0326/mission3/fe/index.htmlWeek04/mint0326/mission3/fe/package.jsonWeek04/mint0326/mission3/fe/src/App.cssWeek04/mint0326/mission3/fe/src/App.tsxWeek04/mint0326/mission3/fe/src/components/common/Header.tsxWeek04/mint0326/mission3/fe/src/hooks/useForm.tsWeek04/mint0326/mission3/fe/src/hooks/useLocalStorage.tsWeek04/mint0326/mission3/fe/src/index.cssWeek04/mint0326/mission3/fe/src/main.tsxWeek04/mint0326/mission3/fe/src/pages/LoginPage.tsxWeek04/mint0326/mission3/fe/src/pages/SignUpPage.tsxWeek04/mint0326/mission3/fe/src/schemas/authSchema.tsWeek04/mint0326/mission3/fe/tsconfig.app.jsonWeek04/mint0326/mission3/fe/tsconfig.jsonWeek04/mint0326/mission3/fe/tsconfig.node.jsonWeek04/mint0326/mission3/fe/vite.config.ts
Comment on lines
+3
to
+10
| export const getTmdbToken = () => { | ||
| return import.meta.env.VITE_TMDB_TOKEN; | ||
| }; | ||
|
|
||
| export const getTmdbHeaders = () => { | ||
| return { | ||
| Authorization: `Bearer ${getTmdbToken()}`, | ||
| }; |
There was a problem hiding this comment.
토큰 미설정 시 Bearer undefined 요청이 발생합니다.
Line 4~10 흐름에서는 환경변수가 없을 때도 Authorization 헤더를 생성합니다. 런타임 초기에 명시적으로 실패시키는 쪽이 안전합니다.
🛡️ 제안 수정안
export const getTmdbToken = () => {
- return import.meta.env.VITE_TMDB_TOKEN;
+ const token = import.meta.env.VITE_TMDB_TOKEN;
+ if (!token) {
+ throw new Error('VITE_TMDB_TOKEN 환경변수가 설정되지 않았습니다.');
+ }
+ return token;
};📝 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.
Suggested change
| export const getTmdbToken = () => { | |
| return import.meta.env.VITE_TMDB_TOKEN; | |
| }; | |
| export const getTmdbHeaders = () => { | |
| return { | |
| Authorization: `Bearer ${getTmdbToken()}`, | |
| }; | |
| export const getTmdbToken = () => { | |
| const token = import.meta.env.VITE_TMDB_TOKEN; | |
| if (!token) { | |
| throw new Error('VITE_TMDB_TOKEN 환경변수가 설정되지 않았습니다.'); | |
| } | |
| return token; | |
| }; | |
| export const getTmdbHeaders = () => { | |
| return { | |
| Authorization: `Bearer ${getTmdbToken()}`, | |
| }; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission1/src/apis/tmdb.ts` around lines 3 - 10, The current
getTmdbToken/getTmdbHeaders always constructs an Authorization header even when
the env token is missing, causing "Bearer undefined"; update getTmdbToken to
validate import.meta.env.VITE_TMDB_TOKEN and throw a clear error (or return
null) when it's not set, and update getTmdbHeaders to either call getTmdbToken
inside a try/catch and rethrow a descriptive error or return undefined/no
Authorization header when token is absent so no malformed header is sent;
reference getTmdbToken and getTmdbHeaders when making the change.
Comment on lines
+24
to
+25
| const isLoading = isMovieLoading || isCreditsLoading; | ||
| const isError = isMovieError || isCreditsError; |
There was a problem hiding this comment.
크레딧 로딩/오류 때문에 영화 본문까지 가려집니다.
Line 24-25에서 credits를 전체 isLoading/isError에 합치면, 크레딧 요청만 느리거나 실패해도 Line 27-43의 전체 스피너/에러 화면으로 빠져 이미 받은 movie 본문도 못 보여 줍니다. Week04/mint0326/mission1/src/components/CrewSection.tsx:7-8는 credits === null도 허용하므로, 페이지 전체 fallback은 영화 상세 요청 기준으로만 결정하고 출연진 섹션만 별도로 비우거나 오류 처리하는 편이 낫습니다.
Also applies to: 27-43, 113-113
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission1/src/pages/DetailPage.tsx` around lines 24 - 25, The
page-level isLoading/isError should be driven only by the movie request so
slow/failing credits don't hide the movie: change isLoading and isError to use
only isMovieLoading and isMovieError (remove isCreditsLoading/isCreditsError) in
DetailPage (symbols: isLoading, isError, isMovieLoading, isMovieError,
isCreditsLoading, isCreditsError); keep credits nullable and let CrewSection
render/handle credits === null or its own loading/error state (see CrewSection),
and update the fallback rendering branches around the full-page spinner/error
(the blocks referenced at lines 27-43 and the conditional at 113) so they only
consider the movie-level flags.
Comment on lines
+61
to
+76
| <div className="absolute inset-0 z-0"> | ||
| <img | ||
| src={`https://image.tmdb.org/t/p/original${movie.backdrop_path}`} | ||
| alt="" | ||
| className="w-full h-full object-cover blur-md opacity-30 scale-110" | ||
| /> | ||
| <div className="absolute inset-0 bg-gradient-to-t from-[#0b4747] via-transparent to-transparent"></div> | ||
| </div> | ||
|
|
||
| <div className="max-w-7xl mx-auto px-6 relative z-10 flex flex-col md:flex-row items-center md:items-start gap-10 py-10"> | ||
| {/* 포스터 */} | ||
| <div className="flex-shrink-0 w-64 md:w-80 rounded-xl overflow-hidden shadow-2xl border border-white/10"> | ||
| <img | ||
| src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} | ||
| alt={movie.title} | ||
| className="w-full h-auto" |
There was a problem hiding this comment.
이미지 경로가 없는 작품에서 /null 요청이 발생합니다.
Line 63/74는 backdrop_path나 poster_path가 null이어도 그대로 URL을 만들어 브라우저가 /null 이미지를 요청합니다. 같은 프로젝트의 Week04/mint0326/mission1/src/pages/MoviesPage.tsx:73-79는 이미 포스터 fallback을 두고 있으니, 여기서도 같은 방식으로 처리하는 편이 안전합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission1/src/pages/DetailPage.tsx` around lines 61 - 76, The
page is building image URLs even when movie.backdrop_path or movie.poster_path
is null, causing requests to /null; update the two img src usages in DetailPage
(the backdrop img using movie.backdrop_path and the poster img using
movie.poster_path) to use the same fallback logic as MoviesPage (check for
truthiness and fall back to the project's placeholder URL or a default image
constant) so that when a path is null you supply the fallback URL instead of
concatenating "null".
Comment on lines
+85
to
+88
| <div className="flex items-center mb-2"> | ||
| <span className="text-yellow-400 mr-1">⭐</span> | ||
| <span>{movie.vote_average.toFixed(1)}</span> | ||
| </div> |
There was a problem hiding this comment.
vote_average가 null 또는 undefined일 경우 런타임 에러 가능
TMDB API 응답에서 vote_average가 없는 영화가 있을 수 있습니다. toFixed() 호출 전에 null 체크를 추가하세요.
🛡️ 제안된 수정
<div className="flex items-center mb-2">
<span className="text-yellow-400 mr-1">⭐</span>
- <span>{movie.vote_average.toFixed(1)}</span>
+ <span>{(movie.vote_average ?? 0).toFixed(1)}</span>
</div>📝 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.
Suggested change
| <div className="flex items-center mb-2"> | |
| <span className="text-yellow-400 mr-1">⭐</span> | |
| <span>{movie.vote_average.toFixed(1)}</span> | |
| </div> | |
| <div className="flex items-center mb-2"> | |
| <span className="text-yellow-400 mr-1">⭐</span> | |
| <span>{(movie.vote_average ?? 0).toFixed(1)}</span> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission1/src/pages/MoviesPage.tsx` around lines 85 - 88, The
JSX in MoviesPage.tsx calls movie.vote_average.toFixed(1) which can throw if
vote_average is null/undefined; update the render in the MoviesPage component
(the JSX block using movie.vote_average) to guard against nullish values before
calling toFixed — e.g., check if movie.vote_average != null and call toFixed(1)
only then, otherwise render a safe fallback like "-" or "0.0".
Comment on lines
+55
to
+58
| const onSubmit = (data: SignUpFormValues) => { | ||
| console.log('회원가입 완료 데이터:', data); | ||
| setToken('dummy-signup-token'); | ||
| alert('회원가입이 완료되었습니다!'); |
There was a problem hiding this comment.
비밀번호를 콘솔에 남기지 마세요.
Line 56은 가입 폼 전체를 그대로 출력해서 password와 passwordConfirm까지 브라우저 콘솔에 남깁니다. 인증 정보는 디버그 로그에서 제외하세요.
🔒 제안 수정안
- const onSubmit = (data: SignUpFormValues) => {
- console.log('회원가입 완료 데이터:', data);
+ const onSubmit = () => {
setToken('dummy-signup-token');
alert('회원가입이 완료되었습니다!');
navigate('/');
};📝 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.
Suggested change
| const onSubmit = (data: SignUpFormValues) => { | |
| console.log('회원가입 완료 데이터:', data); | |
| setToken('dummy-signup-token'); | |
| alert('회원가입이 완료되었습니다!'); | |
| const onSubmit = (data: SignUpFormValues) => { | |
| setToken('dummy-signup-token'); | |
| alert('회원가입이 완료되었습니다!'); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission3/fe/src/pages/SignUpPage.tsx` around lines 55 - 58,
The onSubmit handler currently logs the entire SignUpFormValues (including
password and passwordConfirm) to the console; remove or sanitize that debug
output in the onSubmit function so sensitive credentials are not printed. Modify
the onSubmit implementation (referencing onSubmit and setToken) to either remove
console.log entirely or build a sanitized object that excludes or masks password
and passwordConfirm before any logging, then proceed to call setToken and show
the alert.
Comment on lines
+77
to
+80
| {/* 구글 로그인 버튼 */} | ||
| <button className="w-full flex items-center justify-center gap-3 py-3 bg-black border border-[#3a3a3a] rounded hover:bg-[#1a1a1a] transition-colors cursor-pointer"> | ||
| <span className="text-sm font-medium">구글 로그인</span> | ||
| </button> |
There was a problem hiding this comment.
동작 없는 버튼/오버레이는 클릭 가능하게 보이지 않게 해주세요.
Line 78의 구글 로그인 버튼과 Line 199의 편집 오버레이는 cursor-pointer까지 주어져 있지만 실제 핸들러가 없습니다. 지금 기능이 없다면 disabled/aria-disabled 상태로 바꾸거나, 구현될 때까지 숨겨 주세요.
Also applies to: 199-201
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission3/fe/src/pages/SignUpPage.tsx` around lines 77 - 80,
The "구글 로그인" button and the "편집" overlay currently show interactive affordances
(e.g., cursor-pointer) but have no handlers; update SignUpPage.tsx so these
elements are non-interactive until implemented: for the <button> with text "구글
로그인" remove the interactive classes and add disabled (and appropriate styling
like reduced opacity) or aria-disabled plus pointer-events-none to prevent
clicks; for the overlay element with text "편집" remove cursor-pointer and either
hide it (conditional render) or mark it aria-disabled/pointer-events-none
similarly. Ensure you reference the elements by their visible text ("구글 로그인"
button and "편집" overlay) or their className that includes cursor-pointer when
making these changes.
Comment on lines
+3
to
+16
| export const loginSchema = z.object({ | ||
| email: z.string().email('올바른 이메일 형식을 입력해주세요.').nonempty('이메일을 입력해주세요.'), | ||
| password: z.string().min(6, '비밀번호는 최소 6자 이상이어야 합니다.').nonempty('비밀번호를 입력해주세요.'), | ||
| }); | ||
|
|
||
| export const signUpSchema = z.object({ | ||
| email: z.string().email('올바른 이메일 형식을 입력해주세요.').nonempty('이메일을 입력해주세요.'), | ||
| password: z.string().min(6, '비밀번호는 최소 6자 이상이어야 합니다.').nonempty('비밀번호를 입력해주세요.'), | ||
| passwordConfirm: z.string().nonempty('비밀번호를 다시 한 번 입력해주세요.'), | ||
| nickname: z.string().min(2, '닉네임은 최소 2자 이상이어야 합니다.').nonempty('닉네임을 입력해주세요.'), | ||
| }).refine((data) => data.password === data.passwordConfirm, { | ||
| message: "비밀번호가 일치하지 않습니다.", | ||
| path: ["passwordConfirm"], | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -name "package.json" -type f | head -5Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 294
🏁 Script executed:
cat Week04/mint0326/mission3/fe/package.json | grep -A2 -B2 "zod"Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 189
🏁 Script executed:
cat Week04/mint0326/mission3/fe/src/schemas/authSchema.tsRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 888
🌐 Web query:
Zod 4.3.6 string validation order email nonempty min
💡 Result:
In Zod v4.3.6, string validations run in the same order you chain them, because each call appends a new check to the schema’s internal checks array (existing checks first, then newly-added ones) [1], and Zod executes checks by iterating that list in order [2].
So for a string like:
z.string().email().nonempty()→ email check runs before “non-empty” (min-length) check.z.string().nonempty().email()(orz.string().min(1).email()) → non-empty/min(1) runs before email.
Also, .nonempty() on strings is implemented as minLength(1) in v4.3.6 [3].
Zod can report multiple issues for a value, but many form UIs show only the first issue—so chaining order often determines which message users see first.
Sources
[1] https://github.com/colinhacks/zod/blob/v4.3.6/packages/zod/src/v4/classic/schemas.ts
[2] https://github.com/colinhacks/zod/blob/v4.3.6/packages/zod/src/v4/core/schemas.ts
[3] https://github.com/colinhacks/zod/blob/v4.3.6/packages/zod/src/v4/classic/schemas.ts
🌐 Web query:
Zod string().trim() whitespace validation behavior v4
💡 Result:
In Zod v4 (classic), z.string().trim() does not “validate whitespace”—it transforms the parsed output by applying JavaScript’s String.prototype.trim() (removes leading/trailing whitespace only; not whitespace in the middle). This means whitespace-only input like " " will become "" and still pass unless you add a length/nonempty constraint. [1], [2], [3]
Practical implications (v4):
- Removes only ends:
" a b "→"a b"(middle space remains). [2] - Doesn’t fail by itself:
" "→""(no error unless you add constraints). [2] - To forbid blank/whitespace-only: use trim + length (order matters because the trim must happen before the length check):
z.string().trim().min(1, "Required")- (equivalently in v4’s check-composition style)
z.string().check(z.trim(), z.minLength(1))[1]
Also, v4 “format helpers” like z.url() don’t automatically trim input; if you want " https://a.com" to be accepted/normalized, you must explicitly .trim() (or otherwise preprocess) first. [3]
Sources:
[1] Zod v4 release notes showing z.trim() as a composed check and its sequencing with other checks (example uses z.string().check(z.minLength(...), z.trim(), ...)). (github.com)
[2] Stack Overflow explanation that Zod’s .trim() removes only leading/trailing whitespace (not internal). (stackoverflow.com)
[3] Zod issue demonstrating that z.url() in v4 can pass a leading-space URL unless you trim explicitly. (github.com)
Citations:
- 1: https://github.com/colinhacks/zod/releases
- 2: https://stackoverflow.com/questions/77594561/how-to-remove-whitespace-from-within-a-string-using-zod?utm_source=openai
- 3: The new v4 string helpers seem incorrectly validate strings that should fail (or be corrected) colinhacks/zod#4754
유효성 검사 순서와 공백 처리 개선 필요
현재 코드의 두 가지 문제:
-
메시지 우선순위:
email().nonempty()순서에서 빈 값을 제출하면nonempty()의 "이메일을 입력해주세요." 메시지가 아닌email()의 "올바른 이메일 형식..." 메시지가 먼저 표시됩니다. Zod는 체인 순서대로 검사를 실행하므로 필수 입력 메시지가 가려집니다. -
공백 닉네임:
min(2)만으로는" "(공백 2개)를 걸러내지 못합니다.trim()없이는 공백만으로 된 입력이 길이 검사를 통과합니다.
trim().min(1, '필수메시지').min(2, '길이메시지') 패턴으로 순서를 조정하면 공백을 제거한 후 필수 입력 검사를 먼저 수행하므로 더 정확한 사용자 피드백을 제공할 수 있습니다.
✍️ 제안 수정안
export const loginSchema = z.object({
- email: z.string().email('올바른 이메일 형식을 입력해주세요.').nonempty('이메일을 입력해주세요.'),
- password: z.string().min(6, '비밀번호는 최소 6자 이상이어야 합니다.').nonempty('비밀번호를 입력해주세요.'),
+ email: z.string().trim().min(1, '이메일을 입력해주세요.').email('올바른 이메일 형식을 입력해주세요.'),
+ password: z.string().min(1, '비밀번호를 입력해주세요.').min(6, '비밀번호는 최소 6자 이상이어야 합니다.'),
});
export const signUpSchema = z.object({
- email: z.string().email('올바른 이메일 형식을 입력해주세요.').nonempty('이메일을 입력해주세요.'),
- password: z.string().min(6, '비밀번호는 최소 6자 이상이어야 합니다.').nonempty('비밀번호를 입력해주세요.'),
+ email: z.string().trim().min(1, '이메일을 입력해주세요.').email('올바른 이메일 형식을 입력해주세요.'),
+ password: z.string().min(1, '비밀번호를 입력해주세요.').min(6, '비밀번호는 최소 6자 이상이어야 합니다.'),
passwordConfirm: z.string().nonempty('비밀번호를 다시 한 번 입력해주세요.'),
- nickname: z.string().min(2, '닉네임은 최소 2자 이상이어야 합니다.').nonempty('닉네임을 입력해주세요.'),
+ nickname: z.string().trim().min(1, '닉네임을 입력해주세요.').min(2, '닉네임은 최소 2자 이상이어야 합니다.'),
}).refine((data) => data.password === data.passwordConfirm, {📝 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.
Suggested change
| export const loginSchema = z.object({ | |
| email: z.string().email('올바른 이메일 형식을 입력해주세요.').nonempty('이메일을 입력해주세요.'), | |
| password: z.string().min(6, '비밀번호는 최소 6자 이상이어야 합니다.').nonempty('비밀번호를 입력해주세요.'), | |
| }); | |
| export const signUpSchema = z.object({ | |
| email: z.string().email('올바른 이메일 형식을 입력해주세요.').nonempty('이메일을 입력해주세요.'), | |
| password: z.string().min(6, '비밀번호는 최소 6자 이상이어야 합니다.').nonempty('비밀번호를 입력해주세요.'), | |
| passwordConfirm: z.string().nonempty('비밀번호를 다시 한 번 입력해주세요.'), | |
| nickname: z.string().min(2, '닉네임은 최소 2자 이상이어야 합니다.').nonempty('닉네임을 입력해주세요.'), | |
| }).refine((data) => data.password === data.passwordConfirm, { | |
| message: "비밀번호가 일치하지 않습니다.", | |
| path: ["passwordConfirm"], | |
| }); | |
| export const loginSchema = z.object({ | |
| email: z.string().trim().min(1, '이메일을 입력해주세요.').email('올바른 이메일 형식을 입력해주세요.'), | |
| password: z.string().min(1, '비밀번호를 입력해주세요.').min(6, '비밀번호는 최소 6자 이상이어야 합니다.'), | |
| }); | |
| export const signUpSchema = z.object({ | |
| email: z.string().trim().min(1, '이메일을 입력해주세요.').email('올바른 이메일 형식을 입력해주세요.'), | |
| password: z.string().min(1, '비밀번호를 입력해주세요.').min(6, '비밀번호는 최소 6자 이상이어야 합니다.'), | |
| passwordConfirm: z.string().nonempty('비밀번호를 다시 한 번 입력해주세요.'), | |
| nickname: z.string().trim().min(1, '닉네임을 입력해주세요.').min(2, '닉네임은 최소 2자 이상이어야 합니다.'), | |
| }).refine((data) => data.password === data.passwordConfirm, { | |
| message: "비밀번호가 일치하지 않습니다.", | |
| path: ["passwordConfirm"], | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission3/fe/src/schemas/authSchema.ts` around lines 3 - 16,
Reorder and tighten string validations in loginSchema and signUpSchema: for
email/password fields swap the checks so required-empty validation runs before
format/length (e.g., for email use nonempty(...) then email(...); for password
use nonempty(...) then min(...)); for nickname use trim() then check nonempty
first and then min length (e.g., z.string().trim().min(1, '닉네임을 입력해주세요.').min(2,
'닉네임은 최소 2자 이상이어야 합니다.')); apply similar trim+nonempty ordering to
passwordConfirm if needed; update loginSchema and signUpSchema accordingly so
messages reflect required-empty before format/length errors.
wantkdd
approved these changes
Apr 10, 2026
Contributor
wantkdd
left a comment
wantkdd
left a comment
There was a problem hiding this comment.
전체적으로 코드가 깔끔하고 컴포넌트 분리가 매우 훌륭합니다! 유효성 검사 순서만 살짝 바꿔도 UX면에서 훨씬 좋은 코드가 될 것 같고, 중복된 검증 로직을 덜어내면 코드도 훨씬 가벼워질 것 같습니다!
머지충돌도 함께 해결해주세요!
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (3)
Week04/mint0326/mission3/src/hooks/useForm.ts (1)
13-27:⚠️ Potential issue | 🟠 Major초기/동적 검증 동기화가 깨져
isValid가 잘못 계산될 수 있습니다.Line 13에서
errors를{}로 시작하면 초기 invalid 입력도 잠깐 valid로 보일 수 있고, Line 24-27은validate변경 시 재검증이 되지 않습니다. 초기 에러를 즉시 계산하고, 검증 effect가validate에도 반응하도록 바꿔주세요.수정 제안
import { useState, useEffect, useRef } from 'react'; @@ const [values, setValues] = useState<T>(initialValues); - const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({}); + const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>( + () => validate(initialValues) + ); const [touched, setTouched] = useState<Partial<Record<keyof T, boolean>>>({}); - - const validateRef = useRef(validate); - - // validate 함수가 변경될 때마다 ref 업데이트 - useEffect(() => { - validateRef.current = validate; - }, [validate]); @@ // 실시간 유효성 검사 useEffect(() => { - const validationErrors = validateRef.current(values); - setErrors(validationErrors); - }, [values]); + setErrors(validate(values)); + }, [values, validate]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission3/src/hooks/useForm.ts` around lines 13 - 27, The initial errors state and validation effect need to be synchronized with the current validate function: initialize errors by calling validate(values) instead of starting with {} (update the useState for errors to use validate(values) via validateRef or direct call) and change the validation useEffect that currently depends only on values to also re-run when validate changes (add validate or use validateRef.current in the dependency logic) so that setErrors always reflects the current validate implementation; adjust validateRef handling if needed to avoid stale closures and ensure validateRef.current(values) is invoked for initial and subsequent validations.Week04/mint0326/mission2/src/hooks/useForm.ts (1)
13-20:⚠️ Potential issue | 🟡 Minor초기
errors가 빈 객체라 첫 렌더에서isValid가 잠깐true가 됩니다.지금 상태에선 첫 페인트에서 제출 버튼이 활성화됐다가 effect 이후 비활성화될 수 있습니다.
errors를validate(initialValues)로 초기화해서 최초 렌더부터 실제 유효성 상태를 반영해 주세요.수정 예시
- const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({}); + const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>( + () => validate(initialValues) + );Also applies to: 37-37
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission2/src/hooks/useForm.ts` around lines 13 - 20, The initial errors state is set to an empty object causing isValid to be briefly true on first render; change the errors initialization to use validate(initialValues) so the first paint reflects real validation state (i.e., replace useState<...>({}) for errors with useState<...>(validate(initialValues))). Also apply the same pattern where touched or any other validation-derived state is initialized (e.g., the touched state referenced around line 37) so they derive from initialValues instead of empty literals; keep the existing useEffect that updates errors on values/validate changes.Week04/mint0326/mission3/src/pages/SignUpPage.tsx (1)
74-76:⚠️ Potential issue | 🟡 Minor아직 동작 없는 요소를 클릭 가능하게 보이게 두지 않는 편이 좋습니다.
구글 로그인버튼과편집오버레이가 실제 핸들러 없이 hover/cursor affordance만 주고 있어서 사용자 입장에서는 고장 난 UI처럼 보입니다. 구현 전이라면disabled/aria-disabled상태로 명시하거나 숨겨 주세요.Also applies to: 195-197
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/mint0326/mission3/src/pages/SignUpPage.tsx` around lines 74 - 76, The "구글 로그인" button in SignUpPage and the "편집" overlay currently present interactive affordances (hover/cursor) without handlers; update those elements to reflect a non-interactive state by adding disabled or aria-disabled attributes (e.g., set disabled on the <button> with text "구글 로그인" or add aria-disabled="true" if it's not a native button), remove pointer/hover classes (cursor-pointer and hover:bg-*) and adjust styling to a muted appearance, and for the "편집" overlay set aria-hidden or hide it until the handler exists; ensure you update the corresponding JSX elements in SignUpPage (the <button> containing "구글 로그인" and the overlay element rendering "편집") so screen readers and visuals correctly reflect non-interactivity.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@Week04/mint0326/mission2/src/index.css`:
- Around line 14-19: Remove the extra blank lines before the declarations and
make the text-rendering value conform to the project's stylelint rules: delete
the empty lines preceding the color and font-synthesis declarations and adjust
the text-rendering value (in the text-rendering declaration) to the project's
expected keyword casing or rule (or update stylelint config) so the declaration
for text-rendering passes linting; target the declarations named color,
background-color, font-synthesis, and text-rendering when making the changes.
In `@Week04/mint0326/mission2/src/pages/LoginPage.tsx`:
- Around line 32-35: The form shows validation errors immediately because the
render only checks errors instead of whether the field was touched; update the
LoginPage render logic to require both the touched flag and an error (e.g.,
check touched.email && errors.email and touched.password && errors.password)
before showing error messages or red input styles, ensure the onBlur handler
from useForm (handleBlur) is attached to inputs so touched is set, and apply the
same change for the other affected block (lines ~78-99) to stop errors appearing
on first render.
- Around line 1-3: LoginPage에서 매 렌더링마다 새로 생성되는 validate 함수를 useCallback으로 감싸 참조를
고정해 주세요: 현재 validate 함수가 변경될 때 useForm의 effect(의존성에 validate 포함)가 setErrors를 호출해
렌더 루프를 유발하므로 validate를 React.useCallback으로 래핑하여 안정화하고 필요한 의존성(예: form values나
translation 등)만 포함시켜 useForm의 effect 반복 호출을 방지하세요; 관련 식별자: validate,
useCallback, useForm, setErrors, LoginPage.
In `@Week04/mint0326/mission3/src/index.css`:
- Around line 14-19: Remove the stray blank lines before declarations (around
the color-scheme and font-synthesis/text-rendering blocks) to satisfy
stylelint's "declaration-empty-line-before" rule, and replace the problematic
text-rendering value by either using a linter-acceptable token or silencing the
rule: change text-rendering: optimizeLegibility; to a linter-friendly value or
add an inline disable comment (e.g. /* stylelint-disable-next-line
property-no-unknown */) immediately above the text-rendering declaration; edit
these in index.css by locating the color-scheme, color, background-color,
font-synthesis, and text-rendering declarations.
In `@Week04/mint0326/mission3/src/pages/SignUpPage.tsx`:
- Around line 135-163: The toggle buttons that render Eye/EyeOff icons (the
button with onClick={() => setShowPassword(!showPassword)} and the button with
onClick={() => setShowConfirmPassword(!showConfirmPassword)}) need accessible
names: add an appropriate aria-label that reflects the current state (e.g.,
"Hide password" when showPassword is true and "Show password" when false;
similarly for showConfirmPassword) so screen readers convey the button purpose;
update both button elements to compute and set the aria-label accordingly while
keeping the existing onClick handlers and icon rendering.
---
Duplicate comments:
In `@Week04/mint0326/mission2/src/hooks/useForm.ts`:
- Around line 13-20: The initial errors state is set to an empty object causing
isValid to be briefly true on first render; change the errors initialization to
use validate(initialValues) so the first paint reflects real validation state
(i.e., replace useState<...>({}) for errors with
useState<...>(validate(initialValues))). Also apply the same pattern where
touched or any other validation-derived state is initialized (e.g., the touched
state referenced around line 37) so they derive from initialValues instead of
empty literals; keep the existing useEffect that updates errors on
values/validate changes.
In `@Week04/mint0326/mission3/src/hooks/useForm.ts`:
- Around line 13-27: The initial errors state and validation effect need to be
synchronized with the current validate function: initialize errors by calling
validate(values) instead of starting with {} (update the useState for errors to
use validate(values) via validateRef or direct call) and change the validation
useEffect that currently depends only on values to also re-run when validate
changes (add validate or use validateRef.current in the dependency logic) so
that setErrors always reflects the current validate implementation; adjust
validateRef handling if needed to avoid stale closures and ensure
validateRef.current(values) is invoked for initial and subsequent validations.
In `@Week04/mint0326/mission3/src/pages/SignUpPage.tsx`:
- Around line 74-76: The "구글 로그인" button in SignUpPage and the "편집" overlay
currently present interactive affordances (hover/cursor) without handlers;
update those elements to reflect a non-interactive state by adding disabled or
aria-disabled attributes (e.g., set disabled on the <button> with text "구글 로그인"
or add aria-disabled="true" if it's not a native button), remove pointer/hover
classes (cursor-pointer and hover:bg-*) and adjust styling to a muted
appearance, and for the "편집" overlay set aria-hidden or hide it until the
handler exists; ensure you update the corresponding JSX elements in SignUpPage
(the <button> containing "구글 로그인" and the overlay element rendering "편집") so
screen readers and visuals correctly reflect non-interactivity.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0a5b350e-e54b-471f-8552-77b870a4fa46
⛔ Files ignored due to path filters (12)
Week04/mint0326/mission2/package-lock.jsonis excluded by!**/package-lock.jsonWeek04/mint0326/mission2/public/favicon.svgis excluded by!**/*.svgWeek04/mint0326/mission2/public/icons.svgis excluded by!**/*.svgWeek04/mint0326/mission2/src/assets/hero.pngis excluded by!**/*.pngWeek04/mint0326/mission2/src/assets/react.svgis excluded by!**/*.svgWeek04/mint0326/mission2/src/assets/vite.svgis excluded by!**/*.svgWeek04/mint0326/mission3/package-lock.jsonis excluded by!**/package-lock.jsonWeek04/mint0326/mission3/public/favicon.svgis excluded by!**/*.svgWeek04/mint0326/mission3/public/icons.svgis excluded by!**/*.svgWeek04/mint0326/mission3/src/assets/hero.pngis excluded by!**/*.pngWeek04/mint0326/mission3/src/assets/react.svgis excluded by!**/*.svgWeek04/mint0326/mission3/src/assets/vite.svgis excluded by!**/*.svg
📒 Files selected for processing (35)
Week04/mint0326/mission2/.gitignoreWeek04/mint0326/mission2/README.mdWeek04/mint0326/mission2/eslint.config.jsWeek04/mint0326/mission2/index.htmlWeek04/mint0326/mission2/package.jsonWeek04/mint0326/mission2/src/App.cssWeek04/mint0326/mission2/src/App.tsxWeek04/mint0326/mission2/src/components/common/Header.tsxWeek04/mint0326/mission2/src/hooks/useForm.tsWeek04/mint0326/mission2/src/index.cssWeek04/mint0326/mission2/src/main.tsxWeek04/mint0326/mission2/src/pages/LoginPage.tsxWeek04/mint0326/mission2/tsconfig.app.jsonWeek04/mint0326/mission2/tsconfig.jsonWeek04/mint0326/mission2/tsconfig.node.jsonWeek04/mint0326/mission2/vite.config.tsWeek04/mint0326/mission3/.gitignoreWeek04/mint0326/mission3/README.mdWeek04/mint0326/mission3/eslint.config.jsWeek04/mint0326/mission3/index.htmlWeek04/mint0326/mission3/package.jsonWeek04/mint0326/mission3/src/App.cssWeek04/mint0326/mission3/src/App.tsxWeek04/mint0326/mission3/src/components/common/Header.tsxWeek04/mint0326/mission3/src/hooks/useForm.tsWeek04/mint0326/mission3/src/hooks/useLocalStorage.tsWeek04/mint0326/mission3/src/index.cssWeek04/mint0326/mission3/src/main.tsxWeek04/mint0326/mission3/src/pages/LoginPage.tsxWeek04/mint0326/mission3/src/pages/SignUpPage.tsxWeek04/mint0326/mission3/src/schemas/authSchema.tsWeek04/mint0326/mission3/tsconfig.app.jsonWeek04/mint0326/mission3/tsconfig.jsonWeek04/mint0326/mission3/tsconfig.node.jsonWeek04/mint0326/mission3/vite.config.ts
✅ Files skipped from review due to trivial changes (19)
- Week04/mint0326/mission3/src/App.css
- Week04/mint0326/mission2/tsconfig.json
- Week04/mint0326/mission3/tsconfig.json
- Week04/mint0326/mission3/.gitignore
- Week04/mint0326/mission3/index.html
- Week04/mint0326/mission2/src/App.css
- Week04/mint0326/mission2/.gitignore
- Week04/mint0326/mission2/index.html
- Week04/mint0326/mission2/eslint.config.js
- Week04/mint0326/mission2/src/components/common/Header.tsx
- Week04/mint0326/mission2/tsconfig.app.json
- Week04/mint0326/mission2/README.md
- Week04/mint0326/mission3/README.md
- Week04/mint0326/mission3/eslint.config.js
- Week04/mint0326/mission2/package.json
- Week04/mint0326/mission3/tsconfig.node.json
- Week04/mint0326/mission3/package.json
- Week04/mint0326/mission3/tsconfig.app.json
- Week04/mint0326/mission2/tsconfig.node.json
Comment on lines
+14
to
+19
| color-scheme: light dark; | ||
| color: rgba(255, 255, 255, 0.87); | ||
| background-color: #000000; | ||
|
|
||
| font-synthesis: none; | ||
| text-rendering: optimizeLegibility; |
There was a problem hiding this comment.
Stylelint 에러를 먼저 정리해 주세요.
Line 14, Line 18의 선언 전 빈 줄과 Line 19의 optimizeLegibility 값으로 stylelint 오류가 발생합니다.
수정 제안
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
-
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: `#000000`;
-
font-synthesis: none;
- text-rendering: optimizeLegibility;
+ text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}📝 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.
Suggested change
| color-scheme: light dark; | |
| color: rgba(255, 255, 255, 0.87); | |
| background-color: #000000; | |
| font-synthesis: none; | |
| text-rendering: optimizeLegibility; | |
| :root { | |
| font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| color-scheme: light dark; | |
| color: rgba(255, 255, 255, 0.87); | |
| background-color: `#000000`; | |
| font-synthesis: none; | |
| text-rendering: optimizelegibility; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } |
🧰 Tools
🪛 Stylelint (17.6.0)
[error] 14-14: Unexpected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 18-18: Unexpected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 19-19: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission2/src/index.css` around lines 14 - 19, Remove the
extra blank lines before the declarations and make the text-rendering value
conform to the project's stylelint rules: delete the empty lines preceding the
color and font-synthesis declarations and adjust the text-rendering value (in
the text-rendering declaration) to the project's expected keyword casing or rule
(or update stylelint config) so the declaration for text-rendering passes
linting; target the declarations named color, background-color, font-synthesis,
and text-rendering when making the changes.
Comment on lines
+1
to
+3
| import { useNavigate } from 'react-router-dom'; | ||
| import { ChevronLeft } from 'lucide-react'; | ||
| import useForm from '../hooks/useForm'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
sed -n '1,35p' Week04/mint0326/mission2/src/pages/LoginPage.tsx
printf '\n---\n'
sed -n '16,20p' Week04/mint0326/mission2/src/hooks/useForm.tsRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 1156
🏁 Script executed:
cat -n Week04/mint0326/mission2/src/hooks/useForm.tsRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 1507
validate를 useCallback으로 안정화해야 useForm effect의 렌더 루프를 방지할 수 있습니다.
현재 validate는 LoginPage가 렌더링할 때마다 새로운 함수로 생성되고, useForm.ts Line 20의 effect가 이를 의존성으로 감시하며 setErrors를 호출합니다. 이 조합으로 인해 다음과 같은 무한 사이클이 발생할 수 있습니다:
- LoginPage 렌더링 → 새로운
validate함수 생성 - useForm의 effect가
validate의존성 변화 감지 - effect 실행 →
setErrors호출 setErrors로 인한 상태 업데이트 → LoginPage 재렌더링- 단계 1로 복귀
특히 값 변화가 없어도 validate 참조 변화만으로도 effect가 반복 실행되므로, useCallback으로 함수 참조를 고정해야 합니다.
수정 예시
+import { useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { ChevronLeft } from 'lucide-react';
import useForm from '../hooks/useForm';
- const validate = (values: { email: string; password: string }) => {
+ const validate = useCallback((values: { email: string; password: string }) => {
const errors: { email?: string; password?: string } = {};
// 이메일
if (!values.email) {
errors.email = '이메일을 입력해주세요!';
} else {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(values.email)) {
errors.email = '유효하지 않은 이메일 형식입니다.';
}
}
// 비밀번호
if (!values.password) {
errors.password = '비밀번호를 입력해주세요!';
} else if (values.password.length < 6) {
errors.password = '비밀번호는 최소 6자 이상이어야 합니다.';
}
return errors;
- };
+ }, []);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission2/src/pages/LoginPage.tsx` around lines 1 - 3,
LoginPage에서 매 렌더링마다 새로 생성되는 validate 함수를 useCallback으로 감싸 참조를 고정해 주세요: 현재
validate 함수가 변경될 때 useForm의 effect(의존성에 validate 포함)가 setErrors를 호출해 렌더 루프를
유발하므로 validate를 React.useCallback으로 래핑하여 안정화하고 필요한 의존성(예: form values나
translation 등)만 포함시켜 useForm의 effect 반복 호출을 방지하세요; 관련 식별자: validate,
useCallback, useForm, setErrors, LoginPage.
Comment on lines
+32
to
+35
| const { values, errors, handleChange, handleBlur, isValid } = useForm({ | ||
| initialValues: { email: '', password: '' }, | ||
| validate, | ||
| }); |
There was a problem hiding this comment.
에러 상태를 touched 없이 바로 노출해서 첫 진입부터 빨간 폼이 보입니다.
handleBlur로 touched를 추적하고 있는데, 실제 렌더 조건은 errors만 보고 있어서 사용자가 입력하기 전에도 에러 메시지와 빨간 테두리가 바로 표시됩니다.
수정 예시
- const { values, errors, handleChange, handleBlur, isValid } = useForm({
+ const { values, errors, touched, handleChange, handleBlur, isValid } = useForm({
initialValues: { email: '', password: '' },
validate,
});
@@
- className={`w-full px-4 py-3 bg-[`#1a1a1a`] border ${errors.email ? 'border-red-500' : 'border-[`#3a3a3a`]'
+ className={`w-full px-4 py-3 bg-[`#1a1a1a`] border ${touched.email && errors.email ? 'border-red-500' : 'border-[`#3a3a3a`]'
} rounded text-sm placeholder-[`#7a7a7a`] focus:outline-none focus:border-[`#ff007f`] transition-colors`}
/>
- {errors.email && (
+ {touched.email && errors.email && (
<p className="text-red-500 text-xs mt-1 ml-1">{errors.email}</p>
)}
@@
- className={`w-full px-4 py-3 bg-[`#1a1a1a`] border ${errors.password ? 'border-red-500' : 'border-[`#3a3a3a`]'
+ className={`w-full px-4 py-3 bg-[`#1a1a1a`] border ${touched.password && errors.password ? 'border-red-500' : 'border-[`#3a3a3a`]'
} rounded text-sm placeholder-[`#7a7a7a`] focus:outline-none focus:border-[`#ff007f`] transition-colors`}
/>
- {errors.password && (
+ {touched.password && errors.password && (
<p className="text-red-500 text-xs mt-1 ml-1">{errors.password}</p>
)}Also applies to: 78-99
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission2/src/pages/LoginPage.tsx` around lines 32 - 35, The
form shows validation errors immediately because the render only checks errors
instead of whether the field was touched; update the LoginPage render logic to
require both the touched flag and an error (e.g., check touched.email &&
errors.email and touched.password && errors.password) before showing error
messages or red input styles, ensure the onBlur handler from useForm
(handleBlur) is attached to inputs so touched is set, and apply the same change
for the other affected block (lines ~78-99) to stop errors appearing on first
render.
Comment on lines
+14
to
+19
| color-scheme: light dark; | ||
| color: rgba(255, 255, 255, 0.87); | ||
| background-color: #000000; | ||
|
|
||
| font-synthesis: none; | ||
| text-rendering: optimizeLegibility; |
There was a problem hiding this comment.
Stylelint 에러를 먼저 정리해 주세요.
Line 14, Line 18의 선언 전 빈 줄과 Line 19의 optimizeLegibility 값으로 stylelint 오류가 발생합니다.
수정 제안
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
-
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: `#000000`;
-
font-synthesis: none;
- text-rendering: optimizeLegibility;
+ text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}📝 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.
Suggested change
| color-scheme: light dark; | |
| color: rgba(255, 255, 255, 0.87); | |
| background-color: #000000; | |
| font-synthesis: none; | |
| text-rendering: optimizeLegibility; | |
| :root { | |
| font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| color-scheme: light dark; | |
| color: rgba(255, 255, 255, 0.87); | |
| background-color: `#000000`; | |
| font-synthesis: none; | |
| text-rendering: optimizelegibility; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } |
🧰 Tools
🪛 Stylelint (17.6.0)
[error] 14-14: Unexpected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 18-18: Unexpected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 19-19: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission3/src/index.css` around lines 14 - 19, Remove the
stray blank lines before declarations (around the color-scheme and
font-synthesis/text-rendering blocks) to satisfy stylelint's
"declaration-empty-line-before" rule, and replace the problematic text-rendering
value by either using a linter-acceptable token or silencing the rule: change
text-rendering: optimizeLegibility; to a linter-friendly value or add an inline
disable comment (e.g. /* stylelint-disable-next-line property-no-unknown */)
immediately above the text-rendering declaration; edit these in index.css by
locating the color-scheme, color, background-color, font-synthesis, and
text-rendering declarations.
Comment on lines
+135
to
+163
| <button | ||
| type="button" | ||
| onClick={() => setShowPassword(!showPassword)} | ||
| className="absolute right-4 top-1/2 -translate-y-1/2 text-[#7a7a7a] hover:text-[#eaeaea] transition-colors cursor-pointer" | ||
| > | ||
| {showPassword ? <Eye size={18} /> : <EyeOff size={18} />} | ||
| </button> | ||
| </div> | ||
| {errors.password && ( | ||
| <p className="text-red-500 text-xs mt-2 ml-1">{errors.password.message}</p> | ||
| )} | ||
| </div> | ||
|
|
||
| {/* 비밀번호 재확인 입력 */} | ||
| <div className="space-y-1"> | ||
| <div className="relative"> | ||
| <input | ||
| type={showConfirmPassword ? 'text' : 'password'} | ||
| {...register('passwordConfirm')} | ||
| placeholder="비밀번호를 다시 한 번 입력해주세요!" | ||
| className={`w-full pl-4 pr-12 py-3.5 bg-[#1a1a1a] border ${errors.passwordConfirm ? 'border-red-500' : 'border-[#3a3a3a]' | ||
| } rounded text-sm placeholder-[#7a7a7a] focus:outline-none focus:border-[#ff007f] transition-colors`} | ||
| /> | ||
| <button | ||
| type="button" | ||
| onClick={() => setShowConfirmPassword(!showConfirmPassword)} | ||
| className="absolute right-4 top-1/2 -translate-y-1/2 text-[#7a7a7a] hover:text-[#eaeaea] transition-colors cursor-pointer" | ||
| > | ||
| {showConfirmPassword ? <Eye size={18} /> : <EyeOff size={18} />} |
There was a problem hiding this comment.
아이콘 전용 버튼에 접근 가능한 이름을 넣어 주세요.
현재 비밀번호 표시 토글 버튼은 아이콘만 있어서 스크린 리더에서 용도를 알기 어렵습니다. 상태에 맞는 aria-label이 필요합니다.
수정 예시
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
+ aria-label={showPassword ? '비밀번호 숨기기' : '비밀번호 보기'}
className="absolute right-4 top-1/2 -translate-y-1/2 text-[`#7a7a7a`] hover:text-[`#eaeaea`] transition-colors cursor-pointer"
>
@@
<button
type="button"
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+ aria-label={showConfirmPassword ? '비밀번호 확인 숨기기' : '비밀번호 확인 보기'}
className="absolute right-4 top-1/2 -translate-y-1/2 text-[`#7a7a7a`] hover:text-[`#eaeaea`] transition-colors cursor-pointer"
>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/mint0326/mission3/src/pages/SignUpPage.tsx` around lines 135 - 163,
The toggle buttons that render Eye/EyeOff icons (the button with onClick={() =>
setShowPassword(!showPassword)} and the button with onClick={() =>
setShowConfirmPassword(!showConfirmPassword)}) need accessible names: add an
appropriate aria-label that reflects the current state (e.g., "Hide password"
when showPassword is true and "Show password" when false; similarly for
showConfirmPassword) so screen readers convey the button purpose; update both
button elements to compute and set the aria-label accordingly while keeping the
existing onClick handlers and icon rendering.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝 미션 번호
4주차 Misson 1~3
📋 구현 사항
Mission1
useCustomFetch훅 활용.Mission2
useForm커스텀 훅 활용.Mission3
react-hook-form으로 확장zod라이브러리 활용 유효성 검사.📎 스크린샷
Mission1
2026-04-07.004013_1.mp4
Mission2
2026-04-07.034208_1.mp4
Mission3
2026-04-07.214046_1.mp4
✅ 체크리스트
🤔 질문 사항
Summary by CodeRabbit
릴리스 노트
New Features
Documentation
Chores