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주차] 김현민 미션 제출합니다. #14

Open
wants to merge 153 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
153 commits
Select commit Hold shift + click to select a range
928ff0e
Feat:초기 세팅 완료
wokbjso Sep 26, 2023
d29d365
Feat:iPhone 레이아웃 생성
wokbjso Sep 26, 2023
ee05f87
Feat:Status Bar 생성
wokbjso Sep 26, 2023
e136536
Feat:Color 및 Typeface theme 파일에 정리
wokbjso Sep 26, 2023
3e32673
Feat:Home Indicator 생성
wokbjso Sep 26, 2023
d11f263
Feat:페이지 헤더 컴포넌트 생성
wokbjso Sep 26, 2023
c3dd42d
Feat:친구 목록 페이지 라우팅 생성
wokbjso Sep 26, 2023
766182f
Feat:내 프로필 페이지 라우팅 생성
wokbjso Sep 26, 2023
926d33e
Feat:페이지 navigate 훅으로 처리
wokbjso Sep 27, 2023
4aecf58
Feat:Divider 컴포넌트 생성
wokbjso Sep 27, 2023
2110b23
Feat:navigate 훅 수정
wokbjso Sep 27, 2023
7918977
Feat:채팅 목록 subHeader 생성
wokbjso Sep 27, 2023
0db5bb9
Feat:채팅 목록 subHeader 에 divider 추가
wokbjso Sep 27, 2023
dba98c5
Feat:채팅 목록 페이지 완성
wokbjso Sep 27, 2023
03e9811
Feat:디폴트 채팅 창 구현
wokbjso Sep 27, 2023
6700319
Feat:Input 입력 틀 생성
wokbjso Sep 28, 2023
79e1684
Feat:로컬스토리지에 채팅방 당 데이터 저장 & 더블클릭 시 좋아요 버튼 활성화
wokbjso Sep 28, 2023
b443984
Feat:채팅 입력 시 스크롤 맨 아래로 이동하는 훅 생성
wokbjso Sep 28, 2023
94fb084
Feat:엔터 키로도 텍스트 입력되도록 추가
wokbjso Sep 29, 2023
d34fbd6
Feat:채팅시간 현재 시간에 맞게 출력
wokbjso Sep 29, 2023
38ad7bd
Fefactor:엔터 입력 시 받는 :event 키값을 Enter 문자열과 비교
wokbjso Sep 29, 2023
754dfb5
Refactor:디폴트 채팅 데이터 map 으로 렌더링
wokbjso Sep 29, 2023
1c5db6f
Fix:첫 채팅 더블클릭시 좋아요 표시 안뜨는 현상 수정
wokbjso Sep 29, 2023
85f7fa9
Fix: 채팅 더블클릭하여 반응 추가시에도 스크롤 되는 현상 수정
wokbjso Sep 29, 2023
be4ab80
Design:유저 채팅 시 텍스트가 버블 오른쪽에 붙게 수정정
wokbjso Sep 29, 2023
02f6ba0
Feat:trim 으로 불필요한 공백 제거
wokbjso Sep 29, 2023
5402650
Fix:채팅 입력 안해도 빈 text로 채팅 추가되는 현상 수정
wokbjso Sep 29, 2023
6fec9ea
Refactor: 채팅 방 더미터 함수로 가져오기
wokbjso Sep 29, 2023
363d6a3
Feat:페이지 헤더 클릭 시 유저 변경 기능 추가
wokbjso Sep 29, 2023
3b3629a
Feat:채팅목록에서 개인으로 이동하면 리스트 안뜨도록 설정
wokbjso Sep 29, 2023
6222a4f
Fix:채팅 입력 완료하면 전송 버튼 활성화로 유지되는 버그 수정
wokbjso Sep 29, 2023
8fca7b4
Refactor:인풋 입력때마다 채팅 내용 re-rendering 방지
wokbjso Sep 29, 2023
8519713
Fix: 채팅 룸 사용자 변경 헤더 텍스트 클릭시에만 일어나도록 수정
wokbjso Sep 29, 2023
a03baf8
Feat:정의된 페이지 라우트 이외의 라우트 접근 시 홈 화면으로 Navigate
wokbjso Sep 29, 2023
a6e15bb
Feat:Favicon 및 Title 수정
wokbjso Sep 29, 2023
576db49
Design:채팅 넘어갈 시 스크롤 바 안보이게
wokbjso Sep 29, 2023
8ca814a
Design: 헤더 클릭 시 채팅 주체 변경 디자인 수정
wokbjso Sep 29, 2023
ca17858
Fix:채팅 룸에서 헤더 텍스트 누를 시에만 주체 변경
wokbjso Sep 29, 2023
af4a50b
Fix:공백 입력해도 채팅이 입력되는 현상 수정
wokbjso Sep 30, 2023
f408478
Docs:Readme.md 파일 변경
wokbjso Oct 4, 2023
e3e500b
Fix:QA 전체 -> Pretendard cdn 재설정
wokbjso Oct 4, 2023
9aef723
Fix:QA 전체 -> Pretendard cdn 재수정
wokbjso Oct 4, 2023
74e325c
Design:QA 1-a. 채팅 목록 _주요 채팅 및 별 아이콘 수정
wokbjso Oct 4, 2023
8e629ad
Design:QA 1-b. 채팅방 제목 - 수정
wokbjso Oct 5, 2023
d0efd80
Design:QA 1-c. 채팅목록_채팅 내용 글자 크기 수정
wokbjso Oct 5, 2023
e2a9958
Design:QA 2-a. 채팅방__채팅방 제목 글자 크기 수정
wokbjso Oct 5, 2023
c1b0443
Design:QA 2-b. 채팅방_파일첨부 글자 크기 수정
wokbjso Oct 5, 2023
3fb5431
Design:QA 2-c. 채팅방_말풍선 디자인 수정
wokbjso Oct 5, 2023
e05c972
Design:QA 2-c. 채팅방_말풍선 디자인 수정
wokbjso Oct 5, 2023
b2f66ef
Design:QA 2-d. 채팅방_채팅 입력 디자인 수정
wokbjso Oct 5, 2023
158aca6
Feat:프로필 페이지 프로필 정보 레이아웃 생성
wokbjso Oct 6, 2023
3ce6e24
Design:프로필 메인 레이아웃 border-radius 지정
wokbjso Oct 6, 2023
67a8890
Feat:프로필 페이지 바로가기 레이아웃 생성
wokbjso Oct 7, 2023
7d9d133
Feat:친구 목록 페이지 검색 헤더 레이아웃 생성
wokbjso Oct 7, 2023
9efc64c
Feat:친구 목록 파트 분리 헤더 레이아웃 생성
wokbjso Oct 7, 2023
26df787
Feat:친구 목록 페이지 친구 정보 레이아웃 컴포넌트 생tjd
wokbjso Oct 8, 2023
091b724
Feat:친구목록 디자이너 띄우기
wokbjso Oct 8, 2023
4193bf9
Feat:친구 목록 페이지 디자이너 정보 추가
wokbjso Oct 9, 2023
c0424ab
Feat:친구 목록 페이지 Divider 화면에 구현
wokbjso Oct 9, 2023
cf60130
Feat:친구 목록 페이지 개발자 목록 생성
wokbjso Oct 9, 2023
3a30b32
Design:채팅 목록 페이지 주요채팅 텍스트 컨테이너 margin 수정
wokbjso Oct 9, 2023
f3a036c
Design:채팅 목록 페이지 devider 색 수정
wokbjso Oct 9, 2023
055dda1
Design:백 버튼과 채팅 제목 사이 간격 수정
wokbjso Oct 9, 2023
917466e
Design:채팅 버블 텍스트 font-weight 수정
wokbjso Oct 9, 2023
9160340
Feat:채팅 버블 최대 width 설정
wokbjso Oct 9, 2023
684e353
Design:말풍선 삼각형 border-radius 적용
wokbjso Oct 9, 2023
934726c
Design:채팅 버블 시간 텍스트 디자인 수정
wokbjso Oct 9, 2023
e0d5bc4
Design:채팅 목록 리스트 사진과 텍스트 간격 수정
wokbjso Oct 9, 2023
2bb140d
Design:페이지 서브헤더 제목 text 색 수정
wokbjso Oct 9, 2023
508f870
Feat:채팅 목록 페이지 채팅 목록 레이아웃 margin 수정
wokbjso Oct 9, 2023
2dfa82b
Feat:검색 시 데이터 filter 하는 함수 제네릭으로 선언
wokbjso Oct 11, 2023
c7d5ce4
Feat:검색 함수 search text 가 빈 문자열이면 listData를 그대로 반환하도록 수정
wokbjso Oct 11, 2023
6d98e41
Feat:검색 창 입력때마다 해당되는 친구 리스트만 화면에 뜨도록 처리
wokbjso Oct 11, 2023
4e71015
Refactor:검색된 리스트 변수로 선언하여 사용
wokbjso Oct 11, 2023
31a6412
Feat:성능 저하 방지를 위한 debounce 처리
wokbjso Oct 11, 2023
f8b7d01
Feat:친구 목록 페이지 검색바 검색 아이콘 클릭 여부에 따라 화면에 보이도록 수정
wokbjso Oct 11, 2023
074e362
Feat:채팅 목록 페이지 검색바 검색 아이콘 클릭 여부에 따라 화면에 보이도록 수정
wokbjso Oct 11, 2023
aa1eecb
Feat:채팅 목록 페이지 검색바에 입력된 텍스트에 맞는 리스트만 화면에 보여지게 구현
wokbjso Oct 11, 2023
0e7ddbd
Design:검색 창 인풋 글자 크기 수정
wokbjso Oct 11, 2023
627456b
Design:친구 목록 페이지 칩 버튼 텍스트 사이즈 수정
wokbjso Oct 11, 2023
044919a
Design:친구 목록 페이지 Divider 색깔 수정
wokbjso Oct 11, 2023
69b39a1
Design:채팅 버블 텍스트 font-weight 수정
wokbjso Oct 11, 2023
05836e7
Design:채팅 버블 반응 및 시간 컨테이너 height 수정
wokbjso Oct 11, 2023
eef22dd
Design:채팅방 입력 컨테이너 위에 Divider 추가
wokbjso Oct 11, 2023
56b05d0
Design:채팅 입력 폰트 사이즈 채팅 버블 폰트 사이즈와 통일
wokbjso Oct 11, 2023
1a50468
Design:프로필 칩 버튼 디자인 수정
wokbjso Oct 11, 2023
d746d1a
Design:프로필 페이지 메일 아이콘 교체
wokbjso Oct 11, 2023
7d21724
Design: 프로필 페이지 링크 아이콘과 텍스트 사이 간격 수정
wokbjso Oct 11, 2023
168a8cb
Feat:프로필 페이지 바로가기 텍스트 디자인 수정
wokbjso Oct 11, 2023
3a0035d
Refactor:navigate 커스텀 훅 선언 취소
wokbjso Oct 11, 2023
7998dd9
Feat:검색 시 공백 입력 고려
wokbjso Oct 11, 2023
523596f
Refactor:서치바 보여주는 함수 처리 onClick에 바로 선언
wokbjso Oct 11, 2023
62fef4e
Design:채팅목록 페이지 Divider 색 수정
wokbjso Oct 11, 2023
20eff9d
Design: 채팅 리스트 페이지 Divider 에 margin 설정
wokbjso Oct 12, 2023
a66eb4e
Design:친구 정보 리스트 메세지 텍스트 크기 수정
wokbjso Oct 12, 2023
c6609d5
Design: 프로필 페이지 헤더 색 수정
wokbjso Oct 12, 2023
7c6ca31
프로필 페이지 route 에서 status bar 색 변경
wokbjso Oct 12, 2023
a17fcaa
Design:채팅 리스트 검색 시 sub chat만 있을 때 margin-bottom 추가
wokbjso Oct 12, 2023
fa6bdf6
Design:친구 목록 페이지에서 해당 사항 없는 헤더 UI 에서 안보이게 수정
wokbjso Oct 12, 2023
dc7fcea
Design:프로필 사진 배경이 흰색일때도 border 보이도록 수정
wokbjso Oct 12, 2023
341611d
Design:채팅 좋아여 버튼 디자인 수정
wokbjso Oct 12, 2023
8b62c1d
Feat:친구 목록 페이지에서 이름 누르면 해당 친구의 톡방으로 들어가는 flow 구현
wokbjso Oct 12, 2023
94fbc60
Chore:채팅 목록 리스트 클릭시 1:1 대화에서 단톡방 느낌으로 수정
wokbjso Oct 13, 2023
5e5ce05
Feat:친구 목록 페이지에서 단톡 클릭시 해당 데이터와 연동되어 화면에 띄워지게 구현
wokbjso Oct 13, 2023
c0f4a80
Refactor:채팅 룸 디폴트 데이터 초기에 chatData에 포함되어 렌더링되게 수정
wokbjso Oct 13, 2023
2ad67fa
Chore:친구 목록 페이지 프로필 사진 수정
wokbjso Oct 13, 2023
7477119
Feat:친구 목록 페이지에서 프로필을 클릭해도 해당 친구의 채팅방으로 이동하도록 수정
wokbjso Oct 13, 2023
90c479c
Refactor:디폴트 채팅 데이터 props 정의 import 하여 사용
wokbjso Oct 13, 2023
7e83b81
Refactor:채팅 wrapper 에서 bubble 로 props 넘길 때 Partial 유틸리티 타입 사용
wokbjso Oct 13, 2023
48c664f
Refactor:버튼 컴포넌트 타입 유틸리티 타입으로 재정의
wokbjso Oct 13, 2023
61e7c5b
Design:채팅 짧은 것을 고려하여 좋아요가 생기면 텍스트 버블이 같이 커지는 현상 방지
wokbjso Oct 14, 2023
52cb658
Design:채팅 버블 삼각형 크기 수정
wokbjso Oct 15, 2023
2c011d4
Feat:단체 톡방 클릭 시 인원 수 헤더에 뜨도록 수정
wokbjso Oct 15, 2023
4dca403
Fix:친구 채팅 리스트 색깔 회색으로 나오는 버그 수정
wokbjso Oct 15, 2023
d9c64cf
Design:채팅 레이아웃 수정
wokbjso Oct 15, 2023
1758146
Feat:채팅 보낼 때 같은 시간에 보낸 버블 텍스트에는 시간 표시 안하게 기능 추가
wokbjso Oct 16, 2023
2de9d69
Fix:영어 채팅에도 max-width 적용 되도록 수정
wokbjso Oct 16, 2023
ece3136
Refactor:status bar 시간 외부 훅에서 가져오도록 리팩토링
wokbjso Oct 16, 2023
913bd0f
ReName:홈 채팅 리스트 파일 이름 변경
wokbjso Oct 16, 2023
3dfe571
Refactor:프로필 컴포넌트에서 styled-components 태그에 props 유틸리티 타입으로 설정
wokbjso Oct 16, 2023
9f2ff05
Refactor:GroupChatDatabox의 props 전달 시 유틸리티 타입 Partial에서 Omit으로 변경
wokbjso Oct 16, 2023
8a4051b
Refactor:채팅 데이터 props 를 따로 관리
wokbjso Oct 16, 2023
04f17e8
Refactor:버튼 props 외부에서 따로 관리
wokbjso Oct 16, 2023
56a5be5
Refactor:버튼 컴포넌트들 props 유틸리티 타입 Partial 로 직관적이게 변경
wokbjso Oct 16, 2023
7546ca0
Refactor: 채팅 wrapper 에서 bubble로 props 넘길 때 유틸리티 타입 Omit으로 변경
wokbjso Oct 16, 2023
6af690a
Renaame:props 폴더 commonProps 로 rename
wokbjso Oct 17, 2023
b328d0b
Refactor:폴더&파일 구조 및 이름 재정비
wokbjso Oct 30, 2023
eb774c9
Feat:craco 로 절대경로 설정
wokbjso Oct 31, 2023
332d904
Feat:폴더 별 index.ts 파일 사용하여 파일별 import 줄이도록 작성
wokbjso Oct 31, 2023
79996e3
Feat:페이지 폴더 index.ts 파일들로 정리
wokbjso Oct 31, 2023
cae35ad
Refactor:Chip Button 컴포넌트로 재정의
wokbjso Oct 31, 2023
4a8b14c
Refactor:Chip Button 컴포넌트 props에 fontStyles 제거
wokbjso Oct 31, 2023
0175971
Refactor:프로필 링크 버튼 컴포넌트화
wokbjso Oct 31, 2023
593c7fc
Feat:링크 버튼 클릭시 이동되게 설정
wokbjso Oct 31, 2023
92f9e4b
Refactor:서치바 wrapper 서치바 컴포넌트에 통합
wokbjso Oct 31, 2023
1f7b49a
Refactor:그룹 채팅 리스트 type props로 주요채팅 구분
wokbjso Nov 1, 2023
2602394
Refactor:검색된 그룹채팅 type 에 따라 list를 반환하는 로직 함수로 작성
wokbjso Nov 1, 2023
78f0e62
Refactor:불필요한 styled 제거
wokbjso Nov 1, 2023
3a32e7e
Refactor:친구 리스트 통합
wokbjso Nov 1, 2023
f41a01f
Refactor:친구 리스트 filter 결과 const 로 선언하여 사용
wokbjso Nov 1, 2023
3f5f02d
Refactor:채팅 리스트 filter 결과 const 로 선언하여 사용
wokbjso Nov 1, 2023
177ed64
Refactor:filtering 함수 제네릭 함수로 선언하여 관리
wokbjso Nov 1, 2023
7e5f0db
Feat:친구들 프로필을 누르면 각 유저의 정보를 보여주도록 로직 수정
wokbjso Nov 1, 2023
0e5f036
Refactor:채팅 내용 state 파일화
wokbjso Nov 2, 2023
46dd6e1
Remove:불필요한 시간 저장 로직 삭제
wokbjso Nov 2, 2023
fac5c5c
Rename:status bar 시간 업데이트 해주는 파일 이름 수정
wokbjso Nov 2, 2023
07a0312
Refactor:헤더 클릭하여 유저 변경 로직 customHook으로 관리
wokbjso Nov 2, 2023
238490c
Refactor:채팅 입력 시 일어나는 로직 custom hook으로 정리
wokbjso Nov 2, 2023
edc4d61
Refactor:전송 버튼 클릭 시 로직 custom hook으로 관리
wokbjso Nov 2, 2023
aafb7cb
Refactor:친구 리스트 정보 state로 따로 관리
wokbjso Nov 2, 2023
5e7749e
Feat:친구들 프로필 클릭 시 다른 정보 보여지도록 설정
wokbjso Nov 2, 2023
48fab1d
Feat:페이지에 들어갈 때 input이 focus되도록 설정
wokbjso Nov 3, 2023
0402c59
Rename:친구 정보 state props 이름 변경
wokbjso Nov 4, 2023
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
Refactor:서치바 wrapper 서치바 컴포넌트에 통합
wokbjso committed Oct 31, 2023
commit 92f9e4b1c5ad72f37ec42aff111a499a6a6273c9
27 changes: 18 additions & 9 deletions src/common/components/ui/searchbar/SearchBar.tsx
Original file line number Diff line number Diff line change
@@ -15,18 +15,27 @@ export function SearchBar({ search }: searchProps) {
500
);
return (
<SearchContainer>
<span>
<Search />
</span>
<InputWrapper
placeholder="이름을 검색해보세요."
onChange={searchBarChanged}
/>
</SearchContainer>
<SearchBarWrapper>
{" "}
<SearchContainer>
<span>
<Search />
</span>
<InputWrapper
placeholder="이름을 검색해보세요."
onChange={searchBarChanged}
/>
</SearchContainer>
</SearchBarWrapper>
);
}

const SearchBarWrapper = styled.div`
display: flex;
justify-content: center;
margin-bottom: 1.2rem;
`;

const SearchContainer = styled.div`
position: relative;
span {
5 changes: 1 addition & 4 deletions src/pages/chat/ChatList.tsx
Original file line number Diff line number Diff line change
@@ -15,7 +15,6 @@ import {
defaultMainChatList,
defaultSubChatList,
} from "@features/chat";
import { SearchBarWrapper } from "../friend/FriendsList";

const SHOW_LIST_STATE = ["그룹", "개인"];

@@ -49,9 +48,7 @@ export function ChatList() {
}
/>
{showSearchBar ? (
<SearchBarWrapper>
<SearchBar search={[searchText, setSearchText]} />
</SearchBarWrapper>
<SearchBar search={[searchText, setSearchText]} />
) : null}
<SubHeader
$onlySubChat={
10 changes: 1 addition & 9 deletions src/pages/friend/FriendsList.tsx
Original file line number Diff line number Diff line change
@@ -39,9 +39,7 @@ export function FriendsList() {
rightIcon2={<AddFriend style={{ marginLeft: "1.2rem" }} />}
/>
{showSearchBar ? (
<SearchBarWrapper>
<SearchBar search={[searchText, setSearchText]} />
</SearchBarWrapper>
<SearchBar search={[searchText, setSearchText]} />
) : null}
<Divider state={DIVIDER_TYPE.LONGTHICK} />
<FriendsListContainer>
@@ -94,12 +92,6 @@ export function FriendsList() {
);
}

export const SearchBarWrapper = styled.div`
display: flex;
justify-content: center;
margin-bottom: 1.2rem;
`;

const FriendsListContainer = styled.div`
padding: 0 2rem;
`;