Skip to content

[5주차] 이지수 미션 제출합니다. #16

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.

Sign up for GitHub

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

Open
wants to merge 35 commits into
base: main
Choose a base branch
from
Open

[5주차] 이지수 미션 제출합니다. #16

Changes from 1 commit
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
ca8dc4c
feat: 이미지 및 json파일 추가
jissssu Sep 9, 2024
38c33ee
feat: 컴포넌트 분리
jissssu Sep 9, 2024
388f9bf
style: video 추가 및 레이아웃 수정
jissssu Sep 10, 2024
4774d8b
docs: json 파일 데이터 업데이트
jissssu Sep 10, 2024
f875985
feat: 메인 채팅 메세지 표시 및 입력 기능 추가
jissssu Sep 10, 2024
628fb2a
feat: 메세지 전송 기능 및 자동 포커스 추가
jissssu Sep 10, 2024
34b3837
feat: 메세 화면 표시 및 자동 스크롤 기능 추가
jissssu Sep 10, 2024
ce7411f
feat: 키보드 이벤트 추가
jissssu Sep 10, 2024
b229523
fix: 스크롤 제어 함수로 분리
jissssu Sep 10, 2024
71c2e79
fix: 메세지 상태 업데이트
jissssu Sep 10, 2024
7fc68f2
fix: json파일 수정
jissssu Sep 12, 2024
6e93663
fix: 이미지 경로 수정
jissssu Sep 12, 2024
cdb4ba8
feat: constants.js 파일 추가
jissssu Sep 18, 2024
77b4207
refactor: ChatApp.jsx에서 상태 초기화 및 상수 사용 개선
jissssu Sep 18, 2024
6bd593e
refactor: ChatInput.jsx에서 폼 태그 사용 및 autofocus 적용
jissssu Sep 18, 2024
11facf4
refactor: ChatMessages.jsx에서 스크롤 이동 방식 개선 및 상수 사용
jissssu Sep 18, 2024
dfe20a0
refactor: 스타일 코드 최하단 적용
jissssu Sep 18, 2024
5cc7f96
chore:TypeScript 설정 추가
jissssu Sep 18, 2024
d89a988
fix: json파일 id 겹치는 문제 수정
jissssu Sep 18, 2024
6aa470a
refactor: .jsx 파일을 .tsx로 변환
jissssu Sep 18, 2024
f42b0b0
feat: jsx에서 tsx 파일 변환
jissssu Sep 18, 2024
1a5295c
feat: 코드 리팩토링 적용 후 tsx로 변환
jissssu Sep 18, 2024
7f7b278
chore: recoil 및 router 설치
jissssu Oct 9, 2024
e214849
feat: user 및 footer에 들어갈 이미지 추가
jissssu Oct 9, 2024
fb7b5fa
feat: 라우터 경로 추가
jissssu Oct 9, 2024
6ca8ffe
feat: userid 추가 및 chat.json 메세지 내용 변경
jissssu Oct 9, 2024
157dcfe
feat: 메세지 및 유저 관련 recoil 추가
jissssu Oct 9, 2024
14c309b
feat: 채팅 항목 창 추가
jissssu Oct 9, 2024
82ca742
feat: navigate 추가
jissssu Oct 9, 2024
c5170cc
feat: recoil 적용 및 navigate 설정
jissssu Oct 9, 2024
1137555
chore: router 설치 및 업데이트
jissssu Oct 9, 2024
c0a4f72
feat: autofocus 속성 추가
jissssu Oct 9, 2024
88601dd
fix: Header 컴포넌트 레이아웃 수정
jissssu Oct 9, 2024
a027bde
feat: recoil 적용
jissssu Oct 10, 2024
6db242c
feat: 메세지 전송 핸들러추가
jissssu Oct 10, 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
6 changes: 2 additions & 4 deletions src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,8 @@ const Header = () => {
return (
<HeaderContainer>
<BackButton onClick={handleBackClick}>뒤로</BackButton>
Copy link

Choose a reason for hiding this comment

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

useNavigate사용해서 -1하면 뒤로가기 기능이 됩니다. 브라우저에서 히스토리에 스택을 쌓아놓기 때문에 가능하다고 하더라구요!

<Title>
🔔
<Title>🔔</Title>
<Video>🎬</Video>
</Title>
</HeaderContainer>
);
};
Expand All @@ -33,7 +31,7 @@ const Title = styled.h2`
font-size: 18px;
color: #333;
display: flex;
align-items: center;
margin-left: 250px;
Copy link
Member

Choose a reason for hiding this comment

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

margin-left: 250px;화면 크기에 따라 레이아웃이 깨질 수 있으니 이 부분에서 justify-content:center;로 수정하면 더 유연한 레이아웃이 될 거 같아요 ~

`;

const Video = styled.span`
Expand Down