-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[4주차] 이지인 미션 제출합니다. #20
Open
jinnyleeis
wants to merge
72
commits into
CEOS-Developers:main
Choose a base branch
from
jinnyleeis:main
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+1,532
−133
Open
Changes from 1 commit
Commits
Show all changes
72 commits
Select commit
Hold shift + click to select a range
9103cba
npm install
jinnyleeis d4ade28
feat: 컴포넌트 구조 설정
jinnyleeis 3611225
feat: ChatBody (messages, currentUser)
jinnyleeis aba84cc
feat: ChatHead
jinnyleeis cd156af
feat:ChatBottom (input jsx 추가)
jinnyleeis fffb3c4
feat : ChatBottom - 채팅 Input 상태관리 useState 훅 추가
jinnyleeis c2cc99a
feat: ChatBottom - handleKeyPress() 추가, onKeyPress 이벤트에 연결
jinnyleeis 69526da
feat: ChattingRoom - 현재 사용자 상태 관리, 현재 메시지 기록 상태 관리 훅
jinnyleeis a4f6e30
feat: 이미지 경로 문제 해결, ChattingRoom - sendMessage, toggleUser 메인 기능 구현
jinnyleeis 5e0ee0a
feat: time 객체 생성해서 채팅시간 00:00 형식으로 표시되도록 변경
jinnyleeis f6c9db3
feat:ChattingRoom-useRef로 페이지 하단으로 스크롤 기능 구현
jinnyleeis 407bfef
feat:ChattingRoom- 더미 데이터 로드 위해, useEffect훅 사용 로컬 스토리지에서 메시지 관리
jinnyleeis e42d1ee
feat:로컬 스토리지에서 초기 메시지 로드 useEffect->useState로 변경해, 기존 더미 데이터 누적되도록 수정
jinnyleeis 42fcfa9
style: styled-components 적용
jinnyleeis b64bbc1
fix:ChattingRoom-sendMessage() 수정 -> 시간,날짜 Nan 표시 문제 해결
jinnyleeis 220266a
feat: sendButton 상태 관리 추가
jinnyleeis a437490
style:상대방일때만 프로필 이미지 보이도록 조정, 각종 스타일 fixing중..
jinnyleeis 995e3e5
.
jinnyleeis ea208c0
style: 피그마 디자인 구현(픽셀)
jinnyleeis 3e9b399
feat:ChatBody.tsx-displayMinuteSeparator 구현
jinnyleeis 5ac25d5
setting:jason-server
jinnyleeis 8b2318f
feat:초기 상태 dummy.json에서 불러오는 것으로 변경
jinnyleeis 881f972
feat README.md - 배포 링크 업로드
jinnyleeis 92b8fce
feat: userImage도 ChatBodyProps로 전달하여, currentUser, body 프로필에도 반영되도록 수정
jinnyleeis db15923
feat:chatbody props로 currentUser가 아닌, otherUser profile 전달하도록 수정
jinnyleeis 6536e10
feat README.md 수정
jinnyleeis 0f57866
feat README.md 수정
jinnyleeis 25d6a62
feat : 확장을 위한 구조 설정, 라우팅
jinnyleeis 140e98f
feat : chattinglist 페이지
jinnyleeis bcda057
feat : 프로필 페이지 뼈대
jinnyleeis b483af9
feat : 유저 리스트 페이지 뼈대
jinnyleeis ab168ec
feat : 채팅 룸 페이지 일부 구현
jinnyleeis 3043867
feat : 페이지 구조 설정
jinnyleeis 5ce84f6
feat : 기존 채팅 룸 기능 추가
jinnyleeis 88097a9
feat : useLocation 훅을 통한 navbar 조건부 렌더링 추가
jinnyleeis 1d3b67a
feat : 채팅방에서 -> 대화 페이지 가는 기능 만들기
jinnyleeis 335d2d8
feat : 채팅방에서 -> 대화 내역 뒤로가기 기능 추가
jinnyleeis 7476b1e
feat : 상단 navbar
jinnyleeis 2f5e504
.
jinnyleeis 51417c9
feat : 대화, 친구목록 둘 다 동일한 userliststate atom을 참조하도록 변경
jinnyleeis 6847c1a
feat : 로컬 스토리지에 대화상대에 따라 메시지 저장, 불러오기
jinnyleeis 1895dee
feat : 상단바 페이지별 조건부 디자인
jinnyleeis 11bb235
상단바 조건부 디자인 styled-component 적용
jinnyleeis 97e8a6a
style. : navbar, page 레이아웃 분리
jinnyleeis 3b8a210
feat: chathead는 app에서 관리되도록 변경
jinnyleeis bd526d0
feat : 하단 smooth scroll 기능 추가
jinnyleeis 29e2420
fix : 페이지 대소문자 문제 해결
jinnyleeis 8e74bb8
fix : config.json
jinnyleeis aa4c099
feat : 메시지 양측 전송 문제 해결중 1
jinnyleeis e01d095
feat : current user 메시지 우측에 나타나게
jinnyleeis e7c7cbe
feat : 토글 기능, 뒤로가기 기능 분리
jinnyleeis b96abf5
feat : 채팅룸 유저 토글기능 구현
jinnyleeis 5ceb623
feat : 프로필 이미지 추가
jinnyleeis d5b2ea0
style :chatbottom 스타일
jinnyleeis 2c69961
feat : navbar 위치 변경
jinnyleeis 0576b7a
style : navbar head
jinnyleeis 9ebeb70
style : userist page
jinnyleeis 0afbe71
style : chatbottom mask
jinnyleeis a7901bb
style : 사용자 추가
jinnyleeis 285d80a
,
jinnyleeis 1dd3fbb
,
jinnyleeis fc11fe4
.
jinnyleeis 1efb928
.
jinnyleeis 176a02c
Revert "."
jinnyleeis 7cf6c18
Revert "."
jinnyleeis 231fa5e
.
jinnyleeis 28f62ca
Update Navbar.tsx
jinnyleeis e007ccc
Update Navbar.tsx
jinnyleeis 81f5176
Update Navbar.tsx
jinnyleeis 7798ebf
Update Navbar.tsx
jinnyleeis 47ef274
Update Navbar.tsx
jinnyleeis 344372b
fix. : 의존성 배열
jinnyleeis File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
feat : 하단 smooth scroll 기능 추가
commit bd526d02f8daff3405e0987612e2c8f8852d6c91
There are no files selected for viewing
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
import React, { useEffect, useState } from 'react'; | ||
import React, { useEffect, useId, useState, useRef } from 'react'; | ||
import { useParams } from 'react-router-dom'; | ||
import { useRecoilValue } from 'recoil'; | ||
import { userListState } from '../state/userState'; | ||
|
@@ -17,9 +17,13 @@ interface Message { | |
|
||
const ChattingRoom = () => { | ||
const { userId } = useParams<{ userId: string }>(); | ||
console.log(useId); | ||
|
||
const messagesStateValue = useRecoilValue(messagesState); | ||
const [messages, setMessages] = useState<Message[]>([]); | ||
|
||
const messagesEndRef = useRef<HTMLDivElement | null>(null); | ||
|
||
useEffect(() => { | ||
// 로컬 스토리지에서 이전 메시지 가져오기 | ||
const storedMessages = localStorage.getItem(`messages_${userId}`); | ||
|
@@ -29,8 +33,18 @@ const ChattingRoom = () => { | |
} | ||
}, [userId]); // userId가 변경될 때마다 이펙트 재실행 | ||
|
||
useEffect(() => { | ||
// 메시지가 추가될 때마다 스크롤을 하단으로 이동 | ||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. optional chaining 의 깔끔한 로직 좋습니다~ |
||
}, [messages]); | ||
|
||
// 메세지 목록 끝으로 스크롤 | ||
|
||
const userList = useRecoilValue(userListState); | ||
const currentUser = userList.find((user) => user.id === userId); | ||
const otherUser = userList.find((user) => user.id === userId); | ||
console.log(otherUser); | ||
const otherUserIndex = otherUser?.id; | ||
console.log(otherUserIndex); | ||
|
||
const sendMessage = (content: string, from: string, to: string) => { | ||
const newMessage: Message = { | ||
|
@@ -51,11 +65,15 @@ const ChattingRoom = () => { | |
|
||
return ( | ||
<> | ||
|
||
<ChatBody messages={messages} userImage={currentUser?.image ?? ''} currentUser={currentUser?.name ?? ''} /> | ||
<ChatBody | ||
messages={messages} | ||
userImage={otherUser?.image ?? ''} | ||
currentUser={otherUser?.name ?? ''} | ||
/> | ||
<div ref={messagesEndRef} /> | ||
<ChatBottom | ||
onSendMessage={(content) => | ||
sendMessage(content, currentUser?.name ?? '', userId ?? '') | ||
sendMessage(content, otherUser?.name ?? '', userId ?? '') | ||
} | ||
/> | ||
</> | ||
|
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
불필요한 콘솔 출력문은 삭제하는 것이 좋을 것 같아용