fix(all): 컴포넌트 이름 단축 및 링크 개선

- 링크 개선 (접두사 https 추가) - 컴포넌트 이름 단축
Nexters · Oct 18, 2021 · f2ab0ab · f2ab0ab
1 parent 187ac14
commit f2ab0ab
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 24 deletions.
diff --git a/components/recruitment/banner.vue b/components/recruitment/banner.vue
@@ -8,12 +8,12 @@
       <h2 class="bannerSubTitle">{{ subTitle }}</h2>
       <p class="bannerPeriod">{{ period }}</p>
       <article class="boxArea">
-        <RecruitmentLinkButton
+        <LinkButton
           v-for="box in boxList"
           :key="box.id"
           class="box"
           :button-name="box.name"
-          :link="box.link"
+          :href="`https://${box.link}`"
         />
       </article>
     </div>

diff --git a/components/recruitment/linkButton.vue b/components/recruitment/linkButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <a class="linkButton" :href="link">{{ buttonName }}</a>
+  <div class="linkButton" @click="onClick">{{ buttonName }}</div>
 </template>
 
 <script>
@@ -12,11 +12,16 @@ export default defineComponent({
       type: String,
       require: true,
     },
-    link: {
+    href: {
       type: String,
       require: false,
     },
   },
+  methods: {
+    onClick: function () {
+      location.href = this.href;
+    },
+  },
 });
 </script>
 
@@ -36,6 +41,9 @@ export default defineComponent({
   background-color: $primary;
   color: white;
   text-decoration: none;
+  &:hover {
+    cursor: pointer;
+  }
 }
 
 @include desktop {

diff --git a/components/recruitment/schedule.vue b/components/recruitment/schedule.vue
@@ -2,10 +2,10 @@
   <div class="scheduleArea">
     <h2 class="scheduleTitle">모집 일정</h2>
     <article class="schedules">
-      <RecruitmentScheduleBox
-        class="schedule"
+      <ScheduleBox
         v-for="schedule in schedules"
         :key="schedule.id"
+        class="schedule"
         :schedule-title="schedule.title"
         :schedule-date="schedule.date"
       />

diff --git a/content/recruitment.json b/content/recruitment.json
@@ -79,19 +79,19 @@
       "result": {
         "rawData": [
           ["버튼명", "클릭 링크", "노출 유무"],
-          ["모집 알림 신청하기", "www.naver.com", "TRUE"],
-          ["디자이너 지원하기", "www.daum.net", "TRUE"],
-          ["개발자 지원하기", "www.google.com", "FALSE"]
+          ["모집 알림 신청하기", "https://www.naver.com", "TRUE"],
+          ["디자이너 지원하기", "https://www.daum.net", "TRUE"],
+          ["개발자 지원하기", "https://www.google.com", "FALSE"]
         ],
         "formatted": [
           { "(A)": "버튼명", "(B)": "클릭 링크", "(C)": "노출 유무" },
           {
             "(A)": "모집 알림 신청하기",
-            "(B)": "www.naver.com",
+            "(B)": "https://www.naver.com",
             "(C)": "TRUE"
           },
-          { "(A)": "디자이너 지원하기", "(B)": "www.daum.net", "(C)": "TRUE" },
-          { "(A)": "개발자 지원하기", "(B)": "www.google.com", "(C)": "FALSE" }
+          { "(A)": "디자이너 지원하기", "(B)": "https://www.daum.net", "(C)": "TRUE" },
+          { "(A)": "개발자 지원하기", "(B)": "https://www.google.com", "(C)": "FALSE" }
         ],
         "header": ["(A)", "(B)", "(C)"],
         "range": "'recruitment-banner-button'!A1:Z1000"

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -14,6 +14,8 @@ const config: NuxtConfig = {
     "~/components",
     { path: "~/components/about", extensions: ["vue"] },
     { path: "~/components/project", extensions: ["vue"] },
+    { path: "~/components/contact", extensions: ["vue"] },
+    { path: "~/components/recruitment", extensions: ["vue"] },
   ],
   content: {
     nestedProperties: ["projects.idx"],
@@ -29,6 +31,7 @@ const config: NuxtConfig = {
     "~/assets/css/reset.css",
     "~/assets/css/webfont.css",
     "~/assets/css/_device.scss",
+    "~/assets/css/setting.scss",
     "~/assets/css/color.scss",
     "~/assets/css/typography.scss",
   ],

diff --git a/pages/contact.vue b/pages/contact.vue
@@ -13,7 +13,7 @@
         <h1 class="header">FAQ</h1>
       </div>
       <article class="faqArea">
-        <ContactFaqBox
+        <FaqBox
           v-for="faq in faqs"
           :key="faq.idx"
           class="faqBox"

diff --git a/pages/recruitment.vue b/pages/recruitment.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="recruitment" mode="out-in">
     <div>
-      <RecruitmentBanner
+      <Banner
         class="banner"
         :background-image-url="`https://drive.google.com/uc?export=view&id=${banner.bannerImage}`"
         :header-title="banner.bannerTitle"
@@ -10,30 +10,26 @@
         :box-list="bannerBoxes"
       />
       <main class="main">
-        <RecruitmentNoticeBox
+        <NoticeBox
           v-if="notice.isVisible"
           :box-title="notice.boxTitle"
           :contents="notice.contents"
         />
-        <RecruitmentDotList
+        <DotList
           class="area"
           :dot-list-title="`지원 자격`"
           :items="qualifications"
         />
-        <RecruitmentSchedule class="area" :schedules="schedules" />
-        <RecruitmentDotList
-          class="area"
-          :dot-list-title="`유의사항`"
-          :items="caution"
-        />
+        <Schedule class="area" :schedules="schedules" />
+        <DotList class="area" :dot-list-title="`유의사항`" :items="caution" />
       </main>
       <div class="footer">
         <h2 class="footerTitle">궁금한 점이 있으신가요?</h2>
         <h3 class="footerSubTitle">자주 묻는 질문을 확인해보세요.</h3>
-        <RecruitmentLinkButton
+        <LinkButton
           class="faqBox"
           :button-name="`FAQ 바로가기`"
-          :link="`/contact`"
+          :href="`/contact`"
         />
       </div>
     </div>