Merge pull request #77 from depromeet/feat/missionCompletePage

[Feat] 완료 페이지 구현

package.json

@@ -21,7 +21,8 @@
     "framer-motion": "^10.16.5",
     "next": "13.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-lottie-player": "^1.5.5"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.0.3",
@@ -43,6 +44,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-lottie": "^1",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "chromatic": "^10.0.0",

src/app/complete/layout.tsx

@@ -0,0 +1,16 @@
+import { type PropsWithChildren } from 'react';
+import { css } from '@styled-system/css';
+
+export default function Layout({ children }: PropsWithChildren) {
+  return <div className={containerCss}>{children}</div>;
+}
+
+const containerCss = css({
+  maxWidth: '475px',
+  margin: '0 auto',
+  minHeight: '100vh',
+
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+});

src/app/complete/page.tsx

@@ -0,0 +1,72 @@
+'use client';
+import lottieJson from '@/assets/lotties/lottieExample.json';
+import Button from '@/components/Button/Button';
+import { css } from '@styled-system/css';
+import Lottie from 'react-lottie-player';
+
+export default function CompletePage() {
+  return (
+    <main className={mainWrapperCss}>
+      <div className={containerCss}>
+        <div className={contentWrapperCss}>
+          <div className={titleWrapperCss}>
+            <span className={titleCss}>오늘의 미션완료!</span>
+            <span className={subTitleCss}>{'잘 하셨어요, 오늘도 한 걸음 성장하셨네요 :)'}</span>
+          </div>
+          <div className={lottieWrapperCss}>
+            <Lottie loop animationData={lottieJson} play />
+          </div>
+        </div>
+        <Button type="button" size="large" variant="primary">
+          <span className={buttonTextCss}>확인</span>
+        </Button>
+      </div>
+    </main>
+  );
+}
+
+const mainWrapperCss = css({
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: 'bg.surface2',
+  height: '100vh',
+});
+
+const containerCss = css({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  padding: '16px 24px',
+});
+
+const contentWrapperCss = css({
+  flex: 1,
+  justifyContent: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '25px',
+});
+
+const titleWrapperCss = css({
+  display: 'flex',
+  flexDirection: 'column',
+  textAlign: 'center',
+  gap: '4px',
+});
+
+const titleCss = css({
+  textStyle: 'title2',
+  color: 'text.primary',
+});
+
+const subTitleCss = css({
+  textStyle: 'body2',
+  color: 'text.secondary',
+});
+
+const lottieWrapperCss = css({});
+
+const buttonTextCss = css({
+  textStyle: 'subtitle4',
+});

yarn.lock

@@ -29,6 +29,7 @@ __metadata:
     "@types/node": "npm:^20"
     "@types/react": "npm:^18"
     "@types/react-dom": "npm:^18"
+    "@types/react-lottie": "npm:^1"
     "@typescript-eslint/eslint-plugin": "npm:^6.12.0"
     "@typescript-eslint/parser": "npm:^6.12.0"
     chromatic: "npm:^10.0.0"
@@ -49,6 +50,7 @@ __metadata:
     prettier: "npm:^3.1.0"
     react: "npm:^18"
     react-dom: "npm:^18"
+    react-lottie-player: "npm:^1.5.5"
     storybook: "npm:^7.5.3"
     typescript: "npm:^5"
     webpack: "npm:^5.89.0"
@@ -5561,6 +5563,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-lottie@npm:^1":
+  version: 1.2.10
+  resolution: "@types/react-lottie@npm:1.2.10"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 83eb419d636a7a7f61af58bfdad9cbe6a4beda4bf4e608a5c489eb77b6c2d99ac29efbd99c73d080c73ffcba3de65e0f33835a5b8bf984217e1f66bb687fccdb
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18":
   version: 18.2.38
   resolution: "@types/react@npm:18.2.38"
@@ -12776,6 +12787,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lottie-web@npm:^5.7.6":
+  version: 5.12.2
+  resolution: "lottie-web@npm:5.12.2"
+  checksum: cd377d54a675b37ac9359306b84097ea402dff3d74a2f45e6e0dbcff1df94b3a978e92e48fd34765754bdbb94bd2d8d4da31954d95f156e77489596b235cac91
+  languageName: node
+  linkType: hard
+
 "loupe@npm:^2.3.6":
   version: 2.3.7
   resolution: "loupe@npm:2.3.7"
@@ -15416,6 +15434,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-lottie-player@npm:^1.5.5":
+  version: 1.5.5
+  resolution: "react-lottie-player@npm:1.5.5"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.3"
+    lottie-web: "npm:^5.7.6"
+    rfdc: "npm:^1.3.0"
+  peerDependencies:
+    react: ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: db41ba43031f49dedcdac2467958657b03445ccb91952db71bd9ef5c2a4d53408af90427ac1e791cbfad811515b97ff92666a5caafe2010927a27149d70a71f1
+  languageName: node
+  linkType: hard
+
 "react-refresh@npm:^0.11.0":
   version: 0.11.0
   resolution: "react-refresh@npm:0.11.0"