2021-1-capstone-design1 / RIT_Project1

Go to a project
Toggle navigation Toggle navigation pinning
박권수
e4840e5a 1 parent 481cc06e

feat. web view img add and register button, medicine bottle img and etc..

Inline Side-by-side
Showing 8 changed files with 79 additions and 8 deletions
...@@ -3,17 +3,31 @@ import styled from 'styled-components'; ...@@ -3,17 +3,31 @@ import styled from 'styled-components';
3 export const Container = styled.div ` 3 export const Container = styled.div `
4 width : 100%; 4 width : 100%;
5 position : relative; 5 position : relative;
6 - display : inline-block;
7 padding : 20px 0; 6 padding : 20px 0;
8 box-shadow: 0px 0px 10px #a0a0a0; 7 box-shadow: 0px 0px 10px #a0a0a0;
9 margin : 0 0 15px 0; 8 margin : 0 0 15px 0;
10 z-index : 50; 9 z-index : 50;
10 +
11 + display : flex;
12 + flex-direction : row;
13 + justify-content : center;
14 + align-items : center;
11 `; 15 `;
12 16
13 export const HeaderWrapper = styled.div ` 17 export const HeaderWrapper = styled.div `
14 display : flex; 18 display : flex;
19 + flex-direction : row;
15 justify-content : center; 20 justify-content : center;
16 align-items : center; 21 align-items : center;
22 +
23 + border : none;
24 +`;
25 +
26 +export const TitleImg = styled.img `
27 + height : 30px;
28 + width : 30px;
29 +
30 + margin : 0 10px 0 0px;
17 `; 31 `;
18 32
19 export const Title = styled.div ` 33 export const Title = styled.div `
......
...@@ -2,11 +2,14 @@ import React from 'react'; ...@@ -2,11 +2,14 @@ import React from 'react';
2 2
3 import * as styled from './HeaderStyled'; 3 import * as styled from './HeaderStyled';
4 4
5 +const headerImg = '/static/img/pharmacy.png';
6 +
5 7
6 const Header = () => { 8 const Header = () => {
7 return ( 9 return (
8 <styled.Container> 10 <styled.Container>
9 <styled.HeaderWrapper> 11 <styled.HeaderWrapper>
12 + <styled.TitleImg src = {headerImg} />
10 <styled.Title>내 손 안의 주치의</styled.Title> 13 <styled.Title>내 손 안의 주치의</styled.Title>
11 </styled.HeaderWrapper> 14 </styled.HeaderWrapper>
12 </styled.Container> 15 </styled.Container>
......
...@@ -40,9 +40,17 @@ const LoginPresenter = (props : LoginProps) => { ...@@ -40,9 +40,17 @@ const LoginPresenter = (props : LoginProps) => {
40 /> 40 />
41 </styled.LoginEachInputWrapper> 41 </styled.LoginEachInputWrapper>
42 </styled.LoginInputWrapper> 42 </styled.LoginInputWrapper>
43 + <styled.RegisterButtonWrapper>
44 + <styled.RegisterButton
45 + onClick = {() => console.log('회원가입 버튼')}
46 + >
47 + 회원가입
48 + </styled.RegisterButton>
49 + </styled.RegisterButtonWrapper>
43 <styled.LoginButtonWrapper> 50 <styled.LoginButtonWrapper>
44 <styled.LoginButton 51 <styled.LoginButton
45 onClick = {props.onLogin} 52 onClick = {props.onLogin}
53 + isLoginButton = {true}
46 > 54 >
47 로그인 55 로그인
48 </styled.LoginButton> 56 </styled.LoginButton>
......
...@@ -48,18 +48,47 @@ export const LoginInput = styled.input ` ...@@ -48,18 +48,47 @@ export const LoginInput = styled.input `
48 align-self : center; 48 align-self : center;
49 `; 49 `;
50 50
51 +export const RegisterButtonWrapper = styled.div `
52 + margin : 10px 0 0 0;
53 + display : flex;
54 +
55 + width : 80%;
56 +
57 + justify-content : flex-end;
58 + align-items : center;
59 +`;
60 +
61 +export const RegisterButton = styled.button `
62 + border : none;
63 + border-bottom : 1px solid;
64 + background-color : transparent;
65 + color : #337DFF;
66 +
67 + cursor : pointer;
68 +
69 + font-size : 11px;
70 +
71 + transition : .25s all;
72 +
73 + &:hover {
74 + opacity : .5;
75 + }
76 +
77 +`;
78 +
51 export const LoginButtonWrapper = styled.div ` 79 export const LoginButtonWrapper = styled.div `
52 - width: 30%; 80 + margin : 25px 0 0 0;
81 + width: 100%;
53 display : flex; 82 display : flex;
54 flex-direction : row; 83 flex-direction : row;
55 justify-content : center; 84 justify-content : center;
56 align-items : center; 85 align-items : center;
86 +
57 `; 87 `;
58 88
59 -export const LoginButton = styled.button ` 89 +export const LoginButton = styled.button<{isLoginButton : boolean}> `
60 - margin : 30px 0 5px 0;
61 background-color : #fff; 90 background-color : #fff;
62 - border : 1px solid #a0a0a0; 91 + border : 1.2px solid;
63 border-radius : 5px; 92 border-radius : 5px;
64 padding : 10px 30px; 93 padding : 10px 30px;
65 94
...@@ -68,9 +97,13 @@ export const LoginButton = styled.button ` ...@@ -68,9 +97,13 @@ export const LoginButton = styled.button `
68 transition : .25s all; 97 transition : .25s all;
69 98
70 color : #343434; 99 color : #343434;
100 + font-weight : 600;
71 101
72 &:hover { 102 &:hover {
73 background-color : #343434; 103 background-color : #343434;
74 color : #fff; 104 color : #fff;
105 + border : 1.2px solid transparent;
75 } 106 }
107 +
108 + margin : 0 15px;
76 `; 109 `;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,6 +2,8 @@ import React from 'react'; ...@@ -2,6 +2,8 @@ import React from 'react';
2 2
3 import * as styled from './DoctorMenuStyled'; 3 import * as styled from './DoctorMenuStyled';
4 4
5 +const medicineImg = '/static/img/medicine.png';
6 +
5 7
6 interface DoctorMenuProps { 8 interface DoctorMenuProps {
7 info : { 9 info : {
...@@ -177,9 +179,9 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => { ...@@ -177,9 +179,9 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
177 <styled.EachBottleWrapper 179 <styled.EachBottleWrapper
178 key = {bottle._id} 180 key = {bottle._id}
179 > 181 >
180 - { 182 + <styled.EachBottleImg src = {medicineImg}/>
181 - bottle.bottleId 183 + <styled.EachBottleInfo>{bottle.medicine.name.slice(0, 14)}</styled.EachBottleInfo>
182 - } 184 + <styled.EachBottleInfo>{`등록일 : ${bottle.regDtm.slice(0, 10)}`}</styled.EachBottleInfo>
183 </styled.EachBottleWrapper> 185 </styled.EachBottleWrapper>
184 ) 186 )
185 }) : 187 }) :
......
...@@ -492,6 +492,17 @@ export const EachBottleWrapper = styled.div ` ...@@ -492,6 +492,17 @@ export const EachBottleWrapper = styled.div `
492 } 492 }
493 `; 493 `;
494 494
495 +export const EachBottleImg = styled.img `
496 + height : 50px;
497 + width : 50px;
498 + margin : 0 0 10px 0;
499 +`;
500 +
501 +export const EachBottleInfo = styled.div `
502 + font-size : 11px;
503 + letter-spacing : 1px;
504 +`;
505 +
495 export const NothingWrapper = styled.div ` 506 export const NothingWrapper = styled.div `
496 height : 100%; 507 height : 100%;
497 width : 100%; 508 width : 100%;
......