feat: add expiredDateTimer nudge

wanted-fork-fork · Nov 9, 2024 · 56324c9 · 56324c9
1 parent c378ac5
commit 56324c9
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 13 deletions.
diff --git a/src/pages/shared_profile/SharedProfilePage.module.css b/src/pages/shared_profile/SharedProfilePage.module.css
@@ -3,6 +3,7 @@
     flex-direction: column;
     overflow: hidden;
     height: 100%;
+    width: 100%;
 }
 
 .Header {

diff --git a/src/pages/shared_profile/SharedProfilePage.tsx b/src/pages/shared_profile/SharedProfilePage.tsx
@@ -36,7 +36,7 @@ export const SharedProfilePage = ({ expiredDate }: Props) => {
       )}
       <ScrollView rootClassName={styles.Body}>
         <ImageLayout urls={urls} />
-        <ExpiredDateTimer expiredDate={expiredDate} />
+        <ExpiredDateTimer expiredDate={expiredDate} type={inView ? 'BOX' : 'NUDGE'} />
         <h1 className={styles.Name} ref={ref}>
           {profile.name}({t(profile.gender)}, {age})
         </h1>

diff --git a/src/pages/shared_profile/components/ExpiredDateTimer.module.css b/src/pages/shared_profile/components/ExpiredDateTimer.module.css
@@ -26,3 +26,37 @@
   font-size: 16px;
   font-weight: 600;
 }
+
+.Nudge {
+  z-index: 1;
+  position: fixed;
+  top: 56px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: max-content;
+
+  background-color: var(--color-neutral-70);
+  border-radius: 48px;
+
+  display: flex;
+  padding: 8px;
+  gap: 16px;
+  align-items: center;
+
+  & .Timer {
+    width: 100%;
+    gap: 8px;
+    padding-left: 8px;
+  }
+
+  & span {
+    font-size: 14px;
+    color: var(--color-neutral-0);
+  }
+
+  & .TimerText {
+    width: 62px;
+    color: var(--color-primary);
+    font-size: 14px;
+  }
+}
diff --git a/src/pages/shared_profile/components/ExpiredDateTimer.stories.ts b/src/pages/shared_profile/components/ExpiredDateTimer.stories.ts
@@ -12,5 +12,6 @@ type Story = StoryObj<typeof ExpiredDateTimer>;
 export const Default: Story = {
   args: {
     expiredDate: dayjs().add(1, 'day').toDate(),
+    type: 'NUDGE',
   },
 };
diff --git a/src/pages/shared_profile/components/ExpiredDateTimer.tsx b/src/pages/shared_profile/components/ExpiredDateTimer.tsx
@@ -1,15 +1,17 @@
 import { useEffect, useState } from 'react';
-import { Timer } from 'src/shared/ui/icons';
+import { Close, Timer } from 'src/shared/ui/icons';
 import { Theme } from 'src/shared/styles/constants';
 import dayjs from 'dayjs';
 import styles from './ExpiredDateTimer.module.css';
+import { IconButton } from 'src/shared/ui/IconButton/IconButton';
 
+const refineNumber = (n: number) => Math.floor(n).toString().padStart(2, '0');
 const getDiffText = (expiredDate: Date) => {
   const diff = dayjs(expiredDate).diff(dayjs(), 'second');
-  return `${Math.floor(diff / (60 * 60))}:${Math.floor((diff % (60 * 60)) / 60)}:${Math.floor(diff % 60)}`;
+  return `${refineNumber(diff / (60 * 60))}:${refineNumber((diff % (60 * 60)) / 60)}:${refineNumber(diff % 60)}`;
 };
 
-export const ExpiredDateTimer = ({ expiredDate }: { expiredDate: Date }) => {
+export const ExpiredDateTimer = ({ expiredDate, type = 'BOX' }: { expiredDate: Date; type: 'BOX' | 'NUDGE' }) => {
   const [timerText, setTimerText] = useState(() => getDiffText(expiredDate));
 
   useEffect(() => {
@@ -19,13 +21,33 @@ export const ExpiredDateTimer = ({ expiredDate }: { expiredDate: Date }) => {
     return () => clearInterval(timer);
   }, []);
 
-  return (
-    <div className={styles.Box}>
-      <span className={styles.Description}>이 시간동안 정보를 확인할 수 있어요!</span>
-      <div className={styles.Timer}>
-        <Timer color={Theme.color.primary} />
-        <span className={styles.TimerText}>{timerText}</span>
+  const [showNudge, setShowNudge] = useState(true);
+
+  if (type === 'BOX') {
+    return (
+      <div className={styles.Box}>
+        <span className={styles.Description}>이 시간동안 정보를 확인할 수 있어요!</span>
+        <div className={styles.Timer}>
+          <Timer color={Theme.color.primary} />
+          <span className={styles.TimerText}>{timerText}</span>
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
+
+  if (type === 'NUDGE') {
+    return (
+      showNudge && (
+        <div className={styles.Nudge}>
+          <div className={styles.Timer}>
+            <span>정보 확인 가능 시간</span>
+            <span className={styles.TimerText}>{timerText}</span>
+          </div>
+          <IconButton onClick={() => setShowNudge(false)}>
+            <Close color={Theme.color.neutral10} />
+          </IconButton>
+        </div>
+      )
+    );
+  }
 };
diff --git a/src/shared/styles/constants.ts b/src/shared/styles/constants.ts
@@ -12,6 +12,7 @@ export const Theme = {
     neutral30: '#cdcace',
     neutral20: '#ebeaeb',
     neutral10: '#f5f5f5',
+    neutral0: '#fff',
     kakao: '#FFE812',
   },
 } as const;
diff --git a/src/shared/ui/Button/Button.module.css b/src/shared/ui/Button/Button.module.css
@@ -90,4 +90,8 @@
 
 .Center {
     flex-grow: 1;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
diff --git a/src/shared/ui/ImageLayout/ImageLayout.module.css b/src/shared/ui/ImageLayout/ImageLayout.module.css
@@ -1,7 +1,7 @@
 
 .Carousel {
   width: 100%;
-  max-width: 480px;
+  max-width: min(480px, 100vw);
   height: 256px;
   background-color: var(--color-neutral-10);