Merge branch 'main' into feat/#306

woowacourse-teams · Aug 19, 2024 · 21d6dcf · 21d6dcf
2 parents e058add + 309bf43
commit 21d6dcf
Show file tree

Hide file tree

Showing 35 changed files with 282 additions and 149 deletions.
diff --git a/frontend/src/components/Carousel/Carousel.styled.ts b/frontend/src/components/Carousel/Carousel.styled.ts
@@ -49,7 +49,7 @@ export const Button = styled.button`
   width: 4.7rem;
   height: 10rem;
   background: rgba(0, 0, 0, 0.1);
-  color: white;
+  color: ${(props) => props.theme.colors.white};
   cursor: pointer;
   position: absolute;
   border-radius: 0.8rem;

diff --git a/frontend/src/components/DashBoard/DashBoardMissionList/NoContent.styled.ts b/frontend/src/components/DashBoard/DashBoardMissionList/NoContent.styled.ts
@@ -17,18 +17,18 @@ export const NoContent = styled(NoResultIcon)`
 `;
 
 export const MainText = styled.span`
-  font-size: 1.6rem;
+  ${(props) => props.theme.font.body}
   margin-bottom: 0.5rem;
 `;
 
 export const SubText = styled.span`
-  color: var(--grey-400);
-  font-size: 1.4rem;
+  color: ${(props) => props.theme.colors.grey400};
+  ${(props) => props.theme.font.caption}
   margin-bottom: 1rem;
 `;
 
 export const Button = styled.button`
-  background: var(--grey-200);
+  background: ${(props) => props.theme.colors.grey200};
   padding: 1.2rem 1.8rem;
   border-radius: 0.8rem;
 `;
diff --git a/frontend/src/components/Header/Header.styled.ts b/frontend/src/components/Header/Header.styled.ts
@@ -24,8 +24,7 @@ export const LogoImg = styled.img`
 `;
 
 export const Logo = styled.h1`
-  font-size: 3rem;
-  font-weight: 800;
+  ${(props) => props.theme.font.heading3}
 `;
 
 export const Spacer = styled.div`
@@ -46,7 +45,7 @@ export const RightPart = styled.div`
 export const LeftPart = styled.div``;
 
 export const LoginButton = styled.button`
-  font-size: 1.3rem;
+  ${(props) => props.theme.font.body}
 `;
 
 export const MenuWrapper = styled.div`
@@ -55,6 +54,6 @@ export const MenuWrapper = styled.div`
 `;
 
 export const MenuText = styled.p<{ $isActive?: boolean }>`
-  font-size: 1.6rem;
-  color: ${({ $isActive }) => ($isActive ? '' : 'var(--grey-400)')};
+  ${(props) => props.theme.font.body}
+  color: ${({ $isActive, theme }) => ($isActive ? '' : theme.colors.grey400)};
 `;
diff --git a/frontend/src/components/Header/NotiModal/NotiModal.styled.ts b/frontend/src/components/Header/NotiModal/NotiModal.styled.ts
@@ -5,9 +5,7 @@ export const NotiModalContainer = styled.div`
   position: fixed;
   top: 5.5rem;
   right: 17rem;
-  box-shadow:
-    0 0.6rem 0.9rem rgba(0, 0, 0, 0.12),
-    0 1.2rem 1.8rem rgba(0, 0, 0, 0.08);
+  box-shadow: ${(props) => props.theme.boxShadow.shadow12};
 
   border-radius: 1rem;
   padding: 2.5rem 3.4rem;
@@ -17,23 +15,22 @@ export const NotiModalContainer = styled.div`
 export const NotiItem = styled.div`
   width: 28rem;
   position: relative;
-  font-size: 1.1rem;
+  ${(props) => props.theme.font.caption}
   margin-bottom: 1rem;
   padding: 2.3rem 0;
-  border-bottom: 0.1rem solid var(--grey-100);
+  border-bottom: 0.1rem solid ${(props) => props.theme.colors.grey100};
   background-color: white;
   cursor: pointer;
 `;
 
 export const NotiModalTitle = styled.h2`
-  color: var(--grey-600);
-  font-size: 1.4rem;
+  color: ${(props) => props.theme.colors.grey600};
+  ${(props) => props.theme.font.caption}
   margin-bottom: 1.2rem;
-  font-weight: 500;
 `;
 
 export const NotiReadBtn = styled.button`
-  font-size: 1.5rem;
+  ${(props) => props.theme.font.body}
   width: 1.5rem;
   height: 1.5rem;
   position: absolute;
@@ -42,15 +39,13 @@ export const NotiReadBtn = styled.button`
 `;
 
 export const NotiTitle = styled.div`
-  font-size: 1.6rem;
-  font-weight: bold;
+  ${(props) => props.theme.font.bodyBold}
   margin-bottom: 0.6rem;
 `;
 
 export const NotiMessage = styled.div`
-  color: var(--grey-500);
-  font-size: 1.4rem;
-  font-weight: 500;
+  color: ${(props) => props.theme.colors.grey500};
+  ${(props) => props.theme.font.caption}
 
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/frontend/src/components/Mission/Mission.styled.ts b/frontend/src/components/Mission/Mission.styled.ts
@@ -15,7 +15,7 @@ export const MissionItemContainer = styled.article`
   width: 100%;
   max-width: 30rem;
   border-radius: 1rem;
-  border: 1px solid var(--grey-200);
+  border: 1px solid ${(props) => props.theme.colors.grey200};
   cursor: pointer;
 `;
 
@@ -24,7 +24,7 @@ export const MissionThumbnailImg = styled.img`
   width: 100%;
   height: 23rem;
   object-fit: cover;
-  border-bottom: 1px solid var(--grey-200);
+  border-bottom: 1px solid ${(props) => props.theme.colors.grey200};
 `;
 
 export const MissionInfoWrapper = styled.div`
@@ -39,8 +39,7 @@ export const MissionDescription = styled.div`
 `;
 
 export const MissionTitle = styled.p`
-  font-size: 1.6rem;
-  font-weight: bold;
+  ${(props) => props.theme.font.bodyBold}
   color: black;
   margin-bottom: 1.7rem;
 `;
@@ -50,8 +49,8 @@ export const MissionSummary = styled.div`
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
-  font-size: 1.4rem;
-  color: var(--grey-500);
+  ${(props) => props.theme.font.body}
+  color: ${(props) => props.theme.colors.grey500};
 `;
 
 export const MissionHashTagWrapper = styled.div`
@@ -75,7 +74,7 @@ export const MissionHashTagWrapper = styled.div`
 `;
 
 export const MissionHashTag = styled.span`
-  background: var(--primary-100);
+  background: ${(props) => props.theme.colors.primary100};
   border-radius: 0.8rem;
   padding: 0.4rem 0.8rem;
   text-align: center;
@@ -88,6 +87,6 @@ export const MissionHashTag = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 1.4rem;
+  ${(props) => props.theme.font.badge}
   flex-shrink: 0;
 `;
diff --git a/frontend/src/components/MissionDetail/MissionDetail.styled.ts b/frontend/src/components/MissionDetail/MissionDetail.styled.ts
@@ -31,7 +31,7 @@ export const ThumbnailImg = styled.img`
 export const GradientOverlay = styled.div`
   position: absolute;
   inset: 0;
-  background: linear-gradient(rgba(0, 0, 0, 0), var(--black-color));
+  background: linear-gradient(rgba(0, 0, 0, 0), ${(props) => props.theme.colors.black});
   opacity: 0.5;
   pointer-events: none; // 그라데이션이 클릭 이벤트를 방지하지 않도록 설정
 `;
@@ -40,10 +40,8 @@ export const Title = styled.h1`
   position: absolute;
   left: 2.1rem;
   bottom: 2.4rem;
-
-  font-size: 2.8rem;
-  font-weight: bold;
-  color: var(--white-color);
+  ${(props) => props.theme.font.heading1}
+  color: ${(props) => props.theme.colors.white};
 `;
 
 export const JavaIcon = styled(javaIcon)``;
@@ -75,14 +73,13 @@ export const InfoMsgWrapper = styled.div`
   border-radius: 0.8rem;
   padding: 0.3rem;
 
-  color: var(--grey-500);
-  font-size: 1.4rem;
-  font-weight: 500;
+  color: ${(props) => props.theme.colors.grey500};
+  ${(props) => props.theme.font.caption}
 
   cursor: pointer;
 
   &:hover {
-    background-color: var(--grey-50);
+    background-color: ${(props) => props.theme.colors.grey50};
   }
 `;
 
@@ -116,7 +113,7 @@ export const MissionDescription = styled.div`
   width: 100%;
   padding: 2rem;
 
-  background-color: var(--grey-50);
+  background-color: ${(props) => props.theme.colors.grey50};
   border-radius: 0.8rem;
 `;
 

diff --git a/frontend/src/components/MissionList/MissionList.styled.ts b/frontend/src/components/MissionList/MissionList.styled.ts
@@ -11,8 +11,7 @@ export const MissionListContainer = styled.div`
 `;
 
 export const MissionListTitle = styled.h2`
-  font-size: 2.4rem;
-  font-weight: 700;
+  ${(props) => props.theme.font.heading1}
   margin-bottom: 3rem;
 `;
 
@@ -27,7 +26,7 @@ export const MissionItemContainer = styled.article`
   width: 35rem;
 
   border-radius: 1rem;
-  border: 1px solid var(--grey-200);
+  border: 1px solid ${(props) => props.theme.colors.grey200};
   cursor: pointer;
 `;
 
@@ -36,7 +35,7 @@ export const MissionThumbnailImg = styled.img`
   width: 100%;
   height: 23rem;
   object-fit: cover;
-  border-bottom: 1px solid var(--grey-200);
+  border-bottom: 1px solid ${(props) => props.theme.colors.grey200};
 `;
 
 export const MissionDescription = styled.div`
@@ -47,8 +46,7 @@ export const MissionDescription = styled.div`
 `;
 
 export const MissionTitle = styled.p`
-  font-size: 1.6rem;
-  font-weight: bold;
+  ${(props) => props.theme.font.bodyBold}
   color: black;
   margin-bottom: 1.7rem;
 `;
diff --git a/frontend/src/components/MissionSubmit/MissionThumbnail.styled.ts b/frontend/src/components/MissionSubmit/MissionThumbnail.styled.ts
@@ -3,7 +3,6 @@ import javaIcon from '@/assets/images/java.svg';
 
 //TODO shadow에 대한 스타일 변수 적용해야합니다. @버건디
 export const MissionImageContainer = styled.div`
-  box-shadow: var(--shadow-20);
   margin-bottom: 4rem;
 `;
 
@@ -13,7 +12,8 @@ export const MissionImageWrapper = styled.div`
   align-items: center;
   flex-direction: column;
   width: 40rem;
-  border: 1px solid var(--grey-200);
+  border: 1px solid ${(props) => props.theme.colors.grey200};
+  filter: drop-shadow(${(props) => props.theme.boxShadow.shadow04});
   margin: 0 auto;
   border-radius: 1rem;
 `;
@@ -30,13 +30,12 @@ export const MissionSummaryWrapper = styled.div`
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1.5rem;
-  background: var(--grey-50);
+  background: ${(props) => props.theme.colors.grey50};
   border-radius: 0 0 1rem 1rem;
 `;
 
 export const MissionSummaryText = styled.span`
-  font-weight: 700;
-  font-size: 1.7rem;
+  ${(props) => props.theme.font.bodyBold}
 `;
 
 export const JavaIcon = styled(javaIcon)``;
diff --git a/frontend/src/components/MissionSubmit/MissionTitle.styled.ts b/frontend/src/components/MissionSubmit/MissionTitle.styled.ts
@@ -8,14 +8,13 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-weight: bold;
-  font-size: 1.5rem;
+  ${(props) => props.theme.font.bodyBold}
   margin: 1.1rem 0;
 `;
 
 export const Input = styled.input`
   border-radius: 0.5rem;
-  background: var(--grey-100);
+  background: ${(props) => props.theme.colors.grey100};
   padding: 1rem;
 
   &::placeholder {

diff --git a/frontend/src/components/MissionSubmit/OneWord.styled.ts b/frontend/src/components/MissionSubmit/OneWord.styled.ts
@@ -7,14 +7,13 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-weight: bold;
-  font-size: 1.5rem;
+  ${(props) => props.theme.font.bodyBold}
   margin: 1.1rem 0;
 `;
 
 export const TextArea = styled.textarea`
   border-radius: 0.5rem;
-  background: var(--grey-100);
+  background: ${(props) => props.theme.colors.grey100};
   padding: 1rem;
   height: 14rem;
 `;
diff --git a/frontend/src/components/MissionSubmit/PRLink.styled.ts b/frontend/src/components/MissionSubmit/PRLink.styled.ts
@@ -10,14 +10,13 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-weight: bold;
-  font-size: 1.5rem;
+  ${(props) => props.theme.font.bodyBold}
   margin: 1.1rem 0;
 `;
 
 export const Input = styled.input`
   border-radius: 0.5rem;
-  background: var(--grey-100);
+  background: ${(props) => props.theme.colors.grey100};
   padding: 1rem;
 
   &::placeholder {

diff --git a/frontend/src/components/MissionSubmit/SubmitBanner.styled.ts b/frontend/src/components/MissionSubmit/SubmitBanner.styled.ts
@@ -17,6 +17,5 @@ export const GithubIcon = styled(GithubLogo)`
 `;
 
 export const BannerTitle = styled.h1`
-  font-weight: bold;
-  font-size: 3rem;
+  ${(props) => props.theme.font.heading3}
 `;
diff --git a/frontend/src/components/MissionSubmit/SubmitButton.styled.ts b/frontend/src/components/MissionSubmit/SubmitButton.styled.ts
@@ -9,11 +9,10 @@ export const Container = styled.div`
 
 export const Button = styled.button`
   border-radius: 0.5rem;
-  background: #000;
-  color: #fff;
+  background: ${(props) => props.theme.colors.black};
+  color: ${(props) => props.theme.colors.white};
   width: 100%;
   height: 5rem;
-  font-weight: bold;
-  font-size: 2rem;
+  ${(props) => props.theme.font.button}
   margin-top: 10rem;
 `;