feat: add email sending logic

Author: winverse

src/components/setting/SettingEmailRow.tsx

@@ -4,13 +4,19 @@ import useInput from '../../lib/hooks/useInput';
 import SettingInput from './SettingInput';
 import styled from 'styled-components';
 import Button from '../common/Button';
+import SettingEmailSuccess from './SettingEmailSuccess';
 
 export type SettingEmailRowProps = {
   email: string;
+  isEmailSent: boolean;
   onChangeEmail: (email: string) => Promise<void>;
 };
 
-function SettingEmailRow({ email, onChangeEmail }: SettingEmailRowProps) {
+function SettingEmailRow({
+  email,
+  isEmailSent,
+  onChangeEmail,
+}: SettingEmailRowProps) {
   const [edit, setEdit] = useState(false);
   const [value, onChange] = useInput(email);
 
@@ -26,6 +32,7 @@ function SettingEmailRow({ email, onChangeEmail }: SettingEmailRowProps) {
       title="이메일 주소"
       description="회원 인증 또는 시스템에서 발송하는 이메일을 수신하는 주소입니다."
       editButton={!edit}
+      showEditButton={!isEmailSent}
       onClickEdit={() => setEdit(true)}
       editButtonText="변경"
     >
@@ -38,6 +45,8 @@ function SettingEmailRow({ email, onChangeEmail }: SettingEmailRowProps) {
           />
           <Button>변경</Button>
         </Form>
+      ) : isEmailSent ? (
+        <SettingEmailSuccess />
       ) : (
         email
       )}

src/components/setting/SettingEmailSuccess.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { MdCheck } from 'react-icons/md';
+import styled from 'styled-components';
+import palette from '../../lib/styles/palette';
+
+function SettingEmailSuccess() {
+  return (
+    <SettingEmailSuccessBlock>
+      <MdCheck className="icon" />
+      <div className="text">
+        메일이 전송되었습니다. 받은 편지함을 확인하세요.
+      </div>
+    </SettingEmailSuccessBlock>
+  );
+}
+
+const SettingEmailSuccessBlock = styled.div`
+  display: flex;
+  align-items: center;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  color: ${palette.teal6};
+  white-space: pre;
+  .icon {
+    margin-right: 10px;
+  }
+  .description {
+    font-size: 0.875rem;
+    text-align: center;
+  }
+`;
+
+export default SettingEmailSuccess;

src/components/setting/SettingRow.tsx

@@ -10,6 +10,7 @@ export type SettingRowProps = {
   onClickEdit?: () => void;
   editButton?: boolean;
   description?: string;
+  showEditButton?: boolean;
   editButtonText?: string;
 };
 
@@ -18,6 +19,7 @@ function SettingRow({
   children,
   editButton,
   description,
+  showEditButton = true,
   onClickEdit,
   editButtonText,
 }: SettingRowProps) {
@@ -29,7 +31,7 @@ function SettingRow({
         </div>
         <div className="block-for-mobile">
           <div className="contents">{children}</div>
-          {editButton && (
+          {editButton && showEditButton && (
             <div className="edit-wrapper">
               <SettingEditButton
                 onClick={onClickEdit}

src/components/setting/SettingRows.tsx

@@ -13,6 +13,7 @@ export type SettingRowsProps = {
   title: string | null;
   username: string;
   email: string;
+  isEmailSent: boolean;
   onUpdateTitle: (title: string) => Promise<any>;
   onChangeEmail: (email: string) => Promise<any>;
   onUpdateSocialInfo: (profileLinks: ProfileLinks) => Promise<any>;
@@ -46,6 +47,7 @@ function SettingRows({
   onUpdateSocialInfo,
   onUpdateEmailRules,
   onUnregister,
+  isEmailSent,
 }: SettingRowsProps) {
   return (
     <Rows>
@@ -54,7 +56,11 @@ function SettingRows({
         onUpdateTitle={onUpdateTitle}
       />
       <SettingSocialInfoRow {...profileLinks} onUpdate={onUpdateSocialInfo} />
-      <SettingEmailRow email={email} onChangeEmail={onChangeEmail} />
+      <SettingEmailRow
+        email={email}
+        onChangeEmail={onChangeEmail}
+        isEmailSent={isEmailSent}
+      />
       {userMeta && (
         <SettingEmailRulesRow
           notification={userMeta.email_notification}

src/containers/setting/SettingRowsContainer.tsx

@@ -17,7 +17,7 @@ function SettingRowsContainer(props: SettingRowsContainerProps) {
   const user = useSelector((state: RootState) => state.core.user);
   const updateSocialInfo = useUpdateSocialInfo();
   const { update: updateEmailRules } = useUpdateEmailRules();
-  const { change: changeEmail } = useChangeEmail();
+  const { change: changeEmail, called: isEmailSent } = useChangeEmail();
   const unregister = useUnregister();
 
   const onUpdateEmailRules = useCallback(
@@ -50,6 +50,7 @@ function SettingRowsContainer(props: SettingRowsContainerProps) {
       onUpdateEmailRules={onUpdateEmailRules}
       onUnregister={unregister}
       userMeta={meta}
+      isEmailSent={isEmailSent}
     />
   );
 }

src/containers/setting/hooks/useChangeEmail.ts

@@ -9,8 +9,7 @@ const CHANGE_EMAIL = gql`
 `;
 
 export default function useChangeEmail() {
-  const [changeEmail] = useMutation(CHANGE_EMAIL);
-
+  const [changeEmail, { called }] = useMutation(CHANGE_EMAIL);
   const change = useCallback(
     (email: string) => {
       return changeEmail({
@@ -24,5 +23,6 @@ export default function useChangeEmail() {
 
   return {
     change,
+    called,
   };
 }