Commit @11f8e5dc699a67bd87f848ac77be89a7a4e37d71

최정임 2023-02-21

230221 최정임 css 디자인 수정

@11f8e5dc699a67bd87f848ac77be89a7a4e37d71

0c1773d

11f8e5d

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css

...	...	@@ -1,3 +1,4 @@
	1	+
1	2	/* layout 공통 */
2	3	/* grid */
3	4

0c1773d

11f8e5d

client/resources/css/layout.css

--- client/resources/css/layout.css

+++ client/resources/css/layout.css


   grid-template-areas:
     "nav header"
     "nav  main";
-  grid-template-columns: 250px 1fr;
+  grid-template-columns: 315px 1fr;
   grid-template-rows: 0.1fr 2.9fr;
 }
 #layout.expander{
   grid-template-columns: 50px 1fr;
 }
 header {
-  padding: 1rem;
+  padding: 1rem 3rem;
   background-color: white;
   grid-area: header;
+  height: 87px;
 }
 
 .page-title span {

 
 nav{
   height: 100%;
-  background-color: #242d2e;
+  background-color: #f2f0eb;
   grid-area: nav;
 }
-
+.nav{
+  position: relative;
+  box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 20%);}
+.nav > div > ul{margin-top: 7rem;}
 .logo {
   padding: 2rem 1rem;
   font-size: large;
   text-align: center;
-  color: #ffffff;
+  background: #ffffff;
   font-weight: bold;
 }
+.logo img{width: 273px;}
 /* 네비게이션 */
 
-.sidebar-item {
-  margin: 1rem 0;
-}
 
 .sidebar-item>a {
   font-size: 1.6rem;
   color: #ffffff;
   margin: 0 3rem;
-
+  
 }
 
 /* mui icon */
 .MuiSvgIcon-root {
   display: block;
 }
-
 .sidebar-title {
-  margin: 0 3rem;
+  margin: 0 auto;
+  width: 150px;
 }
 
 .sidebar-title span {
-  font-size: 1.6rem;
-  color: #e6e5e5;
+  font-size: 2rem;
+  font-weight: bold;
+  color: #333333;
+  
 }
 
 .sidebar-title .toggle {
   transition: transform .3s;
 }
-
 .sidebar-item.open .toggle {
   transform: rotate(180deg);
-
+  
 }
 nav li{cursor: pointer;}
-nav .sidebar-item{padding: 1rem 0 0 0;}
+nav .sidebar-item{padding: 1.4rem 0 ;}
+.sidebar-item:hover{background: #f25430;}
+.sidebar-item:hover span, .sidebar-item:hover .toggle{color: #ffffff;}
 .sidebar-content{background: #7D9D9C;}
-.sidebar-content .sidebar-item{padding: 1rem 0;}
 .sidebar-content .sidebar-item:hover{
   background: #d1e4e3;
 }

 .sidebar-content .sidebar-item:hover a {
   font-weight: bold;
 }
-
-.info-wrap{
-  border-top: 1px solid #4b4b4b;
-}
-
-.bottom-section {
-  padding: 3rem 2rem;
-}
-
-.info-id {
+.info-wrap .usericon{width: 5rem; height: 5rem; border: 1px solid #f25430; border-radius: 50px; margin-right: 2rem;}
+.header-info-id{font-size: 1.6rem; margin-right: 2rem; color: #733c1d; font-weight: 600;}
+.header-info-id::after{content: "님"; font-size: 1.6rem;}
+.info-id, .logout {
+  width: 123px;
+  height: 40px;
+  background: #f25430;
+  border-radius: 30px;
   font-size: 1.5rem;
   color: #ffffff;
+  display: flex;
+  align-items: center;
+  margin-right: 2rem;
 }
-.logout{
-  text-decoration: underline;
-  font-size: 1.5rem;
-  color: #ffffff;
-}
-
+.logout{background: #f26e50;}
 #pages {
   max-width: 100%;
   height: 100%;
-  padding: 2rem;
-  background-color: #e6e5e5;
+  padding: 3rem;
+  background-color: #f2f0eb;
   grid-area: main;
 }
 

 .content-wrap {
   max-width: 100%;
   height: 100%;
-  padding: 2em;
+  padding: 4rem 5rem;
   background-color: #ffffff;
 }
 
 /* hierarchy menu */
 .hierarchy-menu {
-  background-color: #f8f8f8;
-  color: #333333;
+  box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 20%);
+  color: #733c1d;
   overflow-y: auto;
+  max-height: 57rem;
+  width: 46rem;
+  border-radius: 30px;
 }
 .hierarchy-menu a { 
   color: #333333;

0c1773d

11f8e5d

client/resources/css/main.css

--- client/resources/css/main.css

+++ client/resources/css/main.css


 /* 공통 */
 .logo {
   font-size: 2.4rem;
-  font-family: "KoPubDotumBold_0";
+  font-family: 'AuctionGothic_Medium';
 }
-
+header > div{height: 100%;}
 header .page-title span {
-  font-family: "KoPubDotumBold_0";
-  font-size: 2.2rem;
+  font-size: 1.7rem;
+  margin: 0 auto;
 }
-
-.page-title svg {
-  display: none;
-}
-
 .join-btn{
   background-color: transparent;
 }

   margin: 0 1rem 0 3rem;
 }
 /* hierarchy menu */
-.hierarchy-menu {
-  background-color: #f8f8f8;
-  color: #333333;
-  overflow-y: auto;
-}
 .hierarchy-menu a { 
   color: #333333;
   text-decoration: none;

0c1773d

11f8e5d

client/resources/css/reset.css

--- client/resources/css/reset.css

+++ client/resources/css/reset.css


+
+
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family:"AuctionGothic_Medium";
 }
 
 html {

   width: 100%;
   border-collapse: collapse;
   border: 1px solid #e4dccf;
+  font-family:"AuctionGothic_Medium";
 }
 th{
   padding: 0.5rem;

 textarea{
   width: 100%;
   height: 150px;
-}
-
-@font-face{
-  font-family: "KoPubDotumBold_0" ;
-  src: url(/client/resources/files/font/KoPubDotumBold_0.ttf);
 }

11f8e5d

client/resources/files/images/logo.png (Binary) (added)

+++ client/resources/files/images/logo.png

Binary file is not shown

0c1773d

11f8e5d

client/views/component/ContentTitle.jsx

--- client/views/component/ContentTitle.jsx

+++ client/views/component/ContentTitle.jsx


 import React from 'react'
 import styled from 'styled-components'
 
-export default function ContentTitle({contentTitle}) {
+export default function ContentTitle({contentTitle, explanation}) {
   return (
-    <ContentTitleStyled>{contentTitle}</ContentTitleStyled>
+    <div className='flex-start'>
+      <ContentTitleStyled>{contentTitle}</ContentTitleStyled>
+      <Explanation>{explanation}</Explanation>
+    </div>
   )
 }
 
 const ContentTitleStyled = styled.p`
-  position: relative;
-  width: 100%;
-  font-size: 1.6rem;
+  font-size: 4rem;
   font-weight: bold;
-  margin-bottom: 4rem;
-  &::after {
+  margin: 0 3rem 2rem 0;
+  color: #733c1d;
+  /* &::after {
     content: "";
     position: absolute;
     left: 0;

     width: 1rem;
     margin-right: 1rem;
     background-color: #7D9D9C;
-  }
+  } */
   
-`
+`
+
+const Explanation = styled.p`
+  font-size: 2.6rem;
+  color: #733c1d;
+`;

0c1773d

11f8e5d

client/views/component/SubTitle.jsx

--- client/views/component/SubTitle.jsx

+++ client/views/component/SubTitle.jsx


 }
 
 const TitleStyle = styled.h4`
-  font-size: 1.6rem;
+  font-size: 2.5rem;
   font-weight: bold;
   padding: 0.5rem;
   margin-right: 1rem;
+  color: #733c1d;
 `;
 const Explanation = styled.p`
-  font-size: 1.4rem;
+  font-size: 1.8rem;
   padding: 0.5rem;
-  color: ${(color) => color ? color : "#eeeeee"};
-  border-left: 2px solid #cccccc;
+  color: ${(color) => color ? color : "#733c1d"};
+  &::before {
+    content: "";
+    border-left: #f25430 2px solid;
+    padding-right: 1rem;
+  } 
 `;

0c1773d

11f8e5d

client/views/index.jsx

--- client/views/index.jsx

+++ client/views/index.jsx


 import "../resources/css/layout.css";
 import "../resources/css/common.css";
 import "../resources/css/main.css";
-import "../resources/css/responsive.css"
+import "../resources/css/responsive.css";
 
 
 const root = ReactDOM.createRoot(document.getElementById("root"));

0c1773d

11f8e5d

client/views/layout/Header.jsx

--- client/views/layout/Header.jsx

+++ client/views/layout/Header.jsx


 import React from "react";
 import MenuIcon from "@mui/icons-material/Menu";
 import Weather from "../pages/main/Weather.jsx";
+import PersonIcon from "@mui/icons-material/Person";
 
 function Header({ title }) {
 

     <header>
       <div className="header-flex flex flex-align">
         <div className="page-title flex flex-align">
-          <MenuIcon />
-          <span>{title}</span>
+          {/* <MenuIcon /> */}
+          <div className="info-wrap flex">
+            <div className="usericon"><PersonIcon sx={{ width:48, height:48,}} /></div>
+            <p className="header-info-id">admin1</p>
+            <div className="bottom-section flex">
+              <div className="info-id" onClick={() => {
+                navigate("/Join");
+              }}><span>계정추가</span></div>
+              <div className="logout"><span>로그아웃</span></div>
+            </div>
+          </div>
+          {/* <span>{title}</span> */}
         </div>
         <Weather />
       </div>

0c1773d

11f8e5d

client/views/layout/Menu.jsx

--- client/views/layout/Menu.jsx

+++ client/views/layout/Menu.jsx


 import React from "react";
 import SidebarItem from "./SidebarItem.jsx";
 import Button from "../component/Button.jsx";
-import GroupAddIcon from '@mui/icons-material/GroupAdd';
-import LogoutIcon from '@mui/icons-material/Logout';
 import { useNavigate } from "react-router";
+import logo from "../../resources/files/images/logo.png";
 
 export default function Sidebar({items}) {
   const [menuToggle, setMenuToggle] = React.useState(false);

       className={!menuToggle ? "nav" : "burger__menu"}
       onClick={() => (menuToggle ? setMenuToggle(false) : setMenuToggle(true))}
     >
-      <h1 className="logo">시니어 케어 시스템</h1>
+      <h1 className="logo"><img src={logo} alt="" /></h1>
       <div className="flex-align-column" style={{ height: `calc(100% - 72px)` }}>
         <ul>
           {items.map((item, index) => (
             <SidebarItem key={index} item={item} />
           ))}
         </ul>
-        <div className="info-wrap ">
-          <div className="bottom-section flex">
-            <div className="info-id" onClick={() => {
-            navigate("/Join");
-          }}><GroupAddIcon sx={{ width: "20px", height: "20px", color: "#ffffff",}} />계정추가</div>
-            <div className="logout"><LogoutIcon sx={{ width: "20px", height: "20px", color: "#ffffff",}}/>로그아웃</div>
-          </div>
-        </div>
       </div>
     </nav>
   );

0c1773d

11f8e5d

client/views/layout/SidebarItem.jsx

--- client/views/layout/SidebarItem.jsx

+++ client/views/layout/SidebarItem.jsx


           </div>
           <KeyboardArrowDownIcon
             className="toggle"
-            sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
+            sx={{ fontSize: 20, color: "#333333",}}
           />
         </div>
         <ul className="sidebar-content">

0c1773d

11f8e5d

client/views/pages/user_management/UserAuthoriySelect.jsx

--- client/views/pages/user_management/UserAuthoriySelect.jsx

+++ client/views/pages/user_management/UserAuthoriySelect.jsx


         </div>
       </Modal>
       <div className="content-wrap">
-        <ContentTitle contentTitle={"사용자 관리"} />
+        <ContentTitle contentTitle={"사용자 관리"} explanation={"관리기관 리스트 및 시행기관 사용자 리스트를 확인할 수 있습니다."}/>
         <div
           className="flex-align-start"
           style={{ height: "calc(100% - 61px)" }}

Add a comment

Open 0
Closed 0

List

...	...	@@ -289,7 +289,7 @@
289	289	</div>
290	290	</Modal>
291	291	<div className="content-wrap">
292		- <ContentTitle contentTitle={"사용자 관리"} />
	292	+ <ContentTitle contentTitle={"사용자 관리"} explanation={"관리기관 리스트 및 시행기관 사용자 리스트를 확인할 수 있습니다."}/>
293	293	<div
294	294	className="flex-align-start"
295	295	style={{ height: "calc(100% - 61px)" }}

...	...	@@ -13,16 +13,17 @@
13	13	grid-template-areas:
14	14	"nav header"
15	15	"nav main";
16		- grid-template-columns: 250px 1fr;
	16	+ grid-template-columns: 315px 1fr;
17	17	grid-template-rows: 0.1fr 2.9fr;
18	18	}
19	19	#layout.expander{
20	20	grid-template-columns: 50px 1fr;
21	21	}
22	22	header {
23		- padding: 1rem;
	23	+ padding: 1rem 3rem;
24	24	background-color: white;
25	25	grid-area: header;
	26	+ height: 87px;
26	27	}
27	28
28	29	.page-title span {
...	...	@@ -33,56 +34,59 @@
33	34
34	35	nav{
35	36	height: 100%;
36		- background-color: #242d2e;
	37	+ background-color: #f2f0eb;
37	38	grid-area: nav;
38	39	}
39		-
	40	+.nav{
	41	+ position: relative;
	42	+ box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 20%);}
	43	+.nav > div > ul{margin-top: 7rem;}
40	44	.logo {
41	45	padding: 2rem 1rem;
42	46	font-size: large;
43	47	text-align: center;
44		- color: #ffffff;
	48	+ background: #ffffff;
45	49	font-weight: bold;
46	50	}
	51	+.logo img{width: 273px;}
47	52	/* 네비게이션 */
48	53
49		-.sidebar-item {
50		- margin: 1rem 0;
51		-}
52	54
53	55	.sidebar-item>a {
54	56	font-size: 1.6rem;
55	57	color: #ffffff;
56	58	margin: 0 3rem;
57		-
	59	+
58	60	}
59	61
60	62	/* mui icon */
61	63	.MuiSvgIcon-root {
62	64	display: block;
63	65	}
64		-
65	66	.sidebar-title {
66		- margin: 0 3rem;
	67	+ margin: 0 auto;
	68	+ width: 150px;
67	69	}
68	70
69	71	.sidebar-title span {
70		- font-size: 1.6rem;
71		- color: #e6e5e5;
	72	+ font-size: 2rem;
	73	+ font-weight: bold;
	74	+ color: #333333;
	75	+
72	76	}
73	77
74	78	.sidebar-title .toggle {
75	79	transition: transform .3s;
76	80	}
77		-
78	81	.sidebar-item.open .toggle {
79	82	transform: rotate(180deg);
80		-
	83	+
81	84	}
82	85	nav li{cursor: pointer;}
83		-nav .sidebar-item{padding: 1rem 0 0 0;}
	86	+nav .sidebar-item{padding: 1.4rem 0 ;}
	87	+.sidebar-item:hover{background: #f25430;}
	88	+.sidebar-item:hover span, .sidebar-item:hover .toggle{color: #ffffff;}
84	89	.sidebar-content{background: #7D9D9C;}
85		-.sidebar-content .sidebar-item{padding: 1rem 0;}
86	90	.sidebar-content .sidebar-item:hover{
87	91	background: #d1e4e3;
88	92	}
...	...	@@ -106,30 +110,26 @@
106	110	.sidebar-content .sidebar-item:hover a {
107	111	font-weight: bold;
108	112	}
109		-
110		-.info-wrap{
111		- border-top: 1px solid #4b4b4b;
112		-}
113		-
114		-.bottom-section {
115		- padding: 3rem 2rem;
116		-}
117		-
118		-.info-id {
	113	+.info-wrap .usericon{width: 5rem; height: 5rem; border: 1px solid #f25430; border-radius: 50px; margin-right: 2rem;}
	114	+.header-info-id{font-size: 1.6rem; margin-right: 2rem; color: #733c1d; font-weight: 600;}
	115	+.header-info-id::after{content: "님"; font-size: 1.6rem;}
	116	+.info-id, .logout {
	117	+ width: 123px;
	118	+ height: 40px;
	119	+ background: #f25430;
	120	+ border-radius: 30px;
119	121	font-size: 1.5rem;
120	122	color: #ffffff;
	123	+ display: flex;
	124	+ align-items: center;
	125	+ margin-right: 2rem;
121	126	}
122		-.logout{
123		- text-decoration: underline;
124		- font-size: 1.5rem;
125		- color: #ffffff;
126		-}
127		-
	127	+.logout{background: #f26e50;}
128	128	#pages {
129	129	max-width: 100%;
130	130	height: 100%;
131		- padding: 2rem;
132		- background-color: #e6e5e5;
	131	+ padding: 3rem;
	132	+ background-color: #f2f0eb;
133	133	grid-area: main;
134	134	}
135	135
...	...	@@ -142,15 +142,18 @@
142	142	.content-wrap {
143	143	max-width: 100%;
144	144	height: 100%;
145		- padding: 2em;
	145	+ padding: 4rem 5rem;
146	146	background-color: #ffffff;
147	147	}
148	148
149	149	/* hierarchy menu */
150	150	.hierarchy-menu {
151		- background-color: #f8f8f8;
152		- color: #333333;
	151	+ box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 20%);
	152	+ color: #733c1d;
153	153	overflow-y: auto;
	154	+ max-height: 57rem;
	155	+ width: 46rem;
	156	+ border-radius: 30px;
154	157	}
155	158	.hierarchy-menu a {
156	159	color: #333333;

...	...	@@ -1,18 +1,13 @@
1	1	/* 공통 */
2	2	.logo {
3	3	font-size: 2.4rem;
4		- font-family: "KoPubDotumBold_0";
	4	+ font-family: 'AuctionGothic_Medium';
5	5	}
6		-
	6	+header > div{height: 100%;}
7	7	header .page-title span {
8		- font-family: "KoPubDotumBold_0";
9		- font-size: 2.2rem;
	8	+ font-size: 1.7rem;
	9	+ margin: 0 auto;
10	10	}
11		-
12		-.page-title svg {
13		- display: none;
14		-}
15		-
16	11	.join-btn{
17	12	background-color: transparent;
18	13	}
...	...	@@ -54,11 +49,6 @@
54	49	margin: 0 1rem 0 3rem;
55	50	}
56	51	/* hierarchy menu */
57		-.hierarchy-menu {
58		- background-color: #f8f8f8;
59		- color: #333333;
60		- overflow-y: auto;
61		-}
62	52	.hierarchy-menu a {
63	53	color: #333333;
64	54	text-decoration: none;

...	...	@@ -1,7 +1,11 @@
	1	+
	2	+
	3	+
1	4	* {
2	5	margin: 0;
3	6	padding: 0;
4	7	box-sizing: border-box;
	8	+ font-family:"AuctionGothic_Medium";
5	9	}
6	10
7	11	html {
...	...	@@ -37,6 +41,7 @@
37	41	width: 100%;
38	42	border-collapse: collapse;
39	43	border: 1px solid #e4dccf;
	44	+ font-family:"AuctionGothic_Medium";
40	45	}
41	46	th{
42	47	padding: 0.5rem;
...	...	@@ -102,9 +107,4 @@
102	107	textarea{
103	108	width: 100%;
104	109	height: 150px;
105		-}
106		-
107		-@font-face{
108		- font-family: "KoPubDotumBold_0" ;
109		- src: url(/client/resources/files/font/KoPubDotumBold_0.ttf);
110	110	} (No newline at end of file)

...	...	@@ -1,19 +1,21 @@
1	1	import React from 'react'
2	2	import styled from 'styled-components'
3	3
4		-export default function ContentTitle({contentTitle}) {
	4	+export default function ContentTitle({contentTitle, explanation}) {
5	5	return (
6		- <ContentTitleStyled>{contentTitle}</ContentTitleStyled>
	6	+ <div className='flex-start'>
	7	+ <ContentTitleStyled>{contentTitle}</ContentTitleStyled>
	8	+ <Explanation>{explanation}</Explanation>
	9	+ </div>
7	10	)
8	11	}
9	12
10	13	const ContentTitleStyled = styled.p`
11		- position: relative;
12		- width: 100%;
13		- font-size: 1.6rem;
	14	+ font-size: 4rem;
14	15	font-weight: bold;
15		- margin-bottom: 4rem;
16		- &::after {
	16	+ margin: 0 3rem 2rem 0;
	17	+ color: #733c1d;
	18	+ /* &::after {
17	19	content: "";
18	20	position: absolute;
19	21	left: 0;
...	...	@@ -33,6 +35,11 @@
33	35	width: 1rem;
34	36	margin-right: 1rem;
35	37	background-color: #7D9D9C;
36		- }
	38	+ } */
37	39
38		-` (No newline at end of file)
	40	+`
	41	+
	42	+const Explanation = styled.p`
	43	+ font-size: 2.6rem;
	44	+ color: #733c1d;
	45	+`; (No newline at end of file)

...	...	@@ -11,14 +11,19 @@
11	11	}
12	12
13	13	const TitleStyle = styled.h4`
14		- font-size: 1.6rem;
	14	+ font-size: 2.5rem;
15	15	font-weight: bold;
16	16	padding: 0.5rem;
17	17	margin-right: 1rem;
	18	+ color: #733c1d;
18	19	`;
19	20	const Explanation = styled.p`
20		- font-size: 1.4rem;
	21	+ font-size: 1.8rem;
21	22	padding: 0.5rem;
22		- color: ${(color) => color ? color : "#eeeeee"};
23		- border-left: 2px solid #cccccc;
	23	+ color: ${(color) => color ? color : "#733c1d"};
	24	+ &::before {
	25	+ content: "";
	26	+ border-left: #f25430 2px solid;
	27	+ padding-right: 1rem;
	28	+ }
24	29	`;

...	...	@@ -14,7 +14,7 @@
14	14	import "../resources/css/layout.css";
15	15	import "../resources/css/common.css";
16	16	import "../resources/css/main.css";
17		-import "../resources/css/responsive.css"
	17	+import "../resources/css/responsive.css";
18	18
19	19
20	20	const root = ReactDOM.createRoot(document.getElementById("root"));

...	...	@@ -21,7 +21,7 @@
21	21	</div>
22	22	<KeyboardArrowDownIcon
23	23	className="toggle"
24		- sx={{ fontSize: 20, color: "#ffffff", marginRight: 1 }}
	24	+ sx={{ fontSize: 20, color: "#333333",}}
25	25	/>
26	26	</div>
27	27	<ul className="sidebar-content">

Delete comment