Merge pull request #28 from yeonjulee1005/stage

🚎 [version: 1.4.0] push to master
yeonjulee1005 · Dec 10, 2023 · 8c9106f · 8c9106f
2 parents 7ba1b76 + e00452b
commit 8c9106f
Show file tree

Hide file tree

Showing 21 changed files with 89 additions and 42 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -24,6 +24,7 @@
     "element",
     "emits",
     "english",
+    "fontaine",
     "found",
     "headline",
     "icons",

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

diff --git a/assets/scss/basic/fonts.scss b/assets/scss/basic/fonts.scss
@@ -3,5 +3,11 @@
 */
 @font-face {
   font-family: Pretendard;
+  font-display: swap;
   src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css') format('woff2');
 }
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2') format('woff2');
+}
diff --git a/assets/scss/foundation.scss b/assets/scss/foundation.scss
@@ -11,7 +11,7 @@ html {
 }
 
 body {
-  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+  font-family: 'Pretendard Variable', Pretendard, Roboto, -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
   position: relative;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

diff --git a/assets/scss/shared/components/tiptap.scss b/assets/scss/shared/components/tiptap.scss
@@ -106,6 +106,7 @@
   height: fit-content;
   margin: $space-50 0 $space-8;
   padding-top: $space-10;
+  padding-left: $space-4;
   > * + * {
     margin-top: 0.75em;
   }

diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
@@ -28,6 +28,14 @@
 * ? Text Editor (Tiptap) Mixins ?
 */
 @mixin tiptap-template {
+  a {
+    text-decoration: none;
+    color: var(--d-yellow-color-deep);
+    &:hover {
+      text-decoration: underline;
+      color: var(--d-yellow-color);
+    }
+  }
   p {
     line-height: 1.7rem;
   }
@@ -59,11 +67,11 @@
     font-size: 0.9rem;
     padding: 0.25em;
     border-radius: 0.25em;
-    background-color: var(--el-bg-color);
+    background-color: var(--d-bg-green-color-deep);
     box-decoration-break: clone;
   }
   pre {
-    background-color: var(--el-bg-color);
+    background-color: var(--d-yellow-color);
     font-family: JetBrainsMono, monospace;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/AHeader.vue → components/AHeader.client.vue b/components/AHeader.vue → components/AHeader.client.vue
@@ -81,16 +81,14 @@ import { Sunny, Moon } from '@element-plus/icons-vue'
 const { locale, setLocaleCookie } = useLocale()
 const { width } = useWindowSize()
 
-const { url } = useImageStorage()
-
 const darkModeTrigger = useDark()
 
 const { mainMenuData, socialMenuData } = useMenuStore()
+const { url } = useImageStorage()
 
 const darkSwitch = ref(false)
-const desktopModeTrigger = computed(() => {
-  return width.value > 999
-})
+
+const desktopModeTrigger = computed(() => width.value > 999)
 
 watch(() => darkSwitch.value, (value) => {
   darkModeTrigger.value = value

diff --git a/components/atoms/article/ArticleHeader.vue b/components/atoms/article/ArticleHeader.vue
@@ -24,15 +24,23 @@
       class="title"
       @change="() => emits('update:title', copiedTitle)"
     />
-    <el-text class="time flex flex-justify-end gap-10">
-      {{ dayjs(createdAt).format('YYYY-MM-DD HH:mm:ss') }}
-    </el-text>
+    <NuxtTime
+      :datetime="createdAt"
+      :locale="locale"
+      class="time flex flex-justify-end"
+      year="numeric"
+      month="long"
+      day="numeric"
+      hour="numeric"
+      minute="numeric"
+      second="numeric"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 
-const dayjs = useDayjs()
+const { locale } = useLocale()
 
 const props = withDefaults(
   defineProps<{

diff --git a/components/dialog/HyperLinkDialog.vue b/components/dialog/HyperLinkDialog.vue
@@ -78,7 +78,7 @@ const props = withDefaults(
 
 const emits = defineEmits([
   'close:dialog',
-  'submit-link'
+  'submit:link'
 ])
 
 const hyperLinkForm = ref({
@@ -89,8 +89,7 @@ const visibleSync = computed({
   get: () => props.visible,
   set: (value) => {
     if (value) {
-      hyperLinkForm.value.link = ''
-      emits('close:dialog', value)
+      visibleSync.value = value
     }
   }
 })
@@ -99,7 +98,7 @@ const submitLink = async (formEl:FormInstance | undefined) => {
   if (!formEl) { return }
   await formEl.validate((valid) => {
     if (valid) {
-      emits('submit-link', hyperLinkForm.value.link)
+      emits('submit:link', hyperLinkForm.value.link)
       closeDialog(false)
       formEl.resetFields()
     } else {

diff --git a/components/dialog/ImageUploadDialog.vue b/components/dialog/ImageUploadDialog.vue
@@ -9,8 +9,8 @@
     :double-first-text="doubleFirstText"
     :double-second-text="doubleSecondText"
     @click-first-button="submitImage"
-    @click-second-button="closeDialog"
-    @close-dialog="closeDialog"
+    @click-second-button="closeDialog(false)"
+    @close-dialog="closeDialog(false)"
   >
     <el-upload
       ref="imageUpload"
@@ -109,11 +109,8 @@ const visibleSync = computed({
   get: () => props.visible,
   set: (value) => {
     if (value) {
-      exportUrl.value = ''
-      hyperLink.value = ''
-      emits('close:dialog', value)
+      visibleSync.value = value
     }
-    visibleSync.value = value
   }
 })
 
@@ -164,7 +161,7 @@ const uploadImage = async (file:File) => {
       cacheControl: '3600',
       upsert: true
     })
-
+  console.log(filePath)
   if (uploadError) {
     notify('', 'error', String(uploadError), true, 3000, 0)
   }
@@ -192,7 +189,6 @@ const submitImage = () => {
 }
 
 const closeDialog = (trigger:boolean) => {
-  exportUrl.value = ''
   emits('close:dialog', trigger)
 }
 

diff --git a/components/dialog/MagicLinkDialog.vue b/components/dialog/MagicLinkDialog.vue
@@ -94,7 +94,7 @@ const visibleSync = computed({
   get: () => props.visible,
   set: (value) => {
     if (value) {
-      emits('close-dialog')
+      visibleSync.value = value
     }
   }
 })

diff --git a/components/dialog/YoutubeLinkDialog.vue b/components/dialog/YoutubeLinkDialog.vue
@@ -8,8 +8,8 @@
     :double-second-text="doubleSecondText"
     width="360px"
     @click-first-button="submitLink(youtubeLinkFormRef)"
-    @click-second-button="closeDialog"
-    @close-dialog="closeDialog"
+    @click-second-button="closeDialog(false)"
+    @close-dialog="closeDialog(false)"
   >
     <el-form
       ref="youtubeLinkFormRef"
@@ -89,8 +89,7 @@ const visibleSync = computed({
   get: () => props.visible,
   set: (value) => {
     if (value) {
-      youtubeLinkForm.value.link = ''
-      emits('close:dialog', value)
+      visibleSync.value = value
     }
   }
 })
@@ -109,8 +108,8 @@ const submitLink = async (formEl:FormInstance | undefined) => {
 }
 
 const closeDialog = (trigger:boolean) => {
-  youtubeLinkForm.value.link = ''
   emits('close:dialog', trigger)
+  youtubeLinkForm.value.link = ''
 }
 
 </script>
diff --git a/components/molecules/tiptap/TextEditor.vue b/components/molecules/tiptap/TextEditor.vue
@@ -120,8 +120,8 @@
       :title="$t('tiptap.dialog.hyperLinkTitle')"
       :double-first-text="$t('texts.save')"
       :double-second-text="$t('texts.close')"
-      @submit-link="submitHyperLink"
-      @close="(trigger:boolean) => hyperLinkDialogTrigger = trigger"
+      @submit:link="submitHyperLink"
+      @close:dialog="(trigger:boolean) => hyperLinkDialogTrigger = trigger"
     />
     <YoutubeLinkDialog
       :visible="youtubeLinkDialogTrigger"
@@ -146,6 +146,7 @@
 
 <script setup lang="ts">
 import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-3'
+import { CodeBlock } from '@tiptap/extension-code-block'
 import starterKit from '@tiptap/starter-kit'
 import textStyle from '@tiptap/extension-text-style'
 import { Youtube } from '@tiptap/extension-youtube'
@@ -211,6 +212,7 @@ onMounted(() => {
       characterCount.configure({
         limit: props.textLimit
       }),
+      CodeBlock,
       underline,
       textAlign.configure({
         types: ['heading', 'paragraph']

diff --git a/components/molecules/tiptap/TiptapExtraGroup.vue b/components/molecules/tiptap/TiptapExtraGroup.vue
@@ -26,9 +26,15 @@
       <LazyEditNormalButtons
         :is-active="tiptapEditor.isActive('code')"
         :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleCode().run() : null"
-        icon-type="ri:code-box-line"
+        icon-type="ri:code-fill"
         :tooltip-text="$t('tiptap.code')"
       />
+      <LazyEditNormalButtons
+        :is-active="tiptapEditor.isActive('codeBlock')"
+        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleCodeBlock().run() : null"
+        icon-type="ri:code-box-line"
+        :tooltip-text="$t('tiptap.codeBlock')"
+      />
       <LazyEditSpecialButtons
         v-if="fullOption"
         :disabled="!tiptapEditor.can().chain().focus().undo().run()"

diff --git a/locales/en.ts b/locales/en.ts
@@ -150,6 +150,7 @@ export default {
     link: 'Link',
     unlink: 'Unlink',
     code: 'Code',
+    codeBlock: 'Code block',
     youtube: 'Youtube',
     pretendard: 'Pretendard',
     dungGeunMo: 'DungGeunMo',

diff --git a/locales/ko.ts b/locales/ko.ts
@@ -150,6 +150,7 @@ export default {
     link: '링크',
     unlink: '링크해제',
     code: '코드',
+    codeBlock: '코드블럭',
     youtube: '유튜브',
     pretendard: '프리텐다드',
     dungGeunMo: '둥근모꼴',

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -51,13 +51,17 @@ export default defineNuxtConfig({
   modules: [
     '@nuxt/devtools',
     '@nuxt/content',
+    '@nuxtjs/device',
+    '@nuxtjs/fontaine',
     '@nuxtjs/robots',
     '@nuxtjs/supabase',
     '@nuxtjs/eslint-module',
+    '@nuxtjs/html-validator',
     '@nuxtjs/stylelint-module',
     '@nuxtjs/i18n',
     '@nuxt/image',
     'nuxt-icon',
+    'nuxt-time',
     'nuxt-simple-sitemap',
     '@vite-pwa/nuxt',
     '@vueuse/nuxt',

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "name": "Dewdew",
     "email": "yeonju.lee1005@gmail.com"
   },
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",
@@ -26,8 +26,11 @@
     "@nuxt/content": "^2.9.0",
     "@nuxt/devtools": "^1.0.5",
     "@nuxt/image": "^1.0.0",
+    "@nuxtjs/device": "^3.1.1",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/eslint-module": "^4.1.0",
+    "@nuxtjs/fontaine": "^0.4.1",
+    "@nuxtjs/html-validator": "^1.6.0",
     "@nuxtjs/i18n": "v8.0.0-rc.5",
     "@nuxtjs/robots": "^3.0.0",
     "@nuxtjs/stylelint-module": "^5.1.0",
@@ -38,6 +41,7 @@
     "@tabler/icons-vue": "2.40.0",
     "@tiptap/core": "^2.1.12",
     "@tiptap/extension-character-count": "^2.1.12",
+    "@tiptap/extension-code-block": "^2.1.13",
     "@tiptap/extension-color": "^2.1.12",
     "@tiptap/extension-focus": "^2.1.12",
     "@tiptap/extension-highlight": "^2.1.12",
@@ -65,6 +69,7 @@
     "@vite-pwa/nuxt": "^0.3.5",
     "@vueuse/core": "^10.7.0",
     "@vueuse/nuxt": "^10.7.0",
+    "add": "^2.0.6",
     "dayjs-nuxt": "^2.1.9",
     "element-plus": "2.4.2",
     "eslint": "^8.55.0",
@@ -73,6 +78,7 @@
     "nuxt": "^3.8.2",
     "nuxt-icon": "^0.6.7",
     "nuxt-simple-sitemap": "^4.1.10",
+    "nuxt-time": "^0.1.1",
     "pinia": "^2.1.7",
     "postcss-html": "^1.5.0",
     "sass": "^1.69.4",

diff --git a/pages/index.vue b/pages/index.vue
@@ -36,8 +36,8 @@ const { t } = useLocale()
 const { width } = useWindowSize()
 const { y } = useWindowScroll()
 
-const { mainIntroTitle, mainIntroText, mainIntroScrollText, mainResumeTitle, mainEducatedText, mainCareerText, mainPortfolioTitle, mainPortfolioText, mainPortfolioBackground } = useMainStore()
-const { portfolioData } = usePortfolioStore()
+const { mainIntroTitle, mainIntroText, mainIntroScrollText, mainResumeTitle, mainEducatedText, mainCareerText, mainPortfolioTitle, mainPortfolioText, mainPortfolioBackground } = storeToRefs(useMainStore())
+const { portfolioData } = storeToRefs(usePortfolioStore())
 
 useHead({
   meta: [
@@ -55,9 +55,10 @@ const mainSkillsListTrigger = ref(false)
 const referenceListTrigger = ref(false)
 const contactTrigger = ref(false)
 
-watchEffect(() => {
-  if (!y.value) { return }
-  scrollDetect()
+watch(() => y.value, () => {
+  if (y.value) {
+    scrollDetect()
+  }
 })
 
 const scrollDetect = () => {