rlagkdud898 / AJIN star
mycoms 2024-02-28
240228김하영 최초커밋
@ae387a1abfaee0cb6257e0c6274dd19c2bace283
 
ae387a1
.gitignore (added)
+++ .gitignore
@@ -0,0 +1,3 @@
+client/build/
+server/logs/
+node_modules/(No newline at end of file)
 
ae387a1
.idea/workspace.xml (added)
+++ .idea/workspace.xml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="BranchesTreeState">
+    <expand>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="LOCAL_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="GROUP_NODE:origin" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+    </expand>
+    <select />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="01a0e0f0-fcc8-4169-b6ce-2029ac7ac3d2" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/client/resources/css/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/client/resources/css/style.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/client/views/layout/Header.vue" beforeDir="false" afterPath="$PROJECT_DIR$/client/views/layout/Header.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/client/views/pages/AppRouter.js" beforeDir="false" afterPath="$PROJECT_DIR$/client/views/pages/AppRouter.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/client/views/pages/main/Main.vue" beforeDir="false" afterPath="$PROJECT_DIR$/client/views/pages/main/Main.vue" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectId" id="2V3300o3WOe3QmLYJYN8OWl5Oj6" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="aspect.path.notification.shown" value="true" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/../../../intellij/workspace/project_setting_manual" />
+    <property name="settings.editor.selected.configurable" value="configurable.group.language" />
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="01a0e0f0-fcc8-4169-b6ce-2029ac7ac3d2" name="Default Changelist" comment="" />
+      <created>1694050710013</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1694050710013</updated>
+      <workItem from="1694050711402" duration="740000" />
+      <workItem from="1694053838386" duration="18000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="2" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+    <option name="oldMeFiltersMigrated" value="true" />
+  </component>
+  <component name="WindowStateProjectService">
+    <state x="1061" y="455" key="FileChooserDialogImpl" timestamp="1694053854393">
+      <screen x="0" y="0" width="2560" height="1400" />
+    </state>
+    <state x="1061" y="455" key="FileChooserDialogImpl/0.0.2560.1400/[email protected]" timestamp="1694053854393" />
+  </component>
+</project>(No newline at end of file)
 
ae387a1
Global.js (added)
+++ Global.js
@@ -0,0 +1,17 @@
+const PROJECT_NAME = 'NodeJS Web Server Framework(Vue)';
+const PROJECT_VERSION = '1.0';
+const BASE_DIR = __dirname;
+const LOG_BASE_DIR = `${__dirname}/server/logs`;
+const SERVICE_STATUS = process.env.NODE_ENV;//development, production
+const PORT = 80;
+const API_SERVER_HOST = 'localhost:8080';
+
+module.exports = {
+    PROJECT_NAME,
+    PROJECT_VERSION,
+    BASE_DIR,
+    LOG_BASE_DIR,
+    SERVICE_STATUS,
+    PORT,
+    API_SERVER_HOST
+}(No newline at end of file)
 
ae387a1
SQL (added)
+++ SQL
@@ -0,0 +1,33 @@
+-- create test SCHEMA(mariaDB)
+CREATE SCHEMA test DEFAULT CHARACTER SET utf8mb4;
+
+-- use test SCHEMA(mariaDB)
+use test;
+
+-- create product table(mariaDB)
+CREATE TABLE product
+(
+	product_index INT PRIMARY KEY AUTO_INCREMENT,
+	product_name VARCHAR(50),
+	product_category VARCHAR(50),
+	product_price INT,
+	product_explan TEXT,
+	product_writer VARCHAR(50),
+	product_date DATE
+) DEFAULT CHARACTER SET utf8mb4;
+
+-- create product_order table(mariaDB)
+CREATE TABLE product_order
+(
+	order_index INT,
+    order_product_number INT,
+    order_product_name VARCHAR(50),
+    order_product_category VARCHAR(50),
+    order_product_temperature VARCHAR(50),
+    order_amount INT,
+    order_price INT,
+    order_user VARCHAR(50),
+    order_date DATE,
+    order_state VARCHAR(50),
+    PRIMARY KEY(order_index, order_product_number)
+) DEFAULT CHARACTER SET utf8mb4;(No newline at end of file)
 
ae387a1
client/resources/css/component.css (added)
+++ client/resources/css/component.css
@@ -0,0 +1,662 @@
+@charset "utf-8";
+
+/* box */
+.content {
+    width: 100%;
+    height: 100%;
+}
+
+.row {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.box {
+    background-color: var(--white);
+    height: 100%;
+    padding: 15px;
+    border-radius: 10px;
+    box-shadow: 0 0 5px var(--light);
+}
+
+.box-title {
+    font-size: 1.8rem;
+    font-weight: bold;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--dark);
+}
+
+.box-inner-title {
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+
+.chart-title {
+    font-size: 1.4rem;
+    font-weight: bold;
+}
+
+.content-box {
+    height: calc(100% - 48px);
+    /* background-color: aliceblue; */
+}
+
+
+
+
+/* btn */
+.small-btn {
+    width: 120px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    font-size: 1.3rem;
+}
+
+.large-btn {
+    width: 100%;
+    padding: 5px 15px;
+    border-radius: 5px;
+}
+
+.icon-btn {
+    padding: 5px;
+    border-radius: 50%;
+}
+
+.close-btn{
+    font-size: 1.6rem;
+    font-weight: 900;
+}
+
+
+.logout-btn::before {
+    content: "";
+    width: 1px;
+    height: 10px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    background-color: #aaa;
+}
+
+.close-btn {
+    color: #d6def6;
+}
+
+.blue-btn,
+.blue-border-btn:hover {
+    background-color: var(--blue);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.red-btn,
+.red-border-btn:hover {
+    background-color: var(--red);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.green-btn,
+.green-border-btn:hover {
+    background-color: var(--green);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.orange-btn,
+.orange-border-btn:hover {
+    background-color: var(--orange);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.darkg-btn,
+.darkg-border-btn:hover {
+    background-color: var(--darkG);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.gray-btn,
+.gray-border-btn:hover {
+    background-color: #eee;
+    color: #333;
+    transition: all 0.3s ease-in-out;
+}
+
+
+.blue-border-btn {
+    border: 1px solid var(--blue);
+    color: var(--blue);
+    background-color: var(--white);
+}
+
+.red-border-btn {
+    border: 1px solid var(--red);
+    color: var(--red);
+    background-color: var(--white);
+}
+
+.green-border-btn {
+    border: 1px solid var(--green);
+    color: var(--green);
+    background-color: var(--white);
+}
+
+.orange-border-btn {
+    border: 1px solid var(--orange);
+    ;
+    color: var(--orange);
+    background-color: var(--white);
+}
+
+.darkg-border-btn {
+    border: 1px solid #434343;
+    color: #434343;
+    background-color: var(--white);
+}
+
+.gray-border-btn {
+    border: 1px solid #aaa;
+    color: #aaa;
+    background-color: var(--white);
+}
+
+.white-border-btn {
+    border: 1px solid var(--white);
+    color: var(--white);
+    background-color: transparent;
+}
+
+.tp-btn {
+    background-color: transparent;
+    width: 15px;
+    height: 15px;
+    margin-left: 10px;
+}
+
+button:disabled {
+    background-color: #eee;
+    color: #333;
+}
+
+.del-icon-btn {
+    width: 25px;
+    height: 25px;
+    padding: 5px;
+    background-color: var(--red);
+    color: var(--white);
+    border-radius: 50%;
+}
+
+.set-icon-btn {
+    width: 25px;
+    height: 25px;
+    padding: 5px;
+    background-color: var(--darkG);
+    color: var(--white);
+    border-radius: 50%;
+}
+
+
+
+
+/* 박스 컴포넌트 스타일 */
+.component-wrap {
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+    border-radius: 5px;
+    background-color: #f8f8f8;
+}
+
+.data-title {
+    font-size: 1.4rem;
+    font-weight: 500;
+}
+
+
+.data-number,
+.data-caption {
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+
+.data-unit {
+    font-size: 1.4rem;
+    font-weight: 200;
+}
+
+.data-icon {
+    min-width: 30px;
+    min-height: 30px;
+    width: 40px;
+    height: 40px;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+
+.data-icon p {
+    font-size: 1.6rem;
+    font-weight: bold;
+    text-align: center;
+    line-height: 50px;
+    background-color: var(--orange);
+    border-radius: 5px;
+}
+
+
+/* 모달 */
+.modal-wrapper {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 11000;
+}
+
+.modal-container {
+    background: #fff;
+    min-width: 500px;
+    width: 30%;
+    height:80%;
+    border-radius: 5px;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    padding: 20px;
+    box-sizing: border-box;
+    max-height: 95%;
+    min-height: 500px;
+}
+
+.modal-title {
+    width: 100%;
+    border-bottom: 1px solid #d4cccc;
+    padding: 10px 0;
+}
+
+.modal-subtitle {
+    font-size: 1.3rem;
+    font-weight: 600;
+}
+
+.modal-content-monthly {
+    width: 100%;
+    padding: 20px 0;
+    overflow-y: auto;
+}
+
+.large-modal {
+    width: 90%;
+}
+
+.small-modal {
+    min-width: 200px;
+    min-height: 200px;
+    max-width: 450px;
+    height: auto;
+    max-height: 50%;
+}
+
+.list-modal {
+    width: 80%;
+    height: 80%;
+}
+
+.alert-write {
+    font-size: 1.6rem;
+    line-height: 180%;
+}
+
+
+.modal-content-monthly::-webkit-scrollbar {
+    width: 10px;
+}
+
+.modal-content-monthly::-webkit-scrollbar-thumb {
+    background-color: #6b6b6b;
+    border-radius: 10px;
+    background-clip: padding-box;
+    border: 2px solid transparent;
+}
+
+.modal-content-monthly::-webkit-scrollbar-track {
+    background-color: #eee;
+    border-radius: 10px;
+    box-shadow: inset 0px 0px 5px white;
+}
+
+.modal-end {
+    width: 100%;
+    padding: 15px 0;
+    border-top: 1px solid #eee;
+}
+
+.alert-modal .modal-end button,
+.small-modal .modal-end button {
+    margin-left: 0;
+}
+
+.full-input,
+.full-select {
+    width: 100%;
+}
+
+
+/* margin */
+
+/* margin-left 왼쪽 */
+.ml0 {
+    margin-left: 0%;
+}
+.ml1 {
+    margin-left: 1%;
+}
+.ml2{
+    margin-left: 2%;
+}
+.ml3{
+    margin-left: 3%;
+}
+.ml4{
+    margin-left: 4%;
+}
+.ml5 {
+    margin-left: 5%;
+}
+.ml6{
+    margin-left: 6%;
+}
+.ml7{
+    margin-left: 7%;
+}
+.ml8{
+    margin-left: 8%;
+}
+.ml9{
+    margin-left: 9%;
+}
+.ml10 {
+    margin-left: 10%;
+}
+.ml15 {
+    margin-left: 15%;
+}
+.ml20 {
+    margin-left: 20%;
+}
+
+/* margin-right 오른쪽 */
+.mr0 {
+    margin-right: 0%;
+}
+.mr1 {
+    margin-right: 1%;
+}
+.mr2{
+    margin-right: 2%;
+}
+.mr3{
+    margin-right: 3%;
+}
+.mr4{
+    margin-right: 4%;
+}
+.mr5 {
+    margin-right: 5%;
+}
+.mr6{
+    margin-right: 6%;
+}
+.mr7{
+    margin-right: 7%;
+}
+.mr8{
+    margin-right: 8%;
+}
+.mr9{
+    margin-right: 9%;
+}
+.mr10 {
+    margin-right: 10%;
+}
+.mr15 {
+    margin-right: 15%;
+}
+.mr20 {
+    margin-right: 20%;
+}
+/* margin-top 윗쪽 */
+.mt0 {
+    margin-top: 0%;
+}
+.mt1 {
+    margin-top: 1%;
+}
+.mt2{
+    margin-top: 2%;
+}
+.mt3{
+    margin-top: 3%;
+}
+.mt4{
+    margin-top: 4%;
+}
+.mt5 {
+    margin-top: 5%;
+}
+.mt6{
+    margin-top: 6%;
+}
+.mt7{
+    margin-top: 7%;
+}
+.mt8{
+    margin-top: 8%;
+}
+.mt9{
+    margin-top: 9%;
+}
+.mt10 {
+    margin-top: 10%;
+}
+.mt15 {
+    margin-top: 15%;
+}
+.mt20 {
+    margin-top: 20%;
+}
+
+/* margin-bottom 아래쪽 */
+
+.mb0 {
+    margin-bottom: 0%;
+}
+.mb1 {
+    margin-bottom: 1%;
+}
+.mb2{
+    margin-bottom: 2%;
+}
+.mb3{
+    margin-bottom: 3%;
+}
+.mb4{
+    margin-bottom: 4%;
+}
+.mb5 {
+    margin-bottom: 5%;
+}
+.mb6{
+    margin-bottom: 6%;
+}
+.mb7{
+    margin-bottom: 7%;
+}
+.mb8{
+    margin-bottom: 8%;
+}
+.mb9{
+    margin-bottom: 9%;
+}
+.mb10 {
+    margin-bottom: 10%;
+}
+.mb15 {
+    margin-bottom: 15%;
+}
+.mb20 {
+    margin-bottom: 20%;
+}
+
+
+/* padding */
+.pd0 {
+    padding: 0%;
+}
+.pd1 {
+    padding: 1%;
+}
+.pd2{
+    padding: 2%;
+}
+.pd3{
+    padding: 3%;
+}
+.pd4{
+    padding: 4%;
+}
+.pd5 {
+    padding: 5%;
+}
+.pd6{
+    padding: 6%;
+}
+.pd7{
+    padding: 7%;
+}
+.pd8{
+    padding: 8%;
+}
+.pd9{
+    padding: 9%;
+}
+.pd10 {
+    padding: 10%;
+}
+.pd15 {
+    padding: 15%;
+}
+.pd20 {
+    padding: 20%;
+}
+
+/* padding-top */
+.pt0 {
+    padding-top: 0%;
+}
+.pt1 {
+    padding-top: 1%;
+}
+.pt2{
+    padding-top: 2%;
+}
+.pt3{
+    padding-top: 3%;
+}
+.pt4{
+    padding-top: 4%;
+}
+.pt5 {
+    padding-top: 5%;
+}
+.pt6{
+    padding-top: 6%;
+}
+.pt7{
+    padding-top: 7%;
+}
+.pt8{
+    padding-top: 8%;
+}
+.pt9{
+    padding-top: 9%;
+}
+.pt10 {
+    padding-top: 10%;
+}
+.pt15 {
+    padding-top: 15%;
+}
+.pt20 {
+    padding-top: 20%;
+}
+/* padding-bottom */
+.pb0 {
+    padding-bottom: 0%;
+}
+.pb1 {
+    padding-bottom: 1%;
+}
+.pb2{
+    padding-bottom: 2%;
+}
+.pb3{
+    padding-bottom: 3%;
+}
+.pb4{
+    padding-bottom: 4%;
+}
+.pb5 {
+    padding-bottom: 5%;
+}
+.pb6{
+    padding-bottom: 6%;
+}
+.pb7{
+    padding-bottom: 7%;
+}
+.pb8{
+    padding-bottom: 8%;
+}
+.pb9{
+    padding-bottom: 9%;
+}
+.pb10 {
+    padding-bottom: 10%;
+}
+.pb15 {
+    padding-bottom: 15%;
+}
+.pb20 {
+    padding-bottom: 20%;
+}
+
+
+/* text 정렬 */
+.text-lf {
+    text-align: left;
+}
+
+.text-ct {
+    text-align: center;
+}
+
+.text-rg {
+    text-align: right;
+}
+
+
+/* 기타 공용 */
+.cursor{
+    cursor: pointer;
+}(No newline at end of file)
 
ae387a1
client/resources/css/grid.css (added)
+++ client/resources/css/grid.css
@@ -0,0 +1,257 @@
+@charset "utf-8";
+
+.container {
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+}
+/* 480 small */
+@media (min-width: 480px) {
+    .container {
+        max-width: 768px;
+    }
+}
+
+/* 768 medium */
+@media (min-width: 768px) {
+    .container {
+        max-width: 1024px;
+    }
+}
+/* 1024 large */
+@media (min-width: 1024px) {
+    .container {
+        max-width: 1280px;
+    }
+}
+/* 1280 Xlarge */
+@media (min-width: 1280px) {
+    .container{
+        max-width: 100%;
+    }
+}
+
+
+.flex {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.no-gutters {
+    margin-right: 0;
+    margin-left: 0;
+}
+
+
+.no-gutters>.gd,
+.no-gutters>[class*="col-"] {
+    padding-right: 0;
+    padding-left: 0;
+}
+
+.gd-1,
+.gd-2,
+.gd-3,
+.gd-4,
+.gd-5,
+.gd-6,
+.gd-7,
+.gd-8,
+.gd-9,
+.gd-10,
+.gd-11,
+.gd-12,
+.gd,
+.gd-auto,
+.gd-sm-1,
+.gd-sm-2,
+.gd-sm-3,
+.gd-sm-4,
+.gd-sm-5,
+.gd-sm-6,
+.gd-sm-7,
+.gd-sm-8,
+.gd-sm-9,
+.gd-sm-10,
+.gd-sm-11,
+.gd-sm-12,
+.gd-sm,
+.gd-sm-auto,
+.gd-md-1,
+.gd-md-2,
+.gd-md-3,
+.gd-md-4,
+.gd-md-5,
+.gd-md-6,
+.gd-md-7,
+.gd-md-8,
+.gd-md-9,
+.gd-md-10,
+.gd-md-11,
+.gd-md-12,
+.gd-md,
+.gd-md-auto,
+.gd-lg-1,
+.gd-lg-2,
+.gd-lg-3,
+.gd-lg-4,
+.gd-lg-5,
+.gd-lg-6,
+.gd-lg-7,
+.gd-lg-8,
+.gd-lg-9,
+.gd-lg-10,
+.gd-lg-11,
+.gd-lg-12,
+.gd-lg,
+.gd-lg-auto,
+.gd-xl-1,
+.gd-xl-2,
+.gd-xl-3,
+.gd-xl-4,
+.gd-xl-5,
+.gd-xl-6,
+.gd-xl-7,
+.gd-xl-8,
+.gd-xl-9,
+.gd-xl-10,
+.gd-xl-11,
+.gd-xl-12,
+.gd-xl,
+.gd-xl-auto {
+    position: relative;
+    width: 100%;
+    min-height: 1px;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+
+.gd {
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    max-width: 100%;
+}
+
+.gd-auto {
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: auto;
+    max-width: none;
+}
+
+.gd-1 {
+    -ms-flex: 0 0 8.333333%;
+    flex: 0 0 8.333333%;
+    max-width: 8.333333%;
+}
+
+.gd-2 {
+    -ms-flex: 0 0 16.666667%;
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+}
+
+.gd-3 {
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+}
+
+.gd-4 {
+    -ms-flex: 0 0 33.333333%;
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+}
+
+.gd-5 {
+    -ms-flex: 0 0 41.666667%;
+    flex: 0 0 41.666667%;
+    max-width: 41.666667%;
+}
+
+.gd-6 {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.gd-7 {
+    -ms-flex: 0 0 58.333333%;
+    flex: 0 0 58.333333%;
+    max-width: 58.333333%;
+}
+
+.gd-8 {
+    -ms-flex: 0 0 66.666667%;
+    flex: 0 0 66.666667%;
+    max-width: 66.666667%;
+}
+
+.gd-9 {
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%;
+    max-width: 75%;
+}
+
+.gd-10 {
+    -ms-flex: 0 0 83.333333%;
+    flex: 0 0 83.333333%;
+    max-width: 83.333333%;
+}
+
+.gd-11 {
+    -ms-flex: 0 0 91.666667%;
+    flex: 0 0 91.666667%;
+    max-width: 91.666667%;
+}
+
+.gd-12 {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+
+
+.justify-start {
+    justify-content: flex-start;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.justify-around {
+    justify-content: space-around;
+}
+
+.align-start {
+    align-items: flex-start;
+}
+
+
+.align-center {
+    align-items: center;
+}
+
+.align-end {
+    align-items: flex-end;
+}
 
ae387a1
client/resources/css/layout.css (added)
+++ client/resources/css/layout.css
@@ -0,0 +1,0 @@
 
ae387a1
client/resources/css/reset.css (added)
+++ client/resources/css/reset.css
@@ -0,0 +1,166 @@
+@charset "utf-8";
+
+:root {
+    --blue: #007bff;
+    --skyblue: #c9e3ff;
+    --indigo: #6610f2;
+    --purple: #6f42c1;
+    --pink: #e83e8c;
+    --red: #dc3545;
+    --orange: #fd7e14;
+    --yellow: #ffc107;
+    --green: #28a745;
+    --teal: #20c997;
+    --cyan: #17a2b8;
+    --white: #fff;
+    --gray: #6c757d;
+    --gray-dark: #343a40;
+    --primary: #007bff;
+    --secondary: #6c757d;
+    --success: #28a745;
+    --info: #17a2b8;
+    --main:#388d6e;
+    --warning: #ffc107;
+    --danger: #dc3545;
+    --light: #f8f9fa;
+    --dark: #343a40;
+    --light:#eeeeee;
+}
+
+/* box-sizing 규칙을 명시합니다. */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+/* 폰트 크기의 팽창을 방지합니다. */
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+    font-size: 10px;
+}
+
+/* 기본 여백을 제거하여 작성된 CSS를 더 잘 제어할 수 있습니다. */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+    margin-block-end: 0;
+}
+
+/* list를 role값으로 갖는 ul, ol 요소의 기본 목록 스타일을 제거합니다. */
+ul[role='list'],
+ol[role='list'] {
+    list-style: none;
+}
+
+/* 핵심 body의 기본값을 설정합니다. */
+body,#root {
+    min-height: 100vh;
+    line-height: 1.5;
+    background-color: var(--main);
+}
+
+/* 제목 요소와 상호작용하는 요소에 대해 line-height를 더 짧게 설정합니다. */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+    line-height: 1.1;
+}
+
+/* 제목에 대한 text-wrap을 balance로 설정합니다. */
+h1,
+h2,
+h3,
+h4 {
+    text-wrap: balance;
+}
+
+/* 클래스가 없는 기본 a 태그 요소는 기본 스타일을 가져옵니다. */
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+    color: currentColor;
+}
+
+/* 이미지 관련 작업을 더 쉽게 합니다. */
+img,
+picture {
+    max-width: 100%;
+    display: block;
+}
+
+/* input 및 button 항목들이 글꼴을 상속하도록 합니다. */
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+button{
+    background: inherit ; 
+    border:none; 
+    box-shadow:none; 
+    border-radius:0; 
+    padding:0; 
+    overflow:visible; 
+    cursor:pointer
+}
+
+/* 행 속성이 없는 textarea가 너무 작지 않도록 합니다. */
+textarea:not([rows]) {
+    min-height: 10em;
+}
+
+/* 고정된 모든 항목에는 여분의 스크롤 여백이 있어야 합니다. */
+:target {
+    scroll-margin-block: 5ex;
+}
+
+table{
+    min-width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+table th,
+table td{
+    font-size: 1.3rem;
+}
+
+select,input{
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+
+/* 스크롤바 디자인 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #ededed;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: #fff;
+    border-radius: 10px;
+}(No newline at end of file)
 
ae387a1
client/resources/css/responsive.css (added)
+++ client/resources/css/responsive.css
@@ -0,0 +1,0 @@
 
ae387a1
client/resources/css/style.css (added)
+++ client/resources/css/style.css
@@ -0,0 +1,0 @@
 
ae387a1
client/resources/img/common/common/history_top_bg.png (Binary) (added)
+++ client/resources/img/common/common/history_top_bg.png
Binary file is not shown
 
ae387a1
client/resources/img/common/history_top_bg.png (Binary) (added)
+++ client/resources/img/common/history_top_bg.png
Binary file is not shown
 
ae387a1
client/views/index.html (added)
+++ client/views/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <meta name="description" content="Node Vue Web">
+        <link rel="stylesheet" href="/client/resources/css/style.css">
+        <title>Component</title>
+    </head>
+
+    <body>
+        <div id="root"></div>
+        <script src="/client/build/bundle.js"></script>
+    </body>
+</html>(No newline at end of file)
 
ae387a1
client/views/index.js (added)
+++ client/views/index.js
@@ -0,0 +1,12 @@
+/**
+ * @author : 하석형
+ * @since : 2023.08.24
+ * @dscription : Vue를 활용한 Client단 구현의 시작점(Index) Component 입니다.
+ */
+import { createApp } from 'vue';
+
+import AppRouter from './pages/AppRouter.js';
+import App from './pages/App.vue';
+
+// const vue = createApp(App).mount('#root');
+const vue = createApp(App).use(AppRouter).mount('#root');(No newline at end of file)
 
ae387a1
client/views/pages/App.vue (added)
+++ client/views/pages/App.vue
@@ -0,0 +1,39 @@
+<template>
+   <div class="wrapper">
+      <Header></Header>
+      <div class="main-warp">
+         <router-view/>
+      </div>
+   </div>
+</template>
+
+<script>
+import Header from '../pages/layout/Header.vue';
+
+
+const App = {
+   data: () => {
+      return {
+      }
+   },
+   methods: {
+
+   },
+   watch: {
+
+   },
+   computed: {
+
+   },
+   components: {
+      'Header': Header
+
+   },
+   mounted: () => {
+      console.log('Vue mounted');
+   }
+}
+
+export default App;
+</script>
+
 
ae387a1
client/views/pages/AppRouter.js (added)
+++ client/views/pages/AppRouter.js
@@ -0,0 +1,21 @@
+import { createWebHistory, createRouter } from "vue-router";
+
+// import Main from "../pages/main/Main.vue";
+import Main from "../pages/main/Main.vue";
+import Button from "../pages/main/Main.vue";
+
+
+const routes = [
+  /* 메인화면 */
+  { path: "/", name: "/", component: Main },
+  { path: "/", name: "/Button.page", component: Button },
+
+
+];
+
+const AppRouter = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default AppRouter;
 
ae387a1
client/views/pages/component/Button.vue (added)
+++ client/views/pages/component/Button.vue
@@ -0,0 +1,0 @@
 
ae387a1
client/views/pages/component/Pagination.vue (added)
+++ client/views/pages/component/Pagination.vue
@@ -0,0 +1,0 @@
 
ae387a1
client/views/pages/component/Searchbar.vue (added)
+++ client/views/pages/component/Searchbar.vue
@@ -0,0 +1,0 @@
 
ae387a1
client/views/pages/component/Table.vue (added)
+++ client/views/pages/component/Table.vue
@@ -0,0 +1,0 @@
 
ae387a1
client/views/pages/layout/Header.vue (added)
+++ client/views/pages/layout/Header.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>Hader.vue</div>
+
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+        }
+    },
+    methods: {
+
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    mounted() {
+    }
+}
+</script>
+<style>
+
+</style>(No newline at end of file)
 
ae387a1
client/views/pages/layout/Menu.vue (added)
+++ client/views/pages/layout/Menu.vue
@@ -0,0 +1,0 @@
 
ae387a1
client/views/pages/main/Main.vue (added)
+++ client/views/pages/main/Main.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>Main.vue</div>
+
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+        }
+    },
+    methods: {
+
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    mounted() {
+        console.log('Main mounted');
+    }
+}
+</script>
+<style>
+*{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+div{
+    width:100% ;
+    height: 100%;
+    border: 1px solid red;
+}
+</style>(No newline at end of file)
 
ae387a1
webpack.config.js (added)
+++ webpack.config.js
@@ -0,0 +1,42 @@
+const { VueLoaderPlugin } = require("vue-loader");
+
+const {PROJECT_NAME, BASE_DIR, SERVICE_STATUS} = require('./Global');
+
+module.exports = {
+  name: PROJECT_NAME,
+  mode: SERVICE_STATUS,
+  devtool: 'eval',
+
+  entry: {
+    app: [`${BASE_DIR}/client/views/index.js`]
+  },
+
+  module: {
+    rules: [{
+      test: /\.vue?$/,
+      loader: 'vue-loader',
+    }, {
+      test: /\.(js|jsx)?$/,
+      loader: 'babel-loader',
+    }, {
+      test: /\.css$/,
+      use: ['vue-style-loader', 'css-loader']
+    }, {
+      test: /\.(jpe?g|png|gif|svg|ttf|eot|woff|woff2)$/i,
+      use: [{
+        loader:'url-loader',
+        options:{
+          limit:8192,
+          fallback:require.resolve('file-loader')
+        }
+      }]
+    }],
+  },
+
+  plugins: [new VueLoaderPlugin()],
+
+  output: {
+    path: `${BASE_DIR}/client/build`,	// __dirname: webpack.config.js 파일이 위치한 경로
+    filename: 'bundle.js'
+  },
+}(No newline at end of file)
Add a comment
List