비밀번호 찾기 components

src/components/account/find/AccountFindPassword.js

@@ -0,0 +1,109 @@
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button,
+  Modal, ModalHeader, ModalBody, ModalFooter  } from 'reactstrap'
+  import { User, Info, CreditCard, Lock, Check, X } from 'react-feather'
+
+import loginImg from '../../../assets/images/login01.png';
+import '../../../assets/css/custom.css';
+
+export const AccountFindPassword =  props => {
+  const [activeTab, setActiveTab] = useState('1')
+
+  // ** Function to toggle tabs
+  const toggle = tab => setActiveTab(tab)
+  const [modal, setModal] = useState(false)
+
+
+
+  return(
+    <>
+      <TabPane tabId='2'>
+        <Form>
+          <FormGroup className='form-label-group position-relative has-icon-left'>
+            <InputGroup className=''>
+              <InputGroupAddon addonType='prepend'>
+                <InputGroupText>
+                  <User size={14} />
+                </InputGroupText>
+              </InputGroupAddon>
+              <Input placeholder='아이디' />
+            </InputGroup>
+          </FormGroup>
+          <FormGroup>
+            <div className='input-btn'>
+              <Col md='3' xs='12'>
+                <Input type='select' placeholder='+(국가번호)'>
+                  <option>+82</option>
+                  <option>21111</option>                       
+                </Input>
+              </Col>
+              <Col md='6' xs='12'>
+                <Input type='number' placeholder='휴대폰번호'/>
+              </Col>       
+              <Col md='3' xs='12'>
+                <Button color='primary' type='button'>인증번호 발송</Button>
+              </Col>       
+            </div>
+          </FormGroup>
+          <FormGroup>
+            <div className='input-btn time-span'>
+              <Col md='9' xs='12' className='timeInput'>
+                <Input type='number' placeholder='인증번호 입력'/>
+                <span className='time'>남은시간 : 3:00</span>
+                </Col>       
+              <Col md='3' xs='12'>
+                <Button color='primary' type='button'>인증번호 확인</Button>
+              </Col>       
+            </div>
+          </FormGroup>
+          <FormGroup>
+            <div className='full-btn-2n vertically-centered-modal'>
+              <Button
+                color='secondary'
+                type='button'
+                onClick={props.handlerClose}
+              >
+                취소
+              </Button>
+              <Button color='primary' type='button' onClick={() => setModal(!modal)} >확인</Button>
+              <Modal isOpen={modal} toggle={() => setModal(!modal)} className='modal-dialog-centered user-search-modal'>
+                <ModalHeader toggle={() => setModal(!modal)}>비밀번호 확인</ModalHeader>
+                <ModalBody>
+                  <span class="etc-txt">새로운 비밀번호로 변경해주세요.</span>
+                  <FormGroup className='form-label-group position-relative has-icon-left'>
+                    <InputGroup>
+                      <InputGroupAddon addonType='prepend'>
+                        <InputGroupText>
+                          <Lock size={14} />
+                        </InputGroupText>
+                      </InputGroupAddon>
+                      <Input placeholder='새로운 비밀번호' type='password'/>
+                    </InputGroup>
+                    </FormGroup>
+                    <FormGroup className='form-label-group position-relative has-icon-left mb-0'>
+                    <InputGroup>
+                      <InputGroupAddon addonType='prepend'>
+                        <InputGroupText>
+                          <Lock size={14} />
+                        </InputGroupText>
+                      </InputGroupAddon>
+                      <Input placeholder='새로운 비밀번호 확인' type='password'/>
+                    </InputGroup>
+                  </FormGroup>
+                </ModalBody>
+                <ModalFooter>
+                  <Button color='primary' onClick={() => setModal(!modal)}>
+                    저장
+                  </Button>
+                </ModalFooter>
+              </Modal>
+            </div>
+          </FormGroup>
+        </Form>                  
+      </TabPane>
+    </>
+  )
+}

src/components/account/find/AccountFindTab.js

@@ -0,0 +1,90 @@
+import { useState } from "react";
+import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button,
+  Modal, ModalHeader, ModalBody, ModalFooter  } from 'reactstrap'
+import classnames from 'classnames';
+import {
+  User,
+  Info,
+  Share,
+  X,
+  Lock,
+  Edit,
+  Trash2,
+  Image,
+  UserCheck,
+  Clipboard,
+  Settings,
+  AlertTriangle
+} from 'react-feather';
+import { AccountFindUserId } from "./AccountFindUserId";
+import { AccountFindPassword } from "./AccountFindPassword";
+import { AccountFindUserIdContainer } from "../../../containers/account/find/AccountFindUserIdContainer";
+import { AccountFindPasswordContainer } from "../../../containers/account/find/AccountFindPasswordContainer";
+import { useHistory } from 'react-router-dom'
+
+export const AccountFindTab = props => {
+  const [activeTab, setActiveTab] = useState('1');
+  const history = useHistory();
+
+  const toggle = tab => setActiveTab(tab)
+  const [centeredModal, setCenteredModal] = useState(false)
+  const [centeredModal02, setCenteredModal02] = useState(false)
+
+  // const toggle = tab => {
+  //   if (activeTab !== tab) setActiveTab(tab);
+  // };
+
+  const handlerClose = () => {
+    history.push(`/account/login/AccountLogin`)
+  }
+
+  return(
+    <>
+      <div className='card-body-tab-menu'>
+        <Nav pills>
+          <NavItem>
+            {/* <NavLink active={activeTab === '1'} onClick={() => toggle('1')}> */}
+            <NavLink
+              className={classnames({ active: activeTab === '1' })}
+              onClick={() => {
+                toggle('1');
+              }}
+            >
+              <User size={14} />
+              <span className='align-middle d-none d-sm-block'>아이디 찾기</span>
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            {/* <NavLink active={activeTab === '2'} onClick={() => toggle('2')}> */}
+            <NavLink
+              className={classnames({active: activeTab === '2'})}
+              onClick={() => {
+                toggle('2');
+              }}
+            >
+              <Lock size={14} />
+              <span className='align-middle d-none d-sm-block'>비밀번호 찾기</span>
+            </NavLink>
+          </NavItem>
+        </Nav>            
+      </div>
+      <Row className='app-user-edit'>
+        <Col sm='12'>
+          <Card>
+            <CardBody className='card-body-tab-cont'>
+              <TabContent activeTab={activeTab}>
+                <AccountFindUserIdContainer
+                  handlerClose={handlerClose}
+                />
+                <AccountFindPasswordContainer 
+                  handlerClose={handlerClose}
+                />
+              </TabContent>
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
+    </>
+  )
+
+}

src/components/account/find/AccountFindUserId.js

@@ -0,0 +1,118 @@
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button,
+  Modal, ModalHeader, ModalBody, ModalFooter  } from 'reactstrap'
+  import { User, Info, CreditCard, Lock, Check, X } from 'react-feather'
+
+import loginImg from '../../../assets/images/login01.png';
+import '../../../assets/css/custom.css';
+
+export const AccountFindUserId =  props  => {
+  const [activeTab, setActiveTab] = useState('1')
+
+  // ** Function to toggle tabs
+  const toggle = tab => setActiveTab(tab)
+  const [confirmModal, setConfirmModal] = useState(false)
+  const [valiModal, setValiModal] = useState({
+    isOpen: false,
+    title: '',
+    desc: ''
+  });
+
+  const crtfyhpVali = yup.object().shape({
+    memberName: yup.string().trim().required('이름을 입력해 주세요.'),
+    hpno: yup.string().required('휴대폰번호를 입력해 주세요.')
+  })
+
+ const handlerCrtfySend =  () => {
+  // const vData = getValues();
+  setValiModal({
+    isOpen: true,
+    title: '인증번호 발송',
+    desc: '인증번호 발송은 3회 까지만 가능합니다.'
+  });
+  return false;
+ }
+
+  
+
+  return(
+    <>
+      <TabPane tabId='1'>
+        <Form>
+          <FormGroup className='form-label-group position-relative has-icon-left'>
+          <InputGroup className=''>
+            <InputGroupAddon addonType='prepend'>
+              <InputGroupText>
+                <User size={14} />
+              </InputGroupText>
+            </InputGroupAddon>
+            <Input placeholder='이름' />
+          </InputGroup>
+          </FormGroup>
+          <FormGroup>
+            <div className='input-btn'>
+              <Col md='3' xs='12'>
+                <Input type='select' placeholder='+(국가번호)'>
+                  <option>+82</option>
+                  {/* <option>21111</option> */}
+                </Input>
+              </Col>
+              <Col md='6' xs='12'>
+                <Input type='number' placeholder='휴대폰번호'/>
+              </Col>       
+              <Col md='3' xs='12'>
+                <Button
+                  color='primary'
+                  type='button'
+                  onClick={handlerCrtfySend}
+                >
+                  인증번호 발송
+                </Button>
+              </Col>       
+            </div>
+          </FormGroup>
+          <FormGroup>
+            <div className='input-btn'>
+              <Col md='9' xs='12' className='timeInput'>
+                <Input type='number' placeholder='인증번호 입력'/>
+                <span className='time'>남은시간 : 3:00</span>
+              </Col>       
+              <Col md='3' xs='12'>
+                <Button color='primary' type='button'>인증번호 확인</Button>
+              </Col>       
+            </div>
+          </FormGroup>
+          <FormGroup>
+            <div className='full-btn-2n vertically-centered-confirmModal'>
+              <Button
+                color='secondary'
+                type='button'
+                onClick={props.handlerClose}
+              >
+                취소
+              </Button>
+              <Button color='primary' type='button' onClick={() => setConfirmModal(!confirmModal)} >확인</Button>
+                <Modal isOpen={confirmModal} toggle={() => setConfirmModal(!confirmModal)} className='confirmModal-dialog-centered user-search-confirmModal'>
+                  <ModalHeader toggle={() => setConfirmModal(!confirmModal)}>아이디 확인</ModalHeader>
+                    <ModalBody>
+                      회원님의 아이디는<br/><span className='user-search-id'>TEST123123</span> 입니다.
+                    </ModalBody>
+                    <ModalFooter>
+                      {/* <Button color='primary' onClick={() => setConfirmModal(!confirmModal)}> */}
+                      <Button color='primary' onClick={props.handlerClose}>
+                        로그인
+                      </Button>{' '}
+                    </ModalFooter>
+                </Modal>
+            </div>
+          </FormGroup>
+        </Form>
+      </TabPane>
+    </>
+  )
+}

src/components/account/login/AccountLogin.js

@@ -152,7 +152,8 @@ export const AccountLogin = ({ props }) => {
             <div className='d-flex justify-content-between align-items-center login-link'>
               <div>비밀번호를 잊으셨나요?</div>
               <div className='float-right'>
-                <a href='#'>비밀번호찾기</a>
+                <Link to='/account/find'>비밀번호찾기</Link>
+                {/* <a href='#'>비밀번호찾기</a> */}
               </div>
             </div>
           </Form>

src/containers/account/find/AccounFindTabContainer.js

@@ -0,0 +1,25 @@
+import { AccountFindTab } from "../../../components/account/find/AccountFindTab";
+
+import loginImg from '../../../assets/images/login01.png';
+
+import '../../../assets/css/custom.css';
+
+export const AccountFindTabContainer = () => {
+
+  return (
+    <>
+      <div className='login'>
+        <div className='login-logo'>Drone Control System</div>
+        <div className='login-img'>
+          <img src={loginImg} />
+        </div>
+        <div className='login-form info-search'>
+          <div className='pal-card'>
+            <AccountFindTab  />
+          </div>
+        </div>
+      </div>
+    </>
+    
+  );
+};

src/containers/account/find/AccountFindPasswordContainer.js

@@ -0,0 +1,13 @@
+import { AccountFindPassword } from "../../../components/account/find/AccountFindPassword"
+
+export const AccountFindPasswordContainer = props => {
+
+  return(
+
+    <>
+      <AccountFindPassword
+        handlerClose={props.handlerClose}
+      />
+    </>
+  )
+}

src/containers/account/find/AccountFindUserIdContainer.js

@@ -0,0 +1,13 @@
+import { AccountFindUserId } from "../../../components/account/find/AccountFindUserId"
+
+export const AccountFindUserIdContainer = props => {
+
+  return(
+
+    <>
+      <AccountFindUserId
+        handlerClose={props.handlerClose}
+      />
+    </>
+  )
+}

src/router/routes/RouteAccount.js

@@ -23,6 +23,14 @@ const RouteAccount = [
       import('../../views/Mypage/Mypage')
     )
   },
+  {
+    path: '/account/find',
+    component: lazy(() => import('../../views/account/AccountFind')),
+    layout: 'BlankLayout',
+    meta: {
+      authRoute: true
+    }
+  }
 ];
 
 export default RouteAccount;

src/views/account/AccountFind.js

@@ -0,0 +1,12 @@
+import { AccountFindTabContainer } from "../../containers/account/find/AccounFindTabContainer";
+
+
+const AccountFindView = props => {
+  return (
+    <>
+      <AccountFindTabContainer />
+    </>
+  )
+};
+
+export default AccountFindView;