From f2ba20daf7c46b1e544bdc27692e638762843e80 Mon Sep 17 00:00:00 2001
From: chacha <chacha@sparcs.org>
Date: Fri, 22 Nov 2024 01:12:33 +0900
Subject: [PATCH 1/2] feat: add new components

---
 .../src/common/components/DocumentCard.tsx    | 50 ++++++++++++++++++
 .../src/common/components/SemesterCard.tsx    | 51 +++++++++++++++++++
 packages/web/src/styles/themes/colors.ts      |  1 +
 3 files changed, 102 insertions(+)
 create mode 100644 packages/web/src/common/components/DocumentCard.tsx
 create mode 100644 packages/web/src/common/components/SemesterCard.tsx

diff --git a/packages/web/src/common/components/DocumentCard.tsx b/packages/web/src/common/components/DocumentCard.tsx
new file mode 100644
index 0000000..51730c6
--- /dev/null
+++ b/packages/web/src/common/components/DocumentCard.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import styled from "styled-components";
+import Typography from "./Typography";
+
+const CardWrapper = styled.div`
+  display: flex;
+  width: 400px;
+  height: 138px;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+const CardHeaderWrapper = styled.div`
+  display: flex;
+  padding: 13px 33px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px 4px 0px 0px;
+  background-color: ${({ theme }) => theme.colors.GREEN[700]};
+`;
+
+const CardContentWrapper = styled.div`
+  display: flex;
+  padding: 20px 32px;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 0px 0px 4px 4px;
+  border-right: 1px solid ${({ theme }) => theme.colors.GRAY[100]}; // CHACHA: D9 일단 GRAY 100으로?
+  border-bottom: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
+  border-left: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
+  background-color: ${({ theme }) => theme.colors.WHITE};
+`;
+
+const DocumentCard: React.FC = () => (
+  <CardWrapper>
+    <CardHeaderWrapper>
+      <Typography fs={20} fw="SEMIBOLD" color="WHITE">
+        문서 유형 선택
+      </Typography>
+    </CardHeaderWrapper>
+    <CardContentWrapper />
+  </CardWrapper>
+);
+export default DocumentCard;
diff --git a/packages/web/src/common/components/SemesterCard.tsx b/packages/web/src/common/components/SemesterCard.tsx
new file mode 100644
index 0000000..53e9b90
--- /dev/null
+++ b/packages/web/src/common/components/SemesterCard.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import styled from "styled-components";
+import Typography from "./Typography";
+
+const CardWrapper = styled.div`
+  display: flex;
+  width: 400px;
+  height: 132px;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+const CardHeaderWrapper = styled.div`
+  display: flex;
+  padding: 13px 33px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px 4px 0px 0px;
+  background-color: ${({ theme }) => theme.colors.GREEN[700]};
+`;
+
+const CardContentWrapper = styled.div`
+  display: flex;
+  padding: 20px 32px;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 0px 0px 4px 4px;
+  border-right: 1px solid ${({ theme }) => theme.colors.GRAY[100]}; // CHACHA: D9 일단 GRAY 100으로?
+  border-bottom: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
+  border-left: 1px solid ${({ theme }) => theme.colors.GRAY[100]};
+  background-color: ${({ theme }) => theme.colors.WHITE};
+`;
+
+const SemesterCard: React.FC = () => (
+  <CardWrapper>
+    <CardHeaderWrapper>
+      <Typography fs={20} fw="SEMIBOLD" color="WHITE">
+        분기 선택
+      </Typography>
+    </CardHeaderWrapper>
+    <CardContentWrapper />
+  </CardWrapper>
+);
+
+export default SemesterCard;
diff --git a/packages/web/src/styles/themes/colors.ts b/packages/web/src/styles/themes/colors.ts
index be6d447..ddec92b 100644
--- a/packages/web/src/styles/themes/colors.ts
+++ b/packages/web/src/styles/themes/colors.ts
@@ -20,6 +20,7 @@ const colors = {
     100: "#C3E3D6",
     300: "#7FBDA4",
     600: "#298062",
+    700: "#00674B",
     800: "#09563F",
   },
   RED: {

From 9d8be45cbb52a38900611a39ae8f6d8ef79d40db Mon Sep 17 00:00:00 2001
From: chacha <chacha@sparcs.org>
Date: Fri, 22 Nov 2024 01:19:19 +0900
Subject: [PATCH 2/2] fix: build pass

---
 packages/web/src/common/components/Typography.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/src/common/components/Typography.tsx b/packages/web/src/common/components/Typography.tsx
index 6cd310d..87dec99 100644
--- a/packages/web/src/common/components/Typography.tsx
+++ b/packages/web/src/common/components/Typography.tsx
@@ -27,7 +27,7 @@ const getColorFromTheme = (theme: Theme, colorString: ThemeColors) => {
     const colorValue = theme.colors[colorKey as keyof Theme["colors"]];
 
     if (typeof colorValue === "object" && shade in colorValue) {
-      return colorValue[shade as keyof typeof colorValue];
+      return colorValue[shade as unknown as keyof typeof colorValue];
     }
   }