Skip to content

Commit

Permalink
refactor: pagecontainer v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@stakbucks
stakbucks committed Apr 7, 2024
1 parent 94295eb commit 20f5c10
Show file tree
Hide file tree
Showing 17 changed files with 234 additions and 25 deletions.
1 change: 0 additions & 1 deletion public/swe-worker-4da67dda9bc18c53.js
View file

This file was deleted.

102 changes: 102 additions & 0 deletions public/swe-worker-development.js
View file
Original file line number Diff line number Diff line change
@@ -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/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@ducanh2912/next-pwa/dist/sw-entry-worker.js":
/*!*****************************************************************************************************************************************************************************!*\
!*** ./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/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(/<link.*?href=['\"](.*?)['\"].*?>/g))/rel=['\"]stylesheet['\"]/.test(s)&&t.push(a.match(r).then(e=>e?Promise.resolve():a.add(r)));for(let[,a]of e.matchAll(/<script.*?src=['\"](.*?)['\"].*?>/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/@[email protected]_@[email protected][email protected][email protected][email protected]/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/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@ducanh2912/next-pwa/dist/sw-entry-worker.js"](0, __webpack_exports__, __webpack_require__);
/******/
/******/ })()
;
6 changes: 3 additions & 3 deletions src/app/(routes)/character/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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}`;
Expand All @@ -33,7 +33,7 @@ export default async function CharacterDetailPage({ params: { id } }: { params:
];

return (
<PageContainer>
<PageContainerV2>
<div className={`relative min-h-screen p-0 text-[18px] font-[600] gradation-bg`}>
<Suspense>
<PrefetchBoundary prefetchOptions={options}>
Expand All @@ -55,6 +55,6 @@ export default async function CharacterDetailPage({ params: { id } }: { params:
}
/>
</div>
</PageContainer>
</PageContainerV2>
);
}
6 changes: 3 additions & 3 deletions src/app/(routes)/create/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<PageContainer>
<PageContainerV2>
<CreateCharacter />
</PageContainer>
</PageContainerV2>
);
}
5 changes: 3 additions & 2 deletions src/app/(routes)/member/[memberId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -26,7 +27,7 @@ export default async function Home({ params: { memberId } }: { params: { memberI
const showCharacterCreateButton = isMyPage && characters.characters.length < MAXIMUM_CHARACTER;

return (
<PageContainer hasNavigator={characters?.isMe}>
<PageContainerV2 hasNavigator={characters?.isMe}>
<div className="flex flex-1 flex-col">
<header className="flex items-center justify-between py-5 pl-6 pr-7">
<h1 className="text-bold24 text-[#494E59]">{headerText}</h1>
Expand Down Expand Up @@ -106,6 +107,6 @@ export default async function Home({ params: { memberId } }: { params: { memberI
</div>
)}
<A2HS />
</PageContainer>
</PageContainerV2>
);
}
6 changes: 3 additions & 3 deletions src/app/(routes)/memos/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import { PageContainer } from '@/components/ui';
import { cookies } from 'next/headers';
import { Suspense } from 'react';
import Header from './_components/header';
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}`;

const prefetchOptions = allMemosQueryOptions(accessToken);

return (
<PageContainer bgColor="bg-[#F8F8FB]" hasNavigator>
<PageContainerV2 bgColor="bg-[#F8F8FB]" hasNavigator>
<Header text="기록" />
<SearchBox />
<Suspense>
<PrefetchBoundary prefetchOptions={prefetchOptions}>
<MemosContainer />
</PrefetchBoundary>
</Suspense>
</PageContainer>
</PageContainerV2>
);
}
5 changes: 3 additions & 2 deletions src/app/(routes)/my/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<PageContainer hasNavigator>
<PageContainerV2 hasNavigator>
<div className="mb-2 px-6 py-2 text-bold24">내 정보</div>
<section>
<div className="flex h-[100px] justify-between gap-3 px-6 py-3">
Expand All @@ -33,6 +34,6 @@ export default async function My() {
</section>
<div className="h-3 bg-[#F7F8F9]" role="presentation" />
<MenuList member={member} />
</PageContainer>
</PageContainerV2>
);
}
4 changes: 2 additions & 2 deletions src/app/error.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ export default function Error({ error, reset }: { error: Error & { digest?: stri
<div className=" text-H1 text-black">{'네트워크에 문제가 생겼어요!'}</div>
<div className="flex-2 mt-[40px] flex gap-[10px]">
<button
className="bg-newGray-600 text-Subtitle1 h-[40px] w-[100px] rounded-[10px] text-white"
className="h-[40px] w-[100px] rounded-[10px] bg-newGray-600 text-Subtitle1 text-white"
onClick={() => router.push('/')}
>
홈
</button>
<button
className="bg-primary-500 text-Subtitle1 h-[40px] w-[100px] rounded-[10px] text-white"
className="h-[40px] w-[100px] rounded-[10px] bg-primary-500 text-Subtitle1 text-white"
onClick={() => reset()}
>
다시 시도
Expand Down
6 changes: 3 additions & 3 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import HomeBg from '@/assets/images/homeBg.jpg';
import Logo from '@/assets/images/logo.png';
import Safe from '@/assets/images/safe.png';
import FixedBottomArea from '@/components/create-character/fixed-bottom-area';
import { PageContainer } from '@/components/ui';
import PageContainerV2 from '@/components/page-container-v2/page-container-v2';
import CtaButton from '@/components/ui/cta-button';
import { checkIsLoggedIn } from '@/services/auth/getMember';
import { cookies } from 'next/headers';
Expand All @@ -14,7 +14,7 @@ export default async function Home() {
const { isLoggedIn, member } = await checkIsLoggedIn({ accessToken: `${cookies().get('accessToken')?.value}` });
if (isLoggedIn) redirect(`member/${member?.memberId}`);
return (
<PageContainer>
<PageContainerV2>
<Image quality={100} priority alt={'홈 배경'} src={HomeBg} fill />
<Image quality={100} alt={'safe'} src={Safe} width={540} height={100} className="absolute top-0 " />
<div className="z-[2] mt-[200px] flex w-full justify-center">
Expand All @@ -34,6 +34,6 @@ export default async function Home() {
</a>
</div>
</FixedBottomArea>
</PageContainer>
</PageContainerV2>
);
}
31 changes: 31 additions & 0 deletions src/components/page-container-v2/bottom-tab-navigator-v2.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import ROUTES from '@/constants/route';
import { NavigatorItem } from './navigator-item';
import { QueryClient } from '@tanstack/react-query';
import { memberQueryOptions } from '@/store/query/useCharacterDetailQueries';
import { cookies } from 'next/headers';

export const Menus = [
{ label: '홈', path: 'member/' },
{ label: '작성', path: `${ROUTES.memoCreate}` },
{ label: '기록', path: `${ROUTES.memos}` },
{ label: '내 정보', path: `${ROUTES.my}` },
] as const;

export async function BottomTabNavigatorV2() {
const queryClient = new QueryClient();

const memeberId = (await queryClient.ensureQueryData(memberQueryOptions(`${cookies().get('accessToken')?.value}`)))
.memberId;

return (
<div className="border-top nav-bar sticky bottom-0 left-0 right-0 z-10 border-t border-t-[#E8EAEE] bg-white">
<nav className="w-full">
<ul className="relative flex justify-around">
{Menus.map((menuItem) => (
<NavigatorItem key={menuItem.path} menuItem={menuItem} memberId={memeberId} />
))}
</ul>
</nav>
</div>
);
}
47 changes: 47 additions & 0 deletions src/components/page-container-v2/navigator-item.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Member } from '@/services/auth/getMember';
import FileMultipleIcon from '@/assets/icons/file-multiple_24x24.svg';
import HomeIcon from '@/assets/icons/home_24x24.svg';
import PencilIcon from '@/assets/icons/pencil_24x24.svg';
import UserProfileIcon from '@/assets/icons/user-profile_24x24.svg';
import { Menus } from './bottom-tab-navigator-v2';

type Props = {
menuItem: (typeof Menus)[number];
memberId: Member['memberId'];
};

const IconsMap = {
홈: HomeIcon,
작성: PencilIcon,
기록: FileMultipleIcon,
'내 정보': UserProfileIcon,
};

export function NavigatorItem({ menuItem: { path, label }, memberId }: Props) {
const pathname = usePathname();
const isCurrentLocation = pathname.includes(path);

const href = path === 'member/' ? `${path}${memberId}` : path;
const IconComponent = IconsMap[label];

return (
<>
<Link href={href} className="h-full w-full items-center justify-center">
<div className="flex flex-col items-center justify-center gap-1 pb-3 pt-2">
<span>
<IconComponent className={isCurrentLocation ? 'fill-primary-500' : 'fill-newGray-400'} />
</span>
<span
className={`text-[12px] leading-4 ${isCurrentLocation ? 'text-primary-500' : 'text-newGray-400'}`}
>
{label}
</span>
</div>
</Link>
</>
);
}
Loading

0 comments on commit 20f5c10

Please sign in to comment.