Merge remote-tracking branch 'origin/dev' into feat/mypage#106

Author: mtm-git1018

src/domains/mypage/components/EditNickName.tsx

@@ -4,11 +4,12 @@ import TextButton from '@/shared/components/button/TextButton';
 import Input from '@/shared/components/Input-box/Input';
 import ModalLayout from '@/shared/components/modal-pop/ModalLayout';
 import { useToast } from '@/shared/hook/useToast';
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 interface Props {
   open: boolean;
   onClose: () => void;
+  nickname:string
   setNickName: (v: string) => void;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
   editNickName: string;
@@ -18,14 +19,22 @@ interface Props {
 function EditNickName({
   open,
   onClose,
+  nickname,
   setNickName,
   setIsOpen,
   editNickName,
   setEditNickName,
 }: Props) {
-  const { toastError } = useToast();
+  const [defaultNickname,setDefaultNickname] = useState(nickname)
+  const { toastSuccess,toastError } = useToast();
+
+  useEffect(() => {
+    setEditNickName(nickname)
+    setDefaultNickname(nickname)
+  }, [nickname,setEditNickName])
+  
   const handlesave = async () => {
-    if (editNickName.length <= 1) {
+    if (editNickName.length <= 1 || editNickName.length >= 8) {
       toastError('닉네임은 2글자 이상 입력해야합니다');
       return;
     }
@@ -43,16 +52,22 @@ function EditNickName({
       }),
     });
     await setIsOpen(false);
+    toastSuccess('닉네임이 저장되었습니다.');
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setEditNickName(e.target.value);
+
   };
 
+  const handleDefaultNickname = () => {
+   setEditNickName(defaultNickname)
+  }
+
   return (
     <ModalLayout
-      title="닉네임 수정"
-      description="닉네임을 수정해주세요."
+      title="닉네임 변경"
+      description="닉네임을 변경해주세요."
       open={open}
       onClose={onClose}
       buttons={
@@ -67,11 +82,12 @@ function EditNickName({
         </label>
         <Input
           onChange={(e) => handleChange(e)}
-          placeholder="8글자 이내로 입력해주세요"
+          placeholder="닉네임을 2글자 이상 8글자 이내로 입력해주세요"
           id="editNickName"
+          value={editNickName}
           className="w-full"
         />
-        <TextButton onClick={onClose}>기존 이름으로 돌아가기</TextButton>
+        <TextButton onClick={handleDefaultNickname}>전 닉네임으로 돌아가기</TextButton>
       </div>
     </ModalLayout>
   );

src/domains/mypage/main/MySetting.tsx

@@ -2,7 +2,6 @@
 import EditNickName from '@/domains/mypage/components/EditNickName';
 import ToggleBtn from '@/domains/mypage/components/ToggleBtn';
 import WithdrawModal from '@/domains/mypage/components/WithdrawModal';
-import Button from '@/shared/components/button/Button';
 import TextButton from '@/shared/components/button/TextButton';
 import { useEffect, useState } from 'react';
 import useFetchProfile from '../api/fetchProfile';
@@ -26,6 +25,7 @@ function MySetting() {
     <section className="flex flex-col h-80 md:h-100 lg:h-125 justify-between">
       {isOpen && (
         <EditNickName
+          nickname={nickname ?? ''}
           setIsOpen={setIsOpen}
           editNickName={editNickName}
           setEditNickName={setEditNickName}
@@ -45,13 +45,8 @@ function MySetting() {
           <ToggleBtn />
         </div>
       </div>
-      <div className="flex justify-between items-center">
+      <div className="flex justify-end items-center">
         <TextButton onClick={() => setIsQuit(!isQuit)}>회원탈퇴</TextButton>
-
-        <div className="flex gap-2 ">
-          <Button color="purple">취소</Button>
-          <Button>변경상태 저장</Button>
-        </div>
       </div>
     </section>
   );

src/shared/components/Input-box/Input.tsx

@@ -13,6 +13,8 @@ import Button from '../button/Button';
 
 interface Props {
   placeholder: string;
+  value?: string
+
   type?: HTMLInputTypeAttribute;
   ref?: Ref<HTMLInputElement | null>;
   size?: 'default' | 'lg';
@@ -41,6 +43,8 @@ function Input({
   placeholder,
   type,
   ref,
+  value,
+ 
   size,
   variant = 'default',
   className,
@@ -57,6 +61,8 @@ function Input({
           placeholder={placeholder}
           className={`outline-none w-full flex-1 leading-${size}`}
           ref={ref}
+          value={value}
+  
           onChange={onChange}
           {...rest}
         />