From 9a06147eafff9765e78ede35b33a935c1447567c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=84=EB=8F=99=ED=98=84?= <flaehdan@gmail.com>
Date: Fri, 27 Oct 2023 19:39:18 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=A7=80=EC=9B=90=EC=84=9C=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B0=9C=EB=B0=9C=20#20=20(#63)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 지원서 페이지 개발

* feat: 지원서 페이지 사진 등록
---
 .../application/ApplicationForm.vue           | 564 +++++++++++++++++-
 src/components/common/CommonHeader.vue        |   3 +
 yarn.lock                                     |   6 +-
 3 files changed, 567 insertions(+), 6 deletions(-)

diff --git a/src/components/application/ApplicationForm.vue b/src/components/application/ApplicationForm.vue
index 5b2050d..1bdd7ed 100644
--- a/src/components/application/ApplicationForm.vue
+++ b/src/components/application/ApplicationForm.vue
@@ -1,15 +1,573 @@
 <template>
-  <div>
-    지원서
-  </div>
+  <h1>연세 골프 지원서</h1>
+  <div class="before-apply">* 지원서는 임시저장되지 않습니다.</div>
+  <div class="before-apply">*지원서 작성 시 이모지 사용을 자제해주세요. 이모지 사용으로 인한 불이익은 지원자에게 있습니다.</div>
+  <table class="profile-info">
+    <tbody>
+    <tr>
+      <td rowspan="2">
+        사진
+      </td>
+      <td rowspan="2">
+        <input v-if="!applications.photo" type="file" @change="handleFileUpload"/>
+        <button v-if="!applications.photo" @click="uploadImage">사진 업로드</button>
+
+        <img class="apply-photo" v-if="applications.photo" :src="applications.photo" />
+      </td>
+      <td>
+        이름
+      </td>
+      <td>
+        <textarea v-model="applications.name" @input="handleNameInput"></textarea>
+      </td>
+    </tr>
+
+    <tr>
+      <td>나이</td>
+      <td>
+        <textarea v-model="applications.age" @input="handleAgeInput"></textarea>
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        학번
+      </td>
+      <td>
+        <textarea v-model="applications.studentId" @input="handleStudentIdInput"></textarea>
+      </td>
+      <td>
+        전공
+      </td>
+      <td>
+        <textarea v-model="applications.major" @input="handleMajorInput"></textarea>
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        전화번호
+      </td>
+      <td>
+        <textarea v-model="applications.phoneNumber" @input="handlePhoneNumberInput"></textarea>
+      </td>
+
+      <td>
+        이메일
+      </td>
+      <td>
+        <textarea v-model="applications.email" @input="handleEmailInput"></textarea>
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        구력
+      </td>
+      <td>
+        <select v-model="applications.golfDuration">
+          <option value="1">1년</option>
+          <option value="2">2년</option>
+          <option value="3">3년</option>
+          <option value="4">4년</option>
+          <option value="5">5년 이상</option>
+        </select>
+      </td>
+
+      <td>
+        라운딩 횟수
+      </td>
+      <td>
+        <select v-model="applications.roundCount">
+          <option value="1">1회</option>
+          <option value="2">2회</option>
+          <option value="3">3회</option>
+          <option value="4">4회</option>
+          <option value="5">5회 이상</option>
+        </select>
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        레슨 여부
+      </td>
+      <td>
+        <select v-model="applications.lessonStatus">
+          <option value="true">유</option>
+          <option value="false">무</option>
+        </select>
+      </td>
+      <td>
+        본인 클럽 소유 여부
+      </td>
+      <td>
+        <select v-model="applications.clubStatus">
+          <option value="true">유</option>
+          <option value="false">무</option>
+        </select>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+
+  <table class="application-body">
+    <thead>
+    <tr>
+      <th>
+        1. 간략하게 자기소개 부탁드립니다. (군대 계획이나 교환학생 계획이 있다면 적어주세요)
+      </th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>
+        <textarea v-model="applications.selfIntroduction" rows="30" @input="handleSelfIntroductionInput"></textarea>
+      </td>
+    </tr>
+    </tbody>
+
+    <thead>
+    <tr>
+      <th>
+        2. 연세 골프에 지원하게 된 동기를 작성해주세요
+      </th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>
+        <textarea v-model="applications.applyReason" rows="30" @input="handleApplyReasonInput"></textarea>
+      </td>
+    </tr>
+    </tbody>
+
+    <thead>
+    <tr>
+      <th>
+        3. 현재 본인의 골프 실력을 객관적으로 평가해주세요.
+      </th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>
+        <textarea v-model="applications.skillEvaluation" rows="30" @input="handleSkillEvaluationInput"></textarea>
+      </td>
+    </tr>
+    </tbody>
+
+    <thead>
+    <tr>
+      <th>
+        4. 골프와 관련된 추억이 있으시다면 말씀해주세요
+      </th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>
+        <textarea v-model="applications.golfMemory" rows="30" @input="handleGolfMemoryInput"></textarea>
+      </td>
+    </tr>
+    </tbody>
+
+    <thead>
+    <tr>
+      <th>
+        5. 현재 활동하는 다른 동아리나 학회가 있다면 적어주세요
+      </th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>
+        <textarea v-model="applications.otherClub" rows="30" @input="handleOtherClubInput"></textarea>
+      </td>
+    </tr>
+    </tbody>
+
+    <thead>
+    <tr>
+      <th>
+        6. 본인의 스윙 영상이 담긴 url을 적어주세요 (유튜브, 인스타 등)
+      </th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>
+        <textarea v-model="applications.swingVideo" rows="30" @input="handleSwingVideoInput"></textarea>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+  <div>* 지원서 제출 전 이메일과 전화번호를 다시 한번 확인해주세요.</div>
+  <div>* 결과는 이메일로 전송해드립니다.</div>
+  <button class="apply-button" @click="submitApplication">지원서 제출</button>
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
 
+  data() {
+    return {
+      applications: {
+        name: '',
+        photo: '',
+        age: '',
+        studentId: '',
+        major: '',
+        phoneNumber: '',
+        email: '',
+        golfDuration: '',
+        roundCount: '',
+        lessonStatus: '',
+        clubStatus: '',
+        selfIntroduction: '',
+        applyReason: '',
+        skillEvaluation: '',
+        golfMemory: '',
+        otherClub: '',
+        swingVideo: '',
+        selectedFile: null,
+      }
+    }
+  },
+
+  methods: {
+    async submitApplication() {
+      try {
+        const response =
+            await axios.post(`${process.env.VUE_APP_API_URL}/application`, {
+              name: this.applications.name,
+              age: this.applications.age,
+              studentId: this.applications.studentId,
+              major: this.applications.major,
+              phoneNumber: this.applications.phoneNumber,
+              email: this.applications.email,
+              golfDuration: this.applications.golfDuration,
+              roundCount: this.applications.roundCount,
+              lessonStatus: this.applications.lessonStatus,
+              clubStatus: this.applications.clubStatus,
+              selfIntroduction: this.applications.selfIntroduction,
+              applyReason: this.applications.applyReason,
+              skillEvaluation: this.applications.skillEvaluation,
+              golfMemory: this.applications.golfMemory,
+              otherClub: this.applications.otherClub,
+              swingVideo: this.applications.swingVideo,
+            });
+
+        // 응답 처리
+        if (response.status === 200) {
+          alert(`${this.applications.email}로 지원서 접수 메일을 전송해드릴 예정입니다. 10분 내로 접수 메일을 받지 못했다면 인스타로 문의 부탁드립니다.`);
+          this.$router.push('/');
+        } else {
+          alert('지원서 제출에 실패하였습니다.')
+        }
+      } catch (error) {
+        alert('지원서 제출에 실패하였습니다.')
+      }
+    },
+
+    async uploadImage() {
+      const formData = new FormData();
+      formData.append('image', this.applications.selectedFile);
+
+      try {
+        const response = await axios.post(`${process.env.VUE_APP_API_URL}/apply/forms/image`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        });
+
+        // 응답에서 이미지 URL을 가져와서 저장
+        this.applications.photo = response.data.data;
+
+      } catch (error) {
+        console.error("Image upload failed:", error);
+      }
+    },
+
+    handleFileUpload(event) {
+      this.applications.selectedFile = event.target.files[0];
+    },
+
+    handleNameInput() {
+      if (this.applications.name.length > 10) {
+        this.applications.name = this.applications.name.substring(0, 10);
+      }
+    },
+
+    handleAgeInput() {
+      // 숫자만 입력되도록 필터링
+      this.applications.age = this.applications.age.replace(/[^0-9]/g, '');
+
+      // 2글자를 초과하면 잘라내기
+      if (this.applications.age.length > 2) {
+        this.applications.age = this.applications.age.substring(0, 2);
+      }
+    },
+
+    handleStudentIdInput() {
+      this.applications.studentId = this.applications.studentId.replace(/[^0-9]/g, '');
+
+      if (this.applications.studentId.length > 11) {
+        this.applications.studentId = this.applications.studentId.substring(0, 11);
+      }
+    },
+
+    handleMajorInput() {
+      if (this.applications.major.length > 10) {
+        this.applications.major = this.applications.major.substring(0, 10);
+      }
+    },
+
+    handlePhoneNumberInput() {
+      this.applications.phoneNumber = this.applications.phoneNumber.replace(/[^0-9]/g, '');
+
+      if (this.applications.phoneNumber.length > 11) {
+        this.applications.phoneNumber = this.applications.phoneNumber.substring(0, 11);
+      }
+    },
+
+    handleEmailInput() {
+      if (this.applications.email.length > 30) {
+        this.applications.email = this.applications.email.substring(0, 30);
+      }
+    },
+
+    handleSelfIntroductionInput() {
+      if (this.applications.selfIntroduction.length > 600) {
+        this.applications.selfIntroduction = this.applications.selfIntroduction.substring(0, 600);
+      }
+    },
+
+    handleApplyReasonInput() {
+      if (this.applications.applyReason.length > 600) {
+        this.applications.applyReason = this.applications.applyReason.substring(0, 600);
+      }
+    },
+
+    handleSkillEvaluationInput() {
+      if (this.applications.skillEvaluation.length > 600) {
+        this.applications.skillEvaluation = this.applications.skillEvaluation.substring(0, 600);
+      }
+    },
+
+    handleGolfMemoryInput() {
+      if (this.applications.golfMemory.length > 600) {
+        this.applications.golfMemory = this.applications.golfMemory.substring(0, 600);
+      }
+    },
+
+    handleOtherClubInput() {
+      if (this.applications.otherClub.length > 600) {
+        this.applications.otherClub = this.applications.otherClub.substring(0, 600);
+      }
+    },
+
+    handleSwingVideoInput() {
+      if (this.applications.swingVideo.length > 600) {
+        this.applications.swingVideo = this.applications.swingVideo.substring(0, 600);
+      }
+    },
+  },
+
+  computed: {
+    applicationNameInput: {
+      get() {
+        return this.applications.name;
+      },
+      set(val) {
+        this.applications.name = val;
+      }
+    },
+
+    applicationAgeInput: {
+      get() {
+        return this.applications.age;
+      },
+      set(val) {
+        this.applications.age = val;
+      }
+    },
+
+    applicationStudentIdInput: {
+      get() {
+        return this.applications.studentId;
+      },
+      set(val) {
+        this.applications.studentId = val;
+      }
+    },
+
+    applicationMajorInput: {
+      get() {
+        return this.applications.major;
+      },
+      set(val) {
+        this.applications.major = val;
+      }
+    },
+
+    applicationPhoneNumberInput: {
+      get() {
+        return this.applications.phoneNumber;
+      },
+      set(val) {
+        this.applications.phoneNumber = val;
+      }
+    },
+
+    applicationEmailInput: {
+      get() {
+        return this.applications.email;
+      },
+      set(val) {
+        this.applications.email = val;
+      }
+    },
+
+    applicationSelfIntroductionInput: {
+      get() {
+        return this.applications.selfIntroduction;
+      },
+      set(val) {
+        this.applications.selfIntroduction = val;
+      }
+    },
+
+    applicationApplyReasonInput: {
+      get() {
+        return this.applications.applyReason;
+      },
+      set(val) {
+        this.applications.applyReason = val;
+      }
+    },
+
+    applicationSkillEvaluation: {
+      get() {
+        return this.applications.skillEvaluation;
+      },
+      set(val) {
+        this.applications.skillEvaluation = val;
+      }
+    },
+
+    applicationGolfMemory: {
+      get() {
+        return this.applications.golfMemory;
+      },
+      set(val) {
+        this.applications.golfMemory = val;
+      }
+    },
+
+    applicationOtherClub: {
+      get() {
+        return this.applications.otherClub;
+      },
+      set(val) {
+        this.applications.otherClub = val;
+      }
+    },
+
+    applicationSwingVideo: {
+      get() {
+        return this.applications.swingVideo;
+      },
+      set(val) {
+        this.applications.swingVideo = val;
+      }
+    },
+
+
+  },
+
 }
 </script>
 
+
 <style lang="scss" scoped>
+img {
+  max-width: 100px;
+}
+
+.profile-info {
+  margin-top: 30px;
+}
+
+.profile-info, .application-body, .application-footer {
+  width: 50%;
+  border-collapse: collapse;
+}
+
+table {
+  margin: 0 auto;
+  font-size: 12px;
+  max-width: 70%;
+}
+
+table th, table td {
+  border: 1px solid #ddd;
+  padding: 10px;
+  text-align: center;
+}
+
+table th {
+  background-color: gray;
+  color: #fff;
+}
+
+.application-footer {
+  margin-bottom: 30px;
+}
+
+@media (max-width: 1300px) {
+  .profile-info, .application-body, .application-footer {
+    max-width: 90%;
+    width: 90%;
+  }
+}
+
+textarea {
+  width: 100%;
+  border: none;
+  outline: none;
+  resize: none;
+}
+
+.apply-button {
+  color: white;
+  font-weight: bold;
+  margin: 0 auto;
+  width: 10%;
+  height: 50px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-radius: 10px;
+  border: 1px solid #143673;
+  background-color: #143673;
+  transition: background-color 0.3s;
+}
+
+button:hover {
+  background-color: #1a5cc8;
+  border-color: #1a5cc8;
+}
+
+.before-apply {
+  font-size: 12px;
+}
+
+.apply-photo{
+  min-width: 100px;
+  min-height: 100px;
+}
+
 
 </style>
\ No newline at end of file
diff --git a/src/components/common/CommonHeader.vue b/src/components/common/CommonHeader.vue
index 142d5df..cc88945 100644
--- a/src/components/common/CommonHeader.vue
+++ b/src/components/common/CommonHeader.vue
@@ -5,6 +5,9 @@
     </div>
     <nav>
       <ul class="header-nav">
+        <li>
+          <router-link to="/apply/form">지원서</router-link>
+        </li>
         <li v-if="adminStatus">
           <router-link to="/admin/form">
             지원서 관리
diff --git a/yarn.lock b/yarn.lock
index 18030b8..49378ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1895,9 +1895,9 @@ acorn@^7.4.0:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.0.4, acorn@^8.0.5, acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0:
-  version "8.11.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.1.tgz#29c6f12c3002d884b6f8baa37089e1917425cd3d"
-  integrity sha512-IJTNCJMRHfRfb8un89z1QtS0x890C2QUrUxFMK8zy+RizcId6mfnqOf68Bu9YkDgpLYuvCm6aYbwDatXVZPjMQ==
+  version "8.11.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
+  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
 
 address@^1.1.2:
   version "1.2.2"