Merge pull request #177 from part3-4team-Taskify/feature/Gnb

[Fix, Refactor] Profile: 이미지 업로드 제한 용량 초과 시 에러 처리 / Input: Props 미전달 콘솔 에러 처리

Author: MINJI121

src/components/card/ChangePassword.tsx

@@ -12,7 +12,7 @@ export default function ChangePassword() {
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const isPasswordMismatch =
-    newPassword && checkNewpassword && newPassword !== checkNewpassword;
+    !!checkNewpassword && checkNewpassword !== newPassword;
   const isDisabled =
     !password ||
     !newPassword ||
@@ -88,10 +88,15 @@ export default function ChangePassword() {
           placeholder="새 비밀번호 입력"
           value={checkNewpassword}
           onChange={(value) => setCheckNewPassword(value)}
-          forceInvalid={!!checkNewpassword && checkNewpassword !== newPassword}
+          forceInvalid={isPasswordMismatch}
           invalidMessage="비밀번호가 일치하지 않습니다."
           className="max-w-[624px]"
         />
+        {checkNewpassword && checkNewpassword !== newPassword && (
+          <p className="font-14r block text-[var(--color-red)]">
+            비밀번호가 일치하지 않습니다.
+          </p>
+        )}
 
         <button
           className={`w-full h-[54px] 
@@ -106,12 +111,6 @@ export default function ChangePassword() {
         >
           변경
         </button>
-
-        {checkNewpassword && checkNewpassword !== newPassword && (
-          <p className="font-14r block text-[var(--color-red)]">
-            비밀번호가 일치하지 않습니다.
-          </p>
-        )}
       </div>
     </div>
   );

src/components/card/Profile.tsx

@@ -26,8 +26,16 @@ export default function ProfileCard() {
   const handleImageUpload = async (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
+    const MAX_IMAGE_SIZE = 3.5 * 1024 * 1024;
+
     if (event.target.files && event.target.files[0]) {
       const file = event.target.files[0];
+
+      if (file.size > MAX_IMAGE_SIZE) {
+        toast.error("3.5MB 이하의 이미지만 업로드할 수 있습니다.");
+        return;
+      }
+
       setPreview(URL.createObjectURL(file)); // 미리보기
 
       try {
@@ -42,6 +50,7 @@ export default function ProfileCard() {
       }
     }
   };
+
   const handleSave = async () => {
     if (!nickname || !image) return;
 

src/components/common/CustomToastContainer.tsx

@@ -6,10 +6,11 @@ const CustomToastContainer = () => {
   return (
     <ToastContainer
       position="top-center"
-      autoClose={1500}
+      autoClose={3000}
+      newestOnTop
       closeButton={false}
       pauseOnHover={false}
-      newestOnTop
+      hideProgressBar={true}
       transition={Slide}
     />
   );

src/components/input/Input.tsx

@@ -39,6 +39,7 @@ export default function Input(props: InputProps) {
     className,
     labelClassName,
     wrapperClassName,
+    forceInvalid,
     ...rest
   } = props as SignInputProps;
 

src/pages/login.tsx

@@ -5,7 +5,6 @@ import { getUserInfo } from "@/api/users";
 import { postAuthData } from "@/api/auth";
 import Link from "next/link";
 import Input from "@/components/input/Input";
-import { apiRoutes } from "@/api/apiRoutes";
 import { toast } from "react-toastify";
 
 export default function LoginPage() {
@@ -28,8 +27,6 @@ export default function LoginPage() {
     const { email, password } = values;
 
     try {
-      // 배포 테스트
-      console.log("로그인 요청 URL:", apiRoutes.login());
       const response = await postAuthData({ email, password });
       const token = response.accessToken;
       localStorage.setItem("accessToken", token);