Merge pull request #112 from capstone-five-ai/develop

v0.1.4
capstone-five-ai · Jun 8, 2024 · 6d1582a · 6d1582a
2 parents bcfbc12 + 6ed1f1b
commit 6d1582a
Show file tree

Hide file tree

Showing 21 changed files with 206 additions and 118 deletions.
diff --git a/src/components/Button/PlainButton.tsx b/src/components/Button/PlainButton.tsx
@@ -64,12 +64,11 @@ const getVariantStyle = ($variant: PlainButtonVariant) => {
         color: ${({ theme }) => theme.colors.grayScale03};
         background: ${({ theme }) => theme.colors.grayScale08};
         box-shadow: 4px 2px 16px 0px rgba(189, 189, 189, 0.28);
-        border: 1px solid ${({ theme }) => theme.colors.grayScale06};
+        border: 0.8px solid ${({ theme }) => theme.colors.grayScale06};
 
         &:hover {
           color: ${({ theme }) => theme.colors.grayScale02};
-          background: ${({ theme }) => theme.colors.grayScale06};
-          box-shadow: 4px 2px 16px 0px rgba(142, 142, 142, 0.28);
+          box-shadow: 4px 2px 16px 0px rgba(142, 142, 142, 0.12);
         }
       `;
   }
@@ -93,5 +92,6 @@ const StyledButton = styled.button<{
     background: ${({ theme }) => theme.colors.grayScale06};
     color: ${({ theme }) => theme.colors.grayScale09};
     box-shadow: none;
+    cursor: default;
   }
 `;
diff --git a/src/components/Chip/FileTypeChip.tsx b/src/components/Chip/FileTypeChip.tsx
@@ -18,7 +18,7 @@ function FileTypeChip({
   return (
     <Wrapper type="button" {...props} $selected={selected}>
       <Typography
-        variant="detail"
+        variant="button"
         color={selected ? 'grayScale09' : 'mainMintDark'}
       >
         {children}

diff --git a/src/components/Form/QuizGenerationForm.tsx b/src/components/Form/QuizGenerationForm.tsx
@@ -14,6 +14,7 @@ interface QuizFormProps {
   quizType: string;
   quizContent: QuizType;
   setQuizContent: (newQuizContent: QuizType) => void;
+  showWarning?: boolean;
 }
 
 const MAX_OPTION_COUNT = 10;
@@ -22,6 +23,7 @@ function QuizGenerationForm({
   quizType,
   quizContent,
   setQuizContent,
+  showWarning = false,
 }: QuizFormProps) {
   const [isCommentOpen, setIsCommentOpen] = useState(false);
   const { fireToast } = useToast();
@@ -106,6 +108,8 @@ function QuizGenerationForm({
           name="problemName"
           value={quizContent.problemName}
           onChange={handleChangeQuestion}
+          showWarning={showWarning && quizContent.problemName === ''}
+          warningMessage="입력 필수인 항목입니다."
         />
         {quizType === '객관식' && (
           <>
@@ -133,6 +137,8 @@ function QuizGenerationForm({
                     value={choice}
                     onChange={handleChangeChoice}
                     onDelete={handleDeleteChoice}
+                    showWarning={showWarning && choice === ''}
+                    warningMessage="빈 항목입니다."
                   />
                 </StyledChoiceWrapper>
               ))}
@@ -154,6 +160,8 @@ function QuizGenerationForm({
         setIsCommentOpen={setIsCommentOpen}
         isEdit
         onChange={handleCommentaryChange}
+        showWarning={showWarning && quizContent.problemCommentary === ''}
+        warningMessage="입력 필수인 항목입니다."
       />
     </StyledContainer>
   );
@@ -171,6 +179,7 @@ const StyledQuizContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
+  padding-top: 4px;
 `;
 
 const StyledChoiceListContainer = styled.div`

diff --git a/src/components/Header/ContentHeader.tsx b/src/components/Header/ContentHeader.tsx
@@ -68,7 +68,7 @@ const StyledContentContainer = styled.div`
   padding: 28px 0px 20px;
 
   .title {
-    ${({ theme }) => theme.typography.h3};
+    ${({ theme }) => theme.typography.h2};
     color: ${({ theme }) => theme.colors.grayScale02};
   }
 

diff --git a/src/components/InputField/CommentInputField.tsx b/src/components/InputField/CommentInputField.tsx
@@ -16,6 +16,8 @@ interface CommentInputFieldProps {
 
 interface CommentEditInputFieldProps extends CommentInputFieldProps {
   isEdit?: boolean;
+  showWarning?: boolean;
+  warningMessage?: string;
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   setIsEdit?: (value: boolean) => void;
 }
@@ -66,6 +68,8 @@ export function CommentEditInputField({
   answer,
   commentary,
   isCommentOpen,
+  showWarning = false,
+  warningMessage,
   setIsCommentOpen,
   onChange,
   setIsEdit,
@@ -94,25 +98,28 @@ export function CommentEditInputField({
               <span className="answer">{answer && getCircleNum(answer)}</span>
             </div>
           )}
-          <StyledEditContent>
-            <StyledTextarea
-              ref={textareaRef}
-              placeholder="해설을 입력해주세요."
-              value={commentary}
-              onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
-                onChange && onChange(event);
-              }}
-              disabled={!isEdit}
-            />
-            {!isEdit && (
-              <EditIcon
-                className="icon"
-                onClick={() => {
-                  setIsEdit && setIsEdit(true);
+          <div>
+            <StyledEditContent $warning={showWarning}>
+              <StyledTextarea
+                ref={textareaRef}
+                placeholder="해설을 입력해주세요."
+                value={commentary}
+                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {
+                  onChange && onChange(event);
                 }}
+                disabled={!isEdit}
               />
-            )}
-          </StyledEditContent>
+              {!isEdit && (
+                <EditIcon
+                  className="icon"
+                  onClick={() => {
+                    setIsEdit && setIsEdit(true);
+                  }}
+                />
+              )}
+            </StyledEditContent>
+            <ErrorMessage $show={showWarning}>{warningMessage}</ErrorMessage>
+          </div>
         </>
       )}
     </StyledContainer>
@@ -167,8 +174,19 @@ const StyledDefaultContent = styled(StyledContent)`
   background: ${({ theme }) => theme.colors.mainMintLight};
 `;
 
-const StyledEditContent = styled(StyledContent)`
+const StyledEditContent = styled(StyledContent)<{ $warning: boolean }>`
   background: ${({ theme }) => theme.colors.grayScale09};
+  border: 0.5px solid transparent;
+
+  &:hover {
+    box-shadow: 0px 0px 4px 0px rgba(117, 117, 117, 0.32);
+  }
+
+  ${({ $warning, theme }) =>
+    $warning &&
+    css`
+      border-color: ${theme.colors.errorRed};
+    `}
 `;
 
 const StyledTextarea = styled.textarea`
@@ -204,3 +222,10 @@ const StyledText = styled.div`
   ${({ theme }) => theme.typography.body2};
   white-space: pre-wrap;
 `;
+
+const ErrorMessage = styled.div<{ $show: boolean }>`
+  display: ${({ $show }) => ($show ? 'block' : 'none')};
+  color: ${({ theme }) => theme.colors.errorRed};
+  ${({ theme }) => theme.typography.caption3};
+  margin-top: 4px;
+`;
diff --git a/src/components/InputField/FileNameInputField.tsx b/src/components/InputField/FileNameInputField.tsx
@@ -6,9 +6,9 @@ function FileNameInputField(props: NameInputFieldProps) {
   return (
     <StyledContainer>
       <Typography variant="subtitle" color="grayScale02">
-        파일명
+        제목
       </Typography>
-      <NameInputField placeholder="파일명을 입력해주세요." {...props} />
+      <NameInputField placeholder="제목을 입력해주세요." {...props} />
     </StyledContainer>
   );
 }

diff --git a/src/components/InputField/QuizInputField.tsx b/src/components/InputField/QuizInputField.tsx
@@ -12,6 +12,8 @@ interface QuizInputFieldProps
   type: 'question' | 'choice';
   index: number;
   isEdit?: boolean;
+  showWarning?: boolean;
+  warningMessage?: string;
   setIsEdit?: (value: boolean) => void;
   onChange: (event: React.ChangeEvent<HTMLInputElement>, index: number) => void;
   onDelete?: (index: number) => void;
@@ -21,46 +23,54 @@ function QuizInputField({
   type,
   index,
   isEdit,
+  showWarning = false,
+  warningMessage,
   setIsEdit,
   onChange,
   onDelete,
   ...props
 }: QuizInputFieldProps) {
   return (
-    <StyledContainer $type={type}>
-      <StyledInput
-        placeholder={PLACEHOLDER[type]}
-        onChange={(event) => {
-          onChange(event, index);
-        }}
-        disabled={!isEdit}
-        {...props}
-      />
-      <StyledIconContainer>
-        {!isEdit && (
-          <EditIcon
-            className="icon"
-            onClick={() => {
-              setIsEdit && setIsEdit(true);
-            }}
-          />
-        )}
-        {type === 'choice' && (
-          <DeleteIcon
-            className="icon"
-            onClick={() => {
-              onDelete && onDelete(index);
-            }}
-          />
-        )}
-      </StyledIconContainer>
-    </StyledContainer>
+    <div style={{ width: '100%' }}>
+      <StyledContainer $type={type} $warning={showWarning}>
+        <StyledInput
+          placeholder={PLACEHOLDER[type]}
+          onChange={(event) => {
+            onChange(event, index);
+          }}
+          disabled={!isEdit}
+          {...props}
+        />
+        <StyledIconContainer>
+          {!isEdit && (
+            <EditIcon
+              className="icon"
+              onClick={() => {
+                setIsEdit && setIsEdit(true);
+              }}
+            />
+          )}
+          {type === 'choice' && (
+            <DeleteIcon
+              className="icon"
+              onClick={() => {
+                onDelete && onDelete(index);
+              }}
+            />
+          )}
+        </StyledIconContainer>
+      </StyledContainer>
+      <ErrorMessage $show={showWarning}>{warningMessage}</ErrorMessage>
+    </div>
   );
 }
 
 export default QuizInputField;
 
-const StyledContainer = styled.div<{ $type: 'question' | 'choice' }>`
+const StyledContainer = styled.div<{
+  $type: 'question' | 'choice';
+  $warning: boolean;
+}>`
   display: flex;
   align-items: center;
   ${({ $type }) =>
@@ -72,6 +82,17 @@ const StyledContainer = styled.div<{ $type: 'question' | 'choice' }>`
   background: ${(props) => props.theme.colors.grayScale09};
   padding: 12px 16px;
   border-radius: 8px;
+  border: 0.5px solid transparent;
+
+  &:hover {
+    box-shadow: 0px 0px 4px 0px rgba(117, 117, 117, 0.32);
+  }
+
+  ${({ $warning, theme }) =>
+    $warning &&
+    css`
+      border-color: ${theme.colors.errorRed};
+    `}
 `;
 
 const StyledInput = styled.input`
@@ -95,3 +116,10 @@ const StyledIconContainer = styled.div`
     cursor: pointer;
   }
 `;
+
+const ErrorMessage = styled.div<{ $show: boolean }>`
+  display: ${({ $show }) => ($show ? 'block' : 'none')};
+  color: ${({ theme }) => theme.colors.errorRed};
+  ${({ theme }) => theme.typography.caption3};
+  margin-top: 4px;
+`;
diff --git a/src/components/Modal/SaveToCategoryModal.tsx b/src/components/Modal/SaveToCategoryModal.tsx
@@ -78,10 +78,14 @@ function SaveToCategoryModal({
         await postQuizToCategory(saveCategoryIds, contentId);
 
       onClose();
-      fireToast({ icon: <SaveIcon />, message: '카테고리에 저장되었습니다!' });
+      fireToast({
+        icon: <SaveIcon />,
+        message: '카테고리에 저장되었습니다!',
+        duration: 3000,
+      });
     } catch (e) {
       if (e instanceof AxiosError)
-        fireToast({ message: e.response?.data.errorMessage });
+        fireToast({ message: e.response?.data.errorMessage, duration: 3000 });
     }
   };
 

diff --git a/src/components/Sidebar/GenerateSidebar.tsx b/src/components/Sidebar/GenerateSidebar.tsx
@@ -49,7 +49,7 @@ function GenerateSidebar<T extends object>({
                 value={inputOption.fileName as string}
                 onChange={handleFileNameChange}
                 disabled={inputFieldDisabled}
-                errorMessage="중복되는 파일명입니다."
+                errorMessage="중복되는 제목입니다."
                 isError={inputOption.isDuplicatedFileName === true}
               />
             )}

diff --git a/src/components/Wrapper/GenerateMethodWrapper.tsx b/src/components/Wrapper/GenerateMethodWrapper.tsx
@@ -30,7 +30,7 @@ const StyledContainer = styled.div`
   margin-top: 86px;
 
   .text {
-    ${({ theme }) => theme.typography.caption2};
+    ${({ theme }) => theme.typography.h4};
     color: ${({ theme }) => theme.colors.grayScale03};
     text-align: center;
     margin-bottom: 52px;