From 6c9c43601ce656799eb175f0dfc2f573544c8a9b Mon Sep 17 00:00:00 2001
From: ooherin <555ohr@naver.com>
Date: Tue, 5 Nov 2024 17:33:13 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20autoLogin=20=EB=B2=84=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Main/ArticlePreviewCard.tsx  | 17 +++++++++++------
 .../components/Main/ChecklistCardContainer.tsx  |  8 +++++++-
 .../src/components/Main/ChecklistSection.tsx    |  2 ++
 .../components/Main/ChecklistSectionTitle.tsx   |  1 +
 .../AddressModal/RealTimeAddressModal.tsx       |  4 ++--
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Main/ArticlePreviewCard.tsx b/frontend/src/components/Main/ArticlePreviewCard.tsx
index dab0fe996..77dd0bfd7 100644
--- a/frontend/src/components/Main/ArticlePreviewCard.tsx
+++ b/frontend/src/components/Main/ArticlePreviewCard.tsx
@@ -17,7 +17,7 @@ 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));
@@ -25,13 +25,15 @@ const ArticlePreviewCard = ({ index, article }: Props) => {
 
   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
index 235a8d135..3f7a02f4e 100644
--- 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
index 2ba811f4e..c92d7556a 100644
--- 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
index 5718f6d9e..0b9b9e46a 100644
--- 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
index 624fce6b1..e5199763b 100644
--- a/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx
+++ b/frontend/src/components/NewChecklist/AddressModal/RealTimeAddressModal.tsx
@@ -49,7 +49,7 @@ const RealTimeAddressModal = () => {
     <>
       <S.AddressButton
         onClick={openModal}
-        label="실시간 주소"
+        label="현위치 찾기"
         size="full"
         isSquare={true}
         color="light"
@@ -57,7 +57,7 @@ const RealTimeAddressModal = () => {
       />
       {isModalOpen && (
         <Modal size="large" position="bottom" isOpen={isModalOpen} onClose={closeModal}>
-          <Modal.header>실시간 주소</Modal.header>
+          <Modal.header>현위치 찾기</Modal.header>
           <Modal.body>
             <div>
               지도를 클릭하면 현재 위치를 움직일 수 있어요. <br />