From 0cd35e4af9d9ea2488c33b23df0d50d33c574c8f Mon Sep 17 00:00:00 2001
From: Jiyoung Lim <swimjiy@gmail.com>
Date: Sat, 12 Aug 2023 13:09:41 +0900
Subject: [PATCH] fix: apply front QA (#141)

* Add deck card info to api

* Adjust complete page ui

* Add metadataBase to metadata
---
 packages/service-frontend/app/complete/page.tsx            | 4 ++--
 packages/service-frontend/app/components/common/Header.tsx | 2 +-
 packages/service-frontend/app/confirm-detail/page.tsx      | 6 +++---
 packages/service-frontend/app/deck/[id]/play/page.tsx      | 5 ++++-
 packages/service-frontend/app/layout.tsx                   | 1 +
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/service-frontend/app/complete/page.tsx b/packages/service-frontend/app/complete/page.tsx
index 5c93898..918f30b 100644
--- a/packages/service-frontend/app/complete/page.tsx
+++ b/packages/service-frontend/app/complete/page.tsx
@@ -18,9 +18,9 @@ export default function DeckCreateCompletePage(): JSX.Element {
   }
 
   return (
-    <div className="min-h-screen px-[16px] flex flex-col gap-[20px]">
+    <div className="min-h-screen flex flex-col gap-[20px]">
       <Header rightIconType="home" onClickRightIcon={() => router.push('/')} />
-      <h1 className="text-black headline-1 whitespace-pre pt-[72px]">
+      <h1 className="text-black headline-1 whitespace-pre pt-[72px] pl-[16px]">
         {'축하해!\n게임을 완성했어'}
       </h1>
 
diff --git a/packages/service-frontend/app/components/common/Header.tsx b/packages/service-frontend/app/components/common/Header.tsx
index 007e034..364a519 100644
--- a/packages/service-frontend/app/components/common/Header.tsx
+++ b/packages/service-frontend/app/components/common/Header.tsx
@@ -23,7 +23,7 @@ function Header({
 }: Props): JSX.Element {
   return (
     <header
-      className={`fixed w-full max-w-[420px] h-[52px] z-[500] leading-[52px] top-0 flex justify-center items-center ${className}`}
+      className={`fixed w-full max-w-[396px] h-[52px] z-[500] leading-[52px] top-0 flex justify-center items-center ${className}`}
     >
       {leftIconType && (
         <Icon
diff --git a/packages/service-frontend/app/confirm-detail/page.tsx b/packages/service-frontend/app/confirm-detail/page.tsx
index 2f7ffdc..4363bba 100644
--- a/packages/service-frontend/app/confirm-detail/page.tsx
+++ b/packages/service-frontend/app/confirm-detail/page.tsx
@@ -89,11 +89,11 @@ export default function ConfirmDetailPage(): JSX.Element {
       {/* 게임 상세 타이틀 */}
       <div className="bg-grey-800 h-[218px] py-[72px]">
         <div className="flex flex-col gap-1 px-[32px] py-[20px]">
-          <div className="flex gap-[4.5px]">
+          <div className="flex gap-[4.5px] headline-4 text-white">
             <Icon type="cardcountWhite" width={20} height={20} />
-            50
+            {deck.cardList.length}
           </div>
-          <div className="headline-1 text-white">뉴 매시업 이미지 게임</div>
+          <div className="headline-1 text-white">{deck.name}</div>
         </div>
       </div>
       {/* 키워드 선택 */}
diff --git a/packages/service-frontend/app/deck/[id]/play/page.tsx b/packages/service-frontend/app/deck/[id]/play/page.tsx
index 4783b53..1e6ad66 100644
--- a/packages/service-frontend/app/deck/[id]/play/page.tsx
+++ b/packages/service-frontend/app/deck/[id]/play/page.tsx
@@ -1,9 +1,11 @@
 'use client'
 import { useCallback, useState } from 'react'
 
+import { useRecoilValue } from 'recoil'
 import { Button, SecondaryButton } from '@ppoba/ui'
 
 import { Header } from '@/app/components'
+import { deckFormAtomState } from '@/store/deck'
 
 import Card from './Card'
 import { CardStyle } from './constant'
@@ -14,6 +16,7 @@ export default function DeckPlay(): JSX.Element {
   const [isShowBack, setIsShowBack] = useState(false)
   const [currentIndex, setCurrentIndex] = useState(0)
   const [cards, setCard] = useState<PlayCard[]>([])
+  const deck = useRecoilValue(deckFormAtomState)
 
   const handleClickShuffleButton = useCallback(() => {
     // currentIndex부터 마지막카드까지만 섞는다.
@@ -38,7 +41,7 @@ export default function DeckPlay(): JSX.Element {
         {/* 게임 정보 */}
         <div className="flex flex-col gap-[4px] pt-[52px] px-[8px] text-center">
           <strong className="headline-1 text-grey-800">
-            뉴 매시업 이미지 게임
+            {deck.name}
           </strong>
           <p className="subtitle-3 text-grey-600">
             남은 카드 {cards.length - currentIndex}장
diff --git a/packages/service-frontend/app/layout.tsx b/packages/service-frontend/app/layout.tsx
index 8625d73..523ea05 100644
--- a/packages/service-frontend/app/layout.tsx
+++ b/packages/service-frontend/app/layout.tsx
@@ -13,6 +13,7 @@ export const metadata: Metadata = {
   title: 'PPOBA - 뽀바',
   description: '뽀바, 너만의 카드게임을 즐겨봐',
   themeColor: '#F7F7F7',
+  metadataBase: new URL('https://ppoba.com'),
 }
 
 export default async function RootLayout({