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

feat(preview): apply carousel , ui

package.json

@@ -26,6 +26,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.15.0"
   },
   "devDependencies": {

src/features/preview/Container.tsx

@@ -1,7 +1,31 @@
+import { useAtom } from 'jotai';
+import { useLayoutEffect } from 'react';
+
+import { bottomBtnAtom, titleAtom } from '../shared/layout/atom';
+
+import './style/index.scss';
+
+import BottomText from './components/BottomText';
 import LabelSender from './components/LabelSender';
+import ChooseType from './components/ChooseType';
+import PreviewImage from './components/PreviewImage';
+
+const Container = () => {
+  const [, setTitle] = useAtom(titleAtom);
+  const [, setBottomBtn] = useAtom(bottomBtnAtom);
+  useLayoutEffect(() => {
+    setTitle({ title: 'CardMe Preview', back: true });
+    setBottomBtn({ text: 'Modification' });
+  }, []);
 
-const PreviewContainer = () => {
-  return <LabelSender>JUST 핀란드 가즈아</LabelSender>;
+  return (
+    <div className="preview-container">
+      <ChooseType />
+      <PreviewImage />
+      <BottomText />
+      <LabelSender>.</LabelSender>
+    </div>
+  );
 };
 
-export default PreviewContainer;
+export default Container;

src/features/preview/components/BottomText.tsx

@@ -0,0 +1,12 @@
+const BottomText = () => {
+  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>
+    </div>
+  );
+};
+
+export default BottomText;

src/features/preview/components/ChooseType.tsx

@@ -0,0 +1,37 @@
+import { MouseEventHandler, useState } from 'react';
+
+const ChooseType = () => {
+  const [seletedType, setSeletedType] = useState<string>('A');
+  const handleTypeClick: MouseEventHandler<HTMLDivElement> = (e) => {
+    const target = e.target as HTMLDivElement;
+    setSeletedType(target.dataset.type as string);
+  };
+  return (
+    <div className="preview-choose-type-container">
+      <div
+        className={
+          seletedType === 'A'
+            ? 'preview-choose-type-box'
+            : 'preview-not-choose-type-box'
+        }
+        onClick={handleTypeClick}
+        data-type="A"
+      >
+        CardMe Type A
+      </div>
+      <div
+        className={
+          seletedType === 'B'
+            ? 'preview-choose-type-box'
+            : 'preview-not-choose-type-box'
+        }
+        onClick={handleTypeClick}
+        data-type="B"
+      >
+        CardMe Type B
+      </div>
+    </div>
+  );
+};
+
+export default ChooseType;

src/features/preview/components/PreviewImage.tsx

@@ -0,0 +1,56 @@
+import 'react-responsive-carousel/lib/styles/carousel.min.css';
+import { Carousel } from 'react-responsive-carousel';
+import { useState } from 'react';
+
+const PreviewImage = () => {
+  const [curNum, setCurNum] = useState<number>(0);
+  const imageList = [
+    '/svg/idcard_basic.svg',
+    '/svg/idcard_mude.svg',
+    '/svg/meeting_add.svg',
+    '/svg/meeting_cancel.svg',
+    '/svg/meeting_30.svg',
+  ];
+  console.log(curNum);
+  return (
+    <>
+      <div className="preview-image-container">
+        <div className="preview-choose-carousel">
+          <Carousel
+            showArrows={false}
+            showThumbs={false}
+            showStatus={false}
+            showIndicators={false}
+            autoPlay
+            infiniteLoop
+            onChange={(index, item) => {
+              setCurNum(index);
+            }}
+          >
+            {imageList.map((image, idx) => (
+              <div key={idx} className="preview-choose-carousel-img">
+                <img src={image} />
+              </div>
+            ))}
+          </Carousel>
+        </div>
+      </div>
+      <div className="preview-carousel-bar">
+        {imageList.map((_, idx) => {
+          return (
+            <div
+              key={idx}
+              className={
+                curNum === idx
+                  ? 'preview-carousel-circle-black'
+                  : 'preview-carousel-circle-gray'
+              }
+            ></div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export default PreviewImage;

src/features/preview/style/index.scss

@@ -0,0 +1,95 @@
+.preview {
+  &-container {
+    height: calc(100% - 159px);
+    padding: 16px 16px 24px 16px;
+  }
+
+  &-choose-type-container {
+    display: flex;
+    margin-bottom: 16px;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    border-radius: 4px;
+    border: 1px solid #E9E9F1;
+    cursor: pointer;
+    background: #F7F7F7;
+  }
+  &-image-container {
+    display: flex;
+    padding: 24px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    background: #F7F7F7;
+  }
+
+  &-carousel-bar {
+    display: flex;
+    margin: 16px 0;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    align-self: stretch;
+  }
+
+  &-carousel-circle-black {
+    width: 8px;
+    height: 8px;
+    border-radius: 50px;
+    background-color: #191919;
+  }
+
+  &-carousel-circle-gray {
+    width: 8px;
+    height: 8px;
+    border-radius: 50px;
+    background-color: #D6D6D6;
+  }
+
+  &-choose-type-box {
+    display: flex;
+    height: 48px;
+    padding: 0px 14px;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 0;
+    border-radius: 4px;
+    background: #191919;
+    color: #fff;
+  }
+  &-not-choose-type-box {
+    display: flex;
+    height: 48px;
+    padding: 0px 14px;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 0;
+    border-radius: 4px;
+    background: #FFF;
+  }
+
+  &-bottom-text-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  &-bottom-title-text {
+    color: #191919;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px; /* 150% */
+  }
+
+  &-bottom-sub-text {
+    color: #9797AE;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px; /* 171.429% */
+  }
+}