feat : 편지 작성 모달 개발 및 성공 페이지 개발 (#149)

* chore : 스토리북 라우터 제거 * feat : 모달 컴포넌트 구현 * story : 모달 스토리 수정 * feat : 성공 페이지 개발 * chore : router 수정 * story : 스토리 라우팅 수정 * chore : snapPoint 수정 * chore : 스토리 수정 * story : story 수정 * story : 스토리 오류 수정
prgrms-web-devcourse-final-project · Dec 1, 2024 · fc9589b · fc9589b
1 parent 05424f6
commit fc9589b
Show file tree

Hide file tree

Showing 15 changed files with 216 additions and 69 deletions.
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -1,6 +1,5 @@
 import '../src/index.css';
-import { RouterProvider } from 'react-router-dom';
-import { router } from '@/router';
+import { MemoryRouter } from 'react-router-dom';
 
 const preview = {
     parameters: {
@@ -11,13 +10,7 @@ const preview = {
             }
         }
     },
-    decorators: [
-        (Story) => (
-            <RouterProvider router={router}>
-                <Story />
-            </RouterProvider>
-        )
-    ]
+    decorators: [(Story) => <Story />]
 };
 
 export default preview;
diff --git a/public/폭죽.png b/public/폭죽.png
diff --git a/src/components/Common/ListAlarmItem/ListAlarmItem.stories.tsx b/src/components/Common/ListAlarmItem/ListAlarmItem.stories.tsx
@@ -29,6 +29,6 @@ export const Default: Story = {
 export const Default2: Story = {
     args: {
         title: '빨리 읽으세요',
-        contents: '편지가 500통 도착했습니다!'
+        contents: '편지가 500통 도착했습니다!!'
     }
 };
diff --git a/src/components/Letter/Post/PostLetterForm.tsx b/src/components/Letter/Post/PostLetterForm.tsx
@@ -28,7 +28,12 @@ export const PostLetterForm = () => {
     ];
 
     return (
-        <SliderMenuContainer>
+        <SliderMenuContainer
+            snapPoints={() => [
+                window.innerHeight * 0.05,
+                window.innerHeight * 0.6
+            ]}
+        >
             <Margin top={18} />
             <div>
                 <div className="relative flex justify-center">
@@ -78,7 +83,7 @@ export const PostLetterForm = () => {
                         leftLabel="글씨체"
                         rightLabel="편지지"
                     />
-                    <Margin bottom={90} />
+                    <Margin bottom={30} />
                 </div>
             </div>
         </SliderMenuContainer>

diff --git a/src/components/Letter/SelectItem/SelectItem.stories.tsx b/src/components/Letter/SelectItem/SelectItem.stories.tsx
@@ -1,17 +1,29 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { SelectItem } from './SelectItem';
+import { MemoryRouter } from 'react-router-dom';
+import React, { useState } from 'react';
 
 const meta: Meta<typeof SelectItem> = {
     component: SelectItem,
-    title: 'organisms/moSelectItem',
+    title: 'organisms/SelectItem',
     tags: ['autodocs'],
-    argTypes: {}
+    argTypes: {},
+    decorators: [
+        (Story) => (
+            <MemoryRouter initialEntries={['/']}>
+                <Story />
+            </MemoryRouter>
+        )
+    ]
 };
 export default meta;
 
 type Story = StoryObj<typeof SelectItem>;
 
 export const Default: Story = {
-    args: {}
+    render: () => {
+        const [isActive, setIsActive] = useState(false);
+
+        return <SelectItem isActive={isActive} setIsActive={setIsActive} />;
+    }
 };
diff --git a/src/components/Letter/SelectItem/SelectItem.tsx b/src/components/Letter/SelectItem/SelectItem.tsx
@@ -5,13 +5,20 @@ import { LabelProps } from '@/types/label';
 import { KeywordList } from '../KeywordList/KeywordList';
 import { LabelList } from '../LabelList/LabelList';
 import { CreateButton } from '../CreateButton/CreateButton';
+import { useNavigate } from 'react-router-dom';
 
-export const SelectItem = () => {
+type SelectItemProps = {
+    isActive: boolean;
+    setIsActive: (isActive: boolean) => void;
+};
+
+export const SelectItem = ({ isActive, setIsActive }: SelectItemProps) => {
     const [isLabel, setIsLabel] = useState(true);
-    const [isActive, setIsActive] = useState(false);
     const [selectedLabels, setSelectedLabels] = useState<number[]>([]);
     const [selectedKeywords, setSelectedKeywords] = useState<number[]>([]);
 
+    const navigate = useNavigate();
+
     useEffect(() => {
         if (selectedLabels.length > 0 && selectedKeywords.length > 0) {
             setIsActive(true);
@@ -71,7 +78,12 @@ export const SelectItem = () => {
         ]
     };
     return (
-        <SliderMenuContainer>
+        <SliderMenuContainer
+            snapPoints={() => [
+                window.innerHeight * 0.05,
+                window.innerHeight * 0.6
+            ]}
+        >
             <Margin top={15} />
             <div className="relative flex w-full overflow-hidden text-xl align-middle h-[50px] ">
                 <div
@@ -111,13 +123,16 @@ export const SelectItem = () => {
                     />
                 </div>
             )}
+            <Margin bottom={30} />
             <CreateButton
                 isActive={isActive}
                 handleClickHandler={() => {
-                    alert('클릭');
+                    if (isActive) {
+                        navigate('/letter/success');
+                    }
                 }}
             />
-            <Margin bottom={90} />
+            <Margin bottom={30} />
         </SliderMenuContainer>
     );
 };
diff --git a/src/components/Letter/SuccessModal/SuccessModal.stories.tsx b/src/components/Letter/SuccessModal/SuccessModal.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SuccessModal } from './SuccessModal';
+import { MemoryRouter } from 'react-router-dom';
+
+const meta: Meta<typeof SuccessModal> = {
+    component: SuccessModal,
+    title: 'atoms/SuccessModal',
+    tags: ['autodocs'],
+    argTypes: {},
+    decorators: [
+        (Story) => (
+            <MemoryRouter initialEntries={['/']}>
+                <Story />
+            </MemoryRouter>
+        )
+    ]
+};
+export default meta;
+
+type Story = StoryObj<typeof SuccessModal>;
+
+export const Default: Story = {
+    args: {}
+};
diff --git a/src/components/Letter/SuccessModal/SuccessModal.tsx b/src/components/Letter/SuccessModal/SuccessModal.tsx
@@ -0,0 +1,13 @@
+import { Margin } from '@/components/Common/Margin/Margin';
+import React from 'react';
+
+export const SuccessModal = () => {
+    return (
+        <div className="flex flex-col items-center justify-center w-56 h-40 m-auto text-xl rounded-3xl animate-fade-up bg-slate-200 ">
+            <img src="/public/폭죽.png" className="w-12 h-12" />
+            <Margin top={10} />
+            <span>성공적으로</span>
+            <span>발송되었습니다</span>
+        </div>
+    );
+};
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
@@ -1,4 +1,6 @@
 import { BannerContainer } from '@/components/Common/BannerContainer/BannerContainer';
+import { Margin } from '@/components/Common/Margin/Margin';
+import { NavigationBar } from '@/components/Common/NavigationBar/NavigationBar';
 import { SliderMenuContainer } from '@/components/Common/SliderMenuContainer/SliderMenuContainer';
 import { Toggle } from '@/components/Common/Toggle/Toggle';
 import { BottomSheetContent } from '@/components/HomePage/BottomSheetContent/BottomSheetContent';
@@ -19,36 +21,38 @@ export const HomePage = () => {
     }
 
     return (
-        <div className="p-5 flex flex-col gap-[30px]">
-            <TopButtonContainer />
-            <Toggle
-                isChecked={toggle}
-                onToggle={() => {
-                    setToggle(!toggle);
-                }}
-            />
-            <div>
-                <WelcomeMessageContainer user={user} newLetter />
-                <LetterContainer />
-            </div>
-            <div className="flex justify-center">
-                <button
-                    onClick={() => {
-                        setOpen(true);
+        <div>
+            <div className="p-5 flex flex-col gap-[30px]">
+                <TopButtonContainer />
+                <Toggle
+                    isChecked={toggle}
+                    onToggle={() => {
+                        setToggle(!toggle);
                     }}
-                    className="btn-base w-[180px] h-[60px] flex-center"
+                />
+                <div>
+                    <WelcomeMessageContainer user={user} newLetter />
+                    <LetterContainer />
+                </div>
+                <div className="flex justify-center">
+                    <button
+                        onClick={() => {
+                            setOpen(true);
+                        }}
+                        className="btn-base w-[180px] h-[60px] flex-center"
+                    >
+                        키워드 설정
+                    </button>
+                </div>
+                <BannerContainer />
+                <SliderMenuContainer
+                    open={open}
+                    onDismiss={onDismiss}
+                    snapPoints={() => [window.innerHeight * 0.95]}
                 >
-                    키워드 설정
-                </button>
+                    <BottomSheetContent user={user} />
+                </SliderMenuContainer>
             </div>
-            <BannerContainer />
-            <SliderMenuContainer
-                open={open}
-                onDismiss={onDismiss}
-                snapPoints={() => [window.innerHeight * 0.95]}
-            >
-                <BottomSheetContent user={user} />
-            </SliderMenuContainer>
         </div>
     );
 };
diff --git a/src/pages/Letter/Create/CreateLetterPage.stories.tsx b/src/pages/Letter/Create/CreateLetterPage.stories.tsx
@@ -1,12 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { CreateLetterPage } from './CreateLetterPage';
+import { MemoryRouter } from 'react-router-dom';
 
 const meta: Meta<typeof CreateLetterPage> = {
     component: CreateLetterPage,
     title: 'Pages/CreateLetterPage',
     tags: ['autodocs'],
-    argTypes: {}
+    argTypes: {},
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ]
 };
 export default meta;
 

diff --git a/src/pages/Letter/SelectItem/SelectItemPage.stories.tsx b/src/pages/Letter/SelectItem/SelectItemPage.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import { SelectItemPage } from './SelectItemPage';
+
+const meta: Meta<typeof SelectItemPage> = {
+    component: SelectItemPage,
+    title: 'SelectItemPage',
+    tags: ['autodocs'],
+    argTypes: {},
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ]
+};
+export default meta;
+
+type Story = StoryObj<typeof SelectItemPage>;
+
+export const Default: Story = {
+    args: {}
+};
diff --git a/src/pages/Letter/SelectItem/SelectItemPage.tsx b/src/pages/Letter/SelectItem/SelectItemPage.tsx
@@ -2,11 +2,16 @@ import { Margin } from '@/components/Common/Margin/Margin';
 import { TopBar } from '@/components/Common/TopBar/TopBar';
 import { AnimationBottle } from '@/components/Letter/AnimationBottle/AnimationBottle';
 import { SelectItem } from '@/components/Letter/SelectItem/SelectItem';
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export const SelectItemPage = () => {
     const navigate = useNavigate();
+    const [isActive, setIsActive] = useState(false);
+
+    const handleIsActive = useCallback((value: boolean) => {
+        setIsActive(value);
+    }, []);
 
     return (
         <div className="w-[375px] max-w-[475px] h-screen max-h-[812px]">
@@ -15,10 +20,19 @@ export const SelectItemPage = () => {
                     navigate(-1);
                 }}
             />
+
             <Margin top={100} />
+            <h2
+                className={`text-2xl text-center transition-opacity duration-1000 ${
+                    isActive ? 'opacity-100' : 'opacity-0'
+                }`}
+                style={{ minHeight: '2.5rem' }}
+            >
+                이제 떠날 준비가 되셨나요
+            </h2>
             <AnimationBottle />
 
-            <SelectItem />
+            <SelectItem isActive={isActive} setIsActive={handleIsActive} />
         </div>
     );
 };
diff --git a/src/pages/Letter/Success/SuccessLetterPage.tsx b/src/pages/Letter/Success/SuccessLetterPage.tsx
@@ -0,0 +1,21 @@
+import { Margin } from '@/components/Common/Margin/Margin';
+import { CreateButton } from '@/components/Letter/CreateButton/CreateButton';
+import { SuccessModal } from '@/components/Letter/SuccessModal/SuccessModal';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const SuccessLetterPage = () => {
+    const navigate = useNavigate();
+
+    const handleClick = () => {
+        navigate('/');
+    };
+    return (
+        <div className="w-[375px] max-w-[768px] max-h-[815px]">
+            <Margin top={210} />
+            <SuccessModal />
+            <Margin top={230} />
+            <CreateButton isActive={true} handleClickHandler={handleClick} />
+        </div>
+    );
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -12,6 +12,7 @@ import { SentPage } from '@/pages/SentPage';
 import { SharePage } from '@/pages/SharePage';
 import { SelectItemPage } from './Letter/SelectItem/SelectItemPage';
 import { MyPage } from '@/pages/User/MyPage/MyPage';
+import { SuccessLetterPage } from './Letter/Success/SuccessLetterPage';
 
 export {
     ErrorPage,
@@ -27,5 +28,6 @@ export {
     NotificationPage,
     SentPage,
     SharePage,
-    SelectItemPage
+    SelectItemPage,
+    SuccessLetterPage
 };