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

v0.1.7
capstone-five-ai · Jun 15, 2024 · 1cff1c9 · 1cff1c9
2 parents b216d76 + 74368b2
commit 1cff1c9
Show file tree

Hide file tree

Showing 28 changed files with 172 additions and 106 deletions.
diff --git a/index.html b/index.html
@@ -6,14 +6,15 @@
     <meta property="og:title" content="Qtudy" />
     <meta property="og:url" content="https://www.qtudy.com" />
     <meta property="og:image"
-      content="https://github.com/capstone-five-ai/Qtudy-FE/assets/87255791/249ea45f-d0ae-4456-a60b-22c4cc6b0c5f" />
+      content="https://github.com/capstone-five-ai/Qtudy-FE/assets/87255791/7baf8987-f3ae-4730-ac4e-f820d7c539bc" />
     <meta property="og:type" content="website" />
     <meta property="og:image:alt" content="AI-based Quiz and Summary Generation and Learning Service" />
     <meta property="og:description"
       content="AI 기반 퀴즈 및 요약정리 생성 및 학습 서비스, 큐터디" />
     <meta property="og:site_name" content="Qtudy" />
     <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">
+    <link rel="preload" href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css" as="style">
+    <link rel="stylesheet" href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="AI 기반 퀴즈 및 요약정리 생성 및 학습 서비스, 큐터디" />
     <title>Qtudy</title>

diff --git a/src/assets/logo/qtudy.svg b/src/assets/logo/qtudy.svg
diff --git a/src/components/Button/GenerateButton.tsx b/src/components/Button/GenerateButton.tsx
@@ -5,7 +5,7 @@ function GenerateButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
     <PlainButton {...props}>
       <TwinkleIcon />
-      Generate
+      생성하기
     </PlainButton>
   );
 }

diff --git a/src/components/Button/PlainButton.tsx b/src/components/Button/PlainButton.tsx
@@ -50,20 +50,19 @@ const getVariantStyle = ($variant: PlainButtonVariant) => {
     case 'primary':
       return css`
         color: ${({ theme }) => theme.colors.grayScale09};
-        background: ${({ theme }) => theme.colors.mainMintGra};
-        box-shadow: ${({ theme }) =>
-          `4px 2px 16px 0px ${theme.colors.mainMintShadow}`};
+        background: ${({ theme }) => theme.colors.mainMint};
 
         &:hover {
-          background: ${({ theme }) => theme.colors.mainMintDarkGra};
+          background: ${({ theme }) => theme.colors.mainMintMedium};
+          box-shadow: 0px 4px 12px 0px
+            ${({ theme }) => theme.colors.mainMintShadow};
         }
       `;
 
     case 'gray':
       return css`
         color: ${({ theme }) => theme.colors.grayScale03};
         background: ${({ theme }) => theme.colors.grayScale08};
-        box-shadow: 4px 2px 16px 0px rgba(189, 189, 189, 0.28);
         border: 0.8px solid ${({ theme }) => theme.colors.grayScale06};
 
         &:hover {
@@ -88,6 +87,8 @@ const StyledButton = styled.button<{
   ${({ $size }) => getSizeStyle($size)}
   ${({ $variant }) => getVariantStyle($variant)}
 
+  transition: all  0.3s ease;
+
   &:disabled {
     background: ${({ theme }) => theme.colors.grayScale06};
     color: ${({ theme }) => theme.colors.grayScale09};

diff --git a/src/components/Button/SaveToCategoryButton.tsx b/src/components/Button/SaveToCategoryButton.tsx
@@ -1,13 +1,21 @@
 import { ReactComponent as SaveIcon } from '@/assets/icons/save.svg';
 import PlainButton from '@/components/Button/PlainButton';
+import { CATEGORY_TYPE } from '@/constants';
+import { ServiceType } from '@/types/category.type';
 
-function SaveToCategoryButton(
-  props: React.ButtonHTMLAttributes<HTMLButtonElement>
-) {
+interface SaveToCategoryButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  generateType: ServiceType;
+}
+
+function SaveToCategoryButton({
+  generateType,
+  ...props
+}: SaveToCategoryButtonProps) {
   return (
     <PlainButton {...props}>
       <SaveIcon />
-      Save to Category
+      카테고리에 {CATEGORY_TYPE[generateType]} 추가
     </PlainButton>
   );
 }

diff --git a/src/components/Card/GenerateMethodCard.tsx b/src/components/Card/GenerateMethodCard.tsx
@@ -57,11 +57,11 @@ const StyledCard = styled.button`
   align-items: center;
 
   border-radius: 12px;
+  border: 1px solid rgba(224, 224, 224, 0.8);
   background: ${({ theme }) => theme.colors.grayScale09};
-  box-shadow: 0px 0px 8px 0px rgba(189, 189, 189, 0.2);
 
   &:hover {
-    box-shadow: 0px 0px 8px 0px rgba(54, 189, 180, 0.24);
+    border-color: ${({ theme }) => theme.colors.mainMint};
 
     .upload-icon {
       path {

diff --git a/src/components/Form/QuizGenerationForm.tsx b/src/components/Form/QuizGenerationForm.tsx
@@ -32,6 +32,10 @@ function QuizGenerationForm({
     setIsCommentOpen(false);
   }, [quizType]);
 
+  useEffect(() => {
+    if (quizContent.problemCommentary === '') setIsCommentOpen(true);
+  }, [showWarning]);
+
   const handleChangeQuestion = (
     e: React.ChangeEvent<HTMLInputElement>,
     _: number

diff --git a/src/components/Loader/GenerateLoader.tsx b/src/components/Loader/GenerateLoader.tsx
@@ -121,7 +121,7 @@ const StyledImageContainer = styled.div`
   }
 
   .logo {
-    height: 53px;
+    height: 29px;
     position: absolute;
     top: 50%;
     left: 50%;

diff --git a/src/components/Loader/SuspenseLoading.tsx b/src/components/Loader/SuspenseLoading.tsx
@@ -0,0 +1,5 @@
+function SuspenseLoading() {
+  return <div>Loading...</div>;
+}
+
+export default SuspenseLoading;
diff --git a/src/components/Modal/DeleteItemModal.tsx b/src/components/Modal/DeleteItemModal.tsx
@@ -55,7 +55,7 @@ const StyledLinkIcon = styled.div`
 
   border-radius: 18px;
   background: ${({ theme }) => theme.colors.grayScale09};
-  box-shadow: 0px 4px 8px 0px rgba(54, 189, 180, 0.24);
+  box-shadow: 0px 4px 8px 0px ${({ theme }) => theme.colors.mainMintShadow};
 
   svg {
     width: 24px;

diff --git a/src/components/Modal/ShareLinkModal.tsx b/src/components/Modal/ShareLinkModal.tsx
@@ -69,7 +69,7 @@ const StyledLinkIcon = styled.div`
 
   border-radius: 18px;
   background: ${({ theme }) => theme.colors.mainMint};
-  box-shadow: 0px 4px 8px 0px rgba(54, 189, 180, 0.24);
+  box-shadow: 0px 4px 8px 0px ${({ theme }) => theme.colors.mainMintShadow};
 
   svg {
     width: 24px;

diff --git a/src/components/Navigation/MenuBar.tsx b/src/components/Navigation/MenuBar.tsx
@@ -93,7 +93,7 @@ const StyledActiveIcon = styled.div<{ $isActive: boolean }>`
     $isActive &&
     css`
       background: ${theme.colors.mainMint};
-      box-shadow: 2px 1px 4px rgba(54, 189, 180, 0.24);
+      box-shadow: 2px 1px 4px ${({ theme }) => theme.colors.mainMintShadow};
     `}
 `;
 
@@ -110,7 +110,7 @@ const StyledMenuButton = styled.button<{ $isActive: boolean }>`
     color: ${({ theme }) => theme.colors.grayScale02};
     ${StyledActiveIcon} {
       background: ${(props) => props.theme.colors.mainMint};
-      box-shadow: 2px 1px 4px rgba(54, 189, 180, 0.24);
+      box-shadow: 2px 1px 4px ${({ theme }) => theme.colors.mainMintShadow};
     }
   }
 `;
diff --git a/src/components/Navigation/TopNavigation.tsx b/src/components/Navigation/TopNavigation.tsx
@@ -35,7 +35,7 @@ function TopNavigation() {
       <StyledInnerContainer>
         <div className="menu-list">
           <Link to="/">
-            <Logo width="113px" height="60px" style={{ marginRight: '60px' }} />
+            <Logo width="87px" height="32px" style={{ marginRight: '61px' }} />
           </Link>
           <MenuBar />
         </div>
@@ -55,7 +55,6 @@ export default TopNavigation;
 
 const StyledContainer = styled.div`
   width: 100%;
-  background: ${({ theme }) => theme.colors.mainMintLight};
 `;
 
 const StyledInnerContainer = styled.div`

diff --git a/src/containers/CategoryDetailPage/CategorySidebar.tsx b/src/containers/CategoryDetailPage/CategorySidebar.tsx
@@ -159,6 +159,7 @@ function CategorySidebar({
           <StyledButtonContainer>
             <ShareLinkButton link={window.location.href} />
             <SaveToCategoryButton
+              generateType={contentType}
               onClick={() => setShowAddCategoryModal(true)}
               disabled={!isAuthenticated}
             />

diff --git a/src/containers/CategoryPage/CategoryItem/CategoryItem.style.ts b/src/containers/CategoryPage/CategoryItem/CategoryItem.style.ts
@@ -12,8 +12,7 @@ export const StyledCategoryItemContainer = styled.button<{
   padding: ${(props) =>
     props.$itemType === 'QUIZ' ? '18.5px' : '19.5px 19px'};
   border-radius: 8px;
-  border: 1px solid transparent;
-  box-shadow: 0px 0px 12px 0px rgba(189, 189, 189, 0.2);
+  border: 1px solid rgba(224, 224, 224, 0.8);
   background: ${(props) => props.theme.colors.grayScale09};
 
   .icon {
@@ -25,8 +24,7 @@ export const StyledCategoryItemContainer = styled.button<{
   }
 
   &:hover {
-    border-color: rgba(62, 215, 205, 0.4);
-    box-shadow: 0px 0px 12px 0px rgba(62, 215, 205, 0.12);
+    border-color: ${(props) => props.theme.colors.mainMint};
 
     path {
       stroke: ${(props) => props.theme.colors.grayScale04};

diff --git a/src/containers/LoginPage/BrandMotion.tsx b/src/containers/LoginPage/BrandMotion.tsx
@@ -15,7 +15,7 @@ function Brand() {
       <div className="description">
         AI가 생성한 퀴즈와 요약으로 효율적인 학습을 돕는
       </div>
-      <Logo width={310.25} />
+      <Logo width={204} />
     </Wrapper>
   );
 }
@@ -41,6 +41,7 @@ const Wrapper = styled.div`
     ${({ theme }) => theme.typography.h4};
     font-size: 18px;
     color: ${({ theme }) => theme.colors.mainMintDark};
+    margin-bottom: 28px;
   }
 `;
 

diff --git a/src/containers/QuizAIPage/ResultSection.tsx b/src/containers/QuizAIPage/ResultSection.tsx
@@ -85,6 +85,7 @@ function ResultSection() {
               )}
             </ContentInnerContainer>
             <SaveToCategoryButton
+              generateType="QUIZ"
               disabled={!isAuthenticated}
               onClick={() => setShowModal(true)}
             />

diff --git a/src/containers/QuizUserPage/ResultSection.tsx b/src/containers/QuizUserPage/ResultSection.tsx
@@ -50,6 +50,7 @@ function ResultSection() {
               <ShareLinkButton link={window.location.href} />
             </StyledButtonContainer>
             <SaveToCategoryButton
+              generateType="QUIZ"
               disabled={!isAuthenticated}
               onClick={() => setShowModal(true)}
             />

diff --git a/src/containers/SelectServicePage/Card.tsx b/src/containers/SelectServicePage/Card.tsx
@@ -1,4 +1,3 @@
-import { ReactComponent as Arrow } from '@/assets/icons/long-arrow.svg';
 import Typography from '@/components/Typography/Typography';
 import { cloneElement } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -57,11 +56,6 @@ function Card({
           </Typography>
         </TextContainer>
       </Center>
-      {selected && (
-        <ArrowWrapper>
-          <Arrow />
-        </ArrowWrapper>
-      )}
     </Container>
   );
 }
@@ -136,10 +130,4 @@ const TextContainer = styled.div`
   }
 `;
 
-const ArrowWrapper = styled.div`
-  position: absolute;
-  bottom: 24px;
-  right: 24px;
-`;
-
 export default Card;
diff --git a/src/containers/SummaryAIPage/ResultSection.tsx b/src/containers/SummaryAIPage/ResultSection.tsx
@@ -64,6 +64,7 @@ function ResultSection() {
               )}
             </StyledButtonContainer>
             <SaveToCategoryButton
+              generateType="SUMMARY"
               disabled={!isAuthenticated}
               onClick={() => setShowModal(true)}
             />

diff --git a/src/containers/SummaryUserPage/ResultSection.tsx b/src/containers/SummaryUserPage/ResultSection.tsx
@@ -65,6 +65,7 @@ function ResultSection() {
               )}
             </StyledButtonContainer>
             <SaveToCategoryButton
+              generateType="SUMMARY"
               disabled={!isAuthenticated}
               onClick={() => setShowModal(true)}
             />