Skip to content
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
wants to merge 72 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
72 commits
Select commit Hold shift + click to select a range
9103cba
npm install
jinnyleeis Mar 28, 2024
d4ade28
feat: 컴포넌트 구조 설정
jinnyleeis Mar 28, 2024
3611225
feat: ChatBody (messages, currentUser)
jinnyleeis Mar 28, 2024
aba84cc
feat: ChatHead
jinnyleeis Mar 28, 2024
cd156af
feat:ChatBottom (input jsx 추가)
jinnyleeis Mar 28, 2024
fffb3c4
feat : ChatBottom - 채팅 Input 상태관리 useState 훅 추가
jinnyleeis Mar 28, 2024
c2cc99a
feat: ChatBottom - handleKeyPress() 추가, onKeyPress 이벤트에 연결
jinnyleeis Mar 28, 2024
69526da
feat: ChattingRoom - 현재 사용자 상태 관리, 현재 메시지 기록 상태 관리 훅
jinnyleeis Mar 28, 2024
a4f6e30
feat: 이미지 경로 문제 해결, ChattingRoom - sendMessage, toggleUser 메인 기능 구현
jinnyleeis Mar 28, 2024
5e0ee0a
feat: time 객체 생성해서 채팅시간 00:00 형식으로 표시되도록 변경
jinnyleeis Mar 28, 2024
f6c9db3
feat:ChattingRoom-useRef로 페이지 하단으로 스크롤 기능 구현
jinnyleeis Mar 28, 2024
407bfef
feat:ChattingRoom- 더미 데이터 로드 위해, useEffect훅 사용 로컬 스토리지에서 메시지 관리
jinnyleeis Mar 28, 2024
e42d1ee
feat:로컬 스토리지에서 초기 메시지 로드 useEffect->useState로 변경해, 기존 더미 데이터 누적되도록 수정
jinnyleeis Mar 28, 2024
42fcfa9
style: styled-components 적용
jinnyleeis Mar 28, 2024
b64bbc1
fix:ChattingRoom-sendMessage() 수정 -> 시간,날짜 Nan 표시 문제 해결
jinnyleeis Mar 28, 2024
220266a
feat: sendButton 상태 관리 추가
jinnyleeis Mar 28, 2024
a437490
style:상대방일때만 프로필 이미지 보이도록 조정, 각종 스타일 fixing중..
jinnyleeis Mar 28, 2024
995e3e5
.
jinnyleeis Mar 29, 2024
ea208c0
style: 피그마 디자인 구현(픽셀)
jinnyleeis Mar 29, 2024
3e9b399
feat:ChatBody.tsx-displayMinuteSeparator 구현
jinnyleeis Mar 29, 2024
5ac25d5
setting:jason-server
jinnyleeis Mar 29, 2024
8b2318f
feat:초기 상태 dummy.json에서 불러오는 것으로 변경
jinnyleeis Mar 29, 2024
881f972
feat README.md - 배포 링크 업로드
jinnyleeis Mar 29, 2024
92b8fce
feat: userImage도 ChatBodyProps로 전달하여, currentUser, body 프로필에도 반영되도록 수정
jinnyleeis Mar 29, 2024
db15923
feat:chatbody props로 currentUser가 아닌, otherUser profile 전달하도록 수정
jinnyleeis Mar 29, 2024
6536e10
feat README.md 수정
jinnyleeis Mar 29, 2024
0f57866
feat README.md 수정
jinnyleeis Mar 29, 2024
25d6a62
feat : 확장을 위한 구조 설정, 라우팅
jinnyleeis May 3, 2024
140e98f
feat : chattinglist 페이지
jinnyleeis May 3, 2024
bcda057
feat : 프로필 페이지 뼈대
jinnyleeis May 3, 2024
b483af9
feat : 유저 리스트 페이지 뼈대
jinnyleeis May 3, 2024
ab168ec
feat : 채팅 룸 페이지 일부 구현
jinnyleeis May 3, 2024
3043867
feat : 페이지 구조 설정
jinnyleeis May 3, 2024
5ce84f6
feat : 기존 채팅 룸 기능 추가
jinnyleeis May 3, 2024
88097a9
feat : useLocation 훅을 통한 navbar 조건부 렌더링 추가
jinnyleeis May 3, 2024
1d3b67a
feat : 채팅방에서 -> 대화 페이지 가는 기능 만들기
jinnyleeis May 3, 2024
335d2d8
feat : 채팅방에서 -> 대화 내역 뒤로가기 기능 추가
jinnyleeis May 3, 2024
7476b1e
feat : 상단 navbar
jinnyleeis May 3, 2024
2f5e504
.
jinnyleeis May 3, 2024
51417c9
feat : 대화, 친구목록 둘 다 동일한 userliststate atom을 참조하도록 변경
jinnyleeis May 4, 2024
6847c1a
feat : 로컬 스토리지에 대화상대에 따라 메시지 저장, 불러오기
jinnyleeis May 4, 2024
1895dee
feat : 상단바 페이지별 조건부 디자인
jinnyleeis May 4, 2024
11bb235
상단바 조건부 디자인 styled-component 적용
jinnyleeis May 4, 2024
97e8a6a
style. : navbar, page 레이아웃 분리
jinnyleeis May 4, 2024
3b8a210
feat: chathead는 app에서 관리되도록 변경
jinnyleeis May 4, 2024
bd526d0
feat : 하단 smooth scroll 기능 추가
jinnyleeis May 4, 2024
29e2420
fix : 페이지 대소문자 문제 해결
jinnyleeis May 5, 2024
8e74bb8
fix : config.json
jinnyleeis May 5, 2024
aa4c099
feat : 메시지 양측 전송 문제 해결중 1
jinnyleeis May 5, 2024
e01d095
feat : current user 메시지 우측에 나타나게
jinnyleeis May 5, 2024
e7c7cbe
feat : 토글 기능, 뒤로가기 기능 분리
jinnyleeis May 5, 2024
b96abf5
feat : 채팅룸 유저 토글기능 구현
jinnyleeis May 5, 2024
5ceb623
feat : 프로필 이미지 추가
jinnyleeis May 5, 2024
d5b2ea0
style :chatbottom 스타일
jinnyleeis May 5, 2024
2c69961
feat : navbar 위치 변경
jinnyleeis May 5, 2024
0576b7a
style : navbar head
jinnyleeis May 5, 2024
9ebeb70
style : userist page
jinnyleeis May 5, 2024
0afbe71
style : chatbottom mask
jinnyleeis May 5, 2024
a7901bb
style : 사용자 추가
jinnyleeis May 5, 2024
285d80a
,
jinnyleeis May 5, 2024
1dd3fbb
,
jinnyleeis May 5, 2024
fc11fe4
.
jinnyleeis May 5, 2024
1efb928
.
jinnyleeis May 5, 2024
176a02c
Revert "."
jinnyleeis May 5, 2024
7cf6c18
Revert "."
jinnyleeis May 5, 2024
231fa5e
.
jinnyleeis May 5, 2024
28f62ca
Update Navbar.tsx
jinnyleeis May 5, 2024
e007ccc
Update Navbar.tsx
jinnyleeis May 5, 2024
81f5176
Update Navbar.tsx
jinnyleeis May 5, 2024
7798ebf
Update Navbar.tsx
jinnyleeis May 5, 2024
47ef274
Update Navbar.tsx
jinnyleeis May 5, 2024
344372b
fix. : 의존성 배열
jinnyleeis May 5, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat : 하단 smooth scroll 기능 추가
jinnyleeis committed May 4, 2024
commit bd526d02f8daff3405e0987612e2c8f8852d6c91
28 changes: 23 additions & 5 deletions src/pages/ChattingRoom.tsx
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);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

불필요한 콘솔 출력문은 삭제하는 것이 좋을 것 같아용


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' });

Choose a reason for hiding this comment

The 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 ?? '')
}
/>
</>