Feat/markup/mypage/DEVING-44 마이페이지 #52
Conversation
Walkthrough이번 변경사항은 사용자 프로필 페이지의 여러 컴포넌트에 대해 상태 관리, 렌더링 로직 및 UI 스타일을 개선하는 작업입니다. URL 검색 파라미터를 이용한 탭 활성화와 편집 모드 통합, 입력 검증 로직 수정, 반응형 디자인 조정, 이미지 업로드 처리 개선, 모달의 컨펌 버튼 제어 등 다양한 리팩토링과 기능 개선이 이루어졌습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant U as 사용자
participant B as 브라우저
participant MPC as MyPageClient
participant RC as renderContent 함수
U->>B: URL 파라미터 변경 (active tab)
B->>MPC: useEffect 트리거 (URL 변경 감지)
MPC->>MPC: activeTab 및 editModeSection 상태 업데이트
MPC->>RC: renderContent(activeTab) 호출
RC-->>MPC: 해당 컴포넌트 반환
MPC-->>U: 업데이트된 뷰 렌더링
sequenceDiagram
participant U as 사용자
participant PI as ProfileImage
participant QC as QueryClient
U->>PI: 파일 선택
PI->>PI: handleFileChange 실행 (파일 크기 검증)
alt 파일 크기가 유효한 경우
PI->>PI: 미리보기 URL 설정
else 파일 크기가 초과된 경우
PI->>PI: fileSizeError 상태 업데이트
end
U->>PI: 확인 버튼 클릭
PI->>PI: fileSizeError 존재 여부 확인
alt 에러 없음
PI->>QC: 캐시 업데이트 및 이미지 업로드 진행
PI-->>U: 업데이트된 이미지 렌더링
else 에러 존재
PI-->>U: 확인 버튼 비활성화 처리
end
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
✅ Deploy Preview for deving-together ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Codecov ReportAll modified and coverable lines are covered by tests ✅ 🚀 New features to boost your workflow:
|
CI Status Report검사 결과
❌ 일부 검사가 실패했습니다. |
| const TAB_TYPES = { | ||
| BASIC: 'basic', | ||
| CONTACT: 'contact', | ||
| TECH: 'tech', | ||
| PASSWORD: 'password', | ||
| }; | ||
|
|
There was a problem hiding this comment.
이 부분은 constant 파일로 분리 부탁드립니다!
| {[ | ||
| { | ||
| value: '프론트엔드', | ||
| label: '프론트엔드', | ||
| icon: (props: IIconProps) => <Code {...props} />, | ||
| }, | ||
| { | ||
| value: '백엔드', | ||
| label: '백엔드', | ||
| icon: (props: IIconProps) => <Compass {...props} />, | ||
| }, | ||
| { | ||
| value: '디자이너', | ||
| label: '디자이너', | ||
| icon: (props: IIconProps) => <Paintbrush {...props} />, | ||
| }, | ||
| { | ||
| value: '선택 안함', | ||
| label: '선택 안함', | ||
| icon: (props: IIconProps) => <X {...props} />, | ||
| }, | ||
| ].map((option) => ( |
lee1nna
left a comment
lee1nna
left a comment
There was a problem hiding this comment.
고생하셨습니다 !!
추후에 이미지 변경시에 이미지 확장자와 크기 제한에 대한 안내를 저 빨간 영역에 추가해도 좋을 것 같습니당
…mService/Moim-FE into feat/markup/mypage/DEVING-44
CI Status Report검사 결과
✅ 모든 검사가 통과되었습니다. |
CI Status Report검사 결과
✅ 모든 검사가 통과되었습니다. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/components/ui/tech-stack/tech-stack-components/CategoryTabs.tsx (1)
78-91: CSS 애니메이션 정의회전 애니메이션을 위한 키프레임과 클래스 정의가 잘 구현되었습니다. 다만, styled-jsx를 사용하는 대신 Tailwind의 애니메이션 클래스를 사용하는 것도 고려해볼 수 있습니다.
src/app/(user-page)/mypage/_features/ContactEdit.tsx (2)
136-149: GitHub 사용자 이름 검증 로직이 강화되었습니다.GitHub URL에서 사용자 이름을 추출하여 추가적인 검증을 수행하는 로직이 좋습니다. 단, 사용자 이름 길이 체크 외에도 GitHub에서 허용하는 문자 범위도 검사하면 더 좋을 것 같습니다.
다음과 같이 GitHub 사용자 이름에 대한 추가 검증을 고려해 보세요:
hasUsername: (value) => { if (!value) return true; // 필수 필드가 아닌 경우 // 사용자 이름 추출 const usernameMatch = value.match( /github\.com\/([a-zA-Z0-9_-]+)/, ); const username = usernameMatch ? usernameMatch[1] : ''; return ( - username.length > 0 || + (username.length > 0 && username.length <= 39) || 'github.com/사용자아이디 형식으로 입력해주세요' ); },
171-195: 다양한 블로그 플랫폼 지원 로직이 잘 구현되었습니다.네이버 블로그, 벨로그 등 다양한 블로그 플랫폼의 URL 형식을 각각 검증하는 로직이 체계적으로 구현되었습니다. 하지만 중복되는 정규식 패턴이 있으므로 코드 최적화를 고려해볼 수 있습니다.
정규식 패턴을 상수로 분리하여 코드의 가독성과 유지보수성을 높일 수 있습니다:
+ // 상수로 정규식 패턴 정의 + const BLOG_PATTERNS = { + NAVER: /^(https?:\/\/)?(www\.)?blog\.naver\.com\/[a-zA-Z0-9_-]+/, + VELOG: /^(https?:\/\/)?(www\.)?velog\.io\/@[a-zA-Z0-9_-]+/, + GENERAL: /^(https?:\/\/)?(www\.)?([a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\/.+)?$/ + }; validate: { isValidBlogFormat: (value) => { if (!value) return true; // 필수 필드가 아닌 경우 - // 네이버 블로그 패턴 - const naverPattern = - /^(https?:\/\/)?(www\.)?blog\.naver\.com\/[a-zA-Z0-9_-]+/; - - // 벨로그 패턴 - const velogPattern = - /^(https?:\/\/)?(www\.)?velog\.io\/@[a-zA-Z0-9_-]+/; - - // 일반 URL 패턴 - const generalUrlPattern = - /^(https?:\/\/)?(www\.)?([a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\/.+)?$/; // 네이버, 벨로그 또는 일반 URL 패턴 중 하나라도 만족하면 통과 const isValid = - naverPattern.test(value) || - velogPattern.test(value) || - generalUrlPattern.test(value); + BLOG_PATTERNS.NAVER.test(value) || + BLOG_PATTERNS.VELOG.test(value) || + BLOG_PATTERNS.GENERAL.test(value); return isValid || '유효한 블로그 URL 형식이 아닙니다'; }, },src/app/(user-page)/mypage/_features/ProfileImage.tsx (1)
39-64: 파일 처리 로직 개선파일 선택 및 처리 로직이 크게 개선되었습니다. 특히:
- 기존 미리보기 URL 해제 로직을 추가하여 메모리 누수 방지
- 파일 크기 검증을 명확히 분리하고 사용자 친화적인 오류 메시지 제공
- 불필요한 중복 코드 제거
다만, 파일 타입 검증도 함께 추가하면 더 견고한 코드가 될 것 같습니다.
파일 타입 검증도 추가하는 것을 고려해보세요:
// 파일 크기 및 타입 검사 setFileSizeError( file.size > MAX_FILE_SIZE ? '이미지 크기가 너무 큽니다. 최대 500KB까지 가능합니다.' + : !file.type.startsWith('image/') + ? '지원되지 않는 파일 형식입니다. 이미지 파일만 업로드 가능합니다.' : null, );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
src/app/(user-page)/mypage/MyPageClient.tsx(2 hunks)src/app/(user-page)/mypage/_features/BasicEdit.tsx(9 hunks)src/app/(user-page)/mypage/_features/BasicInfo.tsx(1 hunks)src/app/(user-page)/mypage/_features/ContactEdit.tsx(4 hunks)src/app/(user-page)/mypage/_features/PasswordInfo.tsx(0 hunks)src/app/(user-page)/mypage/_features/ProfileImage.tsx(6 hunks)src/app/(user-page)/mypage/_features/TechStackEdit.tsx(1 hunks)src/app/(user-page)/mypage/page.tsx(1 hunks)src/components/ui/modal/Modal.tsx(3 hunks)src/components/ui/tech-stack/tech-stack-components/CategoryTabs.tsx(3 hunks)src/components/ui/tech-stack/tech-stack-components/TabButton.tsx(1 hunks)src/components/ui/tech-stack/tech-stack-components/TechButton.tsx(1 hunks)src/components/ui/tech-stack/tech-stack-components/TechButtonList.tsx(1 hunks)src/constants/mypage/mypageConstant.tsx(1 hunks)src/types/mypageTypes.ts(1 hunks)
💤 Files with no reviewable changes (1)
- src/app/(user-page)/mypage/_features/PasswordInfo.tsx
✅ Files skipped from review due to trivial changes (2)
- src/app/(user-page)/mypage/_features/BasicInfo.tsx
- src/app/(user-page)/mypage/_features/TechStackEdit.tsx
🔇 Additional comments (56)
src/components/ui/tech-stack/tech-stack-components/CategoryTabs.tsx (7)
2-2: React의 useState 훅 추가 적용컴포넌트에 로컬 상태 관리 기능을 추가하여 애니메이션 구현을 위한 좋은 접근입니다.
11-12: 컴포넌트 커스터마이징 옵션 추가선택적 className 프롭을 추가하여 컴포넌트의 재사용성과 유연성을 향상시켰습니다.
19-20: 프롭스 기본값 설정선택적 프롭스에 기본값을 제공하여 안정적인 컴포넌트 사용을 보장했습니다.
22-34: 애니메이션 상태 관리 및 초기화 기능 구현애니메이션 상태 관리와 타이머를 이용한 초기화 기능이 잘 구현되었습니다. 애니메이션 완료 후 상태를 초기화하는 방식이 적절합니다.
41-44: 카테고리 데이터 일관성 개선카테고리의 smallText 값을 label과 일치시켜 일관성을 유지했습니다.
48-50: 컨테이너 스타일링 개선containerClassName 프롭을 활용하여 컴포넌트 스타일 커스터마이징이 가능하도록 개선했습니다.
64-76: 초기화 버튼 개선 및 애니메이션 적용초기화 버튼에 애니메이션을 적용하고 resetButtonClassName 프롭을 통해 스타일 커스터마이징이 가능하도록 개선했습니다. 시각적 피드백을 제공하여 사용자 경험이 향상되었습니다.
src/components/ui/tech-stack/tech-stack-components/TechButtonList.tsx (1)
47-47: 반응형 레이아웃 개선작은 화면에서 버튼 간 간격을 줄이고(gap-2) 중간 크기 이상의 화면에서 원래 간격(md:gap-3)을 유지하도록 변경했습니다. 이로 인해 모바일 화면에서 더 많은 버튼을 표시할 수 있어 사용자 경험이 향상되었습니다.
src/components/ui/tech-stack/tech-stack-components/TabButton.tsx (1)
19-19: 반응형 패딩 조정반응형 패딩 적용 기준점을 sm에서 md로 변경하여 작은 화면에서 더 컴팩트한 레이아웃을 제공합니다. 이는 다른 컴포넌트들의 반응형 디자인 개선 방향과 일치하며, 모바일 화면에서의 공간 활용도를 높입니다.
src/components/ui/tech-stack/tech-stack-components/TechButton.tsx (1)
29-31: 반응형 디자인 개선기존에 lg 브레이크포인트에서 적용되던 스타일들을 md 브레이크포인트부터 적용되도록 변경했습니다. 이를 통해 태블릿과 같은 중간 크기 기기에서도 개선된 UI를 제공할 수 있게 되었습니다. 버튼 간격(gap), 패딩(px, py), 글자 크기(text-sm) 등의 일관된 변경으로 전반적인 사용자 경험이 향상되었습니다.
src/types/mypageTypes.ts (1)
11-16: 아이콘 Props 타입 정의가 잘 구현되었습니다.아이콘 컴포넌트에 필요한 속성들을 명확하게 정의하셔서 컴포넌트 간의 일관성을 유지하는데 도움이 될 것 같습니다. 모든 속성을 옵셔널로 설정한 점도 좋습니다.
src/app/(user-page)/mypage/page.tsx (3)
2-6: Suspense를 활용한 로딩 상태 처리가 잘 구현되었습니다.Suspense와 Skeleton 컴포넌트를 사용하여 데이터 로딩 중 사용자 경험을 개선한 점이 좋습니다.
10-13: 레이아웃 구조 개선이 잘 되었습니다.ProfileImage 컴포넌트를 별도의 div로 감싸고 반응형 마진을 적용하여 구조가 더 명확해졌습니다.
15-17: MyPageClient 컴포넌트 래핑이 적절합니다.Suspense로 MyPageClient 컴포넌트를 감싸서 로딩 상태를 효과적으로 처리하고 있습니다.
src/components/ui/modal/Modal.tsx (3)
16-16: 확인 버튼 비활성화 기능 추가가 좋습니다.Modal 컴포넌트에 disableConfirm 속성을 추가하여 상황에 따라 확인 버튼을 비활성화할 수 있게 한 점이 유용합니다.
77-77: 기본값 설정이 적절합니다.disableConfirm의 기본값을 false로 설정하여 이전 동작과의 호환성을 유지하였습니다.
121-128: 버튼 비활성화 처리가 잘 구현되었습니다.disabled 속성과 스타일 적용을 통해 사용자에게 버튼의 비활성화 상태를 시각적으로 명확히 전달하고 있습니다.
src/app/(user-page)/mypage/_features/ContactEdit.tsx (3)
91-91: 입력 필드에 플레이스홀더 추가가 좋습니다.각 입력 필드에 적절한 예시와 형식을 보여주는 플레이스홀더를 추가하여 사용자 경험을 개선했습니다.
Also applies to: 110-111, 128-129, 162-163
132-134: GitHub URL 유효성 검사 패턴이 개선되었습니다.GitHub URL의 유효성 검사를 위한 정규식 패턴이 구체적으로 개선되어 사용자가 올바른 형식으로 입력할 가능성이 높아졌습니다.
166-170: 블로그 URL 유효성 검사 패턴이 개선되었습니다.다양한 블로그 URL 형식을 지원하도록 정규식 패턴이 확장되었습니다. 주석을 통해 코드의 의도를 명확히 설명한 점도 좋습니다.
src/app/(user-page)/mypage/MyPageClient.tsx (13)
3-4: Next.js 훅 도입이 적절합니다.
프로젝트에서useRouter와useSearchParams를 활용해 URL 파라미터 동기화를 하는 방식이 깔끔하게 잘 구성되었습니다.
6-6:TAB_TYPES활용
상수 파일에서 가져온TAB_TYPES를 통해 URL 파라미터를 통합 관리하는 방식이 재사용성과 유지보수 측면에서 좋습니다.
19-20: router 및 searchParams 상태 보존
Next.js 라우터를 사용하여 상태를 업데이트할 때,scroll: false옵션으로 스크롤 이동을 막은 점이 UX 관점에서 좋습니다.
22-23: 초기 탭과 활성 탭 상태 설정
URL 쿼리(tab)가 없으면 기본값(BASIC)을 사용하고, 상태(activeTab)를 통해 UI를 즉시 반영하는 흐름이 타당합니다.Also applies to: 25-26
29-30: 편집 모드 상태 통합
editModeSection한 개로 각 섹션의 편집 모드를 구분해 로직을 단순화한 접근이 효과적입니다.
32-38: 탭 레퍼런스 관리
useRef로 탭 버튼 DOM을 저장하여 인디케이터 스타일을 계산하는 방식은 합리적입니다.
40-48: URL 변경 감지 로직
useEffect내에서searchParams변화를 감지해activeTab을 동기화하는 로직이 직관적입니다. 다만, 의존성 배열에서activeTab을 제외해 불필요한 재렌더링을 방지한 점이 신중한 설계입니다.
50-58: URL 업데이트 함수
URLSearchParams객체를 이용해tab만 변경 후router.push로 푸시하는 구현이 적절합니다.
60-64: 탭 클릭 시 상태 반영
handleTabChange에서updateUrl을 호출해 URL을 즉시 반영하는 부분이 명확합니다.
66-69: 편집 모드 핸들러
handleEditComplete로 편집 모드를 리셋하고,handleEnableEdit로 현재 탭을 편집 모드로 변경하며,- 탭이 바뀔 때마다 편집 모드를 초기화하는 흐름이 깔끔합니다.
Also applies to: 71-73, 75-78
80-90: 탭 인디케이터 계산 로직
updateIndicator를useCallback으로 메모하여, 탭마다 인디케이터의 위치와 너비를 동적으로 갱신하는 점이 좋습니다. 윈도우 리사이즈 이벤트 정리(cleanup)도 잘 처리하셨습니다.Also applies to: 93-105
108-140: 조건부 렌더링으로 컴포넌트 분기
renderContent에서activeTab에 따라 해당 편집 컴포넌트 또는 정보 컴포넌트를 스위치 문으로 분리해 가독성이 향상됩니다.
143-206: 탭 UI 구성 및 애니메이션
- 네 가지 버튼 각각에
ref를 달아 탭별 DOM 정보를 축적하고,indicatorStyle을 적용해 애니메이션 처리를 해주신 점이 시각적으로도 사용성이 좋습니다.src/constants/mypage/mypageConstant.tsx (7)
1-4: 아이콘 및 타입 임포트
lucide-react아이콘 모듈과IIconProps를 명확하게 불러오셨습니다.
5-11: 탭 타입 상수화
TAB_TYPES로 섹션을 구분해 다른 컴포넌트에서 재사용하기 편리하며, 오탈자 위험이 줄어듭니다.
13-14: 파일 크기 제한 상수
MAX_FILE_SIZE를 500KB로 설정해 업로드 검증을 한눈에 확인할 수 있어 좋습니다.
16-17: 자기소개 글자수 상수
MAX_INTRO_LENGTH를 통해 하드코딩 대신 상수를 사용함으로써 유지보수성을 높였습니다.
19-23: 아이콘 크기와 기본값 상수
ICON_SIZES,DEFAULT_VALUES로 공통 요소를 처리하는 점이 일관성 있습니다.Also applies to: 25-30
32-46: 성별 및 포지션 옵션
여러 옵션(아이콘, 라벨)을 배열로 정의해 UI에서 쉽게 매핑할 수 있어 재사용성에 유리합니다.Also applies to: 48-70
72-80: 연령대와 지역 옵션
세분화된 옵션을 상수로 관리해 코드 가독성과 유지보수성이 좋아졌습니다.Also applies to: 82-102
src/app/(user-page)/mypage/_features/BasicEdit.tsx (6)
9-9:useCallback,useEffect,useState임포트
컴포넌트 상태와 사이드이펙트를 분리해 간결하게 관리하기 위한 구성입니다.
67-72:position값 관찰
useWatch로position을 관찰하여 동적으로 UI를 렌더링하는 방식이 직관적입니다.
74-77:intro값 관찰
자기소개 필드를useWatch로 추적해 글자 수를 체크하고, 최대 글자 수를 넘길 경우를 제어하는 로직이 좋습니다.
92-92:DEFAULT_VALUES.GENDER적용
값이 없을 경우 기본값을 설정해 UI와 로직이 안정적으로 동작하도록 한 점이 좋습니다.
101-101:AGE_OPTIONS,LOCATION_OPTIONS적용
유저 프로필의 나이·지역 데이터를 받아 초기 라벨을 세팅할 때, 상수 목록을 순회해 label을 찾는 로직이 직관적입니다.Also applies to: 104-108
320-322: 버튼 비활성화 조건
isSubmitting || isUpdating || introLength > MAX_INTRO_LENGTH조건을 통해 유효하지 않은 상태에서의 저장 시도를 막아 사용자 경험을 개선했습니다.src/app/(user-page)/mypage/_features/ProfileImage.tsx (10)
11-16: React Query와 Next.js Image 컴포넌트의 적절한 활용새로운 의존성과 상수를 추가하여 코드를 개선했습니다.
useQueryClient를 사용하여 캐시 관리를 효율적으로 처리하고, Next.js의Image컴포넌트로 이미지 최적화를 구현했습니다. 상수 파일로 분리한MAX_FILE_SIZE값을 통해 재사용성과 유지보수성이 향상되었습니다.
20-24: 상태 관리 개선QueryClient 추가와 상태 관리 개선이 잘 되었습니다. 특히
fileSizeError상태를 추가하여 파일 크기 유효성 검증을 명확하게 처리한 부분이 좋습니다. 타입 어노테이션을 간소화하여 코드 가독성도 향상되었습니다.
35-37: 이미지 URL 로직 간소화이미지 URL 구성 로직을 간소화하여 코드 가독성이 향상되었습니다. 이전 버전 관리 메커니즘 대신 프로필 데이터에서 직접 URL을 가져오는 방식으로 개선되었습니다.
67-89: 이미지 업로드 처리 개선확인 버튼 처리 로직이 개선되었습니다. 파일 크기 오류가 있을 때 업로드를 방지하고, 성공 시 QueryClient를 사용하여 캐시를 무효화하는 방식은 매우 효과적입니다. 또한 오류 메시지를 더 사용자 친화적으로 변경한 점도 좋습니다.
92-108: 상태 초기화 및 모달 관리 개선상태 초기화 로직을 별도 함수로 분리하여 코드 중복을 제거한 것은 좋은 리팩토링입니다. 모달 닫기 시에도 상태를 초기화하여 일관된 사용자 경험을 제공하고 있습니다.
119-129: Next.js Image 컴포넌트 활용기존 img 태그를 Next.js의 Image 컴포넌트로 교체하여 성능을 개선했습니다. priority, fill, sizes 속성을 적절히 사용하여 최적화된 이미지 로딩 경험을 제공하고 있습니다. unoptimized 속성은 외부 이미지를 처리하기 위한 좋은 선택입니다.
158-161: 모달 UI 개선모달의 크기를 반응형으로 조정하고, 파일 크기 오류가 있거나 선택된 파일이 없을 때 확인 버튼을 비활성화하는 기능을 추가한 것은 좋은 UX 개선입니다. 사용자가 잘못된 작업을 방지할 수 있게 되었습니다.
174-180: 미리보기 이미지 렌더링 개선미리보기 이미지 렌더링에 Next.js Image 컴포넌트를 활용하고, 반응형 크기 조정을 위한 sizes 속성을 적절히 구성했습니다. 이미지 최적화와 사용자 경험이 향상되었습니다.
182-188: 현재 프로필 이미지 렌더링 개선현재 프로필 이미지도 Next.js Image 컴포넌트로 교체하여 일관된 렌더링 방식을 유지하고 있습니다. 최적화된 이미지 로딩과 반응형 디자인을 위한 속성들이 잘 구성되어 있습니다.
198-203: 파일 크기 오류 UI 개선파일 크기 오류를 시각적으로 표시하는 UI를 추가한 것은 사용자 경험을 크게 개선합니다. 오류 메시지가 명확하게 표시되어 사용자가 문제를 쉽게 인식하고 해결할 수 있습니다.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
📝 주요 작업 내용
쿼리 파라미터로 섹션 저장
tab으로 섹션 구분
basic 섹션 ui 개선
기술 스택 반응형 개선 살짝의 애니메이션 추가 ui 개선
contact 섹션 유효성 강화
📺 스크린샷
🔗 참고 사항
브랜치를 새로 파지 못한 상태에서 구현 했습니다.. 다음 작업부터는 바로 파서 작업하겠습니다
💬 리뷰 요구사항
📃 관련 이슈
#https://moimservice.atlassian.net/browse/DEVING-44
Summary by CodeRabbit
새로운 기능
향상
UI/스타일