Merge pull request #26 from junction-asia-2023/feat/previewModal

Feat/preview modal
junction-asia-2023 · Aug 20, 2023 · a5ebbf8 · a5ebbf8
2 parents e24144b + d4e6fcf
commit a5ebbf8
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 8 deletions.
diff --git a/src/features/login/type.ts b/src/features/login/type.ts
@@ -4,6 +4,8 @@ export type User = {
   companyNo?: string;
   department?: string;
   position?: string;
+  comment?: string;
+  mood?: string;
 };
 export type DummyUser = User & { password?: string };
 

diff --git a/src/features/preview/Container.tsx b/src/features/preview/Container.tsx
@@ -18,7 +18,7 @@ const Container = () => {
 
   useLayoutEffect(() => {
     setTitle({ title: 'CardMe Preview', back: true });
-    setBottomBtn({ text: 'Modification', disable: curNum !== 1 });
+    setBottomBtn({ text: 'Edit', disable: curNum !== 1 });
 
     return () => {
       setTitle({});

diff --git a/src/features/setting/hooks/useSetting.ts b/src/features/setting/hooks/useSetting.ts
@@ -11,14 +11,26 @@ import badMood from '/png/badge_bad.png';
 
 import { dummyEsl, labelsImagePushPath, token } from '../constants';
 import { modalAtom } from '../../shared/modal/atom';
+import { userAtom } from '../../login/atom';
 
 const useSetting = () => {
   const [, setModal] = useAtom(modalAtom);
   const [, setPreviewMood] = useAtom(previewMoodAtom);
+  const [{ mood, comment }, setUser] = useAtom(userAtom);
+  const { register, handleSubmit, control, formState } = useForm<Inputs>({
+    defaultValues: {
+      mood: mood,
+      comment: comment,
+    },
+  });
 
-  const { register, handleSubmit, control, formState } = useForm<Inputs>();
   const onSubmit: SubmitHandler<Inputs> = async (data) => {
     const imgEl = document.createElement('img');
+    setUser((prev) => ({
+      ...prev,
+      mood: data.mood,
+      comment: data.comment,
+    }));
     imgEl.src = data.mood === 'mood_GOOD' ? goodMood : badMood; //TODO 이래도 될까
 
     fetch(imgEl.src)
@@ -39,7 +51,10 @@ const useSetting = () => {
   };
 
   const handlePreviewClick = () => {
-    setPreviewMood((prev) => ({ ...prev, open: true }));
+    setPreviewMood((prev) => ({
+      value: mood ? mood.slice(5) : prev.value,
+      open: true,
+    }));
     setModal({ open: true });
   };
 

diff --git a/src/features/shared/layout/components/BottomBtn.tsx b/src/features/shared/layout/components/BottomBtn.tsx
@@ -1,21 +1,33 @@
 import { useAtom } from 'jotai';
 import { FunctionComponent } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { activeSaveAtom, bottomBtnAtom } from '../atom';
 
 import addLogo from '/svg/add.svg';
 
+import { URL } from '../../constants/url';
+
 const LayoutBottomBtn: FunctionComponent = () => {
   const [{ text, add, disable }] = useAtom(bottomBtnAtom);
   const [, setActiveSave] = useAtom(activeSaveAtom);
+  const navigate = useNavigate();
+
+  const handleBtnClick = () => {
+    if (text === 'Edit') {
+      navigate(URL.setting);
+    } else if (text === 'Save') {
+      setActiveSave(true);
+    }
+  };
 
   if (!text) return null;
 
   return (
     <div className="layout-bottom">
       <button
         className="layout-bottom-btn"
-        onClick={() => setActiveSave(true)}
+        onClick={handleBtnClick}
         disabled={disable}
       >
         <div className="left">

diff --git a/src/features/shared/modal/Container.tsx b/src/features/shared/modal/Container.tsx
@@ -4,6 +4,8 @@ import { useResetAtom } from 'jotai/utils';
 import win from '/svg/win.svg';
 import next from '/svg/next.svg';
 import idCard from '/svg/idcard_basic.svg';
+import moodBad from '/png/mood_BAD.png';
+import moodGood from '/png/mood_GOOD.png';
 
 import { previewMoodAtom } from '../layout/atom';
 
@@ -12,7 +14,7 @@ import './modal.scss';
 
 const ModalContainer = () => {
   const [modal] = useAtom(modalAtom);
-  const [previewMood] = useAtom(previewMoodAtom);
+  const [previewMood, setPreviewMood] = useAtom(previewMoodAtom);
   const resetModal = useResetAtom(modalAtom);
 
   if (!modal.open) return null;
@@ -31,25 +33,30 @@ const ModalContainer = () => {
   const handleCloseClick = () => {
     onClose?.();
     resetModal();
+    setPreviewMood({ open: false });
   };
   const handleConfirmClick = () => {
     onConfirm?.();
     resetModal();
   };
-  console.log(previewMood);
   return (
     <div className="modal-container">
       <div className="content">
         <span className="close-btn" onClick={handleCloseClick}>
           &times;
         </span>
-        {previewMood.open || modal.open ? (
+        {previewMood.open && modal.open ? (
           <>
             <div className="modal-preview-title">Preview</div>
             <div className="modal-preview-box">
               <img src={idCard} alt="preview" />
               <div className="modal-sticker-picked">
-                <img src={`/png/mood_${previewMood.value}.png`} alt="preview" />
+                {previewMood.value === 'GOOD' && (
+                  <img src={moodGood} alt="preview" />
+                )}
+                {previewMood.value === 'BAD' && (
+                  <img src={moodBad} alt="preview" />
+                )}
               </div>
             </div>
           </>