2021-1-capstone-design1 / RIT_Project1

Go to a project
Toggle navigation Toggle navigation pinning
박권수
49de8694 1 parent f194d32d

feat. Register View

Inline Side-by-side
Showing 8 changed files with 480 additions and 25 deletions
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
17 "axios": "^0.21.1", 17 "axios": "^0.21.1",
18 "highcharts": "^9.2.0", 18 "highcharts": "^9.2.0",
19 "highcharts-react-official": "^3.0.0", 19 "highcharts-react-official": "^3.0.0",
20 + "moment": "^2.29.1",
20 "react": "^17.0.2", 21 "react": "^17.0.2",
21 "react-dom": "^17.0.2", 22 "react-dom": "^17.0.2",
22 "react-router-dom": "^5.2.0", 23 "react-router-dom": "^5.2.0",
...@@ -24,12 +25,15 @@ ...@@ -24,12 +25,15 @@
24 "recoil": "^0.4.0", 25 "recoil": "^0.4.0",
25 "recoil-persist": "^3.0.0", 26 "recoil-persist": "^3.0.0",
26 "styled-components": "^5.3.0", 27 "styled-components": "^5.3.0",
28 + "sweetalert2": "^11.1.3",
27 "typescript": "^4.1.2", 29 "typescript": "^4.1.2",
30 + "validator": "^13.6.0",
28 "web-vitals": "^1.0.1" 31 "web-vitals": "^1.0.1"
29 }, 32 },
30 "devDependencies": { 33 "devDependencies": {
31 "@types/react-router-dom": "^5.1.8", 34 "@types/react-router-dom": "^5.1.8",
32 "@types/styled-components": "^5.1.12", 35 "@types/styled-components": "^5.1.12",
36 + "@types/validator": "^13.6.3",
33 "@typescript-eslint/eslint-plugin": "^4.29.1", 37 "@typescript-eslint/eslint-plugin": "^4.29.1",
34 "@typescript-eslint/parser": "^4.29.1", 38 "@typescript-eslint/parser": "^4.29.1",
35 "eslint": "^7.32.0", 39 "eslint": "^7.32.0",
...@@ -2631,6 +2635,12 @@ ...@@ -2631,6 +2635,12 @@
2631 "source-map": "^0.6.1" 2635 "source-map": "^0.6.1"
2632 } 2636 }
2633 }, 2637 },
2638 + "node_modules/@types/validator": {
2639 + "version": "13.6.3",
2640 + "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.6.3.tgz",
2641 + "integrity": "sha512-fWG42pMJOL4jKsDDZZREnXLjc3UE0R8LOJfARWYg6U966rxDT7TYejYzLnUF5cvSObGg34nd0+H2wHHU5Omdfw==",
2642 + "dev": true
2643 + },
2634 "node_modules/@types/webpack": { 2644 "node_modules/@types/webpack": {
2635 "version": "4.41.26", 2645 "version": "4.41.26",
2636 "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz", 2646 "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz",
...@@ -11693,6 +11703,14 @@ ...@@ -11693,6 +11703,14 @@
11693 "mkdirp": "bin/cmd.js" 11703 "mkdirp": "bin/cmd.js"
11694 } 11704 }
11695 }, 11705 },
11706 + "node_modules/moment": {
11707 + "version": "2.29.1",
11708 + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
11709 + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
11710 + "engines": {
11711 + "node": "*"
11712 + }
11713 + },
11696 "node_modules/move-concurrently": { 11714 "node_modules/move-concurrently": {
11697 "version": "1.0.1", 11715 "version": "1.0.1",
11698 "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", 11716 "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
...@@ -16885,6 +16903,14 @@ ...@@ -16885,6 +16903,14 @@
16885 "url": "https://github.com/sponsors/ljharb" 16903 "url": "https://github.com/sponsors/ljharb"
16886 } 16904 }
16887 }, 16905 },
16906 + "node_modules/sweetalert2": {
16907 + "version": "11.1.4",
16908 + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.1.4.tgz",
16909 + "integrity": "sha512-CTNLviF6w1wyh1ou2UY8RpZasV2RiXbO6489v+a1Swz4jrUyuFDDjMZ9tMMVFnxTMdiUGfYiJoFUniZbHSEnHw==",
16910 + "funding": {
16911 + "url": "https://sweetalert2.github.io/#donations"
16912 + }
16913 + },
16888 "node_modules/symbol-tree": { 16914 "node_modules/symbol-tree": {
16889 "version": "3.2.4", 16915 "version": "3.2.4",
16890 "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", 16916 "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
...@@ -17811,6 +17837,14 @@ ...@@ -17811,6 +17837,14 @@
17811 "spdx-expression-parse": "^3.0.0" 17837 "spdx-expression-parse": "^3.0.0"
17812 } 17838 }
17813 }, 17839 },
17840 + "node_modules/validator": {
17841 + "version": "13.6.0",
17842 + "resolved": "https://registry.npmjs.org/validator/-/validator-13.6.0.tgz",
17843 + "integrity": "sha512-gVgKbdbHgtxpRyR8K0O6oFZPhhB5tT1jeEHZR0Znr9Svg03U0+r9DXWMrnRAB+HtCStDQKlaIZm42tVsVjqtjg==",
17844 + "engines": {
17845 + "node": ">= 0.10"
17846 + }
17847 + },
17814 "node_modules/value-equal": { 17848 "node_modules/value-equal": {
17815 "version": "1.0.1", 17849 "version": "1.0.1",
17816 "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", 17850 "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
...@@ -21123,6 +21157,12 @@ ...@@ -21123,6 +21157,12 @@
21123 "source-map": "^0.6.1" 21157 "source-map": "^0.6.1"
21124 } 21158 }
21125 }, 21159 },
21160 + "@types/validator": {
21161 + "version": "13.6.3",
21162 + "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.6.3.tgz",
21163 + "integrity": "sha512-fWG42pMJOL4jKsDDZZREnXLjc3UE0R8LOJfARWYg6U966rxDT7TYejYzLnUF5cvSObGg34nd0+H2wHHU5Omdfw==",
21164 + "dev": true
21165 + },
21126 "@types/webpack": { 21166 "@types/webpack": {
21127 "version": "4.41.26", 21167 "version": "4.41.26",
21128 "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz", 21168 "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz",
...@@ -28254,6 +28294,11 @@ ...@@ -28254,6 +28294,11 @@
28254 "minimist": "^1.2.5" 28294 "minimist": "^1.2.5"
28255 } 28295 }
28256 }, 28296 },
28297 + "moment": {
28298 + "version": "2.29.1",
28299 + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
28300 + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
28301 + },
28257 "move-concurrently": { 28302 "move-concurrently": {
28258 "version": "1.0.1", 28303 "version": "1.0.1",
28259 "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", 28304 "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
...@@ -32338,6 +32383,11 @@ ...@@ -32338,6 +32383,11 @@
32338 } 32383 }
32339 } 32384 }
32340 }, 32385 },
32386 + "sweetalert2": {
32387 + "version": "11.1.4",
32388 + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.1.4.tgz",
32389 + "integrity": "sha512-CTNLviF6w1wyh1ou2UY8RpZasV2RiXbO6489v+a1Swz4jrUyuFDDjMZ9tMMVFnxTMdiUGfYiJoFUniZbHSEnHw=="
32390 + },
32341 "symbol-tree": { 32391 "symbol-tree": {
32342 "version": "3.2.4", 32392 "version": "3.2.4",
32343 "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", 32393 "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
...@@ -33054,6 +33104,11 @@ ...@@ -33054,6 +33104,11 @@
33054 "spdx-expression-parse": "^3.0.0" 33104 "spdx-expression-parse": "^3.0.0"
33055 } 33105 }
33056 }, 33106 },
33107 + "validator": {
33108 + "version": "13.6.0",
33109 + "resolved": "https://registry.npmjs.org/validator/-/validator-13.6.0.tgz",
33110 + "integrity": "sha512-gVgKbdbHgtxpRyR8K0O6oFZPhhB5tT1jeEHZR0Znr9Svg03U0+r9DXWMrnRAB+HtCStDQKlaIZm42tVsVjqtjg=="
33111 + },
33057 "value-equal": { 33112 "value-equal": {
33058 "version": "1.0.1", 33113 "version": "1.0.1",
33059 "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", 33114 "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
23 "styled-components": "^5.3.0", 23 "styled-components": "^5.3.0",
24 "sweetalert2": "^11.1.3", 24 "sweetalert2": "^11.1.3",
25 "typescript": "^4.1.2", 25 "typescript": "^4.1.2",
26 + "validator": "^13.6.0",
26 "web-vitals": "^1.0.1" 27 "web-vitals": "^1.0.1"
27 }, 28 },
28 "scripts": { 29 "scripts": {
...@@ -52,6 +53,7 @@ ...@@ -52,6 +53,7 @@
52 "devDependencies": { 53 "devDependencies": {
53 "@types/react-router-dom": "^5.1.8", 54 "@types/react-router-dom": "^5.1.8",
54 "@types/styled-components": "^5.1.12", 55 "@types/styled-components": "^5.1.12",
56 + "@types/validator": "^13.6.3",
55 "@typescript-eslint/eslint-plugin": "^4.29.1", 57 "@typescript-eslint/eslint-plugin": "^4.29.1",
56 "@typescript-eslint/parser": "^4.29.1", 58 "@typescript-eslint/parser": "^4.29.1",
57 "eslint": "^7.32.0", 59 "eslint": "^7.32.0",
......
...@@ -63,7 +63,7 @@ const Header = (props : HeaderProps) => { ...@@ -63,7 +63,7 @@ const Header = (props : HeaderProps) => {
63 <styled.Container> 63 <styled.Container>
64 <styled.HeaderLeftWrapper> 64 <styled.HeaderLeftWrapper>
65 { 65 {
66 - (token && token.length && props.location.pathname !== '/') || props.location.pathname === '/register' ? 66 + (token && token.length && props.location.pathname !== '/') ?
67 <styled.Backbutton 67 <styled.Backbutton
68 onClick = {onGoBack} 68 onClick = {onGoBack}
69 > 69 >
......
...@@ -146,7 +146,7 @@ export const MedicineInfoWrapper = styled.div ` ...@@ -146,7 +146,7 @@ export const MedicineInfoWrapper = styled.div `
146 width : 100%; 146 width : 100%;
147 147
148 overflow : scroll; 148 overflow : scroll;
149 - border : 1px solid; 149 + border : none;
150 150
151 display : flex; 151 display : flex;
152 flex-direction : column; 152 flex-direction : column;
......
1 import React, { useState, useEffect } from "react"; 1 import React, { useState, useEffect } from "react";
2 import { RouteComponentProps } from 'react-router-dom'; 2 import { RouteComponentProps } from 'react-router-dom';
3 3
4 -import { useRecoilValue, useRecoilState } from "recoil"; 4 +import { useRecoilValue } from "recoil";
5 import * as recoilUtil from '../../util/recoilUtil'; 5 import * as recoilUtil from '../../util/recoilUtil';
6 6
7 +import validator from 'validator';
8 +import * as Alert from '../../util/alertMessage';
9 +
7 import Header from '../../components/Header'; 10 import Header from '../../components/Header';
8 import RegisterPresenter from "./RegisterPresenter"; 11 import RegisterPresenter from "./RegisterPresenter";
9 12
10 import { authApi } from '../../api'; 13 import { authApi } from '../../api';
14 +import { resourceLimits } from "worker_threads";
11 15
12 16
13 // eslint-disable-next-line @typescript-eslint/no-empty-interface 17 // eslint-disable-next-line @typescript-eslint/no-empty-interface
...@@ -15,7 +19,26 @@ interface RegisterProps extends RouteComponentProps {} ...@@ -15,7 +19,26 @@ interface RegisterProps extends RouteComponentProps {}
15 19
16 const RegisterContainer = (props : RegisterProps) => { 20 const RegisterContainer = (props : RegisterProps) => {
17 21
18 - const [token, setToken] = useRecoilState(recoilUtil.token); 22 + const token = useRecoilValue(recoilUtil.token);
23 +
24 + const [registerForm, setRegisterForm] = useState<any>({
25 + userId : '',
26 + password : '',
27 + passwordCheck : '',
28 + info : {
29 + doctorLicense : '',
30 + hospitalNm : '',
31 + hospitalAddr : '',
32 + contact : '',
33 + doctorType : '',
34 + doctorNm : '',
35 + },
36 + });
37 +
38 + const [page, setPage] = useState<number>(1);
39 + const [error, setError] = useState<string | null>(null);
40 +
41 +
19 42
20 const fetchData = async() => { 43 const fetchData = async() => {
21 if(token && token.length) { 44 if(token && token.length) {
...@@ -26,8 +49,167 @@ const RegisterContainer = (props : RegisterProps) => { ...@@ -26,8 +49,167 @@ const RegisterContainer = (props : RegisterProps) => {
26 } 49 }
27 }; 50 };
28 51
52 + const onCancleRegister = () => {
53 + Alert.onCheck('회원가입을 취소하시겠습니까?',
54 + () => props.history.push('/login'),
55 + () => null);
56 + };
57 +
58 + const onGoBackPage = () => {
59 + if(page > 1) {
60 + setPage(page - 1);
61 + }
62 + };
63 +
64 +
65 + const validateRegisterForm = () => {
66 + if(page === 1) {
67 + if (!validator.isEmail(registerForm.userId)) {
68 + setError('회원 가입 ID는 이메일이어야 합니다.');
69 + } else if(registerForm.password === registerForm.password.toLowerCase()
70 + || !/\d/.test(registerForm.password)
71 + ) {
72 + setError('비밀번호는 최소 8자 이상이어야 하고, 대문자 및 숫자를 1개 이상 포함하고 있어야 합니다.');
73 + } else if(registerForm.password !== registerForm.passwordCheck) {
74 + setError('비밀번호가 일치하지 않습니다.')
75 + } else setError(null);
76 + } else if(page === 2) {
77 + if(!registerForm.info.doctorLicense.length &&
78 + !validator.isAlphanumeric(registerForm.info.doctorLicense)) {
79 + setError('의사 자격 번호를 입력해야 합니다.');
80 + } else if(registerForm.info.doctorNm.length < 2) {
81 + setError('의사 이름을 올바르게 입력해야 합니다.');
82 + } else if(!registerForm.info.contact) {
83 + setError('연락처를 입력해주세요.');
84 + } else setError(null);
85 + } else if(page === 3) {
86 + if(!registerForm.info.doctorType.length) {
87 + setError('전문 분야를 입력해주세요.');
88 + } else if(!registerForm.info.hospitalNm || !registerForm.info.hospitalAddr) {
89 + setError('올바른 병원 정보를 입력해주세요');
90 + } else setError(null);
91 + }
92 +
93 +
94 + };
95 +
96 +
97 + const onSetUserId = (e : React.ChangeEvent<HTMLInputElement>) => {
98 + setRegisterForm({
99 + ...registerForm,
100 + userId : e.target.value,
101 + });
102 + };
103 +
104 + const onSetPassword = (e : React.ChangeEvent<HTMLInputElement>) => {
105 + setRegisterForm({
106 + ...registerForm,
107 + password : e.target.value,
108 + });
109 + };
110 +
111 + const onSetPasswordCheck = (e : React.ChangeEvent<HTMLInputElement>) => {
112 + setRegisterForm({
113 + ...registerForm,
114 + passwordCheck : e.target.value,
115 + });
116 + };
117 +
118 + const onSetDoctorLicense = (e : React.ChangeEvent<HTMLInputElement>) => {
119 + setRegisterForm({
120 + ...registerForm,
121 + info : {
122 + ...registerForm.info,
123 + doctorLicense : e.target.value,
124 + },
125 + });
126 + };
127 +
128 + const onSetHospitalNm = (e : React.ChangeEvent<HTMLInputElement>) => {
129 + setRegisterForm({
130 + ...registerForm,
131 + info : {
132 + ...registerForm.info,
133 + hospitalNm : e.target.value,
134 + },
135 + });
136 + };
137 +
138 + const onSetHospitalAddr = (e : React.ChangeEvent<HTMLInputElement>) => {
139 + setRegisterForm({
140 + ...registerForm,
141 + info : {
142 + ...registerForm.info,
143 + hospitalAddr : e.target.value,
144 + },
145 + });
146 + };
147 +
148 + const onSetContact = (e : React.ChangeEvent<HTMLInputElement>) => {
149 + setRegisterForm({
150 + ...registerForm,
151 + info : {
152 + ...registerForm.info,
153 + contact : e.target.value,
154 + },
155 + });
156 + };
157 +
158 + const onSetDoctorType = (e : React.ChangeEvent<HTMLInputElement>) => {
159 + setRegisterForm({
160 + ...registerForm,
161 + info : {
162 + ...registerForm.info,
163 + doctorType : e.target.value,
164 + },
165 + });
166 + };
167 +
168 + const onSetDoctorNm = (e : React.ChangeEvent<HTMLInputElement>) => {
169 + setRegisterForm({
170 + ...registerForm,
171 + info : {
172 + ...registerForm.info,
173 + doctorNm : e.target.value,
174 + },
175 + });
176 + };
177 +
178 + const onSubmitButton = () => {
179 + if(error) {
180 + Alert.onError(error, () => null);
181 + return;
182 + }
183 +
184 + if(page === 1) {
185 + setPage(2);
186 + } else if(page === 2) {
187 + setPage(3);
188 + } else if(page === 3) {
189 + const onRegisterDoctor = async () => {
190 + try {
191 + const result = await authApi.registerDoctor(registerForm);
192 + if(result.data === 'Created') {
193 + Alert.onSuccess('회원가입 성공, 관리자의 승인을 대기하세요.', () => props.history.push('/login'));
194 + }
195 + } catch(e) {
196 + Alert.onError(e.response.data, () => null);
197 + }
198 + };
199 +
200 + Alert.onCheck('입력하신 정보로 회원가입을 진행하시겠습니까?', onRegisterDoctor, () => null);
201 + }
202 +
203 + };
204 +
205 + useEffect(() => {
206 + validateRegisterForm();
207 + }, [registerForm, page]);
208 +
209 +
29 useEffect(() => { 210 useEffect(() => {
30 fetchData(); 211 fetchData();
212 + validateRegisterForm();
31 }, []); 213 }, []);
32 214
33 215
...@@ -35,7 +217,23 @@ const RegisterContainer = (props : RegisterProps) => { ...@@ -35,7 +217,23 @@ const RegisterContainer = (props : RegisterProps) => {
35 <> 217 <>
36 <Header {...props}/> 218 <Header {...props}/>
37 <RegisterPresenter 219 <RegisterPresenter
220 + registerForm = {registerForm}
221 + page = {page}
222 + error = {error}
223 +
224 + onGoBackPage = {onGoBackPage}
225 + onCancleRegister = {onCancleRegister}
38 226
227 + onSetUserId = {onSetUserId}
228 + onSetPassword = {onSetPassword}
229 + onSetPasswordCheck = {onSetPasswordCheck}
230 + onSetDoctorLicense = {onSetDoctorLicense}
231 + onSetHospitalNm = {onSetHospitalNm}
232 + onSetHospitalAddr = {onSetHospitalAddr}
233 + onSetContact = {onSetContact}
234 + onSetDoctorType = {onSetDoctorType}
235 + onSetDoctorNm = {onSetDoctorNm}
236 + onSubmitButton = {onSubmitButton}
39 /> 237 />
40 </> 238 </>
41 ) 239 )
......
...@@ -3,32 +3,156 @@ import React from 'react'; ...@@ -3,32 +3,156 @@ import React from 'react';
3 import * as styled from './RegisterStyled'; 3 import * as styled from './RegisterStyled';
4 4
5 5
6 -const RegisterPresenter = () => { 6 +interface RegisterProps {
7 + registerForm : {
8 + userId : string;
9 + password : string;
10 + passwordCheck : string;
11 + info : {
12 + doctorLicense : string;
13 + hospitalNm : string;
14 + hospitalAddr : string;
15 + contact : string;
16 + doctorType : string;
17 + doctorNm : string;
18 + },
19 + };
20 + page : number;
21 + error : string | null;
22 +
23 + onGoBackPage : () => void;
24 + onCancleRegister : () => void;
25 +
26 + onSetUserId : React.ChangeEventHandler<HTMLInputElement>;
27 + onSetPassword : React.ChangeEventHandler<HTMLInputElement>;
28 + onSetPasswordCheck : React.ChangeEventHandler<HTMLInputElement>;
29 + onSetDoctorLicense : React.ChangeEventHandler<HTMLInputElement>;
30 + onSetHospitalNm : React.ChangeEventHandler<HTMLInputElement>;
31 + onSetHospitalAddr : React.ChangeEventHandler<HTMLInputElement>;
32 + onSetContact : React.ChangeEventHandler<HTMLInputElement>;
33 + onSetDoctorType : React.ChangeEventHandler<HTMLInputElement>;
34 + onSetDoctorNm : React.ChangeEventHandler<HTMLInputElement>;
35 + onSubmitButton : () => void;
36 +
37 +}
38 +
39 +const RegisterPresenter = (props : RegisterProps) => {
7 return ( 40 return (
8 <styled.Container> 41 <styled.Container>
9 <styled.RegisterWrapper> 42 <styled.RegisterWrapper>
43 + <styled.RegisterBackButtonWrapper>
44 + <styled.RegisterBackButton
45 + onClick = {props.onCancleRegister}
46 + >
47 + 회원가입 취소
48 + </styled.RegisterBackButton>
49 + {
50 + props.page > 1 ?
51 + <styled.RegisterBackButton
52 + onClick = {props.onGoBackPage}
53 + >
54 + 이전
55 + </styled.RegisterBackButton> : null
56 + }
57 + </styled.RegisterBackButtonWrapper>
10 <styled.RegisterTitle>회원 가입</styled.RegisterTitle> 58 <styled.RegisterTitle>회원 가입</styled.RegisterTitle>
11 <styled.RegisterInfo>* 의사만 회원가입이 가능합니다.</styled.RegisterInfo> 59 <styled.RegisterInfo>* 의사만 회원가입이 가능합니다.</styled.RegisterInfo>
12 <styled.RegisterInfo style = {{fontSize : 10,}}>의사 인증을 위한 정보가 요구됩니다. 해당 정보는 인증을 위한 용도로만 사용됩니다.</styled.RegisterInfo> 60 <styled.RegisterInfo style = {{fontSize : 10,}}>의사 인증을 위한 정보가 요구됩니다. 해당 정보는 인증을 위한 용도로만 사용됩니다.</styled.RegisterInfo>
13 - <styled.RegisterInputWrapper> 61 + {
14 - <styled.RegisterInputText>이메일</styled.RegisterInputText> 62 + props.page === 1 ?
15 - <styled.RegisterInput 63 + <>
16 - placeholder = 'Email' 64 + <styled.RegisterInputWrapper>
17 - /> 65 + <styled.RegisterInputText>이메일</styled.RegisterInputText>
18 - </styled.RegisterInputWrapper> 66 + <styled.RegisterInput
19 - <styled.RegisterInputWrapper> 67 + placeholder = 'Email'
20 - <styled.RegisterInputText>비밀번호</styled.RegisterInputText> 68 + value = {props.registerForm.userId}
21 - <styled.RegisterInput 69 + onChange = {props.onSetUserId}
22 - placeholder = 'Password' 70 + />
23 - /> 71 + </styled.RegisterInputWrapper>
24 - </styled.RegisterInputWrapper> 72 + <styled.RegisterInputWrapper>
25 - <styled.RegisterInputWrapper> 73 + <styled.RegisterInputText>비밀번호</styled.RegisterInputText>
26 - <styled.RegisterInputText>비밀번호 확인</styled.RegisterInputText> 74 + <styled.RegisterInput
27 - <styled.RegisterInput 75 + placeholder = 'Password'
28 - placeholder = 'Password Again' 76 + value = {props.registerForm.password}
29 - /> 77 + onChange = {props.onSetPassword}
30 - </styled.RegisterInputWrapper> 78 + type = 'password'
31 - </styled.RegisterWrapper> 79 + />
80 + </styled.RegisterInputWrapper>
81 + <styled.RegisterInputWrapper>
82 + <styled.RegisterInputText>비밀번호 확인</styled.RegisterInputText>
83 + <styled.RegisterInput
84 + placeholder = 'Password Again'
85 + value = {props.registerForm.passwordCheck}
86 + onChange = {props.onSetPasswordCheck}
87 + type = 'password'
88 + />
89 + </styled.RegisterInputWrapper>
90 + </> :
91 + props.page === 2 ?
92 + <>
93 + <styled.RegisterInputWrapper>
94 + <styled.RegisterInputText>의사 자격증 번호</styled.RegisterInputText>
95 + <styled.RegisterInput
96 + placeholder = "Doctor's License"
97 + value = {props.registerForm.info.doctorLicense}
98 + onChange = {props.onSetDoctorLicense}
99 + />
100 + </styled.RegisterInputWrapper>
101 + <styled.RegisterInputWrapper>
102 + <styled.RegisterInputText>이름</styled.RegisterInputText>
103 + <styled.RegisterInput
104 + placeholder = 'Name'
105 + value = {props.registerForm.info.doctorNm}
106 + onChange = {props.onSetDoctorNm}
107 + />
108 + </styled.RegisterInputWrapper>
109 + <styled.RegisterInputWrapper>
110 + <styled.RegisterInputText>연락처</styled.RegisterInputText>
111 + <styled.RegisterInput
112 + placeholder = 'Contact'
113 + value = {props.registerForm.info.contact}
114 + onChange = {props.onSetContact}
115 + />
116 + </styled.RegisterInputWrapper>
117 + </> :
118 + props.page === 3 ?
119 + <>
120 + <styled.RegisterInputWrapper>
121 + <styled.RegisterInputText>전문 분야</styled.RegisterInputText>
122 + <styled.RegisterInput
123 + placeholder = "Doctor's Type"
124 + value = {props.registerForm.info.doctorType}
125 + onChange = {props.onSetDoctorType}
126 + />
127 + </styled.RegisterInputWrapper>
128 + <styled.RegisterInputWrapper>
129 + <styled.RegisterInputText>병원 이름</styled.RegisterInputText>
130 + <styled.RegisterInput
131 + placeholder = 'Hospital'
132 + value = {props.registerForm.info.hospitalNm}
133 + onChange = {props.onSetHospitalNm}
134 + />
135 + </styled.RegisterInputWrapper>
136 + <styled.RegisterInputWrapper>
137 + <styled.RegisterInputText>병원 주소</styled.RegisterInputText>
138 + <styled.RegisterInput
139 + placeholder = 'Address'
140 + value = {props.registerForm.info.hospitalAddr}
141 + onChange = {props.onSetHospitalAddr}
142 + />
143 + </styled.RegisterInputWrapper>
144 + </> : null
145 + }
146 + <styled.RegisterButtonWrapper>
147 + <styled.RegisterButton
148 + onClick = {props.onSubmitButton}
149 + >
150 + {
151 + props.page < 3 ? '다음' : '회원 가입'
152 + }
153 + </styled.RegisterButton>
154 + </styled.RegisterButtonWrapper>
155 + </styled.RegisterWrapper>
32 </styled.Container> 156 </styled.Container>
33 ) 157 )
34 }; 158 };
......
1 import styled from 'styled-components'; 1 import styled from 'styled-components';
2 2
3 +
3 export const Container = styled.div ` 4 export const Container = styled.div `
4 width : 100%; 5 width : 100%;
5 height : 80vh; 6 height : 80vh;
...@@ -24,6 +25,44 @@ export const RegisterWrapper = styled.div ` ...@@ -24,6 +25,44 @@ export const RegisterWrapper = styled.div `
24 25
25 box-shadow: 0px 0px 10px #a0a0a0; 26 box-shadow: 0px 0px 10px #a0a0a0;
26 27
28 +
29 +`;
30 +
31 +export const RegisterBackButtonWrapper = styled.div `
32 + width : 100%;
33 + border : none;
34 +
35 + display : flex;
36 + flex-direction : row-reverse;
37 + align-items : center;
38 + justify-content : space-between;
39 +
40 + margin : 0 0 10px 0;
41 +
42 +`;
43 +
44 +export const RegisterBackButton = styled.div `
45 + border : none;
46 + border-bottom : 1px solid;
47 + background-color : transparent;
48 +
49 + color : #a0a0a0;
50 +
51 + cursor : pointer;
52 +
53 + font-size : 12px;
54 + font-weight : 500;
55 + letter-spacing : 1px;
56 +
57 + padding : 1px 3px;
58 + margin : 0px 20px;
59 +
60 + transition : .25s all;
61 +
62 + &:hover {
63 + opacity : .7;
64 + }
65 +
27 `; 66 `;
28 67
29 export const RegisterTitle = styled.div ` 68 export const RegisterTitle = styled.div `
...@@ -60,11 +99,48 @@ export const RegisterInputText = styled.div ` ...@@ -60,11 +99,48 @@ export const RegisterInputText = styled.div `
60 99
61 export const RegisterInput = styled.input ` 100 export const RegisterInput = styled.input `
62 width : 80%; 101 width : 80%;
63 - padding : 0 0 5px 0; 102 + padding : 5px 10px;
64 border : none; 103 border : none;
65 border-bottom : 1px solid #ddd; 104 border-bottom : 1px solid #ddd;
66 105
106 + font-size : 14px;
107 + letter-spacing : 1px;
108 +
67 &::placeholder { 109 &::placeholder {
68 color : #ddd; 110 color : #ddd;
69 } 111 }
112 +`;
113 +
114 +export const RegisterButtonWrapper = styled.div `
115 + margin : 20px 0 0 0;
116 +
117 + width : 100%;
118 +
119 + border : none;
120 +
121 + display : flex;
122 + justify-content : center;
123 + align-items : center;
124 +`;
125 +
126 +export const RegisterButton = styled.button `
127 + padding : 10px 30px;
128 + width : 80%;
129 +
130 + cursor : pointer;
131 +
132 + background-color : transparent;
133 + border : 1.2px solid;
134 + border-radius : 3px;
135 +
136 + color : #343434;
137 +
138 + transition : .25s all;
139 +
140 + &:hover {
141 + color : #fff;
142 + border : 1.2px solid #343434;
143 + background-color : #343434;
144 + }
145 +
70 `; 146 `;
...\ No newline at end of file ...\ No newline at end of file
......
This diff could not be displayed because it is too large.