From 3995e6d97d997cd47bb608f186ffed32d1704984 Mon Sep 17 00:00:00 2001
From: Yi SoJeong <soj980312@gmail.com>
Date: Sun, 20 Dec 2020 01:13:00 +0900
Subject: [PATCH] =?UTF-8?q?[#146]=20feat:=20Header=20=EC=9A=94=EC=86=8C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 서버 업데이트 시간
- 접속 중인 사람 수
---
 .../src/components/molecules/Header/Header.tsx  | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/molecules/Header/Header.tsx b/frontend/src/components/molecules/Header/Header.tsx
index 87b942a..9607a4b 100644
--- a/frontend/src/components/molecules/Header/Header.tsx
+++ b/frontend/src/components/molecules/Header/Header.tsx
@@ -2,11 +2,10 @@
 /** @jsxRuntime classic */
 import { jsx, css } from '@emotion/react';
 
-import { ReactComponent as Dots } from '@assets/dots.svg';
-import { ReactComponent as Check } from '@assets/check.svg';
 import { HeaderLink, HeaderButton } from '@components/atoms';
 import { useRecoilValue } from 'recoil';
 import { pageState, staticMenuToggleState } from '@/stores';
+import { timeSince } from '@/utils';
 
 const headerCss = () => css`
   width: 100%;
@@ -40,6 +39,9 @@ function Header({}: Props): JSX.Element {
   const staticMenuToggle = useRecoilValue(staticMenuToggleState);
   const selectedPage = useRecoilValue(pageState);
 
+  const date = `Updated ${timeSince(new Date())} ago`;
+  const people = `${3}명 접속중`;
+
   return (
     <div css={headerCss()}>
       <div css={wrapperCss()}>
@@ -47,15 +49,8 @@ function Header({}: Props): JSX.Element {
         <HeaderLink>{selectedPage?.title || 'Untitled'}</HeaderLink>
       </div>
       <div css={wrapperCss()}>
-        <HeaderButton>Share</HeaderButton>
-        <HeaderButton>
-          <Check />
-          Updates
-        </HeaderButton>
-        <HeaderButton>Favorite</HeaderButton>
-        <HeaderButton>
-          <Dots />
-        </HeaderButton>
+        <HeaderButton>{date}</HeaderButton>
+        <HeaderButton>{people}</HeaderButton>
       </div>
     </div>
   );