[4주차] 송지석 미션 제출합니다. #15
Conversation
There was a problem hiding this comment.
하나의 svg 파일에는 한개의 아이콘만 설정하여 배치하는게 좋을 것 같습니닷 ㅎㅎ
| // navigate("/chatlist"); | ||
| navigate(-1); | ||
| }; | ||
| const isChatPage = location.pathname.startsWith('/chat/'); |
There was a problem hiding this comment.
chat 으로 시작하는 라우팅일 때를 분기처리하여 아이콘을 보여주는 방법 좋네요!!
| const StyledInputBar = styled.form` | ||
| display: flex; | ||
| justify-content: center; | ||
| background: white; | ||
| `; |
There was a problem hiding this comment.
그저 단순 채팅 텍스트를 데이터에 추가하는 것이므로 form 제출과는 좀 거리가 있다고 개인적으로 생각했습니다. onClick을 이용하여 send 버튼을 누르면 해당 텍스트를 데이터에 추가해주는 로직을 실행하는 것도 괜찮을 것 같아요~~
| padding: 0 10px; | ||
| background: #F1F1F1; | ||
| border-radius: 22px; | ||
| border: 1px #CCCCCC solid; | ||
| `; |
There was a problem hiding this comment.
자주 쓰인 색깔들은 styled-components 에서 제공하는 ThemeProvider 를 사용해도 좋을 것 같아요 ㅎㅎ
| <Friend_black /> : | ||
| <Friend onClick={goToFriendList} />} |
There was a problem hiding this comment.
onClick 시 실행하는 로직이 복잡하지 않으므로 따로 함수로 처리하지 않고 onClick 안에 바로 선언해줘도 좋을 것 같아요!!
| <Friend_black /> : | |
| <Friend onClick={goToFriendList} />} | |
| <Friend onlick={()=>navigate(/friends)} /> |
| import { ReactComponent as Indicators } from '../assets/images/indicators.svg'; | ||
|
|
||
| const StatusBar: React.FC = () => { | ||
| const [currentTime, setCurrentTime] = useState(getCurrentTime()); |
| useEffect(() => { | ||
| const interval = setInterval(() => { | ||
| setCurrentTime(getCurrentTime()); | ||
| }, 60000); | ||
| return () => clearInterval(interval); | ||
| }, []); |
There was a problem hiding this comment.
useEffect 를 활용하여 curreentTime 을 업데이트 해주는 로직 너무 좋습니다!! 근데 매초 시간을 감지해야하니 setInterval 시간을 1000 으로하는게 어떨까 하는 생각이 듭니다 ㅎㅎ
| }; | ||
| }) | ||
| .filter(summary => summary.lastMessage); | ||
| summaries.sort((a, b) => b.timestamp.localeCompare(a.timestamp)); |
There was a problem hiding this comment.
채팅 최신 순으로 sort 까지 하셔서 화면에 띄우셨네요!! 멋집니다 ㅎㅎ
| ); | ||
| })} | ||
| </ChatSummariesWrapper> | ||
| <IndicateBar activeIcon="chat" /> |
There was a problem hiding this comment.
activeIcon 의 상태에 따라 IndicateBar의 상태를 분기처리하신 점 인상깊네요 ㅎㅎ
| id: Date.now(), | ||
| sender: currentUser.name, | ||
| content, | ||
| timestamp: new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit' }), |
There was a problem hiding this comment.
'2-digit' 을 설정하여 무조건 두자리수로 표현되게 나타낼 수 있군요!! 배워갑니다 ㅎㅎ
| const [currentUser, setCurrentUser] = useState(usersData.users[0]); | ||
|
|
||
| const savedMessages = JSON.parse(localStorage.getItem(getLocalStorageKey()) || '[]'); | ||
| const friendMessages = savedMessages.filter((msg: Message) => msg.sender === selectedFriend.name || msg.sender === currentUser.name); |
There was a problem hiding this comment.
여러 파일에서 filter 로직이 많이 보이는데 서로 다른 state를 필터하는 파일에서 공통적으로 가져다 쓸 수 있는 filter 메소드를 하나 생성하는 방법도 고민해보시면 더 효율적인 코드를 짜실 수 있을 것 같아요!!
| <Route path='/chatlist' element={<ChatList />} /> | ||
| <Route path='/friends' element={<FriendsListWithNavigation />} /> | ||
| <Route path='/chat/:friendId' element={<ChatRoom />} /> | ||
|
|
There was a problem hiding this comment.
/friends 페이지와 메인 페이지가 같은 페이지로 이동하니 통일해도 좋을 것 같습니다!
| {activeIcon === 'chat' ? <Chat_black /> : <Chat onClick={goToChatList}/>} | ||
| {activeIcon === 'safari' ? <Safari_black /> : <Safari onClick={goToGoogle} />} | ||
| {activeIcon === 'user' ? <User_black /> : <User onClick={goToUserProfile}/>} | ||
|
|
There was a problem hiding this comment.
<000_blank /> 항목이 특별한 역할을 하는 것이 아니라 위치를 두기 위함으라면 <Blank_box /> 이런 식으로 하나로 통일해도 좋을 것 같습니다!
| word-break: break-all; | ||
| white-space: pre-wrap; | ||
| `; | ||
|
|
There was a problem hiding this comment.
이런 식으로 텍스트를 길게 입력했을 때 서로의 채팅을 분간하기 어려울 수 있으니, max-width를 다르게 줘봐도 좋을 것 같습니다!
| {friend.name} | ||
| </FriendItem> | ||
| )} | ||
| </StyledLink> |
There was a problem hiding this comment.
filteredUsers에서 index === 0 일 때를 MyItem으로 설정해주니 검색했을 때도 첫번째 아이템은 사용자처럼 뜨는 것 같아요. 아예 filter를 돌리는 항목을 사용자를 제외한 친구 목록에만 돌린 뒤 사용자 항목은 따로 정의를 해줘도 좋을 것 같습니다!
| font-size: 12px; | ||
| line-height: 15px; | ||
| word-wrap: break-word; | ||
| `; |
There was a problem hiding this comment.
저도 수정해야할 사항인데, 채팅 목록에서 마지막 채팅 데이터 보여줄 때 크기가 넘칠 때를 대비해 text-overflow에 ellipsis 속성을 넣어봐도 좋을 것 같습니다!
| if (lastMessageDate.getMinutes() === newMessageDate.getMinutes()) { | ||
| lastSenderMessage.displayTime = false; | ||
| } | ||
| } |
There was a problem hiding this comment.
메세지에 시간 띄울 때 전 데이터와 비교해서 시간 같을 경우, 전송자에 따라 다르게 설정하는 경우 알아갑니다!!
| timestamp: lastMessage?.timestamp || '', | ||
| }; | ||
| }) | ||
| .filter(summary => summary.lastMessage); |
There was a problem hiding this comment.
저는 채팅목록 검색에서 필터링을 조금 돌아돌아 한 것 같아서 다른 분들의 방법이 궁금했는데, 이렇게도 할 수 있네요! 좋은 방법 배워갑니다👍👍
[4주차]
살아남자 생각하고 열심히 구현해 보았습니다. 반응형으로 만들고 싶었는데 열정이랑 시간이 모자라서 깔끔하게 포기했습니다.
또한 이제 협업해야하는데, commit을 날리는 것을 계속 까먹어서, 함께하는 팀원과 문제가 발생할 것 같다고 느꼈습니다. 이제는 commit을 강제로라도 생활화 하겠습니다! 모자라서 미안하다....!!!!!!!!!!!
[배포링크]
송지석 배포
[Designer QA]
디자인 적 문제를 제공하셔서, 메시지 버블 간의 간격과 자간, 그리고 전체 magin등만 새로 수정하였습니다.
제공되었던 디자인에서는, 기존에 진행되는 대화가 없을 때는, 가운데에 상대방의 프로필 사진과 이름, 프로필 보기 버튼을 만들게 되어있는데 제가 부탁해서 제거했습니다.
협업하면서 못하겠다고 땡깡만 부린거 같은데, 꽤나 재미있었습니다. 제가 이거 못하고 어려울 것 같다고 하시면 바꿔주셨습니다.
플로우 상의 의문이 들어서 의견 교환 후 수정했습니다.
[정리]
SPA & Routing
single page application이여서 , react router를 사용하여 한 페이지로 부터 필요한 컴포넌트의 렌더링을 통하여 다른 페이지로 가는 것으로 생각했습니다.
상태관리
recoil,redux,zustand 등에 대해서 더 깊게 배워야 할 것 같다고 생각합니다. 전역으로 상태 관리가 필요한 것이 뭐가 있을까 고민만 하지, 막상 사용처를 떠올리기가 쉽지 않더라구요. 저는 필요없다고 생각하고 따로 하진 않았는데, 코드 상에서는 더 효과적으로 관리가 가능한 경우가 존재할 것이라고 생각합니다.