From a542c2a83a70b88968414c02db100a118fc95bd5 Mon Sep 17 00:00:00 2001
From: Yunseong Choe <68419358+marunemo@users.noreply.github.com>
Date: Sat, 22 Oct 2022 13:59:54 +0000
Subject: [PATCH] [Design]Style orgainzational card and form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

조직도 세부 내용 및 form 디자인 수정 #60
---
 .../web-next/componenets/OrganizationCard.js  | 10 +++++-
 .../web-next/componenets/OrganizationForm.js  | 32 +++++++++++++------
 .../styles/OrganizationCard.module.css        | 17 ++++------
 .../styles/OrganizationForm.module.css        | 28 ++++++++++++++--
 front-end/web-next/styles/globals.css         |  6 ++++
 5 files changed, 70 insertions(+), 23 deletions(-)

diff --git a/front-end/web-next/componenets/OrganizationCard.js b/front-end/web-next/componenets/OrganizationCard.js
index a7c541e5..f00e93d1 100644
--- 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,6 +58,7 @@ function OrganizationCard(props) {
         <Row
           className={Styles.elementRow}
           align="middle"
+          justify="center"
         >
           <Col>
             <Image
@@ -64,16 +66,22 @@ function OrganizationCard(props) {
               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
index a037c297..aee964bb 100644
--- 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,8 +14,8 @@ 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>
   )
 }
@@ -23,7 +23,7 @@ function InputElement(props) {
 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,6 +71,7 @@ function OrganizationForm(props) {
       <Row
         className={Styles.elementRow}
         align="middle"
+        justify="center"
       >
         <Col>
           <Image
@@ -77,9 +79,19 @@ function OrganizationForm(props) {
             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
index aaba0e3f..b3db5680 100644
--- 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;
 }
\ No newline at end of file
diff --git a/front-end/web-next/styles/OrganizationForm.module.css b/front-end/web-next/styles/OrganizationForm.module.css
index e82d584b..85c9c29b 100644
--- 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;
 }
\ No newline at end of file
diff --git a/front-end/web-next/styles/globals.css b/front-end/web-next/styles/globals.css
index b125571f..74aa31f6 100644
--- 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;
 }
\ No newline at end of file