diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index c30895f1..03c8b8be 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -39,3 +39,5 @@ jobs: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: message: '🚀 **storybook**: ${{ steps.publish_chromatic.outputs.storybookUrl }}' + comment_tag: storybook + mode: upsert diff --git a/.pnp.cjs b/.pnp.cjs index 9fbf4a2c..a687e7dd 100644 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -91,6 +91,7 @@ const RAW_RUNTIME_STATE = ["react-spring", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:9.7.4"],\ ["react-spring-bottom-sheet", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:3.5.0-alpha.0"],\ ["react-textarea-autosize", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:8.5.5"],\ + ["rollup-plugin-visualizer", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:5.13.1"],\ ["sharp", "npm:0.33.5"],\ ["storybook", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:8.4.4"],\ ["swiper", "npm:11.1.15"],\ @@ -17541,6 +17542,36 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["rollup-plugin-visualizer", [\ + ["npm:5.13.1", {\ + "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/rollup-plugin-visualizer-npm-5.13.1-a7d7846a6b-10c0.zip/node_modules/rollup-plugin-visualizer/",\ + "packageDependencies": [\ + ["rollup-plugin-visualizer", "npm:5.13.1"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:5.13.1", {\ + "packageLocation": "./.yarn/__virtual__/rollup-plugin-visualizer-virtual-84d600dea4/5/AppData/Local/Yarn/Berry/cache/rollup-plugin-visualizer-npm-5.13.1-a7d7846a6b-10c0.zip/node_modules/rollup-plugin-visualizer/",\ + "packageDependencies": [\ + ["rollup-plugin-visualizer", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:5.13.1"],\ + ["@types/rolldown", null],\ + ["@types/rollup", null],\ + ["open", "npm:8.4.2"],\ + ["picomatch", "npm:4.0.2"],\ + ["rolldown", null],\ + ["rollup", null],\ + ["source-map", "npm:0.7.4"],\ + ["yargs", "npm:17.7.2"]\ + ],\ + "packagePeers": [\ + "@types/rolldown",\ + "@types/rollup",\ + "rolldown",\ + "rollup"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["run-async", [\ ["npm:2.4.1", {\ "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/run-async-npm-2.4.1-a94bb90861-10c0.zip/node_modules/run-async/",\ @@ -18038,6 +18069,13 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "HARD"\ }],\ + ["npm:0.7.4", {\ + "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/source-map-npm-0.7.4-bc8d018ab6-10c0.zip/node_modules/source-map/",\ + "packageDependencies": [\ + ["source-map", "npm:0.7.4"]\ + ],\ + "linkType": "HARD"\ + }],\ ["npm:0.8.0-beta.0", {\ "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/source-map-npm-0.8.0-beta.0-688a309e94-10c0.zip/node_modules/source-map/",\ "packageDependencies": [\ @@ -19858,6 +19896,7 @@ const RAW_RUNTIME_STATE = ["react-spring", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:9.7.4"],\ ["react-spring-bottom-sheet", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:3.5.0-alpha.0"],\ ["react-textarea-autosize", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:8.5.5"],\ + ["rollup-plugin-visualizer", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:5.13.1"],\ ["sharp", "npm:0.33.5"],\ ["storybook", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:8.4.4"],\ ["swiper", "npm:11.1.15"],\ diff --git a/index.html b/index.html index c8af3bc2..1ee7cf09 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,8 @@ + + Bottler diff --git a/package.json b/package.json index cd8fd324..e6a9e3e9 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "lint-staged": "^15.2.10", "postcss": "^8.4.49", "prettier": "^3.3.3", + "rollup-plugin-visualizer": "^5.13.1", "storybook": "8.4.4", "tailwindcss": "^3.4.15", "typescript": "^5.7.2", diff --git a/public/fonts/BagelFatOne-Regular.ttf b/public/fonts/BagelFatOne-Regular.ttf deleted file mode 100644 index 2f99be56..00000000 Binary files a/public/fonts/BagelFatOne-Regular.ttf and /dev/null differ diff --git a/public/fonts/BagelFatOne-Regular.woff b/public/fonts/BagelFatOne-Regular.woff new file mode 100644 index 00000000..5bb004fa Binary files /dev/null and b/public/fonts/BagelFatOne-Regular.woff differ diff --git a/public/fonts/CookieRun Regular.ttf b/public/fonts/CookieRun Regular.ttf deleted file mode 100644 index 5312a2a6..00000000 Binary files a/public/fonts/CookieRun Regular.ttf and /dev/null differ diff --git a/public/fonts/CookieRun-Regular.woff b/public/fonts/CookieRun-Regular.woff new file mode 100644 index 00000000..e126e8ea Binary files /dev/null and b/public/fonts/CookieRun-Regular.woff differ diff --git a/public/fonts/Inter-VariableFont_opsz,wght.ttf b/public/fonts/Inter-VariableFont_opsz,wght.ttf deleted file mode 100644 index e31b51e3..00000000 Binary files a/public/fonts/Inter-VariableFont_opsz,wght.ttf and /dev/null differ diff --git a/public/fonts/Inter-VariableFont_opsz_wght.woff b/public/fonts/Inter-VariableFont_opsz_wght.woff new file mode 100644 index 00000000..35d4d3b3 Binary files /dev/null and b/public/fonts/Inter-VariableFont_opsz_wght.woff differ diff --git a/public/fonts/Pretendard-Regular.subset.woff2 b/public/fonts/Pretendard-Regular.subset.woff2 new file mode 100644 index 00000000..6fc8ec42 Binary files /dev/null and b/public/fonts/Pretendard-Regular.subset.woff2 differ diff --git a/public/fonts/PyeongChangPeace-Light.ttf b/public/fonts/PyeongChangPeace-Light.ttf deleted file mode 100644 index ab970615..00000000 Binary files a/public/fonts/PyeongChangPeace-Light.ttf and /dev/null differ diff --git a/public/fonts/PyeongChangPeace-Light.woff b/public/fonts/PyeongChangPeace-Light.woff new file mode 100644 index 00000000..5025c94a Binary files /dev/null and b/public/fonts/PyeongChangPeace-Light.woff differ diff --git a/public/fonts/Sagak-sagak.ttf b/public/fonts/Sagak-sagak.ttf deleted file mode 100644 index 812a0334..00000000 Binary files a/public/fonts/Sagak-sagak.ttf and /dev/null differ diff --git a/public/fonts/Sagak-sagak.woff b/public/fonts/Sagak-sagak.woff new file mode 100644 index 00000000..a7ea0bd2 Binary files /dev/null and b/public/fonts/Sagak-sagak.woff differ diff --git a/public/letter1/letter1.svg b/public/letter1/letter1.svg deleted file mode 100644 index a815f74b..00000000 --- a/public/letter1/letter1.svg +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/letter1/letter_bg3_bottom.d719e174.svg b/public/letter1/letter_bg3_bottom.d719e174.svg deleted file mode 100644 index 0d7fdf7d..00000000 --- a/public/letter1/letter_bg3_bottom.d719e174.svg +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/letter1/letter_bg3_top.8be69940.svg b/public/letter1/letter_bg3_top.8be69940.svg deleted file mode 100644 index d70767e6..00000000 --- a/public/letter1/letter_bg3_top.8be69940.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/letter2/letter2.svg b/public/letter2/letter2.svg deleted file mode 100644 index a23c6215..00000000 --- a/public/letter2/letter2.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/letter2/letter_bg2_left.2c25d20b.svg b/public/letter2/letter_bg2_left.2c25d20b.svg deleted file mode 100644 index 7883b3b2..00000000 --- a/public/letter2/letter_bg2_left.2c25d20b.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/public/letter2/letter_bg2_right.4315fa8b.svg b/public/letter2/letter_bg2_right.4315fa8b.svg deleted file mode 100644 index 15041765..00000000 --- a/public/letter2/letter_bg2_right.4315fa8b.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/public/letter2/letter_bg3_bottom.d719e174.svg b/public/letter2/letter_bg3_bottom.d719e174.svg deleted file mode 100644 index 543ff10d..00000000 --- a/public/letter2/letter_bg3_bottom.d719e174.svg +++ /dev/null @@ -1,59 +0,0 @@ - -svg width="500" height="476" viewBox="0 0 500 476" fill="none" xmlns="http://www.w3.org/2000/svg"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/letter3/bg1_mobile.99e45830.svg b/public/letter3/bg1_mobile.99e45830.svg deleted file mode 100644 index 4de7e939..00000000 --- a/public/letter3/bg1_mobile.99e45830.svg +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/letter3/bg2_mobile.16ef09f6.svg b/public/letter3/bg2_mobile.16ef09f6.svg deleted file mode 100644 index 29d43e38..00000000 --- a/public/letter3/bg2_mobile.16ef09f6.svg +++ /dev/null @@ -1,67 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/letter3/letter3.svg b/public/letter3/letter3.svg deleted file mode 100644 index 9f0d5c18..00000000 --- a/public/letter3/letter3.svg +++ /dev/null @@ -1,142 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/sw.js b/public/sw.js new file mode 100644 index 00000000..ce241bcb --- /dev/null +++ b/public/sw.js @@ -0,0 +1,34 @@ +const cacheName = '::myServiceWorker'; +const version = 'v0.0.1'; +const cacheList = []; + +self.addEventListener('fetch', (e) => { + e.respondWith( + caches.match(e.request).then((r) => { + if (r) { + return r; + } + + const fetchRequest = e.request.clone(); + + return fetch(fetchRequest).then((response) => { + if (!response) { + return response; + } + + const requestUrl = e.request.url || ''; + + const responseToCache = response.clone(); + if ( + !requestUrl.startsWith('chrome-extension') && + e.request.method !== 'POST' + ) + caches.open(version + cacheName).then((cache) => { + cache.put(e.request, responseToCache); + }); + + return response; + }); + }) + ); +}); diff --git a/src/App.tsx b/src/App.tsx index 7205ab27..55d98c0a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,12 +3,18 @@ import { RouterProvider } from 'react-router-dom'; import { router } from '@/router'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; -import { Suspense } from 'react'; +import { Suspense, useEffect } from 'react'; import { Loading } from '@/components/Common/Loading/Loading'; export const App = () => { const queryClient = new QueryClient(); - + useEffect(() => { + if ('serviceWorker' in navigator) { + window.addEventListener('load', () => { + navigator.serviceWorker.register('/sw.js'); + }); + } + }, []); return ( }> diff --git a/src/components/Common/ItemSlider/ItemSlider.stories.tsx b/src/components/Common/ItemSlider/ItemSlider.stories.tsx index bcc858b1..db6d7c27 100644 --- a/src/components/Common/ItemSlider/ItemSlider.stories.tsx +++ b/src/components/Common/ItemSlider/ItemSlider.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { ItemSlider } from './ItemSlider'; +import ItemSlider from './ItemSlider'; import SkyTheme from '@/asset/letter1/letter1.svg?react'; import HaertTheme from '@/asset/letter2/letter2.svg?react'; import FlowerTheme from '@/asset/letter3/letter3.svg?react'; diff --git a/src/components/Common/ItemSlider/ItemSlider.tsx b/src/components/Common/ItemSlider/ItemSlider.tsx index e6dfa5c7..db1a5999 100644 --- a/src/components/Common/ItemSlider/ItemSlider.tsx +++ b/src/components/Common/ItemSlider/ItemSlider.tsx @@ -30,8 +30,7 @@ type ItemSliderProps = { value: string; setValue: (value: string) => void; }; - -export const ItemSlider = ({ +const ItemSlider = ({ itemIDList, spaceBetween = 10, @@ -95,3 +94,5 @@ export const ItemSlider = ({ ); }; + +export default ItemSlider; diff --git a/src/components/CreatLetterPage/LetterInput/LetterInput.tsx b/src/components/CreatLetterPage/LetterInput/LetterInput.tsx index 3f3ac09c..c6a9949a 100644 --- a/src/components/CreatLetterPage/LetterInput/LetterInput.tsx +++ b/src/components/CreatLetterPage/LetterInput/LetterInput.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import React from 'react'; +import React, { useMemo } from 'react'; type LetterInputProps = { value: string; @@ -14,19 +14,25 @@ export const LetterInput = ({ setValue, font, placeholder, - maxLength + maxLength = undefined }: LetterInputProps) => { + const inputClass = useMemo( + () => + clsx( + `z-10 w-full bg-transparent border-none focus:border-none focus:outline-none text-wrap`, + font || 'font-sans' + ), + [font] + ); + return ( <> setValue(e.target.value)} placeholder={placeholder} - className={clsx( - `z-10 w-full bg-transparent border-none focus:border-none focus:outline-none text-wrap`, - font ? font : 'font-sans' - )} - maxLength={maxLength || undefined} + className={inputClass} + maxLength={maxLength} /> ); diff --git a/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx index cdfd0d05..09ed98d4 100644 --- a/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx +++ b/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx @@ -10,6 +10,7 @@ import { ReportButton } from '../../Report/ReportButton'; import { useParams, useNavigate, useLocation } from 'react-router-dom'; import { Label } from '@/components/Common/BottleLetter/Label/Label'; import { Loading } from '@/components/Common/Loading/Loading'; +import { LetterLine } from '@/components/CreatLetterPage/LetterLine/LetterLine'; type KeywordLetterDetailProps = { letterData: { @@ -69,7 +70,7 @@ export const KeywordLetterDetail = ({ {reportBtn === 'received' && }

{title}

- +