Merge branch 'main' into feat/esl-by-selected

src/features/event/Container.tsx

@@ -11,16 +11,24 @@ const EventContainer: FunctionComponent = () => {
   return (
     <div className="event-container">
       <div className="wrap">
-        <div className="content">
+        <div className={`content ${open ? 'open' : ''}`}>
           <span className="label">JUNCTION Event</span>
           <div className="title">
             Who is the lucky one who got the winning gift?
           </div>
         </div>
-        <div className="gift" onClick={handleImageClick}>
-          <img src={open ? giftOpenLogo : giftLogo} alt="gift" />
+        <div
+          className={`gift ${open ? 'open' : ''}`}
+          onClick={handleImageClick}
+        >
+          <img
+            width={open ? '250' : '170'}
+            height={open ? '250' : '170'}
+            src={open ? giftOpenLogo : giftLogo}
+            alt="gift"
+          />
         </div>
-        <div className="description">
+        <div className={`description`}>
           Press the gift box and check the winning results
         </div>
       </div>

src/features/event/event.scss

@@ -12,6 +12,24 @@
 		transform: rotate(0deg);
 	}
 }
+@keyframes open-top {
+	0% {
+		padding-top: 7rem;
+		padding-bottom: 0rem;
+	}
+	100% {
+		padding-top: 4rem;
+		padding-bottom: 2rem;
+	}
+}
+@keyframes open-bottom {
+	0% {
+		padding-bottom: 0rem;
+	}
+	100% {
+		padding-bottom: 4rem;
+	}
+}
 
 .event-container {
 	height: calc(100vh - 77px);
@@ -23,11 +41,15 @@
 		align-items: center;
 
 		.content {
-			padding-top: 183px;
+			padding-top: 7rem;
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
 			align-items: center;
+
+			&.open {
+				animation: open-top 0.5s both;
+			}
 
 			.label {
 				color: #ffffff;
@@ -50,6 +72,11 @@
 		}
 		.gift {
 			cursor: pointer;
+			height: 250px;
+
+			&.open {
+				animation: open-bottom 0.5s both;
+			}
 
 			:hover {
 				animation: shake 1s infinite ease-in;

src/features/home/components/Profile.tsx

@@ -3,9 +3,10 @@ import { FunctionComponent } from 'react';
 
 import { userAtom } from '../../login/atom';
 
+import profileImage from '/png/yulim.png';
+
 const Profile: FunctionComponent = () => {
-  const [{ email, profileImage, department, name, position }] =
-    useAtom(userAtom);
+  const [{ email, department, name, position }] = useAtom(userAtom);
 
   return (
     <section className="profile-box">

src/features/login/constants.ts

@@ -1,8 +1,7 @@
 import { DummyUser } from './type';
 
 export const DUMMY_USER: DummyUser = {
-  name: 'Sangchul',
-  profileImage: 'https://avatars.githubusercontent.com/u/23524849?v=4',
+  name: 'Yulim',
   email: '[email protected]',
   companyNo: 'JS1234',
   password: 'just',

src/features/login/type.ts

@@ -1,6 +1,5 @@
 export type User = {
   name?: string;
-  profileImage?: string;
   email?: string;
   companyNo?: string;
   department?: string;

src/features/preview/Container.tsx

@@ -8,10 +8,12 @@ import './style/index.scss';
 import BottomText from './components/BottomText';
 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' });
@@ -25,8 +27,8 @@ const Container = () => {
   return (
     <div className="preview-container">
       <ChooseType />
-      <PreviewImage />
-      <BottomText />
+      <PreviewImage curNum={curNum} setCurNum={setCurNum} />
+      <BottomText curNum={curNum} />
     </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;