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주차] 이은비 미션 제출합니다 #22

Open
wants to merge 30 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
1b4d440
[chore] 공통 스타일 지정
silverain02 Sep 29, 2023
eb950ab
[chore] 초기세팅 typescript 맞춰 변경
silverain02 Sep 29, 2023
e0575dd
[feat] 채팅박스 컴포넌트
silverain02 Sep 29, 2023
20f7b02
[chore] icon 컴포넌트화
silverain02 Sep 29, 2023
e386d5f
[feat] input컴포넌트
silverain02 Sep 29, 2023
ae09e79
[feat] 입력값 처리 기능
silverain02 Sep 29, 2023
62802b9
[feat] localStorage에 chatData저장
silverain02 Sep 29, 2023
3864efe
[feat] input클릭 시 하단 스크롤 기능
silverain02 Sep 29, 2023
0e7ca9d
[chore] css일부 마진조정
silverain02 Sep 29, 2023
673e270
[chore] package 의존설정 변화
silverain02 Sep 29, 2023
472337b
[chore] 대화 시 사용자 전환 CSS 메시지 박스 변화
silverain02 Sep 29, 2023
134a720
[chore] 같은 시간 보여주지 않기
silverain02 Sep 29, 2023
50f6eae
[feat] 프로필 추가
silverain02 Sep 29, 2023
042a35b
[chore] redux 설치
silverain02 Nov 2, 2023
490b640
[chore]react router 설치
silverain02 Nov 2, 2023
4b8201d
[feat] 페이지 라우팅 적용
silverain02 Nov 2, 2023
bd359ad
[feat] footer구현
silverain02 Nov 3, 2023
ce23bd6
[chore] userData 세팅
silverain02 Nov 3, 2023
0f008bc
[chore] profile 스타일링
silverain02 Nov 3, 2023
add8959
[feat]친구리스트 배열 매핑
silverain02 Nov 3, 2023
bf9286c
[chore] 친구리스트 스타일링
silverain02 Nov 3, 2023
e03d921
[feat]myPage완성
silverain02 Nov 3, 2023
204a243
[feat]chatList mock data불러오기
silverain02 Nov 3, 2023
e1a59cb
[feat]chatList구현
silverain02 Nov 3, 2023
8201dc3
[feat]경로변경 후 userMock데이터 받아오기
silverain02 Nov 3, 2023
d821755
[feat]chatData연동
silverain02 Nov 3, 2023
f13b150
[feat]input기능 재건
silverain02 Nov 3, 2023
1a35cb6
[chore]mock data수정
silverain02 Nov 3, 2023
71f3f8b
[chore]말풍선 시간 조정
silverain02 Nov 3, 2023
567f19f
[chore] link색조정
silverain02 Nov 3, 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
[chore] profile 스타일링
silverain02 committed Nov 3, 2023
commit 0f008bc1c9158f094ae249d68b47de1b411550d3
1 change: 0 additions & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
@@ -35,7 +35,6 @@ const Wrapper = styled.div`
height: 100%;
display: flex;
justify-content: center;
background-color: ${theme.colors.g2};
`;

export default App;
34 changes: 29 additions & 5 deletions src/components/ProfileBox.tsx
Original file line number Diff line number Diff line change
@@ -13,15 +13,39 @@ const ProfileBox: React.FC<ProfileBoxProps> = ({ userName, comment }) => {
return (
<Wrapper>
<LeftWrapper>
<ProfileIcon />
{userName}
<ProfileSmallIcon />
<Name>{userName}</Name>
</LeftWrapper>

{comment}
<Comment>{comment}</Comment>
</Wrapper>
);
};

const LeftWrapper = styled.div``;
const Wrapper = styled.div``;
const Comment = styled.div`
font-style: ${theme.fonts.caption2};
color: ${theme.colors.g5};
`;
const Name = styled.div`
font-style: ${theme.fonts.body1};
`;
const LeftWrapper = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;

gap: 10px;
padding-top: 10px;
padding-bottom: 10px;
`;
const Wrapper = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: 10px;

border-bottom: 1px solid ${theme.colors.g2};
`;
export default ProfileBox;
18 changes: 10 additions & 8 deletions src/pages/FriendList.tsx
Original file line number Diff line number Diff line change
@@ -51,10 +51,14 @@ const FriendList = () => {
);
};

const FriendsWrapper = styled.div``;
const MyProfile = styled.div``;
const MyProfileWrapper = styled.div``;

const FriendsWrapper = styled.div`
width: 100%;
border-top: 2px solid ${theme.colors.g2};
`;

const IconList = styled.div`
display: flex;
gap: 1rem;
@@ -73,8 +77,10 @@ const MyHeader = styled.div`

background-color: white;
padding: 1rem;
padding-left: 2rem;
padding-right: 1rem;

margin-bottom: 1px solid ${theme.colors.g2};
border-bottom: 2px solid ${theme.colors.g2};
`;
const Wrapper = styled.div`
display: flex;
@@ -84,14 +90,10 @@ const Wrapper = styled.div`

height: 100%;
width: 100%;
padding: 1rem;
`;

const Body = styled.div`
height: 80%;
overflow-y: auto;
padding: 5px;

scroll-behavior: smooth;
height: 100%;
width: 100%;
`;
export default FriendList;