Merge pull request #159 from codeit-sprint-part3-6team/#155_마이페이지-이슈-수정

#155 마이페이지 이슈 수정

Author: twtwkim

public/ic/ic_imageDelete.svg

@@ -5,6 +5,7 @@
   padding: 20px 12px 0 8px;
   position: fixed;
   border-right: 1px solid var(--gray-medium);
+  z-index: 1;
 }
 
 .menu {
@@ -106,6 +107,7 @@
   height: 344px;
   padding: 32px;
   border-radius: 10px;
+  z-index: 11;
 }
 
 .modal h2 {

src/components/common/sidebar/Sidebar.module.css

@@ -81,6 +81,18 @@ export default function Sidebar() {
     setDashboards(sidebarDashboards);
   }, [sidebarDashboards]);
 
+  useEffect(() => {
+    // 모달 dim 부분 스크롤 막기
+    if (showModal) {
+      document.body.style.overflow = 'hidden'; // 스크롤 비활성화
+    } else {
+      document.body.style.overflow = ''; // 기본 스크롤 상태로 복구
+    }
+    return () => {
+      document.body.style.overflow = ''; // 컴포넌트가 unmount 될 때도 스크롤 상태 복구
+    };
+  }, [showModal]);
+
   return (
     <div className={styles.sidebar}>
       <Link href="/" className={styles.logo}>

src/components/common/sidebar/Sidebar.tsx

@@ -36,11 +36,35 @@
   }
 }
 
+.input-wrap {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-bottom: 16px;
+}
+
+.error-wrap {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-bottom: 8px;
+}
+
+.visible-button {
+  width: 24px;
+  height: 24px;
+  border: none;
+  position: absolute;
+  right: 16px;
+  background-color: var(--white);
+  cursor: pointer;
+}
+
 .input {
   width: 100%;
   height: 50px;
   padding: 15px 16px;
-  margin-bottom: 16px;
+
   border-radius: 8px;
   border: 1px solid var(--gray-medium);
   font-weight: 400;
@@ -59,19 +83,15 @@
 }
 
 .bottom-input {
-  margin-bottom: 24px;
+  margin-bottom: 8px;
 }
 
 .error-input {
   border: 1px solid red;
 }
 
-.error-margin {
-  margin-bottom: 2px;
-}
-
 .error-message {
   color: red;
   font-size: 14px;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 }

src/components/product/mypage/ChangePassword.module.css

@@ -3,6 +3,8 @@ import clsx from 'clsx';
 import changePassword from '@/lib/mypage/changePassword';
 import CDSButton from '@/components/common/button/CDSButton';
 import AuthModal from '@/components/common/modal/auth/AuthModal';
+import Visibility from 'public/ic/ic_visibility.svg';
+import InVisibility from 'public/ic/ic_invisibility.svg';
 import styles from './ChangePassword.module.css';
 
 interface CheangePasswordValue {
@@ -29,30 +31,40 @@ export default function ChangePassword({
   const [values, setValues] = useState(initialValue);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [modal, setModal] = useState(false);
+  const [passwordVisibility, setPasswordVisibility] = useState({
+    current: false,
+    new: false,
+    confirm: false,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = (field: 'current' | 'new' | 'confirm') => {
+    setPasswordVisibility((prevVisibility) => ({
+      ...prevVisibility,
+      [field]: !prevVisibility[field],
+    }));
+  };
 
   const handleCancelClick = () => {
     setModal(false);
   };
 
   const handleChangePassword = async () => {
+    setIsLoading(true);
     try {
       const { password, newPassword } = values;
       const putData = { password, newPassword };
       await changePassword(putData);
 
-      setValues({
-        password: '',
-        newPassword: '',
-        confirmPassword: '',
-        error: null,
-      });
+      setValues(initialValue);
       setModal(true);
     } catch (e) {
       setModal(true);
       setErrorMessage(e.message);
+    } finally {
+      setIsLoading(false);
     }
   };
-
   const handleBlur = () => {
     const { newPassword, confirmPassword } = values;
     if (newPassword !== confirmPassword) {
@@ -79,40 +91,71 @@ export default function ChangePassword({
       <p className={styles.title}>비밀번호 변경</p>
       <div>
         <p className={styles[`sub-title`]}>현재 비밀번호</p>
-        <input
-          value={values.password}
-          onChange={(e) => setValues({ ...values, password: e.target.value })}
-          className={styles.input}
-          placeholder="비밀번호 입력"
-        />
+        <div className={styles[`input-wrap`]}>
+          <input
+            value={values.password}
+            onChange={(e) => setValues({ ...values, password: e.target.value })}
+            className={styles.input}
+            placeholder="비밀번호 입력"
+            type={passwordVisibility.current ? 'text' : 'password'}
+          />
+          <button
+            className={styles[`visible-button`]}
+            type="button"
+            onClick={() => handleClick('current')}
+          >
+            {passwordVisibility.current ? <Visibility /> : <InVisibility />}
+          </button>
+        </div>
       </div>
       <div>
         <p className={styles[`sub-title`]}>새 비밀번호</p>
-        <input
-          value={values.newPassword}
-          onChange={(e) =>
-            setValues({ ...values, newPassword: e.target.value })
-          }
-          className={styles.input}
-          placeholder="새 비밀번호 입력"
-          onBlur={handleBlur}
-        />
+        <div className={styles[`input-wrap`]}>
+          <input
+            value={values.newPassword}
+            onChange={(e) =>
+              setValues({ ...values, newPassword: e.target.value })
+            }
+            className={styles.input}
+            placeholder="새 비밀번호 입력"
+            onBlur={handleBlur}
+            type={passwordVisibility.new ? 'text' : 'password'}
+          />
+          <button
+            className={styles[`visible-button`]}
+            type="button"
+            onClick={() => handleClick('new')}
+          >
+            {passwordVisibility.new ? <Visibility /> : <InVisibility />}
+          </button>
+        </div>
       </div>
       <div>
         <p className={styles[`sub-title`]}>새 비밀번호 확인</p>
-        <input
-          value={values.confirmPassword}
-          onChange={(e) =>
-            setValues({ ...values, confirmPassword: e.target.value })
-          }
-          className={clsx(
-            styles.input,
-            values.error ? styles['error-input'] : styles[`bottom-input`],
-            values.error ? styles['error-margin'] : '',
-          )}
-          placeholder="새 비밀번호 입력"
-          onBlur={handleBlur}
-        />
+        <div
+          className={values.error ? styles[`error-wrap`] : styles[`input-wrap`]}
+        >
+          <input
+            value={values.confirmPassword}
+            onChange={(e) =>
+              setValues({ ...values, confirmPassword: e.target.value })
+            }
+            className={clsx(
+              styles.input,
+              values.error ? styles['error-input'] : styles[`bottom-input`],
+            )}
+            placeholder="새 비밀번호 입력"
+            onBlur={handleBlur}
+            type={passwordVisibility.confirm ? 'text' : 'password'}
+          />
+          <button
+            className={styles[`visible-button`]}
+            type="button"
+            onClick={() => handleClick('confirm')}
+          >
+            {passwordVisibility.confirm ? <Visibility /> : <InVisibility />}
+          </button>
+        </div>
         {values.error && (
           <p className={styles['error-message']}>{values.error}</p>
         )}
@@ -121,7 +164,7 @@ export default function ChangePassword({
         <CDSButton
           onClick={handleChangePassword}
           btnType="profile_save"
-          disabled={!isFormValid}
+          disabled={!isFormValid || isLoading}
         >
           변경
         </CDSButton>

src/components/product/mypage/ChangePassword.tsx

@@ -9,6 +9,7 @@ import ProfileImageInput from './ProfileImageInput';
 import ProfileInfoForm from './ProfileInfoForm';
 import ProfileModifyModal from './ProfileModifyModal';
 import styles from './ModifyProfile.module.css';
+import { toast } from 'react-toastify';
 
 interface ModifyValue {
   nickname: string;
@@ -37,6 +38,10 @@ export default function ModifyProfile() {
     }
   }, [user]);
 
+  const handleImageDelete = () => {
+    setPreview(null);
+  };
+
   const handleCancelClick = () => {
     setModal(false);
   };
@@ -55,6 +60,8 @@ export default function ModifyProfile() {
       let imageUrl = values.profileImageUrl;
       if (image) {
         imageUrl = await uploadImage(image);
+      } else if (!preview) {
+        imageUrl = null;
       }
       const putData = {
         nickname: values.nickname,
@@ -77,16 +84,32 @@ export default function ModifyProfile() {
       );
       setModal(true);
     } catch (error) {
-      console.error(error);
+      toast.error(error.message);
     }
   };
 
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
+      const allowedExtensions = ['png', 'gif', 'jpg', 'jpeg'];
+      const fileExtension = file.name.split('.').pop()?.toLowerCase();
+      if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+        toast.warning(
+          <div>
+            허용되지 않는 파일 형식입니다
+            <br /> (png, gif, jpg만 등록 가능)
+          </div>,
+        );
+
+        return;
+      }
+
       setImage(file);
       const imgURL = URL.createObjectURL(file);
       setPreview(imgURL);
+    } else {
+      setImage(null);
+      setPreview(null);
     }
   };
 
@@ -97,6 +120,7 @@ export default function ModifyProfile() {
         <ProfileImageInput
           preview={preview}
           onImageChange={handleImageChange}
+          onImageDelete={handleImageDelete}
         />
         <div>
           <ProfileInfoForm

src/components/product/mypage/ModifyProfile.tsx

@@ -22,6 +22,13 @@
   object-fit: cover;
 }
 
+.img-delete {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  cursor: pointer;
+}
+
 .img-input {
   display: none;
 }