Merge pull request #214 from Team-Crops/refactor/199-email-domains

이메일 유저이름과 도메인 통합시키기
Team-Crops · Jun 24, 2024 · 9d2cf9e · 9d2cf9e
2 parents 62e2f8c + 764600a
commit 9d2cf9e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 59 deletions.
diff --git a/src/components/organisms/MyPage/MemberInfoEdit.tsx b/src/components/organisms/MyPage/MemberInfoEdit.tsx
@@ -1,4 +1,4 @@
-import { use, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import styled from '@emotion/styled';
 
@@ -8,7 +8,6 @@ import { UserBackgroundStatus } from '#/types';
 import { isUserStudent, isUserWorker } from '#/utilities/user';
 import { CheckBox } from '#atoms/CheckBox';
 import { Input } from '#atoms/Input';
-import { Select } from '#atoms/Select';
 import { Txt } from '#atoms/Text';
 import { BasicInfoEdit } from '#molecules/MyPage/BasicInfoEdit';
 import { MyInfoBlock } from '#molecules/MyPage/MyInfoBlock';
@@ -34,10 +33,6 @@ const StyledTextarea = styled.textarea`
     color: #bdbdbd;
   }
 `;
-const EmailBlock = styled.div`
-  display: flex;
-  gap: 3px;
-`;
 const Hyphen = styled.div`
   width: 10px;
   border: 1px solid #424242;
@@ -69,10 +64,6 @@ const isUserStudentOrWorker = (backgroundStatus: UserBackgroundStatus) => {
 
 export const MemberInfoEdit = () => {
   const tempUser = useTempAuthStore((state) => state.tempUser);
-  const [tempEmail, setTempEmail] = useState<{ id: string; domain: string }>({
-    id: '',
-    domain: '',
-  });
   const [tempPhone, setTempPhone] = useState<{ first: string; second: string; third: string }>({
     first: '',
     second: '',
@@ -86,27 +77,11 @@ export const MemberInfoEdit = () => {
         alert('최대 글자수를 초과하였습니다.');
         return;
       }
-      if (tempUser !== null) setTempUser({ ...tempUser, [key]: value });
-    },
-    [tempUser, setTempUser]
-  );
-
-  const handleUpdateTempEmail = useCallback(
-    (key: 'id' | 'domain', value: string, maxLength?: number) => {
-      if (maxLength && value.length > maxLength) {
-        alert('최대 글자수를 초과하였습니다.');
-        return;
-      }
-      if (tempUser === null) return;
-      if (key === 'id') {
-        setTempEmail({ ...tempEmail, id: value });
-        setTempUser({ ...tempUser, email: `${value}@${tempEmail.domain}` });
-      } else {
-        setTempEmail({ ...tempEmail, domain: value });
-        setTempUser({ ...tempUser, email: `${tempEmail.id}@${value}` });
+      if (tempUser !== null) {
+        setTempUser({ ...tempUser, [key]: value });
       }
     },
-    [setTempUser, tempEmail, tempUser]
+    [tempUser, setTempUser]
   );
 
   const handleUpdateTempPhone = useCallback(
@@ -141,10 +116,6 @@ export const MemberInfoEdit = () => {
 
   // init
   useEffect(() => {
-    if (tempUser !== null && tempUser.email !== null) {
-      const email = tempUser.email.split('@');
-      setTempEmail({ id: email[0], domain: email[1] });
-    }
     if (tempUser !== null && tempUser.phoneNumber !== null) {
       const phone = tempUser.phoneNumber.split('-');
       setTempPhone({ first: phone[0], second: phone[1], third: phone[2] });
@@ -172,27 +143,15 @@ export const MemberInfoEdit = () => {
           />
         </BasicInfoEdit>
         <BasicInfoEdit title={'이메일'} titleWidth={97} essential>
-          <EmailBlock>
-            <Input
-              value={tempEmail.id}
-              onChange={(e) => handleUpdateTempEmail('id', e.target.value, 20)}
-              width="118px"
-              placeholder="이메일 입력"
-            />
-            <Select
-              value={tempEmail.domain}
-              onChange={(e) => handleUpdateTempEmail('domain', e.target.value)}
-              width="128px"
-              placeholder="선택하세요"
-            >
-              <Select.Option value="google.com">google.com</Select.Option>
-              <Select.Option value="naver.com">naver.com</Select.Option>
-            </Select>
-          </EmailBlock>
+          <Input
+            value={tempUser.email ?? ''}
+            onChange={(e) => handleUpdateTempUser('email', e.target.value, 100)}
+            placeholder="이메일 입력"
+          />
         </BasicInfoEdit>
         <BasicInfoEdit title={'닉네임'} titleWidth={97} essential>
           <Input
-            value={tempUser.nickname === null ? '' : tempUser.nickname}
+            value={tempUser.nickname ?? ''}
             onChange={(e) => handleUpdateTempUser('nickname', e.target.value, 20)}
             width="207px"
             placeholder="닉네임 입력"

diff --git a/src/components/templates/MyPage/InfoEditSection.tsx b/src/components/templates/MyPage/InfoEditSection.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { usePresignedUrlLazyQuery } from '#/hooks/use-file';
 import { useMeMutation, useMeQuery } from '#/hooks/use-user';
 import { useTempAuthStore } from '#/stores/tempAuth';
-import { Me } from '#/types';
+import { Me, User } from '#/types';
 import { uploadFile } from '#/utilities/storage';
 import { Button } from '#atoms/Button';
 import { ActivityEdit } from '#organisms/MyPage/ActivityEdit';
@@ -33,11 +33,7 @@ const checkRequiredValue = (tempUser: Me | null) => {
   if (tempUser.username === '' || tempUser.username === null) {
     alert('이름을 입력해주세요.');
     return false;
-  } else if (
-    tempUser.email === null ||
-    tempUser.email.split('@')[0] === '' ||
-    tempUser.email.split('@')[1] === ''
-  ) {
+  } else if (tempUser.email === null) {
     alert('이메일을 입력해주세요.');
     return false;
   } else if (tempUser.nickname === '' || tempUser.nickname === null) {
@@ -61,7 +57,20 @@ const checkRequiredValue = (tempUser: Me | null) => {
   } else if (tempUser.skillIdList === null || tempUser.skillIdList.length === 0) {
     alert('사용 가능한 기술/툴을 선택해주세요.');
     return false;
-  } else return true;
+  } else {
+    return true;
+  }
+};
+
+const checkValidation = (user: User) => {
+  if (user.email) {
+    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    if (!emailRegex.test(user.email)) {
+      alert('이메일 형식이 올바르지 않습니다.');
+      return false;
+    }
+  }
+  return true;
 };
 
 export const InfoEditSection = ({ handleEditing }: InfoEditSectionProps) => {
@@ -75,7 +84,9 @@ export const InfoEditSection = ({ handleEditing }: InfoEditSectionProps) => {
   const { trigger: mutateUser } = useMeMutation();
 
   const submitModifyHandler = async () => {
-    if (!checkRequiredValue(tempUser)) return;
+    if (!tempUser || !checkRequiredValue(tempUser) || !checkValidation(tempUser)) {
+      return;
+    }
     let profileImageUrl = me?.profileImageUrl;
     let portfolioUrl = me?.portfolioUrl;
     if (tempImage !== null) {