From 09e60e273aa42afed315743aac3c1281df0abea6 Mon Sep 17 00:00:00 2001
From: moon daehyun <cbmd97@naver.com>
Date: Thu, 15 Jun 2023 00:10:30 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=EC=A0=95=EB=B3=B4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B8=B0=EB=8A=A5=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Common/Form/Login/login.tsx            |   2 +
 src/Components/Views/CartPage/CartPage.tsx |   3 +-
 src/Components/Views/MyPage/MyPage.tsx     |   2 +-
 src/Components/Views/MyPage/UserInfo.scss  |   5 +-
 src/Components/Views/MyPage/UserInfo.tsx   | 222 ++++++++++++++++-----
 src/Components/Views/MyPage/test.jsx       |  42 ++++
 src/routes/routes.tsx                      |   8 +-
 7 files changed, 232 insertions(+), 52 deletions(-)
 create mode 100644 src/Components/Views/MyPage/test.jsx

diff --git a/src/Common/Form/Login/login.tsx b/src/Common/Form/Login/login.tsx
index a604e73a..a8bcf1d1 100644
--- a/src/Common/Form/Login/login.tsx
+++ b/src/Common/Form/Login/login.tsx
@@ -11,6 +11,7 @@ function Login() {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
 
+
   const onChangeEmail = (e: ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
   };
@@ -19,6 +20,7 @@ function Login() {
     setPassword(e.target.value);
   };
 
+
   interface DataToSubmit {
     email: string; // 사용자 아이디 (필수!)
     password: string; // 사용자 비밀번호 (필수!)
diff --git a/src/Components/Views/CartPage/CartPage.tsx b/src/Components/Views/CartPage/CartPage.tsx
index 915c301f..1c7d05cb 100644
--- a/src/Components/Views/CartPage/CartPage.tsx
+++ b/src/Components/Views/CartPage/CartPage.tsx
@@ -22,7 +22,7 @@ function CartPage() {
     const BuyProducts = () => {
       alert("주문완료!")
     }
- 
+
   return (
   <>
   <div className='CartPage-AllLayout'>  
@@ -34,7 +34,6 @@ function CartPage() {
         <CartItems/>
       </div>  
     
-    
     {/* </div> */}
 
     {/* 여기에서는 대여 부분  */}
diff --git a/src/Components/Views/MyPage/MyPage.tsx b/src/Components/Views/MyPage/MyPage.tsx
index 0fde3be1..f891ab3f 100644
--- a/src/Components/Views/MyPage/MyPage.tsx
+++ b/src/Components/Views/MyPage/MyPage.tsx
@@ -24,7 +24,7 @@ function MyPage () {
               <Link to="/">
                 <div className='categoryTap'>주문내역조회</div>
               </Link> <br />
-              <Link to="/">
+              <Link to="/userinfo">
                 <div className='categoryTap'>회원정보 수정</div>
               </Link> <br />
               <Link to="/">
diff --git a/src/Components/Views/MyPage/UserInfo.scss b/src/Components/Views/MyPage/UserInfo.scss
index 87ecabda..d341501d 100644
--- a/src/Components/Views/MyPage/UserInfo.scss
+++ b/src/Components/Views/MyPage/UserInfo.scss
@@ -1,6 +1,6 @@
     .myPageContainer{
     background-color: white;
-    width: 1600px;
+    width: 1200px;
     height: 900px;
     position: relative;
     left: 200px;
@@ -153,10 +153,11 @@
                   border-radius: .5rem;
                   margin-left: 10rem;
                   padding: 15px;
-                  width: 18rem;
+                  width: 15rem;
                   color:white;
                   font-weight: 700;
                   font-size: 18px;
+                  cursor: pointer;
                 }
   
   
diff --git a/src/Components/Views/MyPage/UserInfo.tsx b/src/Components/Views/MyPage/UserInfo.tsx
index 479720cc..f04fdd9c 100644
--- a/src/Components/Views/MyPage/UserInfo.tsx
+++ b/src/Components/Views/MyPage/UserInfo.tsx
@@ -1,8 +1,109 @@
-// import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import './userInfo.scss'
+import { FormEvent, useState, useEffect, ChangeEvent, useCallback, useRef } from 'react';
+import axios from 'axios';
+import { Link, useNavigate } from 'react-router-dom';
+import './UserInfo.scss'
+import { NONAME } from 'dns';
+
+function UserInfo () {
+
+  // 이름 , 프로필사진 , 구 비밀번호 , 새 비밀번호
+  const [displayName, setDisplayName] = useState('');
+  const [profileImgBase64, setProfileImgBase64] = useState('');
+  const [oldPassword, setOldPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+
+  //비밀번호 유효성 검사
+  const [isName, setIsName] = useState(false);
+  const [isOldPassword, setIsOldPassword] = useState(false);
+  const [isNewPasswordConfirm, setIsNewPasswordConfirm] = useState(false);
+
+  //오류 메세지 저장
+  const [nameMessage, setNameMessage] = useState('');
+  const [passwordMessage, setPasswordMessage] = useState('');
+  const [passwordConfirmMessage, setPasswordConfirmMessage] = useState('');
+
+
+
+  async function submit(e) {
+    e.preventDefault();
+    alert('수정완료');
+
+    try {
+      const res = await axios.put('https://asia-northeast3-heropy-api.cloudfunctions.net/api/auth/user', {
+        displayName: displayName,           // 새로운 표시 이름
+        profileImgBase64: profileImgBase64, // 사용자 프로필 이미지(base64) - jpg, jpeg, webp, png, gif, svg
+        oldPassword: oldPassword,           // 기존 비밀번호
+        newPassword: newPassword            // 새로운 비밀번호
+      }, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('token')}`,
+          'Content-Type': 'application/json',
+          apikey: 'KDT5_nREmPe9B',
+          username: 'KDT5_TeamWink',
+        }
+      })
+    }catch(err){
+      console.log(err)
+    }
+  }
+
+  const onChangeName = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setDisplayName(e.target.value);
+    if (e.target.value.length < 2 || e.target.value.length > 21) {
+      setNameMessage('2글자 이상 21글자 미만으로 입력해주세요.');
+      setIsName(false);
+    } else {
+      setNameMessage('올바른 이름 형식입니다 ');
+      setIsName(true);
+    }
+  }, []);
+
+  const onChangePassword = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const passwordCurrent = e.target.value;
+      setOldPassword(passwordCurrent);
+
+      if (!PwCheck(passwordCurrent)) {
+        setPasswordMessage('8자리 이상 입력해주세요.');
+        setIsOldPassword(false);
+      } else {
+        setPasswordMessage('안전한 비밀번호에요 ');
+        setIsOldPassword(true);
+      }
+    },
+    [oldPassword]
+  );
+
+  const onChangePasswordConfirm = (
+    password: any,
+    confirmPassword: any,
+    setPasswordConfirmMessage: any,
+    setIsPasswordConfirm: any
+  ) => {
+    if (password === confirmPassword) {
+      setPasswordConfirmMessage('비밀번호를 똑같이 입력했어요.');
+      setIsPasswordConfirm(true);
+    } else {
+      setPasswordConfirmMessage('비밀번호가 틀립니다. 다시 입력해주세요.');
+      setIsPasswordConfirm(false);
+    }
+  };
+
+  const onPasswordConfirmChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const passwordConfirmCurrent = e.target.value;
+      setNewPassword(passwordConfirmCurrent);
+      onChangePasswordConfirm(
+        oldPassword,
+        passwordConfirmCurrent,
+        setPasswordConfirmMessage,
+        setIsNewPasswordConfirm
+      );
+    },
+    [oldPassword]
+  );
+
 
-function userInfo () {
     return(
         <>
         <div className="myPageContainer">
@@ -12,11 +113,13 @@ function userInfo () {
               <div className="profilePhoto"></div>
               <div className="profileContainer">
                 <div className="profileName">
-                  <p>닉네임</p>
-                </div>
-                <div className="profileText">
-                  <p>프로필 자기소개란입니다.</p>
+                  <p>닉네임{displayName}</p>
                 </div>
+                {/* <div className="profileText">
+                  <div>
+                  <p>자기소개</p>
+                  </div>
+                </div> */}
               </div>
             </div>
             <div className="category">
@@ -38,78 +141,107 @@ function userInfo () {
             </div>
           </div>
 
-
           <div className="detailsContainer">
-
             <div className="infoContainer">
               <div className="info">
                 <div className="infoTag">
                 <div className="infoText">회원정보 수정</div>
                 </div>
                 <div className="infoBox">
-                  <form>
-                    <div className="infoList">
-                      <div className="infoTitle">아이디</div>
-                      <div className="infoItem">
-                        <input className="infoItemForm" placeholder="아이디를 입력해 주세요" type="text" />
-                      </div>
-                    </div>
+                  <form onSubmit={submit}>
                     <div className="infoList">
-                      <div className="infoTitle">비밀번호</div>
+                      <div className="infoTitle">기존 비밀번호</div>
                       <div className="infoItem">
-                        <input className="infoItemForm" placeholder="비밀번호는 8~20자의 영문 대/소문자, 숫자, 특수문자를 포함하세요" type="text" />
+                        <input 
+                          className="infoItemForm"
+                          placeholder="비밀번호를 입력해주세요"
+                          type="password" 
+                          name="oldPassword"
+                          value={oldPassword}
+                          onChange={onChangePassword}
+                        /><br></br>
+                        {oldPassword.length > 0 && (
+                          <span className={`message ${isOldPassword ? 'success' : 'error'}`}>
+                            {passwordMessage}
+                          </span>
+                        )}
                       </div>
                     </div>
                     <div className="infoList">
-                      <div className="infoTitle">닉네임</div>
+                      <div className="infoTitle">새 비밀번호</div>
                       <div className="infoItem">
-                        <input className="infoItemForm" placeholder="닉네임을 입력해 주세요" type="text" />
+                        <input 
+                          className="infoItemForm"
+                          placeholder="비밀번호를 입력해주세요"
+                          type="password" 
+                          name="newPassword"
+                          value={newPassword}
+                          onChange={onPasswordConfirmChange}
+                        /><br></br>
+                        {newPassword.length > 0 && (
+                          <span
+                            className={`message ${
+                              isNewPasswordConfirm ? 'success' : 'error'
+                            }`}
+                          >
+                            {passwordConfirmMessage}
+                          </span>
+                        )}
                       </div>
                     </div>
                     <div className="infoList">
-                      <div className="infoTitle">한줄 소개</div>
+                      <div className="infoTitle">닉네임 변경</div>
                       <div className="infoItem">
-                        <input className="infoItemForm" placeholder="자신을 한줄로 소개하세요" type="text" />
+                        <input 
+                          className="infoItemForm"
+                          placeholder="닉네임을 입력해주세요"
+                          type="text" 
+                          name="disPlayname"
+                          value={displayName}
+                          onChange={onChangeName}
+                        /><br></br>
+                        {displayName.length > 0 && (
+                          <span className={`message ${isName ? 'success' : 'error'}`}>
+                            {nameMessage}
+                          </span>
+                        )}
                       </div>
                     </div>
                     <div className="infoList">
                       <div className="infoTitle">프로필 이미지</div>
                       <div className="infoItem">
-                        <button className='infoPic'>사진 업로드</button>
+                        {/* <button className='infoPic'>사진 업로드</button> */}
+                        {/* <input type="file" style={{ display: "none" }} ref={imageInput} />
+                        // <button onClick={onCickImageUpload}>이미지업로드</button> */}
+                        <input 
+                          className="infoItemForm"
+                          type="file"
+                          name="profileImgBase64" 
+                          accept='image/*'
+                          value={profileImgBase64}
+                          onChange={(e)=>{setProfileImgBase64(e.target.value)}}
+                        />
                       </div>
                     </div>
                     <div className="infoList">
                       <div className="infoItem">
-                        <button className='infoFix' type="submit">회원 정보 수정</button>
+                      {/* <input className="infoFix" type="submit" /> */}
+                        <button 
+                          className='infoFix' 
+                          type="submit"
+                        >
+                          회원 정보 수정
+                        </button>
                       </div>
                     </div>
-
                   </form>
-                  
-
                 </div>
-                
 
               </div>
             </div>
 
 
 
-
-            {/* <div className="rentContainer">
-              <div className="rent">
-                <div className="rentText">대여 내역</div>
-                <div className="rentBox">
-                  <div className="rentList"></div>
-                  <div className="rentList"></div>
-                  <div className="rentList"></div>
-                  <div className="rentList"></div>
-                </div>
-              </div>
-            </div> */}
-
-
-
           </div>
 
 
@@ -119,4 +251,4 @@ function userInfo () {
     )
 }
 
-export default userInfo
+export default UserInfo
diff --git a/src/Components/Views/MyPage/test.jsx b/src/Components/Views/MyPage/test.jsx
new file mode 100644
index 00000000..d3b7d09c
--- /dev/null
+++ b/src/Components/Views/MyPage/test.jsx
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import axios from "axios";
+
+export default function Test() {
+  const [name, setName] = useState('');
+  const [pwd, setPwd] = useState('');
+
+  async function submit(e) {
+    e.preventDefault();
+
+    try {
+      const res = await axios.post('url', {
+        displayName: name,
+        newPassword: pwd
+      }, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`
+        }
+      })
+    }catch(err){
+      console.log(err)
+    }
+  }
+
+  return (
+    <form onSubmit={submit}>
+      <input 
+        type="text" 
+        name='display'
+        value={name}
+        onChange={(e)=>{setName(e.target.value)}}
+      />
+      <input 
+        type="text" 
+        name='password'
+        value={pwd}
+        onChange={(e)=>{setPwd(e.target.value)}}/>
+      <input type="submit" />
+
+    </form>
+  )
+}
\ No newline at end of file
diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx
index 71b91cde..bce7078d 100644
--- a/src/routes/routes.tsx
+++ b/src/routes/routes.tsx
@@ -1,12 +1,13 @@
 import Header from '@/Common/Layout/Header/header';
 import Footer from '@/Common/Layout/Footer/footer';
-import MainPage from '@/Components/Views/MainPage/mainPage';
+import MainPage from '@/Components/Views/MainPage/MainPage';
 import Join from '@/Common/Form/Signin/join';
 import Login from '@/Common/Form/Login/login';
 import CartPage from '@/Components/Views/CartPage/CartPage';
 import MyPage from '@/Components/Views/MyPage/MyPage';
 import PrivatePage from './privateRoute';
 import DetailPage from '@/Components/Views/DetailPage/DetailPage';
+import UserInfo from '@/Components/Views/MyPage/UserInfo';
 
 import { Routes, BrowserRouter, Route, Outlet } from 'react-router-dom';
 
@@ -38,7 +39,10 @@ function RoutesPage() {
               path="/mypage"
               element={<PrivatePage component={<MyPage />} status={''} />}
             />
-
+            <Route
+              path="/userinfo"
+              element={<PrivatePage component={<UserInfo />} status={''} />}
+            />
             {/* <Route path="/mypage" element={<MyPage/>}/> */}
           </Route>
         </Routes>