From 9d8a6e476537c4671327e4c6239d55abdace8fe0 Mon Sep 17 00:00:00 2001
From: Sungwoo Park <codest99@gmail.com>
Date: Sat, 23 May 2020 00:33:18 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B7=B0=20=EC=B6=94=EA=B0=80=20(#59)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |   4 +
 .../atoms/Button/Button.stories.tsx           |  10 +-
 .../web/components/atoms/Button/Button.tsx    |  34 +++-
 .../components/atoms/TextField/TextField.tsx  |   6 +-
 .../organisms/Profile/ProfileInfo.tsx         | 171 ++++++++++++++++++
 .../organisms/Profile/ProfileWithdraw.tsx     |  85 +++++++++
 .../web/components/pages/Profile/Profile.tsx  |  30 +++
 .../web/components/atoms/Button/IButton.ts    |   9 +-
 .../organisms/Profile/IProfileInfo.ts         |   5 +
 .../web/components/pages/Profile/IProfile.ts  |   5 +
 src/utils/routes.ts                           |   2 +
 11 files changed, 344 insertions(+), 17 deletions(-)
 create mode 100644 src/frameworks/web/components/organisms/Profile/ProfileInfo.tsx
 create mode 100644 src/frameworks/web/components/organisms/Profile/ProfileWithdraw.tsx
 create mode 100644 src/frameworks/web/components/pages/Profile/Profile.tsx
 create mode 100644 src/interfaces/frameworks/web/components/organisms/Profile/IProfileInfo.ts
 create mode 100644 src/interfaces/frameworks/web/components/pages/Profile/IProfile.ts

diff --git a/src/App.tsx b/src/App.tsx
index 18050e3..049f115 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import SignIn from 'frameworks/web/components/pages/SignIn/SignIn';
 import SignUp from 'frameworks/web/components/pages/SignUp/SignUp';
 import Footer from 'frameworks/web/components/organisms/Footer/Footer';
 import SpeakerApply from 'frameworks/web/components/pages/SpeakerApply/SpeakerApply';
+import Profile from 'frameworks/web/components/pages/Profile/Profile';
 import StatusPage from 'frameworks/web/components/pages/StatusPage/StatusPage';
 
 import apolloClient, { initStorage } from 'frameworks/web/apollo';
@@ -48,6 +49,9 @@ function App() {
             <Route path={ROUTES.STATUS}>
               <StatusPage />
             </Route>
+            <Route path={ROUTES.PROFILE}>
+              <Profile email="test@somul.kr" name="테스트" phone="010-1234-5678" />
+            </Route>
           </Switch>
           <Footer />
         </Router>
diff --git a/src/frameworks/web/components/atoms/Button/Button.stories.tsx b/src/frameworks/web/components/atoms/Button/Button.stories.tsx
index baa41a5..627a69b 100644
--- a/src/frameworks/web/components/atoms/Button/Button.stories.tsx
+++ b/src/frameworks/web/components/atoms/Button/Button.stories.tsx
@@ -11,7 +11,15 @@ export default {
 export const DefaultButton = () => {
   const label = text('Text', '바로가기');
   const isPrimary = boolean('IsPrimary', true);
-  return <Button label={label} isPrimary={isPrimary} onClick={action('button-clicked')} />;
+  const isEnabled = boolean('isEnabled', true);
+  return (
+    <Button
+      label={label}
+      isPrimary={isPrimary}
+      isEnabled={isEnabled}
+      onClick={action('button-clicked')}
+    />
+  );
 };
 
 export const FieldButton = () => {
diff --git a/src/frameworks/web/components/atoms/Button/Button.tsx b/src/frameworks/web/components/atoms/Button/Button.tsx
index db1aa5b..0bf7930 100644
--- a/src/frameworks/web/components/atoms/Button/Button.tsx
+++ b/src/frameworks/web/components/atoms/Button/Button.tsx
@@ -6,11 +6,11 @@ import { IBaseButton, IButton } from 'interfaces/frameworks/web/components/atoms
 
 const BaseButton = styled.button`
   font-family: 'Muli', 'Noto Sans KR', sans-serif;
-  background-color: ${(props: IBaseButton) =>
-    props.isPrimary ? theme.color.primary.Scarlet : theme.color.primary.Black};
-  color: ${theme.color.primary.White} !important;
-  opacity: ${(props: IBaseButton) => (props.isEnabled ? '1' : '0.3')};
-  border: none;
+  background-color: ${(props: IBaseButton) => props.bgColor};
+  color: ${(props: IBaseButton) =>
+    props.isEnabled ? theme.color.primary.White : theme.color.secondary.Moon} !important;
+  border: 1px solid
+    ${(props: IBaseButton) => (props.isEnabled ? props.bgColor : theme.color.secondary.Ash)};
   outline: none;
   cursor: ${(props: IBaseButton) => (props.isEnabled ? 'pointer' : 'inherit')};
   border-radius: 10px;
@@ -19,8 +19,9 @@ const BaseButton = styled.button`
 
   @media (hover: hover) {
     &:hover {
-      background-color: ${(props: IBaseButton) =>
-        props.isPrimary ? theme.color.primary.Salmon : theme.color.secondary.Nickel};
+      background-color: ${(props: IBaseButton) => props.hoverColor};
+      border-color: ${(props: IBaseButton) =>
+        props.isEnabled ? props.hoverColor : theme.color.secondary.Ash};
     }
   }
 `;
@@ -71,16 +72,29 @@ export default function Button({
   type = 'default',
   label,
   isPrimary = false,
-  onClick = null,
+  onClick = () => undefined,
   isEnabled = true,
   style,
 }: IButton): React.ReactElement {
   const ButtonComponent = BUTTONS[type];
+  let bgColor: string;
+  let hoverColor: string;
+  if (!isEnabled) {
+    bgColor = theme.color.primary.White;
+    hoverColor = bgColor;
+  } else if (isPrimary) {
+    bgColor = theme.color.primary.Scarlet;
+    hoverColor = theme.color.primary.Salmon;
+  } else {
+    bgColor = theme.color.primary.Black;
+    hoverColor = theme.color.secondary.Nickel;
+  }
   return (
     <ButtonComponent
-      isPrimary={isPrimary}
-      onClick={isEnabled ? onClick : undefined}
+      bgColor={bgColor}
+      hoverColor={hoverColor}
       isEnabled={isEnabled}
+      onClick={() => (isEnabled ? onClick() : undefined)}
       style={style}
     >
       {label}
diff --git a/src/frameworks/web/components/atoms/TextField/TextField.tsx b/src/frameworks/web/components/atoms/TextField/TextField.tsx
index 830c32d..6aa9e3c 100644
--- a/src/frameworks/web/components/atoms/TextField/TextField.tsx
+++ b/src/frameworks/web/components/atoms/TextField/TextField.tsx
@@ -76,10 +76,10 @@ export default function TextField(props: ITextField): React.ReactElement {
   const {
     defaultLabel,
     style,
-    type,
-    readOnly,
+    type = 'text',
+    readOnly = false,
     value,
-    isButton,
+    isButton = false,
     isError,
     buttonSrc,
     onButtonClicked,
diff --git a/src/frameworks/web/components/organisms/Profile/ProfileInfo.tsx b/src/frameworks/web/components/organisms/Profile/ProfileInfo.tsx
new file mode 100644
index 0000000..1f3aa9e
--- /dev/null
+++ b/src/frameworks/web/components/organisms/Profile/ProfileInfo.tsx
@@ -0,0 +1,171 @@
+/* eslint-disable react/no-unused-state */
+/* eslint-disable no-undef */
+/* eslint-disable no-alert */
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+import theme from 'theme';
+import DividedCard from 'frameworks/web/components/molecules/DividedCard/DividedCard';
+import Label from 'frameworks/web/components/atoms/Label/Label';
+import TextField from 'frameworks/web/components/atoms/TextField/TextField';
+import Button from 'frameworks/web/components/atoms/Button/Button';
+import { IProfile } from 'interfaces/frameworks/web/components/pages/Profile/IProfile';
+import { IProfileInfoState } from 'interfaces/frameworks/web/components/organisms/Profile/IProfileInfo';
+import ProfileIllust from 'assets/illust/speaker-apply-illustration.png';
+
+const TextLabelContainer = styled.div`
+  width: 93px;
+  float: left;
+  text-align: right;
+`;
+
+const TextFieldContainer = styled.div`
+  width: 445px;
+  float: right;
+  padding-bottom: 64px;
+`;
+
+const WarningTextContainer = styled.div`
+  float: right;
+  width: 400px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
+`;
+
+const WithdrawContainer = styled.div`
+  width: 289px;
+  margin-top: 17px;
+  float: right;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export default function ProfileInfo(props: IProfile): React.ReactElement {
+  const { name, email, phone } = props;
+  const [state, setState] = useState<IProfileInfoState>({ name, phone, password: '' });
+  const history = useHistory();
+  const onPasswordChangeClicked = () => {
+    // 비밀번호 변경 버튼 클릭시 작동되는 함수
+  };
+
+  const onSaveButtonClicked = () => {
+    // save 버튼 클릭시 작동되는 함수
+  };
+
+  const onWithdrawClicked = () => {
+    history.push('/profile/withdraw');
+  };
+  return (
+    <div>
+      <DividedCard title="PROFILE" leftPadding="70px 0 0 0">
+        {{
+          left: (
+            <div>
+              <img
+                src={ProfileIllust}
+                alt="강연자 지원 이미지"
+                style={{ width: '380px', height: '450px', margin: '75px 0 0 0' }}
+              />
+            </div>
+          ),
+          right: (
+            <div style={{ margin: '16px 95px 0 68px' }}>
+              <TextLabelContainer>
+                <Label type="H5" style={{ marginTop: '14px' }} color={theme.color.secondary.Nickel}>
+                  이름
+                </Label>
+                <Label type="H5" style={{ margin: '54px 0' }} color={theme.color.secondary.Nickel}>
+                  이메일
+                </Label>
+                <Label
+                  type="H5"
+                  style={{ marginBottom: '54px' }}
+                  color={theme.color.secondary.Nickel}
+                >
+                  휴대폰
+                </Label>
+                <Label type="H5" color={theme.color.secondary.Nickel}>
+                  현재 비밀번호
+                </Label>
+              </TextLabelContainer>
+              <TextFieldContainer>
+                <TextField
+                  defaultLabel="이름을 입력하세요"
+                  onValueChange={(data: string) =>
+                    setState({ name: data, phone: state.phone, password: state.password })
+                  }
+                  style={{ width: 'auto' }}
+                  value={state.name}
+                />
+                <TextField
+                  defaultLabel=""
+                  onValueChange={() => undefined}
+                  style={{ width: 'auto', margin: '24px 0' }}
+                  readOnly
+                  value={email}
+                />
+                <TextField
+                  defaultLabel="전화번호를 입력하세요"
+                  onValueChange={(data: string) =>
+                    setState({ name: state.name, phone: data, password: state.password })
+                  }
+                  style={{ width: 'auto' }}
+                  value={state.phone}
+                />
+                <div>
+                  <Button
+                    label="비밀번호 변경"
+                    onClick={onPasswordChangeClicked}
+                    style={{ float: 'right' }}
+                  />
+                  <TextField
+                    defaultLabel="현재 비밀번호를 입력하세요"
+                    onValueChange={(data: string) =>
+                      setState({ name: state.name, phone: state.phone, password: data })
+                    }
+                    style={{ width: '228px', marginTop: '24px' }}
+                    value={state.password}
+                  />
+                </div>
+                <WarningTextContainer>
+                  <img
+                    src="warning.svg"
+                    alt="경고 아이콘"
+                    style={{ width: '20px', height: '18px' }}
+                  />
+                  <div style={{ display: 'flex' }}>
+                    <Label type="P2" color={theme.color.alert.Warning}>
+                      현재 비밀번호
+                    </Label>
+                    <Label type="P2" color={theme.color.secondary.Moon}>
+                      를 입력하셔야 개인정보 수정을 완료할 수 있습니다.
+                    </Label>
+                  </div>
+                </WarningTextContainer>
+              </TextFieldContainer>
+              <Button
+                type="default"
+                label="저장하기"
+                isPrimary
+                onClick={onSaveButtonClicked}
+                style={{ float: 'right' }}
+              />
+            </div>
+          ),
+        }}
+      </DividedCard>
+      <div style={{ width: '1100px', margin: '0 auto' }}>
+        <WithdrawContainer>
+          <Label type="P1" color={theme.color.secondary.Nickel}>
+            계정을 삭제하시겠습니까?
+          </Label>
+          <Label type="H5" color={theme.color.secondary.Nickel} onClick={onWithdrawClicked}>
+            계정 삭제하기
+          </Label>
+        </WithdrawContainer>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frameworks/web/components/organisms/Profile/ProfileWithdraw.tsx b/src/frameworks/web/components/organisms/Profile/ProfileWithdraw.tsx
new file mode 100644
index 0000000..17fbf9a
--- /dev/null
+++ b/src/frameworks/web/components/organisms/Profile/ProfileWithdraw.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+import theme from 'theme';
+import Label from 'frameworks/web/components/atoms/Label/Label';
+import Button from 'frameworks/web/components/atoms/Button/Button';
+import ContentsBox from 'frameworks/web/components/atoms/ContentsBox/ContentsBox';
+import TextField from 'frameworks/web/components/atoms/TextField/TextField';
+
+const CardContainer = styled(ContentsBox)`
+  width: 730px;
+  height: auto;
+  padding: 64px 0 64px 0;
+  margin: 0 auto;
+  background-color: white;
+  text-align: center;
+`;
+
+const ContextContainer = styled.div`
+  margin: 40px 0;
+`;
+
+const ButtonContainer = styled.div`
+  text-align: center;
+  margin-top: 48px;
+`;
+
+const EachButtonContainer = styled.div`
+  display: inline-block;
+  margin: 0 15px 0 15px;
+`;
+
+export default function ProfileWithdraw(): React.ReactElement {
+  const [checkText, setCheckText] = useState('');
+  const history = useHistory();
+
+  const onTextValueChange = (data: string) => {
+    setCheckText(data);
+  };
+
+  const onCancleButtonClicked = () => {
+    history.goBack();
+  };
+
+  const onDeleteButtonClicked = () => {
+    // 계정 삭제 로직 추가
+  };
+  return (
+    <CardContainer isDarkBackground={false}>
+      <Label type="H4" color={theme.color.primary.Azure}>
+        계정 삭제
+      </Label>
+      <ContextContainer>
+        <Label type="P1" color={theme.color.secondary.Moon} style={{ marginTop: '24px' }}>
+          계정을 삭제하시면 해당 홈페이지와 관련된 서비스를 이용할 수 없으며,
+        </Label>
+        <Label type="P1" color={theme.color.secondary.Moon}>
+          작성중인 신청폼이 모두 없어집니다. 계정 삭제를 완료하시려면
+        </Label>
+        <Label type="P1" color={theme.color.secondary.Moon}>
+          아래 빈칸에 <span style={{ color: '#F5503D', fontWeight: 'bold' }}>삭제하겠습니다</span>를
+          입력해주세요.
+        </Label>
+      </ContextContainer>
+      <TextField
+        defaultLabel="삭제하겠습니다"
+        onValueChange={onTextValueChange}
+        style={{ width: '350px', margin: '0 auto' }}
+      />
+      <ButtonContainer>
+        <EachButtonContainer>
+          <Button label="취소" onClick={onCancleButtonClicked} />
+        </EachButtonContainer>
+        <EachButtonContainer>
+          <Button
+            label="삭제하기"
+            isPrimary
+            isEnabled={checkText === '삭제하겠습니다'}
+            onClick={onDeleteButtonClicked}
+          />
+        </EachButtonContainer>
+      </ButtonContainer>
+    </CardContainer>
+  );
+}
diff --git a/src/frameworks/web/components/pages/Profile/Profile.tsx b/src/frameworks/web/components/pages/Profile/Profile.tsx
new file mode 100644
index 0000000..7e37984
--- /dev/null
+++ b/src/frameworks/web/components/pages/Profile/Profile.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import theme from 'theme';
+import { IProfile } from 'interfaces/frameworks/web/components/pages/Profile/IProfile';
+import ProfileInfo from 'frameworks/web/components/organisms/Profile/ProfileInfo';
+import ProfileWithdraw from 'frameworks/web/components/organisms/Profile/ProfileWithdraw';
+import * as ROUTES from 'utils/routes';
+
+const ProfileContainer = styled.div`
+  padding: 200px 0 120px 0;
+  background-color: ${theme.color.secondary.Ash};
+`;
+
+export default function Profile({ name, email, phone }: IProfile): React.ReactElement {
+  return (
+    <Router>
+      <ProfileContainer>
+        <Switch>
+          <Route exact path={ROUTES.PROFILE}>
+            <ProfileInfo name={name} email={email} phone={phone} />
+          </Route>
+          <Route path={ROUTES.PROFILE_WITHDRAW}>
+            <ProfileWithdraw />
+          </Route>
+        </Switch>
+      </ProfileContainer>
+    </Router>
+  );
+}
diff --git a/src/interfaces/frameworks/web/components/atoms/Button/IButton.ts b/src/interfaces/frameworks/web/components/atoms/Button/IButton.ts
index 36756cf..669f51a 100644
--- a/src/interfaces/frameworks/web/components/atoms/Button/IButton.ts
+++ b/src/interfaces/frameworks/web/components/atoms/Button/IButton.ts
@@ -1,13 +1,16 @@
 type ButtonType = 'default' | 'field' | 'small' | 'wide' | 'mobilewide';
 
 export interface IBaseButton {
-  isPrimary?: boolean;
   isEnabled?: boolean;
-  onClick?: any;
+  bgColor: string;
+  hoverColor: string;
 }
 
-export interface IButton extends IBaseButton {
+export interface IButton {
+  isPrimary?: boolean;
+  isEnabled?: boolean;
   type?: ButtonType;
   label: string;
+  onClick?: Function;
   style?: object;
 }
diff --git a/src/interfaces/frameworks/web/components/organisms/Profile/IProfileInfo.ts b/src/interfaces/frameworks/web/components/organisms/Profile/IProfileInfo.ts
new file mode 100644
index 0000000..11c3137
--- /dev/null
+++ b/src/interfaces/frameworks/web/components/organisms/Profile/IProfileInfo.ts
@@ -0,0 +1,5 @@
+export interface IProfileInfoState {
+  name: string;
+  phone: string;
+  password: string;
+}
diff --git a/src/interfaces/frameworks/web/components/pages/Profile/IProfile.ts b/src/interfaces/frameworks/web/components/pages/Profile/IProfile.ts
new file mode 100644
index 0000000..29e5d1c
--- /dev/null
+++ b/src/interfaces/frameworks/web/components/pages/Profile/IProfile.ts
@@ -0,0 +1,5 @@
+export interface IProfile {
+  name: string;
+  email: string;
+  phone: string;
+}
diff --git a/src/utils/routes.ts b/src/utils/routes.ts
index 936381a..ab1b66c 100644
--- a/src/utils/routes.ts
+++ b/src/utils/routes.ts
@@ -15,3 +15,5 @@ export const APPLY_SPEAKER = `/apply/speaker`;
 export const APPLY_SPEAKER_COMPLETE = `${APPLY_SPEAKER}/complete`;
 
 export const STATUS = `/status`;
+export const PROFILE = `/profile`;
+export const PROFILE_WITHDRAW = `${PROFILE}/withdraw`;