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

feat(active): valid check, btn disable, checkd ui

src/features/setting/Container.tsx

@@ -12,22 +12,33 @@ const Container = () => {
   const [, setTitle] = useAtom(titleAtom);
   const [, setBottomBtn] = useAtom(bottomBtnAtom);
 
-  const { handlePreviewClick, handleSubmit, onSubmit, register, control } =
-    useSetting();
+  const {
+    handlePreviewClick,
+    handleSubmit,
+    onSubmit,
+    register,
+    control,
+    formState,
+  } = useSetting();
 
   useLayoutEffect(() => {
     setTitle({ title: 'Active', back: true });
-    setBottomBtn({ text: 'Save' });
-
+    setBottomBtn({
+      text: 'Save',
+      disable: !formState.isValid ? true : false,
+    });
     return () => {
       setTitle({});
       setBottomBtn({});
     };
-  }, []);
+  }, [formState.isValid]);
 
   return (
     <div className="setting-container">
-      <PreviewSection handlePreviewClick={handlePreviewClick} />
+      <PreviewSection
+        handlePreviewClick={handlePreviewClick}
+        formState={formState}
+      />
       <SubmitForm
         handleSubmit={handleSubmit}
         onSubmit={onSubmit}

src/features/setting/components/PreviewSection.tsx

@@ -1,19 +1,27 @@
 import { FunctionComponent } from 'react';
+import { FormState } from 'react-hook-form';
 
 import { previewSubText, previewTitleText } from '../constants';
+import { Inputs } from '../types';
 
 type PreviewSectionProps = {
   handlePreviewClick: () => void;
+  formState: FormState<Inputs>;
 };
 
 const PreviewSection: FunctionComponent<PreviewSectionProps> = ({
   handlePreviewClick,
+  formState,
 }) => {
   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}>
+      <button
+        className="setting-preview-btn"
+        onClick={handlePreviewClick}
+        disabled={!formState.isValid}
+      >
         Preview
       </button>
     </div>

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

@@ -3,7 +3,7 @@ import { Controller } from 'react-hook-form';
 import { Control } from 'react-hook-form';
 
 import { Inputs } from '../../types';
-import { stickerList, wordStickerText } from '../../constants';
+import { stickerList, stickerText, wordStickerText } from '../../constants';
 
 import moodBad from '/png/mood_BAD.png';
 import moodGood from '/png/mood_GOOD.png';
@@ -23,12 +23,19 @@ const DailySticker: FunctionComponent<DailyStickerProps> = ({ control }) => {
         rules={{ required: true }}
         render={({ field }) => (
           <div className="setting-sticker-box" {...field}>
-            {stickerList.map((sticker) => (
+            {stickerList.map((sticker, idx) => (
               <label
                 htmlFor={sticker}
                 key={sticker}
                 className="setting-sticker-width"
               >
+                {field.value === sticker && (
+                  <div className="setting-sticker-picked">
+                    <span className="setting-sticker-text">
+                      {stickerText[idx]}
+                    </span>
+                  </div>
+                )}
                 <input
                   type="radio"
                   id={sticker}

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

@@ -15,8 +15,8 @@ const DailyWord: FunctionComponent<DailyWordProps> = ({ register }) => {
       <span className="setting-word-title">{wordTitleText}</span>
       <input
         className="setting-word-input"
-        {...register('comment')}
         placeholder="Please write a word to describe you."
+        {...register('comment', { required: true })}
       />
     </div>
   );

src/features/setting/constants.ts

@@ -1,5 +1,6 @@
 export const colorset = ['red', 'yellow', 'green'];
-export const stickerList = ['mood_BAD', 'mood_GOOD'];
+export const stickerList = ['mood_GOOD', 'mood_BAD'];
+export const stickerText = ['GOOD', 'BAD'];
 
 export const previewTitleText = 'What is the Active Mood?';
 export const previewSubText =

src/features/setting/hooks/useSetting.ts

@@ -12,7 +12,7 @@ import badMood from '/png/badge_bad.png';
 import { dummyEsl, labelsImagePushPath, token } from '../constants';
 
 const useSetting = () => {
-  const { register, handleSubmit, control } = useForm<Inputs>({
+  const { register, handleSubmit, control, formState } = useForm<Inputs>({
     defaultValues: {
       mood: '',
       comment: '',
@@ -86,6 +86,7 @@ const useSetting = () => {
     control,
     onSubmit,
     handlePreviewClick,
+    formState,
   };
 };
 

src/features/setting/style/index.scss

@@ -46,11 +46,10 @@
     color: #191919;
     background-color: #ffffff;
     cursor: pointer;
-    border-radius: 4px;
-  }
-
-  &-preview-btn:disabled {
-    opacity: 0.3;
+    &:disabled {
+      opacity: 0.3;
+      cursor: default;
+    }
   }
 
   &-word-container {
@@ -82,6 +81,7 @@
     background: #f7f7f7;
     padding: 8px 14px;
     height: 40px;
+    padding: 0 14px;
   }
 
   &-word-input::placeholder {
@@ -124,15 +124,33 @@
       appearance: none;
       -webkit-appearance: none;
     }
-    input:checked {
-      outline: 1px solid #000;
-    }
   }
 
   &-sticker-width {
     width: 48%;
     img {
       width: 100%;
     }
+    position: relative;
+  }
+
+  &-sticker-picked {
+    position: absolute;  
+    width: 100%;
+    height: 100%;
+    border: 2px solid #5D8FFF;
+    background: rgba(93, 143, 255, 0.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-sticker-text {
+    color: #5D8FFF;
+    text-align: center;
+    font-size: 34px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 100%; /* 34px */
   }
 }