smart-link-box-svelte Svelte Themes

Smart Link Box Svelte

AI-powered bookmark manager with SvelteKit, Supabase, and OpenAI.

๐Ÿง  SmartLinkBox

AI ์š”์•ฝ ๋ฐ ๋ถ„๋ฅ˜ ๊ธฐ๋Šฅ์„ ๊ฐ–์ถ˜ SvelteKit ๊ธฐ๋ฐ˜ ๋ถ๋งˆํฌ ๊ด€๋ฆฌ ์›น์•ฑ


โœจ ๊ฐœ์š”

SmartLinkBox๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ €์žฅํ•œ ์›น ๋งํฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ
AI๋ฅผ ํ™œ์šฉํ•ด ์ž๋™์œผ๋กœ ์š”์•ฝ, ์นดํ…Œ๊ณ ๋ฆฌ ๋ถ„๋ฅ˜, ์ œ๋ชฉ ์ƒ์„ฑ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๋ถ๋งˆํฌ ํ๋ ˆ์ด์…˜ ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค.

  • โœ๏ธ URL ์ž…๋ ฅ๋งŒ์œผ๋กœ ์ž๋™ ์š”์•ฝ/๋ถ„๋ฅ˜
  • ๐Ÿ” Supabase ๊ธฐ๋ฐ˜ ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ
  • โšก ๋น ๋ฅด๊ณ  ๊ฐ€๋ฒผ์šด SvelteKit ๊ธฐ๋ฐ˜ UI
  • ๐Ÿ“„ Storybook์œผ๋กœ UI ๋ฌธ์„œํ™”

๐ŸŽฏ ๋ชฉ์  ๋ฐ ๋ฐฐ๊ฒฝ

React์™€ Next.js์— ์ต์ˆ™ํ•œ ์ƒํƒœ์—์„œ,
์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋Š” SvelteKit๊ณผ Supabase, ๊ทธ๋ฆฌ๊ณ  AI API ์—ฐ๋™ ํ•™์Šต์„ ๋ชฉํ‘œ๋กœ ์ง„ํ–‰๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

โœ… ๊ธฐ์ˆ ์  ๋ชฉํ‘œ

  • ์ƒˆ๋กœ์šด ํ”„๋ ˆ์ž„์›Œํฌ(Svelte)์˜ ๊ตฌ์กฐ ๋ฐ ์ฒ ํ•™ ์ดํ•ด
  • ๋ฐฑ์—”๋“œ ์—†๋Š” ์„œ๋ฒ„๋ฆฌ์Šค ๊ฐœ๋ฐœ ํ๋ฆ„ ์‹ค์Šต (Supabase)
  • OpenAI API์™€์˜ ํ†ต์‹  ๊ตฌ์กฐ ํ•™์Šต
  • Storybook์œผ๋กœ UI ๊ฐœ๋ฐœ ๋…๋ฆฝ์„ฑ ๊ฒฝํ—˜

โš™๏ธ ์‚ฌ์šฉ ๊ธฐ์ˆ  ์Šคํƒ

๊ตฌ๋ถ„ ๊ธฐ์ˆ 
ํ”„๋ ˆ์ž„์›Œํฌ SvelteKit
๋ฐฑ์—”๋“œ/BaaS Supabase
AI API OpenAI GPT-4
UI ๋ฌธ์„œํ™” Storybook
์Šคํƒ€์ผ๋ง Tailwind CSS

๐Ÿ” ๊ธฐ์กด ์Šคํƒ๊ณผ์˜ ๋น„๊ต

์ด์ „๊นŒ์ง€๋Š” React + Next.js๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•ด์™”์œผ๋ฉฐ,
์ด๋ฒˆ์—๋Š” ๋” ์ง๊ด€์ ์ด๊ณ  ๋น ๋ฅธ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ์œ„ํ•ด SvelteKit์œผ๋กœ ์ „ํ™˜ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

ํ•ญ๋ชฉ React/Next.js Svelte/SvelteKit
๋ฌธ๋ฒ• ๋ณต์žก๋„ JSX, ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ•„์š” ์„ ์–ธํ˜• ๋ฐ˜์‘์„ฑ, ๋‚ด์žฅ store
๋Ÿฐํƒ€์ž„ ์„ฑ๋Šฅ ๋น„๊ต์  ํฌ๊ณ  ๋ฌด๊ฑฐ์›€ ์ปดํŒŒ์ผ ํƒ€์ž„ ์ตœ์ ํ™”, ๋น ๋ฆ„
SSR ๊ตฌ์กฐ Next.js ๊ธฐ๋ฐ˜ ์„ค์ • ํ•„์š” ๊ธฐ๋ณธ ๋‚ด์žฅ
UI ๋ถ„๋ฆฌ Context ๋“ฑ ์™ธ๋ถ€ ์˜์กด ๋งŽ์Œ ๊ฐ„๋‹จํ•œ props + store ๊ตฌ์กฐ
ํ”„๋ ˆ์ž„์›Œํฌ ๊ตฌ์กฐ ์ƒํƒœ๊ณ„ ๋ฐฉ๋Œ€ ์ปดํŒฉํŠธํ•˜๊ณ  ๋‹จ์ˆœ

๐Ÿ“Œ ์ฃผ์š” ๊ธฐ๋Šฅ (MVP ๊ธฐ์ค€)

  • โœ… ์‚ฌ์šฉ์ž ๋กœ๊ทธ์ธ (Supabase Auth)
  • โœ… URL ๋งํฌ ๋“ฑ๋ก
  • โœ… GPT-4 ๊ธฐ๋ฐ˜ ์ž๋™ ์š”์•ฝ ๊ธฐ๋Šฅ
  • โœ… GPT-4 ๊ธฐ๋ฐ˜ ์ž๋™ ์นดํ…Œ๊ณ ๋ฆฌ ์ถ”์ฒœ
  • โœ… ์‚ฌ์šฉ์ž ๋Œ€์‹œ๋ณด๋“œ์—์„œ ๋งํฌ ๋ชฉ๋ก ํ™•์ธ
  • โœ… ๋ฐ˜์‘ํ˜• ์นด๋“œ UI ๊ตฌ์„ฑ (Tailwind)
  • โœ… Storybook ๊ธฐ๋ฐ˜ UI ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„

๐Ÿ—‚๏ธ ๋””๋ ‰ํ† ๋ฆฌ ๊ตฌ์กฐ (์˜ˆ์‹œ)

src/
โ”ฃ routes/
โ”ƒ โ”ฃ +page.svelte
โ”ƒ โ”ฃ login/+page.svelte
โ”ƒ โ”ฃ dashboard/+page.svelte
โ”ƒ โ”— api/summarize/+server.ts
โ”ฃ lib/
โ”ƒ โ”ฃ supabase.ts
โ”ƒ โ”— utils.ts
โ”ฃ components/
โ”ƒ โ”ฃ LinkCard.svelte
โ”ƒ โ”ฃ AddLinkModal.svelte
โ”ฃ stores/
โ”ƒ โ”— auth.ts

๐Ÿง  AI ํ”„๋กฌํ”„ํŠธ ์„ค๊ณ„ ์˜ˆ์‹œ

"๋‹ค์Œ ๋งํฌ์˜ ๋‚ด์šฉ์„ ์งง๊ฒŒ ์š”์•ฝํ•ด์ค˜. ํ•ต์‹ฌ ๋‚ด์šฉ์„ 2~3๋ฌธ์žฅ์œผ๋กœ ์ •๋ฆฌํ•ด์ค˜: [URL]"

๐Ÿงช ๊ฐœ๋ฐœ ๋‹จ๊ณ„

  1. โœ… ๋ฌธ์„œ ์ž‘์„ฑ ๋ฐ ๊ฐœ์š” ์ •์˜
  2. ๐Ÿ”ฒ Supabase ํ…Œ์ด๋ธ” ์„ค๊ณ„
  3. ๐Ÿ”ฒ SvelteKit ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐํ™”
  4. ๐Ÿ”ฒ ์ธ์ฆ ๊ธฐ๋Šฅ ๊ตฌํ˜„
  5. ๐Ÿ”ฒ ๋งํฌ ๋“ฑ๋ก ๋ฐ ์š”์•ฝ ์ฒ˜๋ฆฌ API ๊ตฌ์„ฑ
  6. ๐Ÿ”ฒ ๋Œ€์‹œ๋ณด๋“œ UI ๊ตฌํ˜„
  7. ๐Ÿ”ฒ Storybook ์ ์šฉ

๐Ÿ’ฌ ํ–ฅํ›„ ํ™•์žฅ ์•„์ด๋””์–ด

  • ๋งํฌ ๊ณต์œ  ๊ธฐ๋Šฅ (/u/:username)
  • ๋‹คํฌ ๋ชจ๋“œ
  • ๋Œ“๊ธ€/์ข‹์•„์š” ๊ธฐ๋Šฅ
  • ๊ฐœ์ธ ์š”์•ฝ ๋ฆฌํฌํŠธ ์ƒ์„ฑ ๊ธฐ๋Šฅ
  • ๋ธŒ๋ผ์šฐ์ € ํ™•์žฅ๊ธฐ๋Šฅ์œผ๋กœ ํ™•์žฅ

Top categories

Loading Svelte Themes