Merge pull request #70 from KnS-hacks/Umin

[Feat]:: 회원정보 수정 기능 진행중 close #35
KnS-hacks · Jan 5, 2022 · 92ba783 · 92ba783
2 parents 41fa93a + 2369d10
commit 92ba783
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 41 deletions.
diff --git a/src/Components/MyPage/PageContent.jsx b/src/Components/MyPage/PageContent.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
+import propTypes from 'prop-types';
 import Tag from '../Common/Tag';
 import Button from '../Common/Button';
-// import Colors from '../../Assets/Colors/Colors';
-// 안녕하세요 ㅇㅇ님이랑 버튼 묶는 헤더
+import Inputs, { InputNum } from '../Common/Inputs';
+
 const Header = styled.div`
   display: flex;
   justify-content: space-between;
@@ -26,6 +25,7 @@ const Info = styled.p`
 const Wrapper = styled.div`
   display: flex;
   justify-content: space-between;
+  align-items: center;
   flex-wrap: wrap;
   width: 90%;
 `;
@@ -34,23 +34,37 @@ const Wrapper = styled.div`
 // span은 받아오는 데이터값
 const Container = styled.div`
   width: 500px;
-  font-size: 1.4rem;
+  /* height: 45px; */
+  font-size: 1.2rem;
+  margin-bottom: 20px;
   span:nth-child(1) {
     font-weight: 700;
+    font-size: 1.2rem;
+    display: inline-block;
+    width: 140px;
+    padding: 0;
+    margin: 0;
   }
   span:nth-child(2) {
-    display: block;
-    padding: 30px 0;
+    display: inline-block;
+    font-size: 1.2rem;
+    padding: 0;
+    margin: 0;
   }
 `;
 
 // 각각 하양송이, 아이디값, 핸드폰번호값, 날짜 받아오기 => 태그는...
 // eslint-disable-next-line react/prop-types
-const Contents = ({ userName, userID, userNumber, userStep, userDate }) => {
-  const navigate = useNavigate();
-  const routeChange = () => {
-    navigate('./modifypage');
-  };
+const Contents = ({
+  userName,
+  userID,
+  userNumber,
+  userStep,
+  userDate,
+  editFunc,
+  editState,
+  inputFunc,
+}) => {
   return (
     <div>
       <Header>
@@ -59,40 +73,80 @@ const Contents = ({ userName, userID, userNumber, userStep, userDate }) => {
           Content="내 정보 수정하기"
           width="100%"
           Height="50px"
-          ClickFunc={routeChange}
+          ClickFunc={editFunc}
         />
       </Header>
       <Wrapper>
-        <Container>
-          <span>아이디</span>
-          <span>{userID}</span>
-        </Container>
-        <Container>
-          <span>휴대폰번호</span>
-          <span>{userNumber}</span>
-        </Container>
-        <Container>
-          <span>백신접종여부</span>
-          <span>
-            <Tag step={userStep} />
-          </span>
-        </Container>
-        <Container>
-          <span>마지막 접종일</span>
-          <span>{userDate}</span>
-        </Container>
+        {editState ? (
+          <Inputs
+            inputName="username"
+            inputContent="아이디"
+            inputValue={userID}
+            inputWidth="320px"
+            inputChange={inputFunc}
+          />
+        ) : (
+          <Container>
+            <span>아이디</span>
+            <span>{userID}</span>
+          </Container>
+        )}
+        {editState ? (
+          <Inputs
+            inputName="phone_number"
+            inputContent="휴대폰 번호"
+            inputValue={userNumber}
+            inputWidth="320px"
+            inputChange={inputFunc}
+          />
+        ) : (
+          <Container>
+            <span>휴대폰 번호</span>
+            <span>{userNumber}</span>
+          </Container>
+        )}
+        {editState ? (
+          <InputNum
+            inputName="vaccine_step"
+            inputContent="예방접종 내역"
+            inputValue={userStep}
+            inputChange={inputFunc}
+          />
+        ) : (
+          <Container>
+            <span>예방접종 내역</span>
+            <Tag>{userStep}</Tag>
+          </Container>
+        )}
+        {editState ? (
+          <Inputs
+            inputType="vaccine_date"
+            inputContent="마지막 접종일"
+            inputName="lastDate"
+            inputValue={userDate}
+            inputWidth="320px"
+            inputChange={inputFunc}
+          />
+        ) : (
+          <Container>
+            <span>예방접종 내역</span>
+            <span>{userDate}</span>
+          </Container>
+        )}
       </Wrapper>
     </div>
   );
 };
 
-// eslint-disable-next-line react/no-typos
-Contents.PropTypes = {
-  userName: PropTypes.string.isRequired,
-  userID: PropTypes.string.isRequired,
-  userNumber: PropTypes.string.isRequired,
-  userStep: PropTypes.number.isRequired,
-  userDate: PropTypes.string.isRequired,
+Contents.propTypes = {
+  userName: propTypes.string.isRequired,
+  userID: propTypes.string.isRequired,
+  userNumber: propTypes.string.isRequired,
+  userStep: propTypes.number.isRequired,
+  userDate: propTypes.string.isRequired,
+  editFunc: propTypes.func.isRequired,
+  editState: propTypes.bool.isRequired,
+  inputFunc: propTypes.func.isRequired,
 };
 
 export default Contents;
diff --git a/src/Layouts/Join/Join.jsx b/src/Layouts/Join/Join.jsx
@@ -4,9 +4,10 @@
 import React, { useState } from 'react';
 import Contents from '../../Components/Join/Contents';
 import { userJoin } from '../../api/User';
-// import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 const Join = () => {
+  const navigate = useNavigate();
   // input 관련 로직
   const [inputs, setinputs] = useState({});
 
@@ -32,6 +33,7 @@ const Join = () => {
     try {
       // api 통신
       await userJoin(values);
+      navigate('/');
     } catch (error) {
       alert('입력 사항을 확인하고 다시 회원가입을 해주세요.');
     }

diff --git a/src/Layouts/MyPage/MyPage.jsx b/src/Layouts/MyPage/MyPage.jsx
@@ -1,20 +1,41 @@
-/* eslint-disable import/named */
 /* eslint-disable no-unused-vars */
-import React from 'react';
+import React, { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import Contents from '../../Components/MyPage/PageContent';
 import { UserData, UserInfo } from '../../Recoil/User';
 
 const MyPage = () => {
   const user = useRecoilValue(UserData);
   const profile = useRecoilValue(UserInfo);
+
+  // input 관련 로직
+  const [inputs, setinputs] = useState({});
+
+  // edit on/off
+  const [IsEdit, setIsEdit] = useState(false);
+  // edit button toggle event
+  const toggleEdit = () => {
+    setIsEdit(true);
+    console.log(IsEdit);
+  };
+
+  const handleInputs = e => {
+    setinputs({
+      ...inputs,
+      [e.target.name]: e.target.value,
+    });
+  };
+
   return (
     <Contents
       userName={profile.full_name}
       userID={profile.username}
       userNumber={profile.phone_number}
       userStep={profile.vaccine_step}
       userDate={profile.vaccine_date}
+      editFunc={toggleEdit}
+      editState={IsEdit}
+      inputFunc={handleInputs}
     />
   );
 };