Merge pull request #14 from AIVLE-School-Third-Big-Project/mergeTemp

✨ Feat : 추가 마이페이지 기능

Author: Titosvarius

style/src/components/MainPage/Content.js

@@ -8,11 +8,8 @@ import sizeListIcon1 from '../../images/sizeListIcon1.png'
 import sizeListIcon2 from '../../images/sizeListIcon2.png'
 import GrayButton from './GrayButton'
 import { Link } from 'react-router-dom'
-import { useSelector } from 'react-redux'
 
 function Content() {
-  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated)
-  console.log(`auth1 : ${isAuthenticated}`)
   return (
     <div className="mainPageContent">
       <section className="homeMainSection">

style/src/components/MainPage/MainPage.js

@@ -1,12 +1,8 @@
 import Navigation from '../Navigationbar/Nav.js'
 import Footer from '../Footer.js'
 import Content from './Content.js'
-import { useSelector } from 'react-redux'
 
 function MainPage() {
-  const user = useSelector((state) => state.auth.user)
-  console.log('aa')
-  console.log(user)
   return (
     <div className="mainPage">
       <Navigation></Navigation>

style/src/components/MyPage/AlertMessage.js

@@ -0,0 +1,28 @@
+import Alert from 'react-bootstrap/Alert'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { solid } from '@fortawesome/fontawesome-svg-core/import.macro'
+import styles from './MyPage.module.css'
+
+function AlertMessage({ variant, message, show, setShow }) {
+  return (
+    <Alert
+      className={styles.alertMessageBox}
+      variant={variant}
+      show={show}
+      onClose={() => setShow(false)}
+      dismissible
+      style={{ position: 'absolute' }}
+    >
+      {variant === 'success' && (
+        <FontAwesomeIcon icon={solid('circle-check')} />
+      )}
+      {variant === 'danger' && (
+        <FontAwesomeIcon icon={solid('circle-exclamation')} />
+      )}
+      {'  '}
+      {message}
+    </Alert>
+  )
+}
+
+export default AlertMessage

style/src/components/MyPage/FormBox.js

@@ -1,5 +1,5 @@
 import ClassMerger from '../tools/ClassNameGenerater'
-import Proptypes from 'prop-types'
+// import Proptypes from 'prop-types'
 import { Form } from 'react-bootstrap'
 import styles from './MyPage.module.css'
 
@@ -11,8 +11,9 @@ function FormBox({
   max,
   pattern,
   setState,
-  inputHandler,
   value,
+  isInvalid,
+  invalidTest,
   disabled = false,
 }) {
   return (
@@ -28,29 +29,30 @@ function FormBox({
         max={max}
         pattern={pattern}
         disabled={disabled}
-        isInvalid={true}
+        isInvalid={isInvalid}
         value={value}
+        formNoValidate
         onChange={(event) => {
-          console.log(event)
-          inputHandler(event, setState)
+          const input = event.target.value
+          setState(input)
         }}
       />
-      <Form.Control.Feedback type="invalid" isInvalid={true}>
-        패턴에 맞지 않는 값입니다.
+      <Form.Control.Feedback type="invalid">
+        {invalidTest}
       </Form.Control.Feedback>
     </Form.Group>
   )
 }
 
-FormBox.propTypes = {
-  id: Proptypes.string.isRequired,
-  label: Proptypes.string.isRequired,
-  type: Proptypes.string.isRequired,
-  data: Proptypes.string.isRequired,
-  min: Proptypes.string,
-  max: Proptypes.string,
-  pattern: Proptypes.string,
-  disabled: Proptypes.bool,
-}
+// FormBox.propTypes = {
+//   id: Proptypes.string.isRequired,
+//   label: Proptypes.string.isRequired,
+//   type: Proptypes.string.isRequired,
+//   min: Proptypes.string,
+//   max: Proptypes.string,
+//   pattern: Proptypes.string,
+//   setState: Proptypes.func,
+//   disabled: Proptypes.bool,
+// }
 
 export default FormBox

style/src/components/MyPage/LeftSubMyPage.js

@@ -46,7 +46,7 @@ function LeftSubMyPage({ page, onClickHandler }) {
         page={page}
         onClick={onClickHandler}
       />
-      <TransButton
+      {/* <TransButton
         context={'옷장'}
         option={'closet'}
         page={page}
@@ -57,7 +57,7 @@ function LeftSubMyPage({ page, onClickHandler }) {
         option={'style'}
         page={page}
         onClick={onClickHandler}
-      />
+      /> */}
     </div>
   )
 }

style/src/components/MyPage/MyPage.js

@@ -3,23 +3,54 @@ import styles from './MyPage.module.css'
 import LeftSubMyPage from './LeftSubMyPage'
 import RightSubMyPage from './RightSubMyPage'
 import Navigation from '../Navigationbar/Nav.js'
+import { Navigate } from 'react-router-dom'
+import AlertMessage from './AlertMessage'
+
+function MyPage({ currPage = 'privacy' }) {
+  const [page, setPage] = useState(currPage)
+  const [isSaveComplete, setIsSaveComplete] = useState(false)
+  const [isShowAlert, setIsShowAlert] = useState(false)
 
-function MyPage() {
-  const [page, setPage] = useState('privacy')
   const changePage = (pageName) => {
     setPage(pageName)
-    console.log(pageName)
   }
 
-  return (
-    <>
-      <Navigation />
-      <div className={styles.mainContainer}>
-        <LeftSubMyPage page={page} onClickHandler={changePage} />
-        <RightSubMyPage page={page} />
-      </div>
-    </>
-  )
+  const lsUser = JSON.parse(localStorage.getItem('user'))
+  const lsToken = localStorage.getItem('token')
+
+  if (lsUser && lsToken) {
+    return (
+      <>
+        <div className={styles.myPageRoot}></div>
+        <Navigation />
+        <div className={styles.mainContainer}>
+          <LeftSubMyPage page={page} onClickHandler={changePage} />
+          <RightSubMyPage
+            page={page}
+            setIsShowAlert={setIsShowAlert}
+            setIsSaveComplete={setIsSaveComplete}
+          />
+        </div>
+        {isSaveComplete ? (
+          <AlertMessage
+            variant="success"
+            message={'저장에 성공하였습니다.'}
+            show={isShowAlert}
+            setShow={setIsShowAlert}
+          />
+        ) : (
+          <AlertMessage
+            variant="danger"
+            message={'저장에 실패하였습니다. 다시 한번 시도해 주세요.'}
+            show={isShowAlert}
+            setShow={setIsShowAlert}
+          />
+        )}
+      </>
+    )
+  } else {
+    return <Navigate to={'/'} />
+  }
 }
 
 export default MyPage

style/src/components/MyPage/MyPage.module.css

@@ -7,6 +7,10 @@
 
 @import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
 
+.myPageRoot {
+    position: relative;
+}
+
 .mainContainer {
     --nav-height : 95px;
     --max-width : 1920px;
@@ -86,12 +90,34 @@
     padding-left: var(--rightContainer-padding-left);
 }
 
+.alertContainer {
+    position: absolute;
+
+}
+/* .alert { 
+    position: none;
+} */
+/* #alertMessageBox {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+} */
+.alertMessageBox {
+    /* all: unset; */
+    top: 10%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+}
+
 .formGroup {
     padding-right: var(--rightContainer-padding-left);
 }
 
 .formLabel {
-    margin: 0px;
+    margin: 0px 0px 8px 0px;
     padding: 0px;
 }
 
@@ -107,6 +133,48 @@
     font-weight: 600;
 }
 
+.maleButton {
+    width: 250px;
+    height: 46px;
+    border: 2px solid #d7d7d7;
+    border-radius: 14px;
+    background-color: white;
+    margin-right: 18px;
+
+    color: #6d6d6d;
+    font-family: 'NanumSquare';
+    font-size: 18px;
+    font-weight: 600;
+    transition: all 0.2s ease-out;
+}
+
+.maleSelected,
+.maleButton:hover {
+    background-color: #c0dfff;
+    color: black;
+}
+
+.femaleButton {
+    width: 250px;
+    height: 46px;
+    border: 2px solid #d7d7d7;
+    border-radius: 14px;
+    background-color: white;
+    margin-left: 18px;
+
+    color: #6d6d6d;
+    font-family: 'NanumSquare';
+    font-size: 18px;
+    font-weight: 600;
+    transition: all 0.2s ease-out;
+}
+
+.femaleSelected,
+.femaleButton:hover {
+    background-color: #fca8a5;
+    color: black;
+}
+
 .submitWarpper {
     text-align: right;
     padding-right: var(--rightContainer-padding-left);