전체수정

front-end/public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>테스트 123</title>
+    <title>뉴로모픽</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>

front-end/src/views/Home.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="user">
             <img src="../assets/img/icon_user.png" alt="" id="icon_user">
-            <h1>사용자페이sdss지</h1>
+            <h1>사용자페이지</h1>
             <p>User page</p>
             <button type="button" @click="$router.push('user')">시작</button>
         </div> 

front-end/src/views/admin/Login.vue

 <template>
-  <section class="login-form">
-    <h1>LOGIN</h1>
+  <div class="container">
     <form action="">
-      <div class="int-area">
-        <input type="text" name="id" id="id"
-        autocomplete="off" required>
-        <label for="id">user name</label>
+      <h1>LOGIN</h1>
+      <div class="form-group">
+        <label for="">ID</label>
+        <input type="text" class="form-control" required>
       </div>
-      <div class="int-area">
-        <input type="password" name="pw" id="pw"
-        autocomplete="off" required>
-        <label for="pw">password</label>
+      <div class="form-group">
+        <label for="">PASSWORD</label>
+        <input type="password" class="form-control" required>
       </div>
+      <input type="submit" class="btn" value="LOGIN">
     </form>
-  </section>
+  </div>
 </template>
 
 <script>
@@ -22,5 +21,62 @@ export default {
 }
 </script>
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
+  *{
+    margin: 0; 
+    padding: 0; 
+    box-sizing: border-box;
+   }
+
+  
+  .container{
+    margin: auto;
+    width: 500px;
+    max-width: 90%;
+  }
+
+  .container form{
+    width: 100%;
+    height: 100%;
+    padding:20px;
+    background: white;
+    border-radius: 4px;
+    box-shadow: 0 8px 16px rgba(0,0,0,.3);
+  }
+
+  .container form h1{
+    text-align: center;
+    margin-bottom: 24px;
+    color: #222;
+  }
+
+  .container form .form-control{
+    width:100%;
+    height: 40px;
+    background: white;
+    border-radius: 4px;
+    border:1px solid silver;
+    margin: 10px 0 18px 0;
+    padding: 0 10px;
+  }
+
+  .container form .btn{
+    margin-left: 50%;
+    transform: translateX(-50%);
+    width: 120px;
+    height: 34px;
+    border:none;
+    outline: none;
+    background: skyblue;
+    cursor: pointer;
+    font-size: 16px;
+    text-transform: uppercase;
+    color:white;
+    border-radius: 4px;
+    transition: .3s;
+  }
 
+  .container form .btn:hover{
+    opacity: .7;
+  }
 </style>
\ No newline at end of file

front-end/src/views/admin/main/Create.vue

 <template>
     <div>
-        프로젝트 생성
+        프로젝트 생성xcxc
     </div>
 </template>
 

front-end/src/views/admin/main/List.vue

 <template>
-      <div class="menu">
-        <input id="tab1" type="radio" name="tabs" checked>
-        <label for="tab1">생성</label>
 
-        <input id="tab2" type="radio" name="tabs" >
-        <label for="tab2">진행</label>
-
-        <input id="tab3" type="radio" name="tabs" >
-        <label for="tab3">대기</label>
-
-        <input id="tab4" type="radio" name="tabs" >
-        <label for="tab4">완료</label>
-    </div>
 </template>
 
 <script>
@@ -21,43 +9,7 @@ export default {
 </script>
 
 <style>
-.menu{
-    display: flex;
-    justify-content: space-around;
-    padding: 50px;
-    margin: 0 auto;
-    background-color: #fff;
-
-}
-
-
-
-input{
-    display: none;
-}
 
-label{
-    display: inline-block;
-    width: 420px;
-    margin: 0 0 -1px;
-    padding: 15px 25px;
-    font-weight: 600;
-    text-align: center;
-    color: #bbb;
-    border: 1px solid transparent;
-}
-
-label:hover{
-    color:#2e9cdf;
-
-
-}
-input:checked+label{
-    color:#555;
-    
-    border-top:1px solid #fff;
-    border-bottom: 4px solid #2e9cdf;
-}
 
 
 </style>
\ No newline at end of file