Merge pull request #11 from frorong/feature/category

Add category

src/constant/blogs/blog11.md

@@ -18,7 +18,7 @@ category: JS
 
 ## Back Tracking
 
-백 트래킹은 알고리즘 기법 중 하나이다. 주어진 조건에 따라 문제를 해결 가능한 해가 존재하는지, 존재하지 않은지 판별할 수 있는 알고리즘이다. 이를 결정 문제라고 한다. 주어진 조건에 따라 문제를 해결 가능한 해가 존재하는지, 존재하지 않은지 판별하는 것. 이를 결정 문제라고 한다.
+백 트래킹은 알고리즘 기법 중 하나이다. 주어진 조건에 따라 문제를 해결 가능한 해가 존재하는지, 존재하지 않은지 판별할 수 있는 알고리즘이다. 이를 결정 문제라고 한다. 주어진 조건에 따라 문제를 해결 가능한 해가 존재하는지, 존재하지 않은지 판별하는 것.
 <br/>
 
 백 트래킹은 주어진 모든 가능한 해들을 탐색한다. 주로 DFS를 사용하며, 해가 조건에 일치하지 않는다면, 뒤로 되돌아가 다른 해를 색인한다.

src/lib/types/blog.ts

@@ -1,7 +1,18 @@
+export type CategoryType =
+  | '전체'
+  | 'CS'
+  | 'JS'
+  | 'React'
+  | 'Svelte'
+  | 'TS'
+  | 'FE'
+  | 'NEXT'
+
 export interface BlogType {
   id: number
   title: string
   description: string
   date: string
   slug: string
+  category: CategoryType
 }

src/routes/+layout.server.ts

@@ -1,6 +1,6 @@
-// import type { LayoutServerLoad } from './$types'
+import type { LayoutServerLoad } from './$types'
 
-// export const load: LayoutServerLoad =
-//   async (event) => ({
-//     session: await event.locals.auth(),
-//   })
+export const load: LayoutServerLoad =
+  async (event) => ({
+    session: await event.locals.auth(),
+  })

src/routes/blog/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import BlogCard from '@components/blogCard.svelte'
   export let data
+
+  export let selectedOption = '전체'
+  export const ALL_CATEGORY = '전체'
 </script>
 
 <section>
@@ -12,11 +15,28 @@
     >
       Frorong's blog
     </h1>
+
+    <select
+      class="mt-4 block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50"
+      bind:value="{selectedOption}"
+    >
+      <option value="전체">전체</option>
+      <option value="CS">CS</option>
+      <option value="JS">JS</option>
+      <option value="React"
+        >React</option
+      >
+      <option value="Svelte"
+        >Svelte</option
+      >
+      <option value="TS">TS</option>
+      <option value="FE">FE</option>
+      <option value="Next">Next</option>
+    </select>
     <div
       class="mt-8 flex flex-col space-y-10"
     >
-      <span></span>
-      {#each data.blogs as blog (blog.id)}
+      {#each data.blogs.filter((blog) => blog.category == selectedOption || selectedOption == ALL_CATEGORY) as blog (blog.id)}
         <BlogCard blog="{blog}" />
       {/each}
     </div>