ADD: Add Modal in SelsoList Component.

src/modules/SelsoList/SelsoList.jsx

@@ -5,13 +5,16 @@ import Modal from 'src/components/Modal';
 
 import SelsoItemCard from './SelsoItemCard';
 import styles from './SelsoList.module.scss';
-import { selsoCost } from 'src/constants/costs';
 
 const SelsoList = inject('selsoListStore', 'userStore', 'myPointStore')(
   observer(({ selsoListStore, userStore, myPointStore, history }) => {
     const [isOpenSpendPointModal, setIsOpenSpendPointModal] = useState(false);
     const [isOpenPointLackModal, setIsOpenPointLackModal] = useState(false);
-
+    const [isOpenHaveNotSelsoProfileModal, setIsOpenHaveNotSelsoProfileModal] = useState(false);
+    const [isOpenNotActiveSelsoProfileModal, setIsOpenNotActiveSelsoProfileModal] = useState(false);
+
+    const [userStatus, setUserStatus] = useState('');
+
     useEffect(() => {
       if (userStore.profile?.gender && userStore.profile?.university) {
         if (userStore.profile.gender === 'MALE') {
@@ -22,23 +25,52 @@ const SelsoList = inject('selsoListStore', 'userStore', 'myPointStore')(
       }
     }, [userStore.profile?.gender, userStore.profile?.university]);
 
+    useEffect(() => {
+      selsoListStore.getMySelsoProfile()
+        .then((res) => {
+          if (res.status === 404) {
+            setUserStatus('NoSelsoProfile');
+          } else if (res.data.isActive === false) {
+            setUserStatus('NotActive');
+          } else if (res.status === 200) {
+            setUserStatus('AvailableToUse');
+          }
+        });
+    }, []);
+
     const moveToDetailPageHandler = (selsoItem) => (_e) => {
-      selsoListStore.setChoosedSelso(selsoItem);
+      if (userStatus === 'NoSelsoProfile') {
+        setIsOpenHaveNotSelsoProfileModal(true);
+      } else if (userStatus === 'NotActive') {
+        setIsOpenNotActiveSelsoProfileModal(true);
+      } else if (userStatus === 'AvailableToUse') {
+        selsoListStore.setChoosedSelso(selsoItem);
 
-      if (selsoItem.isViewed) {
-        history.push('selso/detail');
-      } else {
-        setIsOpenSpendPointModal(true);
+        if (selsoItem.isViewed) {
+          selsoListStore.fetchSelsoDetail()
+            .then((res) => {
+              if (res.status === 200) {
+                history.push('selso/detail');
+              }
+            });
+        } else {
+          setIsOpenSpendPointModal(true);
+        }
       }
+
     };
 
     const spendPointAndMoveToDetailPage = () => {
-      if (myPointStore.restPoint >= selsoCost.ViewProfileDetail) {
-        history.push('selso/detail');
-      } else {
-        setIsOpenSpendPointModal(false);
-        setIsOpenPointLackModal(true);
-      }
+      selsoListStore.fetchSelsoDetail()
+        .then((res) => {
+          if (res.status === 200) {
+            selsoListStore.root.myPointStore.fetchMyPointHistory();
+            history.push('selso/detail');
+          } else if (res.status === 403) {
+            setIsOpenSpendPointModal(false);
+            setIsOpenPointLackModal(true);
+          }
+        });
     };
 
     return (
@@ -49,18 +81,62 @@ const SelsoList = inject('selsoListStore', 'userStore', 'myPointStore')(
               <SelsoItemCard selsoItem={selsoItem} />
             </div>
           ))
-            }
-            <Modal
-            isOpen={isOpenPointLackModal}
-            close={() => setIsOpenPointLackModal(false)}
+        }
+        <Modal
+          isOpen={isOpenPointLackModal}
+          close={() => setIsOpenPointLackModal(false)}
+        >
+          <p>포인트가 부족합니다.<br /> 학교 인증이 완료되면 30포인트가 지급됩니다.</p>
+          <p>학생증 이미지를 업로드하지 않으신 분은 회원가입 마무리를 해주세요.<br /> 이미지를 확인하고 포인트를 지급하는 데 시간이 걸릴 수 있습니다.</p>
+        </Modal>
+        <Modal
+          isOpen={isOpenHaveNotSelsoProfileModal}
+          close={() => setIsOpenHaveNotSelsoProfileModal(false)}
+          buttonList={[
+            <button
+              key="actionButton"
+              className={`${styles.modalButton} ${styles.actionButton}`}
+              onClick={() => history.push('/user/register')}
+            >
+              등록하기
+            </button>,
+            <button
+              key="cancelButton"
+              className={`${styles.modalButton} ${styles.cancelButton}`}
+              onClick={() => setIsOpenHaveNotSelsoProfileModal(false)}
             >
-              <p>포인트가 부족합니다.<br /> 학교 인증이 완료되면 30포인트가 지급됩니다.</p>
-              <p>학생증 이미지를 업로드하지 않으신 분은 회원가입 마무리를 해주세요.<br /> 이미지를 확인하고 포인트를 지급하는 데 시간이 걸릴 수 있습니다.</p>
-            </Modal>
-            <Modal
-            isOpen={isOpenSpendPointModal}
-            close={() => setIsOpenSpendPointModal(false)}
-            buttonList={[
+              취소
+            </button>,
+          ]}
+        >
+          <p>셀소 프로필 등록 후 이용해주세요.</p>
+        </Modal>
+        <Modal
+          isOpen={isOpenNotActiveSelsoProfileModal}
+          close={() => setIsOpenNotActiveSelsoProfileModal(false)}
+          buttonList={[
+            <button
+              key="actionButton"
+              className={`${styles.modalButton} ${styles.actionButton}`}
+              onClick={() => history.push('my/profile')}
+            >
+              공개하기
+            </button>,
+            <button
+              key="cancelButton"
+              className={`${styles.modalButton} ${styles.cancelButton}`}
+              onClick={() => setIsOpenNotActiveSelsoProfileModal(false)}
+            >
+              취소
+            </button>,
+          ]}
+        >
+          <p>셀소 프로필을 공개 후 이용해주세요.</p>
+        </Modal>
+        <Modal
+          isOpen={isOpenSpendPointModal}
+          close={() => setIsOpenSpendPointModal(false)}
+          buttonList={[
             <button
               key="actionButton"
               className={`${styles.modalButton} ${styles.actionButton}`}

src/pages/Selso/SelsoDetailPage/SelsoDetailPage.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { inject, observer } from 'mobx-react';
 
 import Card from 'src/modules/SelsoDetail/Card';
@@ -10,18 +10,6 @@ export const SelsoDetailPage = inject('selsoListStore')(observer(({ selsoListSto
   const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
   const [kakaoLinkErrorMessage, setKakaoLinkErrorMessage] = useState('');
 
-  useEffect(() => {
-    if (selsoListStore.choosedSelso) {
-      // choosed selso 값이 없을 경우 fetchSelsoDetail function이 undefined를 반환하여 callback을 사용할 수 없다.
-      selsoListStore.fetchSelsoDetail()
-        .then((res) => {
-          if (res?.status === 200) {
-            selsoListStore.root.myPointStore.fetchMyPointHistory();
-          }
-        });
-    }
-  }, [selsoListStore.choosedSelso]);
-
   const getOpenKakaoLink = async () => {
     const chatLink = await selsoListStore.fetchOpenKakaoLink(selsoListStore.fetchedSelsoDetail.id)
       .then((res) => {

src/stores/SelsoListStore.js

@@ -36,8 +36,21 @@ export default class SelsoListStore {
     .then((res) => {
       this.mySelsoProfile = res.data;
       return res;
-    })
-    .catch((err) => err);
+    }).catch((err) => {
+      if (err.response) {
+        return {
+          status: err.response.status,
+          message: err.response.statusText,
+          data: err.response.data,
+        };
+      }
+
+      return {
+        status: null,
+        message: 'unknown error',
+        data: {},
+      };
+    });
 
   @action setMySelsoProfile = (type, value) => {
     this.mySelsoProfile[type] = value
@@ -105,7 +118,21 @@ export default class SelsoListStore {
             status: res.status,
             message: res.statusText,
           };
-        });
+        }).catch((err) => {
+          if (err.response) {
+            return {
+              status: err.response.status,
+              message: err.response.statusText,
+              data: err.response.data,
+            };
+          }
+
+          return {
+            status: null,
+            message: 'unknown error',
+            data: {},
+          };
+        })
     }
   };