Merge pull request #90 from miind-palace/feature-#67

Feature #67 로그인/회원가입 통신 로직 개선 및 버그 해결

Author: joogle-ay

components/CheckEmailForm/CheckEmailForm.tsx

@@ -0,0 +1,70 @@
+import { ChangeEvent, FormEvent } from 'react'
+import styled from '@emotion/styled'
+import Input from '@/components/common/Input/Input'
+import BasicButton from '../common/Button/BasicButton'
+import Spacing from '../common/Spacing/Spacing'
+import { axiosHttp } from '@/lib/utils/httpCore'
+import { validateEmail } from '@/lib/utils/validateUserInfo'
+
+interface CheckEmailFormProps {
+  email: string
+  onChangeEmail: (e: ChangeEvent<HTMLInputElement>) => void
+  goNextStep: () => void
+}
+
+export default function CheckEmailForm({ email, onChangeEmail, goNextStep }: CheckEmailFormProps) {
+  const checkValidateEmail = async (email: string) => {
+    const { data } = await axiosHttp.post(`/member/mailCheck?memberEmail=${email}`)
+    const result = {
+      ...data,
+    }
+    return result
+  }
+
+  const handleValidateEmail = async (e: FormEvent) => {
+    e.preventDefault()
+    console.log('clicked!')
+
+    // 이메일 형식 체크 로직
+    const isValidEmail = validateEmail(email)
+    if (!isValidEmail) {
+      alert('이메일 형식이 올바르지 않습니다.')
+      return
+    }
+
+    // 이메일 중복 검증 로직
+    const { duplicated, message } = await checkValidateEmail(email)
+    if (duplicated) {
+      alert(message)
+      return
+    }
+
+    alert('사용할 수 있는 이메일입니다.')
+    goNextStep()
+  }
+
+  return (
+    <Wrapper>
+      <form onSubmit={handleValidateEmail} autoComplete="off">
+        <Spacing size={20} />
+        <Input
+          inputLabel="Email"
+          id="email"
+          type="text"
+          name="email"
+          colorType="PENETRATED_WHITE"
+          onChange={onChangeEmail}
+        />
+        <Spacing size={10} />
+        <BasicButton type="submit">이메일 중복 확인</BasicButton>
+      </form>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const AVAILABLE_EMAIL_MSG = '사용가능한 이메일입니다!'

components/Layout/Layout.tsx

@@ -1,20 +1,30 @@
 import styled from '@emotion/styled'
+import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'
 
 const Layout = ({ children }: PropsWithChildren) => {
+  const router = useRouter()
+
+  const tempLogout = () => {
+    localStorage.removeItem('memberId')
+    router.push('/sign-in')
+    alert('로그아웃 되었습니다.')
+  }
+
   return (
-    <TempBody>
-      <LayoutContainer>{children}</LayoutContainer>
-    </TempBody>
+    <LayoutContainer>
+      <TempLogoutButton onClick={tempLogout}>로그아웃(임시)</TempLogoutButton>
+      {children}
+    </LayoutContainer>
   )
 }
 
 export default Layout
 
-const TempBody = styled.div`
-  // 작업 편의성을 위하여 임시로 부여한 스타일.
-  // 데모데이 직전에 본 부분 제거 예정입니다.
-  background: #f4f4f4;
+const TempLogoutButton = styled.button`
+  position: fixed;
+  top: 10px;
+  left: 10px;
 `
 
 const LayoutContainer = styled.div`

components/SigninForm/SigninForm.tsx

@@ -1,93 +1,80 @@
 import { useState, FormEvent, ChangeEvent, MouseEvent, useEffect } from 'react'
 import { useRouter } from 'next/router'
-import axios from 'axios'
 import styled from '@emotion/styled'
 import { SecurityIcon } from '../Icons'
 import Input from '@/components/common/Input/Input'
 import Link from 'next/link'
 import BasicButton from '../common/Button/BasicButton'
 import Spacing from '../common/Spacing/Spacing'
+import { axiosHttp } from '@/lib/utils/httpCore'
+
+const initialSignInValue = {
+  email: '',
+  password: '',
+}
 
 export default function SigninForm() {
   const router = useRouter()
 
   useEffect(() => {
-    // 마운트 시 토큰 존재하면 업로드 페이지 이동 -> ( api 받으면 추후 세션 방식으로 바꿔야 한다 ) - 자동 로그인 되어있을 경우 업로드로 라우팅도 구현해야
+    // 마운트시 localStorage에 memberId 있으면 upload 페이지로 라우팅
     if (localStorage.getItem('memberId')) {
       router.push('/upload')
     }
   }, [router])
 
-  const [signinConditions, setSigninConditions] = useState({
-    email: '',
-    password: '',
-  })
+  const [signInValue, setSignInValue] = useState(initialSignInValue)
 
-  const updateSigninConditions = (e: ChangeEvent<HTMLInputElement>) => {
-    // input 값에 onChange 를 통해 Conditions 을 변화시키는 함수
+  const handleChangeSigninValue = (e: ChangeEvent<HTMLInputElement>) => {
     const { value, name } = e.target
-    setSigninConditions((prevConditions) => ({
-      ...prevConditions,
-      [name]: value, // 네임 가져와서 네임에 맞는 애로 변경
+    setSignInValue((prev) => ({
+      ...prev,
+      [name]: value,
     }))
   }
 
-  const signinFunction = async (e: FormEvent) => {
-    // 로그인 버튼 클릭시 폼 제출 후 업로드 페이지로 라우팅
+  const handleSignIn = async (e: FormEvent) => {
     e.preventDefault()
-
-    if (!signinConditions.email || !signinConditions.password) return alert('아이디나 비밀번호를 입력하세요!')
+    if (!signInValue.email || !signInValue.password) return alert('아이디 혹은 비밀번호를 입력하세요!')
 
     try {
-      const response = await axios.post(`${process.env.NEXT_PUBLIC_SERVER_DEFAULT_END_POINT}member/login`, {
-        memberEmail: signinConditions.email,
-        memberPassword: signinConditions.password,
+      const response = await axiosHttp.post(`/member/login`, {
+        memberEmail: signInValue.email,
+        memberPassword: signInValue.password,
       })
-
-      if (response.data === '로그인 실패') return alert(response.data)
-
       localStorage.setItem('memberId', response.data.id)
       router.push('/upload')
     } catch (error) {
-      alert('아이디나 비밀번호를 확인하세요!')
+      if (error instanceof Error) alert(error.message)
     }
   }
 
-  const goToSignupPage = (e: MouseEvent<HTMLAnchorElement>) => {
-    // Make an Account 클릭시 회원가입 페이지로 이동
-    e.preventDefault()
-
-    router.push('/sign-up')
-  }
-
   return (
     <Wrapper>
-      <form onSubmit={signinFunction}>
+      <form onSubmit={handleSignIn}>
         <Spacing size={20} />
         <Input
-          value={signinConditions.email}
+          value={signInValue.email}
           inputLabel="Email"
           type="text"
           name="email"
-          onChange={updateSigninConditions}
+          onChange={handleChangeSigninValue}
           colorType="PENETRATED_BLACK"
         />
         <Spacing size={20} />
         <Input
-          value={signinConditions.password}
+          value={signInValue.password}
           inputLabel="Password"
           type="password"
           name="password"
-          onChange={updateSigninConditions}
+          onChange={handleChangeSigninValue}
           svgIcon={<SecurityIcon width="16" height="17" color="white" />}
           colorType="PENETRATED_BLACK"
         />
         <Spacing size={70} />
         <BasicButton>Log in</BasicButton>
         <Spacing size={20} />
-        <StyledLink href="#" onClick={goToSignupPage}>
-          Make an account
-        </StyledLink>
+        <StyledLink href="/sign-up">Make an account</StyledLink>
       </form>
     </Wrapper>
   )