Merge pull request #12 from junction-asia-2023/feat/active

Feat/active

src/features/setting/Container.tsx

@@ -1,54 +1,34 @@
-import { Controller } from 'react-hook-form';
+import { useAtom } from 'jotai';
+import { useLayoutEffect } from 'react';
+
+import { bottomBtnAtom, titleAtom } from '../shared/layout/atom';
 
-import './style/index.scss';
-import { colorset } from './constants';
 import useSetting from './hooks/useSetting';
+import './style/index.scss';
+import PreviewSection from './components/PreviewSection';
+import SubmitForm from './components/SubmitForm';
 
 const Container = () => {
-  const { register, handleSubmit, control, onSubmit } = useSetting();
+  const [, setTitle] = useAtom(titleAtom);
+  const [, setBottomBtn] = useAtom(bottomBtnAtom);
 
-  return (
-    <div className="setting-container">
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div>
-          <span>Today's comment: </span>
-          <input defaultValue="퇴근하고싶다" {...register('comment')} />
-        </div>
+  const { handlePreviewClick, handleSubmit, onSubmit, register, control } =
+    useSetting();
 
-        <div>
-          {/* <select {...register('mude')}>
-          {colorset.map((color) => (
-            <option key={color} value={color}>{color}</option>
-          ))}
-        </select> */}
-          <Controller
-            name="mude"
-            control={control}
-            rules={{ required: true }}
-            render={({ field }) => (
-              <fieldset {...field}>
-                {colorset.map((color) => (
-                  <label htmlFor={color} key={color}>
-                    <input
-                      type="radio"
-                      id={color}
-                      name={field.name}
-                      value={color}
-                      checked={field.value === color}
-                      onChange={(e) => {
-                        field.onChange(e.target.value);
-                      }}
-                    />
-                    {color}
-                  </label>
-                ))}
-              </fieldset>
-            )}
-          />
-        </div>
+  useLayoutEffect(() => {
+    setTitle({ title: 'Active', back: true });
+    setBottomBtn({ text: 'Save' });
+  }, []);
 
-        <input type="submit" />
-      </form>
+  return (
+    <div className="setting-container">
+      <PreviewSection handlePreviewClick={handlePreviewClick} />
+      <SubmitForm
+        handleSubmit={handleSubmit}
+        onSubmit={onSubmit}
+        register={register}
+        control={control}
+      />
     </div>
   );
 };

src/features/setting/components/PreviewSection.tsx

@@ -0,0 +1,23 @@
+import { FunctionComponent } from 'react';
+
+import { previewSubText, previewTitleText } from '../constants';
+
+type PreviewSectionProps = {
+  handlePreviewClick: () => void;
+};
+
+const PreviewSection: FunctionComponent<PreviewSectionProps> = ({
+  handlePreviewClick,
+}) => {
+  return (
+    <div className="setting-preview-container">
+      <div className="setting-preview-title-text">{previewTitleText}</div>
+      <div className="setting-preview-sub-text">{previewSubText}</div>
+      <button className="setting-preview-btn" onClick={handlePreviewClick}>
+        Preview
+      </button>
+    </div>
+  );
+};
+
+export default PreviewSection;

src/features/setting/components/SubmitForm/DailySticker.tsx

@@ -0,0 +1,54 @@
+import { FunctionComponent } from 'react';
+import { Controller } from 'react-hook-form';
+import { Control } from 'react-hook-form';
+
+import { Inputs } from '../../types';
+import { stickerList, wordStickerText } from '../../constants';
+
+import '../../style/index.scss';
+
+type DailyStickerProps = {
+  control: Control<Inputs, any>;
+};
+
+const DailySticker: FunctionComponent<DailyStickerProps> = ({ control }) => {
+  return (
+    <div className="setting-sticker-container">
+      <span className="setting-sticker-title">{wordStickerText}</span>
+      <Controller
+        name="mude"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <div className="setting-sticker-box" {...field}>
+            {stickerList.map((sticker) => (
+              <label
+                htmlFor={sticker}
+                key={sticker}
+                className="setting-sticker-width"
+              >
+                <input
+                  type="radio"
+                  id={sticker}
+                  name={field.name}
+                  value={sticker}
+                  checked={field.value === sticker}
+                  onChange={(e) => {
+                    field.onChange(e.target.value);
+                  }}
+                />
+                <img
+                  src={`/png/${sticker}.png`}
+                  className="logo react"
+                  alt="React logo"
+                />
+              </label>
+            ))}
+          </div>
+        )}
+      />
+    </div>
+  );
+};
+
+export default DailySticker;

src/features/setting/components/SubmitForm/DailyWord.tsx

@@ -0,0 +1,21 @@
+import { FunctionComponent } from 'react';
+import { UseFormRegister } from 'react-hook-form';
+
+import { Inputs } from '../../types';
+import { wordTitleText } from '../../constants';
+import '../../style/index.scss';
+
+type DailyWordProps = {
+  register: UseFormRegister<Inputs>;
+};
+
+const DailyWord: FunctionComponent<DailyWordProps> = ({ register }) => {
+  return (
+    <div className="setting-word-container">
+      <span className="setting-word-title">{wordTitleText}</span>
+      <input className="setting-word-input" {...register('comment')} />
+    </div>
+  );
+};
+
+export default DailyWord;

src/features/setting/components/SubmitForm/index.tsx

@@ -0,0 +1,48 @@
+import { useAtom } from 'jotai';
+import { FunctionComponent, useEffect, useRef } from 'react';
+import {
+  UseFormHandleSubmit,
+  SubmitHandler,
+  UseFormRegister,
+  Control,
+} from 'react-hook-form';
+
+import { activeSaveAtom } from '../../../shared/layout/atom';
+import { Inputs } from '../../types';
+
+import DailySticker from './DailySticker';
+import DailyWord from './DailyWord';
+
+type SubmitFormProps = {
+  handleSubmit: UseFormHandleSubmit<Inputs, undefined>;
+  onSubmit: SubmitHandler<Inputs>;
+  register: UseFormRegister<Inputs>;
+  control: Control<Inputs, any>;
+};
+
+const SubmitForm: FunctionComponent<SubmitFormProps> = ({
+  handleSubmit,
+  onSubmit,
+  register,
+  control,
+}) => {
+  const [activeSave, setActiveSave] = useAtom(activeSaveAtom);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!activeSave) return;
+    setActiveSave(false);
+    inputRef.current?.click();
+  }, [activeSave]);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <DailyWord register={register} />
+      <DailySticker control={control} />
+      <input ref={inputRef} type="submit" style={{ visibility: 'hidden' }} />
+    </form>
+  );
+};
+
+export default SubmitForm;

src/features/setting/constants.ts

@@ -1 +1,9 @@
 export const colorset = ['red', 'yellow', 'green'];
+export const stickerList = ['mood_BAD', 'mood_GOOD'];
+
+export const previewTitleText = 'What is the Active Setting?';
+export const previewSubText =
+  'Congratulations on winning! Press the button to get a giftCongratulations on winning! Press the button to get a giftCongratulations on winning!';
+
+export const wordTitleText = 'Word of the day';
+export const wordStickerText = 'Word of the Sticker';

src/features/setting/hooks/useSetting.ts

@@ -1,21 +1,29 @@
 import { useForm, SubmitHandler } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
 
 import { Inputs } from '../types';
+import { URL } from '../../shared/constants/url';
 
 const useSetting = () => {
   const { register, handleSubmit, control } = useForm<Inputs>({
     defaultValues: {
-      mude: 'green',
-      comment: '퇴근!',
+      mude: '',
+      comment: '',
     },
   });
+  const navigate = useNavigate();
   const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
 
+  const handlePreviewClick = () => {
+    navigate(URL.preview);
+  };
+
   return {
     register,
     handleSubmit,
     control,
     onSubmit,
+    handlePreviewClick,
   };
 };