From 20f5c108442ed677ea89e196491f0c0816c4594a Mon Sep 17 00:00:00 2001 From: stakbucks Date: Sun, 7 Apr 2024 15:32:31 +0900 Subject: [PATCH] refactor: pagecontainer v2 --- public/swe-worker-4da67dda9bc18c53.js | 1 - public/swe-worker-development.js | 102 ++++++++++++++++++ src/app/(routes)/character/[id]/page.tsx | 6 +- src/app/(routes)/create/page.tsx | 6 +- src/app/(routes)/member/[memberId]/page.tsx | 5 +- src/app/(routes)/memos/page.tsx | 6 +- src/app/(routes)/my/page.tsx | 5 +- src/app/error.tsx | 4 +- src/app/page.tsx | 6 +- .../bottom-tab-navigator-v2.tsx | 31 ++++++ .../page-container-v2/navigator-item.tsx | 47 ++++++++ .../page-container-v2/page-container-v2.tsx | 27 +++++ src/stories/character-detail.stories.tsx | 2 +- src/stories/cta-button.stories.tsx | 2 +- src/stories/dialog.stories.tsx | 2 +- src/stories/popover.stories.tsx | 3 +- src/stories/toast.stories.tsx | 4 +- 17 files changed, 234 insertions(+), 25 deletions(-) delete mode 100644 public/swe-worker-4da67dda9bc18c53.js create mode 100644 public/swe-worker-development.js create mode 100644 src/components/page-container-v2/bottom-tab-navigator-v2.tsx create mode 100644 src/components/page-container-v2/navigator-item.tsx create mode 100644 src/components/page-container-v2/page-container-v2.tsx diff --git a/public/swe-worker-4da67dda9bc18c53.js b/public/swe-worker-4da67dda9bc18c53.js deleted file mode 100644 index 36e6e59..0000000 --- a/public/swe-worker-4da67dda9bc18c53.js +++ /dev/null @@ -1 +0,0 @@ -self.onmessage=async e=>{switch(e.data.type){case"__START_URL_CACHE__":{let t=e.data.url,a=await fetch(t);if(!a.redirected)return(await caches.open("start-url")).put(t,a);return Promise.resolve()}case"__FRONTEND_NAV_CACHE__":{let t=e.data.url,a=await caches.open("pages");if(await a.match(t,{ignoreSearch:!0}))return;let s=await fetch(t);if(!s.ok)return;if(a.put(t,s.clone()),e.data.shouldCacheAggressively&&s.headers.get("Content-Type")?.includes("text/html"))try{let e=await s.text(),t=[],a=await caches.open("static-style-assets"),r=await caches.open("next-static-js-assets"),c=await caches.open("static-js-assets");for(let[s,r]of e.matchAll(//g))/rel=['"]stylesheet['"]/.test(s)&&t.push(a.match(r).then(e=>e?Promise.resolve():a.add(r)));for(let[,a]of e.matchAll(//g)){let e=/\/_next\/static.+\.js$/i.test(a)?r:c;t.push(e.match(a).then(t=>t?Promise.resolve():e.add(a)))}return await Promise.all(t)}catch{}return Promise.resolve()}default:return Promise.resolve()}}; \ No newline at end of file diff --git a/public/swe-worker-development.js b/public/swe-worker-development.js new file mode 100644 index 0000000..d47b5ac --- /dev/null +++ b/public/swe-worker-development.js @@ -0,0 +1,102 @@ +/* + * ATTENTION: An "eval-source-map" devtool has been used. + * This devtool is neither made for production nor for readable output files. + * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools. + * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) + * or disable the default devtool with "devtool: false". + * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). + */ +/******/ (function() { // webpackBootstrap +/******/ "use strict"; +/******/ var __webpack_modules__ = ({ + +/***/ "./node_modules/.pnpm/@ducanh2912+next-pwa@10.2.2_@swc+core@1.4.2_esbuild@0.18.20_next@14.0.4_webpack@5.89.0/node_modules/@ducanh2912/next-pwa/dist/sw-entry-worker.js": +/*!*****************************************************************************************************************************************************************************!*\ + !*** ./node_modules/.pnpm/@ducanh2912+next-pwa@10.2.2_@swc+core@1.4.2_esbuild@0.18.20_next@14.0.4_webpack@5.89.0/node_modules/@ducanh2912/next-pwa/dist/sw-entry-worker.js ***! + \*****************************************************************************************************************************************************************************/ +/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { + +eval(__webpack_require__.ts("__webpack_require__.r(__webpack_exports__);\nself.onmessage=async e=>{switch(e.data.type){case\"__START_URL_CACHE__\":{let t=e.data.url,a=await fetch(t);if(!a.redirected)return (await caches.open(\"start-url\")).put(t,a);return Promise.resolve()}case\"__FRONTEND_NAV_CACHE__\":{let t=e.data.url,a=await caches.open(\"pages\");if(await a.match(t,{ignoreSearch:!0}))return;let s=await fetch(t);if(!s.ok)return;if(a.put(t,s.clone()),e.data.shouldCacheAggressively&&s.headers.get(\"Content-Type\")?.includes(\"text/html\"))try{let e=await s.text(),t=[],a=await caches.open(\"static-style-assets\"),r=await caches.open(\"next-static-js-assets\"),c=await caches.open(\"static-js-assets\");for(let[s,r]of e.matchAll(//g))/rel=['\"]stylesheet['\"]/.test(s)&&t.push(a.match(r).then(e=>e?Promise.resolve():a.add(r)));for(let[,a]of e.matchAll(//g)){let e=/\\/_next\\/static.+\\.js$/i.test(a)?r:c;t.push(e.match(a).then(t=>t?Promise.resolve():e.add(a)));}return await Promise.all(t)}catch{}return Promise.resolve()}default:return Promise.resolve()}};//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvLnBucG0vQGR1Y2FuaDI5MTIrbmV4dC1wd2FAMTAuMi4yX0Bzd2MrY29yZUAxLjQuMl9lc2J1aWxkQDAuMTguMjBfbmV4dEAxNC4wLjRfd2VicGFja0A1Ljg5LjAvbm9kZV9tb2R1bGVzL0BkdWNhbmgyOTEyL25leHQtcHdhL2Rpc3Qvc3ctZW50cnktd29ya2VyLmpzIiwibWFwcGluZ3MiOiI7QUFBQSx5QkFBeUIsb0JBQW9CLDJCQUEyQixrQ0FBa0Msa0VBQWtFLHlCQUF5Qiw4QkFBOEIsOENBQThDLG9CQUFvQixnQkFBZ0IsU0FBUyxxQkFBcUIsZ0JBQWdCLCtHQUErRywwSkFBMEosd0pBQXdKLDhEQUE4RCw0Q0FBNEMsMERBQTBELDRCQUE0QixPQUFPLHlCQUF5QiIsInNvdXJjZXMiOlsid2VicGFjazovL19OX0UvLi9ub2RlX21vZHVsZXMvLnBucG0vQGR1Y2FuaDI5MTIrbmV4dC1wd2FAMTAuMi4yX0Bzd2MrY29yZUAxLjQuMl9lc2J1aWxkQDAuMTguMjBfbmV4dEAxNC4wLjRfd2VicGFja0A1Ljg5LjAvbm9kZV9tb2R1bGVzL0BkdWNhbmgyOTEyL25leHQtcHdhL2Rpc3Qvc3ctZW50cnktd29ya2VyLmpzP2QxNWUiXSwic291cmNlc0NvbnRlbnQiOlsic2VsZi5vbm1lc3NhZ2U9YXN5bmMgZT0+e3N3aXRjaChlLmRhdGEudHlwZSl7Y2FzZVwiX19TVEFSVF9VUkxfQ0FDSEVfX1wiOntsZXQgdD1lLmRhdGEudXJsLGE9YXdhaXQgZmV0Y2godCk7aWYoIWEucmVkaXJlY3RlZClyZXR1cm4gKGF3YWl0IGNhY2hlcy5vcGVuKFwic3RhcnQtdXJsXCIpKS5wdXQodCxhKTtyZXR1cm4gUHJvbWlzZS5yZXNvbHZlKCl9Y2FzZVwiX19GUk9OVEVORF9OQVZfQ0FDSEVfX1wiOntsZXQgdD1lLmRhdGEudXJsLGE9YXdhaXQgY2FjaGVzLm9wZW4oXCJwYWdlc1wiKTtpZihhd2FpdCBhLm1hdGNoKHQse2lnbm9yZVNlYXJjaDohMH0pKXJldHVybjtsZXQgcz1hd2FpdCBmZXRjaCh0KTtpZighcy5vaylyZXR1cm47aWYoYS5wdXQodCxzLmNsb25lKCkpLGUuZGF0YS5zaG91bGRDYWNoZUFnZ3Jlc3NpdmVseSYmcy5oZWFkZXJzLmdldChcIkNvbnRlbnQtVHlwZVwiKT8uaW5jbHVkZXMoXCJ0ZXh0L2h0bWxcIikpdHJ5e2xldCBlPWF3YWl0IHMudGV4dCgpLHQ9W10sYT1hd2FpdCBjYWNoZXMub3BlbihcInN0YXRpYy1zdHlsZS1hc3NldHNcIikscj1hd2FpdCBjYWNoZXMub3BlbihcIm5leHQtc3RhdGljLWpzLWFzc2V0c1wiKSxjPWF3YWl0IGNhY2hlcy5vcGVuKFwic3RhdGljLWpzLWFzc2V0c1wiKTtmb3IobGV0W3Mscl1vZiBlLm1hdGNoQWxsKC88bGluay4qP2hyZWY9WydcIl0oLio/KVsnXCJdLio/Pi9nKSkvcmVsPVsnXCJdc3R5bGVzaGVldFsnXCJdLy50ZXN0KHMpJiZ0LnB1c2goYS5tYXRjaChyKS50aGVuKGU9PmU/UHJvbWlzZS5yZXNvbHZlKCk6YS5hZGQocikpKTtmb3IobGV0WyxhXW9mIGUubWF0Y2hBbGwoLzxzY3JpcHQuKj9zcmM9WydcIl0oLio/KVsnXCJdLio/Pi9nKSl7bGV0IGU9L1xcL19uZXh0XFwvc3RhdGljLitcXC5qcyQvaS50ZXN0KGEpP3I6Yzt0LnB1c2goZS5tYXRjaChhKS50aGVuKHQ9PnQ/UHJvbWlzZS5yZXNvbHZlKCk6ZS5hZGQoYSkpKTt9cmV0dXJuIGF3YWl0IFByb21pc2UuYWxsKHQpfWNhdGNoe31yZXR1cm4gUHJvbWlzZS5yZXNvbHZlKCl9ZGVmYXVsdDpyZXR1cm4gUHJvbWlzZS5yZXNvbHZlKCl9fTsiXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/.pnpm/@ducanh2912+next-pwa@10.2.2_@swc+core@1.4.2_esbuild@0.18.20_next@14.0.4_webpack@5.89.0/node_modules/@ducanh2912/next-pwa/dist/sw-entry-worker.js\n")); + +/***/ }) + +/******/ }); +/************************************************************************/ +/******/ // The require scope +/******/ var __webpack_require__ = {}; +/******/ +/************************************************************************/ +/******/ /* webpack/runtime/make namespace object */ +/******/ !function() { +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ }(); +/******/ +/******/ /* webpack/runtime/trusted types policy */ +/******/ !function() { +/******/ var policy; +/******/ __webpack_require__.tt = function() { +/******/ // Create Trusted Type policy if Trusted Types are available and the policy doesn't exist yet. +/******/ if (policy === undefined) { +/******/ policy = { +/******/ createScript: function(script) { return script; } +/******/ }; +/******/ if (typeof trustedTypes !== "undefined" && trustedTypes.createPolicy) { +/******/ policy = trustedTypes.createPolicy("nextjs#bundler", policy); +/******/ } +/******/ } +/******/ return policy; +/******/ }; +/******/ }(); +/******/ +/******/ /* webpack/runtime/trusted types script */ +/******/ !function() { +/******/ __webpack_require__.ts = function(script) { return __webpack_require__.tt().createScript(script); }; +/******/ }(); +/******/ +/******/ /* webpack/runtime/react refresh */ +/******/ !function() { +/******/ if (__webpack_require__.i) { +/******/ __webpack_require__.i.push(function(options) { +/******/ var originalFactory = options.factory; +/******/ options.factory = function(moduleObject, moduleExports, webpackRequire) { +/******/ var hasRefresh = typeof self !== "undefined" && !!self.$RefreshInterceptModuleExecution$; +/******/ var cleanup = hasRefresh ? self.$RefreshInterceptModuleExecution$(moduleObject.id) : function() {}; +/******/ try { +/******/ originalFactory.call(this, moduleObject, moduleExports, webpackRequire); +/******/ } finally { +/******/ cleanup(); +/******/ } +/******/ } +/******/ }) +/******/ } +/******/ }(); +/******/ +/******/ /* webpack/runtime/compat */ +/******/ +/******/ +/******/ // noop fns to prevent runtime errors during initialization +/******/ if (typeof self !== "undefined") { +/******/ self.$RefreshReg$ = function () {}; +/******/ self.$RefreshSig$ = function () { +/******/ return function (type) { +/******/ return type; +/******/ }; +/******/ }; +/******/ } +/******/ +/************************************************************************/ +/******/ +/******/ // startup +/******/ // Load entry module and return exports +/******/ // This entry module can't be inlined because the eval-source-map devtool is used. +/******/ var __webpack_exports__ = {}; +/******/ __webpack_modules__["./node_modules/.pnpm/@ducanh2912+next-pwa@10.2.2_@swc+core@1.4.2_esbuild@0.18.20_next@14.0.4_webpack@5.89.0/node_modules/@ducanh2912/next-pwa/dist/sw-entry-worker.js"](0, __webpack_exports__, __webpack_require__); +/******/ +/******/ })() +; \ No newline at end of file diff --git a/src/app/(routes)/character/[id]/page.tsx b/src/app/(routes)/character/[id]/page.tsx index 1da7f19..3704f11 100644 --- a/src/app/(routes)/character/[id]/page.tsx +++ b/src/app/(routes)/character/[id]/page.tsx @@ -1,6 +1,5 @@ import NoteEditIcon from '@/assets/icons/note-edit_24x24.svg'; import FixedBottomArea from '@/components/fixed-bottom-area'; -import { PageContainer } from '@/components/ui'; import CTAButton from '@/components/ui/cta-button'; import { checkIsLoggedIn } from '@/services/auth/getMember'; import { cookies } from 'next/headers'; @@ -16,6 +15,7 @@ import { characterDetailQueryOptions, memberQueryOptions } from '@/store/query/u import { characterSpecialtyOptions } from '@/store/query/useCharacterSpecialtyQuery'; import { characterMemosOptions } from '@/store/query/useCharacterMemosQuery'; import { PrefetchOptions } from '@/types/query'; +import PageContainerV2 from '@/components/page-container-v2/page-container-v2'; export default async function CharacterDetailPage({ params: { id } }: { params: { id: number } }) { const accessToken = `${cookies().get('accessToken')?.value}`; @@ -33,7 +33,7 @@ export default async function CharacterDetailPage({ params: { id } }: { params: ]; return ( - +
@@ -55,6 +55,6 @@ export default async function CharacterDetailPage({ params: { id } }: { params: } />
- + ); } diff --git a/src/app/(routes)/create/page.tsx b/src/app/(routes)/create/page.tsx index a30798f..8512eff 100644 --- a/src/app/(routes)/create/page.tsx +++ b/src/app/(routes)/create/page.tsx @@ -1,13 +1,13 @@ export const dynamic = 'force-dynamic'; import CreateCharacter from '@/components/create-character'; -import { PageContainer } from '@/components/ui'; +import PageContainerV2 from '@/components/page-container-v2/page-container-v2'; // 로그인 이전에 캐릭터 생성하는 페이지 export default async function Page() { return ( - + - + ); } diff --git a/src/app/(routes)/member/[memberId]/page.tsx b/src/app/(routes)/member/[memberId]/page.tsx index 4a07fcd..154bc34 100644 --- a/src/app/(routes)/member/[memberId]/page.tsx +++ b/src/app/(routes)/member/[memberId]/page.tsx @@ -10,6 +10,7 @@ import CharacterCard from './character-card'; import CharacterCreateButton from './character-create-button'; import CharacterCreateLink from './character-create-link'; import { LikeButton, LikeButtonWithTooltip } from './like-button'; +import PageContainerV2 from '@/components/page-container-v2/page-container-v2'; const MAXIMUM_CHARACTER = 6; @@ -26,7 +27,7 @@ export default async function Home({ params: { memberId } }: { params: { memberI const showCharacterCreateButton = isMyPage && characters.characters.length < MAXIMUM_CHARACTER; return ( - +

{headerText}

@@ -106,6 +107,6 @@ export default async function Home({ params: { memberId } }: { params: { memberI
)} - + ); } diff --git a/src/app/(routes)/memos/page.tsx b/src/app/(routes)/memos/page.tsx index 5b026e9..c7bcfd6 100644 --- a/src/app/(routes)/memos/page.tsx +++ b/src/app/(routes)/memos/page.tsx @@ -1,4 +1,3 @@ -import { PageContainer } from '@/components/ui'; import { cookies } from 'next/headers'; import { Suspense } from 'react'; import Header from './_components/header'; @@ -6,6 +5,7 @@ import MemosContainer from './_components/memos-container'; import SearchBox from './_components/search-box'; import { allMemosQueryOptions } from '@/store/query/useAllMemosQuery'; import { PrefetchBoundary } from '@/context/prefetch-boundary'; +import PageContainerV2 from '@/components/page-container-v2/page-container-v2'; export default async function MemosPage() { const accessToken = `${cookies().get('accessToken')?.value}`; @@ -13,7 +13,7 @@ export default async function MemosPage() { const prefetchOptions = allMemosQueryOptions(accessToken); return ( - +
@@ -21,6 +21,6 @@ export default async function MemosPage() { - + ); } diff --git a/src/app/(routes)/my/page.tsx b/src/app/(routes)/my/page.tsx index 85cb67c..7505bf3 100644 --- a/src/app/(routes)/my/page.tsx +++ b/src/app/(routes)/my/page.tsx @@ -5,13 +5,14 @@ import Link from 'next/link'; import { redirect } from 'next/navigation'; import MenuList from './menu-list'; import { cookies } from 'next/headers'; +import PageContainerV2 from '@/components/page-container-v2/page-container-v2'; export default async function My() { const { isLoggedIn, member } = await checkIsLoggedIn({ accessToken: `${cookies().get('accessToken')?.value}` }); if (!isLoggedIn || member === undefined) redirect('/'); return ( - +
내 정보
@@ -33,6 +34,6 @@ export default async function My() {
- + ); } diff --git a/src/app/error.tsx b/src/app/error.tsx index 548cd31..79b944c 100644 --- a/src/app/error.tsx +++ b/src/app/error.tsx @@ -17,13 +17,13 @@ export default function Error({ error, reset }: { error: Error & { digest?: stri
{'네트워크에 문제가 생겼어요!'}