diff --git a/index.html b/index.html index b2288c8..306d0ed 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@ + Qtudy diff --git a/src/components/Button/PlainButton.tsx b/src/components/Button/PlainButton.tsx index 079a74b..93f36ec 100644 --- 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 index c057ea1..30d4bc5 100644 --- 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 index c676bc1..bff3a51 100644 --- 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 index 1880450..85e9780 100644 --- 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 index 47641ea..3219001 100644 --- 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 index f62a8be..63c355d 100644 --- 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 index b42428f..297ddb0 100644 --- a/src/pages/CategoryQuizEditPage.tsx +++ b/src/pages/CategoryQuizEditPage.tsx @@ -90,6 +90,7 @@ function CategoryQuizEditPage() { quizType={quizType} quizContent={quizContent} setQuizContent={setQuizContent} + showWarning /> diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index 9a266d3..542db60 100644 --- 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 index 90a0899..7488f2c 100644 --- 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 index 92e064c..629a91f 100644 --- 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',