feat(active): change word, save active data in user

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 };
 

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({});

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 });
   };
 

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">