Merge pull request #10 from EFUB-TEAM4/issue-8

#8 : 헤더 아이콘 & 공용 버튼 생성

package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",

src/components/Common/HeaderIcon/index.js

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-unresolved */
+import React, { useState, useRef, useEffect } from 'react';
+import { User } from 'assets';
+import {
+  StyledRoot,
+  ToolTipArrow,
+  ToolTip,
+  IconButton,
+  Image,
+  StyledLink,
+  Line,
+  LogoutButton,
+} from './style';
+
+function HeaderIcon() {
+  const [isClicked, setIsClicked] = useState(0);
+  function useClickOutside(ref) {
+    function ClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setIsClicked(0);
+      }
+    }
+    useEffect(() => {
+      document.addEventListener('mousedown', ClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', ClickOutside);
+      };
+    });
+  }
+  const Ref = useRef(null);
+  useClickOutside(Ref);
+  return (
+    <StyledRoot ref={Ref}>
+      <IconButton type="button" onClick={() => setIsClicked(prev => !prev)}>
+        <Image src={User} alt="HeaderIcon" />
+      </IconButton>
+      {isClicked ? (
+        <div>
+          <ToolTipArrow />
+          <ToolTip>
+            <StyledLink to="/MyPage">마이페이지</StyledLink>
+            <Line />
+            <LogoutButton>로그아웃</LogoutButton>
+          </ToolTip>
+        </div>
+      ) : null}
+    </StyledRoot>
+  );
+}
+
+export default HeaderIcon;

src/components/Common/HeaderIcon/style.js

@@ -0,0 +1,89 @@
+/* eslint-disable import/no-unresolved */
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+
+const StyledRoot = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-bottom: 3rem;
+`;
+
+const ToolTipArrow = styled.div`
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-bottom: 1rem solid ${({ theme: { color } }) => color.white};
+  border-top: 0.5rem solid transparent;
+  border-left: 0.6rem solid transparent;
+  border-right: 0.6rem solid transparent;
+  top: 4rem;
+  right: 0.4rem;
+`;
+
+const ToolTip = styled.div`
+  position: absolute;
+  top: 5.5rem;
+  right: 0;
+  width: 18rem;
+  height: 8rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0;
+  box-sizing: content-box;
+  background-color: ${({ theme: { color } }) => color.white};
+  box-shadow: 0 0 6px 0 rgb(84 184 119 / 25%);
+`;
+
+const IconButton = styled.button`
+  width: 4rem;
+  height: 4rem;
+`;
+
+const Image = styled.img`
+  width: 4rem;
+  height: 4rem;
+`;
+
+const StyledLink = styled(NavLink)`
+  color: #3b3829;
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.small};
+  font-weight: ${({ theme: { font } }) => font.weight.bold};
+  margin-top: 0.2rem;
+`;
+
+const Line = styled.hr`
+  width: 100%;
+  border: 0;
+  height: 0.1rem;
+  margin: 0;
+  background: ${({ theme: { color } }) => color.greenLightest};
+`;
+
+const LogoutButton = styled.button`
+  width: 9rem;
+  height: 3rem;
+  border-radius: 2rem;
+  background-color: #3b3829;
+  color: ${({ theme: { color } }) => color.white};
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.micro};
+  font-weight: ${({ theme: { font } }) => font.weight.bold};
+`;
+
+export {
+  StyledRoot,
+  ToolTipArrow,
+  ToolTip,
+  IconButton,
+  Image,
+  StyledLink,
+  Line,
+  LogoutButton,
+};

src/components/Common/PublicButton/index.js

@@ -0,0 +1,20 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyledRoot, Text } from './style';
+
+function PublicButton({ text, onClick, isDisabled }) {
+  return (
+    <StyledRoot onClick={onClick} disabled={isDisabled}>
+      <Text>{text}</Text>
+    </StyledRoot>
+  );
+}
+
+PublicButton.propTypes = {
+  text: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  isDisabled: PropTypes.number.isRequired,
+};
+
+export default PublicButton;

src/components/Common/PublicButton/style.js

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-unresolved */
+import styled from 'styled-components';
+import { applyMediaQuery } from 'styles/mediaQuery';
+
+const StyledRoot = styled.button`
+  background-color: ${props =>
+    props.disabled
+      ? ({ theme: { color } }) => color.greenLighter
+      : ({ theme: { color } }) => color.greenDarker};
+  padding: 0 2rem;
+  ${applyMediaQuery('mobile')} {
+    width: 75vw;
+  }
+  height: 4rem;
+  border-radius: 0.5rem;
+`;
+
+const Text = styled.p`
+  color: ${({ theme: { color } }) => color.white};
+  font-family: 'Noto Sans';
+  font-size: ${({ theme: { font } }) => font.size.micro};
+  font-weight: ${({ theme: { font } }) => font.weight.bold};
+`;
+
+export { StyledRoot, Text };

src/components/index.js

@@ -0,0 +1,3 @@
+/* 컴포넌트 export 파일 */
+export { default as HeaderIcon } from './Common/HeaderIcon';
+export { default as PublicButton } from './Common/PublicButton';

src/pages/MyPage/index.js

@@ -1,13 +1,14 @@
 /* eslint-disable import/no-unresolved */
-import React from "react";
-import { RecSun } from "assets";
-import { StyledRoot, Text } from "./style";
+import React from 'react';
+import { HeaderIcon, PublicButton } from 'components';
+import { StyledRoot, Text } from './style';
 
 function MyPage() {
   return (
     <StyledRoot>
+      <HeaderIcon />
       <Text>MyPage</Text>
-      <img src={RecSun} alt="RecSunny" />
+      <PublicButton text="투표 만들기" onClick={() => {}} isDisabled={0} />
     </StyledRoot>
   );
 }