[Design]Style orgainzational card and form

조직도 세부 내용 및 form 디자인 수정 #60
osamhack2022 · Oct 22, 2022 · a542c2a · a542c2a
1 parent 1b2c7c1
commit a542c2a
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 23 deletions.
diff --git a/front-end/web-next/componenets/OrganizationCard.js b/front-end/web-next/componenets/OrganizationCard.js
@@ -19,6 +19,7 @@ function OrganizationCard(props) {
   return (
     <>
       <Modal
+        className="organizationCard"
         open={props.isOpen}
         onCancel={props.onClose}
         footer={
@@ -57,23 +58,30 @@ function OrganizationCard(props) {
         <Row
           className={Styles.elementRow}
           align="middle"
+          justify="center"
         >
           <Col>
             <Image
               className={Styles.profileImage}
               src="https://images.pexels.com/photos/1202726/pexels-photo-1202726.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
             />
           </Col>
+        </Row>
+        <Row
+          className={Styles.elementRow}
+          align="middle"
+          justify="center"
+        >
           <Col className={Styles.userProfile}>
             <div>
               <span className={Styles.userName}>{props.data.Name}</span>
               <span className={Styles.milRank}>{props.data.Rank}</span>
             </div>
-            <div className={Styles.userDodid}>{props.data.DoDID}</div>
           </Col>
         </Row>
         <Row className={Styles.elementRow}>
           <Col span={12}><InfoElement label="부대" content={props.data.Unit} /></Col>
+          <Col span={12}><InfoElement label="군번" content={props.data.DoDID} /></Col>
         </Row>
         <Row className={Styles.elementRow}>
           <Col span={12}><InfoElement label="직책" content={props.data.Position} /></Col>

diff --git a/front-end/web-next/componenets/OrganizationForm.js b/front-end/web-next/componenets/OrganizationForm.js
@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from 'react';
-import { Modal, Image, Row, Col, Select } from 'antd';
+import { Modal, Image, Row, Col, Input, Select } from 'antd';
 import Styles from '../styles/OrganizationForm.module.css';
 
 function InfoElement(props) {
@@ -14,16 +14,16 @@ function InfoElement(props) {
 function InputElement(props) {
   return (
     <div>
-      <div className={Styles.inputLabels}>{props.label}</div>
-      <input className={Styles.formInput} value={props.value} onChange={props.onChange} />
+      <div className={Styles.infoLabel}>{props.label}</div>
+      <Input style={{ width: '180px', height: '32px' }} value={props.value} onChange={props.onChange} />
     </div>
   )
 }
 
 function ParentSelectElement(props) {
   return (
     <div>
-      <div className={Styles.inputLabels}>{props.label}</div>
+      <div className={Styles.infoLabel}>{props.label}</div>
       <Select
         className={Styles.parentSelect}
         labelInValue
@@ -60,6 +60,7 @@ function OrganizationForm(props) {
 
   return (
     <Modal
+      className="organizationForm"
       open={props.isOpen}
       onOk={() => {
         props.onSubmit(formData);
@@ -70,16 +71,27 @@ function OrganizationForm(props) {
       <Row
         className={Styles.elementRow}
         align="middle"
+        justify="center"
       >
         <Col>
           <Image
             className={Styles.profileImage}
             src="https://images.pexels.com/photos/1202726/pexels-photo-1202726.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
           />
         </Col>
+      </Row>
+      <Row
+        className={Styles.elementRow}
+        align="middle"
+        justify="center"
+      >
         <Col className={Styles.userProfile}>
-          <div>
-            <input className={Styles.formInput} value={formData.Name} onChange={(event) => serializedEdit('Name', event.target.value)} />
+          <Input.Group compact>
+            <Input
+              style={{ width: '130px', height: '32px' }}
+              value={formData.Name}
+              onChange={(event) => serializedEdit('Name', event.target.value)}
+            />
             <Select
               className={Styles.formSelect}
               value={formData.Rank}
@@ -93,12 +105,14 @@ function OrganizationForm(props) {
                 ))
               }
             </Select>
-          </div>
-          <input className={Styles.formInput} value={formData.DoDID} onChange={(event) => serializedEdit('DoDID', event.target.value)} />
+          </Input.Group>
         </Col>
       </Row>
       <Row className={Styles.elementRow}>
         <Col span={12}><InfoElement label="부대" content={formData.Unit} /></Col>
+        <Col span={12}>
+          <InputElement label="군번" value={formData.DoDID} onChange={(event) => serializedEdit('DoDID', event.target.value)} />
+        </Col>
       </Row>
       <Row className={Styles.elementRow}>
         <Col span={12}>
@@ -116,7 +130,7 @@ function OrganizationForm(props) {
           <InputElement label="군연락망" value={formData.MilNumber} onChange={(event) => serializedEdit('MilNumber', event.target.value)} />
         </Col>
       </Row>
-      <Row>
+      <Row className={Styles.elementRow}>
         <ParentSelectElement
           label="직속상관"
           value={formData.Parent}

diff --git a/front-end/web-next/styles/OrganizationCard.module.css b/front-end/web-next/styles/OrganizationCard.module.css
@@ -1,26 +1,21 @@
 .profileImage {
-    width: 100px;
-    height: 100px;
+    width: 150px;
+    height: 150px;
     border: 1px solid #ddd;
     border-radius: 100%;
 }
 
 .userName {
-    font-size: 14pt;
+    font-size: 18pt;
     font-weight: bold;
 }
 
 .milRank {
-    font-size: 12pt;
+    font-size: 16pt;
     font-weight: bold;
     margin-left: 5pt;
 }
 
-.userDodid {
-    font-size: 12pt;
-    color: #444;
-}
-
 .infoLabel {
     font-size: 14pt;
     font-weight: bold;
@@ -32,9 +27,9 @@
 
 .elementRow {
     margin: 7px 0px;
-    padding: 0px 15px;
+    padding: 0px 25px;
 }
 
 .userProfile {
-    margin-left: 15px;
+    margin-bottom: 15px;
 }
diff --git a/front-end/web-next/styles/OrganizationForm.module.css b/front-end/web-next/styles/OrganizationForm.module.css
@@ -1,14 +1,38 @@
 .profileImage {
-    width: 100px;
-    height: 100px;
+    width: 150px;
+    height: 150px;
     border: 1px solid #ddd;
     border-radius: 100%;
 }
 
+.userProfile {
+    margin-bottom: 15px;
+}
+
 .formSelect {
     width: 100px;
 }
 
 .parentSelect {
     width: 300px;
+}
+
+.infoLabel {
+    font-size: 14pt;
+    font-weight: bold;
+}
+
+.infoContent {
+    font-size: 12pt;
+}
+
+.formInput {
+    width: 180px;
+    height: 30px;
+    border: 1px solid #d9d9d9;
+}
+
+.elementRow {
+    margin: 7px 0px;
+    padding: 0px 25px;
 }
diff --git a/front-end/web-next/styles/globals.css b/front-end/web-next/styles/globals.css
@@ -94,4 +94,10 @@ a {
 
 .ant-spin-dot-item {
   background-color: #008080;
+}
+
+.organizationCard > .ant-modal-content, 
+.organizationForm > .ant-modal-content {
+  border-radius: 30px;
+  padding: 5px;
 }