From 6fa952d8db468b48b3c985ad6ae0a233c390f45f Mon Sep 17 00:00:00 2001
From: anyl92 <yulim9592@gmail.com>
Date: Sun, 20 Aug 2023 07:42:43 +0900
Subject: [PATCH] feat(active): valid check, btn disable, checkd ui

---
 src/features/setting/Container.tsx            | 23 +++++++++---
 .../setting/components/PreviewSection.tsx     | 10 ++++-
 .../components/SubmitForm/DailySticker.tsx    | 11 +++++-
 .../components/SubmitForm/DailyWord.tsx       |  6 ++-
 src/features/setting/constants.ts             |  3 +-
 src/features/setting/hooks/useSetting.ts      |  3 +-
 src/features/setting/style/index.scss         | 37 +++++++++++++++----
 7 files changed, 74 insertions(+), 19 deletions(-)

diff --git a/src/features/setting/Container.tsx b/src/features/setting/Container.tsx
index 0a8ccf7..0149d34 100644
--- a/src/features/setting/Container.tsx
+++ b/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}
diff --git a/src/features/setting/components/PreviewSection.tsx b/src/features/setting/components/PreviewSection.tsx
index 3ae1db0..b904838 100644
--- a/src/features/setting/components/PreviewSection.tsx
+++ b/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>
diff --git a/src/features/setting/components/SubmitForm/DailySticker.tsx b/src/features/setting/components/SubmitForm/DailySticker.tsx
index 7c3c5d8..143db1d 100644
--- a/src/features/setting/components/SubmitForm/DailySticker.tsx
+++ b/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}
diff --git a/src/features/setting/components/SubmitForm/DailyWord.tsx b/src/features/setting/components/SubmitForm/DailyWord.tsx
index cf61dc9..5a77b3f 100644
--- a/src/features/setting/components/SubmitForm/DailyWord.tsx
+++ b/src/features/setting/components/SubmitForm/DailyWord.tsx
@@ -13,7 +13,11 @@ 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')} />
+      <input
+        className="setting-word-input"
+        placeholder="Please write a word to describe you."
+        {...register('comment', { required: true })}
+      />
     </div>
   );
 };
diff --git a/src/features/setting/constants.ts b/src/features/setting/constants.ts
index f3d7f66..607640f 100644
--- a/src/features/setting/constants.ts
+++ b/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 =
diff --git a/src/features/setting/hooks/useSetting.ts b/src/features/setting/hooks/useSetting.ts
index ea7a780..5e0af1d 100644
--- a/src/features/setting/hooks/useSetting.ts
+++ b/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,
   };
 };
 
diff --git a/src/features/setting/style/index.scss b/src/features/setting/style/index.scss
index 40cc527..8d185c7 100644
--- a/src/features/setting/style/index.scss
+++ b/src/features/setting/style/index.scss
@@ -46,6 +46,10 @@
     color: #191919;
     background-color: #FFFFFF;
     cursor: pointer;
+    &:disabled {
+      opacity: 0.3;
+      cursor: default;
+    }
   }
 
   &-word-container {
@@ -74,6 +78,7 @@
     align-self: stretch;
     border: 1px solid #191919;
     height: 40px;
+    padding: 0 14px;
   }
 
   &-sticker-container {
@@ -96,7 +101,7 @@
     margin-bottom: 8px;
   }
 
-   &-sticker-box {
+  &-sticker-box {
     display: flex;
     height: 100%;
     width: 100%;
@@ -110,15 +115,33 @@
       appearance: none;
       -webkit-appearance: none;
     }
-    input:checked {
-      outline: 1px solid #000;
-    }
-   }
+  }
 
-   &-sticker-width {
+  &-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 */
+  }
 }
\ No newline at end of file