From 005879065b8789f7a0372b781330583138fadea1 Mon Sep 17 00:00:00 2001
From: jiho <jihopark09@naver.com>
Date: Mon, 30 Dec 2024 10:37:24 +0900
Subject: [PATCH] refactor(fe): refactor settings page using context and custom
 hooks

---
 .../settings/_components/CurrentPwSection.tsx |  21 +-
 .../(main)/settings/_components/IdSection.tsx |  13 +-
 .../settings/_components/MajorSection.tsx     |  28 +-
 .../settings/_components/NameSection.tsx      |  24 +-
 .../settings/_components/NewPwSection.tsx     |  21 +-
 .../_components/ReEnterNewPwSection.tsx       |  17 +-
 .../settings/_components/SaveButton.tsx       |   5 +-
 .../settings/_components/StudentIdSection.tsx |  25 +-
 .../settings/_components/TopicSection.tsx     |   6 +-
 .../(main)/settings/_components/context.ts    |  56 ++++
 .../_components/hooks/useCheckPassword.ts     |  49 ++++
 .../(client)/(main)/settings/_libs/schemas.ts |  24 ++
 .../app/(client)/(main)/settings/page.tsx     | 270 +++++++-----------
 13 files changed, 298 insertions(+), 261 deletions(-)
 create mode 100644 apps/frontend/app/(client)/(main)/settings/_components/context.ts
 create mode 100644 apps/frontend/app/(client)/(main)/settings/_components/hooks/useCheckPassword.ts
 create mode 100644 apps/frontend/app/(client)/(main)/settings/_libs/schemas.ts

diff --git a/apps/frontend/app/(client)/(main)/settings/_components/CurrentPwSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/CurrentPwSection.tsx
index 346824b56f..1eae0835b0 100644
--- a/apps/frontend/app/(client)/(main)/settings/_components/CurrentPwSection.tsx
+++ b/apps/frontend/app/(client)/(main)/settings/_components/CurrentPwSection.tsx
@@ -3,35 +3,30 @@ import { Input } from '@/components/shadcn/input'
 import { cn } from '@/libs/utils'
 import invisibleIcon from '@/public/icons/invisible.svg'
 import visibleIcon from '@/public/icons/visible.svg'
-import type { SettingsFormat } from '@/types/type'
 import Image from 'next/image'
 import React from 'react'
-import type { FieldErrors, UseFormRegister } from 'react-hook-form'
 import { FaCheck } from 'react-icons/fa6'
+import { useSettingsContext } from './context'
 
 interface CurrentPwSectionProps {
   currentPassword: string
   isCheckButtonClicked: boolean
   isPasswordCorrect: boolean
-  setPasswordShow: React.Dispatch<React.SetStateAction<boolean>>
-  passwordShow: boolean
   checkPassword: () => Promise<void>
-  register: UseFormRegister<SettingsFormat>
-  errors: FieldErrors<SettingsFormat>
-  updateNow: boolean
 }
 
 export default function CurrentPwSection({
   currentPassword,
   isCheckButtonClicked,
   isPasswordCorrect,
-  setPasswordShow,
-  passwordShow,
-  checkPassword,
-  register,
-  errors,
-  updateNow
+  checkPassword
 }: CurrentPwSectionProps) {
+  const {
+    passwordState: { passwordShow, setPasswordShow },
+    updateNow,
+    formState: { register, errors }
+  } = useSettingsContext()
+
   return (
     <>
       <label className="-mb-4 mt-4 text-xs">Password</label>
diff --git a/apps/frontend/app/(client)/(main)/settings/_components/IdSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/IdSection.tsx
index 4f22d13b8b..57996dfe7f 100644
--- a/apps/frontend/app/(client)/(main)/settings/_components/IdSection.tsx
+++ b/apps/frontend/app/(client)/(main)/settings/_components/IdSection.tsx
@@ -1,17 +1,14 @@
 import { Input } from '@/components/shadcn/input'
+import { useSettingsContext } from './context'
+
+export default function IdSection() {
+  const { isLoading, defaultProfileValues } = useSettingsContext()
 
-export default function IdSection({
-  isLoading,
-  defaultUsername
-}: {
-  isLoading: boolean
-  defaultUsername: string
-}) {
   return (
     <>
       <label className="-mb-4 text-xs">ID</label>
       <Input
-        placeholder={isLoading ? 'Loading...' : defaultUsername}
+        placeholder={isLoading ? 'Loading...' : defaultProfileValues.username}
         disabled={true}
         className="border-neutral-300 text-neutral-600 placeholder:text-neutral-400 disabled:bg-neutral-200"
       />
diff --git a/apps/frontend/app/(client)/(main)/settings/_components/MajorSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/MajorSection.tsx
index d8f73776f8..a18dafcfe9 100644
--- a/apps/frontend/app/(client)/(main)/settings/_components/MajorSection.tsx
+++ b/apps/frontend/app/(client)/(main)/settings/_components/MajorSection.tsx
@@ -17,28 +17,16 @@ import { majors } from '@/libs/constants'
 import { cn } from '@/libs/utils'
 import React from 'react'
 import { FaChevronDown, FaCheck } from 'react-icons/fa6'
+import { useSettingsContext } from './context'
 
-interface MajorSectionProps {
-  majorOpen: boolean
-  setMajorOpen: React.Dispatch<React.SetStateAction<boolean>>
-  majorValue: string
-  setMajorValue: React.Dispatch<React.SetStateAction<string>>
-  updateNow: boolean
-  isLoading: boolean
-  defaultProfileValues: {
-    major?: string
-  }
-}
+export default function MajorSection() {
+  const {
+    isLoading,
+    updateNow,
+    majorState: { majorOpen, setMajorOpen, majorValue, setMajorValue },
+    defaultProfileValues
+  } = useSettingsContext()
 
-export default function MajorSection({
-  majorOpen,
-  setMajorOpen,
-  majorValue,
-  setMajorValue,
-  updateNow,
-  isLoading,
-  defaultProfileValues
-}: MajorSectionProps) {
   return (
     <>
       <label className="-mb-4 mt-2 text-xs">First Major</label>
diff --git a/apps/frontend/app/(client)/(main)/settings/_components/NameSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/NameSection.tsx
index 0946919f16..d8a4714144 100644
--- a/apps/frontend/app/(client)/(main)/settings/_components/NameSection.tsx
+++ b/apps/frontend/app/(client)/(main)/settings/_components/NameSection.tsx
@@ -1,25 +1,19 @@
 import { Input } from '@/components/shadcn/input'
 import { cn } from '@/libs/utils'
-import type { SettingsFormat } from '@/types/type'
-import type { FieldErrors, UseFormRegister } from 'react-hook-form'
+import { useSettingsContext } from './context'
 
 interface NameSectionProps {
-  isLoading: boolean
-  updateNow: boolean
-  defaultProfileValues: { userProfile?: { realName?: string } }
-  register: UseFormRegister<SettingsFormat>
-  errors: FieldErrors<SettingsFormat>
   realName: string
 }
 
-export default function NameSection({
-  isLoading,
-  updateNow,
-  defaultProfileValues,
-  register,
-  errors,
-  realName
-}: NameSectionProps) {
+export default function NameSection({ realName }: NameSectionProps) {
+  const {
+    isLoading,
+    updateNow,
+    defaultProfileValues,
+    formState: { register, errors }
+  } = useSettingsContext()
+
   return (
     <>
       <label className="-mb-4 text-xs">Name</label>
diff --git a/apps/frontend/app/(client)/(main)/settings/_components/NewPwSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/NewPwSection.tsx
index 8e7730c440..09d5757f3b 100644
--- a/apps/frontend/app/(client)/(main)/settings/_components/NewPwSection.tsx
+++ b/apps/frontend/app/(client)/(main)/settings/_components/NewPwSection.tsx
@@ -2,34 +2,29 @@ import { Input } from '@/components/shadcn/input'
 import { cn } from '@/libs/utils'
 import invisibleIcon from '@/public/icons/invisible.svg'
 import visibleIcon from '@/public/icons/visible.svg'
-import type { SettingsFormat } from '@/types/type'
 import Image from 'next/image'
 import React from 'react'
-import type { FieldErrors, UseFormRegister } from 'react-hook-form'
+import { useSettingsContext } from './context'
 
 interface NewPwSectionProps {
-  newPasswordShow: boolean
-  setNewPasswordShow: React.Dispatch<React.SetStateAction<boolean>>
   newPasswordAble: boolean
   isPasswordsMatch: boolean
   newPassword: string
   confirmPassword: string
-  updateNow: boolean
-  register: UseFormRegister<SettingsFormat>
-  errors: FieldErrors<SettingsFormat>
 }
 
 export default function NewPwSection({
-  newPasswordShow,
-  setNewPasswordShow,
   newPasswordAble,
   isPasswordsMatch,
   newPassword,
-  confirmPassword,
-  updateNow,
-  register,
-  errors
+  confirmPassword
 }: NewPwSectionProps) {
+  const {
+    passwordState: { newPasswordShow, setNewPasswordShow },
+    updateNow,
+    formState: { register, errors }
+  } = useSettingsContext()
+
   return (
     <>
       <div className="flex items-center gap-2">
diff --git a/apps/frontend/app/(client)/(main)/settings/_components/ReEnterNewPwSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/ReEnterNewPwSection.tsx
index 0aa62d2649..75f40a0ced 100644
--- a/apps/frontend/app/(client)/(main)/settings/_components/ReEnterNewPwSection.tsx
+++ b/apps/frontend/app/(client)/(main)/settings/_components/ReEnterNewPwSection.tsx
@@ -4,29 +4,28 @@ import visibleIcon from '@/public/icons/visible.svg'
 import type { SettingsFormat } from '@/types/type'
 import Image from 'next/image'
 import React from 'react'
-import type { UseFormRegister, UseFormGetValues } from 'react-hook-form'
+import type { UseFormGetValues } from 'react-hook-form'
+import { useSettingsContext } from './context'
 
 interface ReEnterNewPwSectionProps {
-  confirmPasswordShow: boolean
-  setConfirmPasswordShow: React.Dispatch<React.SetStateAction<boolean>>
   newPasswordAble: boolean
-  updateNow: boolean
-  register: UseFormRegister<SettingsFormat>
   getValues: UseFormGetValues<SettingsFormat>
   confirmPassword: string
   isPasswordsMatch: boolean
 }
 
 export default function ReEnterNewPwSection({
-  confirmPasswordShow,
-  setConfirmPasswordShow,
   newPasswordAble,
-  updateNow,
-  register,
   getValues,
   confirmPassword,
   isPasswordsMatch
 }: ReEnterNewPwSectionProps) {
+  const {
+    updateNow,
+    passwordState: { confirmPasswordShow, setConfirmPasswordShow },
+    formState: { register }
+  } = useSettingsContext()
+
   return (
     <>
       {/* Re-enter new password */}
diff --git a/apps/frontend/app/(client)/(main)/settings/_components/SaveButton.tsx b/apps/frontend/app/(client)/(main)/settings/_components/SaveButton.tsx
index a7a458a290..b31c7740f8 100644
--- a/apps/frontend/app/(client)/(main)/settings/_components/SaveButton.tsx
+++ b/apps/frontend/app/(client)/(main)/settings/_components/SaveButton.tsx
@@ -1,18 +1,19 @@
 import { Button } from '@/components/shadcn/button'
+import { useSettingsContext } from './context'
 
 interface SaveButtonProps {
-  updateNow: boolean
   saveAbleUpdateNow: boolean
   saveAble: boolean
   onSubmitClick: () => void
 }
 
 export default function SaveButton({
-  updateNow,
   saveAbleUpdateNow,
   saveAble,
   onSubmitClick
 }: SaveButtonProps) {
+  const { updateNow } = useSettingsContext()
+
   return (
     <div className="mt-2 text-end">
       <Button
diff --git a/apps/frontend/app/(client)/(main)/settings/_components/StudentIdSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/StudentIdSection.tsx
index 1875e1ef60..fbe6c51b61 100644
--- a/apps/frontend/app/(client)/(main)/settings/_components/StudentIdSection.tsx
+++ b/apps/frontend/app/(client)/(main)/settings/_components/StudentIdSection.tsx
@@ -1,27 +1,18 @@
 import { Input } from '@/components/shadcn/input'
 import { cn } from '@/libs/utils'
-import type { SettingsFormat } from '@/types/type'
-import type { FieldErrors, UseFormRegister } from 'react-hook-form'
+import { useSettingsContext } from './context'
 
 interface StudentIdSectionProps {
   studentId: string
-  updateNow: boolean
-  isLoading: boolean
-  errors: FieldErrors<SettingsFormat>
-  register: UseFormRegister<SettingsFormat>
-  defaultProfileValues: {
-    studentId?: string
-  }
 }
 
-export default function StudentIdSection({
-  studentId,
-  updateNow,
-  isLoading,
-  errors,
-  register,
-  defaultProfileValues
-}: StudentIdSectionProps) {
+export default function StudentIdSection({ studentId }: StudentIdSectionProps) {
+  const {
+    isLoading,
+    updateNow,
+    defaultProfileValues,
+    formState: { register, errors }
+  } = useSettingsContext()
   return (
     <>
       <label className="-mb-4 mt-2 text-xs">Student ID</label>
diff --git a/apps/frontend/app/(client)/(main)/settings/_components/TopicSection.tsx b/apps/frontend/app/(client)/(main)/settings/_components/TopicSection.tsx
index 9afe01773d..658ba46e0a 100644
--- a/apps/frontend/app/(client)/(main)/settings/_components/TopicSection.tsx
+++ b/apps/frontend/app/(client)/(main)/settings/_components/TopicSection.tsx
@@ -1,4 +1,8 @@
-export default function TopicSection({ updateNow }: { updateNow: boolean }) {
+import { useSettingsContext } from './context'
+
+export default function TopicSection() {
+  const { updateNow } = useSettingsContext()
+
   return (
     <>
       <h1 className="-mb-1 text-center text-2xl font-bold">Settings</h1>
diff --git a/apps/frontend/app/(client)/(main)/settings/_components/context.ts b/apps/frontend/app/(client)/(main)/settings/_components/context.ts
new file mode 100644
index 0000000000..60ec7f1b7a
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/settings/_components/context.ts
@@ -0,0 +1,56 @@
+import type { SettingsFormat } from '@/types/type'
+import { createContext, useContext } from 'react'
+import type { FieldErrors, UseFormRegister } from 'react-hook-form'
+
+export interface GetProfile {
+  username: string // ID
+  userProfile: {
+    realName: string
+  }
+  studentId: string
+  major: string
+}
+
+interface PasswordState {
+  passwordShow: boolean
+  setPasswordShow: React.Dispatch<React.SetStateAction<boolean>>
+  newPasswordShow: boolean
+  setNewPasswordShow: React.Dispatch<React.SetStateAction<boolean>>
+  confirmPasswordShow: boolean
+  setConfirmPasswordShow: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+interface MajorState {
+  majorOpen: boolean
+  setMajorOpen: React.Dispatch<React.SetStateAction<boolean>>
+  majorValue: string
+  setMajorValue: React.Dispatch<React.SetStateAction<string>>
+}
+
+interface FormState {
+  register: UseFormRegister<SettingsFormat>
+  errors: FieldErrors<SettingsFormat>
+}
+
+export type SettingsContextType = {
+  defaultProfileValues: GetProfile
+  passwordState: PasswordState
+  majorState: MajorState
+  formState: FormState
+  updateNow: boolean
+  isLoading: boolean
+}
+
+const SettingsContext = createContext<SettingsContextType | undefined>(
+  undefined
+)
+export const SettingsProvider = SettingsContext.Provider
+
+// useSettingsContext custom hook
+export const useSettingsContext = () => {
+  const context = useContext(SettingsContext)
+  if (!context) {
+    throw new Error('useSettingsContext must be used within a SettingsProvider')
+  }
+  return context
+}
diff --git a/apps/frontend/app/(client)/(main)/settings/_components/hooks/useCheckPassword.ts b/apps/frontend/app/(client)/(main)/settings/_components/hooks/useCheckPassword.ts
new file mode 100644
index 0000000000..e5df1ef10b
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/settings/_components/hooks/useCheckPassword.ts
@@ -0,0 +1,49 @@
+import { safeFetcher } from '@/libs/utils'
+import { useState } from 'react'
+
+interface UseCheckPasswordResult {
+  isPasswordCorrect: boolean
+  newPasswordAble: boolean
+  isCheckButtonClicked: boolean
+  checkPassword: () => Promise<void>
+}
+
+/**
+ * Hook that returns whether a new password can be set after verifying the current password
+ * @param defaultProfileValues Default profile values
+ * @param currentPassword The password currently entered by the user
+ */
+export const useCheckPassword = (
+  defaultProfileValues: { username: string },
+  currentPassword: string
+): UseCheckPasswordResult => {
+  const [isPasswordCorrect, setIsPasswordCorrect] = useState(false)
+  const [newPasswordAble, setNewPasswordAble] = useState(false)
+  const [isCheckButtonClicked, setIsCheckButtonClicked] = useState(false)
+
+  const checkPassword = async () => {
+    setIsCheckButtonClicked(true)
+    try {
+      const response = await safeFetcher.post('auth/login', {
+        json: {
+          username: defaultProfileValues.username,
+          password: currentPassword
+        }
+      })
+
+      if (response.status === 201) {
+        setIsPasswordCorrect(true)
+        setNewPasswordAble(true)
+      }
+    } catch {
+      console.error('Failed to check password')
+    }
+  }
+
+  return {
+    isPasswordCorrect,
+    newPasswordAble,
+    isCheckButtonClicked,
+    checkPassword
+  }
+}
diff --git a/apps/frontend/app/(client)/(main)/settings/_libs/schemas.ts b/apps/frontend/app/(client)/(main)/settings/_libs/schemas.ts
new file mode 100644
index 0000000000..799a7fced8
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/settings/_libs/schemas.ts
@@ -0,0 +1,24 @@
+import { z } from 'zod'
+
+export const schemaSettings = (updateNow: boolean) =>
+  z.object({
+    currentPassword: z.string().min(1, { message: 'Required' }).optional(),
+    newPassword: z
+      .string()
+      .min(1)
+      .min(8)
+      .max(20)
+      .refine((data) => {
+        const invalidPassword = /^([a-z]*|[A-Z]*|[0-9]*|[^a-zA-Z0-9]*)$/
+        return !invalidPassword.test(data)
+      })
+      .optional(),
+    confirmPassword: z.string().optional(),
+    realName: z
+      .string()
+      .regex(/^[a-zA-Z\s]+$/, { message: 'Only English Allowed' })
+      .optional(),
+    studentId: updateNow
+      ? z.string().regex(/^\d{10}$/, { message: 'Only 10 numbers' })
+      : z.string().optional()
+  })
diff --git a/apps/frontend/app/(client)/(main)/settings/page.tsx b/apps/frontend/app/(client)/(main)/settings/page.tsx
index 7488911b59..ac343b1d72 100644
--- a/apps/frontend/app/(client)/(main)/settings/page.tsx
+++ b/apps/frontend/app/(client)/(main)/settings/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { safeFetcher, safeFetcherWithAuth } from '@/libs/utils'
+import { safeFetcherWithAuth } from '@/libs/utils'
 import type { SettingsFormat } from '@/types/type'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useRouter, useSearchParams } from 'next/navigation'
@@ -8,7 +8,6 @@ import { useEffect, useRef } from 'react'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'
 import ConfirmModal from './_components/ConfirmModal'
 import CurrentPwSection from './_components/CurrentPwSection'
 import IdSection from './_components/IdSection'
@@ -20,17 +19,12 @@ import ReEnterNewPwSection from './_components/ReEnterNewPwSection'
 import SaveButton from './_components/SaveButton'
 import StudentIdSection from './_components/StudentIdSection'
 import TopicSection from './_components/TopicSection'
+import { SettingsProvider } from './_components/context'
+import type { GetProfile, SettingsContextType } from './_components/context'
+import { useCheckPassword } from './_components/hooks/useCheckPassword'
+import { schemaSettings } from './_libs/schemas'
 import { useConfirmNavigation } from './_libs/utils'
 
-interface getProfile {
-  username: string // ID
-  userProfile: {
-    realName: string
-  }
-  studentId: string
-  major: string
-}
-
 type UpdatePayload = Partial<{
   password: string
   newPassword: string
@@ -39,35 +33,12 @@ type UpdatePayload = Partial<{
   major: string
 }>
 
-const schemaSettings = (updateNow: boolean) =>
-  z.object({
-    currentPassword: z.string().min(1, { message: 'Required' }).optional(),
-    newPassword: z
-      .string()
-      .min(1)
-      .min(8)
-      .max(20)
-      .refine((data) => {
-        const invalidPassword = /^([a-z]*|[A-Z]*|[0-9]*|[^a-zA-Z0-9]*)$/
-        return !invalidPassword.test(data)
-      })
-      .optional(),
-    confirmPassword: z.string().optional(),
-    realName: z
-      .string()
-      .regex(/^[a-zA-Z\s]+$/, { message: 'Only English Allowed' })
-      .optional(),
-    studentId: updateNow
-      ? z.string().regex(/^\d{10}$/, { message: 'Only 10 numbers' })
-      : z.string().optional()
-  })
-
 export default function Page() {
   const searchParams = useSearchParams()
   const updateNow = searchParams.get('updateNow')
   const router = useRouter()
   const bypassConfirmation = useRef<boolean>(false)
-  const [defaultProfileValues, setdefaultProfileValues] = useState<getProfile>({
+  const [defaultProfileValues, setdefaultProfileValues] = useState<GetProfile>({
     username: '',
     userProfile: {
       realName: ''
@@ -76,10 +47,11 @@ export default function Page() {
     major: ''
   })
 
+  // Fetch default profile values
   useEffect(() => {
     const fetchDefaultProfile = async () => {
       try {
-        const data: getProfile = await safeFetcherWithAuth.get('user').json()
+        const data: GetProfile = await safeFetcherWithAuth.get('user').json()
         setMajorValue(data.major)
         setdefaultProfileValues(data)
         setIsLoading(false)
@@ -111,12 +83,21 @@ export default function Page() {
     }
   })
 
+  const currentPassword = watch('currentPassword')
+  const newPassword = watch('newPassword')
+  const confirmPassword = watch('confirmPassword')
+  const realName = watch('realName')
+  const studentId = watch('studentId')
+
   const { isConfirmModalOpen, setIsConfirmModalOpen, confirmAction } =
     useConfirmNavigation(bypassConfirmation, !!updateNow)
-  const [isCheckButtonClicked, setIsCheckButtonClicked] =
-    useState<boolean>(false)
-  const [isPasswordCorrect, setIsPasswordCorrect] = useState<boolean>(false)
-  const [newPasswordAble, setNewPasswordAble] = useState<boolean>(false)
+  const {
+    isPasswordCorrect,
+    newPasswordAble,
+    isCheckButtonClicked,
+    checkPassword
+  } = useCheckPassword(defaultProfileValues, currentPassword)
+
   const [passwordShow, setPasswordShow] = useState<boolean>(false)
   const [newPasswordShow, setNewPasswordShow] = useState<boolean>(false)
   const [confirmPasswordShow, setConfirmPasswordShow] = useState<boolean>(false)
@@ -124,12 +105,6 @@ export default function Page() {
   const [majorValue, setMajorValue] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>(true)
 
-  const currentPassword = watch('currentPassword')
-  const newPassword = watch('newPassword')
-  const confirmPassword = watch('confirmPassword')
-  const realName = watch('realName')
-  const studentId = watch('studentId')
-
   const isPasswordsMatch = newPassword === confirmPassword && newPassword !== ''
   const saveAblePassword: boolean =
     !!currentPassword &&
@@ -198,42 +173,47 @@ export default function Page() {
     }
   }
 
-  const onSubmitClick = () => {
-    // submit 되기위해, watch로 확인되는 값이 default값과 같으면 setValue를 통해서 defaultProfileValues로 변경
-    if (realName === '') {
-      setValue('realName', defaultProfileValues.userProfile?.realName)
-    }
-    if (majorValue === defaultProfileValues.major) {
-      setMajorValue(defaultProfileValues.major)
-    }
-    if (currentPassword === '') {
-      setValue('currentPassword', 'tmppassword1')
-    }
-    if (newPassword === '') {
-      setValue('newPassword', 'tmppassword1')
-    }
-    if (confirmPassword === '') {
-      setValue('confirmPassword', 'tmppassword1')
-    }
+  const resetToSubmittableValue = (
+    field: 'realName' | 'currentPassword' | 'newPassword' | 'confirmPassword',
+    value: string | undefined,
+    defaultValue: string
+  ) => {
+    if (value === '') setValue(field, defaultValue)
   }
 
-  const checkPassword = async () => {
-    setIsCheckButtonClicked(true)
-    try {
-      const response = await safeFetcher.post('auth/login', {
-        json: {
-          username: defaultProfileValues.username,
-          password: currentPassword
-        }
-      })
+  const onSubmitClick = () => {
+    resetToSubmittableValue(
+      'realName',
+      realName,
+      defaultProfileValues.userProfile?.realName ?? ''
+    )
+    resetToSubmittableValue('currentPassword', currentPassword, 'tmppassword1')
+    resetToSubmittableValue('newPassword', newPassword, 'tmppassword1')
+    resetToSubmittableValue('confirmPassword', confirmPassword, 'tmppassword1')
+  }
 
-      if (response.status === 201) {
-        setIsPasswordCorrect(true)
-        setNewPasswordAble(true)
-      }
-    } catch {
-      console.error('Failed to check password')
-    }
+  const settingsContextValue: SettingsContextType = {
+    defaultProfileValues,
+    passwordState: {
+      passwordShow,
+      setPasswordShow,
+      newPasswordShow,
+      setNewPasswordShow,
+      confirmPasswordShow,
+      setConfirmPasswordShow
+    },
+    majorState: {
+      majorOpen,
+      setMajorOpen,
+      majorValue,
+      setMajorValue
+    },
+    formState: {
+      register,
+      errors
+    },
+    updateNow: !!updateNow,
+    isLoading
   }
 
   return (
@@ -241,90 +221,54 @@ export default function Page() {
       {/* Logo */}
       <LogoSection />
 
-      {/* Form */}
-      <form
-        onSubmit={handleSubmit(onSubmit)}
-        className="flex h-svh max-h-[846px] w-full flex-col justify-between gap-4 overflow-y-auto px-4"
-      >
-        {/* Topic */}
-        <TopicSection updateNow={!!updateNow} />
-        {/* ID */}
-        <IdSection
-          isLoading={isLoading}
-          defaultUsername={defaultProfileValues.username}
-        />
-        {/* Current password */}
-        <CurrentPwSection
-          currentPassword={currentPassword}
-          isCheckButtonClicked={isCheckButtonClicked}
-          isPasswordCorrect={isPasswordCorrect}
-          setPasswordShow={setPasswordShow}
-          passwordShow={passwordShow}
-          checkPassword={checkPassword}
-          register={register}
-          errors={errors}
-          updateNow={!!updateNow}
-        />
-        {/* New password */}
-        <NewPwSection
-          newPasswordShow={newPasswordShow}
-          setNewPasswordShow={setNewPasswordShow}
-          newPasswordAble={newPasswordAble}
-          isPasswordsMatch={isPasswordsMatch}
-          newPassword={newPassword}
-          confirmPassword={confirmPassword}
-          updateNow={!!updateNow}
-          register={register}
-          errors={errors}
-        />
-        {/* Re-enter new password */}
-        <ReEnterNewPwSection
-          confirmPasswordShow={confirmPasswordShow}
-          setConfirmPasswordShow={setConfirmPasswordShow}
-          newPasswordAble={newPasswordAble}
-          updateNow={!!updateNow}
-          register={register}
-          getValues={getValues}
-          confirmPassword={confirmPassword}
-          isPasswordsMatch={isPasswordsMatch}
-        />
-        <hr className="my-4 border-neutral-200" />
-        {/* Name */}
-        <NameSection
-          isLoading={isLoading}
-          updateNow={!!updateNow}
-          defaultProfileValues={defaultProfileValues}
-          register={register}
-          errors={errors}
-          realName={realName}
-        />
-        {/* Student ID */}
-        <StudentIdSection
-          studentId={studentId}
-          updateNow={!!updateNow}
-          isLoading={isLoading}
-          errors={errors}
-          register={register}
-          defaultProfileValues={defaultProfileValues}
-        />
-        {/* Major */}
-        <MajorSection
-          majorOpen={majorOpen}
-          setMajorOpen={setMajorOpen}
-          majorValue={majorValue}
-          setMajorValue={setMajorValue}
-          updateNow={!!updateNow}
-          isLoading={isLoading}
-          defaultProfileValues={defaultProfileValues}
-        />
-        {/* Save Button */}
-        <SaveButton
-          updateNow={!!updateNow}
-          saveAble={saveAble}
-          saveAbleUpdateNow={saveAbleUpdateNow}
-          onSubmitClick={onSubmitClick}
-        />
-      </form>
+      <SettingsProvider value={settingsContextValue}>
+        {/* Form */}
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex h-svh max-h-[846px] w-full flex-col justify-between gap-4 overflow-y-auto px-4"
+        >
+          {/* Topic */}
+          <TopicSection />
+          {/* ID */}
+          <IdSection />
+          {/* Current password */}
+          <CurrentPwSection
+            currentPassword={currentPassword}
+            isCheckButtonClicked={isCheckButtonClicked}
+            isPasswordCorrect={isPasswordCorrect}
+            checkPassword={checkPassword}
+          />
+          {/* New password */}
+          <NewPwSection
+            newPasswordAble={newPasswordAble}
+            isPasswordsMatch={isPasswordsMatch}
+            newPassword={newPassword}
+            confirmPassword={confirmPassword}
+          />
+          {/* Re-enter new password */}
+          <ReEnterNewPwSection
+            newPasswordAble={newPasswordAble}
+            getValues={getValues}
+            confirmPassword={confirmPassword}
+            isPasswordsMatch={isPasswordsMatch}
+          />
+
+          <hr className="my-4 border-neutral-200" />
+
+          {/* Name */}
+          <NameSection realName={realName} />
+          {/* Student ID */}
+          <StudentIdSection studentId={studentId} />
+          {/* Major */}
+          <MajorSection />
+          {/* Save Button */}
+          <SaveButton
+            saveAble={saveAble}
+            saveAbleUpdateNow={saveAbleUpdateNow}
+            onSubmitClick={onSubmitClick}
+          />
+        </form>
+      </SettingsProvider>
 
       <ConfirmModal
         title="Are you sure you want to leave?"