QA를 위한 배포 (#90)

* feat: 모바일 햄버거 추가 * design: 문구 수정 * feat: 어드민 페디지 분리 * feat: 로그인하지 않은 사용자의 게시글, 댓글 제한 * feat: 인스타 링크 추가 * design: 탭 영역 디자인 * feat: 어드민 진입 시 자동으로 탭 선택 * design: 정렬 수정 * feat: 질문 추가
YonseiGolf · Nov 17, 2023 · 86a696b · 86a696b
1 parent 02f0d5c
commit 86a696b
Show file tree

Hide file tree

Showing 13 changed files with 486 additions and 81 deletions.
diff --git a/src/components/admin/AdminPage.vue b/src/components/admin/AdminPage.vue
@@ -0,0 +1,61 @@
+<template>
+  <h1>어드민 페이지</h1>
+  <div class="tab-container">
+    <li>
+      <router-link to="/admin/users">회원 관리</router-link>
+    </li>
+    <li>
+      <router-link to="/admin/form">지원서 관리</router-link>
+    </li>
+    <li>
+      <router-link to="/admin/apply-alarm">지원 대기 명단</router-link>
+    </li>
+    <li>
+      <router-link to="/admin/apply/form">지원서 양식</router-link>
+    </li>
+  </div>
+
+  <div class="router-container">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+
+.tab-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 1vh;
+  list-style: none;
+  margin: 0;
+}
+
+li {
+  margin-right: 1vh;
+  margin-bottom: 5vh;
+}
+
+.router-link {
+  display: block;
+  padding: 10px 20px;
+  color: #333;
+  text-decoration: none;
+  transition: background-color 0.3s, color 0.3s;
+  border-radius: 5px;
+  background-color: #f0f0f0;
+}
+
+.router-link-active, .router-link-exact-active {
+  background-color: gray;
+  color: #fff;
+  border-radius: 5px;
+  padding: 1vh;
+}
+
+</style>
diff --git a/src/components/application/ApplicationForm.vue b/src/components/application/ApplicationForm.vue
@@ -222,6 +222,11 @@
   <div>* 지원서 제출 전 이메일과 전화번호를 다시 한번 확인해주세요.</div>
   <div>* 결과는 이메일로 전송해드립니다.</div>
   <button class="apply-button" @click="submitApplication" type="submit">지원서 제출</button>
+
+  <div v-if="isLoading" class="loading-container">
+    <img src="https://yg-img-storage.s3.ap-northeast-2.amazonaws.com/image/loading.a11988e6.gif" alt="Loading">
+  </div>
+
 </template>
 
 <script>
@@ -256,7 +261,8 @@ export default {
       golfSkillInvalid: false,
       golfMemoryInvalid: false,
       otherClubInvalid: false,
-      golfSwingInvalid: false
+      golfSwingInvalid: false,
+      isLoading: false,
     }
   },
 
@@ -265,6 +271,7 @@ export default {
       if (this.isFormValid) {
         if (confirm(`지원서를 제출하시겠습니까? \n이메일로 결과가 발송되니 이메일을 다시 한번 확인해주세요 \n ${this.applications.email}`)) {
           try {
+            this.isLoading= true;
             const response =
                 await axios.post(`${process.env.VUE_APP_API_URL}/application`, {
                   name: this.applications.name,
@@ -289,10 +296,12 @@ export default {
             // 응답 처리
             if (response.status === 200) {
               alert(`${this.applications.email}로 지원서 접수 메일을 전송해드릴 예정입니다. 10분 내로 접수 메일을 받지 못했다면 인스타로 문의 부탁드립니다.`);
+              this.isLoading = false;
               this.$router.push('/');
             }
           } catch (error) {
             alert('지원서는 접수되었으나, 이메일 발송에 실패하였습니다. \n인스타를 통해 지원 문의 바랍니다.')
+            this.isLoading = false;
             this.$router.push('/');
           }
         }
@@ -646,5 +655,22 @@ button:hover {
   width: 30%;
 }
 
+.loading-container {
+  position: fixed; /* 화면에 고정 */
+  top: 0;
+  left: 0;
+  width: 100%; /* 화면 전체 너비 */
+  height: 100%; /* 화면 전체 높이 */
+  background-color: rgba(0, 0, 0, 0.5); /* 반투명 회색 배경 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000; /* 다른 요소들 위에 표시 */
+}
+
+.loading-image {
+  width: 100px; /* 로딩 이미지 크기 조절 */
+  height: 100px;
+}
 
 </style>
diff --git a/src/components/application/admin/ApplyAlarm.vue b/src/components/application/admin/ApplyAlarm.vue
@@ -11,7 +11,7 @@
     <table>
       <thead>
       <tr>
-        <th>이메일 알람</th>
+        <th>이메일 명단</th>
       </tr>
       </thead>
       <tbody>
@@ -78,6 +78,27 @@ export default {
   margin: 0 auto;
 }
 
+h3{
+  margin-bottom: 20px;
+}
+
+table{
+  margin: 0 auto;
+  border-collapse: collapse;
+}
+
+th{
+  padding: 10px;
+}
+
+td {
+  border-top: 1px solid #ccc; // 상단 경계선
+  border-bottom: 1px solid #ccc; // 하단 경계선
+  padding: 10px; // 셀 패딩
+  text-align: center; // 텍스트 정렬
+}
+
+
 .loading-container {
   position: fixed; /* 화면에 고정 */
   top: 0;

diff --git a/src/components/applyinfo/ApplyPeriod.vue b/src/components/applyinfo/ApplyPeriod.vue
@@ -1,6 +1,6 @@
 <template>
   <h1>
-    모집 일정
+    24-1 모집 일정
   </h1>
   <div class="container">
     <div class="text-box">

diff --git a/src/components/board/BoardDetail.vue b/src/components/board/BoardDetail.vue
@@ -29,8 +29,8 @@
 
     <div v-if="editing" class="edit-form">
       <textarea @input="validContent" v-model="editedContent" class="edit-content"></textarea>
-      <button @click="savePost" :disabled="!isFormValid">저장</button>
-      <button @click="cancelEdit">취소</button>
+      <button class="save-cancle-edit" @click="savePost" :disabled="!isFormValid">저장</button>
+      <button class="save-cancle-edit" @click="cancelEdit">취소</button>
     </div>
     <div v-else>
       <p v-if="boardData" class="detail-content" v-html="formatContent(boardData.content)"></p>
@@ -113,7 +113,7 @@ export default {
           })
           .catch(error => {
             console.error(error);
-            alert('댓글을 등록하는 데 실패했습니다.');
+            alert('로그인 정보가 유효하지 않습니다. \n 다시 로그인해주세요.');
           });
     },
 
@@ -159,7 +159,7 @@ export default {
         axios.delete(`${process.env.VUE_APP_API_URL}/boards/${this.boardData.id}`)
             .then(() => {
               alert('게시글이 삭제되었습니다.');
-              this.$router.push('/boards');
+              this.$router.push('/board');
 
             })
             .catch(error => {
@@ -282,6 +282,7 @@ export default {
 
 .replies-title {
   font-size: 15px;
+  margin-top: 20px;
   margin-bottom: 20px;
 }
 
@@ -378,6 +379,23 @@ textarea {
   border: none;
   background-color: white;
   cursor: pointer;
+  padding: 0.3vh;
+  margin-bottom: 20px;
+
+  &:hover {
+    color: black;
+  }
+}
+
+.save-cancle-edit{
+  font-size: 15px;
+  font-color: gray;
+  border: none;
+  margin-right: 10px;
+  background-color: white;
+  cursor: pointer;
+  padding: 0.3vh;
+  margin-bottom: 20px;
 
   &:hover {
     color: black;

diff --git a/src/components/board/BoardHome.vue b/src/components/board/BoardHome.vue
@@ -116,6 +116,10 @@ export default {
 
 
 <style lang="scss" scoped>
+h1{
+  margin-top: 20px
+}
+
 div {
   display: flex;
   justify-content: center; /* 가로 중앙 정렬 */
@@ -220,13 +224,6 @@ thead {
   color: #333;
 }
 
-/* 탭 컨텐츠 영역 스타일 */
-.tab-content {
-  border: 1px solid #ccc;
-  border-top: none;
-  padding: 1rem;
-}
-
 .createBoardContainer {
   width: 90%;
   display: flex;