Close usermenu on user icon click - Fix velopert#37

Author: velopert

src/components/base/Header.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useRef, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import RoundButton from '../common/RoundButton';
 import { CurrentUser } from '../../lib/graphql/user';
@@ -95,8 +95,6 @@ interface HeaderProps {
   isSearch: boolean;
 }
 
-const { useCallback } = React;
-
 const Header: React.FC<HeaderProps> = ({
   floating,
   floatingMargin,
@@ -108,6 +106,7 @@ const Header: React.FC<HeaderProps> = ({
   isSearch,
 }) => {
   const [userMenu, toggleUserMenu] = useToggle(false);
+  const ref = useRef<HTMLDivElement>(null);
 
   const onLogout = useCallback(async () => {
     try {
@@ -116,6 +115,16 @@ const Header: React.FC<HeaderProps> = ({
     storage.removeItem('CURRENT_USER');
     window.location.href = '/';
   }, []);
+
+  const onOutsideClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (!ref.current) return;
+      if (ref.current.contains(e.target as any)) return;
+      toggleUserMenu();
+    },
+    [toggleUserMenu],
+  );
+
   return (
     <>
       <HeaderBlock
@@ -162,9 +171,11 @@ const Header: React.FC<HeaderProps> = ({
                   >
                     새 글 작성
                   </RoundButton>
-                  <HeaderUserIcon user={user} onClick={toggleUserMenu} />
+                  <div ref={ref}>
+                    <HeaderUserIcon user={user} onClick={toggleUserMenu} />
+                  </div>
                   <HeaderUserMenu
-                    onClose={toggleUserMenu}
+                    onClose={onOutsideClick}
                     username={user.username}
                     onLogout={onLogout}
                     visible={userMenu}

src/components/base/HeaderUserIcon.tsx

@@ -38,7 +38,7 @@ const HeaderUserIconBlock = styled.div`
 
 export interface HeaderUserIconProps {
   user: CurrentUser;
-  onClick: () => void;
+  onClick: (e: React.MouseEvent) => void;
 }
 
 // TODO: show user thumbnail

src/components/base/HeaderUserMenu.tsx

@@ -26,7 +26,7 @@ const HeaderUserMenuBlock = styled.div`
 `;
 
 interface HeaderUserMenuProps {
-  onClose: () => void;
+  onClose: (e: React.MouseEvent) => void;
   onLogout: () => void;
   username: string;
   visible: boolean;

src/components/main/MainHeader.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useCallback } from 'react';
 import styled from 'styled-components';
 import { Logo, SearchIcon2 } from '../../static/svg';
 import RoundButton from '../common/RoundButton';
@@ -15,6 +15,16 @@ export type MainHeaderProps = {};
 function MainHeader(props: MainHeaderProps) {
   const { user, onLoginClick, onLogout } = useHeader();
   const [userMenu, toggleUserMenu] = useToggle(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const onOutsideClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (!ref.current) return;
+      if (ref.current.contains(e.target as any)) return;
+      toggleUserMenu();
+    },
+    [toggleUserMenu],
+  );
 
   return (
     <Block>
@@ -37,9 +47,11 @@ function MainHeader(props: MainHeaderProps) {
               새 글 작성
             </RoundButton>
 
-            <HeaderUserIcon user={user} onClick={toggleUserMenu} />
+            <div ref={ref}>
+              <HeaderUserIcon user={user} onClick={toggleUserMenu} />
+            </div>
             <HeaderUserMenu
-              onClose={toggleUserMenu}
+              onClose={onOutsideClick}
               onLogout={onLogout}
               username={user.username}
               visible={userMenu}