feat : 라벨뽑기 페이지 수정 (#248)

* feat : 타이틀과 닫기버튼이 있는 앱바 컴포넌트 분리

* feat : 라벨뽑기 페이지 수정

src/components/Common/TitleClosedTopBar/TitleClosedTopBar.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import { TitleClosedTopBar } from './TitleClosedTopBar';
+
+const meta: Meta<typeof TitleClosedTopBar> = {
+    component: TitleClosedTopBar,
+    title: 'molecule/TitleClosedTopBar',
+    tags: ['autodocs'],
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    '이전 페이지로 이동하는 x버튼과 타이틀이 있는 앱 바 입니다.'
+            }
+        }
+    },
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ]
+};
+export default meta;
+
+type Story = StoryObj<typeof TitleClosedTopBar>;
+
+export const Default: Story = {
+    args: {
+        title: '제목'
+    }
+};

src/components/Common/TitleClosedTopBar/TitleClosedTopBar.tsx

@@ -0,0 +1,22 @@
+import { IoCloseOutline } from 'react-icons/io5';
+import { useNavigate } from 'react-router-dom';
+
+type TitleClosedTopBarProps = {
+    title?: string;
+};
+
+export const TitleClosedTopBar = ({ title = '' }: TitleClosedTopBarProps) => {
+    const navicate = useNavigate();
+
+    return (
+        <div className="w-full flex items-center justify-between">
+            <h1 className="text-[20px] font-semibold text-[#5C5C5C]">
+                {title}
+            </h1>
+
+            <button onClick={() => navicate(-1)}>
+                <IoCloseOutline className="size-[34px] text-[#5C5C5C]" />
+            </button>
+        </div>
+    );
+};

src/components/LabelLotteryPage/LotteryAnimationContainer.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LotteryAnimationContainer } from './LotteryAnimationContainer';
+
+const meta: Meta<typeof LotteryAnimationContainer> = {
+    component: LotteryAnimationContainer,
+    title: 'LotteryAnimationContainer',
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+
+type Story = StoryObj<typeof LotteryAnimationContainer>;
+
+export const Default: Story = {
+    args: {}
+};

src/components/LabelLotteryPage/LotteryAnimationContainer.tsx

@@ -0,0 +1,38 @@
+export const LotteryAnimationContainer = () => {
+    return (
+        <div className="relative">
+            <div className="absolute top-0 left-1/2 -translate-x-[calc(50%+10px)] rotate-[67deg]">
+                <div className="animate-wiggle-more animate-infinite animate-duration-[3000ms] animate-ease-in-out">
+                    <img
+                        src="/라벨_샘플_01.png"
+                        className="h-[120px] aspect-ratio"
+                    />
+                </div>
+            </div>
+
+            <div className="absolute top-[60px] left-1/2 -translate-x-[calc(50%-10px)] -rotate-[75deg]">
+                <div className="animate-wiggle-more animate-infinite animate-duration-[3000ms] animate-delay-[0000ms] animate-ease-in-out">
+                    <img
+                        src="/라벨_샘플_02.png"
+                        className="h-[120px] aspect-ratio"
+                    />
+                </div>
+            </div>
+
+            <div className="absolute top-[130px] left-1/2 -translate-x-[calc(50%+10px)] rotate-[75deg]">
+                <div className="animate-wiggle-more animate-infinite animate-duration-[3000ms] animate-delay-[0000ms] animate-ease-in-out">
+                    <img
+                        src="/라벨_샘플_01.png"
+                        className="h-[120px] aspect-ratio"
+                    />
+                </div>
+            </div>
+
+            <div className="absolute top-[10px] left-[40px] size-[50px] rounded-full bg-[#ea4444] animate-bounce animate-infinite animate-duration-[1200ms]"></div>
+
+            <div className="absolute top-[60px] right-[60px] size-[30px] rounded-full bg-[#5eb0eb] animate-bounce animate-infinite animate-duration-[1000ms]"></div>
+
+            <div className="absolute top-[180px] right-[100px] size-[40px] rounded-full bg-[#f5c33a] animate-bounce animate-infinite animate-duration-[1500ms]"></div>
+        </div>
+    );
+};

src/pages/Label/Lottery/LabelLotteryPage.tsx

@@ -1,29 +1,37 @@
-import { Margin } from '@/components/Common/Margin/Margin';
 import { Container } from '@/components/Common/Container/Container';
+import { Margin } from '@/components/Common/Margin/Margin';
+import { TitleClosedTopBar } from '@/components/Common/TitleClosedTopBar/TitleClosedTopBar';
+import { LotteryAnimationContainer } from '@/components/LabelLotteryPage/LotteryAnimationContainer';
 
 export const LabelLotteryPage = () => {
     return (
         <Container>
-            <div className="h-[100vh] flex-center flex-col gap-[10px]">
-                <div className="bg-slate-500 h-[200px] w-full px-[50px]"></div>
+            <Margin top={20} />
+
+            <TitleClosedTopBar />
 
-                <Margin top={30} />
+            <Margin top={80}>
+                <div className="h-[250px] w-full">
+                    <LotteryAnimationContainer />
+                </div>
 
-                <p>뽑기 이벤트</p>
-                <p>라벨 프로필사진 뽑아보세요</p>
+                <div className="flex-center flex-col">
+                    <p className="mt-4 text-title2 text-sample-blue">
+                        뽑기 이벤트
+                    </p>
+                    <p className="text-body1 text-sample-textgray">
+                        라벨 프로필사진 뽑아보세요
+                    </p>
+                </div>
 
                 <Margin top={50} />
 
-                <div>
-                    <button className="btn-base w-[240px] h-[60px]">
+                <div className="flex-center px-20">
+                    <button className="mt-4 w-full h-[49px] text-white flex-center rounded-full bg-sample-blue">
                         뽑기
                     </button>
-                    <Margin top={10} />
-                    <button className="btn-base w-[240px] h-[60px]">
-                        친구공유
-                    </button>
                 </div>
-            </div>
+            </Margin>
         </Container>
     );
 };

src/pages/Notification/NotificationPage.tsx

@@ -1,5 +1,6 @@
+import { Container } from '@/components/Common/Container/Container';
 import { Margin } from '@/components/Common/Margin/Margin';
-import { NotificationAppBar } from '@/components/NotificationPage/NotificationAppBar';
+import { TitleClosedTopBar } from '@/components/Common/TitleClosedTopBar/TitleClosedTopBar';
 import { NotificationContainer } from '@/components/NotificationPage/NotificationContainer';
 import { NotificationType } from '@/types/notification';
 
@@ -76,8 +77,10 @@ export const NotificationPage = () => {
         }));
 
     return (
-        <div className="p-5">
-            <NotificationAppBar />
+        <Container>
+            <Margin top={20} />
+
+            <TitleClosedTopBar title="알림" />
 
             <Margin top={20} />
 
@@ -94,6 +97,6 @@ export const NotificationPage = () => {
                 <Margin top={8} />
                 <NotificationContainer notifications={readNotifications} />
             </div>
-        </div>
+        </Container>
     );
 };

src/router.tsx

@@ -21,7 +21,6 @@ import {
     StoragePage
 } from './pages';
 import { Margin } from './components/Common/Margin/Margin';
-import { TopButtonContainer } from '@/components/HomePage/TopButtonContainer/TopButtonContainer';
 
 const CommonLayout = () => (
     <>