feat: Setup email-change page

Author: winverse

src/App.tsx

@@ -28,6 +28,11 @@ const EmailLoginPage = loadable(
   () => import('./pages/EmailLoginPage'),
   loadableConfig,
 );
+const EmailChangePage = loadable(
+  () => import('./pages/EmailChangePage'),
+  loadableConfig,
+);
+
 const WritePage = loadable(() => import('./pages/WritePage'));
 const SearchPage = loadable(() => import('./pages/SearchPage'), loadableConfig);
 const SavesPage = loadable(() => import('./pages/SavesPage'), loadableConfig);
@@ -77,6 +82,7 @@ const App: React.FC<AppProps> = (props) => {
           <Route path="/@:username" component={VelogPage} />
           {/* <Route path="/@:username/:urlSlug" component={PostPage} /> */}
           <Route path="/email-login" component={EmailLoginPage} />
+          <Route path="/email-change" component={EmailChangePage} />
           <Route path="/write" component={WritePage} />
           <Route path="/search" component={SearchPage} />
           <Route path="/saves" component={SavesPage} />

src/components/setting/SettingEmailRow.tsx

@@ -23,6 +23,8 @@ function SettingEmailRow({
   const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     //! TODO: 이메일 형식으로 입력하지 않을 경우 처리
+    //! TODO: 같은 이메일인 경우 처리
+    //! TODO: 이메일 중복 체크
     await onChangeEmail(value);
     setEdit(false);
   };

src/containers/etc/EmailChange.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { withRouter, RouteComponentProps } from 'react-router';
+import qs from 'qs';
+
+import { CONFIRM_CHANGE_EMAIL } from '../../lib/graphql/user';
+import { RootState } from '../../modules';
+import { useApolloClient } from '@apollo/react-hooks';
+import styled from 'styled-components';
+import { toast } from 'react-toastify';
+import SpinnerBlock from '../../components/common/SpinnerBlock';
+
+const mapStateToProps = (state: RootState) => ({});
+const mapDispatchToProps = {};
+
+interface OwnProps {}
+type StateProps = ReturnType<typeof mapStateToProps>;
+type DispatchProps = typeof mapDispatchToProps;
+export type EmailChangeProps = OwnProps &
+  StateProps &
+  DispatchProps &
+  RouteComponentProps;
+
+const { useEffect, useCallback } = React;
+
+const EmailChange: React.FC<EmailChangeProps> = ({ location, history }) => {
+  const query = qs.parse(location.search, { ignoreQueryPrefix: true });
+  const client = useApolloClient();
+  useCallback(async () => {
+    try {
+      await client.mutate({
+        mutation: CONFIRM_CHANGE_EMAIL,
+        variables: {
+          code: query.code,
+        },
+      });
+
+      history.replace('/setting');
+    } catch (e) {
+      toast.error('잘못된 접근입니다.');
+      history.replace('/');
+    }
+  }, [client, history, query.code]);
+
+  useEffect(() => {
+    if (!query.code) {
+      // TODO: show 404
+      toast.error('잘못된 접근입니다.');
+      history.replace('/');
+    }
+  }, [history, location.search, query.code]);
+
+  return (
+    <Fullscreen>
+      <SpinnerBlock />
+    </Fullscreen>
+  );
+};
+
+const Fullscreen = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default connect<StateProps, DispatchProps, OwnProps, RootState>(
+  mapStateToProps,
+  mapDispatchToProps,
+)(withRouter(EmailChange));

src/lib/graphql/user.ts

@@ -170,6 +170,12 @@ export const ACCEPT_INTEGRATION = gql`
   }
 `;
 
+export const CONFIRM_CHANGE_EMAIL = gql`
+  mutation ConfirmChangeEmail($email: String!) {
+    confirm_change_email(email: $email)
+  }
+`;
+
 export type AcceptIntegrationResponse = {
   acceptIntegration: string;
 };

src/pages/EmailChangePage.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import EmailChange from '../containers/etc/EmailChange';
+
+const EmailChangePage: React.FC<{}> = (props) => {
+  return <EmailChange />;
+};
+
+export default EmailChangePage;