Merge pull request #20 from junction-asia-2023/feat/previewpage

feat(preview): click move, set bottom text

src/features/preview/Container.tsx

@@ -9,10 +9,12 @@ import BottomText from './components/BottomText';
 import LabelSender from './components/LabelSender';
 import ChooseType from './components/ChooseType';
 import PreviewImage from './components/PreviewImage';
+import usePreview from './hooks/usePreview';
 
 const Container = () => {
   const [, setTitle] = useAtom(titleAtom);
   const [, setBottomBtn] = useAtom(bottomBtnAtom);
+  const { curNum, setCurNum } = usePreview();
   useLayoutEffect(() => {
     setTitle({ title: 'CardMe Preview', back: true });
     setBottomBtn({ text: 'Modification' });
@@ -26,8 +28,8 @@ const Container = () => {
   return (
     <div className="preview-container">
       <ChooseType />
-      <PreviewImage />
-      <BottomText />
+      <PreviewImage curNum={curNum} setCurNum={setCurNum} />
+      <BottomText curNum={curNum} />
       <LabelSender>.</LabelSender>
     </div>
   );

src/features/preview/components/BottomText.tsx

@@ -1,10 +1,44 @@
-const BottomText = () => {
+import { FunctionComponent } from 'react';
+
+type BottomTextType = {
+  curNum: number;
+};
+
+const BottomText: FunctionComponent<BottomTextType> = ({ curNum }) => {
+  const titleList = [
+    'My Profile',
+    'Active Mood',
+    'Creating a Schedule',
+    'Cancellation',
+    'Schedule Notification',
+  ];
+  const subList = [
+    'My basic information is displayed.',
+    'Express your day in various ways with text and stickers!',
+    'Sends an alert to the ID Card when you create a schedule.',
+    'Send a notification to the ID Card when the schedule is canceled.',
+    'Sends a notification to the ID Card when the schedule is imminent.',
+  ];
   return (
     <div className="preview-bottom-text-container">
-      <div className="preview-bottom-title-text">My Profile</div>
-      <div className="preview-bottom-sub-text">
-        My basic information is displayed.
-      </div>
+      {titleList.map((item, idx) => {
+        if (idx === curNum) {
+          return (
+            <div className="preview-bottom-title-text" key={idx}>
+              {item}
+            </div>
+          );
+        }
+      })}
+      {subList.map((item, idx) => {
+        if (idx === curNum) {
+          return (
+            <div className="preview-bottom-sub-text" key={idx}>
+              {item}
+            </div>
+          );
+        }
+      })}
     </div>
   );
 };

src/features/preview/components/PreviewImage.tsx

@@ -1,23 +1,28 @@
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import { Carousel } from 'react-responsive-carousel';
-import { useState } from 'react';
+import { Dispatch, FunctionComponent } from 'react';
 
 import idCardBasic from '/svg/idcard_basic.svg';
 import idCardMude from '/svg/idcard_mude.svg';
 import meetingAdd from '/svg/meeting_add.svg';
 import meetingCancel from '/svg/meeting_cancel.svg';
 import meeting30 from '/svg/meeting_30.svg';
 
-const PreviewImage = () => {
-  const [curNum, setCurNum] = useState<number>(0);
+type PreviewImageType = {
+  curNum: number;
+  setCurNum: Dispatch<number>;
+};
+const PreviewImage: FunctionComponent<PreviewImageType> = ({
+  curNum,
+  setCurNum,
+}) => {
   const imageList = [
     idCardBasic,
     idCardMude,
     meetingAdd,
     meetingCancel,
     meeting30,
   ];
-  console.log(curNum);
   return (
     <>
       <div className="preview-image-container">
@@ -29,7 +34,8 @@ const PreviewImage = () => {
             showIndicators={false}
             autoPlay
             infiniteLoop
-            onChange={(index) => {
+            selectedItem={curNum}
+            onChange={(index, _) => {
               setCurNum(index);
             }}
           >
@@ -51,6 +57,9 @@ const PreviewImage = () => {
                   ? 'preview-carousel-circle-black'
                   : 'preview-carousel-circle-gray'
               }
+              onClick={() => {
+                setCurNum(idx);
+              }}
             ></div>
           );
         })}

src/features/preview/hooks/usePreview.ts

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+
+const usePreview = () => {
+  const [curNum, setCurNum] = useState<number>(0);
+
+  return {
+    curNum,
+    setCurNum,
+  };
+};
+
+export default usePreview;