Merge pull request Next-Room#77 from Next-Room/feat/hint-qa

Feat/hint qa

Author: lgrin-byte

app/(shared)/(ThemeTextField)/textField.modules.sass

@@ -9,7 +9,7 @@
   border-radius: 8px
   display: flex
 
-  background-color: $color-sub1
+  background-color: $color-white5
   border: 1px solid $color-white20
   padding: 30px 22px
   cursor: pointer

app/admin-new/(components)/ThemeDrawer/AddHintDrawer.tsx

@@ -11,10 +11,14 @@ import {
   rateTextFieldProps,
   XImageProps,
 } from "./consts/themeDrawerProps";
-import { OnCloseDrawerType } from "./types/themeDrawerTypes";
+import { DrawerType } from "./types/themeDrawerTypes";
 import useEditHint from "./hooks/useEditHint";
 
-const EditHintDrawer = ({ onCloseDrawer }: OnCloseDrawerType) => {
+const ThemeDrawer = ({
+  onCloseDrawer,
+  hintType,
+  handleHintCreate,
+}: DrawerType) => {
   const [selectedHint] = useSelectedHint();
   const {
     handleSubmit,
@@ -24,20 +28,25 @@ const EditHintDrawer = ({ onCloseDrawer }: OnCloseDrawerType) => {
     answerImages,
     setAnswerImages,
     isDisabled,
+    isImcomplete,
     deleteHintBtn,
     handleOpenHintModal,
-  } = useEditHint({ onCloseDrawer });
+  } = useEditHint({ onCloseDrawer, hintType, handleHintCreate });
 
   return (
     <form
-      className="theme-drawer__container"
+      className="theme-drawer__container animate"
       onSubmit={handleSubmit}
       ref={drawerRef}
       key={selectedHint.id}
     >
       <div className="theme-drawer__title">
         <span>힌트</span>
-        <button type="button" onClick={handleOpenHintModal}>
+        <button
+          type="button"
+          className="ghost_white_icon_button28"
+          onClick={handleOpenHintModal}
+        >
           <Image {...XImageProps} />
         </button>
       </div>
@@ -46,7 +55,9 @@ const EditHintDrawer = ({ onCloseDrawer }: OnCloseDrawerType) => {
         <div className="drawer-code">
           <ThemeTextField
             {...codeTextFieldProps}
-            content={selectedHint.hintCode.toString()}
+            content={
+              selectedHint.hintCode ? selectedHint.hintCode.toString() : ""
+            }
           />
         </div>
 
@@ -63,34 +74,46 @@ const EditHintDrawer = ({ onCloseDrawer }: OnCloseDrawerType) => {
           <div className="drawer-category-title">문제 진행률</div>
           <ThemeTextField
             {...rateTextFieldProps}
-            content={selectedHint.progress.toString()}
+            content={
+              selectedHint.progress ? selectedHint.progress.toString() : ""
+            }
           />
         </div>
 
         <ThemeDrawerHint
-          hintImages={hintImages}
-          setHintImages={setHintImages}
+          imageType={"hint"}
+          images={hintImages}
+          setImages={setHintImages}
         />
 
         <ThemeDrawerAnswer
-          answerImages={answerImages}
-          setAnswerImages={setAnswerImages}
+          imageType={"answer"}
+          images={answerImages}
+          setImages={setAnswerImages}
         />
       </div>
 
-      <div className="theme-drawer__footer">
-        <button
-          className="outlined_button40"
-          type="button"
-          onClick={deleteHintBtn}
-        >
-          삭제하기
-        </button>
-        <button className="button40" type="submit" disabled={isDisabled}>
-          저장하기
-        </button>
-      </div>
+      {hintType === "Edit" ? (
+        <div className="theme-drawer__footer">
+          <button
+            className="outlined_button40"
+            type="button"
+            onClick={deleteHintBtn}
+          >
+            삭제하기
+          </button>
+          <button className="button40" type="submit" disabled={isDisabled}>
+            저장하기
+          </button>
+        </div>
+      ) : (
+        <div className="theme-drawer__footer">
+          <button className="button40" type="submit" disabled={isImcomplete}>
+            추가하기
+          </button>
+        </div>
+      )}
     </form>
   );
 };
-export default EditHintDrawer;
+export default ThemeDrawer;