yjryu / KERIS star
kimgkdud898 2023-11-06
231106김하영
@068b1492f75a48ce70dd026ecdd6b60018ab6d8c
727aa22
068b149
client/resources/css/Main.css
--- client/resources/css/Main.css
+++ client/resources/css/Main.css
@@ -1626,3 +1626,61 @@
 
 .intro-img img:nth-child(3) {
 
   transform: translateY(-9.7rem);
 
 }
 
+/* wg커뮤니티 전문가 협의체 페이지*/
 
+
 
+.wg-logo {
 
+  width: 100%;
 
+  padding: 6rem 2rem 2rem 2rem;
 
+}
 
+.wg-logo h1 {
 
+  font-size: 4rem;
 
+  font-family: SBaggroM;
 
+  font-weight: 500;
 
+  color: #0e0077;
 
+}
 
+.wg-logo img {
 
+  width: 10rem;
 
+}
 
+.wg-wrap {
 
+  width: 100%;
 
+  padding: 2rem;
 
+}
 
+.wg-wrap h1 {
 
+  font-size: 1.7rem;
 
+  margin-bottom: 2rem;
 
+  color: #333;
 
+}
 
+.wg-wrap-search {
 
+  width: 100%;
 
+}
 
+.wg-wrap-search p {
 
+  font-size: 1.5rem;
 
+}
 
+.wg-table {
 
+  width: 100%;
 
+}
 
+.wg-table tr th {
 
+  background-color: #007aff;
 
+  color: white;
 
+  padding: 1rem;
 
+}
 
+.wg-search-grid {
 
+  width: 100%;
 
+  display: grid;
 
+  flex-wrap: nowrap;
 
+}
 
+.wg-search-bos {
 
+  width: 100%;
 
+  padding: 2rem;
 
+  justify-content: center;
 
+  margin: 0 auto;
 
+  display: grid;
 
+  grid-template-columns: 3fr 10%;
 
+}
 
+.wg-search-grid label {
 
+  font-size: 2rem;
 
+  flex: 10 0;
 
+}
 
+.wg-search-grid input {
 
+  height: 20px;
 
+}
 
068b149
client/resources/jpg/wgcon.png (Binary) (added)
+++ client/resources/jpg/wgcon.png
Binary file is not shown
727aa22
068b149
client/views/layout/Menu.vue
--- client/views/layout/Menu.vue
+++ client/views/layout/Menu.vue
@@ -79,7 +79,7 @@
 
                     subMenu: [
 
                         { text: "공지사항", link: "/Notice.page" },
 
                         { text: "홍보/뉴스", link: "/News.page" },
 
-                        { text: "전문가 협의체", link: "" }
 
+                        { text: "전문가 협의체", link: "/Wgcommunity.page" }
 
                     ]
 
                 },
 
                 {
727aa22
068b149
client/views/pages/AppRouter.js
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
@@ -13,6 +13,7 @@
 
 import TechnologyOne from "./user/Data/TechnologyOne.vue";
 
 import Notice from "../pages/user/community/Notice.vue";
 
 import News from "../pages/user/community/News.vue";
 
+import Wgcommunity from "../pages/user/community/Wgcommunity.vue";
 
 import NoticeOne from "./user/community/NoticeOne.vue";
 
 import Info from "../pages/user/mypage/Info.vue";
 
 import Infosub from "../pages/user/mypage/Infosub.vue";
@@ -53,6 +54,7 @@
 
   { path: "/News.page", name: "News", component: News },
 
   { path: "/DataDtali.page", name: "DataDtali", component: DataDtali },
 
   { path: "/NoticeOne.page", name: "NoticeOne", component: NoticeOne },
 
+  { path: "/Wgcommunity.page", name: "Wgcommunity", component: Wgcommunity },
 
   {
 
     path: "/MatchingOne.page",
 
     name: "MatchingOne",
 
068b149
client/views/pages/user/community/Wgcommunity.vue (added)
+++ client/views/pages/user/community/Wgcommunity.vue
@@ -0,0 +1,129 @@
+<template>
+    <div class="w1400">
+        <section class="wg-logo">
+            <img src="../../../../resources/jpg/wgcon.png" alt="">
+
+            <h1>전문가 협의체</h1>
+        </section>
+        <section class="wg-wrap">
+            <div class="wg-wrap-h1">
+                <h1>개발(기술)영역별 전문가 협의체(WG)에서 AI디지털교과서 개발지원을 위한 연구에 참고한 문서를 공유합니다.</h1>
+            </div>
+            <div class="wg-wrap-search">
+                <div>
+                    <p>※찾고자 하시는 문서의 제목을 입력하시거나 그룹또는 작성자를 입력하시면 보실 수 있습니다.</p>
+                    <div class="wg-search-bos">
+                        <div class="wg-search-grid">
+                            <label for="groupSearch">워킹그룹: </label>
+                            <input id="groupSearch" v-model="search.group" type="text">
+                            <label for="titleSearch">제목: </label>
+                            <input id="titleSearch" v-model="search.title" type="text">
+                            <label for="authorSearch">작성자: </label>
+                            <input id="authorSearch" v-model="search.author" type="text">
+                            <label for="dateSearch">날짜: </label>
+                            <input id="dateSearch" v-model="search.date" type="date">
+                        </div>
+                        <button @click="performSearch">검색</button>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <table class="wg-table">
+                    <thead>
+                        <tr>
+                            <th>NO</th>
+                            <th>워킹그룹</th>
+                            <th>제목</th>
+                            <th>작성자</th>
+                            <th>날짜</th>
+                            <th>조회수</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(item, index) in items" :key="index" @click="goToDetail(item)">
+                            <td>{{ index + 1 }}</td>
+                            <td>{{ item.group }}</td>
+                            <td>{{ item.title }}</td>
+                            <td>{{ item.author }}</td>
+                            <td>{{ item.date }}</td>
+                            <td>{{ item.views }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </section>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    id: 1,
+                    group: '(WG1)클라우드 보안',
+                    title: '(reference)현황보고서',
+                    author: '조은형',
+                    date: '2023-09-12',
+                    views: 45464
+                },
+                {
+                    id: 1,
+                    group: '(WG1)클라우드 보안',
+                    title: '(reference)현황보고서',
+                    author: '조은형',
+                    date: '2023-09-12',
+                    views: 45464
+                },
+                {
+                    id: 1,
+                    group: '(WG1)클라우드 보안',
+                    title: '(reference)현황보고서',
+                    author: '조은형',
+                    date: '2023-09-12',
+                    views: 45464
+                },
+                {
+                    id: 1,
+                    group: '(WG1)클라우드 보안',
+                    title: '(reference)현황보고서',
+                    author: '조은형',
+                    date: '2023-09-12',
+                    views: 45464
+                },
+                {
+                    id: 1,
+                    group: '(WG1)클라우드 보안',
+                    title: '(reference)현황보고서',
+                    author: '조은형',
+                    date: '2023-09-12',
+                    views: 45464
+                },
+            ],
+            search: {
+                group: '',
+                title: '',
+                author: '',
+                date: ''
+            },
+            filteredItems: []
+        }
+    },
+    created() {
+        this.filteredItems = this.items;
+    },
+    methods: {
+        goToDetail(item) {
+            this.$router.push({ name: 'DetailPage', params: { id: item.id } });
+        },
+        performSearch() {
+            this.filteredItems = this.items.filter(item =>
+                item.group.includes(this.search.group) &&
+                item.title.includes(this.search.title) &&
+                item.author.includes(this.search.author) &&
+                item.date.includes(this.search.date)
+            );
+        }
+    }
+}
+</script>(No newline at end of file)
727aa22
068b149
client/views/pages/user/join/Join.vue
--- client/views/pages/user/join/Join.vue
+++ client/views/pages/user/join/Join.vue
@@ -7,14 +7,21 @@
 
             <div class="join-b-button">
 
                 <input type="radio" id="company" v-model="selectedMembership" value="company">
 
                 <label for="company" class="radio-t t1"
 
-                    :style="{ backgroundColor: selectedMembership === 'company' ? '#86868644' : '#e2ecfc' }">기관회원
 
-                    <img src="../../../../resources/jpg/join-bt2.png" alt=""></label>
 
+                    :style="{ backgroundColor: selectedMembership === 'company' ? '#e2ecfc' : '#86868644' }">
 
+                    기관회원
 
+                    <img src="../../../../resources/jpg/join-bt2.png" alt="">
 
+                </label>
 
+
 
                 <input type="radio" id="two" v-model="selectedMembership" value="two">
 
                 <label for="two" class="radio-t t2"
 
-                    :style="{ backgroundColor: selectedMembership === 'common' ? '#86868644' : '#e6fff1' }">일반회원
 
-                    <img src="../../../../resources/jpg/join-bt.png" alt=""></label>
 
+                    :style="{ backgroundColor: selectedMembership === 'two' ? '#e6fff1' : '#86868644' }">
 
+                    일반회원
 
+                    <img src="../../../../resources/jpg/join-bt.png" alt="">
 
+
 
+                </label>
 
             </div>
 
         </section>
 
+
 
         <div v-if="selectedMembership === 'company'">
 
             <div class="login-info2">
 
                 <div>
@@ -24,12 +31,22 @@
 
                 <div class="login-info-grid">
 
                     <div class="login-info-grid-1">
 
                         <section class="join-sec0">
 
-                            <div>
 
-                                <p id="logoImg" ref="logoImg">logo</p>
 
-                                <img id="logoImg" ref="logoImg" style="height:250px;" />
 
+                            <div class="uploaded-box">
 
 
-                                <input type="file" accept="image/*" name="logoImg" id="logoImg" style="display: none;" />
 
-                                <label for="logoImg">파일선택</label>
 
+                                <div class="uploaded-box-radius">
 
+                                    <p>LOGO</p>
 
+                                    <img v-if="selectedImage" :src="selectedImage" alt="Selected Image">
 
+                                </div>
 
+                                <div class="btn-upload-join" @click="openFileInput">
 
+                                    우리회사 로고 업로드하기
 
+                                </div>
 
+                                <input type="file" name="file" id="file" ref="fileInput" style="display: none"
 
+                                    @change="fileUpload">
 
+                                <div v-for="(file, idx) in fileList" :key="idx">
 
+                                    <div>
 
+                                        <button @click="fileRemove(idx)">삭제</button>
 
+                                    </div>
 
+                                </div>
 
                             </div>
 
                         </section>
 
                     </div>
@@ -116,9 +133,10 @@
 
                     </div>
 
                     <div class="join-sub-input">
 
                         <input type="text" v-model="pwCheck" @change="passwordSyncCheck()" placeholder="비밀번호 확인">
 
+                        <div v-if="this.passwordCheckFlag" style="color:chartreuse">비밀번호 일치</div>
 
+                        <div v-else class="passwordError">비밀번호 불일치</div>
 
                     </div>
 
-                    <div v-if="this.passwordCheckFlag" style="color:chartreuse">비밀번호 일치</div>
 
-                    <div v-else style="color:red">비밀번호 불일치</div>
 
+
 
                 </section>
 
                 <section class="join-sec5 joinsub">
 
                     <div class="join-sec-sub">
@@ -163,7 +181,7 @@
 
                 </section>
 
             </div>
 
         </div>
 
-        <div v-else>
 
+        <div v-if="selectedMembership === 'two'">
 
             <div class="login-info">
 
                 <div>
 
                     <h3>회원정보</h3>
@@ -206,9 +224,10 @@
 
                     </div>
 
                     <div class="join-sub-input">
 
                         <input type="text" v-model="pwCheck" @change="passwordSyncCheck()" placeholder="비밀번호 확인">
 
+                        <div v-if="this.passwordCheckFlag" style="color:chartreuse">비밀번호 일치</div>
 
+                        <div v-else class="passwordError">비밀번호 불일치</div>
 
                     </div>
 
-                    <div v-if="this.passwordCheckFlag" style="color:chartreuse">비밀번호 일치</div>
 
-                    <div v-else style="color:red">비밀번호 불일치</div>
 
+
 
                 </section>
 
                 <section class="join-sec5 joinsub">
 
                     <div class="join-sec-sub">
@@ -299,6 +318,7 @@
 
 export default {
 
     data() {
 
         return {
 
+            fileList: [],
 
             company: {
 
                 company_id: null,
 
                 company_nm: null,
@@ -330,9 +350,11 @@
 
             select_email_dns: null,
 
             selectedMembership: 'company',
 
             isVisible: false,
 
+            selectedImage: null,
 
         }
 
     },
 
     methods: {
 
+
 
         //비밀번호 매칭 확인
 
         passwordSyncCheck: function () {
 
             console.log("this.user.user_pw : ", this.user.user_pw);
@@ -340,6 +362,27 @@
 
 
             if (this.user.user_pw != this.pwCheck) this.passwordCheckFlag = false;
 
             else this.passwordCheckFlag = true;
 
+        },
 
+        openFileInput() {
 
+            this.$refs.fileInput.click();
 
+        },
 
+        fileUpload(event) {
 
+            const file = event.target.files[0]; // 선택된 파일
 
+            if (file) {
 
+                const reader = new FileReader();
 
+                reader.onload = (e) => {
 
+                    this.selectedImage = e.target.result; // 이미지 데이터를 selectedImage에 저장
 
+                };
 
+                reader.readAsDataURL(file); // 파일을 읽어 데이터 URL로 변환
 
+            }
 
+        },
 
+        fileRemove(idx) {
 
+
 
+            this.fileList.splice(idx, 1);
 
+
 
+            if (this.selectedImage === this.fileList[idx]) {
 
+                this.selectedImage = null;
 
+            }
 
         },
 
         //company ID 중복 검사
 
         companyIdCheck: function () {
@@ -692,7 +735,7 @@
 
 }
 
 
 .join-b-button button:nth-child(1).background {
 
-    background-color: #000000;
 
+    background-color: #c91b1b;
 
 }
@@ -725,6 +768,7 @@
 
 }
 
 
 .t1 {
 
+    width: 100%;
 
     padding: 6rem 0;
 
     color: #014099;
 
     background-color: #e2ecfc;
@@ -744,6 +788,8 @@
 
 }
 
 
 .t2 {
 
+    width: 100%;
 
+
 
     padding: 6rem 0;
 
     color: #0e5e2e;
 
     background-color: #e6fff1;
@@ -761,7 +807,7 @@
 
 
     /* float: left; */
 
     color: #3f87f7;
 
-    padding: 1rem 1rem 1rem 5rem;
 
+    padding: 1rem 1rem 1rem 2rem;
 
 }
 
 
 section div span span {
@@ -794,10 +840,48 @@
 
 
 }
 
 
+.uploaded-box {
 
+
 
+    width: 200px;
 
+    height: 200px;
 
+}
 
+
 
+
 
+
 
+.uploaded-image {
 
+    width: 100%;
 
+    /* height: 120px;/ */
 
+
 
+}
 
+
 
+.uploaded-image {
 
+    padding: 0.5rem;
 
+}
 
+
 
+.uploaded-image-text {
 
+    padding: 0.5rem;
 
+}
 
+
 
+.btn-upload-join {
 
+    width: 100%;
 
+    background-color: #3f87f7;
 
+    font-size: 1.5rem;
 
+    padding: 1rem;
 
+    margin-top: 2rem;
 
+    border-radius: 0.5rem;
 
+    text-align: center;
 
+    color: white;
 
+}
 
 
 /* -------------------------------------------------------------------------------- */
 
 
-
 
+.passwordError {
 
+    color: red;
 
+    width: 100%;
 
+    /* border: 1px solid red; */
 
+    text-align: left;
 
+    padding: 0.5rem;
 
+}
@@ -830,7 +914,7 @@
 
 .joinsub0 {
 
     padding: 1rem;
 
     display: grid;
 
-    grid-template-columns: 200px 2fr 1fr;
 
+    grid-template-columns: 160px 2fr 1fr;
 
     gap: 1rem;
 
 }
@@ -854,14 +938,14 @@
 
 .joinsub {
 
     padding: 1rem;
 
     display: grid;
 
-    grid-template-columns: 200px 2fr;
 
+    grid-template-columns: 160px 2fr;
 
     gap: 1rem;
 
 }
 
 
 .join-sec6 {
 
     padding: 1rem;
 
     display: grid;
 
-    grid-template-columns: 200px 1fr;
 
+    grid-template-columns: 160px 1fr;
 
     gap: 1rem;
 
 }
@@ -874,27 +958,63 @@
 
 
 .login-info-grid {
 
     display: grid;
 
-    grid-template-columns: 100px 1fr;
 
+    grid-template-columns: 180px 1fr;
 
 
 }
 
 
 .join-sec0 {
 
     display: grid;
 
-    padding: 2rem;
 
-    grid-row: 1 / span 3;
 
+
 
+    /* padding: 2rem; */
 
+    width: 100%;
 
+    height: 100%;
 
 
 }
 
 
+.uploaded-box {
 
+    position: relative;
 
+    top: 0;
 
+    left: 0;
 
+    width: 100%;
 
+    height: 40%;
 
+}
 
+
 
+.uploaded-box-radius {
 
+    width: 75%;
 
+    height: 60%;
 
+    background-color: #838383;
 
+    border-radius: 50%;
 
+    overflow: hidden;
 
+    margin-bottom: 2rem;
 
+    margin: 0 auto;
 
+    position: relative;
 
+    top: 0;
 
+    left: 0;
 
+
 
+}
 
+
 
+
 
+.uploaded-box-radius img {
 
+    width: 100%;
 
+    height: 100%;
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0;
 
+}
 
+
 
 .join-sec0 div p {
 
-    width: 100px;
 
-    height: 100px;
 
-    line-height: 100px;
 
+    width: 100%;
 
+    height: 100%;
 
+    top: 0;
 
+    left: 0;
 
+    position: absolute;
 
+    line-height: 145px;
 
     border-radius: 50%;
 
     text-align: center;
 
-    color: #333;
 
+    color: #ffffff;
 
     font-size: 2.5rem;
 
     font-family: "Pretendard-Regular";
 
-    background-color: #b5b5b5;
 
+    /* background-color: #b5b5b5; */
 
     /* border: 1px solid red; */
 
     box-shadow: 2px 2px 5px #33333328;
 
 }
@@ -902,7 +1022,7 @@
 
 .joinsub0-1 {
 
     padding: 1rem;
 
     display: grid;
 
-    grid-template-columns: 209px 2fr;
 
+    grid-template-columns: 170px 2fr;
 
 
 }
Add a comment
List