From 2ed3a0071c8bfa31f47dc0486628bfe22da8dc47 Mon Sep 17 00:00:00 2001
From: Choiyounseo <dbstj72@kaist.ac.kr>
Date: Fri, 30 Oct 2020 22:50:46 +0900
Subject: [PATCH] chore(mainFooter): basic MainFooter template

---
 .../pages/ProfilePage/UserProfilePage.js      | 100 +++++++++---------
 .../templates/MainFooter/MainFooter.js        |  21 ++++
 .../templates/MainFooter/MainFooter.styled.js |  50 +++++++++
 src/components/templates/MainFooter/index.js  |   1 +
 4 files changed, 124 insertions(+), 48 deletions(-)
 create mode 100644 src/components/templates/MainFooter/MainFooter.js
 create mode 100644 src/components/templates/MainFooter/MainFooter.styled.js
 create mode 100644 src/components/templates/MainFooter/index.js

diff --git a/src/components/pages/ProfilePage/UserProfilePage.js b/src/components/pages/ProfilePage/UserProfilePage.js
index 2953d20..245107a 100644
--- a/src/components/pages/ProfilePage/UserProfilePage.js
+++ b/src/components/pages/ProfilePage/UserProfilePage.js
@@ -10,6 +10,7 @@ import SuperTooltip from 'components/atoms/SuperTooltip';
 import GroupList from 'components/organisms/GroupList';
 import ProfileStats from 'components/organisms/ProfileStats';
 import Header from 'components/templates/Header';
+import MainFooter from 'components/templates/MainFooter';
 import ZaboList from 'components/templates/ZaboList';
 
 import { logout as logoutAction } from 'store/reducers/auth';
@@ -54,54 +55,57 @@ const UserProfile = ({ profile }) => {
   const groupsWithPending = useMemo (() => [...groups, ...pendingGroups.map (group => ({ ...group, isPending: true }))], [groups, pendingGroups]);
 
   return (
-    <Page>
-      <Header type="upload" scrollHeader />
-      <Page.Header>
-        <Page.Header.Left>
-          <Page.Header.Left.ProfilePhoto>
-            {
-              profilePhoto
-                ? <img src={profilePhoto} alt="profile photo" />
-                : <img src={defaultProfile} alt="default profile img" />
-            }
-          </Page.Header.Left.ProfilePhoto>
-          <Page.Header.Left.UserInfo>
-            <h1>{username}</h1>
-            <SuperTooltip title={description} hide={!showTooltip}>
-              <p ref={descRef}>{description || '아직 소개가 없습니다.'}</p>
-            </SuperTooltip>
-            {isMyProfile ? (
-              <section>
-                <Button.Group>
-                  <Button onClick={logout}>로그아웃</Button>
-                  <Button to="/settings/profile" border="main">{isMobile ? '편집' : '프로필 편집'}</Button>
-                  {isAdmin && (<Button to="/admin">{isMobile ? '관리' : '관리자'}</Button>)}
-                </Button.Group>
-              </section>
-            ) : (
-              // <sectino>
-              //   {following
-              //     ? <button onClick={follow} type="button">팔로우 취소</button>
-              //     : <button onClick={follow} type="button">팔로우</button>}
-              // </sectino>
-              ''
-            )}
-          </Page.Header.Left.UserInfo>
-        </Page.Header.Left>
-        <Page.Header.Right>
-          <ProfileStats stats={stats} />
-        </Page.Header.Right>
-      </Page.Header>
-      <Page.Body>
-        <Page.Body.User>
-        </Page.Body.User>
-      </Page.Body>
-      <GroupList type="profile" groups={groupsWithPending} hasApplyBox isMyProfile={isMyProfile} />
-      <Zabos>
-        <h1>저장한 자보</h1>
-        <ZaboList type="pins" query={username} key={username} />
-      </Zabos>
-    </Page>
+    <>
+      <Page>
+        <Header type="upload" scrollHeader />
+        <Page.Header>
+          <Page.Header.Left>
+            <Page.Header.Left.ProfilePhoto>
+              {
+                profilePhoto
+                  ? <img src={profilePhoto} alt="profile photo" />
+                  : <img src={defaultProfile} alt="default profile img" />
+              }
+            </Page.Header.Left.ProfilePhoto>
+            <Page.Header.Left.UserInfo>
+              <h1>{username}</h1>
+              <SuperTooltip title={description} hide={!showTooltip}>
+                <p ref={descRef}>{description || '아직 소개가 없습니다.'}</p>
+              </SuperTooltip>
+              {isMyProfile ? (
+                <section>
+                  <Button.Group>
+                    <Button onClick={logout}>로그아웃</Button>
+                    <Button to="/settings/profile" border="main">{isMobile ? '편집' : '프로필 편집'}</Button>
+                    {isAdmin && (<Button to="/admin">{isMobile ? '관리' : '관리자'}</Button>)}
+                  </Button.Group>
+                </section>
+              ) : (
+                // <sectino>
+                //   {following
+                //     ? <button onClick={follow} type="button">팔로우 취소</button>
+                //     : <button onClick={follow} type="button">팔로우</button>}
+                // </sectino>
+                ''
+              )}
+            </Page.Header.Left.UserInfo>
+          </Page.Header.Left>
+          <Page.Header.Right>
+            <ProfileStats stats={stats} />
+          </Page.Header.Right>
+        </Page.Header>
+        <Page.Body>
+          <Page.Body.User>
+          </Page.Body.User>
+        </Page.Body>
+        <GroupList type="profile" groups={groupsWithPending} hasApplyBox isMyProfile={isMyProfile} />
+        <Zabos>
+          <h1>저장한 자보</h1>
+          <ZaboList type="pins" query={username} key={username} />
+        </Zabos>
+      </Page>
+      <MainFooter />
+    </>
   );
 };
 
diff --git a/src/components/templates/MainFooter/MainFooter.js b/src/components/templates/MainFooter/MainFooter.js
new file mode 100644
index 0000000..5de8b66
--- /dev/null
+++ b/src/components/templates/MainFooter/MainFooter.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import logo from 'static/logo/logo_white.svg';
+
+import { MainFooterW } from './MainFooter.styled';
+
+// TODO: white sparcs logo svg
+const MainFooter = () => (
+  <MainFooterW>
+    <a href="https://sparcs.org" target="_blank" rel="noopener noreferrer">
+      <img alt="logo" src={logo} style={{ height: '25px' }} />
+    </a>
+    <MainFooterW.Links>
+      <MainFooterW.Button>만든 사람들</MainFooterW.Button>
+      <MainFooterW.Button>라이센스</MainFooterW.Button>
+    </MainFooterW.Links>
+    <MainFooterW.Contact>Contact:zabo@sparcs.org</MainFooterW.Contact>
+  </MainFooterW>
+);
+
+export default MainFooter;
diff --git a/src/components/templates/MainFooter/MainFooter.styled.js b/src/components/templates/MainFooter/MainFooter.styled.js
new file mode 100644
index 0000000..aa0c20d
--- /dev/null
+++ b/src/components/templates/MainFooter/MainFooter.styled.js
@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+export const MainFooterW = styled.div`
+  position: relative;
+  left: 0;
+  bottom: 0;
+  height: 50px;
+  color: white;
+  background-color: #143441;
+  padding: 0 24px;
+
+  display: flex;
+  align-items: center;
+
+  @media(max-width: 910px) {
+    padding: 0 16px;
+  }
+`;
+
+MainFooterW.Links = styled.div`
+  font-size: 15px;
+  line-height: 17px;
+  font-weight: 700;
+  margin-left: 40px;
+  
+  flex: 1;
+  display: flex;
+  align-items: center;
+  @media(max-width: 910px) {
+    justify-content: flex-end;
+  }
+`;
+
+MainFooterW.Button = styled.div`
+  margin-left: 24px;
+  cursor: pointer;
+
+  @media(max-width: 910px) {
+    margin-left: 12px;
+  }
+`;
+
+MainFooterW.Contact = styled.div`
+  font-size: 13px;
+  font-weight: 700;
+
+  @media(max-width: 910px) {
+    display: none;
+  }
+`;
diff --git a/src/components/templates/MainFooter/index.js b/src/components/templates/MainFooter/index.js
new file mode 100644
index 0000000..630ad7e
--- /dev/null
+++ b/src/components/templates/MainFooter/index.js
@@ -0,0 +1 @@
+export { default } from './MainFooter';