Draft
Conversation
📝 Walkthrough코드 리뷰 분석WalkthroughWeek04/librelldd 디렉토리에 세 개의 새로운 React+TypeScript+Vite 프로젝트(mission01, mission02, mission03)를 추가합니다. mission01은 TMDB API를 활용한 영화 카탈로그 앱이고, mission02와 mission03은 인증 기능이 있는 로그인/회원가입 앱입니다. 각 프로젝트는 라우팅, 페이지 컴포넌트, 커스텀 훅, 타입 정의, 그리고 빌드 설정을 포함합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MoviePage
participant useCustomFetch
participant AxiosInstance
participant TMDB API
User->>MoviePage: 영화 카테고리 선택
MoviePage->>MoviePage: 라우트 파라미터에서 category 추출
MoviePage->>useCustomFetch: useCustomFetch(url) 호출
useCustomFetch->>useCustomFetch: isPending = true 설정
useCustomFetch->>AxiosInstance: GET 요청 (Authorization 헤더 포함)
AxiosInstance->>TMDB API: Bearer 토큰으로 API 호출
TMDB API-->>AxiosInstance: MovieResponse 반환
AxiosInstance-->>useCustomFetch: 응답 데이터
useCustomFetch->>useCustomFetch: data 설정, isPending = false
MoviePage->>MoviePage: movies 배열에서 MovieCard 렌더링
User->>MoviePage: 페이지네이션 컨트롤 (다음/이전)
MoviePage->>MoviePage: page 상태 업데이트
MoviePage->>useCustomFetch: 새로운 URL로 재페칭
useCustomFetch->>TMDB API: 다음 페이지 데이터 요청
sequenceDiagram
participant User
participant LoginPage
participant useForm Hook
participant postSignin API
participant Auth API
participant localStorage
participant Router
User->>LoginPage: 이메일/비밀번호 입력
LoginPage->>useForm Hook: handleChange 호출
useForm Hook->>useForm Hook: values 상태 업데이트
useForm Hook->>useForm Hook: useEffect에서 validate 실행
User->>LoginPage: 필드 blur (터치)
LoginPage->>useForm Hook: handleBlur 호출
useForm Hook->>useForm Hook: touched 상태 업데이트
User->>LoginPage: 로그인 버튼 클릭
LoginPage->>postSignin API: postSignin(이메일, 비밀번호) 호출
postSignin API->>Auth API: POST /v1/auth/signin 요청
Auth API-->>postSignin API: ResponseLoginDto (accessToken 포함)
postSignin API-->>LoginPage: 응답 반환
LoginPage->>LoginPage: accessToken 추출
LoginPage->>localStorage: useLocalStorage setItem('accessToken')
localStorage-->>LoginPage: 저장 완료
LoginPage->>Router: navigate('/') 실행
Router->>User: 홈페이지로 이동
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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: 20
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
🟡 Minor comments (7)
Week04/librelldd/mission01/src/pages/NotFoundPage.tsx-1-3 (1)
1-3:⚠️ Potential issue | 🟡 Minor404 안내 문구가 모호해서 사용자 복구 동선이 약합니다.
현재 텍스트는 상태를 명확히 설명하지 못해 UX가 떨어집니다. 최소한 “페이지를 찾을 수 없습니다” 형태로 바꾸는 것을 권장합니다.
🛠 제안 수정안
export default function NotFoundPage() { - return <div> 모른다! </div>; + return <div>페이지를 찾을 수 없습니다.</div>; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission01/src/pages/NotFoundPage.tsx` around lines 1 - 3, The 404 message in the NotFoundPage component is vague; update the JSX returned by the NotFoundPage function to a clearer Korean 404 message such as "페이지를 찾을 수 없습니다" (and optionally a short recovery hint or link) so users understand the error and next steps; locate the NotFoundPage function and replace the inner text of the returned <div> accordingly while keeping the same export default NotFoundPage signature.Week04/librelldd/mission03/index.html-7-7 (1)
7-7:⚠️ Potential issue | 🟡 Minor문서 제목이 프로젝트명과 불일치합니다.
Line 7의
<title>이mission02로 되어 있어 mission03 페이지 탭명이 잘못 표시됩니다.수정 제안
- <title>mission02</title> + <title>mission03</title>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/index.html` at line 7, The HTML document's <title> element is incorrect (currently "mission02"); update the <title> tag in index.html to match the project/page name "mission03" so the browser tab and metadata reflect the correct page (locate and edit the <title> element in the file).Week04/librelldd/mission03/src/layouts/HomeLayout.tsx-7-10 (1)
7-10:⚠️ Potential issue | 🟡 Minor레이아웃 클래스 오타와 footer 마크업을 정리해 주세요.
Line 7의flec-1오타로 메인 영역 확장이 깨지고,Line 9의푸터는 시맨틱 태그 없이 렌더링됩니다.🔧 제안 수정안
- <main className="flec-1"> + <main className="flex-1"> <Outlet /> - </main>푸터 - </div> + </main> + <footer>푸터</footer> + </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/src/layouts/HomeLayout.tsx` around lines 7 - 10, HomeLayout의 main 엘리먼트 클래스명 오타와 푸터 마크업 문제를 수정하세요: main의 className "flec-1"을 "flex-1"으로 변경하고, 파일 내에 텍스트로 남아있는 '푸터'를 시맨틱한 footer 요소로 교체(또는 적절한 <footer> 컨테이너 사용)해 불필요한 텍스트 노출을 제거하고 닫히지 않은 태그/들여쓰기도 정리하여 Outlet과 레이아웃 구조가 올바르게 렌더링되게 하세요 (참조 심볼: HomeLayout 컴포넌트, main className, Outlet, footer).Week04/librelldd/mission02/src/layouts/HomeLayout.tsx-7-10 (1)
7-10:⚠️ Potential issue | 🟡 Minor
main영역 클래스 오타와 푸터 마크업 구조를 수정해주세요.Line 7의
flec-1은 유효한 Tailwind 유틸리티가 아니어서 레이아웃이 의도대로 확장되지 않습니다. Line 9의</main>푸터는 의미론적 구조가 깨져 있습니다.수정 예시
- <main className="flec-1"> + <main className="flex-1"> <Outlet /> - </main>푸터 - </div> + </main> + <footer>푸터</footer> + </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission02/src/layouts/HomeLayout.tsx` around lines 7 - 10, In HomeLayout.tsx fix the typo in the main element and the broken footer markup: change the main's className from "flec-1" to the correct Tailwind utility "flex-1" and ensure the <main> tag properly closes before adding a semantic footer (replace the stray "푸터" text after </main> with a proper <footer>…</footer> element that contains the footer content); update the component around the Outlet to reflect these corrected tags.Week04/librelldd/mission03/package.json-2-2 (1)
2-2:⚠️ Potential issue | 🟡 Minor패키지명이 현재 프로젝트 디렉터리와 불일치합니다.
Line [2]가
"mission02"로 되어 있어mission03프로젝트 식별에 혼선을 줄 수 있습니다.제안 수정안
- "name": "mission02", + "name": "mission03",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/package.json` at line 2, The package.json "name" property currently has the incorrect value "mission02"; update the "name" field to "mission03" so the package identifier matches the project directory and intent—locate the "name" key in package.json and replace "mission02" with "mission03", then run a quick sanity check (npm pack or npm ls) to ensure tooling recognizes the new package name.Week04/librelldd/mission02/src/utils/validate.ts-20-21 (1)
20-21:⚠️ Potential issue | 🟡 Minor비밀번호 길이 검증 조건과 안내 문구가 불일치합니다.
현재 조건은 20자를 실패 처리하지만 메시지는
8~20자를 허용한다고 안내합니다. 조건을<= 20으로 맞추거나 문구를8~19자로 수정해야 합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission02/src/utils/validate.ts` around lines 20 - 21, The password-length check in validate.ts currently uses values.password.length < 20 but the error message on errors.password says "8~20자", causing mismatch; update the condition in the validator (the code that checks values.password.length) to use <= 20 (or alternatively change the error string to "8~19자") so the logic and the message are consistent—modify the conditional that sets errors.password and ensure values.password.length >= 8 && values.password.length <= 20 matches the displayed message.Week04/librelldd/mission01/src/components/MovieCard.tsx-21-25 (1)
21-25:⚠️ Potential issue | 🟡 Minor포스터 경로가 없을 때 깨진 이미지가 노출됩니다.
poster_path가 비어있는 경우를 대비한 fallback 이미지가 필요합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission01/src/components/MovieCard.tsx` around lines 21 - 25, The img element in MovieCard uses movie.poster_path directly so a missing poster_path shows a broken image; update MovieCard to use a fallback image when poster_path is falsy (e.g., choose a local placeholder URL or a default remote image) by computing the src before rendering (e.g., const posterSrc = movie.poster_path ? `https://image.tmdb.org/t/p/w200${movie.poster_path}` : DEFAULT_PLACEHOLDER) and/or add an onError handler on the <img> to swap to the fallback if the remote image fails; ensure you reference movie.poster_path, MovieCard, and the img element when making the change.
🧹 Nitpick comments (17)
Week04/librelldd/mission01/src/App.css (1)
118-137: 링크의 키보드 포커스 상태를 hover와 동일 수준으로 보강해주세요.현재는 hover 피드백만 강조되어 있어 키보드 사용자에게 시각적 일관성이 약합니다.
♿ 제안 수정안
a { color: var(--text-h); font-size: 16px; border-radius: 6px; background: var(--social-bg); display: flex; padding: 6px 12px; align-items: center; gap: 8px; text-decoration: none; transition: box-shadow 0.3s; &:hover { box-shadow: var(--shadow); } + &:focus-visible { + box-shadow: var(--shadow); + outline: 2px solid var(--text-h); + outline-offset: 2px; + } .button-icon { height: 18px; width: 18px; } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission01/src/App.css` around lines 118 - 137, The link styles under the "a" selector only add visual feedback on hover; add matching keyboard focus styles by defining ":focus" and ":focus-visible" alongside "&:hover" in the same rule so keyboard users see equivalent feedback (e.g., apply the same box-shadow: var(--shadow) and a clear outline/outline-offset for accessibility). Update the "a" rule (and keep ".button-icon" intact) to include these focus selectors and ensure the focus styles are not removed by browser defaults so focus is as prominent as hover.Week04/librelldd/mission03/src/pages/NotFoundPage.tsx (1)
1-4: 404 페이지에 최소한의 의미 있는 마크업을 추가하면 UX가 좋아집니다.Line 3이 단순 텍스트만 보여줘서 사용자 맥락 전달이 약합니다. 제목/설명 정도는 넣어두는 편이 좋습니다.
개선 예시
const NotFoundPage = () => { return ( - <div>NotFoundPage</div> + <main> + <h1>404</h1> + <p>페이지를 찾을 수 없습니다.</p> + </main> ) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/src/pages/NotFoundPage.tsx` around lines 1 - 4, NotFoundPage currently renders only plain text; update the NotFoundPage component JSX to provide minimal meaningful markup (e.g., an <h1> title like "404 - Page Not Found" and a short <p> description with suggested actions). Locate the NotFoundPage functional component and replace the simple <div> content with semantic elements (heading and paragraph) and optionally a link or button to return home to improve UX.Week04/librelldd/mission03/.gitignore (1)
10-14: 환경 변수 파일 패턴을 추가로 제외하는 편이 안전합니다.현재는 Line 13의
*.local만 있어.env,.env.production같은 파일이 추적될 수 있습니다.추가 예시
node_modules dist dist-ssr *.local +.env +.env.* +!.env.example🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/.gitignore` around lines 10 - 14, 현재 .gitignore에 '*.local'만 있어 환경변수 파일(.env, .env.production 등)이 추적될 수 있으므로 .gitignore에 .env와 .env.* 패턴을 추가해 민감한 환경변수 파일을 제외하세요; 참고로 수정 대상은 .gitignore의 기존 '*.local' 항목과 함께 .env, .env.*(예: .env.local, .env.production)를 추가해 커밋에서 제외되도록 합니다.Week04/librelldd/mission02/postcss.config.js (1)
2-4: Tailwind CSS v4에서autoprefixer는 제거하세요.
@tailwindcss/postcss는 Lightning CSS를 통해 vendor prefixing을 자동으로 처리하므로, 별도의autoprefixerPostCSS 플러그인은 필요하지 않습니다. 빌드 파이프라인을 단순화하기 위해 제거하세요.수정 예시
export default { plugins: { - '@tailwindcss/postcss': {}, - autoprefixer: {}, + '@tailwindcss/postcss': {}, }, }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission02/postcss.config.js` around lines 2 - 4, The PostCSS config currently includes both '@tailwindcss/postcss' and autoprefixer; remove the redundant autoprefixer entry because '@tailwindcss/postcss' (via Lightning CSS) already handles vendor prefixing. Edit the plugins object in postcss.config.js to delete the autoprefixer key so only '@tailwindcss/postcss': {} remains, keeping the rest of the config unchanged.Week04/librelldd/mission01/README.md (1)
1-73: README를 미션 기준으로 보강하면 온보딩이 훨씬 쉬워집니다.현재 내용이 템플릿 중심이라, 실제 사용에 필요한 실행 절차(예: 필요한 환경 변수, 실행 순서, 주요 페이지/기능 요약)가 빠져 있습니다. 릴리즈 품질 측면에서 프로젝트 문맥에 맞게 갱신해두는 것을 권장합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission01/README.md` around lines 1 - 73, 현재 README(섹션 "React + TypeScript + Vite", "React Compiler", "Expanding the ESLint configuration")가 템플릿 설명 위주여서 미션 온보딩에 필요한 실행 절차와 컨텍스트가 빠져 있습니다; README에 별도 "Getting Started / 미션 실행 방법" 섹션을 추가해 필수 전제조건(Node 버전 등), 제공할 .env.example과 필요한 환경 변수 목록, 설치·개발·빌드·프리뷰·린트·테스트 명령어(npm/yarn/pnpm의 dev, build, preview, lint, test 등), 실행 순서(예: 설치 → 환경변수 설정 → dev 실행), 그리고 주요 페이지·기능 요약(예: /, /login, /dashboard 등 미션에서 확인해야 할 경로와 목적)을 간단한 문장으로 기재하도록 수정하세요; 또한 현재 코드 블록(ESLint 설정 예시) 아래에 "Mission-specific notes"를 추가해 미션별 권장 설정이나 주의사항을 명시하면 온보딩이 쉬워집니다.Week04/librelldd/mission01/src/components/Navbar.tsx (1)
3-9: 상수명LIMS는LINKS처럼 의미가 명확한 이름으로 바꾸는 것을 권장합니다.오타처럼 보이는 이름이라 읽는 사람이 의도를 바로 파악하기 어렵습니다.
제안 수정안
-const LIMS = [ +const LINKS = [ @@ - {LIMS.map(({to, label}) => ( + {LINKS.map(({to, label}) => (🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission01/src/components/Navbar.tsx` around lines 3 - 9, Rename the ambiguous constant LIMS to a clearer name such as LINKS (or NAV_LINKS) across Navbar.tsx to make its intent obvious; update the declaration of LIMS and all usages within the file (e.g., where Navbar maps or references LIMS) to the new identifier so imports/refs remain consistent and the code compiles.Week04/librelldd/mission01/src/App.tsx (1)
23-30: 상세 페이지 경로를 하나로 통일하는 것이 좋습니다.
movies/details/:movieId와movies/detail/:movieId가 같은 컴포넌트를 가리켜 URL 정책이 분산됩니다. 하나를 표준 경로로 정하고 나머지는 리다이렉트로 정리하는 편이 유지보수에 유리합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission01/src/App.tsx` around lines 23 - 30, Two routes point to the same component (MovieDetailPage) using different paths ('movies/details/:movieId' and 'movies/detail/:movieId'); pick one canonical path (e.g., 'movies/details/:movieId') and change the other to a redirect to that canonical route so all links resolve consistently. Update the router config where MovieDetailPage is registered to remove the duplicate route and add a redirect route that reads the old param (movieId) and navigates to the chosen canonical path, ensuring only MovieDetailPage remains as the final destination.Week04/librelldd/mission03/src/pages/LoginPage.tsx (2)
8-8: 로컬스토리지 키는 상수(LOCAL_STORAGE_KEY)를 재사용하는 편이 좋습니다.문자열 하드코딩을 피하면 키 변경 시 누락 위험을 줄일 수 있습니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/src/pages/LoginPage.tsx` at line 8, LoginPage.tsx currently hardcodes the localStorage key when calling useLocalStorage("accessToken"); change this to reuse a constant (e.g., LOCAL_STORAGE_KEY) instead of the string literal to avoid duplicate hardcoding; update the call to useLocalStorage(LOCAL_STORAGE_KEY) and ensure the constant is imported/defined alongside other constants so setItem from useLocalStorage uses the shared LOCAL_STORAGE_KEY.
27-27: 토큰 추출 로직에서as any다중 폴백은 제거하는 것이 좋습니다.
postSignin의 응답 계약이 이미 정해져 있으니response.result.accessToken단일 경로로 처리하고, 없을 때는 명시적으로 예외 처리하는 편이 안전합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/src/pages/LoginPage.tsx` at line 27, The token extraction line that builds `token` by chaining multiple `(response as any)` fallbacks should be simplified: use the expected contract `response.result.accessToken` (from the `postSignin` call) as the single source and if it's missing throw or return a clear error. Update the code in LoginPage.tsx where `const token = ...` is defined to read only `response.result.accessToken`, validate its presence, and handle the absent-token case explicitly (throw an Error or call the existing error handler) rather than relying on unsafe `as any` fallbacks.Week04/librelldd/mission01/src/pages/MoviePage.tsx (1)
9-10: 카테고리 변경 시 페이지를 1로 초기화하는 것이 UX에 더 자연스럽습니다.현재는 이전 카테고리에서 보던 페이지 번호가 유지되어 새 카테고리 진입 경험이 어색할 수 있습니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission01/src/pages/MoviePage.tsx` around lines 9 - 10, When the route param "category" changes, reset the pagination state so new categories start at page 1: in the MoviePage component, add a useEffect that depends on the category from useParams and calls setPage(1) (referencing the existing page/setPage state and category variable) to reinitialize the page whenever category changes.Week04/librelldd/mission02/src/pages/LoginPage.tsx (1)
43-48: 뒤로가기 컨트롤은span대신button으로 구현하는 것을 권장합니다.현재 구현은 키보드 사용자 접근성이 떨어집니다.
button요소로 바꾸면 기본 포커스/키보드 상호작용을 확보할 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission02/src/pages/LoginPage.tsx` around lines 43 - 48, The back-navigation control uses a non-interactive span which hurts keyboard/accessibility; replace the span with a semantic button element that calls navigate(-1) on click, preserves the same className and inner text ("<"), and ensure any styling/ARIA (e.g., aria-label="Go back") is applied; update the element where the span is created (the element with onClick={() => navigate(-1)} and className="absolute left-0 ...") and confirm keyboard activation works without extra JS.Week04/librelldd/mission03/src/pages/MyPage.tsx (1)
5-5:any상태 타입은 제거하는 것이 좋습니다.
userInfo를 명시 타입으로 선언하면name/email접근 시 컴파일 단계에서 오류를 잡을 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/src/pages/MyPage.tsx` at line 5, Replace the implicit any for userInfo with a concrete interface and type the useState call: define an interface (e.g., interface UserInfo { name: string; email: string; /* add other known fields */ }) and change the state declaration in MyPage component from useState<any>(null) to useState<UserInfo | null>(null); then update any places that call setUserInfo or read userInfo (in JSX or functions inside MyPage) to respect the nullable type (check for null or use optional chaining) so name/email access is type-safe.Week04/librelldd/mission02/src/utils/validate.ts (1)
8-8:errors의any타입은 구체 타입으로 바꾸는 것을 권장합니다.
Partial<Record<keyof UserSignInformation, string>>처럼 선언하면 필드 오타와 반환 형태를 안전하게 관리할 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission02/src/utils/validate.ts` at line 8, Replace the loose any type on the errors object with a precise mapped type: declare errors as Partial<Record<keyof UserSignInformation, string>> (ensuring UserSignInformation is in scope/imported) instead of any, so the variable in validate.ts (the errors constant) enforces valid field keys and string values while remaining initializable as an empty object.Week04/librelldd/mission03/src/utils/validate.ts (1)
8-8:errors를any로 두기보다 명시 타입으로 제한하는 편이 안전합니다.검증 함수 반환 타입을 좁히면 폼 필드 변경 시 컴파일 타임에 누락/오타를 더 잘 잡을 수 있습니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/src/utils/validate.ts` at line 8, Replace the loose any for the validation result with a concrete type: define a ValidationErrors type (e.g., type ValidationErrors = Record<string, string> or, if you know the form fields, a stricter interface with those keys) then annotate the local variable (const errors: ValidationErrors = {}) and the validate function's return type to use ValidationErrors (or Partial<ValidationErrors> if fields are optional) so callers get compile-time checks for missing/typoed field names; update any places that read/write errors to satisfy the new type.Week04/librelldd/mission03/src/pages/SignupPage.tsx (1)
30-37: 검증 에러 객체의any사용은 타입 안정성을 무너뜨립니다.폼 키 기반으로 타입을 명시해 주세요.
♻️ 제안 코드
- const errors: any = {}; + const errors: Partial<Record<keyof SignupFormValues, string>> = {};🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/src/pages/SignupPage.tsx` around lines 30 - 37, The validate function currently types the errors object as any; define a concrete form values interface (e.g., SignupFormValues with keys email, name, password, passwordCheck) and a typed errors shape (e.g., type ValidationErrors = Partial<Record<keyof SignupFormValues, string>>), then change the validate signature to validate: (values: SignupFormValues) => ValidationErrors and initialize errors as const errors: ValidationErrors = {}; use those typed keys when assigning errors.email, errors.name, errors.password, and errors.passwordCheck.Week04/librelldd/mission03/src/hooks/useLocalStorage.ts (1)
3-30: 브라우저 런타임 가드가 없어서 환경에 따라 런타임 에러가 날 수 있습니다.
window가 없는 환경(SSR/테스트)에서도 안전하게 동작하도록 가드를 추가하는 것을 권장합니다.♻️ 제안 코드
export const useLocalStorage = (key: string) => { + const isBrowser = typeof window !== "undefined"; + const setItem = (value: unknown) => { + if (!isBrowser) return; try { window.localStorage.setItem(key, JSON.stringify(value)); } catch (error) { console.log(error); } }; const getItem = () => { + if (!isBrowser) return null; try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : null; } catch (e) { console.log(e); return null; } }; const removeItem = () => { + if (!isBrowser) return; try { window.localStorage.removeItem(key); } catch (error) { console.log(error); } };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/src/hooks/useLocalStorage.ts` around lines 3 - 30, The setItem, getItem and removeItem functions use window.localStorage directly and can throw in non-browser environments; add a runtime guard (e.g., check typeof window !== 'undefined' && window.localStorage) inside each function (or extract to a helper) so operations become no-ops when localStorage is unavailable and getItem returns null in that case; keep existing try/catch around JSON.parse/serialization and reference the key and those function names (setItem, getItem, removeItem) when updating the logic.Week04/librelldd/mission03/src/hooks/useForm.ts (1)
10-25: 상태 업데이트와 타입을keyof T기준으로 더 안전하게 고정하는 편이 좋습니다.현재 방식은 빠른 연속 업데이트에서 stale state 위험이 있고,
Record<string, ...>로 인해 키 타입 안정성이 약해집니다.♻️ 제안 코드
- const [touched, setTouched] = useState<Record<string, boolean>>({}); - const [errors, setErrors] = useState<Record<string, string>>({}); + const [touched, setTouched] = useState<Partial<Record<keyof T, boolean>>>({}); + const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({}); const handleChange = (name: keyof T, text: string) => { - setValues({ - ...values, - [name]: text, - }); + setValues((prev) => ({ + ...prev, + [name]: text, + })); }; const handleBlur = (name: keyof T) => { - setTouched({ - ...touched, - [name]: true, - }); + setTouched((prev) => ({ + ...prev, + [name]: true, + })); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@Week04/librelldd/mission03/src/hooks/useForm.ts` around lines 10 - 25, The state updates for touched/errors and value changes are unsafe: use functional updates to avoid stale state and tighten types to keys of T. Change touched and errors to Partial<Record<keyof T, boolean>> and Partial<Record<keyof T, string>> (or a mapped type) and update setTouched/setErrors/setValues using their functional form (prev => ({ ...prev, [name]: ... })) while casting the computed property key as needed (e.g., name as string) in handleChange and handleBlur; reference the useState declarations and the functions handleChange, handleBlur, setTouched, setErrors, and setValues when applying these edits.
🤖 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/librelldd/mission01/package.json`:
- Line 2: The package.json "name" field currently reads "mission02" which
conflicts with the surrounding project folder (mission01); update the "name"
property value from "mission02" to "mission01" so the package identifier matches
the project directory and workspace expectations (edit the "name" key in
package.json).
In `@Week04/librelldd/mission01/src/App.tsx`:
- Around line 17-19: The route currently declares both index: true and path:
'movies/:category' which is invalid; update the route definition that renders
<MoviePage /> by removing the index: true flag so it becomes a normal path route
(keep the path 'movies/:category' and the element <MoviePage />), ensuring the
route is declared as a non-index route per React Router rules.
In `@Week04/librelldd/mission01/src/assets/vite-env.d.ts`:
- Around line 3-11: Change the ImportMetaEnv declaration for VITE_TMDB_API_KEY
from a required string to an optional string (string | undefined) in the
ImportMetaEnv interface in vite-env.d.ts, then add runtime validation where the
key is consumed (notably in useCustomFetch.ts around the Authorization header
usage and in MovieDetailPage.tsx before constructing requests) by reading
import.meta.env.VITE_TMDB_API_KEY into a local const and throwing or handling a
clear Error when it's missing (e.g., if (!apiKey) throw new Error("Missing
VITE_TMDB_API_KEY")). Ensure both places use the validated local const for the
Bearer token instead of directly trusting import.meta.env.
In `@Week04/librelldd/mission01/src/components/LoadingSpinner.tsx`:
- Around line 4-8: The element in the LoadingSpinner component using
role='status' has no accessible name; update the LoadingSpinner component to
provide one by adding an aria-label (e.g., aria-label="Loading") on the div with
role='status' or include a visually-hidden text node/span (screen-reader-only)
inside the component that reads "Loading" (or a passed-in prop) so assistive
technologies announce the loading state.
In `@Week04/librelldd/mission01/src/components/MovieCard.tsx`:
- Around line 14-20: The movie card div in MovieCard.tsx relies only on mouse
events which blocks keyboard users; update the interactive div (the element with
onClick={() => navigate(`/movies/details/${movie.id}`)} and the
onMouseEnter/onMouseLeave handlers) to be keyboard-accessible by adding
role="button", tabIndex={0}, and an onKeyDown handler that listens for Enter and
Space and invokes the same navigate logic (or calls the existing onClick
handler), and ensure focus styles are preserved; keep existing hover and mouse
handlers and reuse setIsHovered as appropriate so mouse and keyboard
interactions behave consistently.
In `@Week04/librelldd/mission01/src/hooks/useCustomFetch.ts`:
- Around line 16-38: The effect in useCustomFetch (inside the useEffect that
defines fetchData) lacks request cancellation, which can cause stale state
updates when the component unmounts or url changes; fix by creating an
AbortController before calling axios.get, pass its signal to axios
(axios.get<T>(url, { signal, headers: ... })), check for aborted requests in the
catch and avoid calling setData/setIsError/setIsPending if the controller has
been aborted (or return early), and return a cleanup function from the useEffect
that calls controller.abort() so in-flight requests are cancelled on unmount or
url change.
In `@Week04/librelldd/mission01/src/pages/MovieDetailPage.tsx`:
- Around line 24-35: The component currently only checks movieDetail so failures
leave it stuck in the LOADING UI; add an error state (e.g., movieError via
useState) and in fetchMovieData's catch setMovieError(error) (and optionally
clear movieDetail), then update the render logic to check movieError before the
loading branch and render a failure UI (retry/message) when movieError is set;
reference movieId, fetchMovieData, movieDetail, and the catch block to locate
where to set state and where to change the conditional render.
In `@Week04/librelldd/mission01/src/pages/MoviePage.tsx`:
- Around line 10-14: The code builds the Movie API URL using the route param
`category` directly which yields requests like /movie/undefined when the param
is missing; update MoviePage to validate `category` (from useParams) before
constructing `url` and calling useCustomFetch, and when `category` is falsy
immediately render an error UI or perform a redirect/navigation; specifically,
check `category` at the top of the component (before the `const url = ...` line
and before calling `useCustomFetch<MovieResponse>`), and only build the URL and
invoke `useCustomFetch` when `category` is defined.
In `@Week04/librelldd/mission01/src/types/movie.ts`:
- Line 3: Update the TypeScript movie types to match TMDB's response keys and
nullability: rename or add the TMDB key total_pages (instead of totalPages) so
the field matches the API response, and change backdrop_path and poster_path
types from string to string | null to accept nullable values; update any uses of
totalPages to read from total_pages or map the API response accordingly so no
values are lost.
In `@Week04/librelldd/mission02/src/hooks/useForm.ts`:
- Around line 40-43: The useEffect in useForm.ts calls validate(values) but
omits validate from the dependency array; update the effect so its dependency
array includes both values and validate (i.e., [values, validate]) to comply
with exhaustive-deps and ensure the effect re-runs when the validate prop
changes; keep the existing behavior of computing newErrors via validate(values)
and calling setErrors(newErrors).
- Around line 13-17: 현재 useForm 훅의 handleChange와 handleBlur에서
setValues({...values, ...}) 및 setTouched({...touched, ...}) 패턴은 클로저로 인해 경쟁 상태가
발생할 수 있으니 함수형 업데이트로 바꿔주세요: handleChange에서는 setValues(prev => ({ ...prev, [name]:
text }))를 사용하고, handleBlur에서는 setTouched(prev => ({ ...prev, [name]: true }))처럼
이전 상태를 인자로 받아 업데이트하도록 변경해 안정성을 확보하세요; 관련 식별자: handleChange, handleBlur,
setValues, setTouched, useForm.
In `@Week04/librelldd/mission02/src/src/components/Navbar.tsx`:
- Around line 7-20: Navbar.tsx currently uses anchors for /login and /support
that don't match defined routes; update the anchor with className
"hover:text-black transition-colors" that points to "/login" to use "/" instead,
and either remove the support link anchor (the one pointing to "/support" with
the same className) or add a corresponding route for "/support" in your router —
ensure you modify the <a href="..."> elements in the Navbar component so link
targets match your app's defined routes.
In `@Week04/librelldd/mission03/src/apis/auth.ts`:
- Around line 22-27: getMyInfo is failing because the path is using uppercase
"/V1/users/me" and the headers block overwrites axiosInstance's Authorization
with a constant 'Bearer' (no token); change the endpoint to "/v1/users/me" and
stop overriding the default auth header — either remove the headers option
entirely so axiosInstance's Authorization header is used, or (if you must set it
here) provide a real token like Authorization: `Bearer ${token}` (update
getMyInfo signature to accept a token if needed); refer to getMyInfo and
axiosInstance when making these edits.
In `@Week04/librelldd/mission03/src/apis/axios.ts`:
- Around line 6-14: The current axiosInstance sets Authorization statically
using getItem() at module load, so update axiosInstance to remove the fixed
Authorization header and add a request interceptor on axiosInstance that reads
the token dynamically via useLocalStorage(...).getItem() for each request and,
if present, sets config.headers.Authorization = `Bearer ${token}` (or deletes
the header when token is falsy) before returning the config; ensure you
reference axiosInstance, useLocalStorage, and getItem in the interceptor so
login-setItem() updates are respected.
In `@Week04/librelldd/mission03/src/pages/LoginPage.tsx`:
- Line 33: The alert currently shows the full login response (alert("로그인 응답 내용:
" + JSON.stringify(response))) which may expose sensitive data; update the
failure branch in the LoginPage (e.g., inside the handleLogin or submit handler)
to display a generic error message to the user such as "로그인에 실패했습니다. 다시 시도해주세요."
and remove or replace the JSON.stringify(response) UI output; if you still need
the raw response for debugging, log it to the console or a secure logger
(console.debug/console.error) instead of showing it in an alert.
In `@Week04/librelldd/mission03/src/pages/MyPage.tsx`:
- Around line 8-10: Replace the local mock getMyInfo in MyPage.tsx with the real
API call by importing getMyInfo from apis/auth and calling it inside your
effect/handler (e.g., useEffect or loadMyInfo function used in MyPage); await
the API, extract response.result and map it into your component state (e.g.,
setUser({ name: result.name, email: result.email })), and handle errors/loading
as needed so the page renders the actual authenticated user's info instead of
the hardcoded object.
In `@Week04/librelldd/mission03/src/pages/SignupPage.tsx`:
- Around line 148-171: Add accessible labels to the icon-only password toggle
buttons so screen readers can identify their purpose: update the two button
elements that call setShowPassword(!showPassword) and
setShowConfirm(!showConfirm) (the buttons adjacent to the password and
passwordCheck inputs obtained via getInputProps) to include descriptive
aria-label attributes like "Toggle password visibility" and "Toggle confirm
password visibility" respectively; ensure labels reflect current state if
desired (e.g., "Show password" vs "Hide password") to aid users of assistive
technologies.
In `@Week04/librelldd/mission03/src/src/components/Navbar.tsx`:
- Around line 1-25: The Navbar component is not exported, preventing imports
elsewhere; add an export for the component (e.g., export default Navbar or a
named export export const Navbar) at the end of the file so other modules can
import it and to match existing Navbar conventions in the codebase; update any
import sites if you choose a named export.
- Around line 7-20: Navbar uses plain <a href> which causes full page reloads;
update the Navbar component to import and use react-router-dom's Link or NavLink
for the internal routes (/login and /signup) (replace the <a href="/login"> and
<a href="/signup"> nodes with <Link to="/login"> and <Link to="/signup">),
ensure Navbar is exported (add export default Navbar or named export) so it can
be imported elsewhere, and resolve the /support reference by either adding a
corresponding route in your router (App.tsx) or converting the /support entry to
an external link (e.g., full URL with target/_blank) if it shouldn't be an
internal route.
In `@Week04/librelldd/mission03/src/types/auth.ts`:
- Around line 19-20: types/auth.ts의 createdAt와 updatedAt 필드가 현재 Date로 선언되어 있어
HTTP JSON 응답(ISO 문자열)을 파싱할 때 타입 불일치가 발생합니다; types/auth.ts에서 해당 인터페이스/타입의
createdAt와 updatedAt 타입을 Date에서 string으로 변경하여 HTTP 응답 문자열을 그대로 수용하도록 수정하세요(관련 타입
선언을 찾을 때 createdAt, updatedAt 식별자를 사용).
---
Minor comments:
In `@Week04/librelldd/mission01/src/components/MovieCard.tsx`:
- Around line 21-25: The img element in MovieCard uses movie.poster_path
directly so a missing poster_path shows a broken image; update MovieCard to use
a fallback image when poster_path is falsy (e.g., choose a local placeholder URL
or a default remote image) by computing the src before rendering (e.g., const
posterSrc = movie.poster_path ?
`https://image.tmdb.org/t/p/w200${movie.poster_path}` : DEFAULT_PLACEHOLDER)
and/or add an onError handler on the <img> to swap to the fallback if the remote
image fails; ensure you reference movie.poster_path, MovieCard, and the img
element when making the change.
In `@Week04/librelldd/mission01/src/pages/NotFoundPage.tsx`:
- Around line 1-3: The 404 message in the NotFoundPage component is vague;
update the JSX returned by the NotFoundPage function to a clearer Korean 404
message such as "페이지를 찾을 수 없습니다" (and optionally a short recovery hint or link)
so users understand the error and next steps; locate the NotFoundPage function
and replace the inner text of the returned <div> accordingly while keeping the
same export default NotFoundPage signature.
In `@Week04/librelldd/mission02/src/layouts/HomeLayout.tsx`:
- Around line 7-10: In HomeLayout.tsx fix the typo in the main element and the
broken footer markup: change the main's className from "flec-1" to the correct
Tailwind utility "flex-1" and ensure the <main> tag properly closes before
adding a semantic footer (replace the stray "푸터" text after </main> with a
proper <footer>…</footer> element that contains the footer content); update the
component around the Outlet to reflect these corrected tags.
In `@Week04/librelldd/mission02/src/utils/validate.ts`:
- Around line 20-21: The password-length check in validate.ts currently uses
values.password.length < 20 but the error message on errors.password says
"8~20자", causing mismatch; update the condition in the validator (the code that
checks values.password.length) to use <= 20 (or alternatively change the error
string to "8~19자") so the logic and the message are consistent—modify the
conditional that sets errors.password and ensure values.password.length >= 8 &&
values.password.length <= 20 matches the displayed message.
In `@Week04/librelldd/mission03/index.html`:
- Line 7: The HTML document's <title> element is incorrect (currently
"mission02"); update the <title> tag in index.html to match the project/page
name "mission03" so the browser tab and metadata reflect the correct page
(locate and edit the <title> element in the file).
In `@Week04/librelldd/mission03/package.json`:
- Line 2: The package.json "name" property currently has the incorrect value
"mission02"; update the "name" field to "mission03" so the package identifier
matches the project directory and intent—locate the "name" key in package.json
and replace "mission02" with "mission03", then run a quick sanity check (npm
pack or npm ls) to ensure tooling recognizes the new package name.
In `@Week04/librelldd/mission03/src/layouts/HomeLayout.tsx`:
- Around line 7-10: HomeLayout의 main 엘리먼트 클래스명 오타와 푸터 마크업 문제를 수정하세요: main의
className "flec-1"을 "flex-1"으로 변경하고, 파일 내에 텍스트로 남아있는 '푸터'를 시맨틱한 footer 요소로 교체(또는
적절한 <footer> 컨테이너 사용)해 불필요한 텍스트 노출을 제거하고 닫히지 않은 태그/들여쓰기도 정리하여 Outlet과 레이아웃 구조가
올바르게 렌더링되게 하세요 (참조 심볼: HomeLayout 컴포넌트, main className, Outlet, footer).
---
Nitpick comments:
In `@Week04/librelldd/mission01/README.md`:
- Around line 1-73: 현재 README(섹션 "React + TypeScript + Vite", "React Compiler",
"Expanding the ESLint configuration")가 템플릿 설명 위주여서 미션 온보딩에 필요한 실행 절차와 컨텍스트가 빠져
있습니다; README에 별도 "Getting Started / 미션 실행 방법" 섹션을 추가해 필수 전제조건(Node 버전 등), 제공할
.env.example과 필요한 환경 변수 목록, 설치·개발·빌드·프리뷰·린트·테스트 명령어(npm/yarn/pnpm의 dev, build,
preview, lint, test 등), 실행 순서(예: 설치 → 환경변수 설정 → dev 실행), 그리고 주요 페이지·기능 요약(예: /,
/login, /dashboard 등 미션에서 확인해야 할 경로와 목적)을 간단한 문장으로 기재하도록 수정하세요; 또한 현재 코드
블록(ESLint 설정 예시) 아래에 "Mission-specific notes"를 추가해 미션별 권장 설정이나 주의사항을 명시하면 온보딩이
쉬워집니다.
In `@Week04/librelldd/mission01/src/App.css`:
- Around line 118-137: The link styles under the "a" selector only add visual
feedback on hover; add matching keyboard focus styles by defining ":focus" and
":focus-visible" alongside "&:hover" in the same rule so keyboard users see
equivalent feedback (e.g., apply the same box-shadow: var(--shadow) and a clear
outline/outline-offset for accessibility). Update the "a" rule (and keep
".button-icon" intact) to include these focus selectors and ensure the focus
styles are not removed by browser defaults so focus is as prominent as hover.
In `@Week04/librelldd/mission01/src/App.tsx`:
- Around line 23-30: Two routes point to the same component (MovieDetailPage)
using different paths ('movies/details/:movieId' and 'movies/detail/:movieId');
pick one canonical path (e.g., 'movies/details/:movieId') and change the other
to a redirect to that canonical route so all links resolve consistently. Update
the router config where MovieDetailPage is registered to remove the duplicate
route and add a redirect route that reads the old param (movieId) and navigates
to the chosen canonical path, ensuring only MovieDetailPage remains as the final
destination.
In `@Week04/librelldd/mission01/src/components/Navbar.tsx`:
- Around line 3-9: Rename the ambiguous constant LIMS to a clearer name such as
LINKS (or NAV_LINKS) across Navbar.tsx to make its intent obvious; update the
declaration of LIMS and all usages within the file (e.g., where Navbar maps or
references LIMS) to the new identifier so imports/refs remain consistent and the
code compiles.
In `@Week04/librelldd/mission01/src/pages/MoviePage.tsx`:
- Around line 9-10: When the route param "category" changes, reset the
pagination state so new categories start at page 1: in the MoviePage component,
add a useEffect that depends on the category from useParams and calls setPage(1)
(referencing the existing page/setPage state and category variable) to
reinitialize the page whenever category changes.
In `@Week04/librelldd/mission02/postcss.config.js`:
- Around line 2-4: The PostCSS config currently includes both
'@tailwindcss/postcss' and autoprefixer; remove the redundant autoprefixer entry
because '@tailwindcss/postcss' (via Lightning CSS) already handles vendor
prefixing. Edit the plugins object in postcss.config.js to delete the
autoprefixer key so only '@tailwindcss/postcss': {} remains, keeping the rest of
the config unchanged.
In `@Week04/librelldd/mission02/src/pages/LoginPage.tsx`:
- Around line 43-48: The back-navigation control uses a non-interactive span
which hurts keyboard/accessibility; replace the span with a semantic button
element that calls navigate(-1) on click, preserves the same className and inner
text ("<"), and ensure any styling/ARIA (e.g., aria-label="Go back") is applied;
update the element where the span is created (the element with onClick={() =>
navigate(-1)} and className="absolute left-0 ...") and confirm keyboard
activation works without extra JS.
In `@Week04/librelldd/mission02/src/utils/validate.ts`:
- Line 8: Replace the loose any type on the errors object with a precise mapped
type: declare errors as Partial<Record<keyof UserSignInformation, string>>
(ensuring UserSignInformation is in scope/imported) instead of any, so the
variable in validate.ts (the errors constant) enforces valid field keys and
string values while remaining initializable as an empty object.
In `@Week04/librelldd/mission03/.gitignore`:
- Around line 10-14: 현재 .gitignore에 '*.local'만 있어 환경변수 파일(.env, .env.production
등)이 추적될 수 있으므로 .gitignore에 .env와 .env.* 패턴을 추가해 민감한 환경변수 파일을 제외하세요; 참고로 수정 대상은
.gitignore의 기존 '*.local' 항목과 함께 .env, .env.*(예: .env.local, .env.production)를
추가해 커밋에서 제외되도록 합니다.
In `@Week04/librelldd/mission03/src/hooks/useForm.ts`:
- Around line 10-25: The state updates for touched/errors and value changes are
unsafe: use functional updates to avoid stale state and tighten types to keys of
T. Change touched and errors to Partial<Record<keyof T, boolean>> and
Partial<Record<keyof T, string>> (or a mapped type) and update
setTouched/setErrors/setValues using their functional form (prev => ({ ...prev,
[name]: ... })) while casting the computed property key as needed (e.g., name as
string) in handleChange and handleBlur; reference the useState declarations and
the functions handleChange, handleBlur, setTouched, setErrors, and setValues
when applying these edits.
In `@Week04/librelldd/mission03/src/hooks/useLocalStorage.ts`:
- Around line 3-30: The setItem, getItem and removeItem functions use
window.localStorage directly and can throw in non-browser environments; add a
runtime guard (e.g., check typeof window !== 'undefined' && window.localStorage)
inside each function (or extract to a helper) so operations become no-ops when
localStorage is unavailable and getItem returns null in that case; keep existing
try/catch around JSON.parse/serialization and reference the key and those
function names (setItem, getItem, removeItem) when updating the logic.
In `@Week04/librelldd/mission03/src/pages/LoginPage.tsx`:
- Line 8: LoginPage.tsx currently hardcodes the localStorage key when calling
useLocalStorage("accessToken"); change this to reuse a constant (e.g.,
LOCAL_STORAGE_KEY) instead of the string literal to avoid duplicate hardcoding;
update the call to useLocalStorage(LOCAL_STORAGE_KEY) and ensure the constant is
imported/defined alongside other constants so setItem from useLocalStorage uses
the shared LOCAL_STORAGE_KEY.
- Line 27: The token extraction line that builds `token` by chaining multiple
`(response as any)` fallbacks should be simplified: use the expected contract
`response.result.accessToken` (from the `postSignin` call) as the single source
and if it's missing throw or return a clear error. Update the code in
LoginPage.tsx where `const token = ...` is defined to read only
`response.result.accessToken`, validate its presence, and handle the
absent-token case explicitly (throw an Error or call the existing error handler)
rather than relying on unsafe `as any` fallbacks.
In `@Week04/librelldd/mission03/src/pages/MyPage.tsx`:
- Line 5: Replace the implicit any for userInfo with a concrete interface and
type the useState call: define an interface (e.g., interface UserInfo { name:
string; email: string; /* add other known fields */ }) and change the state
declaration in MyPage component from useState<any>(null) to useState<UserInfo |
null>(null); then update any places that call setUserInfo or read userInfo (in
JSX or functions inside MyPage) to respect the nullable type (check for null or
use optional chaining) so name/email access is type-safe.
In `@Week04/librelldd/mission03/src/pages/NotFoundPage.tsx`:
- Around line 1-4: NotFoundPage currently renders only plain text; update the
NotFoundPage component JSX to provide minimal meaningful markup (e.g., an <h1>
title like "404 - Page Not Found" and a short <p> description with suggested
actions). Locate the NotFoundPage functional component and replace the simple
<div> content with semantic elements (heading and paragraph) and optionally a
link or button to return home to improve UX.
In `@Week04/librelldd/mission03/src/pages/SignupPage.tsx`:
- Around line 30-37: The validate function currently types the errors object as
any; define a concrete form values interface (e.g., SignupFormValues with keys
email, name, password, passwordCheck) and a typed errors shape (e.g., type
ValidationErrors = Partial<Record<keyof SignupFormValues, string>>), then change
the validate signature to validate: (values: SignupFormValues) =>
ValidationErrors and initialize errors as const errors: ValidationErrors = {};
use those typed keys when assigning errors.email, errors.name, errors.password,
and errors.passwordCheck.
In `@Week04/librelldd/mission03/src/utils/validate.ts`:
- Line 8: Replace the loose any for the validation result with a concrete type:
define a ValidationErrors type (e.g., type ValidationErrors = Record<string,
string> or, if you know the form fields, a stricter interface with those keys)
then annotate the local variable (const errors: ValidationErrors = {}) and the
validate function's return type to use ValidationErrors (or
Partial<ValidationErrors> if fields are optional) so callers get compile-time
checks for missing/typoed field names; update any places that read/write errors
to satisfy the new type.
🪄 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: d92e270f-1247-409e-9371-e7d2320edc11
⛔ Files ignored due to path filters (14)
Week04/librelldd/mission01/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlWeek04/librelldd/mission01/public/favicon.svgis excluded by!**/*.svgWeek04/librelldd/mission01/public/icons.svgis excluded by!**/*.svgWeek04/librelldd/mission01/src/assets/hero.pngis excluded by!**/*.pngWeek04/librelldd/mission01/src/assets/react.svgis excluded by!**/*.svgWeek04/librelldd/mission01/src/assets/vite.svgis excluded by!**/*.svgWeek04/librelldd/mission02/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlWeek04/librelldd/mission02/public/favicon.svgis excluded by!**/*.svgWeek04/librelldd/mission02/public/icons.svgis excluded by!**/*.svgWeek04/librelldd/mission02/src/assets/hero.pngis excluded by!**/*.pngWeek04/librelldd/mission02/src/assets/react.svgis excluded by!**/*.svgWeek04/librelldd/mission02/src/assets/vite.svgis excluded by!**/*.svgWeek04/librelldd/mission03/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (78)
Week04/librelldd/mission01/.gitignoreWeek04/librelldd/mission01/README.mdWeek04/librelldd/mission01/eslint.config.jsWeek04/librelldd/mission01/index.htmlWeek04/librelldd/mission01/package.jsonWeek04/librelldd/mission01/src/App.cssWeek04/librelldd/mission01/src/App.tsxWeek04/librelldd/mission01/src/assets/vite-env.d.tsWeek04/librelldd/mission01/src/components/LoadingSpinner.tsxWeek04/librelldd/mission01/src/components/MovieCard.tsxWeek04/librelldd/mission01/src/components/Navbar.tsxWeek04/librelldd/mission01/src/hooks/useCustomFetch.tsWeek04/librelldd/mission01/src/index.cssWeek04/librelldd/mission01/src/main.tsxWeek04/librelldd/mission01/src/pages/HomePage.tsxWeek04/librelldd/mission01/src/pages/MovieDetailPage.tsxWeek04/librelldd/mission01/src/pages/MoviePage.tsxWeek04/librelldd/mission01/src/pages/NotFoundPage.tsxWeek04/librelldd/mission01/src/types/movie.tsWeek04/librelldd/mission01/tsconfig.app.jsonWeek04/librelldd/mission01/tsconfig.jsonWeek04/librelldd/mission01/tsconfig.node.jsonWeek04/librelldd/mission01/vite.config.tsWeek04/librelldd/mission02/.gitignoreWeek04/librelldd/mission02/README.mdWeek04/librelldd/mission02/eslint.config.jsWeek04/librelldd/mission02/index.htmlWeek04/librelldd/mission02/package.jsonWeek04/librelldd/mission02/postcss.config.jsWeek04/librelldd/mission02/src/App.cssWeek04/librelldd/mission02/src/App.tsxWeek04/librelldd/mission02/src/hooks/useForm.tsWeek04/librelldd/mission02/src/index.cssWeek04/librelldd/mission02/src/layouts/HomeLayout.tsxWeek04/librelldd/mission02/src/main.tsxWeek04/librelldd/mission02/src/pages/HomePage.tsxWeek04/librelldd/mission02/src/pages/LoginPage.tsxWeek04/librelldd/mission02/src/pages/NotFoundPage.tsxWeek04/librelldd/mission02/src/pages/SignupPage.tsxWeek04/librelldd/mission02/src/src/components/Navbar.tsxWeek04/librelldd/mission02/src/utils/validate.tsWeek04/librelldd/mission02/src/vite-env.d.tsWeek04/librelldd/mission02/tsconfig.app.jsonWeek04/librelldd/mission02/tsconfig.jsonWeek04/librelldd/mission02/tsconfig.node.jsonWeek04/librelldd/mission02/vite.config.tsWeek04/librelldd/mission03/.gitignoreWeek04/librelldd/mission03/README.mdWeek04/librelldd/mission03/eslint.config.jsWeek04/librelldd/mission03/index.htmlWeek04/librelldd/mission03/package.jsonWeek04/librelldd/mission03/postcss.config.jsWeek04/librelldd/mission03/src/App.cssWeek04/librelldd/mission03/src/App.tsxWeek04/librelldd/mission03/src/apis/auth.tsWeek04/librelldd/mission03/src/apis/axios.tsWeek04/librelldd/mission03/src/constants/key.tsWeek04/librelldd/mission03/src/hooks/useForm.tsWeek04/librelldd/mission03/src/hooks/useLocalStorage.tsWeek04/librelldd/mission03/src/index.cssWeek04/librelldd/mission03/src/layouts/HomeLayout.tsxWeek04/librelldd/mission03/src/main.tsxWeek04/librelldd/mission03/src/pages/HomePage.tsxWeek04/librelldd/mission03/src/pages/LoginPage.tsxWeek04/librelldd/mission03/src/pages/MyPage.tsxWeek04/librelldd/mission03/src/pages/NotFoundPage.tsxWeek04/librelldd/mission03/src/pages/SignupPage.tsxWeek04/librelldd/mission03/src/src/components/Navbar.tsxWeek04/librelldd/mission03/src/types/auth.tsWeek04/librelldd/mission03/src/types/common.tsWeek04/librelldd/mission03/src/utils/validate.tsWeek04/librelldd/mission03/src/vite-env.d.tsWeek04/librelldd/mission03/tsconfig.app.jsonWeek04/librelldd/mission03/tsconfig.jsonWeek04/librelldd/mission03/tsconfig.node.jsonWeek04/librelldd/mission03/viteWeek04/librelldd/mission03/vite.config.tspackage.json
| @@ -0,0 +1,35 @@ | |||
| { | |||
| "name": "mission02", | |||
There was a problem hiding this comment.
패키지 이름이 프로젝트 경로와 불일치합니다.
Line 2의 "name": "mission02"는 현재 파일 경로(mission01)와 맞지 않아 패키지 식별/워크스페이스 설정에서 혼선을 만들 수 있습니다. 의도된 분리가 아니라면 이름을 맞춰 주세요.
수정 제안
- "name": "mission02",
+ "name": "mission01",📝 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
| "name": "mission02", | |
| "name": "mission01", |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/librelldd/mission01/package.json` at line 2, The package.json "name"
field currently reads "mission02" which conflicts with the surrounding project
folder (mission01); update the "name" property value from "mission02" to
"mission01" so the package identifier matches the project directory and
workspace expectations (edit the "name" key in package.json).
Comment on lines
+17
to
+19
| index: true, | ||
| path: 'movies/:category', | ||
| element: <MoviePage />, |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In react-router-dom v7 data routers, can a route object have both index: trueandpath at the same time?
💡 Result:
No, a route object in react-router-dom v7 data routers cannot have both index: true and path at the same time in a meaningful way. Index routes are defined by setting index: true on a route object without a path. Official documentation explicitly states: "Index routes are defined by setting index: true on a route object without a path." All examples show index routes with index: true and no path property. While the TypeScript type IndexRouteObject marks path as optional (path?: string), providing a path overrides the index behavior, treating it as a regular path route—the path takes precedence and index: true is ignored for matching purposes. Stack Overflow answers and GitHub issues confirm that using both causes the path to override index, leading to unexpected behavior like index routes not rendering as default child routes. For proper index route functionality (rendering at the parent's URL into its Outlet), omit the path.
Citations:
- 1: https://reactrouter.com/7.10.0/start/data/routing
- 2: https://api.reactrouter.com/v7/interfaces/react-router.IndexRouteObject.html
- 3: [Bug]: RouteObject type seems to be slightly different from Route props remix-run/react-router#8445
- 4: https://stackoverflow.com/questions/73099788/react-router-index-route-not-showing-as-default
- 5: https://stackoverflow.com/questions/70708422/react-router-6-and-typescript-index-attribute-type-true-is-not-assignable-to/70713384
인덱스 라우트와 경로를 동시에 선언할 수 없습니다.
Line 17에서 index: true와 path를 함께 사용하면 안 됩니다. React Router v7의 라우팅 규칙에 따르면 인덱스 라우트는 path 없이 index: true만으로 선언해야 합니다. 현재 코드에서 두 속성이 공존하면 path가 우선되어 index: true의 동작이 무시되므로, 카테고리 페이지는 일반 경로 라우트로 선언하려면 index: true를 제거해야 합니다.
제안 수정안
{
- index: true,
path: 'movies/:category',
element: <MoviePage />,
-
},🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/librelldd/mission01/src/App.tsx` around lines 17 - 19, The route
currently declares both index: true and path: 'movies/:category' which is
invalid; update the route definition that renders <MoviePage /> by removing the
index: true flag so it becomes a normal path route (keep the path
'movies/:category' and the element <MoviePage />), ensuring the route is
declared as a non-index route per React Router rules.
Comment on lines
+3
to
+11
| interface ImportMetaEnv { | ||
| // 여기에 사용 중인 환경 변수 타입을 정의합니다. | ||
| readonly VITE_TMDB_API_KEY: string; | ||
| // 다른 환경 변수가 있다면 여기에 추가하세요. | ||
| } | ||
|
|
||
| interface ImportMeta { | ||
| readonly env: ImportMetaEnv; | ||
| } No newline at end of file |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# 검증 목적: 환경변수 정의 유무 + 사용 지점 확인
# 기대 결과: .env* 내 VITE_TMDB_API_KEY 정의가 없으면 런타임 실패 가능성 높음
fd -HI '^\.env' Week04/librelldd/mission01
rg -n "VITE_TMDB_API_KEY|Authorization" Week04/librelldd/mission01/src -g "*.ts" -g "*.tsx"Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 442
🏁 Script executed:
cat -n Week04/librelldd/mission01/src/assets/vite-env.d.tsRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 373
🏁 Script executed:
sed -n '20,30p' Week04/librelldd/mission01/src/hooks/useCustomFetch.tsRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 405
🏁 Script executed:
sed -n '10,20p' Week04/librelldd/mission01/src/pages/MovieDetailPage.tsxRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 633
🏁 Script executed:
# .env.example 또는 환경변수 설정 문서 확인
find Week04/librelldd/mission01 -type f \( -name ".env*" -o -name "*.md" -o -name "README*" \) | head -20Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 109
🏁 Script executed:
cat -n Week04/librelldd/mission01/README.mdRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 3010
🏁 Script executed:
# Check if there are any env setup scripts or examples
find Week04/librelldd/mission01 -type f \( -name "*.env*" -o -name "*example*" \) -o -path "*/config/*" | head -20Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 55
타입 선언만으로는 환경 변수 누락을 방지할 수 없어 런타임 인증 실패를 야기합니다.
Line 5에서 VITE_TMDB_API_KEY를 필수 string으로 선언해도, 실제 .env 파일이 없으면 import.meta.env.VITE_TMDB_API_KEY는 런타임에 undefined가 됩니다. 결과적으로 useCustomFetch.ts Line 25와 MovieDetailPage.tsx Line 15의 Authorization 헤더는 Bearer undefined를 전송하게 되어 TMDB API 인증이 실패합니다.
타입을 선택적(string | undefined)으로 변경하고 런타임 검증을 추가하세요:
예시
const apiKey = import.meta.env.VITE_TMDB_API_KEY;
if (!apiKey) throw new Error("Missing VITE_TMDB_API_KEY");🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/librelldd/mission01/src/assets/vite-env.d.ts` around lines 3 - 11,
Change the ImportMetaEnv declaration for VITE_TMDB_API_KEY from a required
string to an optional string (string | undefined) in the ImportMetaEnv interface
in vite-env.d.ts, then add runtime validation where the key is consumed (notably
in useCustomFetch.ts around the Authorization header usage and in
MovieDetailPage.tsx before constructing requests) by reading
import.meta.env.VITE_TMDB_API_KEY into a local const and throwing or handling a
clear Error when it's missing (e.g., if (!apiKey) throw new Error("Missing
VITE_TMDB_API_KEY")). Ensure both places use the validated local const for the
Bearer token instead of directly trusting import.meta.env.
Comment on lines
+4
to
+8
| <div | ||
| className='size-12 animate-spin rounded-full border-2 | ||
| border-purple-500/30 border-t-purple-200' | ||
| role='status' | ||
| /> |
There was a problem hiding this comment.
role="status" 요소에 접근 가능한 이름이 없습니다.
Line 7의 상태 요소가 비어 있어 보조기기에서 로딩 상태 전달이 누락될 수 있습니다. aria-label 또는 스크린리더 전용 텍스트를 추가해 주세요.
✅ 제안 수정안
- <div
+ <div
className='size-12 animate-spin rounded-full border-2
border-purple-500/30 border-t-purple-200'
role='status'
+ aria-label='로딩 중'
/>📝 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='size-12 animate-spin rounded-full border-2 | |
| border-purple-500/30 border-t-purple-200' | |
| role='status' | |
| /> | |
| <div | |
| className='size-12 animate-spin rounded-full border-2 | |
| border-purple-500/30 border-t-purple-200' | |
| role='status' | |
| aria-label='로딩 중' | |
| /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/librelldd/mission01/src/components/LoadingSpinner.tsx` around lines 4
- 8, The element in the LoadingSpinner component using role='status' has no
accessible name; update the LoadingSpinner component to provide one by adding an
aria-label (e.g., aria-label="Loading") on the div with role='status' or include
a visually-hidden text node/span (screen-reader-only) inside the component that
reads "Loading" (or a passed-in prop) so assistive technologies announce the
loading state.
Comment on lines
+14
to
+20
| <div | ||
|
|
||
| onClick={() => navigate(`/movies/details/${movie.id}`)} | ||
| className='relative rounded-xl shadow-sm overflow-hidden cursor-pointer w-44 transition-transform duration-500 hover:scale-104' | ||
| onMouseEnter={() => setIsHovered(true)} | ||
| onMouseLeave={() => setIsHovered(false)} | ||
| > |
There was a problem hiding this comment.
카드가 마우스에만 의존해 키보드 접근이 막혀 있습니다.
현재 구조는 키보드 탐색/실행이 어려워 접근성 이슈가 발생합니다. 최소한 role, tabIndex, onKeyDown을 추가해 주세요.
♿ 제안 코드
<div
onClick={() => navigate(`/movies/details/${movie.id}`)}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ navigate(`/movies/details/${movie.id}`);
+ }
+ }}
className='relative rounded-xl shadow-sm overflow-hidden cursor-pointer w-44 transition-transform duration-500 hover:scale-104'
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/librelldd/mission01/src/components/MovieCard.tsx` around lines 14 -
20, The movie card div in MovieCard.tsx relies only on mouse events which blocks
keyboard users; update the interactive div (the element with onClick={() =>
navigate(`/movies/details/${movie.id}`)} and the onMouseEnter/onMouseLeave
handlers) to be keyboard-accessible by adding role="button", tabIndex={0}, and
an onKeyDown handler that listens for Enter and Space and invokes the same
navigate logic (or calls the existing onClick handler), and ensure focus styles
are preserved; keep existing hover and mouse handlers and reuse setIsHovered as
appropriate so mouse and keyboard interactions behave consistently.
Comment on lines
+8
to
+10
| const getMyInfo = async () => { | ||
| return { name: "사용자", email: "user@example.com" }; | ||
| }; |
There was a problem hiding this comment.
실제 내 정보 API 호출이 빠져 있어 마이페이지가 목 데이터만 표시됩니다.
현재 구현은 로컬 목 함수를 호출하므로 인증 상태와 무관하게 고정 사용자만 렌더링됩니다. Week04/librelldd/mission03/src/apis/auth.ts의 getMyInfo를 사용하고, 응답의 result를 상태에 매핑해야 합니다.
수정 예시
import { useEffect, useState } from "react";
+import { getMyInfo } from "../apis/auth";
const MyPage = () => {
- const [userInfo, setUserInfo] = useState<any>(null);
-
- const getMyInfo = async () => {
- return { name: "사용자", email: "user@example.com" };
- };
+ const [userInfo, setUserInfo] = useState<{ name: string; email: string } | null>(null);
useEffect(() => {
const getData = async () => {
try {
const response = await getMyInfo();
- setUserInfo(response);
+ setUserInfo({
+ name: response.result.name,
+ email: response.result.email,
+ });
} catch (error) {
console.error("데이터 로딩 실패:", error);
}
};
getData();
}, []);Also applies to: 16-18
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/librelldd/mission03/src/pages/MyPage.tsx` around lines 8 - 10, Replace
the local mock getMyInfo in MyPage.tsx with the real API call by importing
getMyInfo from apis/auth and calling it inside your effect/handler (e.g.,
useEffect or loadMyInfo function used in MyPage); await the API, extract
response.result and map it into your component state (e.g., setUser({ name:
result.name, email: result.email })), and handle errors/loading as needed so the
page renders the actual authenticated user's info instead of the hardcoded
object.
Comment on lines
+148
to
+171
| <button | ||
| type="button" | ||
| onClick={() => setShowPassword(!showPassword)} | ||
| className="absolute right-4 top-4 text-gray-500" | ||
| > | ||
| {showPassword ? "👁️" : "👁️🗨️"} | ||
| </button> | ||
| </div> | ||
|
|
||
| {/* 비밀번호 확인 필드 */} | ||
| <div className="relative"> | ||
| <input | ||
| {...getInputProps("passwordCheck")} | ||
| type={showConfirm ? "text" : "password"} | ||
| className="w-full p-4 bg-[#1a1a1a] border border-[#333] rounded-lg outline-none text-sm focus:border-pink-500" | ||
| placeholder="비밀번호 확인" | ||
| /> | ||
| <button | ||
| type="button" | ||
| onClick={() => setShowConfirm(!showConfirm)} | ||
| className="absolute right-4 top-4 text-gray-500" | ||
| > | ||
| {showConfirm ? "👁️" : "👁️🗨️"} | ||
| </button> |
There was a problem hiding this comment.
비밀번호 토글 버튼에 접근성 레이블이 없습니다.
아이콘-only 버튼은 스크린리더에서 목적을 알 수 없어 작업 완료를 방해할 수 있습니다. aria-label을 추가해 주세요.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/librelldd/mission03/src/pages/SignupPage.tsx` around lines 148 - 171,
Add accessible labels to the icon-only password toggle buttons so screen readers
can identify their purpose: update the two button elements that call
setShowPassword(!showPassword) and setShowConfirm(!showConfirm) (the buttons
adjacent to the password and passwordCheck inputs obtained via getInputProps) to
include descriptive aria-label attributes like "Toggle password visibility" and
"Toggle confirm password visibility" respectively; ensure labels reflect current
state if desired (e.g., "Show password" vs "Hide password") to aid users of
assistive technologies.
Comment on lines
+1
to
+25
| const Navbar = () => { | ||
| return ( | ||
| <nav className="w-full bg-[#f8f9fa] border-b border-[#e9ecef] px-10 py-2"> | ||
| {/* 메뉴 항목들을 담은 리스트 */} | ||
| <ul className="flex justify-end items-center gap-4 text-sm text-gray-600"> | ||
| <li> | ||
| <a href="/login" className="hover:text-black transition-colors"> | ||
| 로그인 | ||
| </a> | ||
| </li> | ||
| <li className="text-gray-300">|</li> {/* 구분선 */} | ||
| <li> | ||
| <a href="/signup" className="hover:text-black transition-colors"> | ||
| 회원가입 | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="/support" className="hover:text-black transition-colors"> | ||
| 고객센터 | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| ); | ||
| }; No newline at end of file |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Navbar export/import 일관성 확인
rg -n --type=tsx -C2 'const\s+Navbar\s*='
rg -n --type=tsx -C2 'export\s+default\s+Navbar|export\s+const\s+Navbar'
rg -n --type=tsx -C2 'import\s+.*Navbar.*from'Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 156
🏁 Script executed:
#!/bin/bash
# Navbar.tsx 파일 찾기 및 내용 확인
find . -name "Navbar.tsx" -type fRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 355
🏁 Script executed:
#!/bin/bash
# tsx 파일에서 Navbar 정의 및 export 검색
rg -n "const\s+Navbar|export.*Navbar" --multiline-dotallRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 499
🏁 Script executed:
#!/bin/bash
# Navbar 임포트 패턴 검색
rg -n "import.*Navbar|from.*Navbar"Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 361
🏁 Script executed:
#!/bin/bash
# Week04/librelldd/mission03/src/src/components/Navbar.tsx 파일 내용 확인
cat -n ./Week04/librelldd/mission03/src/src/components/Navbar.tsxRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 962
🏁 Script executed:
#!/bin/bash
# Week04/librelldd/mission03 내에서 Navbar 사용 검색
rg -n "Navbar" Week04/librelldd/mission03/src/Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 154
Navbar export가 누락되어 있습니다.
컴포넌트가 export되지 않아 다른 모듈에서 import할 수 없습니다. 코드베이스의 다른 Navbar 컴포넌트들과 일관성을 맞추기 위해 export 문을 추가하세요.
🔧 제안 수정안
};
+
+export default Navbar;📝 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 Navbar = () => { | |
| return ( | |
| <nav className="w-full bg-[#f8f9fa] border-b border-[#e9ecef] px-10 py-2"> | |
| {/* 메뉴 항목들을 담은 리스트 */} | |
| <ul className="flex justify-end items-center gap-4 text-sm text-gray-600"> | |
| <li> | |
| <a href="/login" className="hover:text-black transition-colors"> | |
| 로그인 | |
| </a> | |
| </li> | |
| <li className="text-gray-300">|</li> {/* 구분선 */} | |
| <li> | |
| <a href="/signup" className="hover:text-black transition-colors"> | |
| 회원가입 | |
| </a> | |
| </li> | |
| <li> | |
| <a href="/support" className="hover:text-black transition-colors"> | |
| 고객센터 | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| ); | |
| }; | |
| const Navbar = () => { | |
| return ( | |
| <nav className="w-full bg-[`#f8f9fa`] border-b border-[`#e9ecef`] px-10 py-2"> | |
| {/* 메뉴 항목들을 담은 리스트 */} | |
| <ul className="flex justify-end items-center gap-4 text-sm text-gray-600"> | |
| <li> | |
| <a href="/login" className="hover:text-black transition-colors"> | |
| 로그인 | |
| </a> | |
| </li> | |
| <li className="text-gray-300">|</li> {/* 구분선 */} | |
| <li> | |
| <a href="/signup" className="hover:text-black transition-colors"> | |
| 회원가입 | |
| </a> | |
| </li> | |
| <li> | |
| <a href="/support" className="hover:text-black transition-colors"> | |
| 고객센터 | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| ); | |
| }; | |
| export default Navbar; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/librelldd/mission03/src/src/components/Navbar.tsx` around lines 1 -
25, The Navbar component is not exported, preventing imports elsewhere; add an
export for the component (e.g., export default Navbar or a named export export
const Navbar) at the end of the file so other modules can import it and to match
existing Navbar conventions in the codebase; update any import sites if you
choose a named export.
Comment on lines
+7
to
+20
| <a href="/login" className="hover:text-black transition-colors"> | ||
| 로그인 | ||
| </a> | ||
| </li> | ||
| <li className="text-gray-300">|</li> {/* 구분선 */} | ||
| <li> | ||
| <a href="/signup" className="hover:text-black transition-colors"> | ||
| 회원가입 | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="/support" className="hover:text-black transition-colors"> | ||
| 고객센터 | ||
| </a> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# 내부 a href 사용과 라우트 정의 존재 여부를 함께 확인
rg -n --type=tsx -C2 '<a\s+href="/(login|signup|support)"'
rg -n --type=tsx -C3 'path\s*=\s*"/(login|signup|support)"|<Route|createBrowserRouter'Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 128
🏁 Script executed:
find . -name "Navbar.tsx" -o -name "Navbar.ts" -o -name "navbar.tsx" 2>/dev/null | head -20Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 355
🏁 Script executed:
git ls-files | grep -i navbarRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 460
🏁 Script executed:
git ls-files | head -30Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 1049
🏁 Script executed:
cat -n ./Week04/librelldd/mission03/src/src/components/Navbar.tsxRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 962
🏁 Script executed:
cat -n ./Week04/librelldd/mission03/src/src/App.tsx 2>/dev/null || cat -n ./Week04/librelldd/mission03/src/App.tsx 2>/dev/null || find ./Week04/librelldd/mission03 -name "App.tsx" -o -name "main.tsx" -o -name "index.tsx" | head -5Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 927
🏁 Script executed:
rg -n "import.*Navbar" ./Week04/librelldd/mission03/Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 55
🏁 Script executed:
rg -n "<Navbar" ./Week04/librelldd/mission03/srcRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 55
내부 라우팅에 <a href> 대신 Router Link를 사용해야 합니다.
프로젝트에서 React Router를 사용 중이므로 /login, /signup 경로 이동 시 react-router-dom의 Link/NavLink를 사용해야 전체 페이지 리로드를 방지할 수 있습니다. 또한 다음을 확인하세요:
- Navbar 컴포넌트에 export 문이 없어 다른 파일에서 import할 수 없습니다.
/support경로는 App.tsx의 라우터 설정에 정의되지 않았는데, Navbar에서 참조하고 있습니다. 라우터에 경로를 추가하거나 외부 링크로 변경해야 합니다.
🔧 제안 수정안
+import { Link } from "react-router-dom";
+
-const Navbar = () => {
+const Navbar = () => {
return (
<nav className="w-full bg-[`#f8f9fa`] border-b border-[`#e9ecef`] px-10 py-2">
<ul className="flex justify-end items-center gap-4 text-sm text-gray-600">
<li>
- <a href="/login" className="hover:text-black transition-colors">
+ <Link to="/login" className="hover:text-black transition-colors">
로그인
- </a>
+ </Link>
</li>
<li className="text-gray-300">|</li>
<li>
- <a href="/signup" className="hover:text-black transition-colors">
+ <Link to="/signup" className="hover:text-black transition-colors">
회원가입
- </a>
+ </Link>
</li>
<li>
- <a href="/support" className="hover:text-black transition-colors">
+ <a href="https://support.example.com" className="hover:text-black transition-colors">
고객센터
- </a>
+ </a>
</li>
</ul>
</nav>
);
-};
+};
+
+export default Navbar;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/librelldd/mission03/src/src/components/Navbar.tsx` around lines 7 -
20, Navbar uses plain <a href> which causes full page reloads; update the Navbar
component to import and use react-router-dom's Link or NavLink for the internal
routes (/login and /signup) (replace the <a href="/login"> and <a
href="/signup"> nodes with <Link to="/login"> and <Link to="/signup">), ensure
Navbar is exported (add export default Navbar or named export) so it can be
imported elsewhere, and resolve the /support reference by either adding a
corresponding route in your router (App.tsx) or converting the /support entry to
an external link (e.g., full URL with target/_blank) if it shouldn't be an
internal route.
Comment on lines
+19
to
+20
| createdAt: Date; | ||
| updatedAt: Date; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# createdAt/updatedAt 사용부와 Date 변환 여부 확인
rg -n -C2 '\b(createdAt|updatedAt)\b|new Date\(' Week04/librelldd/mission03/srcRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 782
🏁 Script executed:
# Search for API response handling and date conversion logic
rg -n 'axios|fetch|http|interceptor|response' Week04/librelldd/mission03/src --type ts -A 3 | head -100Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 4874
🏁 Script executed:
# Check for any date parsing or conversion utilities
rg -n 'JSON\.parse|Date\.parse|new Date|parseISO|toISOString' Week04/librelldd/mission03/src --type ts -B 2 -A 2Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 506
🏁 Script executed:
# Look for HTTP client configuration
fd -e ts -e js Week04/librelldd/mission03/src | xargs grep -l 'axios\|fetch\|http' 2>/dev/nullRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 500
🏁 Script executed:
# Check the actual usage of ResponseSignupDto and ResponseMyInfoDto
rg -n 'ResponseSignupDto|ResponseMyInfoDto' Week04/librelldd/mission03/src --type ts -B 2 -A 5Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 2783
🏁 Script executed:
cat -n Week04/librelldd/mission03/src/apis/axios.tsRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 584
🏁 Script executed:
# Also check if there are any other files that might handle date transformation
rg -n 'transformResponse|interceptor|transformer' Week04/librelldd/mission03/src --type tsRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 55
HTTP 응답의 날짜 필드를 문자열로 수정하세요.
createdAt과 updatedAt 필드의 타입을 Date에서 string으로 변경해야 합니다. axios 인스턴스에 응답 변환 로직이 없으므로, HTTP JSON 응답의 날짜 값은 ISO 형식 문자열로 전달됩니다. 현재 Date 타입으로 선언하면 런타임에 타입 오류가 발생합니다.
수정 제안
export type ResponseSignupDto = CommonResponse<{
id: number;
name: string;
email: string;
bio: string | null;
avatar: string | null;
- createdAt: Date;
- updatedAt: Date;
+ createdAt: string;
+ updatedAt: string;
}>;
@@
export type ResponseMyInfoDto = CommonResponse<{
id: number;
name: string;
email: string;
bio: string | null;
avatar: string | null;
- createdAt: Date;
- updatedAt: Date;
+ createdAt: string;
+ updatedAt: string;
}>;📝 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
| createdAt: Date; | |
| updatedAt: Date; | |
| export type ResponseSignupDto = CommonResponse<{ | |
| id: number; | |
| name: string; | |
| email: string; | |
| bio: string | null; | |
| avatar: string | null; | |
| createdAt: string; | |
| updatedAt: string; | |
| }>; | |
| export type ResponseMyInfoDto = CommonResponse<{ | |
| id: number; | |
| name: string; | |
| email: string; | |
| bio: string | null; | |
| avatar: string | null; | |
| createdAt: string; | |
| updatedAt: string; | |
| }>; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@Week04/librelldd/mission03/src/types/auth.ts` around lines 19 - 20,
types/auth.ts의 createdAt와 updatedAt 필드가 현재 Date로 선언되어 있어 HTTP JSON 응답(ISO 문자열)을
파싱할 때 타입 불일치가 발생합니다; types/auth.ts에서 해당 인터페이스/타입의 createdAt와 updatedAt 타입을
Date에서 string으로 변경하여 HTTP 응답 문자열을 그대로 수용하도록 수정하세요(관련 타입 선언을 찾을 때 createdAt,
updatedAt 식별자를 사용).
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
1 participant
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주차 mission1, 2, 3
📋 구현 사항
1. API 및 인증 로직 (apis/auth.ts)
Axios 기반 통신: axiosInstance를 사용하여 서버와 통신하며, 회원가입(postSignup), 로그인(postSignin), 내 정보 조회(getMyInfo) 함수를 모듈화했습니다.
타입 안전성: TypeScript의 인터페이스(DTO)를 적용하여 요청 데이터와 응답 데이터의 타입을 엄격하게 관리합니다.
인증 헤더: 내 정보 조회 시 Authorization 헤더를 전송하여 보안 인증을 수행할 수 있는 구조를 갖추고 있습니다.
2. 효율적인 커스텀 훅 (hooks)
useForm (폼 관리):
통합 상태 관리: 입력값(values), 에러 메시지(errors), 포커스 여부(touched)를 한곳에서 관리합니다.
자동 검증: useEffect를 활용해 값이 변경될 때마다 실시간으로 유효성 검사를 실행합니다.
재사용성: getInputProps 함수를 통해 입력 필드에 필요한 속성(value, onChange, onBlur)을 한 번에 바인딩할 수 있습니다.
useLocalStorage (저장소 관리):
데이터의 저장, 조회, 삭제를 안전하게 처리하며, 객체 형태의 데이터를 JSON.stringify와 JSON.parse로 자동 변환하여 관리합니다.
📎 스크린샷
✅ 체크리스트
🤔 질문 사항
Summary by CodeRabbit
릴리스 노트
New Features
Chores