Feat(client): report page suspense 적용 및 트랜지션 수정 (team-bofit#329)

Author: gwagjiug

apps/client/src/pages/report/report-page.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router';
 
 import { Navigation } from '@bds/ui';
@@ -24,17 +24,17 @@ const ReportPage = () => {
     navigate(path);
   };
 
-  const { data: reportSummaryData } = useQuery(
+  const { data: reportSummaryData } = useSuspenseQuery(
     INSURANCE_QUERY_OPTIONS.REPORT_SUMMARY(),
   );
 
   const REPORT_ID = reportSummaryData?.insuranceReportId ?? '';
 
-  const { data: reportData } = useQuery(
+  const { data: reportData } = useSuspenseQuery(
     INSURANCE_QUERY_OPTIONS.REPORT(REPORT_ID),
   );
 
-  const { data: userData } = useQuery(USER_QUERY_OPTIONS.PROFILE());
+  const { data: userData } = useSuspenseQuery(USER_QUERY_OPTIONS.PROFILE());
 
   return (
     <div className={styles.container}>

apps/client/src/widgets/report/components/accordion/accordion.css.ts

@@ -37,15 +37,15 @@ export const icon = style({
 export const panelContainer = recipe({
   base: {
     overflow: 'hidden',
-    transition: 'max-height 0.1s ease, opacity 0.3s ease, padding 0.3s ease',
+    transition: 'max-height 0.2s ease, opacity 0.25s ease, padding 0.3s ease',
     display: 'flex',
     flexDirection: 'column',
     gap: '2.4rem',
   },
   variants: {
     expanded: {
       true: {
-        maxHeight: '100%',
+        maxHeight: '90rem',
         opacity: 1,
         paddingTop: '2.4rem ',
       },

packages/bds-ui/src/components/input/input.tsx

@@ -58,6 +58,7 @@ const Input = ({
       onClick={handleContainer}
     >
       <input
+        enterKeyHint="done"
         ref={inputRef}
         className={`${styles.inputContent} ${
           hasText ? styles.inputFilled : ''