Merge pull request #415 from New-Barams/feat/#397/send-remind-example

[민우] - 리마인드 메세지 예시로 보내보기 기능 모달 UI 작업
New-Barams · Jan 23, 2024 · 530954d · 530954d
2 parents e1b589a + 9277e23
commit 530954d
Show file tree

Hide file tree

Showing 9 changed files with 195 additions and 6 deletions.
diff --git a/public/remind_example_email_temp.png b/public/remind_example_email_temp.png
diff --git a/public/remind_example_kakao.png b/public/remind_example_kakao.png
diff --git a/src/app/(headerless)/login/index.scss b/src/app/(headerless)/login/index.scss
@@ -37,6 +37,7 @@
       width: 100%;
       height: 100%;
       gap: 1rem;
+
       &--image {
         width: 100%;
         height: 257px;

diff --git a/src/components/CreatePlanRemindDate/CreatePlanRemindDate.tsx b/src/components/CreatePlanRemindDate/CreatePlanRemindDate.tsx
@@ -19,7 +19,7 @@ interface CreatePlanRemindDateProps {
   isCreateOrEditPage: 'create' | 'edit';
 }
 
-export default function CreatePlanRemindDate({
+export default React.memo(function CreatePlanRemindDate({
   isCreateOrEditPage,
 }: CreatePlanRemindDateProps) {
   const [remindOptions, setRemindOptions] = useSessionStorage<RemindOptionType>(
@@ -136,4 +136,4 @@ export default function CreatePlanRemindDate({
       </div>
     </div>
   );
-}
+});
diff --git a/src/components/CreatePlanRemindMessage/CreatePlanRemindMessage.tsx b/src/components/CreatePlanRemindMessage/CreatePlanRemindMessage.tsx
@@ -5,14 +5,16 @@ import { useScroll } from '@/hooks/useScroll';
 import { useSessionStorage } from '@/hooks/useSessionStorage';
 import { RemindItemType } from '@/types/Remind';
 import classNames from 'classnames';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { WritableRemindItem } from '..';
+import ModalSendRemindExample from '../ModalSendRemindExample/ModalSendRemindExample';
 import './index.scss';
 
 interface CreatePlanRemindMessageProps {
   setIsLastStepDataAllExist: (isExist: boolean) => void;
   isCreateOrEditPage: 'create' | 'edit';
 }
+
 export default function CreatePlanRemindMessage({
   setIsLastStepDataAllExist,
   isCreateOrEditPage,
@@ -65,6 +67,8 @@ export default function CreatePlanRemindMessage({
     }
   }, [remindMessageList, setRemindMessageList]);
 
+  const [isSendRemindModalOpen, setIsSendRemindModalOpen] = useState(false);
+
   return (
     <div
       className={classNames(['create-remind-message'])}
@@ -74,6 +78,25 @@ export default function CreatePlanRemindMessage({
         선택받은 날짜에 받을 리마인드 메세지를 작성해주세요!
       </div>
 
+      <div className={classNames(['create-remind-message__remind-example'])}>
+        <span className={classNames(['font-size-sm', 'color-origin-primary'])}>
+          리마인드란 무엇인가요?
+        </span>
+        <button
+          className={classNames([
+            'create-remind-message__remind-example__button',
+            'font-size-xs',
+            'background-origin-primary',
+            'color-origin-white-100',
+            'border-round',
+          ])}
+          onClick={() => {
+            setIsSendRemindModalOpen(true);
+          }}>
+          알아보기
+        </button>
+      </div>
+
       <ul className={classNames(['create-remind-message__list'])}>
         {remindMessageList.map((item, index) => {
           return index === 0 ? (
@@ -100,6 +123,14 @@ export default function CreatePlanRemindMessage({
           );
         })}
       </ul>
+
+      {isSendRemindModalOpen && (
+        <ModalSendRemindExample
+          closeModal={() => {
+            setIsSendRemindModalOpen(false);
+          }}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/components/CreatePlanRemindMessage/index.scss b/src/components/CreatePlanRemindMessage/index.scss
@@ -11,7 +11,18 @@
     display: flex;
     justify-content: center;
     text-align: center;
-    margin-bottom: 2rem;
+  }
+
+  &__remind-example{
+    display: flex;
+    justify-content: center;
+    gap: 0.25rem;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+
+    &__button{
+      padding: 0rem 0.5rem;
+    }
   }
 
   &__list{

diff --git a/src/components/ModalSendRemindExample/ModalSendRemindExample.tsx b/src/components/ModalSendRemindExample/ModalSendRemindExample.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import classNames from 'classnames';
+import Image from 'next/image';
+import React from 'react';
+import { Modal, ModalBasic } from '..';
+import './index.scss';
+import remind_example_email_temp from '/public/remind_example_email_temp.png';
+import remind_example_kakao from '/public/remind_example_kakao.png';
+
+interface ModalSendRemindExampleProps {
+  closeModal: () => void;
+}
+
+export default function ModalSendRemindExample({
+  closeModal,
+}: ModalSendRemindExampleProps) {
+  const sendRemindExample = () => {
+    console.log('예시 리마인드 전송 후 완료 시 toast 띄우기 ! ');
+  };
+
+  const onClickSendRemindExample = () => {
+    sendRemindExample();
+    closeModal();
+  };
+
+  return (
+    <Modal>
+      <ModalBasic
+        onClickYes={onClickSendRemindExample}
+        onClickNo={() => {
+          closeModal();
+        }}
+        confirmSentense="체험하기">
+        <p className={classNames(['remind-example__title', 'font-size-lg'])}>
+          리마인드 메세지란?
+        </p>
+
+        <p className="remind-example__description">
+          미래의 나에게 보내는 메세지에요.
+        </p>
+
+        <div className="remind-example__content">
+          <div className="remind-example__kakao">
+            <p
+              className={classNames([
+                'remind-example__kakao__title',
+                'font-size-xs',
+              ])}>
+              카카오톡
+            </p>
+            <Image
+              className="remind-example__kakao__image"
+              src={remind_example_kakao}
+              alt="리마인드 메세지 예시 - 카카오톡"
+            />
+          </div>
+
+          <div className="remind-example__email">
+            <p
+              className={classNames([
+                'remind-example__email__title',
+                'font-size-xs',
+              ])}>
+              이메일
+            </p>
+            <Image
+              className="remind-example__email__image"
+              src={remind_example_email_temp}
+              alt="리마인드 메세지 예시 - 이메일"
+            />
+          </div>
+        </div>
+
+        <div className="remind-example__try">
+          <p
+            className={classNames([
+              'remind-example__try__title',
+              'font-size-sm',
+            ])}>
+            설정된 알림 방식으로 체험해볼 수 있어요!
+          </p>
+          <p
+            className={classNames([
+              'remind-example__try__warning-text',
+              'font-size-sm',
+              'color-origin-primary',
+            ])}>
+            {'(1일 3번 제한)'}
+          </p>
+        </div>
+      </ModalBasic>
+    </Modal>
+  );
+}
diff --git a/src/components/ModalSendRemindExample/index.scss b/src/components/ModalSendRemindExample/index.scss
@@ -0,0 +1,51 @@
+.remind-example {
+  &__title {
+    text-align: center;
+  }
+
+  &__description {
+    text-align: center;
+    margin-top: 1rem;
+  }
+
+  &__content {
+    margin-top: 1.5rem;
+    display: flex;
+    gap: 1rem;
+  }
+
+  &__kakao {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+
+    &__image {
+      margin-top: 0.5rem;
+      width: 100%;
+      height: 220px;
+      object-fit: contain;
+    }
+  }
+
+  &__email {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+
+    &__image {
+      width: 100%;
+      margin-top: 0.5rem;
+      height: 220px;
+      object-fit: contain;
+    }
+  }
+
+  &__try {
+    margin-top: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
diff --git a/src/components/RemindItem/WritableRemindItem/WritableRemindItem.tsx b/src/components/RemindItem/WritableRemindItem/WritableRemindItem.tsx
@@ -15,7 +15,7 @@ interface WritableRemindItemProps {
   classNameList?: string[];
 }
 
-export default function WritableRemindItem({
+export default React.memo(function WritableRemindItem({
   remindMonth,
   remindDay,
   remindMessage,
@@ -158,4 +158,4 @@ export default function WritableRemindItem({
       )}
     </>
   );
-}
+});