Feat(mypage): custom hook 적용

src/app/(main)/mypage/_components/user-info/UserInfoSection.tsx

@@ -1,11 +1,9 @@
-'use client'
-
-import { useState } from 'react'
-
 import { GitHubLogoIcon, InstagramLogoIcon } from '@radix-ui/react-icons'
 
 import { Button, Input } from '@/components/ui'
 
+import { useEditProfileIntro, useSocialInfo } from '../../_hooks'
+
 interface UserInfoSectionProps {
   githubInfo: string
   instagramInfo: string
@@ -17,61 +15,29 @@ const UserInfoSection = ({
   instagramInfo: initialInstagramInfo,
   profileIntro: initialProfileIntro,
 }: UserInfoSectionProps) => {
-  const [profileIntro, setProfileIntro] = useState(initialProfileIntro)
-  const [isEditing, setIsEditing] = useState(false)
-  const [tempProfileIntro, setTempProfileIntro] = useState(initialProfileIntro)
-
-  const [githubInfo, setGithubInfo] = useState(initialGithubInfo)
-  const [instagramInfo, setInstagramInfo] = useState(initialInstagramInfo)
-  const [isEditingSocial, setIsEditingSocial] = useState(false)
-  const [tempGithubInfo, setTempGithubInfo] = useState(initialGithubInfo)
-  const [tempInstagramInfo, setTempInstagramInfo] =
-    useState(initialInstagramInfo)
-
-  const onEditProfileIntro = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault()
+  const {
+    value: profileIntro,
+    isEditing: isEditingIntro,
+    tempValue: tempProfileIntro,
+    setTempValue: setTempProfileIntro,
+    editProfileIntro,
+    keyDownEditProfileIntro,
+  } = useEditProfileIntro({ initialValue: initialProfileIntro })
 
-    if (isEditing) {
-      setProfileIntro(tempProfileIntro)
-      setIsEditing(false)
-    } else {
-      setTempProfileIntro(profileIntro)
-      setIsEditing(true)
-    }
-  }
-
-  const onEditProfileIntroKeyDown = (
-    e: React.KeyboardEvent<HTMLInputElement>,
-  ) => {
-    if (e.key === 'Enter') {
-      setProfileIntro(tempProfileIntro)
-      setIsEditing(false)
-    }
-  }
-
-  const onEditSocialInfo = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault()
-
-    if (isEditingSocial) {
-      setGithubInfo(tempGithubInfo)
-      setInstagramInfo(tempInstagramInfo)
-      setIsEditingSocial(false)
-    } else {
-      setTempGithubInfo(githubInfo)
-      setTempInstagramInfo(instagramInfo)
-      setIsEditingSocial(true)
-    }
-  }
-
-  const onEditSocialInfoKeyDown = (
-    e: React.KeyboardEvent<HTMLInputElement>,
-  ) => {
-    if (e.key === 'Enter') {
-      setGithubInfo(tempGithubInfo)
-      setInstagramInfo(tempInstagramInfo)
-      setIsEditingSocial(false)
-    }
-  }
+  const {
+    githubInfo,
+    instagramInfo,
+    isEditing: isEditingSocial,
+    tempGithubInfo,
+    tempInstagramInfo,
+    setTempGithubInfo,
+    setTempInstagramInfo,
+    editSocialInfo,
+    keyDownEditSocialInfo,
+  } = useSocialInfo({
+    initialGithubInfo,
+    initialInstagramInfo,
+  })
 
   return (
     <section className="mt-10 flex h-full w-full flex-col space-y-5">
@@ -81,13 +47,13 @@ const UserInfoSection = ({
             한 줄 소개
           </div>
           <div className="md:y-0 y-5 flex h-10 gap-5">
-            {isEditing ? (
+            {isEditingIntro ? (
               <div className="flex h-10 w-full justify-center md:w-auto">
                 <Input
                   className="w-full md:w-auto"
                   value={tempProfileIntro}
                   onChange={(e) => setTempProfileIntro(e.target.value)}
-                  onKeyDown={onEditProfileIntroKeyDown}
+                  onKeyDown={keyDownEditProfileIntro}
                   autoFocus
                 />
               </div>
@@ -101,9 +67,9 @@ const UserInfoSection = ({
         <Button
           className="w-fit px-0 py-0 font-semibold text-destructive hover:text-destructive md:px-3 md:py-[2px]"
           variant="ghost"
-          onClick={(e) => onEditProfileIntro(e)}
+          onClick={(e) => editProfileIntro(e)}
         >
-          {isEditing ? '완료' : '수정'}
+          {isEditingIntro ? '완료' : '수정'}
         </Button>
       </div>
       <div className="text-sm text-zinc-400 md:text-base">
@@ -125,7 +91,7 @@ const UserInfoSection = ({
                   className="w-full md:w-auto"
                   value={tempGithubInfo}
                   onChange={(e) => setTempGithubInfo(e.target.value)}
-                  onKeyDown={onEditSocialInfoKeyDown}
+                  onKeyDown={keyDownEditSocialInfo}
                   autoFocus
                 />
               ) : (
@@ -141,7 +107,8 @@ const UserInfoSection = ({
                   className="w-full md:w-auto"
                   value={tempInstagramInfo}
                   onChange={(e) => setTempInstagramInfo(e.target.value)}
-                  onKeyDown={onEditSocialInfoKeyDown}
+                  onKeyDown={keyDownEditSocialInfo}
+                  autoFocus
                 />
               ) : (
                 <span>{instagramInfo}</span>
@@ -155,7 +122,7 @@ const UserInfoSection = ({
         <Button
           className="w-fit px-0 py-0 font-semibold text-destructive hover:text-destructive md:px-3 md:py-[2px]"
           variant="ghost"
-          onClick={(e) => onEditSocialInfo(e)}
+          onClick={(e) => editSocialInfo(e)}
         >
           {isEditingSocial ? '완료' : '수정'}
         </Button>