From 3f0be3d2b503ef4da4e069b8f1d595b6e596fad0 Mon Sep 17 00:00:00 2001
From: Jimin <jimin4124.22@gmail.com>
Date: Tue, 18 Jun 2024 13:04:09 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B6=80=EB=AA=A8=EB=8B=98=20=EB=B3=84?=
 =?UTF-8?q?=EB=AA=85=20=EA=B8=80=EC=9E=90=EC=88=98=20=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MyPage/MemberManagement.jsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pages/MyPage/MemberManagement.jsx b/src/pages/MyPage/MemberManagement.jsx
index 967e7d0..30d9eda 100644
--- a/src/pages/MyPage/MemberManagement.jsx
+++ b/src/pages/MyPage/MemberManagement.jsx
@@ -38,6 +38,8 @@ const MemberManagement = () => {
       case 1:
         if (!requestData.nickname) {
           alert("부모님의 닉네임을 입력해주세요! (ex. 엄마)");
+        } else if (requestData.nickname.length > 5) {
+          alert("닉네임은 5글자 이내로 입력해주세요!");
         } else {
           setStep(step + 1);
         }
@@ -48,10 +50,10 @@ const MemberManagement = () => {
   };
 
   const handleInputChange = (e) => {
-    const inputValue = e.target.value.slice(0, 5);
+    const value = e.target.value;
     setRequestData({
       ...requestData,
-      nickname: inputValue,
+      nickname: value,
     });
   };
 
@@ -96,7 +98,7 @@ const MemberManagement = () => {
               <Img src={NicknameImage} alt="nickname" />
             </CompleteContainer>
             <StyledInputWrapper>
-              <StyledInput placeholder="부모님을 뭐라고 부를까요?" onChange={handleInputChange} value={requestData.content}></StyledInput>
+              <StyledInput placeholder="부모님을 뭐라고 부를까요?" onChange={handleInputChange} value={requestData.nickname} maxLength={5}></StyledInput>
             </StyledInputWrapper>
           </S.StepWrapper>
         )}
@@ -121,6 +123,11 @@ const MemberManagement = () => {
 
 export default MemberManagement;
 
+const Icon = styled.img`
+  width: 24px;
+  height: auto;
+`;
+
 const SearchWrapper = styled.div`
   display: flex;
   width: 100%;
@@ -132,11 +139,6 @@ const SearchWrapper = styled.div`
   margin: 10px 0;
 `;
 
-const Icon = styled.img`
-  width: 24px;
-  height: auto;
-`;
-
 const Search = styled.input`
   background-color: #f2f2f2;
   border-radius: 15px;