Design/#98 update board (#99)

* design: 폰트 및 글자 크기 수정 * design: 제목 수정 시 textarea 적용
YonseiGolf · Dec 21, 2023 · bc9285c · bc9285c
1 parent 894f96e
commit bc9285c
Show file tree

Hide file tree

Showing 13 changed files with 177 additions and 40 deletions.
diff --git a/src/assets/global.css b/src/assets/global.css
@@ -1,3 +1,17 @@
 .no-scroll {
     position: fixed;
+}
+
+@font-face {
+    font-family: 'Pretendard-Regular';
+    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'GmarketSansMedium';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
 }
diff --git a/src/components/application/ApplyTerm.vue b/src/components/application/ApplyTerm.vue
@@ -48,4 +48,14 @@ button {
   }
 }
 
+h1{
+  font-family: 'GmarketSansMedium', sans-serif;
+  font-weight: bold;
+}
+
+h2{
+  font-family: 'GmarketSansMedium', sans-serif;
+  font-weight: bold;
+}
+
 </style>
diff --git a/src/components/application/NotApplyTerm.vue b/src/components/application/NotApplyTerm.vue
@@ -150,4 +150,10 @@ h1 {
 input {
   outline: none;
 }
+
+h1{
+  font-family: 'GmarketSansMedium', sans-serif;
+  font-weight: bold;
+}
+
 </style>
diff --git a/src/components/applyinfo/ApplyPeriod.vue b/src/components/applyinfo/ApplyPeriod.vue
@@ -4,28 +4,28 @@
   </h1>
   <div class="container">
     <div class="text-box">
-      서류 접수
-      &nbsp;&nbsp;&nbsp;&nbsp;
+      <apply-title>서류 접수</apply-title>
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       {{ applicationDates.startDate }} ~ {{ applicationDates.endDate }}
       <br><br>
 
-      서류 합격 발표
-      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <apply-title>서류 합격 발표</apply-title>
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       {{ applicationDates.firstResultDate }}
       <br><br>
 
-      면접
-      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <apply-title>면접</apply-title>
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       {{ applicationDates.interviewStartDate }} ~ {{ applicationDates.interviewEndDate }}
       <br><br>
 
-      최종 결과 발표
-      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <apply-title>최종 결과 발표</apply-title>
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       {{ applicationDates.finalResultDate }}
       <br><br>
 
-      오리엔테이션
-      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <apply-title>오리엔테이션</apply-title>
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       {{ applicationDates.orientationDate }}
       <br><br>
     </div>
@@ -68,13 +68,17 @@ export default {
 
 h1 {
   color: #143673;
+  font-family: 'GmarketSansMedium', sans-serif;
 }
 
 .container {
   display: flex;
   justify-content: center; /* 가로 중앙 정렬 */
   margin-top: 30px;
   margin-bottom: 100px;
+
+  font-family: 'Pretendard-Regular', sans-serif;
+
 }
 
 .text-box {
@@ -86,6 +90,11 @@ h1 {
   height: 95%;
   text-align: center;
   border-radius: 20px;
+  font-size: 16px;
 }
 
+apply-title {
+  font-size: 16px;
+  font-weight: bold;
+}
 </style>
diff --git a/src/components/applyinfo/ApplyQualification.vue b/src/components/applyinfo/ApplyQualification.vue
@@ -32,13 +32,19 @@ export default {}
 h1 {
   margin-top: 100px;
   color: #143673;
+
+  font-family: 'GmarketSansMedium', sans-serif;
+
 }
 
 .container {
   margin-top: 30px;
   display: flex;
   justify-content: center;
   margin-bottom: 100px;
+
+  font-family: 'Pretendard-Regular', sans-serif;
+
 }
 
 .text-box {
@@ -57,4 +63,5 @@ h1 {
   padding: 1vh;
   padding-left: 4vh;
 }
+
 </style>
diff --git a/src/components/board/BoardDetail.vue b/src/components/board/BoardDetail.vue
@@ -12,7 +12,7 @@
         <option value="FREE">자유게시판</option>
       </select>
       <br>
-      <input @input="validTitle" type="text" v-model="editedTitle" class="edit-title">
+      <textarea @input="validTitle" v-model="editedTitle" class="edit-title"></textarea>
     </div>
 
     <div v-if="boardData" class="board-user"> {{ boardData.writer }}</div>
@@ -425,6 +425,7 @@ span {
 
 textarea {
   width: 100%;
+  height: 300px;
   padding: 10px;
   margin-bottom: 10px;
   border: 1px solid #ddd;
@@ -493,4 +494,8 @@ textarea {
   }
 }
 
+
+.edit-title{
+  height: 20px;
+}
 </style>
diff --git a/src/components/board/admin/BoardTemplateDetail.vue b/src/components/board/admin/BoardTemplateDetail.vue
@@ -6,7 +6,7 @@
       <p v-if="templateData" class="detail-title"> {{ templateData.title }} </p>
     </div>
     <div v-else>
-      <input @input="validTitle" type="text" v-model="editedTitle" class="edit-title">
+      <textarea @input="validTitle" type="text" v-model="editedTitle" class="edit-title"></textarea>
     </div>
 
 
@@ -255,6 +255,7 @@ span {
 
 textarea {
   width: 100%;
+  height: 500px;
   padding: 10px;
   margin-bottom: 10px;
   border: 1px solid #ddd;
@@ -332,4 +333,8 @@ button{
   border: none;
 }
 
+.edit-title{
+  height: 20px;
+}
+
 </style>
diff --git a/src/components/common/CommonHeader.vue b/src/components/common/CommonHeader.vue
@@ -115,6 +115,11 @@ export default {
 
 
 <style>
+
+li{
+  font-size: 16px;
+}
+
 .header-container {
   display: flex;
   align-items: center;

diff --git a/src/components/home/ClubActivityIntroduction.vue b/src/components/home/ClubActivityIntroduction.vue
@@ -5,38 +5,70 @@
     <div class="card-container">
 
       <div class="card grey-card">
-        <img src="https://yg-img-storage.s3.ap-northeast-2.amazonaws.com/image/rounding.476519da.jpg" alt="정규 활동" class="introduction-image">
+        <img src="https://yg-img-storage.s3.ap-northeast-2.amazonaws.com/image/rounding.476519da.jpg" alt="정규 활동"
+             class="introduction-image">
       </div>
       <div class="card">
-        <span>정규 활동 <br><br>
-          매주 목요일 신촌역 부근에서<br>
-          정기활동을 진행해요 </span>
+        <span>
+          <main-title>
+            정규 활동<br><br>
+          </main-title>
+          <main-body>
+            매주 목요일 신촌역 부근에서<br>
+          정기활동을 진행해요
+          </main-body>
+        </span>
       </div>
 
       <div class="card grey-card">
-        <img src="https://yg-img-storage.s3.ap-northeast-2.amazonaws.com/image/new-comer.efdadda2.jpg" alt="신입 환영 MT" class="introduction-image">
+        <img src="https://yg-img-storage.s3.ap-northeast-2.amazonaws.com/image/new-comer.efdadda2.jpg" alt="신입 환영 MT"
+             class="introduction-image">
       </div>
       <div class="card">
-        <span>신입 환영 MT<br><br>
-          신입 부원들과 기존 부원들과의 조화를 위해<br>
-          신입 환영 MT를 진행해요</span>
+        <span>
+          <main-title>
+            신입 환영 MT<br><br>
+          </main-title>
+
+          <main-body>
+            신입 부원들과 기존 부원들과의 조화를 위해<br>
+            신입 환영 MT를 진행해요</main-body>
+        </span>
       </div>
 
       <div class="card grey-card">
-        <img src="https://yg-img-storage.s3.ap-northeast-2.amazonaws.com/image/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA+2023-11-16+%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE+9.58.19.png" alt="단체 라운딩" class="introduction-image">
+        <img
+            src="https://yg-img-storage.s3.ap-northeast-2.amazonaws.com/image/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA+2023-11-16+%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE+9.58.19.png"
+            alt="단체 라운딩" class="introduction-image">
       </div>
       <div class="card">
-        <span>단체 라운딩<br><br>
-          매 학기 경기권에서 라운딩을 진행해요</span>
+        <span>
+          <main-title>
+            단체 라운딩<br><br>
+          </main-title>
+
+          <main-body>
+            매 학기 경기권에서 라운딩을 진행해요
+          </main-body>
+        </span>
       </div>
 
       <div class="card grey-card">
-        <img src="https://yg-img-storage.s3.ap-northeast-2.amazonaws.com/image/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA+2023-11-16+%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE+9.57.21.png" alt="OB 엠티" class="introduction-image">
+        <img
+            src="https://yg-img-storage.s3.ap-northeast-2.amazonaws.com/image/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA+2023-11-16+%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE+9.57.21.png"
+            alt="OB 엠티" class="introduction-image">
       </div>
       <div class="card">
-        <span>OB 라운딩<br><br>
-          YB 활동이 끝나더라도<br>
-          OB 부원과 라운딩을 함께해요
+        <span>
+
+          <main-title>
+            OB 라운딩<br><br>
+          </main-title>
+
+          <main-body>
+            YB 활동이 끝나더라도<br>
+            OB 부원과 라운딩을 함께해요
+          </main-body>
         </span>
       </div>
 
@@ -64,11 +96,16 @@ export default {
   align-items: center;
   text-align: center;
   margin-bottom: 3%;
+
+  font-family: 'Pretendard-Regular', sans-serif;
+
 }
 
 
 h2 {
-  font-size: 24px;
+  font-size: 30px;
+
+  font-family: 'GmarketSansMedium', sans-serif;
 }
 
 .card-container {
@@ -106,4 +143,12 @@ h2 {
   border-radius: 9px;
 }
 
+main-title {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+main-body {
+  font-size: 20px;
+}
 </style>
diff --git a/src/components/home/ClubIntroduction.vue b/src/components/home/ClubIntroduction.vue
@@ -4,8 +4,8 @@
   <div class="info-container">
     <h2>연골 동아리 소개</h2>
     <div class="description">
-      연세대학교 골프동아리 연세골프는<br>
-      KPGA, KLPGA 투어프로<br>
+      연세대학교 골프동아리 연세골프는<br><br>
+      KPGA, KLPGA 투어프로<br><br>
       이효린, 염은호, 신의경, 김재희, 서어진 프로와 함께합니다.
     </div>
 
@@ -42,6 +42,8 @@ export default {
 
 .info-container {
   padding: 20px;
+  font-family: 'Pretendard-Regular', sans-serif;
+
 }
 
 h2 {
@@ -50,13 +52,16 @@ h2 {
   font-weight: bold;
   margin-bottom: 20px;
   text-align: center;
+
+  font-family: 'GmarketSansMedium', sans-serif;
 }
 
 .description {
   padding: 15px;
   border-radius: 10px;
   margin-bottom: 20px;
   text-align: center;
+  font-size: 20px;
 }
 
 .statistic-cards {
@@ -79,6 +84,6 @@ h2 {
 
 .data {
   font-weight: bold;
-  font-size: 18px;
+  font-size: 30px;
 }
 </style>