Merge pull request #92 from rover1523/page-jw

MINJI121 · web-flow · commit eb470bafbecd · 2025-03-28T21:48:30.000+09:00
[Feat]프로필,비밀번호 변경 api작업
diff --git a/src/api/apiRoutes.ts b/src/api/apiRoutes.ts
@@ -4,7 +4,7 @@ export const apiRoutes = {
   //로그인
   Login: () => `/${TEAM_ID}/login`, //post
   //비밀번호변경
-  Password: () => `/${TEAM_ID}/password`, //put
+  Password: () => `/${TEAM_ID}/auth/password`, //put
   //카드
   Cards: () => `/${TEAM_ID}/cards`, //post,get
   CardDetail: (cardId: number) => `/${TEAM_ID}/cards/${cardId}`, //get,put,delete
diff --git a/src/api/changepassword.ts b/src/api/changepassword.ts
@@ -0,0 +1,31 @@
+import axios from "./axiosInstance";
+import { apiRoutes } from "./apiRoutes";
+import { isAxiosError } from "axios";
+
+export const changePassword = async ({
+  password,
+  newPassword,
+}: {
+  password: string;
+  newPassword: string;
+}) => {
+  try {
+    const response = await axios.put(apiRoutes.Password(), {
+      password,
+      newPassword,
+    });
+    return { success: true, data: response.data };
+  } catch (error) {
+    if (isAxiosError(error)) {
+      return {
+        success: false,
+        status: error.response?.status,
+        message: error.response?.data?.message || "알 수 없는 오류",
+      };
+    }
+    return {
+      success: false,
+      message: "에러가 발생했습니다.",
+    };
+  }
+};
diff --git a/src/api/userprofile.ts b/src/api/userprofile.ts
@@ -0,0 +1,30 @@
+import { UpdateUser, UserType, UserMeImage } from "@/types/users";
+import axios from "./axiosInstance";
+import { apiRoutes } from "./apiRoutes";
+
+// 내 정보 조회 (GET)
+export const getUserMe = async (): Promise<UserType> => {
+  const response = await axios.get(apiRoutes.userMe());
+  return response.data;
+};
+// 내 정보 수정 (PUT)
+export const updateProfile = async (data: UpdateUser) => {
+  const res = await axios.put(apiRoutes.userMe(), data, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  return res.data;
+};
+
+// ✅ 프로필 이미지 업로드 (POST)
+export const uploadProfileImage = async (
+  formData: FormData
+): Promise<UserMeImage> => {
+  const response = await axios.post(apiRoutes.userMeImage(), formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return response.data;
+};
diff --git a/src/components/card/ChangePassword.tsx b/src/components/card/ChangePassword.tsx
@@ -1,24 +1,60 @@
 import { useState } from "react";
+import { changePassword } from "@/api/changepassword";
+import MypageModal from "../modal/MypageModal";
 import Input from "../input/Input";
+import Image from "next/image";
 
 export default function ChangePassword() {
   const [password, setPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [checkNewpassword, setCheckNewPassword] = useState("");
-  const [isPasswordMismatch] = useState(false);
-
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
   const [showCheckNewPassword, setShowCheckNewPassword] = useState(false);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [showErrorModal, setShowErrorModal] = useState(false);
 
   const toggleCheckNewPasswordVisibility = () =>
     setShowCheckNewPassword(!showCheckNewPassword);
-
+  const isPasswordMismatch =
+    newPassword && checkNewpassword && newPassword !== checkNewpassword;
   const isDisabled =
     !password ||
     !newPassword ||
     !checkNewpassword ||
     isPasswordMismatch ||
     password.length < 8;
 
+  const handleChangePassword = async () => {
+    if (isDisabled) return;
+
+    setIsSubmitting(true);
+    setErrorMessage("");
+    setSuccessMessage("");
+
+    const result = await changePassword({ password, newPassword });
+
+    if (!result.success) {
+      const msg =
+        result.status === 400
+          ? result.message || "현재 비밀번호가 올바르지 않습니다."
+          : "비밀번호 변경 중 오류가 발생했습니다.";
+
+      setErrorMessage(msg);
+      setShowErrorModal(true);
+      setIsSubmitting(false);
+      return;
+    }
+
+    setSuccessMessage("비밀번호가 성공적으로 변경되었습니다.");
+    setShowSuccessModal(true);
+    setPassword("");
+    setNewPassword("");
+    setCheckNewPassword("");
+    setIsSubmitting(false);
+  };
+
   return (
     <div className="sm:w-[672px] sm:h-[466px] w-[284px] h-[454px] bg-white rounded-[16px] shadow-md p-[24px] flex flex-col">
       <h2 className="text-[18px] sm:text-[24px] font-bold mb-4">
@@ -30,12 +66,12 @@ export default function ChangePassword() {
           <Input
             type="password"
             name="password"
-            label="비밀번호"
+            label="현재 비밀번호"
             labelClassName="font-16r"
-            placeholder="비밀번호 입력"
+            placeholder="현재 비밀번호 입력"
+            value={password}
             onChange={setPassword}
             pattern=".{8,}"
-            invalidMessage="8자 이상 입력해주세요."
             className="max-w-[620px]"
           />
           <Input
@@ -44,6 +80,7 @@ export default function ChangePassword() {
             label="새 비밀번호"
             labelClassName="font-16r"
             placeholder="새 비밀번호 입력"
+            value={newPassword}
             onChange={setNewPassword}
             pattern=".{8,}"
             invalidMessage="8자 이상 입력해주세요."
@@ -60,26 +97,28 @@ export default function ChangePassword() {
               placeholder="새 비밀번호 입력"
               onChange={(e) => setCheckNewPassword(e.target.value)}
               className={`mt-3 sm:w-[624px] sm:h-[50px] w-[236px] h-[50px] px-[16px] pr-12 rounded-[8px] transition-colors focus:outline-none
-      ${
-        checkNewpassword
-          ? checkNewpassword === newPassword
-            ? "border border-gray-300"
-            : "border border-[var(--color-red)]"
-          : "border border-gray-300 focus:border-purple-500"
-      }`}
+                ${
+                  checkNewpassword
+                    ? checkNewpassword === newPassword
+                      ? "border border-gray-300"
+                      : "border border-[var(--color-red)]"
+                    : "border border-gray-300 focus:border-purple-500"
+                }`}
             />
             <button
               type="button"
               onClick={toggleCheckNewPasswordVisibility}
               className="absolute right-4 top-6 flex size-6 items-center justify-center"
             >
-              <img
+              <Image
                 src={
                   showCheckNewPassword
                     ? "/svgs/eye-on.svg"
                     : "/svgs/eye-off.svg"
                 }
                 alt="비밀번호 표시 토글"
+                width={20}
+                height={20}
                 className=" w-5 h-5"
               />
             </button>
@@ -93,11 +132,29 @@ export default function ChangePassword() {
         </div>
       </div>
 
+      {errorMessage && (
+        <p className="text-red-500 text-sm mt-4">{errorMessage}</p>
+      )}
+      {successMessage && (
+        <p className="text-green-600 text-sm mt-4">{successMessage}</p>
+      )}
+      <MypageModal
+        isOpen={showSuccessModal}
+        onClose={() => setShowSuccessModal(false)}
+        message="비밀번호 변경에 성공하였습니다."
+      />
+
+      <MypageModal
+        isOpen={showErrorModal}
+        onClose={() => setShowErrorModal(false)}
+        message="비밀번호 변경에 실패하였습니다."
+      />
       <button
         className={`mt-2.5 cursor-pointer w-full sm:w-[624px] h-[54px] 
           rounded-[8px] text-lg font-medium  
           ${isDisabled ? "bg-gray-300 cursor-not-allowed" : "bg-[#5A3FFF] text-white"}`}
-        disabled={isDisabled}
+        onClick={() => handleChangePassword()}
+        disabled={isDisabled || isSubmitting}
       >
         변경
       </button>
diff --git a/src/components/card/Profile.tsx b/src/components/card/Profile.tsx
@@ -1,41 +1,89 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Input from "../input/Input";
+import Image from "next/image";
+import {
+  getUserMe,
+  updateProfile,
+  uploadProfileImage,
+} from "@/api/userprofile";
+import MypageModal from "../modal/MypageModal";
 
 export default function ProfileCard() {
   const [image, setImage] = useState<string | null>(null);
   const [nickname, setNickname] = useState("");
   const [email, setEmail] = useState("");
+  const [preview, setPreview] = useState<string | null>(null);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [showErrorModal, setShowErrorModal] = useState(false);
 
-  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const fetchUserData = async () => {
+    try {
+      const data = await getUserMe();
+      setImage(data.profileImageUrl);
+      setNickname(data.nickname);
+      setEmail(data.email);
+    } catch (err) {
+      console.error("유저 정보 불러오기 실패:", err);
+    }
+  };
+
+  const handleImageUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     if (event.target.files && event.target.files[0]) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const result = e.target?.result;
-        if (typeof result === "string") {
-          setImage(result);
-        }
-      };
-      reader.readAsDataURL(event.target.files[0]);
+      const file = event.target.files[0];
+      setPreview(URL.createObjectURL(file)); // 미리보기
+
+      try {
+        const formData = new FormData();
+        formData.append("image", file);
+
+        const response = await uploadProfileImage(formData);
+        setImage(response.profileImageUrl); // 서버에서 받은 URL 저장
+      } catch (error) {
+        console.error("이미지 업로드 실패:", error);
+        alert("이미지 업로드에 실패했습니다.");
+      }
+    }
+  };
+  const handleSave = async () => {
+    if (!nickname || !image) return;
+
+    const userProfile = {
+      nickname,
+      profileImageUrl: image,
+    };
 
-      console.log(nickname, email);
+    try {
+      await updateProfile(userProfile);
+      setShowSuccessModal(true);
+    } catch (error) {
+      console.error("프로필 저장 실패:", error);
+      setShowErrorModal(true);
     }
   };
 
+  useEffect(() => {
+    fetchUserData();
+  }, []);
+
   return (
     <div className="sm:w-[672px] sm:h-[366px] w-[284px] h-[496px] bg-white rounded-[16px] shadow-md p-[24px] flex flex-col">
       {/* 프로필 제목 */}
       <h2 className="text-[18px] sm:text-[24px] font-bold mb-4">프로필</h2>
-
-      {/* 프로필 이미지 + 입력 폼  > 컴포넌트 받으면 바꾸기*/}
+      {/* 프로필 이미지 및 입력 폼 영역 */}
       <div className="flex flex-col sm:flex-row items-center sm:items-start">
         {/* 프로필 이미지 업로드 영역 */}
         <div className="sm:mr:0 mr-29 w-[120px] flex-shrink-0 mb-4 sm:mb-0">
           <div className="sm:w-[182px] sm:h-[182px] w-[100px] h-[100px] rounded-md flex items-center justify-center cursor-pointer bg-[#F5F5F5] border-transparent">
             <label className="cursor-pointer w-full h-full flex items-center justify-center">
               {image ? (
-                <img
-                  src={image}
+                <Image
+                  src={preview || image || ""}
                   alt="Profile"
+                  width={182}
+                  height={182}
+                  unoptimized
                   className="w-full h-full object-cover rounded-md"
                 />
               ) : (
@@ -57,23 +105,34 @@ export default function ProfileCard() {
             name="email"
             label="이메일"
             labelClassName="font-16r"
-            placeholder="이메일을 입력하세요"
-            onChange={setEmail}
-            pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
-            invalidMessage="유효한 이메일 주소를 입력하세요."
+            value={email}
+            readOnly
           />
 
           <Input
             type="text"
             name="nickname"
             label="닉네임"
             labelClassName="font-16r"
+            value={nickname}
             placeholder="닉네임을 입력하세요"
-            onChange={setNickname}
+            onChange={(value: string) => setNickname(value)}
+          />
+          <MypageModal
+            isOpen={showSuccessModal}
+            onClose={() => setShowSuccessModal(false)}
+            message="프로필 변경이 완료되었습니다."
+          />
+          <MypageModal
+            isOpen={showErrorModal}
+            onClose={() => setShowErrorModal(false)}
+            message="프로필 변경에 실패하였습니다"
           />
 
-          {/* 저장 버튼 */}
-          <button className="cursor-pointer w-full sm:w-[400px] h-[54px] bg-[#5A3FFF] text-white rounded-[8px] text-lg font-medium mt-3">
+          <button
+            className="cursor-pointer w-full sm:w-[400px] h-[54px] bg-[#5A3FFF] text-white rounded-[8px] text-lg font-medium mt-3"
+            onClick={handleSave}
+          >
             저장
           </button>
         </div>
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
@@ -9,6 +9,8 @@ interface GeneralInputProps {
   placeholder?: string;
   className?: string;
   onChange?: (value: string) => void;
+  value?: string;
+  readOnly?: boolean; //입력방지 추가
 }
 
 interface SignInputProps extends Omit<GeneralInputProps, "type"> {
diff --git a/src/components/modal/MypageModal.tsx b/src/components/modal/MypageModal.tsx
diff --git a/src/pages/mypage.tsx b/src/pages/mypage.tsx
diff --git a/src/types/users.ts b/src/types/users.ts

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,8 @@ interface GeneralInputProps {`
`9`	`9`	`placeholder?: string;`
`10`	`10`	`className?: string;`
`11`	`11`	`onChange?: (value: string) => void;`
	`12`	`+ value?: string;`
	`13`	`+ readOnly?: boolean; //입력방지 추가`
`12`	`14`	`}`
`13`	`15`
`14`	`16`	`interface SignInputProps extends Omit<GeneralInputProps, "type"> {`