From d25533a1754bcd3681a2c97a4af2408e254ca1c4 Mon Sep 17 00:00:00 2001 From: Dongmin Ahn Date: Thu, 4 Apr 2024 20:16:53 +0900 Subject: [PATCH] =?UTF-8?q?refactor=20:=20onboarding=20page=20=EB=A7=88?= =?UTF-8?q?=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/LogoIcon.tsx | 54 ----------- src/app/error.tsx | 77 --------------- src/app/global-error.tsx | 88 ------------------ src/app/global.d.ts | 36 ------- src/app/globals.css | 44 --------- src/app/layout.tsx | 69 -------------- src/app/template.tsx | 47 ---------- src/components/SEO/SEO.tsx | 2 + src/{app => pages}/favicon.ico | Bin .../onboarding/RecommendFollowItem.tsx | 0 .../onboarding/index.page.tsx} | 8 +- .../onboarding/onboarding.constants.ts | 0 12 files changed, 5 insertions(+), 420 deletions(-) delete mode 100644 src/app/LogoIcon.tsx delete mode 100644 src/app/error.tsx delete mode 100644 src/app/global-error.tsx delete mode 100644 src/app/global.d.ts delete mode 100644 src/app/globals.css delete mode 100644 src/app/layout.tsx delete mode 100644 src/app/template.tsx rename src/{app => pages}/favicon.ico (100%) rename src/{app => pages}/onboarding/RecommendFollowItem.tsx (100%) rename src/{app/onboarding/page.tsx => pages/onboarding/index.page.tsx} (93%) rename src/{app => pages}/onboarding/onboarding.constants.ts (100%) diff --git a/src/app/LogoIcon.tsx b/src/app/LogoIcon.tsx deleted file mode 100644 index ccfdc1a6..00000000 --- a/src/app/LogoIcon.tsx +++ /dev/null @@ -1,54 +0,0 @@ -// TODO : Icon 컴포넌트로 변경 -const LogoIcon = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default LogoIcon; diff --git a/src/app/error.tsx b/src/app/error.tsx deleted file mode 100644 index ff4d3331..00000000 --- a/src/app/error.tsx +++ /dev/null @@ -1,77 +0,0 @@ -'use client'; - -import { useEffect } from 'react'; -import Image from 'next/image'; -import { css } from '@/styled-system/css'; - -export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) { - const onClickResetButton = () => reset(); - - useEffect(() => { - // TODO: ga로 쏘거나 하는 등의 플로우는 필요없을지 하는 생각 - console.error(error); - }, [error]); - - return ( -
-
- {'crying-face'} -
-
-
시스템에 문제가 생겼어요.
-

- 에러가 발생해 페이지를 로딩할 수 없어요. -
- 이전 페이지로 돌아가 주세요. -

-
- -
- ); -} - -const MainWrapperCss = css({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - - width: '100%', - height: '100vh', - padding: '118px 16px 50px 16px', -}); - -const imageWrapperCss = css({ - marginBottom: '18px', -}); - -const titleWrapperCss = css({ - display: 'flex', - gap: '6px', - flexDirection: 'column', - alignItems: 'center', - marginBottom: '60px', -}); - -const titleCss = css({ - textStyle: 'subtitle2', - color: 'text.primary', -}); - -const subTitleCss = css({ - textStyle: 'body5', - color: 'gray.gray600', - textAlign: 'center', -}); - -const resetButtonCss = css({ - color: 'text.secondary', - textStyle: 'subtitle4', - backgroundColor: 'gray.gray200', - width: '177px', - height: '44px', - padding: '12px 20px', - borderRadius: '16px', -}); diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx deleted file mode 100644 index 65a6646e..00000000 --- a/src/app/global-error.tsx +++ /dev/null @@ -1,88 +0,0 @@ -'use client'; - -import { useEffect } from 'react'; -import Image from 'next/image'; -import { useRouter } from 'next/navigation'; -import { isSeverError } from '@/apis/instance.api'; -import { ROUTER } from '@/constants/router'; -import { css } from '@/styled-system/css'; - -export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) { - const onClickResetButton = () => reset(); - const router = useRouter(); - useEffect(() => { - if (isSeverError(error)) { - if (error.response.status === 401) { - router.push(ROUTER.AUTH.LOGIN); - } - } - console.error(error); - }, [error]); - - return ( - - -
-
- {'crying-face'} -
-
-
시스템에 문제가 생겼어요.
-

- 에러가 발생해 페이지를 로딩할 수 없어요. -
- 이전 페이지로 돌아가 주세요. -

-
- -
- - - ); -} - -const MainWrapperCss = css({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - - width: '100%', - height: '100vh', - padding: '118px 16px 50px 16px', -}); - -const imageWrapperCss = css({ - marginBottom: '18px', -}); - -const titleWrapperCss = css({ - display: 'flex', - gap: '6px', - flexDirection: 'column', - alignItems: 'center', - marginBottom: '60px', -}); - -const titleCss = css({ - textStyle: 'subtitle2', - color: 'text.primary', -}); - -const subTitleCss = css({ - textStyle: 'body5', - color: 'gray.gray600', - textAlign: 'center', -}); - -const resetButtonCss = css({ - color: 'text.secondary', - textStyle: 'subtitle4', - backgroundColor: 'gray.gray200', - width: '177px', - height: '44px', - padding: '12px 20px', - borderRadius: '16px', -}); diff --git a/src/app/global.d.ts b/src/app/global.d.ts deleted file mode 100644 index 980b2346..00000000 --- a/src/app/global.d.ts +++ /dev/null @@ -1,36 +0,0 @@ -interface KakaoAuthParams { - redirectUri?: string; - nonce?: string; - throughTalk: boolean; - state?: string; -} - -declare global { - interface Window { - ReactNativeWebView: { - postMessage: (message: string) => void; - }; - Kakao: { - init: (keyValue: string) => void; - isInitialized: () => boolean; - Auth: { - authorize: (prams: KakaoAuthParams) => void; - }; - }; - AppleID: { - auth: { - init: ({ - clientId: string, - scope: string, - redirectURI: string, - state: string, - usePopup: boolean, - nonce: string, - }) => void; - signIn: () => void; - }; - }; - } -} - -export {}; diff --git a/src/app/globals.css b/src/app/globals.css deleted file mode 100644 index 369d1912..00000000 --- a/src/app/globals.css +++ /dev/null @@ -1,44 +0,0 @@ -@layer reset, base, tokens, recipes, utilities; - -:root { - --pretendard: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, - 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', - 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; -} - -html { - @media screen and (max-width: 475px) { - background-color: #18181d; - } -} - -.sb-show-main, -.docs-story { - background-color: #18181d; -} - -button { - cursor: pointer; - - &:disabled { - pointer-events: none; - } -} - -textarea:focus, -button:focus, -input:focus, -a { - outline: none; -} - -* { - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* 버튼 클릭시 나오는 하이라이트 제거 */ - -webkit-touch-callout: none; /* 링크를 오래 눌렀을때 액션 막기*/ - -webkit-user-select: none; /* 글자들 선택 안되게 막기 */ - -khtml-user-select: none; /* 글자들 선택 안되게 막기 */ - -moz-user-select: none; /* 글자들 선택 안되게 막기 */ - -ms-user-select: none; /* 글자들 선택 안되게 막기 */ - user-select: none; /* 글자들 선택 안되게 막기 */ - -webkit-user-drag: none; /* 이미지, 글자 drag 막기*/ -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx deleted file mode 100644 index 900959f8..00000000 --- a/src/app/layout.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { Suspense } from 'react'; -import type { Metadata } from 'next'; -import MonitoringInitializer from '@/components/MonitoringInitializer'; -import NotificationSnackBarProvider from '@/components/NotificationSnackBar/NotificationSnackBarProvider'; -import SnackBarProvider from '@/components/SnackBar/SnackBarProvider'; -import { MSWInitComponent } from '@/msw'; -import { css } from '@/styled-system/css'; - -import { QueryProvider } from '../hooks/query'; - -import './globals.css'; - -export const metadata: Metadata = { - title: '10MM', - description: '10MM', - keywords: '10mm, 10분만, 10분, 10MM, 10mm, 하루 10분, 10분 단위, 생환습관', - openGraph: { - type: 'website', - url: 'https://www.10mm.today', - title: '10MM', - description: '당신의 인생을 바꿀 10분', - siteName: '10MM', - images: [ - { - url: 'https://www.10mm.today/og-image.png', - }, - ], - }, - viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0', -}; - -export default function RootLayout({ children }: { children: React.ReactNode }) { - return ( - - - - - - - - - - - -
{children}
- - - - - - - ); -} - -const containerCss = { - maxWidth: 'maxWidth', - margin: '0 auto', - minHeight: '100vh', - backgroundColor: 'bg.surface2', -}; - -const bodyCss = { - backgroundColor: 'bg.surface3', -}; diff --git a/src/app/template.tsx b/src/app/template.tsx deleted file mode 100644 index c51ac5e0..00000000 --- a/src/app/template.tsx +++ /dev/null @@ -1,47 +0,0 @@ -'use client'; -import { useAuth } from '@/hooks/useAuth'; -import useForegroundNotification from '@/hooks/useForegroundNotification'; -// import { useEffect, useState } from 'react'; -// import { isWebView } from '@/utils/appEnv'; -// import { motion } from 'framer-motion'; - -// const variants = { -// enter: { opacity: 1, x: 0, zIndex: 1 }, -// exit: (isExit: boolean) => ({ zIndex: 0, opacity: 0, x: isExit ? -300 : 300 }), -// }; - -export default function Template({ children }: { children: React.ReactNode }) { - useAuth(); - useForegroundNotification(); - // const [customMotion, setCustomMotion] = useState(true); - - // useEffect(() => { - // const popStateEventHandler = (_event: PopStateEvent) => { - // setCustomMotion(false); - // }; - // window.addEventListener('popstate', popStateEventHandler); - - // return () => { - // window.removeEventListener('popstate', popStateEventHandler); - // }; - // }, []); - - // if (isWebView()) { - // return ( - // - // {children} - // - // ); - // } - - return
{children}
; -} diff --git a/src/components/SEO/SEO.tsx b/src/components/SEO/SEO.tsx index d2050980..bb0b7b99 100644 --- a/src/components/SEO/SEO.tsx +++ b/src/components/SEO/SEO.tsx @@ -23,6 +23,8 @@ const SEO = ({ title, description, ogImage, keywords }: Props) => { {TITLE} + + diff --git a/src/app/favicon.ico b/src/pages/favicon.ico similarity index 100% rename from src/app/favicon.ico rename to src/pages/favicon.ico diff --git a/src/app/onboarding/RecommendFollowItem.tsx b/src/pages/onboarding/RecommendFollowItem.tsx similarity index 100% rename from src/app/onboarding/RecommendFollowItem.tsx rename to src/pages/onboarding/RecommendFollowItem.tsx diff --git a/src/app/onboarding/page.tsx b/src/pages/onboarding/index.page.tsx similarity index 93% rename from src/app/onboarding/page.tsx rename to src/pages/onboarding/index.page.tsx index de4a387f..a628c57a 100644 --- a/src/app/onboarding/page.tsx +++ b/src/pages/onboarding/index.page.tsx @@ -1,14 +1,12 @@ -'use client'; - import { useCallback, useState } from 'react'; -import { useRouter } from 'next/navigation'; +import { useRouter } from 'next/router'; import { FOLLOW_API } from '@/apis/follow'; -import { RECOMMENDATION, RECOMMENDATION_REAL } from '@/app/onboarding/onboarding.constants'; -import RecommendFollowItem from '@/app/onboarding/RecommendFollowItem'; import Button from '@/components/Button/Button'; import CenterTextHeader from '@/components/Header/CenterTextHeader'; import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog'; import { ROUTER } from '@/constants/router'; +import { RECOMMENDATION, RECOMMENDATION_REAL } from '@/pages/onboarding/onboarding.constants'; +import RecommendFollowItem from '@/pages/onboarding/RecommendFollowItem'; import { eventLogger } from '@/utils'; import { getEnv } from '@/utils/appEnv'; import { css } from '@styled-system/css'; diff --git a/src/app/onboarding/onboarding.constants.ts b/src/pages/onboarding/onboarding.constants.ts similarity index 100% rename from src/app/onboarding/onboarding.constants.ts rename to src/pages/onboarding/onboarding.constants.ts