chore: 헤더 프로필 우측에 화살표 추가

해당 영역을 클릭하라는 인터렉션을 위해 헤더 프로필 우측에 화살표를 추가했습니다.
connect-foundation · Dec 22, 2019 · 171c695 · 171c695
1 parent 977e886
commit 171c695
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/cocode/src/components/Common/UserProfile/avatar.jpeg b/cocode/src/components/Common/UserProfile/avatar.jpeg
diff --git a/cocode/src/components/Common/UserProfile/down.svg b/cocode/src/components/Common/UserProfile/down.svg
diff --git a/cocode/src/components/Common/UserProfile/index.js b/cocode/src/components/Common/UserProfile/index.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import * as Styled from './style';
+
 import DropDownMenu from 'components/Common/DropDownMenu';
+import down from './down.svg';
 
 function UserProfile({ username, avatar, menuItems }) {
 	return (
 		<Styled.UserProfile>
 			<Styled.UserName>{username}</Styled.UserName>
+			<Styled.UserAvatar src={avatar} alt="프로필" />
 			<DropDownMenu menuItems={menuItems}>
-				<Styled.UserAvatar src={avatar} alt="프로필" />
+				<Styled.DownArrow src={down} />
 			</DropDownMenu>
 		</Styled.UserProfile>
 	);

diff --git a/cocode/src/components/Common/UserProfile/style.js b/cocode/src/components/Common/UserProfile/style.js
@@ -20,8 +20,21 @@ const UserAvatar = styled.img`
         width: 3rem;
         height: 3rem;
         border-radius: 0.5rem;
-        cursor: pointer;
     }
 `;
 
-export { UserProfile, UserName, UserAvatar };
+const DownArrow = styled.img`
+	& {
+		width: 1rem;
+		height: 1rem;
+		margin: auto 0 auto 1rem;
+		cursor: pointer;
+		filter: invert(0.3);
+	}
+	
+	&:hover {
+		filter: invert(0);
+	}
+`;
+
+export { UserProfile, UserName, UserAvatar, DownArrow };