Merge pull request #270 from ItRecode/FE-252

[FE-252] feat: 탈퇴하기 닉네임 일치 구현

Author: sookyeonghwang

src/components/Alert.tsx

@@ -30,9 +30,11 @@ export default function Alert({
     <Modal visible={visible} onClose={onClose}>
       <div className="flex h-auto w-[270px] flex-col justify-center">
         <div className="flex flex-col items-center justify-center border-b border-grey-2 py-6 text-center">
-          <div className="text-base font-semibold leading-6">{mainMessage}</div>
+          <div className="text-[18px] font-semibold leading-[24px]">
+            {mainMessage}
+          </div>
           {subMessage && (
-            <div className="pt-4 text-xs font-medium text-grey-8">
+            <div className="pt-4 text-[12px] font-medium leading-[18px] text-grey-8">
               {subMessage}
             </div>
           )}

src/pages/Setting/Setting.tsx

@@ -92,7 +92,11 @@ export default function Setting() {
             <SettingSection routeText="로그아웃" />
           </section>
           <section id="withdraw-item-section">
-            <SettingSection routeText="회원탈퇴" routeUrl="/setting/withdraw" />
+            <SettingSection
+              routeText="회원탈퇴"
+              routeUrl="/setting/withdraw"
+              state={{ nickname: user.data }}
+            />
           </section>
         </div>
       )}

src/pages/Setting/Withdraw/CheckedNicknameBeforeWithDraw.tsx

@@ -0,0 +1,125 @@
+import React, { useRef, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { NICKNAME_MAX_LENGTH } from '@assets/constant/constant'
+import { ReactComponent as CloseIcon } from '@assets/icon_closed.svg'
+import { ReactComponent as Back } from '@assets/back.svg'
+import useDebounce from '@hooks/useDebounce'
+import Button from '@components/Button'
+import Alert from '@components/Alert'
+
+export default function CheckedNicknameBeforeWithDraw() {
+  const navigate = useNavigate()
+  const { state } = useLocation()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [isCheckedNickname, setIsCheckedNickname] = useState(false)
+  const [nickname, setNickname] = useState('')
+  const [message, setMessage] = useState('')
+  const [inputBorderStyle, setInputBorderStyle] = useState('')
+  const [isFocusInput, setIsFocusInput] = useState(false)
+  const [alertOpen, setAlertOpen] = useState(false)
+
+  useDebounce(
+    async () => {
+      setMessage('')
+      setInputBorderStyle('')
+      setIsCheckedNickname(false)
+      if (nickname.length > 0) {
+        if (state.nickname === nickname) {
+          setIsCheckedNickname(true)
+          setInputBorderStyle('border border-solid border-grey-10')
+        } else {
+          setMessage('닉네임이 일치하지 않아요.')
+          setInputBorderStyle('border border-solid border-sub-1')
+          setIsCheckedNickname(false)
+        }
+      }
+    },
+    300,
+    [nickname]
+  )
+
+  return (
+    <>
+      <section id="route-backIcon-button" className="ml-[18px] mt-4">
+        <Back
+          className="cursor-pointer"
+          onClick={() => navigate('/setting', { replace: true })}
+        />
+      </section>
+      <section
+        id="checked-nickname-before-withdraw-info"
+        className="mt-11 px-6"
+      >
+        <h1 className="text-[20px] font-medium leading-[30px]">
+          계속 탈퇴를 진행하시려면
+          <br />
+          닉네임을 입력해 확인해주세요
+        </h1>
+        <div className="mt-10 h-[70px]">
+          <p className="font-medium">닉네임</p>
+          <div className="relative mt-[9px] flex w-full items-center">
+            <input
+              ref={inputRef}
+              id="modify-nickname-input"
+              value={nickname}
+              placeholder={isFocusInput || !state ? '' : state.nickname}
+              className={`w-full rounded-[8px] bg-grey-2 py-[17px] pl-[12px] text-[14px] font-medium placeholder:text-grey-5 focus:outline-none
+              ${inputBorderStyle}`}
+              autoComplete="off"
+              onChange={(e) => setNickname(e.target.value)}
+              onFocus={() => setIsFocusInput(true)}
+              onBlur={() => setIsFocusInput(false)}
+              maxLength={NICKNAME_MAX_LENGTH}
+            />
+            <CloseIcon
+              className="absolute right-[10px] cursor-pointer"
+              onClick={() => {
+                setNickname('')
+                inputRef.current?.focus()
+              }}
+            />
+          </div>
+          {nickname.length > 0 && (
+            <p
+              className={`pt-3 text-sm ${
+                isCheckedNickname ? 'text-grey-10' : 'text-sub-1'
+              }`}
+            >
+              {isCheckedNickname ? '닉네임이 일치해요.' : message}
+            </p>
+          )}
+        </div>
+        <div className="mt-[104px] w-full">
+          <Button
+            property="danger"
+            type="submit"
+            active={isCheckedNickname}
+            disabled={!isCheckedNickname}
+            onClick={() => setAlertOpen(true)}
+          >
+            탈퇴하기
+          </Button>
+        </div>
+      </section>
+      <Alert
+        visible={alertOpen}
+        mainMessage={
+          <>
+            {nickname}님, <br /> 탈퇴하신다니 너무 아쉬워요
+          </>
+        }
+        subMessage={
+          <>
+            탈퇴 후 <span className="text-sub-1">1주일 간</span>
+            <br /> 재가입이 불가능해요.
+          </>
+        }
+        confirmMessage="예"
+        cancelMessage="아니오"
+        onConfirm={() => setAlertOpen(false)}
+        onClose={() => setAlertOpen(false)}
+        onCancel={() => setAlertOpen(false)}
+      />
+    </>
+  )
+}

src/pages/Setting/Withdraw/Withdraw.tsx

@@ -1,8 +1,12 @@
 import React from 'react'
 import Button from '@components/Button'
 import BackButton from '@components/BackButton'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 const Withdraw = () => {
+  const navigate = useNavigate()
+  const { state } = useLocation()
+
   return (
     <>
       <section id="route-backIcon-button" className="ml-[18px] mt-4">
@@ -37,7 +41,12 @@ const Withdraw = () => {
         </ul>
       </section>
       <section id="withdraw-navigate-button" className="mt-[180px] px-6">
-        <Button property="danger">탈퇴하기</Button>
+        <Button
+          property="danger"
+          onClick={() => navigate('/setting/withdraw/check', { state })}
+        >
+          탈퇴하기
+        </Button>
       </section>
     </>
   )

src/routes/router.tsx

@@ -22,6 +22,7 @@ import ManageComment from '@pages/Setting/ManageComment/ManageComment'
 import TeamIntroduction from '@pages/Setting/TeamIntroduction/TeamIntroduction'
 import FeedbackMail from '@pages/Setting/FeedbackMail/FeedbackMail'
 import Withdraw from '@pages/Setting/Withdraw/Withdraw'
+import CheckedNicknameBeforeWithDraw from '@pages/Setting/Withdraw/CheckedNicknameBeforeWithDraw'
 
 const router = createBrowserRouter([
   {
@@ -103,7 +104,10 @@ const router = createBrowserRouter([
       },
       {
         path: 'withdraw',
-        element: <Withdraw />,
+        children: [
+          { index: true, element: <Withdraw /> },
+          { path: 'check', element: <CheckedNicknameBeforeWithDraw /> },
+        ],
       },
     ],
   },