From 2e626189848738c9c1f075220f14ab378bb54657 Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Wed, 13 Sep 2023 03:47:26 +0900 Subject: [PATCH 1/2] Fix: LinkCopy --- src/components/Link/LinkCopy.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/Link/LinkCopy.tsx b/src/components/Link/LinkCopy.tsx index ebfe88ec5..f301b1da4 100644 --- a/src/components/Link/LinkCopy.tsx +++ b/src/components/Link/LinkCopy.tsx @@ -16,13 +16,11 @@ const LinkCopy = ({ children, value, onCopy }: LinkCopyProps) => { const setAlert = useSetRecoilState(alertAtom); const onClick = useCallback(() => { if (deviceType.startsWith("app/")) sendClipboardCopyEventToFlutter(value); - else { - if (!navigator.clipboard) { - setAlert("복사를 지원하지 않는 브라우저입니다."); - return; - } - navigator.clipboard.writeText(value); + if (!navigator.clipboard) { + setAlert("복사를 지원하지 않는 브라우저입니다."); + return; } + navigator.clipboard.writeText(value); onCopy?.(value); }, [value, onCopy]); return {children}; From fb09e2cc0227e39c708cb39c5a5cfbc71c17a513 Mon Sep 17 00:00:00 2001 From: 14Kgun Date: Fri, 15 Sep 2023 11:15:26 +0900 Subject: [PATCH 2/2] Add: Mockup of PublicNoticeContainer --- src/components/ModalPopup/ModalCredit.tsx | 255 ++++++++++-------- .../ModalPopup/ModalRoomSelection.tsx | 6 +- src/components/Navigation.tsx | 21 +- src/pages/Event/Event2023FallHistory.tsx | 5 + src/pages/Event/Event2023FallLeaderboard.tsx | 31 +++ .../PublicNoticeContainer.tsx | 116 ++++++++ src/pages/Event/Event2023FallStore/index.tsx | 7 + src/pages/Event/index.tsx | 3 + src/pages/Mypage/langs/en.json | 5 + src/pages/Mypage/langs/ko.json | 5 + src/static/members/index.ts | 3 + src/static/{members.js => members/members.ts} | 36 ++- src/static/members/members2023FallEvent.ts | 60 +++++ src/static/members/members2023SpringEvent.ts | 38 +++ src/types/members.d.ts | 8 + 15 files changed, 477 insertions(+), 122 deletions(-) create mode 100644 src/pages/Event/Event2023FallLeaderboard.tsx create mode 100644 src/pages/Event/Event2023FallStore/PublicNoticeContainer.tsx create mode 100644 src/static/members/index.ts rename src/static/{members.js => members/members.ts} (70%) create mode 100644 src/static/members/members2023FallEvent.ts create mode 100644 src/static/members/members2023SpringEvent.ts create mode 100644 src/types/members.d.ts diff --git a/src/components/ModalPopup/ModalCredit.tsx b/src/components/ModalPopup/ModalCredit.tsx index 9d8d8e4b3..b3f5fc9c3 100644 --- a/src/components/ModalPopup/ModalCredit.tsx +++ b/src/components/ModalPopup/ModalCredit.tsx @@ -1,132 +1,177 @@ +import { memo, useMemo } from "react"; import { useTranslation } from "react-i18next"; -import DottedLine from "components/DottedLine"; +import { Members } from "types/members"; + import Modal from "components/Modal"; +import Navigation from "components/Navigation"; import theme from "tools/theme"; import { ReactComponent as SparcsLogoBlack } from "static/assets/SparcsLogoBlack.svg"; import { ReactComponent as SparcsLogoYellow } from "static/assets/SparcsLogoYellow.svg"; -import members from "static/members"; - -type MemberProps = { - name: string; - id: string; - period: string; -}; +import { + members, + members2023FallEvent, + members2023SpringEvent, +} from "static/members"; -const Member = ({ name, id, period }: MemberProps) => { - const styleBox = { - background: theme.purple_light, - borderRadius: "10px", - padding: "16px 12px 12px", - boxShadow: theme.shadow, - display: "flex", - flexDirection: "column" as const, - }; - const styleRow = { - display: "flex", - alignItems: "center", - marginBottom: "8px", - }; - const styleName = { - ...theme.font14_bold, - whiteSpace: "nowrap" as const, - }; - const styleLogo = { - height: "18px", - paddingLeft: "8px", - paddingRight: "4px", - }; - const styleNickname = { - ...theme.font12, - color: theme.yellow, - fontWeight: "bold", - }; - const stylePeriod = { - ...theme.font10_bold, - color: theme.gray_text, - }; +type MemberProps = Members[number]["list"][number]; - return ( -
-
-
{name}
- -
{id}
+const Member = ({ name, id, period }: MemberProps) => ( +
+
+
+ {name} +
+ +
+ {id}
-
{period}
- ); -}; +
+ {period} +
+
+); -type ModalCreditProps = Parameters[0]; +type BodyMembersProps = { values: Members }; + +const BodyMembers = ({ values }: BodyMembersProps) => ( +
+ {values.map(({ position, list }) => ( +
+
+ {position} +
+
+ {list.map((member) => ( + + ))} +
+
+ ))} +
+); -const ModalCredit = (modalProps: ModalCreditProps) => { +type ModalCreditProps = { + defaultSelectedCatagory?: string; +} & Parameters[0]; + +const ModalCredit = ({ + defaultSelectedCatagory, + ...modalProps +}: ModalCreditProps) => { const { t } = useTranslation("mypage"); + const pages = useMemo( + () => [ + { + key: "all", + name: t("page_credit.category_all"), + body: , + }, + { + key: "2023FallEvent", + name: t("page_credit.category_2023fall_event"), + body: , + }, + { + key: "2023SpringEvent", + name: t("page_credit.category_2023spring_event"), + body: , + }, + ], + [t] + ); - const styleTitle = { - ...theme.font18, - display: "flex", - alignItems: "center", - marginBottom: "12px", - }; - const styleLogo = { - height: "21px", - width: "auto", - margin: "0 8px", - }; - const styleContainer = { - overflow: "auto", - paddingTop: "12px", - minHeight: "270px", - height: "calc(100vh - 360px)", - maskImage: - "linear-gradient(to bottom, transparent, white 16px, white calc(100% - 16px), transparent 100%)", - }; - const styleRole = { - ...theme.font14_bold, - padding: "0 0 12px 12px", - }; - const styleMemberContainer = { - display: "flex", - flexWrap: "wrap" as const, - gap: "12px", - paddingBottom: "12px", - }; return ( -
- +
+ {t("credit")}
- -
- {members.map((item) => { - return ( -
-
{item.position}
-
- {item.list.map((member) => ( - - ))} -
-
- ); - })} -
- + ); }; -export default ModalCredit; +export default memo(ModalCredit); diff --git a/src/components/ModalPopup/ModalRoomSelection.tsx b/src/components/ModalPopup/ModalRoomSelection.tsx index 1e6ee31a0..4312f225b 100644 --- a/src/components/ModalPopup/ModalRoomSelection.tsx +++ b/src/components/ModalPopup/ModalRoomSelection.tsx @@ -78,7 +78,11 @@ const ModalRoomSelection = ({ }; return ( - + {roomInfo && ( <>
{roomInfo.name}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 35ebdbd6b..3f3182030 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -1,4 +1,6 @@ -import { useState } from "react"; +import { useEffect, useMemo, useState } from "react"; + +import DottedLine from "./DottedLine"; import theme from "tools/theme"; @@ -14,6 +16,8 @@ type ButtonNavigationProps = { }; type NavigationProps = { pages: Array; + isDisplayDottedLine?: boolean; + defaultSelectedKey?: string; }; const OptionNavigation = ({ @@ -40,8 +44,18 @@ const OptionNavigation = ({
); -const Navigation = ({ pages }: NavigationProps) => { - const [selected, setSelected] = useState(pages?.[0]?.key || ""); +const Navigation = ({ + pages, + isDisplayDottedLine = false, + defaultSelectedKey, +}: NavigationProps) => { + const defaultSelected: string = useMemo( + () => defaultSelectedKey || pages?.[0]?.key || "", + [defaultSelectedKey, pages] + ); + const [selected, setSelected] = useState(defaultSelected); + useEffect(() => setSelected(defaultSelected), [defaultSelected]); + return ( <>
{ /> ))}
+ {isDisplayDottedLine && } {pages.find(({ key }) => key === selected)?.body} ); diff --git a/src/pages/Event/Event2023FallHistory.tsx b/src/pages/Event/Event2023FallHistory.tsx index 4d138172d..98b765772 100644 --- a/src/pages/Event/Event2023FallHistory.tsx +++ b/src/pages/Event/Event2023FallHistory.tsx @@ -14,6 +14,11 @@ const Event2023FallHistory = () => { label: "구매 이력", to: "/event/2023fall-history", }, + { + value: "leaderboard", + label: "리더보드", + to: "/event/2023fall-leaderboard", + }, ]} /> diff --git a/src/pages/Event/Event2023FallLeaderboard.tsx b/src/pages/Event/Event2023FallLeaderboard.tsx new file mode 100644 index 000000000..572f693d5 --- /dev/null +++ b/src/pages/Event/Event2023FallLeaderboard.tsx @@ -0,0 +1,31 @@ +import AdaptiveDiv from "components/AdaptiveDiv"; +import HeaderWithLeftNav from "components/Header/HeaderWithLeftNav"; +import Title from "components/Title"; + +const Event2023FallLeaderboard = () => { + return ( + <AdaptiveDiv type="center"> + <HeaderWithLeftNav + value="leaderboard" + options={[ + { value: "store", label: "달토끼 상점", to: "/event/2023fall-store" }, + { + value: "history", + label: "구매 이력", + to: "/event/2023fall-history", + }, + { + value: "leaderboard", + label: "리더보드", + to: "/event/2023fall-leaderboard", + }, + ]} + /> + <Title icon="notice" isHeader> + 리더보드 + + + ); +}; + +export default Event2023FallLeaderboard; diff --git a/src/pages/Event/Event2023FallStore/PublicNoticeContainer.tsx b/src/pages/Event/Event2023FallStore/PublicNoticeContainer.tsx new file mode 100644 index 000000000..ad8bdfc3f --- /dev/null +++ b/src/pages/Event/Event2023FallStore/PublicNoticeContainer.tsx @@ -0,0 +1,116 @@ +import { css, keyframes } from "@emotion/react"; +import { useMemo } from "react"; + +import WhiteContainer from "components/WhiteContainer"; + +import theme from "tools/theme"; + +import CampaignRoundedIcon from "@mui/icons-material/CampaignRounded"; + +const PublicNoticeContainer = () => { + const notices = [ + "[1분전] 00님이 00아이템을 구매하셨습니다.", + "[2분전] 00님이 랜덤박스에서 00아이템을 획득하셨습니다.", + ]; + const animationDuration = useMemo( + () => notices.reduce((acc, text) => acc + text.length, 0) * 0.2, + [notices] + ); + + return ( + +
+ 안내 + +
+
+
+ + {[...notices, ...notices].map((text, index) => ( + + {text} + + ))} + +
+
+
+ + ); +}; + +export default PublicNoticeContainer; diff --git a/src/pages/Event/Event2023FallStore/index.tsx b/src/pages/Event/Event2023FallStore/index.tsx index 3dfa26282..417a5ae2d 100644 --- a/src/pages/Event/Event2023FallStore/index.tsx +++ b/src/pages/Event/Event2023FallStore/index.tsx @@ -12,6 +12,7 @@ import Title from "components/Title"; import ItemListSection from "./ItemListSection"; import NPCSection from "./NPCSection"; +import PublicNoticeContainer from "./PublicNoticeContainer"; import theme from "tools/theme"; @@ -40,6 +41,11 @@ const Event2023FallStore = () => { label: "구매 이력", to: "/event/2023fall-history", }, + { + value: "leaderboard", + label: "리더보드", + to: "/event/2023fall-leaderboard", + }, ]} /> @@ -54,6 +60,7 @@ const Event2023FallStore = () => { >
+
응모권 diff --git a/src/pages/Event/index.tsx b/src/pages/Event/index.tsx index 61a387383..4ad012b78 100644 --- a/src/pages/Event/index.tsx +++ b/src/pages/Event/index.tsx @@ -3,6 +3,7 @@ import { useParams } from "react-router-dom"; import Event2022Beta from "./Event2022Beta"; import Event2023Fall from "./Event2023Fall"; import Event2023FallHistory from "./Event2023FallHistory"; +import Event2023FallLeaderboard from "./Event2023FallLeaderboard"; import Event2023FallMissions from "./Event2023FallMissions"; import Event2023FallStore from "./Event2023FallStore"; import Event2023Spring from "./Event2023Spring"; @@ -21,6 +22,8 @@ const Event = () => { return ; case "2023fall-history": return ; + case "2023fall-leaderboard": + return ; case "2023fall-missions": return ; default: diff --git a/src/pages/Mypage/langs/en.json b/src/pages/Mypage/langs/en.json index 5699be3c5..f88d45b72 100644 --- a/src/pages/Mypage/langs/en.json +++ b/src/pages/Mypage/langs/en.json @@ -27,6 +27,11 @@ "nickname_failed": "Failed to change nickname", "account_failed": "Failed to change account" }, + "page_credit": { + "category_all": "All", + "category_2023fall_event": "2023 Fall Thanksgiving Event", + "category_2023spring_event": "2023 Spring Taxi Ride Verification Event" + }, "page_report": { "inquiry": "If you have inquiries about the report details, please use the 'Contact us' menu.", "reported": "Reported", diff --git a/src/pages/Mypage/langs/ko.json b/src/pages/Mypage/langs/ko.json index 549b037c4..7616a62ad 100644 --- a/src/pages/Mypage/langs/ko.json +++ b/src/pages/Mypage/langs/ko.json @@ -27,6 +27,11 @@ "nickname_failed": "닉네임 변경에 실패했습니다", "account_failed": "계좌번호 변경에 실패했습니다" }, + "page_credit": { + "category_all": "전체", + "category_2023fall_event": "2023 가을학기 추석 송편 이벤트", + "category_2023spring_event": "2023 봄학기 택시 탑승 인증 이벤트" + }, "page_report": { "inquiry": "아래 신고 내역에 대해 문의하고 싶으신 경우 “채널톡 문의하기” 메뉴를 이용해주세요.", "reported": "신고한 내역", diff --git a/src/static/members/index.ts b/src/static/members/index.ts new file mode 100644 index 000000000..d0789a67b --- /dev/null +++ b/src/static/members/index.ts @@ -0,0 +1,3 @@ +export { default as members } from "./members"; +export { default as members2023FallEvent } from "./members2023FallEvent"; +export { default as members2023SpringEvent } from "./members2023SpringEvent"; diff --git a/src/static/members.js b/src/static/members/members.ts similarity index 70% rename from src/static/members.js rename to src/static/members/members.ts index 6f1492df0..10c617148 100644 --- a/src/static/members.js +++ b/src/static/members/members.ts @@ -1,5 +1,7 @@ +import { Members } from "types/members"; + /** - * TAXI-SPARCS Members 활동 학기 인정 기준 + * TAXI-SPARCS Taxi Members 활동 학기 인정 기준 * (다음의 조건을 만족해야 활동한 학기로 인정됩니다) * * - Project Manager @@ -17,7 +19,7 @@ * - 위 기준이 동일할 경우, 가장 최근에 활동한 팀원 */ -export default [ +const members: Members = [ { position: "Project Manager", list: [ @@ -29,31 +31,39 @@ export default [ position: "Designer", list: [ { name: "최지헌", id: "agent", period: "2021 ~ 2022" }, // 21여름 ~ 22겨울 (누적 7학기) + { name: "조유민", id: "yumyum", period: "2023" }, // 23여름 ~ 23가을 (누적 3학기) { name: "이혜원", id: "chillo", period: "2021" }, // 21가을 ~ 21겨울 (누적 2학기) + { name: "황인태", id: "ricky", period: "2023" }, // 23가을 (누적 1학기) ], }, { position: "Developer", list: [ - { name: "정상", id: "macintosh", period: "2021 ~ 2023" }, // 21가을 ~ 23여름 (누적 8학기) - { name: "최지헌", id: "agent", period: "2022" }, // 22봄 ~ 22겨울 (누적 4학기) - { name: "이진우", id: "jaydub", period: "2022" }, // 22봄 ~ 22겨울 (누적 3학기) - { name: "예상우", id: "andy", period: "2022 ~ 2023" }, // 22봄 ~ 23여름 (누적 6학기) - { name: "손성민", id: "happycastle", period: "2022 ~ 2023" }, // 22여름 ~ 23여름 (누적 5학기) - { name: "최동원", id: "won", period: "2022 ~ 2023" }, // 22가을 ~ 23여름 (누적 4학기) + { name: "정상", id: "macintosh", period: "2021 ~ 2023" }, // 21가을 ~ 23가을 (누적 9학기) + { name: "예상우", id: "andy", period: "2022 ~ 2023" }, // 22봄 ~ 23가을 (누적 7학기) + { name: "손성민", id: "happycastle", period: "2022 ~ 2023" }, // 22여름 ~ 23가을 (누적 6학기) + { name: "최동원", id: "won", period: "2022 ~ 2023" }, // 22가을 ~ 23가을 (누적 5학기) { name: "이서완", id: "swany", period: "2022 ~ 2023" }, // 22봄 ~ 23봄 (누적 5학기) + { name: "김효경", id: "diana", period: "2022 ~ 2023" }, // 22가을 ~ 23가을 (누적 5학기) + { name: "최지헌", id: "agent", period: "2022" }, // 22봄 ~ 22겨울 (누적 4학기) { name: "최준영", id: "dogma", period: "2021" }, // 21봄 ~ 21겨울 (누적 4학기) - { name: "김태우", id: "toby", period: "2021 ~ 2022" }, // 21가을 ~ 22봄 (누적 3학기) - { name: "안태찬", id: "return", period: "2022 ~ 2023" }, // 22가을 ~ 23봄 (누적 3학기) - { name: "김효경", id: "diana", period: "2022 ~ 2023" }, // 22가을 ~ 23여름 (누적 4학기) + { name: "김태우", id: "toby", period: "2021 ~ 2023" }, // 21가을 ~ 22봄, 23가을 (누적 4학기) + { name: "안태찬", id: "return", period: "2022 ~ 2023" }, // 22가을 ~ 23봄, 23가을 (누적 4학기) + { name: "이진우", id: "jaydub", period: "2022" }, // 22봄 ~ 22겨울 (누적 3학기) + { name: "윤부민", id: "nimby", period: "2023" }, // 23여름 ~ 23가을 (누적 2학기) + { name: "한우영", id: "hanu", period: "2023" }, // 23여름 ~ 23가을 (누적 2학기) { name: "신태현", id: "kiko", period: "2022" }, // 22봄 ~ 22여름 (누적 2학기) { name: "박진호", id: "bread", period: "2021" }, // 21가을 ~ 21겨울 (누적 2학기) - { name: "한우영", id: "hanu", period: "2023" }, // 23여름 ~ 23여름 (누적 1학기) - { name: "윤부민", id: "nimby", period: "2023" }, // 23여름 ~ 23여름 (누적 1학기) { name: "송인화", id: "ina", period: "2021" }, // 21봄 ~ 21여름 (누적 2학기) { name: "박지호", id: "night", period: "2022" }, // 22여름 ~ 22가을 (누적 2학기) + { name: "김민찬", id: "static", period: "2023" }, // 23가을 (누적 1학기) + { name: "박태현", id: "source", period: "2023" }, // 23가을 (누적 1학기) + { name: "권진현", id: "daystar", period: "2023" }, // 23가을 (누적 1학기) + { name: "김현수", id: "default", period: "2023" }, // 23가을 (누적 1학기) { name: "김건", id: "suwon", period: "2021 ~ 2023" }, // 21봄 ~ 21겨울 (누적 4학기) { name: "이채영", id: "stitch", period: "2021" }, // 21봄 ~ 21겨울 (누적 4학기) ], }, ]; + +export default members; diff --git a/src/static/members/members2023FallEvent.ts b/src/static/members/members2023FallEvent.ts new file mode 100644 index 000000000..8acc57a7b --- /dev/null +++ b/src/static/members/members2023FallEvent.ts @@ -0,0 +1,60 @@ +import { Members } from "types/members"; + +/** + * TAXI-SPARCS Taxi 2023 가을학기 / 한가위 송편이벤트 기여자 + */ + +const members: Members = [ + { + position: "🚀 Project Manager", + list: [{ name: "김건", id: "suwon", period: "2023" }], + }, + { + position: "📱 App Developer", + list: [ + { name: "윤부민", id: "nimby", period: "2023" }, + { name: "손성민", id: "happycastle", period: "2023" }, + ], + }, + { + position: "⚙️ Back-end Developer", + list: [ + { name: "김민찬", id: "static", period: "2023" }, + { name: "정상", id: "macintosh", period: "2023" }, + { name: "한우영", id: "hanu", period: "2023" }, + { name: "박태현", id: "source", period: "2023" }, + ], + }, + { + position: "🖥️ Front-end Developer", + list: [ + { name: "예상우", id: "andy", period: "2023" }, + { name: "김건", id: "suwon", period: "2023" }, + { name: "김태우", id: "toby", period: "2023" }, + ], + }, + { + position: "📈 Data Analyst", + list: [ + { name: "안태찬", id: "return", period: "2023" }, + { name: "최동원", id: "won", period: "2023" }, + ], + }, + { + position: "📆 Planner", + list: [ + { name: "김효경", id: "diana", period: "2023" }, + { name: "권진현", id: "daystar", period: "2023" }, + ], + }, + { + position: "🎨 Designer", + list: [ + { name: "조유민", id: "yumyum", period: "2023" }, + { name: "배세윤", id: "nine", period: "2023" }, + { name: "황인태", id: "ricky", period: "2023" }, + ], + }, +]; + +export default members; diff --git a/src/static/members/members2023SpringEvent.ts b/src/static/members/members2023SpringEvent.ts new file mode 100644 index 000000000..0109065c9 --- /dev/null +++ b/src/static/members/members2023SpringEvent.ts @@ -0,0 +1,38 @@ +import { Members } from "types/members"; + +/** + * TAXI-SPARCS Taxi 2023 봄학기 / 탑승 인증 이벤트 기여자 + */ + +const members: Members = [ + { + position: "🚀 Project Manager", + list: [{ name: "김건", id: "suwon", period: "2023" }], + }, + { + position: "📱 App Developer", + list: [{ name: "손성민", id: "happycastle", period: "2023" }], + }, + { + position: "🖥️ Back-end Developer", + list: [ + { name: "정상", id: "macintosh", period: "2023" }, + { name: "최동원", id: "won", period: "2023" }, + { name: "이서완", id: "swany", period: "2023" }, + ], + }, + { + position: "⚙️ Front-end Developer", + list: [ + { name: "김건", id: "suwon", period: "2023" }, + { name: "예상우", id: "andy", period: "2023" }, + { name: "김효경", id: "diana", period: "2023" }, + ], + }, + { + position: "🎨 Designer", + list: [{ name: "조유민", id: "yumyum", period: "2023" }], + }, +]; + +export default members; diff --git a/src/types/members.d.ts b/src/types/members.d.ts new file mode 100644 index 000000000..7872ed594 --- /dev/null +++ b/src/types/members.d.ts @@ -0,0 +1,8 @@ +export type Members = Array<{ + position: string; + list: Array<{ + name: string; + id: string; + period: string; + }>; +}>;