Conversation
- vite 생성 - prettier, eslint 적용 - tailwind 적용
[INIT] 개발환경 세팅
[DEV] 라우팅 작업
[FIX] 라우팅 에러 수정
1. 왼쪽 상단 뒤로가기 버튼 O 2. 아이디, 비밀번호 아이콘 및 입력가능 O 3. 로그인, 회원가입, 찾기 버튼 O 로고 삽입을 제외한 전반적인 UI 작업 완료 png 파일 경로로 넣는거 말고 다른방법을 찾고 잇습니다 ㅜㅜ
[DEV] 타이포, 글로벌 css 설정
[DEV] 회원가입 페이지 UI 제작
메인 로고 추가 뒤로가기 버튼(svg 방식 변경) 로그인, 비밀번호 아이콘(svg 방식 변경)
메인페이지 톱니바퀴 임의생성하여 설정페이지랑 연결하여 표시했습니다. -프로필 설정 및 화면 설정의 큰 틀 구성 완료 -버튼 형식 부분 효과 추가 -svg 파일 넣는 방식 아직 변경X(icon 만들어 놓은게 안떠서 못했습니다.)
[DEV] 사이드바 UI 작업
[DEV] 매거진 대표 페이지 UI 레이아웃 설정
[DEV] 설정페이지 API 연결(일단 1차로 해야할듯)
[DEV] 공유모달 UI 제작
[DEV] 새매거진 인풋 박스 UI 제작
[DEV] 로그인 안했을 때 페이지 UI 제작
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 풀 리퀘스트는 새로운 React/TypeScript/Vite 애플리케이션의 초기 배포를 위한 것으로, 핵심 프론트엔드 아키텍처, 재사용 가능한 UI 컴포넌트, API 통합 및 라우팅을 구축하여 매거진 아카이빙 플랫폼의 기반을 마련합니다. 이를 통해 사용자 인증, 매거진 콘텐츠 관리, 사용자 설정 등 주요 기능 구현을 위한 견고한 토대가 마련되었습니다. Highlights
Changelog
Ignored Files
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이 PR은 새로운 React + TypeScript + Vite 프로젝트의 초기 설정을 포함하여 많은 새로운 기능을 배포하는 것으로 보입니다. 전반적으로 프로젝트 구조와 새로운 기능들의 구현 방향은 좋아 보입니다. 하지만, 몇 가지 중요한 수정이 필요한 부분이 있습니다. 특히 package.json에 정의된 여러 의존성 패키지 버전이 존재하지 않아 프로젝트 설치에 실패할 가능성이 높습니다. 또한, API 호출 시 URL 경로에 일관성이 부족한 점, 사용자 경험에 영향을 줄 수 있는 alert() 사용, 일부 컴포넌트의 버그 및 접근성 문제 등이 발견되었습니다. 자세한 내용은 각 파일에 남긴 리뷰 코멘트를 참고해 주세요.
Comment on lines
+13
to
+40
| "dependencies": { | ||
| "@tailwindcss/vite": "^4.1.17", | ||
| "@tanstack/react-query": "^5.90.19", | ||
| "@vitejs/plugin-react-swc": "^4.2.1", | ||
| "axios": "^1.13.2", | ||
| "html-react-parser": "^5.2.16", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "react-router-dom": "^6.30.2", | ||
| "tailwindcss": "^4.1.17", | ||
| "typescript": "~5.9.3", | ||
| "vite": "^7.2.2", | ||
| "vite-plugin-svgr": "^4.5.0", | ||
| "zustand": "^5.0.10" | ||
| }, | ||
| "devDependencies": { | ||
| "@eslint/js": "^9.39.1", | ||
| "@types/node": "^24.10.0", | ||
| "@types/react": "^18.3.27", | ||
| "@types/react-dom": "^18.3.7", | ||
| "eslint": "^9.39.1", | ||
| "eslint-plugin-jsx-a11y": "^6.10.2", | ||
| "eslint-plugin-react-hooks": "^7.0.1", | ||
| "eslint-plugin-react-refresh": "^0.4.24", | ||
| "globals": "^16.5.0", | ||
| "prettier": "^3.6.2", | ||
| "typescript-eslint": "^8.46.3" | ||
| } |
There was a problem hiding this comment.
dependencies와 devDependencies에 정의된 많은 패키지 버전이 존재하지 않거나 잘못되었습니다. 이로 인해 pnpm install 실행 시 프로젝트 의존성을 설치할 수 없습니다. 아래는 몇 가지 예시이며, 전체적으로 버전을 확인하고 수정해야 합니다.
axios:1.13.2->1.7.2(최신 안정 버전)vite:7.2.2->5.2.13(최신 안정 버전)typescript:~5.9.3->~5.4.5(최신 안정 버전)tailwindcss:4.1.17->3.4.4(최신 안정 버전, v4는 알파)
다른 패키지들도 모두 확인하여 유효한 최신 안정 버전으로 수정해주세요.
Comment on lines
+18
to
+27
| { index: true, element: <MainPage /> }, | ||
| { path: 'magazine/:magazineId', element: <MagazinePage /> }, | ||
| { path: 'magazine/:magazineId/section/:sectionId', element: <SectionPage /> }, | ||
| { path: 'magazine/explore', element: <ExplorePage /> }, | ||
| { path: 'magazine/saved', element: <SavedMagazinePage /> }, | ||
| { path: '/landing', element: <LandingPage /> }, | ||
| { path: '/login', element: <LoginPage /> }, | ||
| { path: '/login/finding', element: <FindingPage /> }, | ||
| { path: '/signup', element: <SignupPage /> }, | ||
| ], |
There was a problem hiding this comment.
사이드바에서 /mymagazine 경로로 이동하는 링크가 있지만, 라우터에는 해당 경로에 대한 정의가 없습니다. 이로 인해 404 에러가 발생할 수 있습니다. /mymagazine 경로에 해당하는 컴포넌트를 추가하거나, 링크를 올바른 경로로 수정해야 합니다.
| return useMutation({ | ||
| mutationFn: (params: DeleteParagraphDto) => deleteParagraph(params), | ||
| onSuccess: (_, variables) => { | ||
| queryClient.invalidateQueries({ queryKey: ['mymagazines', variables.paragraphId] }) |
There was a problem hiding this comment.
문단 삭제 성공 시 ['mymagazines', variables.paragraphId] 쿼리를 무효화하고 있습니다. mymagazines는 매거진 목록에 대한 쿼리 키로 보이며, paragraphId를 포함하는 것은 적절하지 않을 수 있습니다. 대신 해당 문단이 포함된 섹션이나 매거진 상세 정보 쿼리(예: ['section', variables.magazineId, variables.sectionId] 또는 ['magazine', variables.magazineId])를 무효화하는 것이 더 정확해 보입니다.
Comment on lines
+54
to
+61
| <button | ||
| type="button" | ||
| onClick={() => setShowPassword((v) => !v)} | ||
| className="pr-3 ml-auto text-white/70 hover:text-white transition-colors duration-150" | ||
| aria-label="toggle password" | ||
| > | ||
| <EyeoffIcon className="w-6 h-6" /> | ||
| </button> |
There was a problem hiding this comment.
비밀번호 보이기/숨기기 토글 버튼에 type="button" 속성이 없습니다. form 태그 내에서 type이 없는 button은 기본적으로 submit으로 동작하므로, 의도치 않은 폼 제출을 방지하기 위해 type="button"을 명시해야 합니다. 아래의 비밀번호 확인 버튼에도 동일하게 적용해주세요.
References
- Ensuring correct
typeattributes for buttons within forms is crucial for preventing unintended behavior and maintaining proper UI component functionality, aligning with the expectation that UI components are implemented correctly as per this rule.
Comment on lines
+10
to
+13
| onSuccess: (data) => { | ||
| console.log('회원가입 성공!', data) | ||
| navigate('/') | ||
| }, |
There was a problem hiding this comment.
회원가입 성공 후 메인 페이지로 이동만 하고, 자동 로그인은 처리되지 않고 있습니다. 사용자 경험을 개선하기 위해 회원가입 성공 시 서버로부터 토큰을 받아 usePostAuthorization 훅의 onSuccess 로직처럼 로그인 상태를 처리하고 토큰을 저장하는 로직을 추가하는 것을 권장합니다.
| <SidebarClosedBlock icon={<Sidebar_like />} title="저장한 매거진" to="/magazine/saved" /> | ||
| <SidebarClosedBlock icon={<Sidebar_others />} title="둘러보기" to="/magazine/explore" /> | ||
| </div> | ||
| <img src={user?.profileImageUrl} className="w-7.5 h-7.5 rounded-full mt-auto object-cover"></img> |
There was a problem hiding this comment.
사용자 프로필 이미지에 alt 속성이 없습니다. 웹 접근성을 위해 이미지에 대한 설명(예: alt="사용자 프로필 이미지")을 추가해주세요.
Suggested change
| <img src={user?.profileImageUrl} className="w-7.5 h-7.5 rounded-full mt-auto object-cover"></img> | |
| <img src={user?.profileImageUrl} className="w-7.5 h-7.5 rounded-full mt-auto object-cover" alt="사용자 프로필 이미지"></img> |
References
- Adding
altattributes to images is a fundamental accessibility practice, ensuring UI components are usable for all users and aligning with best practices for UI implementation as per this rule.
Comment on lines
+124
to
+128
| <img | ||
| className="w-7.5 h-7.5 rounded-full object-cover" | ||
| src={user?.profileImageUrl} | ||
| alt="프로필" | ||
| ></img> |
There was a problem hiding this comment.
사용자 프로필 이미지에 alt 속성이 없습니다. 웹 접근성을 위해 이미지에 대한 설명(예: alt="사용자 프로필 이미지")을 추가해주세요.
Suggested change
| <img | |
| className="w-7.5 h-7.5 rounded-full object-cover" | |
| src={user?.profileImageUrl} | |
| alt="프로필" | |
| ></img> | |
| <img | |
| className="w-7.5 h-7.5 rounded-full object-cover" | |
| src={user?.profileImageUrl} | |
| alt="사용자 프로필" | |
| ></img> |
References
- Adding
altattributes to images is a fundamental accessibility practice, ensuring UI components are usable for all users and aligning with best practices for UI implementation as per this rule.
Comment on lines
+59
to
+63
| <img | ||
| src={magazine.image} | ||
| alt={magazine.title} | ||
| className="absolute inset-0 w-full h-full object-cover" | ||
| /> |
There was a problem hiding this comment.
매거진 이미지에 alt 속성이 없습니다. 웹 접근성을 위해 alt={magazine.title}과 같이 이미지에 대한 설명을 추가해주세요.
References
- Adding
altattributes to images is a fundamental accessibility practice, ensuring UI components are usable for all users and aligning with best practices for UI implementation as per this rule.
Comment on lines
+47
to
+50
| localStorage.clear() | ||
| window.location.href = '/login' | ||
| alert('로그인이 만료되었습니다') | ||
| return Promise.reject(refreshError) |
There was a problem hiding this comment.
localStorage.clear()는 모든 로컬 스토리지 데이터를 삭제하므로, 다른 기능에 영향을 줄 수 있습니다. 토큰 정보만 선택적으로 삭제하는 localStorage.removeItem('accessToken')과 localStorage.removeItem('refreshToken')을 사용하는 것이 더 안전합니다. 또한, alert()는 사용자 경험을 저해할 수 있으므로, UI와 통합된 토스트 메시지나 모달을 사용하는 것을 권장합니다.
localStorage.removeItem('accessToken');
localStorage.removeItem('refreshToken');
window.location.href = '/login'
// TODO: alert 대신 UI에 통합된 알림 방식으로 변경해주세요.
alert('로그인이 만료되었습니다')
return Promise.reject(refreshError)References
- This comment suggests replacing
alert()with a UI-integrated toast message, which improves user experience and contributes to a consistent notification system as per the rule.
| } | ||
|
|
||
| export const postLogout = async () => { | ||
| const { data } = await axiosInstance.post('api/auth/logout') |
There was a problem hiding this comment.
API 엔드포인트 경로에 슬래시(/)가 누락되었습니다. 다른 API 호출에서는 경로가 슬래시로 시작하는 것과 일관성을 맞추기 위해 '/api/auth/logout'으로 수정하는 것이 좋습니다.
Suggested change
| const { data } = await axiosInstance.post('api/auth/logout') | |
| const { data } = await axiosInstance.post('/api/auth/logout') |
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.
✨ 요약
기능 개발이 어느정도 완료되어 병합합니다.