Merge pull request #115 from capstone-five-ai/fix/#110/design-qa-5

fix: 디자인 피드백 5-1차 반영
capstone-five-ai · Jun 11, 2024 · 1f9db24 · 1f9db24
2 parents 6ed1f1b + 93c89ad
commit 1f9db24
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
     <link rel="icon" type="image/svg+xml" href="/src/assets/logo/favicon.svg" />
     <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="AI 기반 퀴즈 및 요약정리 생성 및 학습 서비스, 큐터디" />
     <title>Qtudy</title>
   </head>
   <body>

diff --git a/src/components/Button/PlainButton.tsx b/src/components/Button/PlainButton.tsx
@@ -68,7 +68,7 @@ const getVariantStyle = ($variant: PlainButtonVariant) => {
 
         &:hover {
           color: ${({ theme }) => theme.colors.grayScale02};
-          box-shadow: 4px 2px 16px 0px rgba(142, 142, 142, 0.12);
+          box-shadow: 4px 2px 16px 0px rgba(142, 142, 142, 0.24);
         }
       `;
   }
@@ -84,7 +84,7 @@ const StyledButton = styled.button<{
   gap: 10px;
 
   border-radius: 8px;
-  ${({ theme }) => theme.typography.button};
+  ${({ theme }) => theme.typography.button}
   ${({ $size }) => getSizeStyle($size)}
   ${({ $variant }) => getVariantStyle($variant)}
 

diff --git a/src/components/Card/GenerateMethodCard.tsx b/src/components/Card/GenerateMethodCard.tsx
@@ -60,28 +60,28 @@ const StyledCard = styled.button`
   background: ${({ theme }) => theme.colors.grayScale09};
   box-shadow: 0px 0px 8px 0px rgba(189, 189, 189, 0.2);
 
+  transition: all 0.5s;
+
   &:hover {
-    &:hover {
-      box-shadow: 0px 0px 8px 0px rgba(54, 189, 180, 0.24);
-
-      .upload-icon {
-        path {
-          stroke: ${(props) => props.theme.colors.mainMint};
-        }
-        path:first-of-type {
-          stroke: none;
-          fill: ${(props) => props.theme.colors.mainMint};
-        }
+    box-shadow: 0px 0px 8px 0px rgba(54, 189, 180, 0.24);
+
+    .upload-icon {
+      path {
+        stroke: ${(props) => props.theme.colors.mainMint};
+      }
+      path:first-of-type {
+        stroke: none;
+        fill: ${(props) => props.theme.colors.mainMint};
       }
+    }
 
-      .text-icon {
-        path {
-          stroke: ${(props) => props.theme.colors.mainMint};
-        }
-        path:last-of-type {
-          stroke: none;
-          fill: ${(props) => props.theme.colors.mainMint};
-        }
+    .text-icon {
+      path {
+        stroke: ${(props) => props.theme.colors.mainMint};
+      }
+      path:last-of-type {
+        stroke: none;
+        fill: ${(props) => props.theme.colors.mainMint};
       }
     }
   }

diff --git a/src/components/Navigation/MenuBar.tsx b/src/components/Navigation/MenuBar.tsx
@@ -106,6 +106,8 @@ const StyledMenuButton = styled.button<{ $isActive: boolean }>`
   color: ${({ $isActive, theme }) =>
     $isActive ? theme.colors.grayScale02 : theme.colors.grayScale03};
 
+  transition: all 0.5s;
+
   &:hover {
     color: ${({ theme }) => theme.colors.grayScale02};
     ${StyledActiveIcon} {

diff --git a/src/components/Navigation/TopNavigation.tsx b/src/components/Navigation/TopNavigation.tsx
@@ -80,6 +80,8 @@ const LogoutButton = styled.button`
   ${({ theme }) => theme.typography.subtitle};
   color: ${({ theme }) => theme.colors.grayScale04};
 
+  transition: all 0.5s;
+
   &:hover {
     color: ${({ theme }) => theme.colors.grayScale02};
   }

diff --git a/src/containers/CategoryPage/CategorySidebar.tsx b/src/containers/CategoryPage/CategorySidebar.tsx
@@ -108,6 +108,7 @@ const StyleTitleContainer = styled.div`
   justify-content: space-between;
   width: 100%;
   padding-right: 16px;
+  margin-top: 16px;
 
   .plus-button {
     display: flex;

diff --git a/src/containers/QuizUserPage/GenerateSection.tsx b/src/containers/QuizUserPage/GenerateSection.tsx
@@ -45,7 +45,7 @@ function GenerateSection() {
     if (
       quizContent.problemName === '' ||
       quizContent.problemCommentary === '' ||
-      quizContent.problemChoices.includes('')
+      (inputOption.type === '객관식' && quizContent.problemChoices.includes(''))
     ) {
       setShowWarning(true);
       return;

diff --git a/src/pages/CategoryQuizEditPage.tsx b/src/pages/CategoryQuizEditPage.tsx
@@ -90,6 +90,7 @@ function CategoryQuizEditPage() {
             quizType={quizType}
             quizContent={quizContent}
             setQuizContent={setQuizContent}
+            showWarning
           />
         </StyledInnerContainer>
       </StyledContent>

diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
@@ -42,6 +42,8 @@ const BrandWrapper = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
+
+  background: ${({ theme }) => theme.colors.mainMintLight};
 `;
 
 const LoginWrapper = styled.div`

diff --git a/src/pages/SelectServicePage.tsx b/src/pages/SelectServicePage.tsx
@@ -90,6 +90,7 @@ const Container = styled.div`
   gap: 84px;
 
   height: calc(100vh - 64px);
+  background: ${({ theme }) => theme.colors.grayScale08};
 `;
 
 const Title = styled.div`

diff --git a/src/styles/color.ts b/src/styles/color.ts
@@ -6,7 +6,7 @@ const colors = {
   mainMintDarkGra:
     'linear-gradient(0deg, #36BDB4 0%, rgba(54, 189, 180, 0.60) 100%)',
   mainMintLight: '#FBFFFF',
-  mainMintShadow: 'rgba(54, 189, 180, 0.32)',
+  mainMintShadow: 'rgba(54, 189, 180, 0.28)',
 
   grayScale01: '#000000',
   grayScale02: '#424242',