🔖 v1.0.0-beta

teamxnou · Apr 30, 2023 · 48c3a36 · 48c3a36 · vercel · Apr 30, 2023
2 parents 409839d + ce848ca
commit 48c3a36
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 47 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+.vercel
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "todayschoolmeal",
-  "version": "0.3.0",
+  "version": "1.0.0-beta",
   "private": true,
   "scripts": {
     "dev": "vite dev --host",

diff --git a/src/app.html b/src/app.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width" />
+    <title>오늘뭐먹지</title>
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">

diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
@@ -19,17 +19,11 @@
   let openDatepicker = false
   let year = date.getFullYear()
   let month = date.getMonth() + 1
-  let selectedDate = new Date()
-  $: weekDaysInMonth = new Array(new Date(year, month, 0).getDate())
-    .fill(0)
-    .map((_, i) => i + 1)
-    .filter(
-      (day) =>
-        new Date(year, month - 1, day).getDay() !== 0 &&
-        new Date(year, month - 1, day).getDay() !== 6
-    )
+  let day = date.getDate()
+  let today = new Date()
+  $: daysInMonth = Array.from(Array(new Date(year, month, 0).getDate()).keys()).map((i) => i + 1)
 
-  $: placeholderDays = new Date(year, month - 1, 1).getDay() - 1
+  $: placeholderDays = new Date(year, month - 1, 1).getDay()
   $: if (placeholderDays === -1) placeholderDays = 0
   $: if (month > 12) {
     month = 1
@@ -66,7 +60,7 @@
     }}
   />
   <div
-    class="absolute top-1/2 left-1/2 flex h-[401px] w-[280px] -translate-x-1/2 -translate-y-1/2 transform flex-col gap-3 rounded-2xl bg-white"
+    class="absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 transform flex-col gap-3 rounded-2xl bg-white h-[453px] w-[384px]"
     transition:slide={{ duration: 200 }}
   >
     <div class="flex items-center px-4 pt-4">
@@ -78,21 +72,23 @@
         <ChevronRight class="h-7 w-7" />
       </button>
     </div>
-    <ul class="grid grow grid-cols-5 grid-rows-[auto_1fr_1fr_1fr_1fr_1fr] gap-3 px-4 text-center">
-      {#each ['월', '화', '수', '목', '금'] as day}
+    <ul class="grid grow grid-cols-7 grid-rows-[auto_1fr_1fr_1fr_1fr_1fr] gap-3 px-4 text-center">
+      {#each ['일', '월', '화', '수', '목', '금', '토'] as day}
         <li class="h-3 cursor-default bg-transparent text-sm text-neutral-400 hover:bg-transparent">
           {day}
         </li>
       {/each}
-      {#each Array(placeholderDays == 5 ? 0 : placeholderDays).fill(0) as _}
+      {#each Array(placeholderDays == 7 ? 0 : placeholderDays).fill(0) as _}
         <li class="placeholder" />
       {/each}
-      {#each weekDaysInMonth as day}
+      {#each daysInMonth as day}
         <li
-          class:active={day === date.getDate()}
-          class:today={day === selectedDate.getDate() &&
-            month === selectedDate.getMonth() + 1 &&
-            year === selectedDate.getFullYear()}
+          class:active={year === date.getFullYear() &&
+            month === date.getMonth() + 1 &&
+            day === date.getDate()}
+          class:today={day === today.getDate() &&
+            month === today.getMonth() + 1 &&
+            year === today.getFullYear()}
         >
           <button
             on:click={() => {

diff --git a/src/components/MenuBar.svelte b/src/components/MenuBar.svelte
@@ -14,14 +14,12 @@
   $: queryChange(searchQuery)
 </script>
 
-<div class="sticky top-0 w-full overflow-hidden rounded-b-lg shadow-lg">
+<div class="sticky top-0 w-full overflow-hidden rounded-b-lg shadow-lg z-50">
   <header
-    class="flex items-center py-3 px-5"
+    class="flex items-center py-3 px-5 h-14"
     class:bg-neutral-100={!primary}
     class:bg-green-500={primary}
     class:text-white={primary}
-    class:h-14={primary}
-    class:h-12={!primary}
   >
     {#if back}
       <button

diff --git a/src/components/Vegetable.svelte b/src/components/Vegetable.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   export let infoIndex: number, colors: string[]
 
-  let randomColor = colors[Math.floor(Math.random() * colors.length)]
+  let randomColor = colors[infoIndex % colors.length]
 </script>
 
 <a
   href="/info?id={infoIndex}"
-  class="relative after:absolute after:bottom-0 after:left-0 after:-z-10 after:h-1/2 after:w-full"
+  class="relative after:absolute after:bottom-0 after:left-[2px] after:-z-10 after:h-1/2 after:w-[calc(100%-4px)] after:rounded"
   style="--highlighter: {randomColor}"
 >
   <slot />

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,12 +1,31 @@
 <script lang="ts">
+  import { goto } from '$app/navigation'
+
   import { Search } from 'lucide-svelte'
   import CenteredSchool2 from '../components/CenteredSchool2.svelte'
 
   import MenuBar from '../components/MenuBar.svelte'
   import MealList from '../components/MealList.svelte'
   import DatePicker from '../components/DatePicker.svelte'
 
-  let date = new Date()
+  let date: Date = new Date()
+
+  if (typeof window !== 'undefined') {
+    const hash = window.location.hash.slice(1)
+    if (window.location.hash && new Date(hash).toString() !== 'Invalid Date') {
+      date = new Date(hash)
+    }
+  }
+
+  $: {
+    if (typeof window !== 'undefined' && date instanceof Date) {
+      goto(
+        `/#${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
+          date.getDate()
+        ).padStart(2, '0')}`
+      )
+    }
+  }
 </script>
 
 <MenuBar

diff --git a/src/routes/info/+page.svelte b/src/routes/info/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores'
 
-  import { AlertCircle } from 'lucide-svelte'
+  import { AlertCircle, ChevronLeft, ChevronRight } from 'lucide-svelte'
 
   import MenuBar from '../../components/MenuBar.svelte'
   import SimpleInfo from '../../components/SimpleInfo.svelte'
@@ -12,30 +12,64 @@
   const isIdValid = (id || id == 0) && !isNaN(id) && id >= 0 && id < vegetableData.length
 
   const vegetable = vegetableData[id]
+
+  let carousel: HTMLDivElement
+  function scrollCarousel(pageOffset: number) {
+    let prevScroll = carousel.scrollLeft
+    carousel.scrollBy({
+      left: pageOffset * window.innerWidth,
+      behavior: 'smooth'
+    })
+    setTimeout(() => {
+      if (carousel.scrollLeft == prevScroll) {
+        carousel.classList.add('motion-safe:animate-[shake_400ms_ease-in-out]')
+        setTimeout(() => {
+          carousel.classList.remove('motion-safe:animate-[shake_400ms_ease-in-out]')
+        }, 500)
+      }
+    }, 50)
+  }
 </script>
 
 <div class="flex max-h-screen grow flex-col" class:bg-neutral-300={isIdValid}>
   <MenuBar title="재료 정보" back={true} />
   {#if isIdValid}
     <div class="flex grow flex-col">
-      <div class="relative flex w-screen grow snap-x snap-mandatory overflow-x-scroll">
+      <div class="relative flex w-screen grow">
         <div
-          class="flex grow snap-x snap-mandatory"
-          style="width: {vegetable.images.length * 100}vw;"
+          class="relative flex w-screen grow snap-x snap-mandatory overflow-x-scroll"
+          bind:this={carousel}
         >
-          {#each vegetable.images as image, i}
-            <div
-              class="min-w-screen max-w-screen h-[calc(100vh-54px-theme(spacing.32))] w-screen snap-start"
-            >
-              <!-- Had to use calc, it was hard to make it with only %'s. -->
-              <img
-                src={image}
-                class="h-[calc(100vh-54px-theme(spacing.32))] w-screen object-contain"
-                alt="{vegetable.name}의 {i + 1}번째 사진"
-              />
-            </div>
-          {/each}
+          <div
+            class="flex grow snap-x snap-always snap-mandatory"
+            style="width: {vegetable.images.length * 100}vw;"
+          >
+            {#each vegetable.images as image, i}
+              <div
+                class="min-w-screen max-w-screen snap-always h-[calc(100vh-54px-theme(spacing.32))] w-screen snap-start"
+              >
+                <!-- Had to use calc, it was hard to make it with only %'s. -->
+                <img
+                  src={image}
+                  class="h-full w-screen object-contain"
+                  alt="{vegetable.name}의 {i + 1}번째 사진"
+                />
+              </div>
+            {/each}
+          </div>
         </div>
+        <button
+          class="absolute bottom-3 left-3 flex h-14 w-14 items-center justify-center rounded-full bg-neutral-100 shadow-lg transition duration-200 hover:bg-neutral-200 hover:shadow-xl"
+          on:click={() => scrollCarousel(-1)}
+        >
+          <ChevronLeft class="h-7 w-7" />
+        </button>
+        <button
+          class="absolute bottom-3 right-3 flex h-14 w-14 items-center justify-center rounded-full bg-neutral-100 shadow-lg transition duration-200 hover:bg-neutral-200 hover:shadow-xl"
+          on:click={() => scrollCarousel(1)}
+        >
+          <ChevronRight class="h-7 w-7" />
+        </button>
       </div>
       <div class="h-32 rounded-t-lg bg-white p-5">
         <h1 class="text-2xl font-semibold">{vegetable.name}</h1>

diff --git a/src/vegetableData.ts b/src/vegetableData.ts
@@ -360,7 +360,7 @@ const vegetableData: Array<Vegetable> = [
   },
   {
     name: '무',
-    exceptions: ['무침'],
+    exceptions: ['열무', '무침', '율무'],
     images: [
       'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Japanese_radish_field.jpg/640px-Japanese_radish_field.jpg',
       'https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Korean_radish_%28mu%29.jpg/640px-Korean_radish_%28mu%29.jpg',

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -2,7 +2,18 @@
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {}
+    extend: {
+      keyframes: {
+        shake: {
+          '0%, 100%': { transform: 'translateX(0)' },
+          '25%': { transform: 'translateX(-8px)' },
+          '75%': { transform: 'translateX(8px)' }
+        }
+      },
+      animation: {
+        shake: 'shake 400ms ease-in-out'
+      }
+    }
   },
   plugins: []
 }