Feat Fix :: Recoil Persist Add (Tocken save), MyPage Fix -Umin #35

package.json

@@ -15,6 +15,7 @@
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "recoil": "^0.5.2",
+    "recoil-persist": "^4.0.0",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.1.2"
   },

src/Components/Common/Inputs.jsx

@@ -180,7 +180,7 @@ LoginInput.propTypes = {
   inputWidth: PropTypes.string,
   inputHeight: PropTypes.string,
   inputPlaceholder: PropTypes.string,
-  inputChange: PropTypes.string.isRequired,
+  inputChange: PropTypes.any.isRequired,
   inputName: PropTypes.string.isRequired,
   inputValue: PropTypes.any,
 };

src/Components/Login/Contents.jsx

@@ -84,6 +84,7 @@ const Contents = () => {
         setUser(userData.data);
         const info = await userInfoAPI(User.username);
         setUserProfile(info.data);
+        console.log(UserProfile);
         history.push('/select');
       } else {
         alert('로그인에 실패했습니다. 다시 로그인해주세요.');

src/Components/MyPage/PageContent.jsx

@@ -4,15 +4,13 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Tag from '../Common/Tag';
 import Button from '../Common/Button';
-
+// import Colors from '../../Assets/Colors/Colors';
 // 안녕하세요 ㅇㅇ님이랑 버튼 묶는 헤더
 const Header = styled.div`
   display: flex;
   justify-content: space-between;
   width: 90%;
-  text-align: center;
-  height: 50px;
-  padding: 20px;
+  height: 80px;
 `;
 
 // 안녕하세요 ㅇㅇㅇ님
@@ -21,40 +19,35 @@ const Info = styled.p`
   font-size: 2rem;
   line-height: 45px;
   text-align: center;
+  min-width: 300px;
 `;
 
 // 아이템 컨테이너 묶기
 const Wrapper = styled.div`
   display: flex;
+  justify-content: space-between;
   flex-wrap: wrap;
-  width: 1600px;
-  padding: 30px;
+  width: 90%;
 `;
 
 // 마이페이지 데이터 하나
 // span은 받아오는 데이터값
 const Container = styled.div`
   width: 500px;
-  font-size: 1.2rem;
-  padding: 0 100px 80px 0;
+  font-size: 1.4rem;
   span:nth-child(1) {
     font-weight: 700;
-    padding-bottom: 20px;
   }
   span:nth-child(2) {
-    font-weight: 400;
     display: block;
-    padding: 20px;
-    width: 500px;
-    height: 40px;
-    line-height: 40px;
-    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
+    padding: 30px 0;
   }
 `;
 
 // 각각 하양송이, 아이디값, 핸드폰번호값, 날짜 받아오기 => 태그는...
 // eslint-disable-next-line react/prop-types
 const Contents = ({ userName, userID, userNumber, userStep, userDate }) => {
+  console.log(userName);
   const history = useHistory();
   const routeChange = () => {
     history.push('./modifypage');
@@ -96,11 +89,11 @@ const Contents = ({ userName, userID, userNumber, userStep, userDate }) => {
 
 // eslint-disable-next-line react/no-typos
 Contents.PropTypes = {
-  userName: PropTypes.string,
-  userID: PropTypes.string,
-  userNumber: PropTypes.string,
-  userStep: PropTypes.number,
-  userDate: PropTypes.string,
+  userName: PropTypes.string.isRequired,
+  userID: PropTypes.string.isRequired,
+  userNumber: PropTypes.string.isRequired,
+  userStep: PropTypes.number.isRequired,
+  userDate: PropTypes.string.isRequired,
 };
 
 export default Contents;

src/Components/Search/SearchContent.jsx

@@ -62,17 +62,22 @@ const SearchContent = ({ listData }) => {
   };
 
   const searchOutput = () => {
-    // 아무것도 입력이 안 된 경우 전체를 출력
     const filteredList = listData.filter(
       item => item.name.indexOf(searchText) > -1,
     );
     setresultList(filteredList);
   };
 
+  // 마운트 될 때 searchText 가 없으면 전체 리스트를 불러오기
+  useEffect(() => {
+    if (searchText.length === 0) {
+      setresultList(listData);
+    }
+  }, []);
+
   useEffect(() => {
-    setresultList(listData);
     searchOutput();
-  });
+  }, [searchText]);
 
   return (
     <Container>

src/Components/Select/District.jsx

@@ -51,7 +51,7 @@ const District = ({ districtName, percent, Url }) => {
 
 District.propTypes = {
   districtName: PropTypes.string.isRequired,
-  percent: PropTypes.number.isRequired,
+  percent: PropTypes.any.isRequired,
   Url: PropTypes.string.isRequired,
 };
 

src/Layouts/MyPage/MyPage.jsx

@@ -7,10 +7,11 @@ import { UserData, UserInfo } from '../../Recoil/User';
 const MyPage = () => {
   const user = useRecoilValue(UserData);
   const profile = useRecoilValue(UserInfo);
+  console.log(profile);
   return (
     <Contents
       userName={profile.full_name}
-      userID={profile.userName}
+      userID={profile.username}
       userNumber={profile.phone_number}
       userStep={profile.vaccine_step}
       userDate={profile.vaccine_date}

src/Layouts/MyReservation/MyReservation.jsx

@@ -8,6 +8,7 @@ import {
   waitingState,
 } from '../../Recoil/Reservation';
 
+// Would Fix :: Recoil (x) api애서 통신해서 가져오기
 const MyReservation = () => {
   const myTime = useRecoilValue(waitingState);
   const myOrder = useRecoilValue(orderState);

src/Layouts/Select/Select.jsx

@@ -51,7 +51,7 @@ const Select = () => {
   };
   useEffect(() => {
     fetch();
-  });
+  }, [List]);
   return (
     <Container>
       <Title>지역을 선택해주세요.</Title>

src/Recoil/User.jsx

@@ -1,14 +1,19 @@
 /* eslint-disable import/prefer-default-export */
 import { atom } from 'recoil';
+import { recoilPersist } from 'recoil-persist';
+
+const { persistAtom } = recoilPersist();
 
 // 로그인 결과
 export const UserData = atom({
   key: 'UserData',
   default: {},
+  effects_UNSTABLE: [persistAtom],
 });
 
 // 유저 정보
 export const UserInfo = atom({
   key: 'UserInfo',
   default: [],
+  effects_UNSTABLE: [persistAtom],
 });