[UI] 오늘의 한마디 페이지#43
Conversation
Walkthrough이번 변경에서는 기존 그룹 생성 관련 컴포넌트들의 import 경로를 정리하고, "오늘의 한마디" 기능을 위한 새로운 타입, 상수, 스타일, 컴포넌트, 페이지를 추가하였습니다. 또한, 라우터에 "today-words" 경로를 등록하여 해당 기능에 접근할 수 있도록 하였습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TodayWords
participant MessageList
participant MessageInput
participant EmptyState
User->>TodayWords: 페이지 진입
TodayWords->>MessageList: 메시지 목록 렌더
TodayWords->>MessageInput: 입력창 렌더
alt 메시지 없음
TodayWords->>EmptyState: 빈 상태 표시
end
User->>MessageInput: 메시지 입력 및 전송
MessageInput->>TodayWords: onSend 콜백
TodayWords->>MessageList: addMessage 또는 상태 업데이트
MessageList->>TodayWords: 삭제 등 액션 발생 시 콜백
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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:
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: 9
🔭 Outside diff range comments (1)
src/components/creategroup/PrivacySettingSection/PasswordInputSection.tsx (1)
9-13:onCloseprop이 사용되지 않음컴포넌트가
onClose콜백을 props 로 받고 있지만 실제로 호출하지 않습니다. 상위 컴포넌트에서 닫기 이벤트를 감지할 수 없어 기능 오류가 발생할 수 있습니다.-const handleClose = () => { - onPasswordChange(''); // 입력된 숫자 전체 삭제 -}; +const handleClose = () => { + onPasswordChange(''); // 입력된 숫자 전체 삭제 + onClose(); // 상위에 닫기 이벤트 전달 +};
🧹 Nitpick comments (20)
src/components/creategroup/ActivityPeriodSection/Wheel.styled.ts (1)
2-2: 상대 경로 대신 import alias 도입을 검토해 주세요
../../../styles/global/global과 같은 깊은 상대 경로는 디렉터리 구조 변경 시 유지보수 비용이 커집니다.
tsconfig.json의paths또는 webpack alias(예:@styles)를 정의해 절대-경로 import 로 통일하면 가독성과 이동 내성이 높아집니다.예시:
-import { colors, semanticColors, typography } from '../../../styles/global/global'; +import { colors, semanticColors, typography } from '@styles/global';src/components/creategroup/RoomInfoSection.styled.ts (1)
2-2: 상대 경로 대신 alias 사용을 검토해주세요
../../styles/global/global같은 다단계 상대 경로는 디렉터리 구조가 조금만 변해도 쉽게 깨집니다.tsconfig의paths혹은 Webpack/Vite alias 설정으로@styles/global등 절대 경로(alias)를 정의해 두면 유지보수성이 훨씬 좋아집니다.
예)-import { typography, semanticColors } from '../../styles/global/global'; +import { typography, semanticColors } from '@styles/global';src/components/creategroup/BookSelectionSection.styled.ts (1)
2-2: 상대 경로 정리 👍 – Alias 도입 검토 제안
../../styles/global/global로의 경로 축약은 현 디렉터리 깊이와 일치해 문제 없습니다.
다만 스타일 토큰을 여러 곳에서 가져온다면,tsconfigpaths(혹은 Webpack alias)로 절대 경로 import(@styles/global등)를 도입하면 폴더 구조 변경 시 유지보수가 용이해집니다.-import { colors, typography, semanticColors } from '../../styles/global/global'; +import { colors, typography, semanticColors } from '@styles/global';필수는 아니지만 장기적으로 가독성과 이동 내성이 향상될 수 있습니다.
src/components/creategroup/MemberLimitSection.styled.ts (1)
2-2: 상대 경로 변경이 올바른지 다시 한번 확인해주세요
../../styles/global/global경로는
src/components/creategroup/MemberLimitSection.styled.ts→src/components→src→src/styles/global/global로 해석됩니다.
스타일 토큰 파일이src/styles/global/global.ts(혹은.ts/ .js) 위치에 실제로 존재하는지 프로젝트 루트에서 한 번 더 확인해 주세요. 여러 파일에서 동일한 수정이 들어간 만큼, 경로 오타가 있으면 런타임-빌드 모두에서 모듈을 찾지 못해 전체 UI가 깨질 수 있습니다.또한, 상대 경로가 자주 바뀌어 관리가 번거롭다면 다음과 같은 개선점을 고려해 보시는 것을 권장드립니다.
- webpack/tsconfig path alias
@styles/*같은 별칭을 설정해 절대 경로로 import 하면 디렉터리 이동에 따른 경로 수정이 필요 없습니다.- 배럴 파일 사용
src/styles/index.ts에서 공통 토큰을 재-export 하여@styles또는styles단일 진입점으로 관리하면 가독성과 유지보수성이 좋아집니다.src/components/creategroup/ActivityPeriodSection/ActivityPeriodSection.tsx (1)
2-2: 상대 경로 대신 alias 사용 고려
../../../pages/group/CommonSection.styled와 같은 깊은 상대 경로는 디렉터리 구조가 변할 때마다 잦은 수정이 필요합니다.tsconfig.json의paths옵션이나 Webpack alias를 설정해 절대경로/별칭으로 교체하면 유지보수성이 높아집니다.src/components/creategroup/MemberLimitSection.tsx (1)
1-1: DateWheel 깊은 상대경로 import
같은 디렉터리 내가 아닌./ActivityPeriodSection/DateWheel로 직접 접근하고 있습니다. 컴포넌트 재사용성을 위해index.ts배럴을 두거나 alias 경로로 노출해 깊은 상대경로 의존을 줄이는 것을 권장합니다.src/components/creategroup/BookSelectionSection.tsx (1)
49-53: 인라인 스타일 대신 styled-components 활용 권장
<span style={{ color: semanticColors.text.secondary }}>와 같이 인라인 스타일을 사용하면
- 다크모드 등 전역 테마 변경 시 누락될 위험
- 스타일 오버라이드가 어려움
- CSS static 분석 도구 적용이 제한
등의 문제가 있습니다. 동일 스타일을 재사용할 가능성이 높다면styled.span정의로 분리해 두는 편이 유지보수에 유리합니다.src/pages/group/CreateGroup.tsx (1)
5-11: 상대 경로 난립 – alias 또는 index.ts 재export 고려
../../components/creategroup/...형태의 긴 상대 경로가 다수 등장하고 있습니다.
프로젝트 규모가 커질수록 refactor 시 import 경로 업데이트가 반복적으로 발생합니다.• tsconfig
paths(예:@components/*) 설정으로 절대 경로 alias 사용
• 각 폴더에index.ts를 두어import { BookSelectionSection } from '@components/creategroup'형태로 얕은 경로 노출등을 도입하면 가독성과 유지보수가 크게 개선됩니다.
src/types/today.ts (1)
1-8: 인터페이스 구조가 잘 정의되어 있습니다.메시지 객체의 구조가 명확하고 적절합니다. 다만 몇 가지 개선 사항을 제안드립니다:
timestamp와createdAt이 중복된 정보를 담고 있어 보입니다timeAgo는 시간이 지나면서 부정확해질 수 있어 계산된 속성으로 처리하는 것이 좋을 것 같습니다다음과 같은 개선을 고려해보세요:
export interface Message { id: string; user: string; content: string; - timestamp: string; - timeAgo: string; createdAt: Date; }그리고 timestamp와 timeAgo는 computed property나 유틸리티 함수로 처리하는 방식도 고려해보시기 바랍니다.
src/components/today-words/MessageInput.styled.ts (1)
27-53: 접근성 개선을 위한 포커스 상태 추가를 고려해보세요.텍스트 에리어의 스타일링이 잘 되어 있지만, 접근성을 위해 포커스 상태에 대한 시각적 피드백을 추가하는 것이 좋겠습니다.
다음과 같은 포커스 스타일을 추가해보세요:
export const MessageInput = styled.textarea` /* ... existing styles ... */ + &:focus { + box-shadow: 0 0 0 2px ${semanticColors.button.fill.primary}; + } `;src/components/today-words/EmptyState.styled.ts (2)
14-19: 타이포그래피 일관성을 위해 상수 사용을 권장합니다
font-size: 18px대신typography.fontSize.lg를 사용하여 디자인 시스템과의 일관성을 유지하는 것이 좋겠습니다.export const EmptyMessage = styled.div` color: ${semanticColors.text.primary}; - font-size: 18px; + font-size: ${typography.fontSize.lg}; font-weight: ${typography.fontWeight.semibold}; margin-bottom: 8px; `;
21-25: 타이포그래피 상수 사용 권장
font-size: 14px대신typography.fontSize.sm를 사용하여 일관성을 유지해보세요.export const EmptySubMessage = styled.div` color: ${semanticColors.text.secondary}; - font-size: 14px; + font-size: ${typography.fontSize.sm}; font-weight: ${typography.fontWeight.regular}; `;src/components/today-words/MessageList/MessageActionBottomSheet.tsx (1)
38-49: 접근성 향상을 위한 제안버튼들에 적절한 ARIA 라벨이나 role 속성을 추가하여 스크린 리더 사용자의 접근성을 향상시킬 수 있습니다.
- <ActionItem onClick={onEdit}>수정하기</ActionItem> + <ActionItem onClick={onEdit} role="button" aria-label="메시지 수정">수정하기</ActionItem> - <DeleteActionItem onClick={onDelete}>삭제하기</DeleteActionItem> + <DeleteActionItem onClick={onDelete} role="button" aria-label="메시지 삭제">삭제하기</DeleteActionItem> - <ReportActionItem onClick={onReport}>신고하기</ReportActionItem> + <ReportActionItem onClick={onReport} role="button" aria-label="메시지 신고">신고하기</ReportActionItem>src/components/today-words/MessageInput.tsx (1)
69-75: 버튼 상태 관리 개선 제안
disabled와active속성이 동일한 조건으로 설정되어 있습니다. 일관성을 위해 하나의 변수로 관리하는 것을 고려해보세요.+ const isMessageEmpty = value.trim() === ''; + <SendButton onClick={handleSendClick} - disabled={value.trim() === ''} - active={value.trim() !== ''} + disabled={isMessageEmpty} + active={!isMessageEmpty} >src/components/today-words/MessageList/MessageList.styled.ts (4)
28-35: 하드코딩된 색상 값을 시맨틱 색상으로 교체 권장
border: 1px solid #3d3d3d부분에서 하드코딩된 색상 대신 시맨틱 색상을 사용하는 것이 좋겠습니다.export const UserAvatar = styled.div` width: 36px; height: 36px; border-radius: 50%; background-color: ${semanticColors.background.card}; - border: 1px solid #3d3d3d; + border: 1px solid ${semanticColors.background.cardDark}; flex-shrink: 0; `;
81-86: 하드코딩된 배경색을 시맨틱 색상으로 교체 권장
background-color: #282828부분에서 하드코딩된 색상 대신 시맨틱 색상을 사용하여 일관성을 유지해보세요.export const Separator = styled.div` width: calc(100% + 40px); height: 10px; - background-color: #282828; + background-color: ${semanticColors.background.cardDark}; margin: 20px -20px; `;
44-49: 타이포그래피 일관성을 위한 개선 제안
font-size: 12px대신typography.fontSize.xs를 사용하여 디자인 시스템과의 일관성을 유지해보세요.export const UserName = styled.div` color: ${semanticColors.text.primary}; - font-size: 12px; + font-size: ${typography.fontSize.xs}; font-weight: ${typography.fontWeight.semibold}; margin-bottom: 5px; `;
51-55: 폰트 크기 표준화 권장
font-size: 11px는 디자인 시스템에 정의되지 않은 크기입니다. 가장 가까운 표준 크기인typography.fontSize.xs(12px) 사용을 고려해보세요.export const TimeStamp = styled.div` color: ${semanticColors.text.tertiary}; - font-size: 11px; + font-size: ${typography.fontSize.xs}; font-weight: ${typography.fontWeight.regular}; `;src/components/today-words/MessageList/MessageList.tsx (1)
104-108: 프로덕션 코드에서 console.log를 제거하세요.개발용 console.log 문들이 남아있습니다. 프로덕션 환경에서는 제거해야 합니다.
const handleEdit = () => { - console.log('메시지 수정'); setSelectedMessageId(null); }; const handleDelete = () => { if (selectedMessageId) { if (isRealTimeMode && onMessageDelete) { onMessageDelete(selectedMessageId); } else { setMessages(prevMessages => prevMessages.filter(message => message.id !== selectedMessageId), ); } - console.log(`메시지 ID ${selectedMessageId} 삭제됨`); } setSelectedMessageId(null); }; const handleReport = () => { - console.log('메시지 신고'); setSelectedMessageId(null); };Also applies to: 120-121, 125-128
src/components/today-words/MessageList/MessageActionBottomSheet.styled.ts (1)
53-58: 하드코딩된 색상을 시맨틱 컬러로 교체하세요.
Divider컴포넌트에서 하드코딩된 색상 값#525252를 사용하고 있습니다. 일관성을 위해 시맨틱 컬러를 사용하세요.export const Divider = styled.div` width: 100%; height: 1px; - background-color: #525252; + background-color: ${semanticColors.background.cardDark}; margin: 8px 0; `;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
src/assets/common/more.svgis excluded by!**/*.svgsrc/assets/common/send.svgis excluded by!**/*.svg
📒 Files selected for processing (29)
src/components/creategroup/ActivityPeriodSection/ActivityPeriodSection.styled.ts(1 hunks)src/components/creategroup/ActivityPeriodSection/ActivityPeriodSection.tsx(1 hunks)src/components/creategroup/ActivityPeriodSection/Wheel.styled.ts(1 hunks)src/components/creategroup/BookSelectionSection.styled.ts(1 hunks)src/components/creategroup/BookSelectionSection.tsx(1 hunks)src/components/creategroup/GenreSelectionSection.styled.ts(1 hunks)src/components/creategroup/GenreSelectionSection.tsx(1 hunks)src/components/creategroup/MemberLimitSection.styled.ts(1 hunks)src/components/creategroup/MemberLimitSection.tsx(1 hunks)src/components/creategroup/PrivacySettingSection/PasswordInputSection.styled.ts(1 hunks)src/components/creategroup/PrivacySettingSection/PasswordInputSection.tsx(1 hunks)src/components/creategroup/PrivacySettingSection/PrivacySettingSection.styled.ts(1 hunks)src/components/creategroup/PrivacySettingSection/PrivacySettingSection.tsx(1 hunks)src/components/creategroup/RoomInfoSection.styled.ts(1 hunks)src/components/creategroup/RoomInfoSection.tsx(1 hunks)src/components/today-words/EmptyState.styled.ts(1 hunks)src/components/today-words/EmptyState.tsx(1 hunks)src/components/today-words/MessageInput.styled.ts(1 hunks)src/components/today-words/MessageInput.tsx(1 hunks)src/components/today-words/MessageList/MessageActionBottomSheet.styled.ts(1 hunks)src/components/today-words/MessageList/MessageActionBottomSheet.tsx(1 hunks)src/components/today-words/MessageList/MessageList.styled.ts(1 hunks)src/components/today-words/MessageList/MessageList.tsx(1 hunks)src/constants/today-constants.ts(1 hunks)src/pages/group/CreateGroup.tsx(1 hunks)src/pages/index.tsx(2 hunks)src/pages/today-words/TodayWords.styled.ts(1 hunks)src/pages/today-words/TodayWords.tsx(1 hunks)src/types/today.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (10)
src/components/today-words/EmptyState.tsx (1)
src/components/today-words/EmptyState.styled.ts (3)
EmptyStateContainer(4-12)EmptyMessage(14-19)EmptySubMessage(21-25)
src/constants/today-constants.ts (1)
src/types/today.ts (1)
Message(1-8)
src/components/today-words/EmptyState.styled.ts (1)
src/styles/global/global.ts (2)
semanticColors(79-152)typography(56-76)
src/components/today-words/MessageList/MessageActionBottomSheet.tsx (1)
src/components/today-words/MessageList/MessageActionBottomSheet.styled.ts (6)
Overlay(4-20)BottomSheet(22-31)ActionItem(33-47)Divider(53-58)DeleteActionItem(49-51)ReportActionItem(60-62)
src/pages/today-words/TodayWords.styled.ts (1)
src/styles/global/global.ts (1)
semanticColors(79-152)
src/components/today-words/MessageInput.tsx (1)
src/components/today-words/MessageInput.styled.ts (4)
MessageInput(27-53)InputContainer(4-15)MessageInputWrapper(17-25)SendButton(55-77)
src/components/today-words/MessageInput.styled.ts (1)
src/styles/global/global.ts (2)
semanticColors(79-152)typography(56-76)
src/components/today-words/MessageList/MessageList.styled.ts (1)
src/styles/global/global.ts (2)
semanticColors(79-152)typography(56-76)
src/components/today-words/MessageList/MessageActionBottomSheet.styled.ts (1)
src/styles/global/global.ts (2)
semanticColors(79-152)typography(56-76)
src/components/today-words/MessageList/MessageList.tsx (2)
src/types/today.ts (1)
Message(1-8)src/components/today-words/MessageList/MessageList.styled.ts (13)
MessageList(4-7)DateDividerContainer(64-68)DateDivider(70-79)DateGroup(9-14)MessageItem(16-20)UserInfo(22-26)UserAvatar(28-35)UserDetails(37-42)UserName(44-49)TimeStamp(51-55)MoreButton(88-102)MessageContent(57-62)Separator(81-86)
🔇 Additional comments (21)
src/components/creategroup/GenreSelectionSection.styled.ts (1)
2-2: 글로벌 스타일 import 경로 변경 문제없음
../../styles/global/global경로가creategroup디렉터리 기준 두 단계 상위(src/)의styles폴더를 정확히 가리킵니다. 빌드가 깨지지 않는 한 추가 조치 필요 없어 보입니다.src/components/creategroup/PrivacySettingSection/PasswordInputSection.styled.ts (1)
2-2: 경로 축소 적용 확인
../../../styles/global/global로 변경된 import 경로가 실제 존재하는src/styles위치와 일치합니다. 스타일 의존성 외에는 영향이 없으므로 승인합니다.src/components/creategroup/PrivacySettingSection/PasswordInputSection.tsx (1)
7-7: 에셋 경로 변경 OK
../../../assets/group/close.svg로 수정된 경로가 세 단계 상위(src/)의assets디렉터리를 정확히 참조합니다. 문제 없습니다.src/components/creategroup/ActivityPeriodSection/ActivityPeriodSection.styled.ts (1)
2-2: 글로벌 스타일 import 경로 정상경로가
../../../styles/global/global로 통일되었습니다. 다른 creategroup 하위 파일들과 일관성을 유지하므로 문제 없습니다.src/components/creategroup/RoomInfoSection.tsx (1)
1-1: 공통 섹션 컴포넌트 경로 이동 확인 요청
../../pages/group/CommonSection.styled로 변경되었습니다. 파일 이동이 맞다면 OK지만, 경로 오타 시 런타임에서 모듈을 찾지 못합니다. 로컬 빌드로 한 번 더 확인해 주세요.src/components/creategroup/GenreSelectionSection.tsx (1)
1-2: 경로 정리 👍
공통 스타일 import 경로가 통일-정리된 점 확인했습니다. 문제 없습니다.src/components/creategroup/PrivacySettingSection/PrivacySettingSection.tsx (1)
1-1: 경로 수정 확인
공통 컴포넌트 경로가 중앙화된 디렉터리로 이동된 것 확인했습니다. 동작상 문제 없어 보입니다.src/components/creategroup/PrivacySettingSection/PrivacySettingSection.styled.ts (1)
2-2: 스타일 경로 수정 확인
semanticColors,typography경로 변경 정상 확인했습니다.src/components/creategroup/BookSelectionSection.tsx (1)
1-3: 경로 재구성은 좋으나 실제 위치 확인 필요
semanticColors,searchIcon,Section,SectionTitle의 상대 경로가 모두 상위 두 단계(../../)로 변경되었습니다.
리팩터링 과정에서 파일이 이동되었는지, 또는 alias 설정이 없어 단순히 상대 경로를 늘린 것인지 확인이 필요합니다. CI / 빌드 단계에서 모듈을 찾지 못하는 오류가 발생할 수 있으니 한번 더 체크해 주세요.src/components/today-words/MessageInput.styled.ts (2)
4-15: 고정 위치 컨테이너 구현이 적절합니다.하단 고정 입력창의 구현이 올바르게 되어 있습니다.
max-width: 767px설정으로 모바일 환경에 최적화되어 있네요.
55-77: SendButton의 조건부 스타일링이 잘 구현되어 있습니다.활성/비활성 상태에 따른 시각적 피드백과 상호작용 제어가 적절하게 구현되어 있습니다. transition 효과도 사용자 경험을 향상시킵니다.
src/pages/index.tsx (2)
16-16: TodayWords 컴포넌트 import가 올바르게 추가되었습니다.새로운 기능을 위한 컴포넌트 import가 적절합니다.
32-32: 라우트 설정이 올바르게 추가되었습니다."today-words" 경로가 기존 라우팅 패턴과 일관성 있게 추가되었습니다.
src/components/today-words/EmptyState.tsx (1)
3-10: EmptyState 컴포넌트가 깔끔하게 구현되어 있습니다.간단하고 명확한 구조로 빈 상태를 표시하는 컴포넌트가 잘 만들어졌습니다. 한국어 메시지도 사용자 친화적입니다.
src/pages/today-words/TodayWords.styled.ts (1)
1-23: 레이아웃 스타일링이 잘 구현되어 있습니다반응형 디자인과 시맨틱 색상 활용이 적절하게 구현되었습니다. 고정된 패딩 값들이 전체 디자인 시스템과 일관성이 있는지 확인해보세요.
src/components/today-words/MessageList/MessageActionBottomSheet.tsx (2)
10-17: 인터페이스 정의가 적절합니다props 타입 정의가 명확하고 옵셔널 프로퍼티 처리도 적절합니다.
27-31: 오버레이 클릭 처리가 올바르게 구현되었습니다
e.target === e.currentTarget체크를 통해 오버레이 영역 클릭 시에만 닫히도록 하는 로직이 정확합니다.src/components/today-words/MessageInput.tsx (3)
17-18: IME 처리를 위한 상태 관리가 적절합니다한국어 입력 시 중복 전송을 방지하기 위한
isComposing상태 관리가 잘 구현되었습니다.
20-28: 자동 높이 조절 로직이 잘 구현되었습니다textarea의 scrollHeight를 활용한 자동 높이 조절이 적절하게 구현되었습니다.
40-50: IME 처리와 Enter 키 이벤트 핸들링이 우수합니다한국어 입력 중 Enter 키 처리를 방지하는 로직이 정확하게 구현되어 있어 사용자 경험이 향상될 것입니다.
src/components/today-words/MessageList/MessageActionBottomSheet.styled.ts (1)
1-62: 전반적으로 잘 구성된 스타일 컴포넌트입니다.시맨틱 컬러와 타이포그래피를 일관되게 사용하고, 적절한 애니메이션과 반응형 디자인을 구현했습니다. z-index 관리도 적절합니다.
| import BookSelectionSection from '../../components/creategroup/BookSelectionSection'; | ||
| import GenreSelectionSection from '../../components/creategroup/GenreSelectionSection'; | ||
| import RoomInfoSection from '../../components/creategroup/RoomInfoSection'; | ||
| import ActivityPeriodSection from '../../components/creategroup/ActivityPeriodSection/ActivityPeriodSection'; | ||
| import MemberLimitSection from '../../components/creategroup/MemberLimitSection'; | ||
| import PrivacySettingSection from '../../components/creategroup//PrivacySettingSection/PrivacySettingSection'; | ||
| import leftarrow from '../../assets/common/leftArrow.svg'; |
There was a problem hiding this comment.
이중 슬래시(//)로 인한 모듈 해석 실패 가능성
import PrivacySettingSection from '../../components/creategroup//PrivacySettingSection/PrivacySettingSection';경로에 //가 포함되어 있습니다. Node, Vite, webpack 환경에 따라 정상 동작할 수도 있으나, 일부 툴링(예: ESLint import-resolver)과 CI에서 경로 오류가 발생할 여지가 큽니다. 단순 오타로 보이니 한 줄로 정정해 주세요.
-import PrivacySettingSection from '../../components/creategroup//PrivacySettingSection/PrivacySettingSection';
+import PrivacySettingSection from '../../components/creategroup/PrivacySettingSection/PrivacySettingSection';🤖 Prompt for AI Agents
In src/pages/group/CreateGroup.tsx between lines 5 and 11, the import path for
PrivacySettingSection contains a double slash ('//') which can cause module
resolution errors in some environments. Fix this by removing the extra slash so
the path reads
'../../components/creategroup/PrivacySettingSection/PrivacySettingSection'.
| export const dummyMessages: Message[] = [ | ||
| { | ||
| id: '1', | ||
| user: 'user.01', | ||
| content: | ||
| '공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다.', | ||
| timestamp: '2024.04.30', | ||
| timeAgo: '11시간 전', | ||
| createdAt: new Date('2024-04-30T13:00:00'), | ||
| }, | ||
| { | ||
| id: '2', | ||
| user: 'user.01', | ||
| content: | ||
| '공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다.', | ||
| timestamp: '2024.04.30', | ||
| timeAgo: '11시간 전', | ||
| createdAt: new Date('2024-04-30T14:00:00'), | ||
| }, | ||
| { | ||
| id: '3', | ||
| user: 'user.01', | ||
| content: '공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다.', | ||
| timestamp: '2024.04.30', | ||
| timeAgo: '12시간 전', | ||
| createdAt: new Date('2024-04-30T12:00:00'), | ||
| }, | ||
| { | ||
| id: '4', | ||
| user: 'user.01', | ||
| content: | ||
| '공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다.', | ||
| timestamp: '2024.04.29', | ||
| timeAgo: '11시간 전', | ||
| createdAt: new Date('2024-04-29T15:00:00'), | ||
| }, | ||
| { | ||
| id: '5', | ||
| user: 'user.05', | ||
| content: | ||
| '공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다.', | ||
| timestamp: '2024.04.29', | ||
| timeAgo: '10시간 전', | ||
| createdAt: new Date('2024-04-29T16:00:00'), | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
더미 데이터의 구조는 올바르지만 일관성 문제가 있습니다.
Message 인터페이스를 올바르게 따르고 있으나, 데이터의 일관성에 문제가 있습니다:
timeAgo값이 실제createdAt시간과 일치하지 않습니다- 같은 날짜의 메시지들이 서로 다른
timeAgo값을 가지고 있습니다 - 모든 메시지 내용이 동일한 반복 텍스트입니다
다음과 같이 수정하는 것을 제안합니다:
{
id: '3',
user: 'user.01',
content: '공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다.',
timestamp: '2024.04.30',
- timeAgo: '12시간 전',
+ timeAgo: '12시간 전',
createdAt: new Date('2024-04-30T12:00:00'),
},
{
id: '4',
user: 'user.01',
- content: '공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다. 공백 포함 글자 입력입니다.',
+ content: '오늘 날씨가 정말 좋네요!',
timestamp: '2024.04.29',
- timeAgo: '11시간 전',
+ timeAgo: '1일 전',
createdAt: new Date('2024-04-29T15:00:00'),
},더 다양하고 현실적인 메시지 내용과 정확한 시간 정보를 사용하면 개발과 테스트에 더 도움이 될 것입니다.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/constants/today-constants.ts between lines 3 and 48, the dummyMessages
array has inconsistent timeAgo values that do not match the createdAt
timestamps, and the message contents are repetitive. To fix this, update the
timeAgo fields to accurately reflect the difference from the createdAt times,
ensure consistency for messages on the same date, and replace the repeated
content with more varied and realistic message texts to improve data quality for
development and testing.
| // 개발용: 빈 상태와 글 있는 상태 토글 | ||
| const [showMessages, setShowMessages] = useState(false); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
변수명이 직관적이지 않습니다.
showMessages 변수명이 실제 동작과 반대로 되어 있어 혼란을 야기할 수 있습니다. false일 때 실제 메시지를, true일 때 더미 메시지를 보여주고 있습니다.
- const [showMessages, setShowMessages] = useState(false);
+ const [isDummyMode, setIsDummyMode] = useState(false);그리고 관련된 모든 로직에서 showMessages를 isDummyMode로 변경하세요.
📝 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.
| // 개발용: 빈 상태와 글 있는 상태 토글 | |
| const [showMessages, setShowMessages] = useState(false); | |
| // 개발용: 빈 상태와 글 있는 상태 토글 | |
| - const [showMessages, setShowMessages] = useState(false); | |
| + const [isDummyMode, setIsDummyMode] = useState(false); |
🤖 Prompt for AI Agents
In src/pages/today-words/TodayWords.tsx around lines 19 to 20, the variable name
showMessages is misleading because when it is false, actual messages are shown,
and when true, dummy messages are shown. Rename showMessages to isDummyMode and
update all related logic and references accordingly to reflect that true means
dummy messages are shown and false means actual messages are shown.
| setTimeout(() => { | ||
| window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); | ||
| }, 100); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
스크롤 처리 방식을 개선하세요.
setTimeout을 사용한 스크롤 처리는 예측하기 어렵고 안정적이지 않습니다. 더 나은 방법을 사용하세요.
- setTimeout(() => {
- window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
- }, 100);
+ // DOM 업데이트 완료 후 스크롤
+ requestAnimationFrame(() => {
+ window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+ });📝 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.
| setTimeout(() => { | |
| window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); | |
| }, 100); | |
| // DOM 업데이트 완료 후 스크롤 | |
| requestAnimationFrame(() => { | |
| window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); | |
| }); |
🤖 Prompt for AI Agents
In src/pages/today-words/TodayWords.tsx around lines 61 to 63, the current
scroll handling uses setTimeout, which is unreliable and unpredictable. Replace
this with a more robust approach such as using a useEffect hook that triggers
after the component updates or leveraging requestAnimationFrame to ensure the
scroll happens after rendering. This will improve the stability and
predictability of the scroll behavior.
| <button | ||
| onClick={() => { | ||
| setShowMessages(!showMessages); | ||
| // 더미 모드에서 실제 모드로 전환할 때 메시지 초기화 | ||
| if (showMessages) { | ||
| setMessages([]); | ||
| } | ||
| }} | ||
| style={{ | ||
| position: 'fixed', | ||
| top: '200px', | ||
| right: '20px', | ||
| background: '#6868FF', | ||
| color: 'white', | ||
| border: 'none', | ||
| padding: '10px', | ||
| borderRadius: '5px', | ||
| fontSize: '12px', | ||
| zIndex: 1000, | ||
| }} | ||
| > | ||
| {showMessages ? '빈 상태' : '글 있음'} | ||
| </button> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
개발용 코드를 프로덕션에서 제거하세요.
토글 버튼의 인라인 스타일과 개발용 코드가 프로덕션 코드에 포함되어 있습니다. 환경 변수로 제어하거나 별도 파일로 분리하세요.
- {/* 개발용 토글 버튼 */}
- <button
- onClick={() => {
- setShowMessages(!showMessages);
- // 더미 모드에서 실제 모드로 전환할 때 메시지 초기화
- if (showMessages) {
- setMessages([]);
- }
- }}
- style={{
- position: 'fixed',
- top: '200px',
- right: '20px',
- background: '#6868FF',
- color: 'white',
- border: 'none',
- padding: '10px',
- borderRadius: '5px',
- fontSize: '12px',
- zIndex: 1000,
- }}
- >
- {showMessages ? '빈 상태' : '글 있음'}
- </button>
+ {process.env.NODE_ENV === 'development' && (
+ <DevToggleButton
+ onClick={() => {
+ setIsDummyMode(!isDummyMode);
+ if (isDummyMode) {
+ setMessages([]);
+ }
+ }}
+ >
+ {isDummyMode ? '빈 상태' : '글 있음'}
+ </DevToggleButton>
+ )}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/pages/today-words/TodayWords.tsx around lines 100 to 122, the toggle
button includes inline styles and development-only code that should not be in
production. Refactor by moving the inline styles to a CSS or styled-components
file and control the rendering or behavior of the button using environment
variables or feature flags to exclude development-only code from production
builds.
| const now = new Date(); | ||
| const newMessage: Message = { | ||
| id: Date.now().toString(), | ||
| user: 'user.01', | ||
| content: inputValue.trim(), | ||
| timestamp: now | ||
| .toLocaleDateString('ko-KR', { | ||
| year: 'numeric', | ||
| month: '2-digit', | ||
| day: '2-digit', | ||
| }) | ||
| .replace(/\. /g, '.') | ||
| .replace(/\.$/, ''), | ||
| timeAgo: '방금 전', | ||
| createdAt: now, | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
ID 생성 방식과 날짜 포맷팅을 개선하세요.
현재 Date.now().toString()으로 ID를 생성하는 방식은 동시에 여러 메시지가 생성될 때 충돌할 수 있으며, 날짜 포맷팅 로직이 MessageList 컴포넌트와 중복됩니다.
+ // 유틸리티 함수로 분리
+ const generateUniqueId = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+ const formatTimestamp = (date: Date) => {
+ return date
+ .toLocaleDateString('ko-KR', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ })
+ .replace(/\. /g, '.')
+ .replace(/\.$/, '');
+ };
const newMessage: Message = {
- id: Date.now().toString(),
+ id: generateUniqueId(),
user: 'user.01',
content: inputValue.trim(),
- timestamp: now
- .toLocaleDateString('ko-KR', {
- year: 'numeric',
- month: '2-digit',
- day: '2-digit',
- })
- .replace(/\. /g, '.')
- .replace(/\.$/, ''),
+ timestamp: formatTimestamp(now),
timeAgo: '방금 전',
createdAt: now,
};📝 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.
| const now = new Date(); | |
| const newMessage: Message = { | |
| id: Date.now().toString(), | |
| user: 'user.01', | |
| content: inputValue.trim(), | |
| timestamp: now | |
| .toLocaleDateString('ko-KR', { | |
| year: 'numeric', | |
| month: '2-digit', | |
| day: '2-digit', | |
| }) | |
| .replace(/\. /g, '.') | |
| .replace(/\.$/, ''), | |
| timeAgo: '방금 전', | |
| createdAt: now, | |
| }; | |
| const now = new Date(); | |
| // 유틸리티 함수로 분리 | |
| const generateUniqueId = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; | |
| const formatTimestamp = (date: Date) => { | |
| return date | |
| .toLocaleDateString('ko-KR', { | |
| year: 'numeric', | |
| month: '2-digit', | |
| day: '2-digit', | |
| }) | |
| .replace(/\. /g, '.') | |
| .replace(/\.$/, ''); | |
| }; | |
| const newMessage: Message = { | |
| id: generateUniqueId(), | |
| user: 'user.01', | |
| content: inputValue.trim(), | |
| timestamp: formatTimestamp(now), | |
| timeAgo: '방금 전', | |
| createdAt: now, | |
| }; |
🤖 Prompt for AI Agents
In src/pages/today-words/TodayWords.tsx around lines 32 to 47, the ID generation
using Date.now().toString() can cause collisions if multiple messages are
created simultaneously, and the date formatting duplicates logic found in the
MessageList component. To fix this, replace the ID generation with a more robust
unique ID method such as using a UUID generator or a combination of timestamp
and random values. Also, refactor the date formatting to use a shared utility or
the existing formatting logic from MessageList to avoid duplication and ensure
consistency.
| const addMessage = (content: string) => { | ||
| const now = new Date(); | ||
| const newMessage: Message = { | ||
| id: Date.now().toString(), | ||
| user: currentUserId, | ||
| content: content, | ||
| timestamp: now | ||
| .toLocaleDateString('ko-KR', { | ||
| year: 'numeric', | ||
| month: '2-digit', | ||
| day: '2-digit', | ||
| }) | ||
| .replace(/\. /g, '.') | ||
| .replace(/\.$/, ''), | ||
| timeAgo: '방금 전', | ||
| createdAt: now, | ||
| }; | ||
|
|
||
| setMessages(prevMessages => [...prevMessages, newMessage]); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
날짜 포맷팅 로직을 공통 유틸리티로 분리하세요.
TodayWords.tsx와 동일한 날짜 포맷팅 로직이 중복되어 있습니다. 이를 공통 유틸리티 함수로 분리해야 합니다.
새로운 유틸리티 파일 src/utils/dateUtils.ts를 생성하고:
export const generateUniqueId = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
export const formatTimestamp = (date: Date) => {
return date
.toLocaleDateString('ko-KR', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
.replace(/\. /g, '.')
.replace(/\.$/, '');
};
export const createNewMessage = (content: string, userId: string): Message => {
const now = new Date();
return {
id: generateUniqueId(),
user: userId,
content,
timestamp: formatTimestamp(now),
timeAgo: '방금 전',
createdAt: now,
};
};그리고 이 컴포넌트에서:
- const now = new Date();
- const newMessage: Message = {
- id: Date.now().toString(),
- user: currentUserId,
- content: content,
- timestamp: now
- .toLocaleDateString('ko-KR', {
- year: 'numeric',
- month: '2-digit',
- day: '2-digit',
- })
- .replace(/\. /g, '.')
- .replace(/\.$/, ''),
- timeAgo: '방금 전',
- createdAt: now,
- };
+ const newMessage = createNewMessage(content, currentUserId);🤖 Prompt for AI Agents
In src/components/today-words/MessageList/MessageList.tsx around lines 49 to 68,
the date formatting logic is duplicated and should be extracted into a shared
utility. Create a new file src/utils/dateUtils.ts and move the date formatting
code into a formatTimestamp function, add a generateUniqueId function for unique
IDs, and a createNewMessage function that returns a new Message object. Then,
update the addMessage function in MessageList.tsx to use createNewMessage for
creating new messages, importing these utilities from the new file.
| // 날짜를 최신순으로 정렬 | ||
| const sortedDates = Object.keys(groupedMessages).sort((a, b) => a.localeCompare(b)); |
There was a problem hiding this comment.
날짜 정렬 로직을 수정하세요.
문자열 비교를 사용한 날짜 정렬은 예상치 못한 결과를 낳을 수 있습니다. 실제 Date 객체를 사용하여 정렬해야 합니다.
- const sortedDates = Object.keys(groupedMessages).sort((a, b) => a.localeCompare(b));
+ // 날짜별로 그룹의 첫 번째 메시지의 createdAt을 기준으로 정렬
+ const sortedDates = Object.keys(groupedMessages).sort((a, b) => {
+ const dateA = groupedMessages[a][0].createdAt;
+ const dateB = groupedMessages[b][0].createdAt;
+ return new Date(dateA).getTime() - new Date(dateB).getTime();
+ });🤖 Prompt for AI Agents
In src/components/today-words/MessageList/MessageList.tsx around lines 93 to 94,
the current date sorting uses string comparison which can lead to incorrect
order. Modify the sorting logic to convert the date strings into Date objects
and then compare these Date objects to ensure accurate chronological sorting.
| useEffect(() => { | ||
| setMessages(initialMessages); | ||
| }, [initialMessages]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
상태 동기화 로직을 개선하세요.
props를 internal state로 동기화하는 방식은 복잡성을 증가시키고 예상치 못한 동작을 일으킬 수 있습니다. 가능하면 단일 데이터 소스를 유지하는 것이 좋습니다.
만약 internal state가 정말 필요하다면, 의존성 배열을 더 구체적으로 만들어 불필요한 re-render를 방지하세요:
useEffect(() => {
setMessages(initialMessages);
- }, [initialMessages]);
+ }, [initialMessages.length, initialMessages.map(m => m.id).join(',')]);또는 더 나은 접근법으로 상태를 부모에서만 관리하고 이벤트 핸들러를 통해 업데이트하는 방식을 고려해보세요.
📝 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.
| useEffect(() => { | |
| setMessages(initialMessages); | |
| }, [initialMessages]); | |
| useEffect(() => { | |
| setMessages(initialMessages); | |
| }, [initialMessages.length, initialMessages.map(m => m.id).join(',')]); |
🤖 Prompt for AI Agents
In src/components/today-words/MessageList/MessageList.tsx around lines 45 to 47,
avoid syncing props to internal state directly as it increases complexity and
can cause unexpected behavior. Instead, refactor to use the props
(initialMessages) directly as the single source of truth, removing the useEffect
and internal state for messages. If internal state is necessary, narrow the
dependency array to specific values that truly require updates to prevent
unnecessary re-renders. Alternatively, manage the messages state entirely in the
parent component and pass down event handlers to update it.
ho0010
left a comment
ho0010
left a comment
There was a problem hiding this comment.
LGTM!
message 관련 로직이 고려할게 많아보이는데 잘 구현하셨네요!
There was a problem hiding this comment.
180줄이면 긴 편이라서 로직이든 뷰든 분리하면 좋을 것 같지만 분리하기 마땅한게 안보이네요..
날짜 포맷팅 로직이 중복선언되어있는데 유틸에 분리해서 사용하면 좋을 것 같아요!
|
메세지 박스 로직응 예전에 구현했을 때 힘들어했던거같은데 잘 구현해주신것 같네요! |
ho0010
left a comment
ho0010
left a comment
There was a problem hiding this comment.
css 방식이 인라인이랑 혼재되어있는게 있는데 혹시 따로 기준이 있을까요??
font-size가 typography 선언된 값임에도 하드 코딩된 부분들 수정 필요해보입니다!
3 participants
#️⃣ 연관된 이슈
📝 작업 내용
오늘의 한마디 페이지 구현했습니다. 빈 상태와 메시지가 있는 상태 두 가지 UI 구현했습니다.
주요 기능
주요 기술적 구현
스크린샷
2025-07-13.8.47.11.mov
💬리뷰 요구사항
// MessageList.tsx useEffect(() => { setMessages(initialMessages); }, [initialMessages]);🧪 테스트 케이스
Summary by CodeRabbit
New Features
Style
Chores