fix: autoLogin 버그 수정 및 메인 페이지 디자인 수정

woowacourse-teams · Nov 5, 2024 · 6c9c436 · 6c9c436
1 parent cc8a877
commit 6c9c436
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 9 deletions.
diff --git a/frontend/src/components/Main/ArticlePreviewCard.tsx b/frontend/src/components/Main/ArticlePreviewCard.tsx
@@ -17,21 +17,23 @@ const ArticlePreviewCard = ({ index, article }: Props) => {
   const navigate = useNavigate();
   const { articleId, keyword, title } = article;
 
-  const { color500, color600 } = getSeqColor(index);
+  const { color600, color200 } = getSeqColor(index);
 
   const handleClickArticle = () => {
     navigate(ROUTE_PATH.articleOne(articleId));
   };
 
   return (
     <S.Container
-      bgColor={color500}
-      hoverColor={color600}
+      bgColor={theme.palette.white}
+      hoverColor={color200}
       onClick={handleClickArticle}
       tabIndex={1}
       aria-label="클릭하면 해당 아티클 페이지로 이동합니다"
     >
-      <S.Keyword bgColor={color600}>{keyword}</S.Keyword>
+      <S.Keyword bgColor={theme.palette.background} color={color600}>
+        {keyword}
+      </S.Keyword>
       <S.Title>{title}</S.Title>
       <S.ArrowButton>
         <ArrowRight stroke={color600} aria-hidden="true" />
@@ -51,7 +53,7 @@ const S = {
 
     background-color: ${({ bgColor }) => bgColor};
 
-    color: ${theme.palette.white};
+    color: ${theme.palette.black};
     box-sizing: border-box;
     border-radius: 2.4rem;
     ${boxShadowSpread}
@@ -62,11 +64,14 @@ const S = {
       background-color: ${({ hoverColor }) => hoverColor};
     }
   `,
-  Keyword: styled.div<{ bgColor: string }>`
+  Keyword: styled.div<{ bgColor: string; color: string }>`
     display: inline-block;
     padding: 0.4rem 1rem;
 
     background-color: ${({ bgColor }) => bgColor};
+
+    color: ${({ color }) => color};
+    font-weight: ${({ theme }) => theme.text.weight.bold};
     box-sizing: content-box;
     border-radius: 0.6rem;
   `,

diff --git a/frontend/src/components/Main/ChecklistCardContainer.tsx b/frontend/src/components/Main/ChecklistCardContainer.tsx
@@ -39,6 +39,12 @@ const S = {
     padding: 1.8rem 4.8rem;
     border-radius: 0.8rem;
 
-    background-color: ${({ theme }) => theme.palette.grey100};
+    background-color: ${({ theme }) => theme.palette.green500};
+
+    color: ${({ theme }) => theme.palette.white};
+
+    :hover {
+      background-color: ${({ theme }) => theme.palette.green600};
+    }
   `,
 };
diff --git a/frontend/src/components/Main/ChecklistSection.tsx b/frontend/src/components/Main/ChecklistSection.tsx
@@ -48,6 +48,8 @@ const S = {
     margin: 1.6rem;
     padding: 2.4rem 1.6rem;
 
+    background-color: ${({ theme }) => theme.palette.white};
+
     border-radius: 1.6rem;
     ${boxShadow};
     ${flexColumn};

diff --git a/frontend/src/components/Main/ChecklistSectionTitle.tsx b/frontend/src/components/Main/ChecklistSectionTitle.tsx
@@ -17,6 +17,7 @@ export default ChecklistSectionTitle;
 const S = {
   ContainerTitle: styled.div`
     ${title3}
+    background-color: ${({ theme }) => theme.palette.white};
   `,
   Count: styled.span`
     color: ${({ theme }) => theme.palette.green500};

diff --git a/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx b/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx
@@ -49,15 +49,15 @@ const RealTimeAddressModal = () => {
     <>
       <S.AddressButton
         onClick={openModal}
-        label="실시간 주소"
+        label="현위치 찾기"
         size="full"
         isSquare={true}
         color="light"
         Icon={Location}
       />
       {isModalOpen && (
         <Modal size="large" position="bottom" isOpen={isModalOpen} onClose={closeModal}>
-          <Modal.header>실시간 주소</Modal.header>
+          <Modal.header>현위치 찾기</Modal.header>
           <Modal.body>
             <div>
               지도를 클릭하면 현재 위치를 움직일 수 있어요. <br />