`
+ background-color: ${({ theme }) => theme.colors.blue.primary};
+ color: ${({ theme }) => theme.colors.white};
+ padding: 11.5px 23px;
+ border-radius: ${(props) => (props.$pill ? "999px" : "8px")};
+ font-size: 16px;
+ font-weight: bold;
+ cursor: pointer;
+
+ &:hover {
+ background-color: ${({ theme }) => theme.colors.blue.hover};
+ }
+
+ &:focus {
+ background-color: ${({ theme }) => theme.colors.blue.focus};
+ }
+
+ &:disabled {
+ background-color: ${({ theme }) => theme.colors.gray[400]};
+ cursor: default;
+ pointer-events: none;
+ }
+`;
+
+// 구분선을 만들 때 를 사용할 수도 있지만 thematic break의 의미를 내포하고 있는
태그를 사용하면 보다 semantic하고 접근성을 고려한 코드가 됩니다.
+export const LineDivider = styled.hr<{$margin?: string}>`
+ width: 100%;
+ border: none;
+ height: 1px;
+ background-color: var(--gray-200);
+ margin: ${(props) =>
+ props.$margin || "16px 0"}; // margin을 optional prop으로 받기
+`;
diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js
new file mode 100644
index 000000000..dad88e564
--- /dev/null
+++ b/src/styles/GlobalStyle.js
@@ -0,0 +1,6 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+`;
+
+export default GlobalStyle;
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 000000000..44f5f2ecf
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,203 @@
+/* Mobile styles */
+
+/* Updated color palette */
+:root {
+ /* Gray scale */
+ --gray-900: #111827;
+ --gray-800: #1F2937;
+ --gray-700: #374151;
+ --gray-600: #4b5563;
+ --gray-500: #6b7280;
+ --gray-400: #9ca3af;
+ --gray-200: #e5e7eb;
+ --gray-100: #f3f4f6;
+ --gray-50: #f9fafb;
+
+ /* Primary color */
+ --blue: #3692ff;
+
+ --red: #f74747;
+
+ /* Layout dimensions */
+ --header-height: 70px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+button,
+input,
+textarea,
+select {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+button {
+ background: none;
+ border: none;
+ outline: none;
+ box-shadow: none;
+ cursor: pointer;
+}
+
+img,
+svg {
+ vertical-align: bottom;
+}
+
+body {
+ color: var(--gray-700);
+ word-break: keep-all;
+ font-family: "Pretendard", sans-serif;
+}
+
+header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: var(--header-height);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 16px;
+ background-color: #ffffff;
+ border-bottom: 1px solid #dfdfdf;
+ z-index: 999;
+}
+
+.withHeader {
+ margin-top: var(--header-height);
+}
+
+footer {
+ background-color: var(--gray-900);
+ color: var(--gray-400);
+ font-size: 16px;
+ padding: 32px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 60px;
+}
+
+#copyright {
+ order: 3;
+ flex-basis: 100%;
+}
+
+#footerMenu {
+ display: flex;
+ gap: 30px;
+ color: var(--gray-200);
+}
+
+#socialMedia {
+ display: flex;
+ gap: 12px;
+}
+
+.wrapper {
+ width: 100%;
+ padding: 0 16px;
+}
+
+.button {
+ background-color: var(--blue);
+ color: #ffffff;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.button:hover {
+ background-color: #1967d6;
+}
+
+.button:focus {
+ background-color: #1251aa;
+}
+
+.button:disabled {
+ background-color: var(--gray-400);
+ cursor: default;
+ pointer-events: none;
+}
+
+.pill-button {
+ font-size: 16px;
+ font-weight: 600;
+ border-radius: 999px;
+ padding: 14.5px 33.5px;
+}
+
+.full-width {
+ width: 100%;
+}
+
+.break-on-desktop {
+ display: none;
+}
+
+/* Tablet styles */
+
+@media (min-width: 768px) {
+ header {
+ padding: 0 24px;
+ }
+
+ .wrapper {
+ padding: 0 24px;
+ }
+
+ .pill-button {
+ font-size: 20px;
+ font-weight: 700;
+ padding: 16px 126px;
+ }
+
+ footer {
+ padding: 32px 104px 108px 104px;
+ }
+
+ #copyright {
+ flex-basis: auto;
+ order: 0;
+ }
+}
+
+/* Desktop styles */
+
+@media (min-width: 1280px) {
+ header {
+ padding: 0 200px;
+ }
+
+ .wrapper {
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .break-on-desktop {
+ display: inline;
+ }
+
+ footer {
+ padding: 32px 200px 108px 200px;
+ }
+}
diff --git a/src/styles/theme.tsx b/src/styles/theme.tsx
new file mode 100644
index 000000000..36e563d03
--- /dev/null
+++ b/src/styles/theme.tsx
@@ -0,0 +1,31 @@
+// Updated color palette
+const colors = {
+ gray: {
+ 900: "#111827",
+ 800: "#1F2937",
+ 700: "#374151",
+ 600: "#4b5563",
+ 500: "#6b7280",
+ 400: "#9ca3af",
+ 200: "#e5e7eb",
+ 100: "#f3f4f6",
+ 50: "#f9fafb",
+ },
+ blue: { primary: "#3692ff", hover: "#1967D6", focus: "#1251AA" },
+ red: "#f74747",
+ white: "#FFF",
+ black: "#000",
+};
+
+const mediaQuery = {
+ mobile: "screen and (max-width: 767px)",
+ tablet: "screen and (min-width: 768px)",
+ desktop: "screen and (min-width: 1280px)",
+};
+
+const theme = {
+ colors,
+ mediaQuery,
+};
+
+export default theme;
diff --git a/src/utils/dateUtils.tsx b/src/utils/dateUtils.tsx
new file mode 100644
index 000000000..5cfbad69d
--- /dev/null
+++ b/src/utils/dateUtils.tsx
@@ -0,0 +1,44 @@
+// 날짜 관련 Util Functions
+
+// Javascript에서 날짜를 다룰 때는 library 사용을 추천해요.
+// 이번 프로젝트에서는 가장 많이 사용되면서도 가벼운 "date-fns" 패키지를 사용해 볼게요.
+// 참고 링크: https://date-fns.org/
+
+import {
+ format,
+ differenceInDays,
+ differenceInHours,
+ differenceInMinutes,
+ differenceInSeconds,
+} from "date-fns";
+
+// updatedAt 표시: Date string을 현재 시간과 비교한 형식으로 변환해주는 함수
+// 7일 이내까지는 시간이 얼마나 흘렀는지를 분, 시간, 일 단위로 나타내고, 그보다 오래된 날짜는 포맷팅한 문자열로 리턴함
+export const formatUpdatedAt = (dateString:string) => {
+ const date = new Date(dateString); // 입력된 날짜 문자열을 Date 객체로 변환
+ const now = new Date(); // 현재 기준 Date 객체 생성
+
+ const diffInDays = differenceInDays(now, date); // 현재 시간과 입력된 날짜의 차이를 일(day) 단위로 계산
+ const diffInHours = differenceInHours(now, date); // 현재 시간과 입력된 날짜의 차이를 시간(hour) 단위로 계산
+ const diffInMinutes = differenceInMinutes(now, date); // 현재 시간과 입력된 날짜의 차이를 분(minute) 단위로 계산
+ const diffInSeconds = differenceInSeconds(now, date); // 현재 시간과 입력된 날짜의 차이를 초(second) 단위로 계산
+
+ if (diffInSeconds < 60) {
+ return "방금 전"; // 차이가 1분 미만인 경우 "방금 전" 형식으로 출력
+ } else if (diffInMinutes < 60) {
+ return `${diffInMinutes}분 전`; // 차이가 1시간 미만인 경우 "N분 전" 형식으로 출력
+ } else if (diffInHours < 24) {
+ return `${diffInHours}시간 전`; // 차이가 1일 미만인 경우 "N시간 전" 형식으로 출력
+ } else if (diffInDays < 7) {
+ return `${diffInDays}일 전`; // 차이가 7일 이내인 경우 "N일 전" 형식으로 출력
+ } else {
+ // 차이가 7일 이상인 경우 포맷팅된 날짜 출력
+ return format(date, "yyyy.MM.dd hh:mm a");
+ }
+};
+
+// 날짜 포맷팅 참고:
+// - 대문자 'M'은 month, 소문자 'm'은 minute을 뜻해요.
+// - 'MM'은 month를 두 자리 숫자로 나타낸 것, 'M'은 한자리 숫자로 나타낸 것(예: 5월을 '05'가 아닌 '5'로 출력)
+// - 대문자 'HH'는 24시 체계 (예: 14시), 소문자 'hh'는 12시 체계 (예: 2시)
+// - 소문자 'hh'를 사용해 시간을 나타낼 경우, 'a'를 추가해 AM/PM까지 함께 표기해 주세요. (예: "yyyy.MM.dd hh:mm a")
diff --git a/styles/auth.css b/styles/auth.css
deleted file mode 100644
index f64a55721..000000000
--- a/styles/auth.css
+++ /dev/null
@@ -1,100 +0,0 @@
-.auth-container {
- max-width: 640px;
- margin: 0 auto;
-}
-
-.logo-home-button-wrapper {
- display: block;
- text-align: center;
- margin-top: 60px;
- margin-bottom: 40px;
-}
-
-.input-item {
- margin-bottom: 24px;
- display: flex;
- flex-direction: column;
-}
-
-label {
- display: block;
- margin-bottom: 16px;
- font-size: 18px;
- font-weight: 700;
-}
-
-input {
- padding: 16px 24px;
- background-color: #f3f4f6;
- border: none;
- border-radius: 12px;
- font-size: 16px;
- line-height: 24px;
- width: 100%;
-}
-
-input::placeholder {
- color: #9ca3af;
- font-size: 16px;
- line-height: 24px;
-}
-
-input:focus {
- outline-color: var(--blue);
-}
-
-.input-wrapper {
- position: relative;
- display: flex;
- align-items: center;
-}
-
-.toggle-password {
- position: absolute;
- right: 24px;
- cursor: pointer;
-}
-
-.social-login-container {
- background-color: #e6f2ff;
- border-radius: 8px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 16px 23px;
- margin: 24px 0;
-}
-
-.social-login-container h3 {
- font-weight: 500;
- font-size: 16px;
- line-height: 24px;
-}
-
-.social-login-buttons-container {
- display: flex;
- gap: 16px;
-}
-
-.auth-switch {
- font-weight: 500;
- font-size: 15px;
- text-align: center;
-}
-
-.auth-switch a {
- color: #3182f6;
- text-decoration: underline;
- text-underline-offset: 2px;
-}
-
-.input-item input.error {
- border: 1px solid red;
-}
-
-.error-message {
- color: red;
- display: none;
- font-size: 12px;
- margin-top: 4px;
-}
\ No newline at end of file
diff --git a/styles/global.css b/styles/global.css
deleted file mode 100644
index 491a918a5..000000000
--- a/styles/global.css
+++ /dev/null
@@ -1,339 +0,0 @@
-:root {
- /* Gray scale */
- --gray-900: #1b1d1f;
- --gray-800: #26282b;
- --gray-600: #454c53;
- --gray-500: #72787f;
- --gray-400: #9ea4a8;
- --gray-200: #e5e7eb;
- --gray-100: #e8ebed;
- --gray-50: #f7f7f8;
-
- /* Primary color */
- --blue: #3692ff;
-}
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-
-
-
-
-body {
- color: #374151;
- word-break: keep-all;
- font-family: "Pretendard", sans-serif;
-}
-
-header {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 70px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 200px;
- background-color: #ffffff;
- border-bottom: 1px solid #dfdfdf;
-}
-
-main {
- margin-top: 70px;
-}
-
-footer {
- background-color: #111827;
- color: #9ca3af;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 32px 200px 108px 200px;
- font-size: 16px;
- padding-bottom: 50px; /* 하단 여백 추가 */
-}
-
-#footerMenu {
- display: flex;
- gap: 30px;
- color: var(--gray-200);
-}
-
-#socialMedia {
- display: flex;
- gap: 12px;
-}
-
-a {
- text-decoration: none;
- color: inherit;
-}
-
-img {
- vertical-align: bottom;
-}
-
-.wrapper {
- max-width: 1200px;
- margin: 0 auto;
- width: 100%;
-}
-
-h1 {
- font-size: 40px;
- font-weight: 700;
- line-height: 56px;
- letter-spacing: 0.02em;
-}
-
-button {
- background: none;
- border: none;
- outline: none;
- box-shadow: none;
- cursor: pointer;
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
- color: inherit;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
-}
-
-.button {
- background-color: var(--blue);
- color: #ffffff;
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-
-.button:hover {
- background-color: #1967d6;
-}
-
-.button:focus {
- background-color: #1251aa;
-}
-
-.button:disabled {
- background-color: #9ca3af;
- cursor: default;
- pointer-events: none;
-}
-
-.pill-button {
- font-size: 20px;
- font-weight: 700;
- border-radius: 999px;
- padding: 16px 126px;
-}
-
-.full-width {
- width: 100%;
-}
-
-
-/* Mobile (375px ~ 767px) */
-@media (min-width: 375px) and (max-width: 767px) {
- header {
- padding: 0 16px !important;
- }
-
- footer {
- padding: 16px !important;
- height: 160px;
- position: relative; /* footer를 위치 기준으로 설정 */
- }
-
- .logo {
- margin-left: 0px;
- }
-
- #signinLinkButton {
- margin-right: 0px;
- }
-
- #hero {
- position: relative;
- }
-
- #hero .wrapper {
- position: absolute;
- top: 48px;
- display: flex;
- flex-direction: column;
- width: calc(100% - 135px); /* 좌우 여백 67.5px씩 */
- transform: translateX(25%);
- height: 156px;
- gap: 17px; /* 자식 요소 간의 간격을 12px로 설정 */
- }
-
-
- #bottomBanner .wrapper {
- position: absolute;
- top: 116px; /* #bottomBanner의 위쪽에서 116px 떨어진 위치 */
- display: flex;
- flex-direction: column;
- width: calc(100% - 135px); /* 좌우 여백 67.5px씩 */
- transform: translateX(25%);
- height: 156px;
- gap: 17px; /* 자식 요소 간의 간격을 12px로 설정 */
- }
-
-
- .button.pill-button {
- height: 48px; /* 버튼 높이를 48px로 제한 */
- line-height: 48px; /* 텍스트가 중앙에 오도록 line-height를 맞춤 */
- padding: 0 12px; /* 좌우 여백은 유지 */
- font-size: 16px; /* 필요에 따라 폰트 크기 조정 */
-}
-
-
-
- #hero h1 {
- font-family: Pretendard;
- font-size: 31px;
- font-weight: 700;
- line-height: 44.8px;
- text-align: center;
- }
-
- #bottomBanner h1 {
-
- font-family: Pretendard;
- font-size: 31px;
- font-weight: 700;
- line-height: 44.8px;
- text-align: center;
- }
-
- footer > :first-child {
- position: absolute;
- bottom: 32px;
- left: 32px;
- }
-
- footer > :nth-child(2) {
- position: absolute;
- top: 32px;
- left: 32px;
-}
-
-footer > :nth-child(3) {
- position: absolute;
- top: 32px;
- right: 32px;
-}
-
-}
-
-@media (min-width: 768px) and (max-width: 1199px) {
- header {
- padding: 0 24px !important;
-
- }
-
- footer {
- padding: 24 x !important;
- height: 160px;
- position: relative; /* footer를 위치 기준으로 설정 */
- }
-
- .logo {
- margin-left: 0px;
- }
-
- #signinLinkButton {
- margin-right: 0px;
- }
-
-
-
- #hero {
- position: relative;
- }
-
- #hero .wrapper {
- position: absolute;
- top: 84px;
- display: flex;
- align-items: center; /* 내부 요소를 가로 가운데 정렬 */
- flex-direction: column;
- width: calc(100% - 262px); /* 좌우 여백 67.5px씩 */
- transform: translateX(18%);
- height: 136px;
- gap: 24px; /* 자식 요소 간의 간격을 12px로 설정 */
- }
-
-
-
- #bottomBanner .wrapper {
- position: relative;
- display: flex;
- flex-direction: column;
- width: calc(100% - 449px); /* 너비를 부모 요소에 맞게 조정 */
- margin: 50px auto 0;
- height: 112px; /* 내용에 따라 높이가 조절되도록 설정 */
- transform: translateY(-200px); /* 요소를 위로 50px 이동 */
- gap: 17px;
- }
-
-
- .button.pill-button {
- height: 56px; /* 버튼 높이를 48px로 제한 */
- width: calc(100% - 155px);
- line-height: 56px; /* 텍스트가 중앙에 오도록 line-height를 맞춤 */
- padding: 0 12px; /* 좌우 여백은 유지 */
- font-size: 16px; /* 필요에 따라 폰트 크기 조정 */
-}
-
-
-
- #hero h1 {
- font-family: Pretendard;
- font-size: 40px;
- font-weight: 700;
- line-height: 56px;
- text-align: center;
-
-
- }
-
- #bottomBanner h1 {
-
- font-family: Pretendard;
- font-size: 40px;
- font-weight: 700;
- line-height: 56px;
- text-align: center;
- }
-
- footer > :first-child {
- position: absolute;
- top: 32px;
- left: 104px;
- }
-
- footer > :nth-child(2) {
- position: absolute;
- top: 32px;
- left: 445.445px;
-}
-
-footer > :nth-child(3) {
- position: absolute;
- top: 32px;
- right: 104px;
-}
-
-}
-
-
-
diff --git a/styles/home.css b/styles/home.css
deleted file mode 100644
index 2c2013339..000000000
--- a/styles/home.css
+++ /dev/null
@@ -1,421 +0,0 @@
-.banner {
- background-color: #cfe5ff;
- height: 540px;
- display: flex;
- align-items: center;
- background-repeat: no-repeat;
- background-position: 80% bottom;
- background-size: 55%;
-}
-
-@media (min-width: 375px) and (max-width: 767px) {
- #hero {
- background-position: center bottom;
- background-size: 448px 204px;
- }
-
- .banner {
- height: 540px;
- display: flex;
- }
-
- .banner .pill-button {
- margin-top: 0px !important;
- }
-
- #bottomBanner {
- background-position: center bottom;
- background-size: auto 198px;
- position: relative; /* #bottomBanner를 위치 기준으로 설정 */
- }
-
- #features {
- width: calc(100% - 31px);
- height: 1445px; /* 원래 크기 */
- overflow: visible; /* hidden을 제거하거나 visible로 설정 */
- }
-
- .feature {
- padding: 0 !important;
-
- }
-
-
- #features> :first-child {
- height: 472px !important;
- align-items: unset; /* 또는 initial */
- display: flex;
- flex-direction: column;
- }
-
- #features> :nth-child(2) {
- height: 472px !important;
- align-items: unset; /* 또는 initial */
- display: flex;
- flex-direction: column;
- }
-
- #features> :nth-child(3) {
- height: 472px !important;
- align-items: unset; /* 또는 initial */
- display: flex;
- flex-direction: column;
- }
-
- #features > :last-child {
- margin-bottom: 83px; /* 아래쪽 여백 */
-}
-
- #features> :first-child> :first-child {
- height: 259px !important;
- width: 100% !important;
- padding-top: 52px; /* margin-top 대신 padding-top 사용 */
-
- }
-
- #features > .feature:first-child .feature-content {
- width: 100% !important;
- z-index: 1; /* 이미지보다 높은 레이어에 배치 */
- }
-
- #features > .feature:nth-child(2) {
- display: flex;
- flex-direction: column-reverse; /* 자식 요소의 순서를 뒤집음 */
-}
-
- #features > :nth-child(2) .feature-content {
- height: 259px !important;
- width: 100% !important;
-}
-
-#features > :nth-child(3) .feature-content {
- height: 259px !important;
- width: 100% !important;
-}
-
-
- #features > .feature:first-child .feature-content h2 {
- font-size: 16px;
- line-height: 26px;
- text-align: left;
- height: 26px;
-}
-
- #features > :nth-child(2) .feature-content h2{
- font-size: 16px;
- line-height: 26px;
- text-align: right;
- height: 26px;
- }
-
- #features > :nth-child(3) .feature-content h2 {
- font-size: 16px;
- line-height: 26px;
- text-align: left;
- height: 26px;
- }
-
- #features > .feature:first-child .feature-content h1 {
- font-size: 24px;
- line-height: 32px;
- text-align: left;
- white-space: nowrap !important; /* 줄바꿈 방지 */
- }
-
- #features > :nth-child(2) .feature-content h1{
- font-size: 24px;
- line-height: 32px;
- text-align: right;
- white-space: nowrap !important; /* 줄바꿈 방지 */
- }
-
- #features > :nth-child(3) .feature-content h1 {
- font-size: 24px;
- line-height: 32px;
- text-align: left;
- white-space: nowrap !important; /* 줄바꿈 방지 */
- }
-
-
- #features > .feature:first-child .feature-content p {
- font-size: 16px;
- font-weight: 500;
- line-height: 26px;
- text-align: left;
- height: 52px;
- width: 48.8%;
- display: inline; /* 한 줄로 표시 */
- }
-
- #features > :nth-child(2) .feature-content p{
- font-size: 16px;
- font-weight: 500;
- line-height: 26px;
- text-align: right;
- height: 52px;
- width: 48.8%;
- display: inline; /* 한 줄로 표시 */
- }
-
-
- #features > :nth-child(3) .feature-content p {
- font-size: 16px;
- font-weight: 500;
- line-height: 26px;
- text-align: left;
- height: 52px;
- width: 48.8%;
- display: inline; /* 한 줄로 표시 */
- }
-
- #features > :nth-child(2) >:nth-child(2){
- height: 259px !important;
- width: 100% !important;
- }
-
- #features > :nth-child(3) >:nth-child(1){
- height: 259px !important;
- width: 100% !important;
-}
-
-
-}
-
-
-@media (min-width: 768px) and (max-width: 1199px) {
- #hero {
- background-position: center bottom;
- background-size: 100% 340px;
- }
-
- .banner {
- height: 771px;
- display: flex;
-
- }
-
- .banner .pill-button {
- margin-top: 0px !important;
- }
-
- #bottomBanner {
- background-position: center bottom;
- background-size: 100% 397px;
- position: relative; /* position을 유지 */
- height: auto; /* 높이를 auto로 설정하여 내용에 따라 동적으로 조절 */
- margin-bottom: 0px; /* footer와의 간격 추가 */
- height: 927px;
- }
-
- #features {
- width: calc(100% - 31px);
- height: 2228px; /* 원래 크기 */
- overflow: visible; /* hidden을 제거하거나 visible로 설정 */
- display: flex;
- flex-direction: column;
- gap:40px;
- }
-
- .feature {
- padding: 0 !important;
- gap: 20px !important;
- }
-
-
- #features> :first-child {
- height: 708px !important;
- align-items: unset; /* 또는 initial */
- display: flex;
- flex-direction: column;
- }
-
- #features> :nth-child(2) {
- height: 708px !important;
- align-items: unset; /* 또는 initial */
- display: flex;
- flex-direction: column;
- }
-
- #features> :nth-child(3) {
- height: 708px !important;
- align-items: unset; /* 또는 initial */
- display: flex;
- flex-direction: column;
- }
-
- #features > :last-child {
- margin-bottom: 10px; /* 아래쪽 여백 */
-}
-
- #features> :first-child> :first-child {
- height: 524px !important;
- width: 100% !important;
- padding-top: 20px; /* margin-top 대신 padding-top 사용 */
-
- }
-
- #features > .feature:first-child .feature-content {
- height: 160px;
- width: 100% !important;
- z-index: 1; /* 이미지보다 높은 레이어에 배치 */
- }
-
- #features > .feature:nth-child(2) {
- display: flex;
- flex-direction: column-reverse; /* 자식 요소의 순서를 뒤집음 */
-}
-
- #features > :nth-child(2) .feature-content {
- height: 160px !important;
- width: 100% !important;
-}
-
-
-#features > :nth-child(3) .feature-content {
- height: 160px !important;
- width: 100% !important;
-}
-
-
- #features > .feature:first-child .feature-content h2 {
- font-size: 16px;
- line-height: 26px;
- text-align: left;
- height: 26px;
-}
-
- #features > :nth-child(2) .feature-content h2{
- font-size: 16px;
- line-height: 26px;
- text-align: right;
- height: 26px;
- }
-
- #features > :nth-child(3) .feature-content h2 {
- font-size: 16px;
- line-height: 26px;
- text-align: left;
- height: 26px;
- }
-
- #features > .feature:first-child .feature-content h1 {
- font-size: 24px;
- line-height: 32px;
- text-align: left;
- white-space: nowrap !important; /* 줄바꿈 방지 */
- }
-
- #features > :nth-child(2) .feature-content h1{
- font-size: 24px;
- line-height: 32px;
- text-align: right;
- white-space: nowrap !important; /* 줄바꿈 방지 */
- }
-
- #features > :nth-child(3) .feature-content h1 {
- font-size: 24px;
- line-height: 32px;
- text-align: left;
- white-space: nowrap !important; /* 줄바꿈 방지 */
- }
-
-
- #features > .feature:first-child .feature-content p {
- font-size: 16px;
- font-weight: 500;
- line-height: 26px;
- text-align: left;
- height: 52px;
- width: 48.8%;
- display: inline; /* 한 줄로 표시 */
- }
-
- #features > :nth-child(2) .feature-content p{
- font-size: 16px;
- font-weight: 500;
- line-height: 26px;
- text-align: right;
- height: 52px;
- width: 48.8%;
- display: inline; /* 한 줄로 표시 */
- }
-
-
- #features > :nth-child(3) .feature-content p {
- font-size: 16px;
- font-weight: 500;
- line-height: 26px;
- text-align: left;
- height: 52px;
- width: 48.8%;
- display: inline; /* 한 줄로 표시 */
- }
-
- #features > :nth-child(2) >:nth-child(2){
- height: 524px !important;
- width: 100% !important;
- }
-
- #features > :nth-child(3) >:nth-child(1){
- height: 524px !important;
- width: 100% !important;
-}
-
-
-}
-
-
-
-#hero {
- background-image: url("../images/home/hero-image.png");
-}
-
-#features {
- padding-bottom: 138px;
-}
-
-#bottomBanner {
- background-image: url("../images/home/bottom-banner-image.png");
-}
-
-#signinLinkButton {
- font-size: 16px;
- font-weight: 600;
- border-radius: 8px;
- padding: 14.5px 43px;
-}
-
-.banner .pill-button {
- margin-top: 32px;
-}
-
-.feature {
- padding: 138px 0;
- display: flex;
- align-items: center;
- gap: 5%;
-}
-
-.feature:nth-child(2) {
- text-align: right;
-}
-
-.feature-content {
- flex: 1;
-}
-
-.feature-tag {
- color: var(--blue);
- font-size: 18px;
- line-height: 25px;
- font-weight: 700;
- margin-bottom: 12px;
-}
-
-.feature-description {
- font-size: 24px;
- font-weight: 500;
- line-height: 120%;
- letter-spacing: 0.08em;
- margin-top: 24px;
-}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..43ed497ef
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "esnext"],
+ "jsx": "react-jsx",
+ "allowJs": true,
+ "checkJs": false,
+ "skipLibCheck": true,
+ "strict": true,
+ "esModuleInterop": true,
+ "resolveJsonModule": true,
+ "moduleResolution": "node",
+ "forceConsistentCasingInFileNames": true,
+ "paths": {
+ "*": ["src/types/*"]
+ }
+ },
+ "include": ["src/**/*", "src/images.d.ts"]
+}
-
- 
- 
- 
