feat: 1차 UT QA 홈 페이지 반영

src/app/(route)/(home)/components/Page/Content.tsx

@@ -9,6 +9,7 @@ import { Capsule } from '@/components/Capsule';
 import { LockBtn } from '@/components/LockBtn';
 import type { LockBtnVariant } from '@/components/LockBtn/LockBtn';
 import { ROUTES } from '@/constants';
+import { useToast } from '@/hooks';
 import { useGetSurvey } from '@/query-hooks/useSurvey';
 
 import { Drawer } from '../Drawer';
@@ -19,7 +20,7 @@ export default function HomeContent() {
   const routes = useRouter();
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const { data } = useGetSurvey();
-
+  const { showToast } = useToast();
   const daysArr = Array.from({ length: 15 }, (_, i) => i + 1);
 
   const getLockState = (day: number): LockBtnVariant => {
@@ -44,6 +45,12 @@ export default function HomeContent() {
     if (getLockState(day) === 'default') {
       routes.push(`${ROUTES.game}/${data?.bundleId}`);
     }
+    if (getLockState(day) === 'disabled' && day > (data?.nextSurveyIndex ?? 0)) {
+      showToast('하루에 한 회차씩 답변할 수 있어요');
+    }
+    if (getLockState(day) === 'completed') {
+      routes.push(`${ROUTES.reportQuestions}?focus=${day}`);
+    }
   };
 
   return (
@@ -54,7 +61,7 @@ export default function HomeContent() {
             <Capsule className={styles.capsule}>
               <label>캐릭터 완성까지</label>
               <LineIcon color="#A9AEBA" />
-              <label>{`${15 - data.surveyHistoryDetails.length} 개`}</label>
+              <label>{`${15 - data.surveyHistoryDetails.length}회차`}</label>
             </Capsule>
           </div>
           <Drawer isOpen={isOpen} setIsOpen={setIsOpen}>

src/app/(route)/mypage/components/UserSettings.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 import { ArrowRightIcon as ArrowRightIcon } from '@/assets/icons';
+import { ROUTES } from '@/constants';
 
 import styles from './UserSettings.module.scss';
-import { useRouter } from 'next/navigation';
-import { ROUTES } from '@/constants';
 
 const UserSettings = () => {
   const [notificationsEnabled, setNotificationsEnabled] = useState(true);

src/app/(route)/mypage/page.tsx

@@ -2,11 +2,11 @@
 
 import React from 'react';
 
+import UserSettings from '@/app/(route)/mypage/components/UserSettings';
 import { useMemberStore } from '@/stores';
 
 import ProfileCard from './components/ProfileCard';
 import UserActionFooter from './components/UserActionFooter';
-import UserSettings from '@/app/(route)/mypage/components/UserSettings';
 
 export default function MyPage() {
   const { member } = useMemberStore();

src/app/(route)/report/analysis/page.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import CharacterSelectLayout from '../components/CharacterSelectLayout';
+
 import { useGetCharacters } from '@/query-hooks/useCharacter';
-import { useMemberStore } from '@/stores';
 import type { CharacterItem } from '@/query-hooks/useCharacter/types';
+import { useMemberStore } from '@/stores';
+
+import CharacterSelectLayout from '../components/CharacterSelectLayout';
 
 export default function ReportAnalysis() {
   const { data: characterData = { characters: [] } } = useGetCharacters({ memberId: useMemberStore().getMemberId() });

src/app/(route)/report/components/CharacterSelectBottomSheet/CharacterSelectBottomSheet.tsx

@@ -1,9 +1,9 @@
-import { BottomSheet } from '@/components/BottomSheet';
 import { CheckIcon } from '@/assets/icons';
+import { BottomSheet } from '@/components/BottomSheet';
+import type { CharacterItem } from '@/query-hooks/useCharacter/types';
+import { formatToKoreanOrder } from '@/utils';
 
 import styles from './CharacterSelectBottomSheet.module.scss';
-import { formatToKoreanOrder } from '@/utils';
-import type { CharacterItem } from '@/query-hooks/useCharacter/types';
 
 type Props = {
   open: boolean;

src/app/(route)/report/components/CharacterSelectButton/CharacterSelectButton.tsx

@@ -1,9 +1,9 @@
 import { ArrowDown2Icon } from '@/assets/icons';
 import { TextButton } from '@/components/TextButton';
+import type { CharacterItem } from '@/query-hooks/useCharacter/types';
+import { formatToKoreanOrder } from '@/utils';
 
 import styles from './CharacterSelectButton.module.scss';
-import { formatToKoreanOrder } from '@/utils';
-import type { CharacterItem } from '@/query-hooks/useCharacter/types';
 
 type Props = {
   selectedCharacter: CharacterItem;

src/app/(route)/report/components/CharacterSelectLayout/CharacterSelectLayout.tsx

@@ -1,11 +1,12 @@
 import type { PropsWithChildren } from 'react';
 
-import CharacterSelectButton from '../CharacterSelectButton';
+import type { CharacterItem } from '@/query-hooks/useCharacter/types';
+
 import CharacterSelectBottomSheet from '../CharacterSelectBottomSheet';
+import CharacterSelectButton from '../CharacterSelectButton';
 import CharacterTabNav from '../CharacterTabNav';
 
 import styles from './CharacterSelectLayout.module.scss';
-import type { CharacterItem } from '@/query-hooks/useCharacter/types';
 
 type Props = {
   open: boolean;

src/app/(route)/report/questions/layout.tsx

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from 'react';
+import { Suspense } from 'react';
+
+export default function ReportQuestionsLayout({ children }: PropsWithChildren) {
+  return <Suspense>{children}</Suspense>;
+}

src/app/(route)/report/questions/page.tsx

@@ -1,18 +1,31 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import dayjs from 'dayjs';
 
 import { Card } from '@/components/Card';
-import styles from './page.module.scss';
-import CharacterSelectLayout from '../components/CharacterSelectLayout';
 import { useGetCharacters } from '@/query-hooks/useCharacter';
-import { useMemberStore } from '@/stores';
 import type { CharacterItem } from '@/query-hooks/useCharacter/types';
 import { useGetSubmissions } from '@/query-hooks/useSurvey';
+import { useMemberStore } from '@/stores';
+
+import CharacterSelectLayout from '../components/CharacterSelectLayout';
+
+import styles from './page.module.scss';
 
 export default function ReportQuestions() {
   const [open, setOpen] = useState(false);
+  const searchParams = useSearchParams();
+
+  const focusIndex = searchParams.get('focus') ? Number(searchParams.get('focus')) - 1 : null;
+  const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    if (focusIndex !== null && cardRefs.current[focusIndex]) {
+      cardRefs.current[focusIndex]?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [focusIndex]);
   const [selectedCharacter, setSelectedCharacter] = useState<CharacterItem>({ ordinalNumber: 0, bundleId: 0 });
 
   const { data: characterData = { characters: [] } } = useGetCharacters({ memberId: useMemberStore().getMemberId() });
@@ -49,12 +62,16 @@ export default function ReportQuestions() {
       <div className={styles.contentContainer}>
         {submissionData.surveyRecords.map((question, index) => (
           <Card
+            ref={(el) => {
+              cardRefs.current[index] = el;
+            }}
             key={index}
             count={index + 1}
             date={formatDate(question.submittedAt)}
             question={question.question}
             answer={question.answer}
             retrospective={question.retrospective}
+            isOpen={focusIndex === index}
             className={styles.card}
           />
         ))}

src/app/(route)/term/page.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { ArrowLeft2Icon } from '@/assets/icons';
-
 import { useRouter } from 'next/navigation';
+
+import { ArrowLeft2Icon } from '@/assets/icons';
 import { ROUTES } from '@/constants';
+
 import styles from './page.module.scss';
 
 export default function TermPage() {

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { AppleScript } from '@/components/appleScript';
 import { KakaoScript } from '@/components/KakaoScript';
+import { Toast } from '@/components/Toast';
 
 import ReactQueryProviders from '../providers/ReactQueryProvider';
 
@@ -43,7 +44,10 @@ export default function RootLayout({
       <body>
         <ReactQueryProviders>
           <div className="container">
-            <main className="layout">{children}</main>
+            <main className="layout">
+              {children}
+              <Toast />
+            </main>
           </div>
           <ReactQueryDevtools />
         </ReactQueryProviders>

src/components/Card/Card.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { Card as CardComponent } from '@radix-ui/themes';
 import cn from 'classnames';
 import { Accordion, Separator } from 'radix-ui';
@@ -56,42 +57,39 @@ const BasicCard = ({ count, date, question, answer, retrospective }: CardProps)
   </div>
 );
 
-export default function Card({
-  count,
-  date,
-  question,
-  answer,
-  hiddenCollapse = false,
-  isOpen = false,
-  retrospective,
-  className,
-}: CardProps) {
-  if (hiddenCollapse) {
-    return <BasicCard count={count} date={date} question={question} answer={answer} />;
-  }
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ count, date, question, answer, hiddenCollapse = false, isOpen = false, retrospective, className }, ref) => {
+    if (hiddenCollapse) {
+      return <BasicCard count={count} date={date} question={question} answer={answer} />;
+    }
 
-  return (
-    <div className={cn(styles.container, className)}>
-      <Accordion.Root type="single" collapsible {...(isOpen ? { defaultValue: 'item-1' } : {})}>
-        <Accordion.Item value="item-1">
-          <Accordion.Trigger className={styles.trigger}>
-            <CardComponent className={styles.wrapper}>
-              <Accordion.Header className={styles.header}>
-                <div className={styles.date}>
-                  <h4 className={styles.cardSubTitle4}>{count}회차</h4>
-                  <ArrowDownIcon width="1.5rem" height="1.5rem" className={styles.icon} />
-                </div>
-              </Accordion.Header>
-              <Accordion.Content className={styles.contents}>
-                <Chip size="sm" color="neutral" className={styles.chip}>
-                  {date}
-                </Chip>
-                <CardContents question={question} answer={answer} retrospective={retrospective} />
-              </Accordion.Content>
-            </CardComponent>
-          </Accordion.Trigger>
-        </Accordion.Item>
-      </Accordion.Root>
-    </div>
-  );
-}
+    return (
+      <div ref={ref} className={cn(styles.container, className)}>
+        <Accordion.Root type="single" collapsible {...(isOpen ? { defaultValue: 'item-1' } : {})}>
+          <Accordion.Item value="item-1">
+            <Accordion.Trigger className={styles.trigger}>
+              <CardComponent className={styles.wrapper}>
+                <Accordion.Header className={styles.header}>
+                  <div className={styles.date}>
+                    <h4 className={styles.cardSubTitle4}>{count}회차</h4>
+                    <ArrowDownIcon width="1.5rem" height="1.5rem" className={styles.icon} />
+                  </div>
+                </Accordion.Header>
+                <Accordion.Content className={styles.contents}>
+                  <Chip size="sm" color="neutral" className={styles.chip}>
+                    {date}
+                  </Chip>
+                  <CardContents question={question} answer={answer} retrospective={retrospective} />
+                </Accordion.Content>
+              </CardComponent>
+            </Accordion.Trigger>
+          </Accordion.Item>
+        </Accordion.Root>
+      </div>
+    );
+  },
+);
+
+Card.displayName = 'Card';
+
+export default Card;

src/components/Toast/Toast.module.scss

@@ -0,0 +1,73 @@
+.viewport {
+  list-style: none;
+  z-index: 100;
+  outline: none;
+}
+
+.root {
+  background: rgba(68, 73, 83, 0.95);
+  border-radius: 0.75rem;
+  z-index: 100;
+  position: absolute;
+  bottom: 4.25rem;
+  width: calc(100% - 2.5rem);
+  padding-left: 1.7188rem;
+  padding-right: 1.7188rem;
+  text-align: center;
+  height: 4.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  @include flex-center;
+
+  &[data-state='open'] {
+    animation: slideIn 300ms ease-out;
+  }
+
+  &[data-state='closed'] {
+    animation: slideOut 600ms ease-in;
+  }
+
+  &[data-swipe='move'] {
+    transform: translateY(var(--radix-toast-swipe-move-y));
+  }
+
+  &[data-swipe='cancel'] {
+    transform: translateY(0);
+    transition: transform 300ms ease-out;
+  }
+
+  &[data-swipe='end'] {
+    animation: swipeOut 300ms ease-out;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-50%) translateY(5vh);
+  }
+  to {
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateX(-50%) translateY(0);
+  }
+  to {
+    transform: translateX(-50%) translateY(9.5vh);
+  }
+}
+
+@keyframes swipeOut {
+  from {
+    transform: translateX(-50%) translateY(var(--radix-toast-swipe-end-y));
+  }
+  to {
+    transform: translateX(-50%) translateY(100%);
+  }
+}
+.title {
+  color: $white;
+  @include subTitle4;
+}

src/components/Toast/Toast.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { Toast as RadixToast } from 'radix-ui';
+
+import { useToast } from '@/hooks';
+
+import styles from './Toast.module.scss';
+
+export default function Toast() {
+  const { toast, updateToast } = useToast();
+
+  return (
+    <RadixToast.Provider swipeDirection="down" duration={1000}>
+      <RadixToast.Root className={styles.root} open={toast.open} onOpenChange={updateToast}>
+        <RadixToast.Title className={styles.title}>{toast.message}</RadixToast.Title>
+      </RadixToast.Root>
+      <RadixToast.Viewport className={styles.viewport} />
+    </RadixToast.Provider>
+  );
+}

src/components/Toast/index.ts

@@ -0,0 +1 @@
+export { default as Toast } from './Toast';

src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './usePreviousValue';
+export * from './useToast';