From 41ac4382fb9e81ceb5e4209865c75ad4d235bd29 Mon Sep 17 00:00:00 2001 From: Woojeong Choi Date: Sun, 24 Nov 2024 20:12:47 +0900 Subject: [PATCH 1/9] feat: add default font family --- packages/web/src/common/components/Typography.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/web/src/common/components/Typography.tsx b/packages/web/src/common/components/Typography.tsx index 6cd310d..9eb5e84 100644 --- a/packages/web/src/common/components/Typography.tsx +++ b/packages/web/src/common/components/Typography.tsx @@ -1,7 +1,9 @@ -import { Theme } from "@sparcs-students/web/styles/themes"; import React from "react"; + import styled from "styled-components"; +import { Theme } from "@sparcs-students/web/styles/themes"; + interface TypographyPropsBase extends React.HTMLAttributes { children: React.ReactNode; } @@ -45,7 +47,8 @@ interface TypographyProps extends TypographyPropsBase { const TypographyInner = styled.div` color: ${({ color, theme }) => color ? getColorFromTheme(theme, color) : "inherit"}; - font-family: ${({ theme, ff }) => (ff ? theme.fonts.FAMILY[ff] : "inherit")}; + font-family: ${({ theme, ff }) => + ff ? theme.fonts.FAMILY[ff] : theme.fonts.FAMILY.PRETENDARD}; font-size: ${({ fs }) => (fs ? `${fs}px` : "inherit")}; line-height: ${({ lh }) => (lh ? `${lh}px` : "inherit")}; font-weight: ${({ fw, theme }) => (fw ? theme.fonts.WEIGHT[fw] : "inherit")}; From 3a7f1c94ffb58e4f5203a1eb89a59a06a18020de Mon Sep 17 00:00:00 2001 From: Woojeong Choi Date: Sun, 24 Nov 2024 20:35:44 +0900 Subject: [PATCH 2/9] feat: impl flexwrapper --- .../web/src/common/components/FlexWrapper.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 packages/web/src/common/components/FlexWrapper.tsx diff --git a/packages/web/src/common/components/FlexWrapper.tsx b/packages/web/src/common/components/FlexWrapper.tsx new file mode 100644 index 0000000..ac7bad3 --- /dev/null +++ b/packages/web/src/common/components/FlexWrapper.tsx @@ -0,0 +1,22 @@ +import isPropValid from "@emotion/is-prop-valid"; +import styled from "styled-components"; + +interface FlexWrapperProps { + direction: "row" | "column"; + gap: number; + justify?: string; + padding?: string; +} + +const FlexWrapper = styled.div.withConfig({ + shouldForwardProp: prop => isPropValid(prop), +})` + display: flex; + position: relative; + flex-direction: ${({ direction }) => direction}; + gap: ${({ gap }) => `${gap}px`}; + justify-content: ${({ justify }) => justify ?? "flex-start"}; + padding: ${({ padding }) => padding ?? 0}; +`; + +export default FlexWrapper; From 96650b6f8e6304738565652701e3088ab809675f Mon Sep 17 00:00:00 2001 From: Woojeong Choi Date: Sun, 24 Nov 2024 20:42:37 +0900 Subject: [PATCH 3/9] feat: impl student fee page layout --- packages/web/src/app/my/student-fee/page.tsx | 45 ++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 packages/web/src/app/my/student-fee/page.tsx diff --git a/packages/web/src/app/my/student-fee/page.tsx b/packages/web/src/app/my/student-fee/page.tsx new file mode 100644 index 0000000..19e7f05 --- /dev/null +++ b/packages/web/src/app/my/student-fee/page.tsx @@ -0,0 +1,45 @@ +"use client"; + +import React from "react"; + +import Image from "next/image"; + +import FlexWrapper from "@sparcs-students/web/common/components/FlexWrapper"; +import Typography from "@sparcs-students/web/common/components/Typography"; + +const StudentFee = () => ( + + + 학생회비 납부 조회 + + + + 학생회비 납부 학기 + + + 2015년 가을까지 모든 재적학기는 회비를 납부한 것으로 인정되며, 현재 + 기록에 포함되어 있지 않습니다.
+ 그 외 기록이 누락 된 경우 kaistua@kaist.ac.kr로 문의해 주십시오.
+ 8회 학생회비를 납부 완료하신 학우분들은 별도의 공제 신청 없이 자동 + 공제가 적용됩니다.
+ + + + + 학생회비 공제 / 미공제 변경 + + + + + 학생회비 관련 공지사항 + + student-fee notice + + +); +export default StudentFee; From 29e7f063c446ba5ea724f0ea198a83bb75d4a31a Mon Sep 17 00:00:00 2001 From: Woojeong Choi Date: Sun, 24 Nov 2024 20:43:09 +0900 Subject: [PATCH 4/9] feat: add import order rule for eslint --- .eslintrc | 48 ++++++++++++++++++++++-- packages/web/public/temp/student-fee.svg | 14 +++++++ 2 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 packages/web/public/temp/student-fee.svg diff --git a/.eslintrc b/.eslintrc index 93234f0..7b20128 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,7 +8,9 @@ "plugin:@typescript-eslint/recommended", "airbnb", "airbnb-typescript", - "prettier" + "prettier", + "plugin:react/recommended", + "plugin:react-hooks/recommended" ], "overrides": [ { @@ -30,7 +32,13 @@ }, "project": ["./packages/*/tsconfig.json", "./tsconfig.json"] }, - "plugins": ["import", "@typescript-eslint", "react", "@next/eslint-plugin-next"], + "plugins": [ + "import", + "@typescript-eslint", + "react", + "@next/eslint-plugin-next", + "eslint-plugin-import" + ], "ignorePatterns": ["node_modules/", "dist/"], "rules": { "react/no-array-index-key": "warn", @@ -52,8 +60,9 @@ "./packages/api/", "./packages/interface/", "./" - ] - }, + ], + "devDependencies": true + } ], "import/prefer-default-export": "off", "class-methods-use-this": "off", @@ -114,6 +123,37 @@ "varsIgnorePattern": "^_", "caughtErrorsIgnorePattern": "^_" } + ], + "import/order": [ + "error", + { + "groups": [ + "builtin", + "external", + "internal", + "parent", + "sibling", + "index", + "object", + "type" + ], + "pathGroups": [ + { "pattern": "react", "group": "builtin", "position": "after" } + ], + "pathGroupsExcludedImportTypes": ["react"], + "newlines-between": "always-and-inside-groups", + "alphabetize": { + "order": "asc", + "caseInsensitive": true + } + } + ], + "sort-imports": [ + "error", + { + "ignoreCase": true, + "ignoreDeclarationSort": true + } ] }, "settings": { diff --git a/packages/web/public/temp/student-fee.svg b/packages/web/public/temp/student-fee.svg new file mode 100644 index 0000000..574ab7b --- /dev/null +++ b/packages/web/public/temp/student-fee.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + From 61d15a4959b86c5e3729f4d13ef54a923efd73a6 Mon Sep 17 00:00:00 2001 From: Woojeong Choi Date: Sun, 24 Nov 2024 20:45:04 +0900 Subject: [PATCH 5/9] chore: revert eslint rule --- .eslintrc | 48 ++++-------------------------------------------- 1 file changed, 4 insertions(+), 44 deletions(-) diff --git a/.eslintrc b/.eslintrc index 7b20128..93234f0 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,9 +8,7 @@ "plugin:@typescript-eslint/recommended", "airbnb", "airbnb-typescript", - "prettier", - "plugin:react/recommended", - "plugin:react-hooks/recommended" + "prettier" ], "overrides": [ { @@ -32,13 +30,7 @@ }, "project": ["./packages/*/tsconfig.json", "./tsconfig.json"] }, - "plugins": [ - "import", - "@typescript-eslint", - "react", - "@next/eslint-plugin-next", - "eslint-plugin-import" - ], + "plugins": ["import", "@typescript-eslint", "react", "@next/eslint-plugin-next"], "ignorePatterns": ["node_modules/", "dist/"], "rules": { "react/no-array-index-key": "warn", @@ -60,9 +52,8 @@ "./packages/api/", "./packages/interface/", "./" - ], - "devDependencies": true - } + ] + }, ], "import/prefer-default-export": "off", "class-methods-use-this": "off", @@ -123,37 +114,6 @@ "varsIgnorePattern": "^_", "caughtErrorsIgnorePattern": "^_" } - ], - "import/order": [ - "error", - { - "groups": [ - "builtin", - "external", - "internal", - "parent", - "sibling", - "index", - "object", - "type" - ], - "pathGroups": [ - { "pattern": "react", "group": "builtin", "position": "after" } - ], - "pathGroupsExcludedImportTypes": ["react"], - "newlines-between": "always-and-inside-groups", - "alphabetize": { - "order": "asc", - "caseInsensitive": true - } - } - ], - "sort-imports": [ - "error", - { - "ignoreCase": true, - "ignoreDeclarationSort": true - } ] }, "settings": { From fab7c2b3a5a3c8c14e7232a642f803aa98ae42cb Mon Sep 17 00:00:00 2001 From: Woojeong Choi Date: Sun, 24 Nov 2024 21:36:20 +0900 Subject: [PATCH 6/9] feat: impl studentFeeChange UI --- packages/web/src/app/my/student-fee/page.tsx | 3 ++ .../components/StudentFeeChange.tsx | 34 +++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 packages/web/src/features/studentFee/components/StudentFeeChange.tsx diff --git a/packages/web/src/app/my/student-fee/page.tsx b/packages/web/src/app/my/student-fee/page.tsx index 19e7f05..2b788e1 100644 --- a/packages/web/src/app/my/student-fee/page.tsx +++ b/packages/web/src/app/my/student-fee/page.tsx @@ -6,6 +6,7 @@ import Image from "next/image"; import FlexWrapper from "@sparcs-students/web/common/components/FlexWrapper"; import Typography from "@sparcs-students/web/common/components/Typography"; +import StudentFeeChange from "@sparcs-students/web/features/studentFee/components/StudentFeeChange"; const StudentFee = () => ( @@ -28,11 +29,13 @@ const StudentFee = () => ( 학생회비 공제 / 미공제 변경 + 학생회비 관련 공지사항 + {/* TODO: 임시 이미지 */} student-fee notice theme.colors.GRAY[400]}; + border-bottom: 1px solid ${({ theme }) => theme.colors.GRAY[400]}; + padding: 20px 12px; + align-items: center; +`; + +const StudentFeeChange: React.FC = () => ( + + + + 2024 가을학기 + + + 9월 8일까지 변경 가능 + + + + 학생회비 납부 (공제) 예정 + + + +); +export default StudentFeeChange; From 3d3e58bcee9be26bcbb52fd97ea870b192e20efe Mon Sep 17 00:00:00 2001 From: Woojeong Choi Date: Sun, 24 Nov 2024 21:51:43 +0900 Subject: [PATCH 7/9] feat: impl studentFeeStatus UI --- packages/web/src/app/my/student-fee/page.tsx | 2 + .../components/StudentFeeStatus.tsx | 69 +++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 packages/web/src/features/studentFee/components/StudentFeeStatus.tsx diff --git a/packages/web/src/app/my/student-fee/page.tsx b/packages/web/src/app/my/student-fee/page.tsx index 2b788e1..3793a07 100644 --- a/packages/web/src/app/my/student-fee/page.tsx +++ b/packages/web/src/app/my/student-fee/page.tsx @@ -7,6 +7,7 @@ import Image from "next/image"; import FlexWrapper from "@sparcs-students/web/common/components/FlexWrapper"; import Typography from "@sparcs-students/web/common/components/Typography"; import StudentFeeChange from "@sparcs-students/web/features/studentFee/components/StudentFeeChange"; +import StudentFeeStatus from "@sparcs-students/web/features/studentFee/components/StudentFeeStatus"; const StudentFee = () => ( @@ -17,6 +18,7 @@ const StudentFee = () => ( 학생회비 납부 학기 + 2015년 가을까지 모든 재적학기는 회비를 납부한 것으로 인정되며, 현재 기록에 포함되어 있지 않습니다.
diff --git a/packages/web/src/features/studentFee/components/StudentFeeStatus.tsx b/packages/web/src/features/studentFee/components/StudentFeeStatus.tsx new file mode 100644 index 0000000..6457a5b --- /dev/null +++ b/packages/web/src/features/studentFee/components/StudentFeeStatus.tsx @@ -0,0 +1,69 @@ +import isPropValid from "@emotion/is-prop-valid"; +import Typography from "@sparcs-students/web/common/components/Typography"; +import styled from "styled-components"; + +const StudentFeeStatusWrapper = styled.div` + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + // TODO: 반응형 + gap: 24px; +`; + +const StudentFeeStatusItem = styled.div.withConfig({ + shouldForwardProp: prop => isPropValid(prop), +})<{ isPaid: boolean }>` + width: 192px; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + background-color: ${({ theme, isPaid }) => + isPaid ? theme.colors.GREEN[100] : theme.colors.GRAY[400]}; + border-radius: 20px; +`; + +const StudentFeeStatus: React.FC = () => ( + + + + 2024 가을학기 + + + + + 2024 가을학기 + + + + + 2024 가을학기 + + + + + 2024 가을학기 + + + + + 2024 가을학기 + + + + + - + + + + + - + + + + + - + + + +); +export default StudentFeeStatus; From 3a1eb2cd4d5df2d462ad87ab0b4fe194739da834 Mon Sep 17 00:00:00 2001 From: Woojeong Choi Date: Sun, 24 Nov 2024 23:58:19 +0900 Subject: [PATCH 8/9] feat: impl student fee status --- packages/web/src/app/my/student-fee/page.tsx | 21 ++++- .../components/StudentFeeChange.tsx | 2 +- .../components/StudentFeeStatus.tsx | 76 +++++-------------- .../components/_atomic/StudentFeeNotPaid.tsx | 23 ++++++ .../components/_atomic/StudentFeePaid.tsx | 24 ++++++ packages/web/src/types/semester.type.ts | 4 + 6 files changed, 92 insertions(+), 58 deletions(-) create mode 100644 packages/web/src/features/studentFee/components/_atomic/StudentFeeNotPaid.tsx create mode 100644 packages/web/src/features/studentFee/components/_atomic/StudentFeePaid.tsx create mode 100644 packages/web/src/types/semester.type.ts diff --git a/packages/web/src/app/my/student-fee/page.tsx b/packages/web/src/app/my/student-fee/page.tsx index 3793a07..4df32ad 100644 --- a/packages/web/src/app/my/student-fee/page.tsx +++ b/packages/web/src/app/my/student-fee/page.tsx @@ -9,6 +9,25 @@ import Typography from "@sparcs-students/web/common/components/Typography"; import StudentFeeChange from "@sparcs-students/web/features/studentFee/components/StudentFeeChange"; import StudentFeeStatus from "@sparcs-students/web/features/studentFee/components/StudentFeeStatus"; +const mockSemesters = [ + { + year: 2023, + semester: "봄", + }, + { + year: 2023, + semester: "가을", + }, + { + year: 2024, + semester: "봄", + }, + { + year: 2024, + semester: "가을", + }, +]; + const StudentFee = () => ( @@ -18,7 +37,7 @@ const StudentFee = () => ( 학생회비 납부 학기 - + 2015년 가을까지 모든 재적학기는 회비를 납부한 것으로 인정되며, 현재 기록에 포함되어 있지 않습니다.
diff --git a/packages/web/src/features/studentFee/components/StudentFeeChange.tsx b/packages/web/src/features/studentFee/components/StudentFeeChange.tsx index ab0fee3..ac8d3b3 100644 --- a/packages/web/src/features/studentFee/components/StudentFeeChange.tsx +++ b/packages/web/src/features/studentFee/components/StudentFeeChange.tsx @@ -28,7 +28,7 @@ const StudentFeeChange: React.FC = () => ( 학생회비 납부 (공제) 예정 - + ); export default StudentFeeChange; diff --git a/packages/web/src/features/studentFee/components/StudentFeeStatus.tsx b/packages/web/src/features/studentFee/components/StudentFeeStatus.tsx index 6457a5b..7056bd9 100644 --- a/packages/web/src/features/studentFee/components/StudentFeeStatus.tsx +++ b/packages/web/src/features/studentFee/components/StudentFeeStatus.tsx @@ -1,6 +1,12 @@ -import isPropValid from "@emotion/is-prop-valid"; -import Typography from "@sparcs-students/web/common/components/Typography"; +import React from "react"; import styled from "styled-components"; +import { Semester } from "@sparcs-students/web/types/semester.type"; +import StudentFeePaid from "./_atomic/StudentFeePaid"; +import StudentFeeNotPaid from "./_atomic/StudentFeeNotPaid"; + +interface StudentFeeStatusProp { + semesters: Semester[]; +} const StudentFeeStatusWrapper = styled.div` display: grid; @@ -9,61 +15,19 @@ const StudentFeeStatusWrapper = styled.div` gap: 24px; `; -const StudentFeeStatusItem = styled.div.withConfig({ - shouldForwardProp: prop => isPropValid(prop), -})<{ isPaid: boolean }>` - width: 192px; - height: 60px; - display: flex; - justify-content: center; - align-items: center; - background-color: ${({ theme, isPaid }) => - isPaid ? theme.colors.GREEN[100] : theme.colors.GRAY[400]}; - border-radius: 20px; -`; - -const StudentFeeStatus: React.FC = () => ( +const StudentFeeStatus: React.FC = ({ semesters }) => ( - - - 2024 가을학기 - - - - - 2024 가을학기 - - - - - 2024 가을학기 - - - - - 2024 가을학기 - - - - - 2024 가을학기 - - - - - - - - - - - - - - - - - - - - + {semesters.map(semester => ( + + ))} + {Array.from({ length: 8 - semesters.length }).map(_ => ( + + ))} ); + export default StudentFeeStatus; diff --git a/packages/web/src/features/studentFee/components/_atomic/StudentFeeNotPaid.tsx b/packages/web/src/features/studentFee/components/_atomic/StudentFeeNotPaid.tsx new file mode 100644 index 0000000..a808dc0 --- /dev/null +++ b/packages/web/src/features/studentFee/components/_atomic/StudentFeeNotPaid.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +import Typography from "@sparcs-students/web/common/components/Typography"; +import styled from "styled-components"; + +const StudentFeeNotPaidWrapper = styled.div` + width: 192px; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + background-color: ${({ theme }) => theme.colors.GRAY[400]}; + border-radius: 20px; +`; + +const StudentFeeNotPaid: React.FC = () => ( + + + - + + +); +export default StudentFeeNotPaid; diff --git a/packages/web/src/features/studentFee/components/_atomic/StudentFeePaid.tsx b/packages/web/src/features/studentFee/components/_atomic/StudentFeePaid.tsx new file mode 100644 index 0000000..e7965b5 --- /dev/null +++ b/packages/web/src/features/studentFee/components/_atomic/StudentFeePaid.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +import Typography from "@sparcs-students/web/common/components/Typography"; +import { Semester } from "@sparcs-students/web/types/semester.type"; +import styled from "styled-components"; + +const StudentFeePaidWrapper = styled.div` + width: 192px; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + background-color: ${({ theme }) => theme.colors.GREEN[100]}; + border-radius: 20px; +`; + +const StudentFeePaid: React.FC = ({ year, semester }) => ( + + + {year} {semester}학기 + + +); +export default StudentFeePaid; diff --git a/packages/web/src/types/semester.type.ts b/packages/web/src/types/semester.type.ts new file mode 100644 index 0000000..cf351a2 --- /dev/null +++ b/packages/web/src/types/semester.type.ts @@ -0,0 +1,4 @@ +export type Semester = { + year: number; + semester: string; +}; From 8c5a8a92699c280843fd87728fd754c78813ab4a Mon Sep 17 00:00:00 2001 From: Woojeong Choi Date: Mon, 25 Nov 2024 00:27:50 +0900 Subject: [PATCH 9/9] feat: impl student fee change --- packages/web/src/app/my/student-fee/page.tsx | 90 +++++++++++-------- .../components/StudentFeeChange.tsx | 85 ++++++++++++++---- packages/web/src/styles/themes/colors.ts | 4 + packages/web/src/utils/Date/formatDate.ts | 7 ++ 4 files changed, 133 insertions(+), 53 deletions(-) create mode 100644 packages/web/src/utils/Date/formatDate.ts diff --git a/packages/web/src/app/my/student-fee/page.tsx b/packages/web/src/app/my/student-fee/page.tsx index 4df32ad..867f396 100644 --- a/packages/web/src/app/my/student-fee/page.tsx +++ b/packages/web/src/app/my/student-fee/page.tsx @@ -1,6 +1,6 @@ "use client"; -import React from "react"; +import React, { useState } from "react"; import Image from "next/image"; @@ -28,42 +28,58 @@ const mockSemesters = [ }, ]; -const StudentFee = () => ( - - - 학생회비 납부 조회 - - - - 학생회비 납부 학기 - - - - 2015년 가을까지 모든 재적학기는 회비를 납부한 것으로 인정되며, 현재 - 기록에 포함되어 있지 않습니다.
- 그 외 기록이 누락 된 경우 kaistua@kaist.ac.kr로 문의해 주십시오.
- 8회 학생회비를 납부 완료하신 학우분들은 별도의 공제 신청 없이 자동 - 공제가 적용됩니다.
- - - - - 학생회비 공제 / 미공제 변경 - - - - - - 학생회비 관련 공지사항 +const mockChangeDate = new Date("2025-09-08"); +const mockSemesterNow = { + year: 2024, + semester: "가을", +}; + +const StudentFee = () => { + const [payment, setPayment] = useState(true); + + return ( + + + 학생회비 납부 조회 - {/* TODO: 임시 이미지 */} - student-fee notice + + + 학생회비 납부 학기 + + + + 2015년 가을까지 모든 재적학기는 회비를 납부한 것으로 인정되며, 현재 + 기록에 포함되어 있지 않습니다.
그 외 기록이 누락 된 경우 + kaistua@kaist.ac.kr로 문의해 주십시오.
+ 8회 학생회비를 납부 완료하신 학우분들은 별도의 공제 신청 없이 자동 + 공제가 적용됩니다.
+ + + + + 학생회비 공제 / 미공제 변경 + + = 8} + setPayment={setPayment} + /> + + + + 학생회비 관련 공지사항 + + {/* TODO: 임시 이미지 */} + student-fee notice + - -); + ); +}; export default StudentFee; diff --git a/packages/web/src/features/studentFee/components/StudentFeeChange.tsx b/packages/web/src/features/studentFee/components/StudentFeeChange.tsx index ac8d3b3..3aba15a 100644 --- a/packages/web/src/features/studentFee/components/StudentFeeChange.tsx +++ b/packages/web/src/features/studentFee/components/StudentFeeChange.tsx @@ -1,7 +1,18 @@ +import React from "react"; import Button from "@sparcs-students/web/common/components/Buttons/Button"; import FlexWrapper from "@sparcs-students/web/common/components/FlexWrapper"; import Typography from "@sparcs-students/web/common/components/Typography"; +import { formatSimpleDate } from "@sparcs-students/web/utils/Date/formatDate"; import styled from "styled-components"; +import { Semester } from "@sparcs-students/web/types/semester.type"; + +interface StudentFeeChangeProp { + changeDate: Date; + semesterNow: Semester; + paymentStatus: boolean; + finishPayment: boolean; + setPayment: (payment: boolean) => void; +} const StudentFeeChangeWrapper = styled.div` width: 840px; // TODO: 반응형 @@ -15,20 +26,62 @@ const StudentFeeChangeWrapper = styled.div` align-items: center; `; -const StudentFeeChange: React.FC = () => ( - - - - 2024 가을학기 - - - 9월 8일까지 변경 가능 - - - - 학생회비 납부 (공제) 예정 - - - -); +const ButtonWrapper = styled.div` + width: 100px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; +`; + +const StudentFeeChange: React.FC = ({ + changeDate, + semesterNow, + paymentStatus, + finishPayment, + setPayment, +}) => { + const isChangeable = changeDate >= new Date(); + + return ( + + + + {semesterNow.year} {semesterNow.semester}학기 + + {isChangeable ? ( + + {formatSimpleDate(changeDate)}까지 변경 가능 + + ) : ( + + 변경 불가 기간 + + )} + + {finishPayment ? ( + + 학생회비 8회 납부 완료자 + + ) : ( + + 학생회비 {paymentStatus ? "납부 (공제)" : "미납부 (미공제)"}{" "} + {isChangeable ? "예정" : ""} + + )} + + {isChangeable && !finishPayment ? ( + + ) : ( +
+ )} + + + ); +}; export default StudentFeeChange; diff --git a/packages/web/src/styles/themes/colors.ts b/packages/web/src/styles/themes/colors.ts index be6d447..a6f6007 100644 --- a/packages/web/src/styles/themes/colors.ts +++ b/packages/web/src/styles/themes/colors.ts @@ -27,6 +27,10 @@ const colors = { 200: "#F5A3A8", 700: "#B7202A", }, + + BLUE: { + 900: "#3A2682", + }, }; export default colors; diff --git a/packages/web/src/utils/Date/formatDate.ts b/packages/web/src/utils/Date/formatDate.ts new file mode 100644 index 0000000..f35ffaf --- /dev/null +++ b/packages/web/src/utils/Date/formatDate.ts @@ -0,0 +1,7 @@ +import { format } from "date-fns"; +import { ko } from "date-fns/locale"; + +const formatSimpleDate = (date: Date) => + format(date, "M월 d일", { locale: ko }); + +export { formatSimpleDate };