최초 사용자 전용 모달 생성 (#44)

* feat: 최초 사용자 전용 모달 생성 * refactor: 시작하기 라우터 replace -> push 변경
DDD-Community · Mar 1, 2024 · 557294f · 557294f
1 parent d743c8a
commit 557294f
Show file tree

Hide file tree

Showing 7 changed files with 229 additions and 11 deletions.
diff --git a/src/app/(afterlogin)/home/_components/GuideContent.module.scss b/src/app/(afterlogin)/home/_components/GuideContent.module.scss
@@ -0,0 +1,67 @@
+@import '@/styles/mixins';
+
+.description {
+  font-size: $font-2;
+
+  &__first {
+    margin: 0;
+    margin-top: 8px;
+  }
+
+  &__second {
+    margin: 0;
+    margin-top: 5px;
+  }
+}
+
+.box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 700px;
+  height: 320px;
+  gap: 28px;
+  background-color: $purple-0;
+  border-radius: 16px;
+  margin-top: 46px;
+}
+
+.left {
+  width: 240px;
+  height: 240px;
+  background-color: $purple-1;
+  border-radius: 16px;
+}
+
+.right {
+  & > p:nth-of-type(1) {
+    font-size: $font-1;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  li {
+    display: flex;
+    gap: 8px;
+  }
+
+  span {
+    color: $purple-5;
+  }
+}
+
+.startButton {
+  @include button_size_web;
+  @include button_theme_default;
+
+  margin-top: 46px;
+}
diff --git a/src/app/(afterlogin)/home/_components/GuideContent.tsx b/src/app/(afterlogin)/home/_components/GuideContent.tsx
@@ -0,0 +1,55 @@
+import styles from './GuideContent.module.scss';
+
+import classNames from 'classnames/bind';
+import OneIcon from './_svgs/OneIcon';
+import TwoIcon from './_svgs/TwoIcon';
+import ThreeIcon from './_svgs/ThreeIcon';
+import { useRouter } from 'next/navigation';
+
+const cx = classNames.bind(styles);
+const GuideContent = () => {
+  const router = useRouter();
+  return (
+    <>
+      <h1>프리젠이 처음이신가요?</h1>
+      <p className={cx(['description__first'])}>
+        성공적인 발표를 위해서 발표 연습은 매우 중요해요. 하지만 한번의 연습으로는 모든 내용을
+        암기하기 힘들어요.
+      </p>
+      <p className={cx(['description__second'])}>
+        앞으로의 성공적인 발표를 위해 지금 당장 연습하러 가볼까요?.
+      </p>
+      <div className={cx(['box'])}>
+        <div className={cx(['left'])}></div>
+        <div className={cx(['right'])}>
+          <p>프리젠을 다음과 같이 이용해봐요!</p>
+          <ul>
+            <li>
+              <OneIcon />
+              <p>
+                발표 PPT와 대본을 불러와 <span>발표 목록에 추가</span>해주세요
+              </p>
+            </li>
+            <li>
+              <TwoIcon />
+              <p>
+                연습하고 싶은 모드를 설정하여 <span>발표 연습</span>을 진행해주세요
+              </p>
+            </li>
+            <li>
+              <ThreeIcon />
+              <p>
+                <span>AI 피드백</span>을 받고 만점을 받을 때까지 연습을 해봐요!
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <button className={cx(['startButton'])} onClick={() => router.push('/upload/new')}>
+        시작하기
+      </button>
+    </>
+  );
+};
+
+export default GuideContent;
diff --git a/src/app/(afterlogin)/home/_components/GuideForNew.tsx b/src/app/(afterlogin)/home/_components/GuideForNew.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import Modal from '@/app/_components/_modules/_modal/Modal';
+import useToggle from '@/app/_hooks/useToggle';
+import { useEffect } from 'react';
+import GuideContent from './GuideContent';
+
+const GuideForNew = () => {
+  const modal = useToggle();
+
+  useEffect(() => {
+    modal.onOpen();
+  }, []);
+  return (
+    <>
+      <Modal context={modal} size="lg" hasCloseBtn={false}>
+        <GuideContent />
+      </Modal>
+    </>
+  );
+};
+
+export default GuideForNew;
diff --git a/src/app/(afterlogin)/home/_components/_svgs/OneIcon.tsx b/src/app/(afterlogin)/home/_components/_svgs/OneIcon.tsx
@@ -0,0 +1,21 @@
+const OneIcon = () => {
+  return (
+    <i>
+      <svg
+        width="16"
+        height="17"
+        viewBox="0 0 16 17"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect y="0.5" width="16" height="16" rx="8" fill="#6822FF" />
+        <path
+          d="M8.79688 6.01562V14.5H7.73047V7.11719H7.68359L5.62109 8.48828V7.42188L7.73047 6.01562H8.79688Z"
+          fill="white"
+        />
+      </svg>
+    </i>
+  );
+};
+
+export default OneIcon;
diff --git a/src/app/(afterlogin)/home/_components/_svgs/ThreeIcon.tsx b/src/app/(afterlogin)/home/_components/_svgs/ThreeIcon.tsx
@@ -0,0 +1,21 @@
+const ThreeIcon = () => {
+  return (
+    <i>
+      <svg
+        width="16"
+        height="17"
+        viewBox="0 0 16 17"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect y="0.5" width="16" height="16" rx="8" fill="#6822FF" />
+        <path
+          d="M5.79688 14.5L5.78516 13.7266L8.67969 10.6797C9.68164 9.61328 10.1621 9.03906 10.168 8.25391C10.1621 7.38086 9.43555 6.81836 8.48047 6.8125C7.4668 6.81836 6.83398 7.45703 6.82812 8.40625H5.83203C5.82031 6.90625 6.98047 5.89844 8.51562 5.89844C10.0566 5.89844 11.1465 6.93555 11.1523 8.25391C11.1465 9.20312 10.707 9.94141 9.20703 11.4883L7.26172 13.4922V13.5625H11.3047V14.5H5.79688Z"
+          fill="white"
+        />
+      </svg>
+    </i>
+  );
+};
+
+export default ThreeIcon;
diff --git a/src/app/(afterlogin)/home/_components/_svgs/TwoIcon.tsx b/src/app/(afterlogin)/home/_components/_svgs/TwoIcon.tsx
@@ -0,0 +1,21 @@
+const TwoIcon = () => {
+  return (
+    <i>
+      <svg
+        width="16"
+        height="17"
+        viewBox="0 0 16 17"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect y="0.5" width="16" height="16" rx="8" fill="#6822FF" />
+        <path
+          d="M5.79688 14.5L5.78516 13.7266L8.67969 10.6797C9.68164 9.61328 10.1621 9.03906 10.168 8.25391C10.1621 7.38086 9.43555 6.81836 8.48047 6.8125C7.4668 6.81836 6.83398 7.45703 6.82812 8.40625H5.83203C5.82031 6.90625 6.98047 5.89844 8.51562 5.89844C10.0566 5.89844 11.1465 6.93555 11.1523 8.25391C11.1465 9.20312 10.707 9.94141 9.20703 11.4883L7.26172 13.4922V13.5625H11.3047V14.5H5.79688Z"
+          fill="white"
+        />
+      </svg>
+    </i>
+  );
+};
+
+export default TwoIcon;
diff --git a/src/app/(afterlogin)/home/page.tsx b/src/app/(afterlogin)/home/page.tsx
@@ -3,10 +3,12 @@ import ExerciseList from './_components/ExerciseList';
 import HistoryBanner from './_components/HistoryBanner';
 import styles from './page.module.scss';
 import { serverHomeApi } from '@/services/server/home';
+import { PresentationListType } from '@/types/service';
+import GuideForNew from './_components/GuideForNew';
 
 export default async function Page() {
   const queryClient = new QueryClient();
-  await queryClient.fetchInfiniteQuery({
+  const listResponse = await queryClient.fetchInfiniteQuery({
     queryKey: ['home', 'list'],
     queryFn: async ({ pageParam = 0 }) => {
       const response = await serverHomeApi.getPresentationList({ pageParam });
@@ -15,22 +17,30 @@ export default async function Page() {
     initialPageParam: 0,
   });
 
-  const response = await queryClient.fetchQuery({
+  const isEmpty = listResponse.pages[0].page.empty;
+
+  const latestResponse = await queryClient.fetchQuery({
     queryKey: ['home', 'latest'],
     queryFn: async () => {
-      const response = await serverHomeApi.getLatestPresentation();
-      if (response.status === 204) return 'empty';
-      return await response.json();
+      const latestResponse = await serverHomeApi.getLatestPresentation();
+      if (latestResponse.status === 204) return 'empty';
+      return await latestResponse.json();
     },
   });
 
   const dehydratedState = dehydrate(queryClient);
   return (
-    <div className={styles.container}>
-      <HydrationBoundary state={dehydratedState}>
-        {response !== 'empty' && <HistoryBanner presentation={response} />}
-        <ExerciseList />
-      </HydrationBoundary>
-    </div>
+    <>
+      {isEmpty ? (
+        <GuideForNew />
+      ) : (
+        <div className={styles.container}>
+          <HydrationBoundary state={dehydratedState}>
+            {latestResponse !== 'empty' && <HistoryBanner presentation={latestResponse} />}
+            <ExerciseList />
+          </HydrationBoundary>
+        </div>
+      )}
+    </>
   );
 }