Merge pull request #6 from KDT5TeamWink/MoonDaeHyun

[230615]2차PR-문대현

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; // 사용자 비밀번호 (필수!)

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="/">

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;
                 }
 
 

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

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>
+  )
+}

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>