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

v0.1.6
capstone-five-ai · Jun 12, 2024 · 68cf7ad · 68cf7ad
2 parents 453b5e2 + a3f0be5
commit 68cf7ad
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 15 deletions.
diff --git a/src/components/Card/GenerateMethodCard.tsx b/src/components/Card/GenerateMethodCard.tsx
@@ -60,8 +60,6 @@ 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 {
     box-shadow: 0px 0px 8px 0px rgba(54, 189, 180, 0.24);
 

diff --git a/src/components/Form/QuizGenerationForm.tsx b/src/components/Form/QuizGenerationForm.tsx
@@ -7,7 +7,7 @@ import useToast from '@/hooks/useToast';
 import colors from '@/styles/color';
 import { QuizType } from '@/types/quiz.type';
 import { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import DeleteIcon from '../Icon/DeleteIcon';
 
 interface QuizFormProps {
@@ -118,7 +118,10 @@ function QuizGenerationForm({
             </Typography>
             <StyledChoiceListContainer>
               {quizContent.problemChoices.map((choice, index) => (
-                <StyledChoiceWrapper key={`${index}`}>
+                <StyledChoiceWrapper
+                  key={`${index}`}
+                  $warning={showWarning && choice === ''}
+                >
                   <RadioButton
                     value={choice}
                     checked={quizContent.problemAnswer === `${index + 1}`}
@@ -188,8 +191,16 @@ const StyledChoiceListContainer = styled.div`
   gap: 8px;
 `;
 
-const StyledChoiceWrapper = styled.div`
+const StyledChoiceWrapper = styled.div<{ $warning: boolean }>`
   display: flex;
   gap: 12px;
   align-items: center;
+
+  ${({ $warning }) =>
+    $warning &&
+    css`
+      & > input {
+        margin-bottom: 23px;
+      }
+    `}
 `;
diff --git a/src/components/Navigation/MenuBar.tsx b/src/components/Navigation/MenuBar.tsx
@@ -106,8 +106,6 @@ 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,8 +80,6 @@ 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/LoginPage/BrandMotion.tsx b/src/containers/LoginPage/BrandMotion.tsx
@@ -1,5 +1,4 @@
 import { ReactComponent as Logo } from '@/assets/logo/qtudy.svg';
-import Typography from '@/components/Typography/Typography';
 import styled, { keyframes } from 'styled-components';
 
 function BrandMotion() {
@@ -13,10 +12,10 @@ function BrandMotion() {
 function Brand() {
   return (
     <Wrapper>
-      <Typography variant="h4" color="mainMintDark">
+      <div className="description">
         AI가 생성한 퀴즈와 요약으로 효율적인 학습을 돕는
-      </Typography>
-      <Logo />
+      </div>
+      <Logo width={310.25} />
     </Wrapper>
   );
 }
@@ -37,6 +36,12 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  .description {
+    ${({ theme }) => theme.typography.h4};
+    font-size: 18px;
+    color: ${({ theme }) => theme.colors.mainMintDark};
+  }
 `;
 
 const AnimatedLogo = styled(Brand)`

diff --git a/src/pages/SelectServicePage.tsx b/src/pages/SelectServicePage.tsx
@@ -89,7 +89,7 @@ const Container = styled.div`
 
   gap: 84px;
 
-  height: calc(100vh - 64px);
+  height: 100vh;
   background: ${({ theme }) => theme.colors.grayScale08};
 `;
 
@@ -102,7 +102,6 @@ const GradationContainer = styled.div`
   position: absolute;
   bottom: -35px;
   right: -62px;
-  z-index: -1;
 `;
 
 const CardContainer = styled.div`