Merge pull request #43 from yeonjulee1005/stage

🚎 [version: 1.10.0] push to master
yeonjulee1005 · Dec 13, 2023 · 4c64734 · 4c64734
2 parents 84bee98 + e7f2e6b
commit 4c64734
Show file tree

Hide file tree

Showing 44 changed files with 663 additions and 751 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -45,6 +45,7 @@
     "pinia",
     "Please",
     "plus",
+    "Popover",
     "Press",
     "recommended",
     "Rights",

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ## 안녕하세요. FE 개발자 이연주 입니다.
 
-## Current Version: 1.8.0
+## Current Version: 1.10.0
 
 ## 🖥️ 사용한 스킬은 아래와 같습니다.
 

diff --git a/assets/scss/desktop/pages/tech_list.scss b/assets/scss/desktop/pages/tech_list.scss
diff --git a/assets/scss/mobile/pages/tech_list.scss b/assets/scss/mobile/pages/tech_list.scss
@@ -15,10 +15,6 @@
       .card-header {
         flex-direction: column;
         align-items: flex-start;
-        .like {
-          margin-top: $space-16;
-          margin-left: unset;
-        }
       }
     }
   }

diff --git a/assets/scss/shared/components/content_container.scss b/assets/scss/shared/components/content_container.scss
@@ -55,7 +55,6 @@
       padding: $space-4;
       border-radius: $space-6;
       background-color: var(--el-border-color);
-      color: var(--el-color-primary);
       box-decoration-break: clone;
     }
     pre {

diff --git a/assets/scss/shared/components/main_contact.scss b/assets/scss/shared/components/main_contact.scss
@@ -40,16 +40,6 @@
         .el-form-item {
           .el-form-item__content {
             justify-content: flex-end;
-            .el-button {
-              color: var(--d-text-color);
-              background-color: var(--d-footer-bg-color);
-              border-color: var(--d-footer-bg-color);
-              &:hover,
-              &:focus {
-              background-color: var(--d-footer-bg-color-deep);
-              border-color: var(--d-footer-bg-color-deep);
-              }
-            }
           }
         }
       }

diff --git a/assets/scss/shared/components/pwa.scss b/assets/scss/shared/components/pwa.scss
@@ -16,13 +16,6 @@
   z-index: 30;
   text-align: left;
   box-shadow: calc($space-2) $space-4 calc($space-4) 0 $pwa-border;
-  .el-button {
-    border: $space-1 solid $pwa-border;
-    outline: none;
-    margin-right: calc($space-4);
-    border-radius: $space-2;
-    padding: calc($space-2) $space-10;
-  }
   .message {
     margin-bottom: $space-8;
   }

diff --git a/assets/scss/shared/components/tiptap.scss b/assets/scss/shared/components/tiptap.scss
@@ -49,7 +49,7 @@
     appearance: none;
     width: $space-24;
     height: $space-24;
-    margin: 0 $space-12;
+    margin: 0 $space-4;
     padding: 0;
     background-color: transparent;
     border: $space-2 solid var(--el-border-color);
@@ -69,20 +69,6 @@
       border-radius: 0;
     }
   }
-  el-button {
-    width: $space-60;
-    border: none;
-    background: none;
-    color: var(--d-text-color);
-    font-size: 0.85rem;
-    font-weight: 500;
-    padding: 0 0.2rem;
-    opacity: 0.6;
-    &:hover,
-    &.is-active {
-      opacity: 1;
-    }
-  }
 }
 
 .tiptap-menu-item {
@@ -142,35 +128,30 @@ th.has-focus {
 /**
 * ?  Tiptap Menu Popper Style ?
 */
-.tiptap-editor-group-menu {
-  display: flex;
-  align-items: center;
-  padding: $space-4 $space-8 !important;
-  border-radius: $space-8 !important;
-  .edit-color-input {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    width: $space-40;
-    height: $space-30;
-    margin: 0.15rem calc(0.15rem + $space-12) 0 $space-12;
+.edit-color-input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: $space-30;
+  height: $space-30;
+  margin: 0.15rem 0 0 $space-4;
+  padding: 0;
+  border: 1px solid var(--el-border-color);
+  background-color: transparent;
+  border-radius: $space-4;
+  cursor: pointer;
+  &::-webkit-color-swatch-wrapper {
     padding: 0;
-    background-color: transparent;
-    border-radius: $space-4;
-    cursor: pointer;
-    &::-webkit-color-swatch-wrapper {
-      padding: 0;
-    }
-    &::-webkit-color-swatch {
-      padding: 0;
-      border: 0;
-      border-radius: 0;
-    }
-    &::-moz-color-swatch {
-      padding: 0;
-      border: 0;
-      border-radius: 0;
-    }
+  }
+  &::-webkit-color-swatch {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+  }
+  &::-moz-color-swatch {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
   }
 }
 

diff --git a/assets/scss/style.scss b/assets/scss/style.scss
@@ -33,7 +33,6 @@
   */
   @include meta.load-css('desktop/pages/projects');
   @include meta.load-css('desktop/pages/color_translate');
-  @include meta.load-css('desktop/pages/tech_list');
   @include meta.load-css('desktop/pages/tech_detail');
 }
 
@@ -59,7 +58,6 @@
   @include meta.load-css('tablet/pages/404');
   @include meta.load-css('tablet/pages/projects');
   @include meta.load-css('tablet/pages/color_translate');
-  @include meta.load-css('tablet/pages/tech_list');
   @include meta.load-css('tablet/pages/tech_detail');
 }
 

diff --git a/assets/scss/tablet/pages/tech_list.scss b/assets/scss/tablet/pages/tech_list.scss
diff --git a/components/ADialog.vue b/components/ADialog.vue
@@ -42,41 +42,32 @@
       <template #footer>
         <div
           v-if="!hideDoubleButton"
-          class="A-dialog-double-button"
+          class="A-dialog-double-button flex flex-justify-end gap-16 "
         >
-          <el-button
+          <AButton
             v-if="!hideFirstButton"
-            class="A-double-first-button"
-            :class="{'activate-first-button': activeFirstButton}"
-            :disabled="activeFirstButton"
-            size="large"
-            @click="emits('click-first-button')"
-          >
-            {{ doubleFirstText }}
-          </el-button>
-          <el-button
+            :custom-class="`A-double-first-button ${activeFirstButton ? 'activate-first-button' : ''}`"
+            :button-disabled="activeFirstButton"
+            button-size="lg"
+            :button-text="doubleFirstText"
+            @click:button="emits('click-first-button')"
+          />
+          <AButton
             v-if="!hideSecondButton"
-            class="A-double-second-button"
-            size="large"
-            @click="emits('click-second-button')"
-          >
-            {{ doubleSecondText }}
-          </el-button>
+            custom-class="A-double-second-button"
+            button-size="lg"
+            :button-text="doubleSecondText"
+            @click:button="emits('click-second-button')"
+          />
         </div>
-        <div
+        <AButton
           v-if="!hideSingleButton"
-          class="A-dialog-single-button"
-        >
-          <el-button
-            v-if="!hideSingleButton"
-            class="A-single-button"
-            type="primary"
-            size="large"
-            @click="emits('click-single-button')"
-          >
-            {{ singleText }}
-          </el-button>
-        </div>
+          custom-class="A-single-button"
+          button-variant="soft"
+          button-size="lg"
+          :button-text="singleText"
+          @click:button="emits('click-single-button')"
+        />
       </template>
     </el-dialog>
   </client-only>

diff --git a/components/AHeader.client.vue b/components/AHeader.client.vue
@@ -69,21 +69,15 @@
           {{ selectLocale }}
         </template>
       </DDSelectMenu>
-      <DDButton
-        class="mr-20"
-        color="violet"
-        variant="ghost"
-        aria-label="Theme"
-        @click="isDark = !isDark"
-      >
-        <template #leading>
-          <Icon
-            :name="isDark ? 'line-md:moon-filled-loop' : 'line-md:moon-filled-alt-to-sunny-filled-loop-transition'"
-            :width="24"
-            :height="24"
-          />
-        </template>
-      </DDButton>
+      <AButton
+        custom-class="mr-20"
+        aria-label="theme"
+        button-variant="ghost"
+        use-icon
+        :icon-name="isDark ? 'line-md:moon-filled-loop' : 'line-md:moon-filled-alt-to-sunny-filled-loop-transition'"
+        :icon-size="24"
+        @click:button="isDark = !isDark"
+      />
     </div>
   </div>
 </template>

diff --git a/components/InstallPwa.client.vue b/components/InstallPwa.client.vue
@@ -13,34 +13,36 @@
           {{ $t('pwa.newContent') }}
         </span>
       </div>
-      <el-button
-        v-if="$pwa.needRefresh"
-        @click="$pwa.updateServiceWorker()"
-      >
-        {{ $t('pwa.reload') }}
-      </el-button>
-      <el-button @click="$pwa.cancelPrompt()">
-        {{ $t('pwa.close') }}
-      </el-button>
+      <div class="flex gap-4">
+        <AButton
+          v-if="$pwa.needRefresh"
+          :button-text="$t('pwa.reload')"
+          @click:button="$pwa.updateServiceWorker()"
+        />
+        <AButton
+          :button-text="$t('pwa.close')"
+          @click:button="$pwa.cancelPrompt()"
+        />
+      </div>
     </div>
     <div
       v-if="$pwa?.showInstallPrompt && !$pwa?.offlineReady && !$pwa?.needRefresh"
-      class="pwa-toast flex"
+      class="pwa-toast flex gap-4"
       role="alert"
     >
       <div class="flex flex-column flex-align-center">
-        <div class="message">
-          <span>
-            {{ $t('pwa.installPwa') }}
-          </span>
-        </div>
-        <div>
-          <el-button @click="$pwa.install()">
-            {{ $t('pwa.install') }}
-          </el-button>
-          <el-button @click="$pwa.cancelInstall()">
-            {{ $t('pwa.cancel') }}
-          </el-button>
+        <span class="message">
+          {{ $t('pwa.installPwa') }}
+        </span>
+        <div class="flex gap-4">
+          <AButton
+            :button-text="$t('pwa.install')"
+            @click:button="$pwa.install()"
+          />
+          <AButton
+            :button-text="$t('pwa.cancel')"
+            @click:button="$pwa.cancelInstall()"
+          />
         </div>
       </div>
       <Icon