ux수정 (#issue 272) #273
ux수정 (#issue 272) #273
Conversation
…고 페이지 이동시 스크롤바 위치 기억하던거 useRef, useEffect로 항상 0으로 받아올 수 있게 함.
|
""" Walkthrough마이페이지 프로필 화면이 대대적으로 리팩토링되어, 프로필 조회와 수정이 각각 별도의 라우트 및 컴포넌트로 분리되었습니다. 기존의 즉각적인 alert 및 리다이렉트 방식은 모달 알림과 지연된 리다이렉트로 개선되었습니다. 스타일 및 폼 관련 코드도 대폭 정리 및 분리되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ProtectRoute
participant useModal
participant Router
User->>ProtectRoute: 접근 시도
ProtectRoute-->>useModal: 로그인 상태 확인, 미로그인 시 모달 open
useModal-->>User: "로그인이 필요한 서비스입니다." 모달 표시
ProtectRoute-->>Router: 1초 후 지정 경로로 리다이렉트
sequenceDiagram
participant User
participant MyProfile
participant Outlet
participant Profile
participant EditProfile
User->>MyProfile: 마이페이지 접근
MyProfile->>Outlet: context(profileData 등) 전달
alt 프로필 조회
Outlet->>Profile: 프로필 정보 표시
else 프로필 수정
Outlet->>EditProfile: 프로필 수정 폼 표시
end
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
🧹 Nitpick comments (11)
src/components/common/ProtectRoute.tsx (1)
16-24: 비로그인 상태 처리 로직 개선모달 표시 후 지연된 리다이렉트를 구현하여 사용자 경험을 개선했습니다. 타이머를 사용하고 적절하게 정리(cleanup)하는 부분도 잘 구현되었습니다.
리다이렉트 지연 시간(1000ms)을 상수로 분리하는 것이 더 유지보수에 좋을 수 있습니다:
+const REDIRECT_DELAY = 1000; // ms useEffect(() => { if (!isLoggedIn) { handleModalOpen(MODAL_MESSAGE.isNotLoggedIn); - const timer = setTimeout(() => setShouldRedirect(true), 1000); + const timer = setTimeout(() => setShouldRedirect(true), REDIRECT_DELAY); return () => clearTimeout(timer); } else { setShouldRedirect(false); } }, [isLoggedIn, handleModalOpen]);src/components/mypage/myProfile/profile/Profile.tsx (3)
29-33: 주석 처리된 코드 제거 필요주석 처리된 코드(
point:)가 있습니다. 사용하지 않는 코드는 제거하는 것이 좋습니다.line: { borderWidth: 2, borderColor: '#ff0000', }, - //데이터 꼭짓점. - // point: { - // pointBackgroundColor: '#ff0000', - // },
90-96: 조건부 렌더링 최적화Boolean() 함수는 불필요합니다. 자바스크립트에서 값은 암시적으로 불리언으로 변환됩니다.
- {Boolean(myData.beginner) && ( + {myData.beginner && ( <S.IconWrapper> <img src={BeginnerIcon} alt='beginner' width='20' height='20' /> </S.IconWrapper> )}
168-168: 차트 접근성 개선 필요시각적 차트는 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 접근하기 어려울 수 있습니다. 차트에 aria-label을 추가하여 접근성을 개선하는 것이 좋습니다.
- <Radar data={chartData} options={chartOptions} /> + <Radar + data={chartData} + options={chartOptions} + aria-label="사용자 평가 점수를 레이더 차트로 표시: 책임감, 기획력, 협업능력, 성실도, 문제해결, 기술력" + />src/components/mypage/myProfile/MyProfile.tsx (1)
30-34: 편집 아이콘에 접근성 레이블을 추가해 주세요스크린리더 사용자는 아이콘만으로 링크의 목적을 알기 어렵습니다.
aria-label또는title속성을 추가해 의미를 명확히 해 주세요.- <S.EditLink to={ROUTES.mypageEdit}> + <S.EditLink to={ROUTES.mypageEdit} aria-label='프로필 편집'> <PencilIcon /> </S.EditLink>src/components/mypage/myProfile/editProfile/EditProfile.tsx (2)
31-37: GitHub URL 검증 정규식이 실제 URL을 충분히 허용하지 못할 수 있습니다현재 정규식은
.앞 한 글자만 허용하는 등 일부 합법적인 URL을 거부합니다.z.string().url()을 사용하거나 좀 더 완전한 정규식으로 교체하는 것을 권장드립니다.- .refine( - (val) => !val || /^https?:\/\/[^\s$.?#].[^\s]*$/.test(val), + .refine( + (val) => !val || /^https?:\/\/[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]+$/i.test(val),
142-144:handleSubmit가 이미preventDefault를 수행하므로 중복 호출입니다
e?.preventDefault()는 불필요하며 제거해도 무방합니다.src/components/mypage/myProfile/MyProfile.styled.ts (1)
14-25: EditLink 포커스 스타일 및 hover 피드백을 추가하면 접근성이 향상됩니다키보드 사용자가 현재 포커스 위치를 인지할 수 있도록
:focus-visible스타일과 hover 시 배경/테두리 변화를 주는 것을 권장드립니다.src/components/mypage/myProfile/editProfile/editProfile.styled.ts (2)
73-87: 테마 사용 제안: 하드코딩된 에러 컬러 대체
ErrorMessage와ErrorCareerMessage에서#d43636같은 에러 컬러를 직접 사용 중입니다. 테마(theme.color.error등)에 정의된 색상으로 대체하여 일관성과 유지보수성을 높이세요.
156-167: 테마 사용 제안: 버튼 배경색 하드코딩 대체
CareerAddButton의 배경색#3e5879역시 하드코딩되어 있습니다. 테마 컬러(theme.buttonScheme.primary.bg등)를 활용해 디자인 변경에 유연하게 대응하세요.src/components/mypage/myProfile/profile/Profile.styled.ts (1)
354-377: 중복 스타일 추출 제안: ScrollWrapper
스크롤바 스타일링이MyProfile.styled.ts에도 정의되어 있습니다. 공통 컴포넌트로 분리해 유지보수성을 높이면 좋습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
src/components/common/ProtectRoute.tsx(1 hunks)src/components/mypage/activityLog/ActivityLog.tsx(1 hunks)src/components/mypage/myProfile/MyProfile.styled.ts(1 hunks)src/components/mypage/myProfile/MyProfile.tsx(2 hunks)src/components/mypage/myProfile/editProfile/EditProfile.tsx(1 hunks)src/components/mypage/myProfile/editProfile/editProfile.styled.ts(1 hunks)src/components/mypage/myProfile/profile/Profile.styled.ts(1 hunks)src/components/mypage/myProfile/profile/Profile.tsx(1 hunks)src/constants/modalMessage.ts(1 hunks)src/constants/routes.ts(1 hunks)src/hooks/useModal.ts(1 hunks)src/hooks/useMyInfo.ts(1 hunks)src/routes/AppRoutes.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (6)
src/components/mypage/activityLog/ActivityLog.tsx (2)
src/components/mypage/ContentTab.tsx (1)
ContentTab(19-78)src/constants/myPageFilter.ts (1)
ACTIVITY_FILTER(25-28)
src/routes/AppRoutes.tsx (2)
src/components/mypage/myProfile/profile/Profile.tsx (1)
Profile(72-175)src/constants/routes.ts (1)
ROUTES(1-29)
src/components/mypage/myProfile/profile/Profile.tsx (2)
src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts (1)
BeginnerIcon(110-125)src/constants/routes.ts (1)
ROUTES(1-29)
src/components/mypage/myProfile/MyProfile.styled.ts (5)
src/components/mypage/joinedProject/MyJoinProjects.styled.ts (3)
FilterWrapper(8-12)FilterTitle(14-16)Container(3-6)src/components/mypage/ContentTab.styled.ts (3)
FilterWrapper(8-12)FilterTitle(63-65)Container(3-6)src/components/mypage/activityLog/commentsActivity/CommentsActivity.styled.ts (1)
Container(3-5)src/components/mypage/notifications/appliedProjects/appliedProjectsStatus/AppliedProjectsStatus.styled.ts (1)
Container(3-23)src/components/mypage/myProfile/NoMyInfo.styled.ts (1)
Container(3-15)
src/components/mypage/myProfile/editProfile/editProfile.styled.ts (1)
src/components/mypage/myProfile/profile/Profile.styled.ts (16)
Form(189-192)EditWrapper(194-220)InputTextNickname(222-225)InputBeginner(227-229)InputTextGithub(231-237)InputTextCareer(239-241)InputWrapper(243-256)ErrorMessage(258-266)ErrorCareerMessage(268-272)EditContainer(274-289)EditList(291-302)CareerList(304-317)CareerWrapper(319-323)XMarkButton(325-339)CareerAddButton(341-352)Wrapper(114-159)
src/components/mypage/myProfile/profile/Profile.styled.ts (2)
src/components/mypage/myProfile/editProfile/editProfile.styled.ts (16)
Wrapper(169-214)Form(3-7)EditWrapper(9-35)InputTextNickname(37-40)InputBeginner(42-44)InputTextGithub(46-52)InputTextCareer(54-56)InputWrapper(58-71)ErrorMessage(73-81)ErrorCareerMessage(83-87)EditContainer(89-104)EditList(106-117)CareerList(119-132)CareerWrapper(134-138)XMarkButton(140-154)CareerAddButton(156-167)src/components/mypage/myProfile/MyProfile.styled.ts (1)
ScrollWrapper(40-63)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (19)
src/constants/routes.ts (1)
13-13: 마이페이지 편집 경로 상수 추가 👍프로필 조회와 편집 기능을 분리하기 위한 새로운 경로 상수가 적절하게 추가되었습니다. 이는 PR 목표에 부합하며 사용자 경험 향상에 기여할 것입니다.
src/constants/modalMessage.ts (1)
2-2: 비로그인 상태 모달 메시지 추가 ✅로그인이 필요한 서비스 접근 시 표시될 모달 메시지가 추가되었습니다. 이는 기존 alert 창을 모달로 대체하는 PR 목표에 맞게 잘 구현되었습니다.
src/hooks/useModal.ts (3)
1-1: useCallback 추가로 최적화 진행useCallback을 활용하여 함수 메모이제이션을 적용한 것은 좋은 최적화 방법입니다.
7-10: handleModalOpen 함수 메모이제이션 적용useCallback을 통해 handleModalOpen 함수를 메모이제이션하여 불필요한 리렌더링을 방지했습니다. 모달 컴포넌트가 자주 사용되는 상황에서 이러한 최적화는 성능 향상에 도움이 됩니다.
12-15: handleModalClose 함수 메모이제이션 적용handleModalClose 함수도 마찬가지로 useCallback으로 메모이제이션되어 컴포넌트 리렌더링 시에도 함수 참조가 유지됩니다. 이는 특히 이 함수가 props로 전달되거나 의존성 배열에 포함될 때 중요합니다.
src/components/common/ProtectRoute.tsx (3)
1-6: 모달 관련 필요한 임포트 추가useModal 훅과 Modal 컴포넌트, 메시지 상수를 적절히 임포트하여 alert 대신 모달을 사용하도록 변경했습니다. 이는 PR 목표에 맞게 잘 구현되었습니다.
13-14: 모달 상태 관리 및 리다이렉트 제어 상태 추가useModal 훅을 사용하여 모달 상태를 관리하고, 리다이렉트 타이밍을 제어하기 위한 상태를 추가한 것은 좋은 접근입니다.
26-36: 모달 렌더링 및 조건부 리다이렉트 로직비로그인 상태에서 모달을 먼저 표시하고, shouldRedirect 상태에 따라 리다이렉트하는 로직이 잘 구현되었습니다. 이전의 즉시 리다이렉트 방식보다 사용자 경험이 향상되었습니다.
src/components/mypage/activityLog/ActivityLog.tsx (1)
5-5: 불필요한 Fragment 제거로 코드 깔끔하게 개선했네요!불필요한 React Fragment 래퍼(
<>...</>)를 제거하여 코드를 더 간결하게 만들었습니다. 단일 컴포넌트만 반환할 때는 Fragment가 필요하지 않으므로 좋은 변경입니다.src/hooks/useMyInfo.ts (1)
47-49: 모달 표시 후 지연 네비게이션으로 UX 개선 👍성공 메시지 모달이 표시된 후 1.5초 지연 시간을 추가하여 사용자가 메시지를 확인할 시간을 제공했습니다. 이러한 지연 네비게이션은 사용자 경험을 향상시키는 좋은 패턴입니다.
src/routes/AppRoutes.tsx (2)
42-47: lazy 로딩 컴포넌트 추가로 코드 분할 개선Profile과 ProfileEdit 컴포넌트를 lazy 로딩하도록 추가한 것은 좋은 접근입니다. 이렇게 하면 초기 로딩 시간을 개선하고 코드를 더 모듈화할 수 있습니다.
233-239: 중첩 라우트 구조로 프로필 관련 페이지 구성 개선MyProfile 컴포넌트에 중첩된 자식 라우트를 추가하여 프로필 조회와 편집 기능을 분리했습니다. 이러한 구조는 더 명확한 관심사 분리를 제공하고 코드 유지보수성을 향상시킵니다.
src/components/mypage/myProfile/profile/Profile.tsx (2)
79-83: 스크롤 위치 리셋 로직 구현 잘 되었습니다PR 목표에 맞게 useEffect를 사용하여 컴포넌트가 렌더링될 때마다 스크롤 위치를 상단으로 리셋하는 로직이 잘 구현되었습니다.
72-175: 전체적으로 잘 구현된 Profile 컴포넌트Profile 컴포넌트가 잘 구현되었습니다. 특히 다음 사항들이 좋습니다:
- useOutletContext를 사용하여 부모 컴포넌트에서 데이터를 가져오는 패턴
- 조건부 텍스트 표시로 데이터가 없을 때 적절한 안내 메시지 제공
- 스크롤 위치 리셋 로직으로 일관된 사용자 경험 제공
- 평가도에 대한 설명이 포함된 툴팁 사용
위에서 언급한 몇 가지 개선 사항을 적용하면 더욱 완성도 높은 컴포넌트가 될 것입니다.
src/components/mypage/myProfile/editProfile/editProfile.styled.ts (3)
37-56: 검토 완료: 입력 관련 컴포넌트
InputTextNickname,InputBeginner,InputTextGithub,InputTextCareer정의가 명확하며, 특별한 이슈가 없습니다.
58-71: 검토 완료: InputWrapper
레이아웃과 반응형 설정이 의도대로 구현되어 있습니다.
89-104: 검토 완료: 경력 리스트 레이아웃
EditContainer,EditList,CareerList,CareerWrapper의 레이아웃과 반응형 처리에 문제가 없어 보입니다.Also applies to: 106-132, 134-138
src/components/mypage/myProfile/profile/Profile.styled.ts (2)
67-90: 검토 완료: BackgroundBox 및 NicknameBackgroundBox
전체적인 박스 레이아웃과 반응형 스타일이 적절히 구성되어 있습니다.
379-432: 검토 완료: 툴팁 및 차트 관련 컴포넌트
LabelBox,ChartBox,TooltipContainer,ExplainBox,TooltipBox,Explain스타일이 의도대로 동작할 것으로 보입니다.
| const chartData = { | ||
| labels: ['책임감', '기획력', '협업능력', '성실도', '문제해결', '기술력'], | ||
| datasets: [ | ||
| { | ||
| label: '팀 점수', | ||
| data: [6.6, 5.2, 9.1, 5.6, 5.5, 8.4], | ||
| backgroundColor: 'rgba(255, 108, 61, 0.2)', | ||
| }, | ||
| ], | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
차트 데이터 하드코딩 대신 동적 데이터 사용 고려
차트 데이터가 하드코딩되어 있습니다. 실제 사용자 평가 데이터를 API에서 가져와 표시하는 것이 더 좋을 것 같습니다.
-const chartData = {
- labels: ['책임감', '기획력', '협업능력', '성실도', '문제해결', '기술력'],
- datasets: [
- {
- label: '팀 점수',
- data: [6.6, 5.2, 9.1, 5.6, 5.5, 8.4],
- backgroundColor: 'rgba(255, 108, 61, 0.2)',
- },
- ],
-};
+const generateChartData = (evaluationData) => {
+ return {
+ labels: ['책임감', '기획력', '협업능력', '성실도', '문제해결', '기술력'],
+ datasets: [
+ {
+ label: '팀 점수',
+ data: evaluationData || [0, 0, 0, 0, 0, 0],
+ backgroundColor: 'rgba(255, 108, 61, 0.2)',
+ },
+ ],
+ };
+};| export const Wrapper = styled.div` | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 1rem; | ||
| align-items: center; | ||
| label { | ||
| font-weight: 700; | ||
| color: ${({ theme }) => theme.color.deepGrey}; | ||
| @media ${({ theme }) => theme.mediaQuery.tablet} { | ||
| font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; | ||
| } | ||
| } | ||
| ul { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 13px; | ||
| li { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| font-size: 0.7rem; | ||
| color: #a1a1a1; | ||
| @media ${({ theme }) => theme.mediaQuery.tablet} { | ||
| font-size: 0.7rem; | ||
| } | ||
| img { | ||
| background-color: white; | ||
| border-radius: 50%; | ||
| border: 1px solid #f0f0f0; | ||
| } | ||
| } | ||
| } | ||
| button { | ||
| @media ${({ theme }) => theme.mediaQuery.tablet} { | ||
| font-size: 0.9rem; | ||
| } | ||
| } | ||
| `; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
공통 스타일 중복: Wrapper 컴포넌트 추출 필요
Wrapper가 editProfile.styled.ts에도 동일하게 정의되어 있습니다. 공통 모듈로 분리해 중복을 줄이고 유지보수성을 개선하세요.
| export const Form = styled.form` | ||
| display: flex; | ||
| gap: 3rem; | ||
| `; | ||
|
|
||
| export const EditWrapper = styled.div` | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 1rem; | ||
| width: 100%; | ||
| align-items: center; | ||
| label { | ||
| font-weight: 700; | ||
| color: ${({ theme }) => theme.color.deepGrey}; | ||
| @media ${({ theme }) => theme.mediaQuery.tablet} { | ||
| font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; | ||
| } | ||
| } | ||
| button { | ||
| margin-left: 1rem; | ||
| padding: 0.65rem 1rem; | ||
| min-width: 60px; | ||
| font-size: 0.9rem; | ||
| @media ${({ theme }) => theme.mediaQuery.tablet} { | ||
| font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; | ||
| } | ||
| } | ||
| `; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
공통 스타일 중복: Form & EditWrapper 컴포넌트 추출 고려
Form과 EditWrapper가 editProfile.styled.ts와 동일하게 정의되어 있습니다. 재사용 가능한 유틸 컴포넌트로 분리하여 DRY 원칙을 적용할 것을 추천합니다.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/components/mypage/myProfile/editProfile/EditProfile.tsx (1)
99-104:⚠️ Potential issue비동기 저장 완료 전 네비게이션 문제(이전 리뷰와 동일)
editMyProfile이 비동기인데await없이 바로navigate를 호출해 실패 여부와 상관없이 페이지가 이동합니다.
과거 커밋에서도 동일 지적이 있었으므로 재확인 바랍니다.-const onSubmit = (data: ProfileFormData, e?: React.BaseSyntheticEvent) => { - e?.preventDefault(); - editMyProfile(data); - navigate(ROUTES.mypage); +const onSubmit = async (data: ProfileFormData) => { + const success = await editMyProfile(data); + if (success) navigate(ROUTES.mypage); }
🧹 Nitpick comments (4)
src/components/mypage/myProfile/MyProfile.tsx (1)
30-34: 편집 아이콘에 접근성 속성 추가 필요
<PencilIcon />만 렌더링하면 스크린리더가 링크 목적을 알 수 없습니다.
aria-label또는title속성을 부여해 접근성을 개선해 주세요.-<S.EditLink to={ROUTES.mypageEdit}> - <PencilIcon /> -</S.EditLink> +<S.EditLink to={ROUTES.mypageEdit} aria-label='프로필 편집'> + <PencilIcon /> +</S.EditLink>src/components/mypage/myProfile/editProfile/EditProfile.tsx (3)
57-61: 스크롤 초기화 useEffect 의존성 불일치
scrollRef객체는 마운트 이후 변하지 않으므로 현재 의존성 배열이 사실상componentDidMount동작과 동일합니다.
렌더마다 스크롤을 0으로 맞추려면 의존성 배열을 비워 두거나, 원하는 타이밍에 명시적으로 호출하는 방식이 필요합니다.-useEffect(() => { - if (scrollRef.current) { - scrollRef.current.scrollTop = 0; - } -}, [scrollRef]); +useEffect(() => { + scrollRef.current?.scrollTo({ top: 0 }); +}, []); // 매 렌더가 아닌 최초 마운트 1회만 초기화한다면 []※ 요구사항에 따라 빈 배열 / 특정 트리거 등을 선택해 주세요.
140-142: 닉네임 중복 검사 시 공백 처리 누락
handleDuplicationNickname(nickname)호출 전에trim()으로 좌우 공백을 제거하지 않으면,
사용자가 실수로 입력한 공백 때문에 불필요한 중복 오류가 발생할 수 있습니다.-onClick={() => { - handleDuplicationNickname(nickname); -}} +onClick={() => { + handleDuplicationNickname(nickname.trim()); +}}
386-389:errors.career.message접근 가능성 낮음
career스키마는 선택 optional 이고, 필드별 유효성은 각 항목 내부에서 처리되어 루트 배열에
에러 메시지가 설정되지 않을 확률이 높습니다. 이 경우 해당 JSX 가 항상 undefined 를 렌더링합니다.
- 배열 길이가 0 일 때를 검증하려면
z.array(...).min(1, '경력은 최소 1개 입력')처럼 길이 제한을 추가하세요.- 루트 배열 에러가 없다면 하위 에러를 순회해 렌더하거나, 메시지 영역을 제거해 불필요한 렌더링을 방지하세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
src/components/mypage/activityLog/commentsActivity/CommentsActivity.tsx(1 hunks)src/components/mypage/activityLog/inquiries/Inquiries.tsx(1 hunks)src/components/mypage/joinedProject/MyJoinProjects.tsx(1 hunks)src/components/mypage/myProfile/MyProfile.tsx(1 hunks)src/components/mypage/myProfile/editProfile/EditProfile.tsx(1 hunks)src/components/mypage/myProfile/editProfile/editProfile.styled.ts(1 hunks)src/components/mypage/myProfile/profile/Profile.styled.ts(1 hunks)src/components/mypage/myProfile/profile/Profile.tsx(1 hunks)src/components/mypage/notifications/all/All.tsx(1 hunks)src/components/mypage/notifications/appliedProjects/AppliedProjects.tsx(1 hunks)src/components/userPage/joinedProject/UserJoinProject.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (7)
- src/components/mypage/notifications/appliedProjects/AppliedProjects.tsx
- src/components/mypage/notifications/all/All.tsx
- src/components/mypage/activityLog/inquiries/Inquiries.tsx
- src/components/mypage/activityLog/commentsActivity/CommentsActivity.tsx
- src/components/mypage/joinedProject/MyJoinProjects.tsx
- src/components/userPage/joinedProject/UserJoinProject.tsx
- src/components/mypage/myProfile/editProfile/editProfile.styled.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/mypage/myProfile/profile/Profile.tsx
- src/components/mypage/myProfile/profile/Profile.styled.ts
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (1)
src/components/mypage/myProfile/MyProfile.tsx (1)
19-20: 스피너 색상 오류 수정 확인 완료과거에 세미콜론이 포함돼 색상이 적용되지 않는 문제가 있었는데,
'#3e5879'로 정상 수정된 것을 확인했습니다.
👍 더 이상 문제 없습니다.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/components/mypage/myProfile/MyProfile.tsx (1)
19-20: 색상 코드 수정 완료이전에 지적된 색상 코드의 세미콜론 문제가 해결되었습니다. 이제
#3e5879는 유효한 CSS 색상 값입니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
src/components/mypage/ContentTab.styled.ts(0 hunks)src/components/mypage/ContentTab.tsx(2 hunks)src/components/mypage/ScrollWrapper.styled.ts(1 hunks)src/components/mypage/ScrollWrapper.tsx(1 hunks)src/components/mypage/joinedProject/MyJoinProjects.styled.ts(0 hunks)src/components/mypage/myProfile/MyProfile.styled.ts(1 hunks)src/components/mypage/myProfile/MyProfile.tsx(1 hunks)src/components/mypage/myProfile/MyProfileWrapper.tsx(1 hunks)src/components/mypage/myProfile/MyPropfileWrapper.styled.ts(1 hunks)src/components/mypage/myProfile/editProfile/EditProfile.tsx(1 hunks)src/components/mypage/myProfile/editProfile/editProfile.styled.ts(1 hunks)src/components/mypage/myProfile/profile/Profile.styled.ts(1 hunks)src/components/mypage/myProfile/profile/Profile.tsx(1 hunks)src/pages/mypage/MyPage.styled.ts(0 hunks)
💤 Files with no reviewable changes (3)
- src/components/mypage/joinedProject/MyJoinProjects.styled.ts
- src/pages/mypage/MyPage.styled.ts
- src/components/mypage/ContentTab.styled.ts
✅ Files skipped from review due to trivial changes (4)
- src/components/mypage/myProfile/MyProfileWrapper.tsx
- src/components/mypage/ScrollWrapper.styled.ts
- src/components/mypage/myProfile/MyPropfileWrapper.styled.ts
- src/components/mypage/myProfile/editProfile/editProfile.styled.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- src/components/mypage/myProfile/profile/Profile.tsx
- src/components/mypage/myProfile/editProfile/EditProfile.tsx
- src/components/mypage/myProfile/profile/Profile.styled.ts
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/components/mypage/ContentTab.tsx (2)
src/components/mypage/ScrollWrapper.tsx (1)
ScrollWrapper(10-24)src/components/mypage/ScrollWrapper.styled.ts (1)
ScrollWrapper(3-27)
src/components/mypage/ScrollWrapper.tsx (1)
src/components/mypage/ScrollWrapper.styled.ts (1)
ScrollWrapper(3-27)
src/components/mypage/myProfile/MyProfile.tsx (6)
src/hooks/useMyInfo.ts (1)
useMyProfileInfo(21-32)src/hooks/useModal.ts (1)
useModal(3-34)src/components/common/loadingSpinner/LoadingSpinner.styled.ts (1)
Spinner(21-28)src/constants/routes.ts (1)
ROUTES(1-29)src/components/mypage/ScrollWrapper.tsx (1)
ScrollWrapper(10-24)src/components/mypage/ScrollWrapper.styled.ts (1)
ScrollWrapper(3-27)
src/components/mypage/myProfile/MyProfile.styled.ts (3)
src/components/mypage/joinedProject/MyJoinProjects.styled.ts (3)
FilterWrapper(8-12)FilterTitle(14-16)Container(3-6)src/components/mypage/myProfile/MyPropfileWrapper.styled.ts (1)
Container(3-48)src/components/mypage/myProfile/NoMyInfo.styled.ts (1)
Container(3-15)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
🔇 Additional comments (7)
src/components/mypage/ContentTab.tsx (2)
6-6: 코드 구조 개선을 위한 적절한 컴포넌트 분리
ScrollWrapper컴포넌트를 별도 파일로 분리하고 임포트하여 사용하는 것은 코드 재사용성과 구조를 개선하는 좋은 리팩토링입니다.
64-68: 기존 스타일 컴포넌트에서 기능적 컴포넌트로 변경 완료기존의
S.ScrollWrapper스타일 컴포넌트를 새로운ScrollWrapper함수형 컴포넌트로 교체한 것이 잘 적용되었습니다. 이를 통해 스크롤 기능에 관련된 로직을 한 곳에서 관리할 수 있게 되었습니다.Also applies to: 71-75
src/components/mypage/myProfile/MyProfile.tsx (2)
27-45: 프로필 컴포넌트의 구조적 개선프로필 페이지 구조를
Outlet을 사용한 중첩 라우팅 방식으로 변경하고,ScrollWrapper를 활용하여 스크롤 기능을 일관되게 적용한 것은 좋은 개선입니다. 이를 통해 프로필 조회와 수정 기능을 별도 컴포넌트로 분리하여 코드 유지보수성이 향상되었습니다.또한 현재 경로에 따라 편집 아이콘을 조건부로 표시하는 것도 사용자 경험 측면에서 훌륭합니다.
15-17: 스크롤 관리 로직 개선
useLocation과useRef를 활용해 스크롤 위치를 관리하는 방식으로 변경한 것은 PR 목표에 맞게 잘 구현되었습니다. 이를 통해 페이지 간 이동 시 스크롤 위치를 효과적으로 제어할 수 있습니다.src/components/mypage/myProfile/MyProfile.styled.ts (3)
4-8: 레이아웃 배치 방식 개선
FilterWrapper의justify-content를start에서space-between으로 변경한 것은 제목과 편집 아이콘을 양쪽 끝에 배치하기 위한 적절한 수정입니다.
14-26: 편집 링크 스타일 구현
EditLink스타일 컴포넌트가 적절하게 구현되었습니다. 원형 버튼 형태와 아이콘 색상이 UI 가이드라인에 맞게 설정되었습니다.
28-31: 컨테이너 스타일 간소화 및 일관성 유지기존의 복잡한 스타일 컴포넌트들을 제거하고 간소화된
Container와SectionContainer로 대체한 것은 코드 가독성과 유지보수성을 높이는 좋은 접근입니다. 특히 테마 시스템을 활용하여 색상과 테두리 반경을 지정한 부분은 디자인 일관성을 유지하는 데 도움이 됩니다.Also applies to: 33-38
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/userpage/UserPage.tsx (1)
8-8: 공통 ScrollWrapper 컴포넌트로 전환하여 일관성 개선!기존의 스타일드 컴포넌트
S.ScrollWrapper를 재사용 가능한 공통 컴포넌트ScrollWrapper로 변경한 것은 좋은 방향입니다. 이 변경으로 어플리케이션 전반에 걸쳐 스크롤 스타일링과 동작을 일관되게 유지할 수 있습니다.그러나, 새로운
ScrollWrapper컴포넌트에는$height와scrollRef프로퍼티를 설정할 수 있는데, 현재 구현에서는 기본값을 사용하고 있습니다. PR 목표에 언급된 스크롤 위치를 각 렌더마다 0으로 리셋하는 기능을 위해서는scrollRef를 활용하는 것을 고려해보세요.아래와 같이
useRef와useEffect를 활용하여 스크롤 위치를 리셋하는 기능을 추가할 수 있습니다:import { Outlet, useParams } from 'react-router-dom'; import Sidebar from '../../components/common/sidebar/Sidebar'; import * as S from '../mypage/MyPage.styled'; import { DocumentTextIcon, UserIcon } from '@heroicons/react/24/outline'; import { ROUTES } from '../../constants/routes'; import { useUserProfileInfo } from '../../hooks/useUserInfo'; import loadingImg from '../../assets/loadingImg.svg'; import ScrollWrapper from '../../components/mypage/ScrollWrapper'; +import { useRef, useEffect } from 'react'; const UserPage = () => { const { userId } = useParams(); + const scrollRef = useRef<HTMLDivElement>(null); + + useEffect(() => { + if (scrollRef.current) { + scrollRef.current.scrollTop = 0; + } + }, []); const menuItems = [ { label: '프로필', path: `${ROUTES.userpage}/${userId}`, icon: <UserIcon width='20px' height='20px' />, }, { label: '참여한 프로젝트 현황', path: `${ROUTES.userpage}/${userId}/${ROUTES.userJoinedProject}`, icon: <DocumentTextIcon width='20px' height='20px' />, }, ]; const { userData, isLoading } = useUserProfileInfo(Number(userId)); return ( <S.Container> <Sidebar menuItems={menuItems} nickname={userData?.nickname} profileImage={isLoading ? loadingImg : userData?.profileImg} /> <S.Wrapper> - <ScrollWrapper> + <ScrollWrapper scrollRef={scrollRef}> <Outlet /> </ScrollWrapper> </S.Wrapper> </S.Container> ); }; export default UserPage;Also applies to: 35-37
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/mypage/ContentTab.tsx(2 hunks)src/components/mypage/ScrollWrapper.tsx(1 hunks)src/components/mypage/joinedProject/MyJoinProjects.tsx(3 hunks)src/pages/userpage/UserPage.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/components/mypage/joinedProject/MyJoinProjects.tsx
- src/components/mypage/ContentTab.tsx
- src/components/mypage/ScrollWrapper.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/pages/userpage/UserPage.tsx (1)
src/components/mypage/ScrollWrapper.tsx (1)
ScrollWrapper(9-19)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: accessibility-test
구현내용
로그인 권한이 필요한 페이지일때 뜨던 alert 창 modal 창으로 변경
useModal 함수에 useCallback 사용
마이페이지 프로필+프로필 수정 한 곳에 있던 컴포넌트에서
공통 컴포넌트 분리 후 outlet 넣어 컴포넌트 폴더 분리해서 띄워줌.
프로필 수정시 라우터 pathname 추가로 넣어주고
프로필<->프로필수정 페이지 이동시
스크롤 위치 기억하던 것 useRef, useEffect 사용하여 렌더할때마다 0으로 이동하게 수정
연관이슈
close #272
Summary by CodeRabbit
신규 기능
개선 사항
버그 수정