🔖 v1.4.0

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -16,6 +16,7 @@ body:
       - '학교 선택 화면'
       - '재료 검색 화면'
       - '재료 정보 화면'
+      - '설정 화면'
       - '기타'
 - type: textarea
   attributes:

.github/ISSUE_TEMPLATE/design-improvement.yaml

@@ -16,6 +16,7 @@ body:
       - '학교 선택 화면'
       - '재료 검색 화면'
       - '재료 정보 화면'
+      - '설정 화면'
       - '기타'
 - type: textarea
   attributes:

.github/ISSUE_TEMPLATE/feature-improvement.yaml

@@ -16,6 +16,7 @@ body:
       - '학교 선택 화면'
       - '재료 검색 화면'
       - '재료 정보 화면'
+      - '설정 화면'
       - '기타'
 - type: textarea
   attributes:

.github/ISSUE_TEMPLATE/feature-request.yaml

@@ -17,6 +17,7 @@ body:
       - '학교 선택 화면'
       - '재료 검색 화면'
       - '재료 정보 화면'
+      - '설정 화면'
       - '기타'
 - type: textarea
   attributes:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "todayschoolmeal",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "scripts": {
     "dev": "vite dev --host",
@@ -35,6 +35,6 @@
   "dependencies": {
     "@supabase/supabase-js": "^2.21.0",
     "@vercel/analytics": "^1.0.0",
-    "lucide-svelte": "^0.171.0"
+    "lucide-svelte": "^0.221.0"
   }
 }

src/app.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+:is(html, body):has(#route-main) {
+  @apply overscroll-y-none;
+}
+
 button {
   -webkit-tap-highlight-color: transparent;
 }

src/components/DatePicker.svelte

@@ -77,6 +77,26 @@
     month = 12
     year -= 1
   }
+
+  if (typeof document !== 'undefined') {
+    let swipeStartX = 0
+
+    document.addEventListener('touchstart', (e) => {
+      swipeStartX = e.touches[0].clientX
+    })
+
+    document.addEventListener('touchend', (e) => {
+      const swipeEndX = e.changedTouches[0].clientX
+
+      const swipeX = swipeEndX - swipeStartX
+
+      if (swipeX > 80) {
+        changeDate(-1)
+      } else if (swipeX < -80) {
+        changeDate(1)
+      }
+    })
+  }
 </script>
 
 <div

src/components/MenuBar.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { modalOpened } from '../a11y'
-  import { ChevronLeft, Search } from 'lucide-svelte'
+  import { ChevronLeft, Sparkle, Search } from 'lucide-svelte'
 
   export let LeftButton: any = null,
     leftButtonLink: string = '',
     leftButtonLabel: string = '',
+    leftButtonBadge: string = '',
     title: string,
     buttons: any[] = [],
     buttonLinks: (string | undefined)[] = [],
@@ -46,12 +47,17 @@
     {:else if LeftButton}
       <a
         href={leftButtonLink}
-        class="mr-3 rounded p-1 hover:bg-black/5 active:bg-black/10"
+        class="relative mr-3 rounded p-1 hover:bg-black/5 active:bg-black/10"
         role="button"
-        aria-label={leftButtonLabel}
+        aria-label={leftButtonBadge ? `${leftButtonBadge}. ${leftButtonLabel}` : leftButtonLabel}
         tabindex={ariaHidden ? -1 : 0}
       >
         <LeftButton class="h-7 w-7" />
+        {#if leftButtonBadge}
+          <Sparkle
+            class="absolute -top-1 -right-2 h-5 w-5 animate-[spin_3s_linear_infinite] fill-yellow-200 text-yellow-200"
+          />
+        {/if}
       </a>
     {/if}
     <h1 class="text-[20px] font-semibold">{title}</h1>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
+  import { notifyRelease } from '../stores'
   import { settings } from '../settings'
 
   import { Settings, Search } from 'lucide-svelte'
@@ -16,13 +17,20 @@
     const hash = window.location.hash.slice(1)
     if (window.location.hash && new Date(hash).toString() !== 'Invalid Date') {
       date = new Date(hash)
+      goto('/')
+    } else {
+      const savedDate = sessionStorage.getItem('date')
+      if (savedDate) {
+        date = new Date(savedDate)
+      }
     }
   }
 
   $: {
     if (typeof window !== 'undefined' && date instanceof Date) {
-      goto(
-        `/#${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
+      sessionStorage.setItem(
+        'date',
+        `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
           date.getDate()
         ).padStart(2, '0')}`
       )
@@ -34,6 +42,7 @@
   LeftButton={Settings}
   leftButtonLink="/settings"
   leftButtonLabel="설정"
+  leftButtonBadge={$notifyRelease ? '새 버전의 기능을 확인해보세요' : undefined}
   title="오늘뭐먹지"
   buttons={[CenteredSchool2, Search]}
   buttonLinks={['/school-selection', '/vegetable-search']}
@@ -52,3 +61,4 @@
 {#if $settings.parcipiateMenuSurvey}
   <MenuSurvey />
 {/if}
+<div id="route-main"></div>

src/routes/settings/+page.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
+  import { slide } from 'svelte/transition'
+
+  import { notifyRelease } from '../../stores'
   import { settings } from '../../settings'
   import type { Settings } from '../../settings'
 
+  import { logs } from '../../updateLog'
+
   import MenuBar from '../../components/MenuBar.svelte'
   import MenuSwitch from '../../components/MenuSwitch.svelte'
 
@@ -17,10 +22,50 @@
       return value
     })
   }
+
+  const version = import.meta.env.VITE_APP_VERSION
+
+  const updateLogs = logs[version]
 </script>
 
 <MenuBar title="설정" back={true} />
 <div class="flex h-full grow flex-col gap-3 bg-neutral-100 p-4">
+  {#if $notifyRelease}
+    <div class="flex flex-col items-center rounded-lg bg-white" out:slide|local>
+      <span class="sr-only">업데이트 정보</span>
+      <div
+        class="w-full rounded-t-lg bg-gradient-to-br from-blue-500 to-purple-600 p-8 text-center text-white"
+      >
+        <h1 class="font-mono text-3xl font-bold">v{version}</h1>
+      </div>
+      <div class="w-full">
+        <ul class="flex w-full flex-col gap-2 p-4">
+          {#each updateLogs as log}
+            <li class="flex w-full items-center gap-5 px-3">
+              <div>
+                <svelte:component this={log.Icon} class="h-8 w-8 text-purple-500" />
+              </div>
+              <div class="grow">
+                <h3 class="font-semibold">{log.title}</h3>
+                <p class="font-normal text-neutral-400">{log.description}</p>
+              </div>
+            </li>
+          {/each}
+        </ul>
+      </div>
+      <div class="w-full p-3">
+        <button
+          class="w-full rounded-xl bg-purple-500 py-3 text-xl font-medium text-white hover:bg-purple-600 focus:ring-purple-600"
+          on:click={() => {
+            $notifyRelease = false
+            localStorage.setItem('lastUsedBigRelease', version)
+          }}
+        >
+          확인
+        </button>
+      </div>
+    </div>
+  {/if}
   <ul class="divide-y overflow-hidden rounded-lg">
     <li>
       <MenuSwitch
@@ -40,7 +85,7 @@
   </ul>
   <ul class="overflow-hidden rounded-lg">
     <li class="bg-white px-5 py-3 text-neutral-400">
-      v{process.env.npm_package_version}
+      v{version}
     </li>
   </ul>
 </div>

src/stores.ts

@@ -5,6 +5,9 @@ const selectedSchool = writable(0)
 const selectedSchoolName = writable('')
 const openSchoolToast = writable(false)
 
+const lastBigRelease = import.meta.env.VITE_LAST_BIG_RELEASE
+const notifyRelease = writable(false)
+
 if (typeof window !== 'undefined') {
   selectedCity.subscribe((value) => {
     if (!value) return
@@ -21,9 +24,17 @@ if (typeof window !== 'undefined') {
     localStorage.setItem('selectedSchoolName', value)
   })
 
+  const lastUsedBigRelease = localStorage.getItem('lastUsedBigRelease') || ''
+  if (lastUsedBigRelease === '') localStorage.setItem('lastUsedBigRelease', lastBigRelease)
+  if (lastBigRelease != lastUsedBigRelease) notifyRelease.set(true)
+  notifyRelease.subscribe((value) => {
+    if (!value) return
+    localStorage.setItem('lastUsedBigRelease', lastBigRelease)
+  })
+
   selectedCity.set(localStorage.getItem('selectedCity') || '')
   selectedSchool.set(Number(localStorage.getItem('selectedSchool')) || 0)
   selectedSchoolName.set(localStorage.getItem('selectedSchoolName') || '')
 }
 
-export { selectedCity, selectedSchool, selectedSchoolName, openSchoolToast }
+export { selectedCity, selectedSchool, selectedSchoolName, openSchoolToast, notifyRelease }

src/updateLog.ts

@@ -0,0 +1,35 @@
+import type { SvelteComponent } from 'svelte'
+import { Accessibility, Wifi, Sparkles, Grab } from 'lucide-svelte'
+
+interface Feature {
+  Icon: typeof SvelteComponent
+  title: string
+  description: string
+}
+
+export const logs: Record<string, Feature[]> = {
+  '1.3.0': [
+    {
+      Icon: Accessibility,
+      title: '접근성 개선',
+      description: '키보드, 스크린 리더 사용자도 쉽게 사용할 수 있도록 만들었어요.'
+    },
+    {
+      Icon: Wifi,
+      title: '데이터 사용량 감소',
+      description: '메뉴 설문 결과를 가져오는 데 사용되는 데이터 사용량을 줄였어요.'
+    }
+  ],
+  '1.4.0': [
+    {
+      Icon: Sparkles,
+      title: '업데이트 소개',
+      description: '기능이 추가될 때마다 이런 식으로 알려드려요.'
+    },
+    {
+      Icon: Grab,
+      title: '쓸어서 날짜 이동',
+      description: '급식 화면에서 화면을 가로로 쓸면 이전/다음날로 이동할 수 있어요.'
+    }
+  ]
+}