Merge branch 'dev' into #623-event-histroy

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 <a onClick={onClick}>{children}</a>;

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 (
-    <div css={styleBox}>
-      <div css={styleRow}>
-        <div css={styleName}>{name}</div>
-        <SparcsLogoYellow style={styleLogo} />
-        <div css={styleNickname}>{id}</div>
+const Member = ({ name, id, period }: MemberProps) => (
+  <div
+    css={{
+      background: theme.purple_light,
+      borderRadius: "10px",
+      padding: "16px 12px 12px",
+      boxShadow: theme.shadow,
+      display: "flex",
+      flexDirection: "column",
+    }}
+  >
+    <div
+      css={{
+        display: "flex",
+        alignItems: "center",
+        marginBottom: "8px",
+      }}
+    >
+      <div
+        css={{
+          ...theme.font14_bold,
+          whiteSpace: "nowrap" as const,
+        }}
+      >
+        {name}
+      </div>
+      <SparcsLogoYellow
+        style={{
+          height: "18px",
+          paddingLeft: "8px",
+          paddingRight: "4px",
+        }}
+      />
+      <div
+        css={{
+          ...theme.font12,
+          color: theme.yellow,
+          fontWeight: "bold",
+        }}
+      >
+        {id}
       </div>
-      <div css={stylePeriod}>{period}</div>
     </div>
-  );
-};
+    <div
+      css={{
+        ...theme.font10_bold,
+        color: theme.gray_text,
+      }}
+    >
+      {period}
+    </div>
+  </div>
+);
 
-type ModalCreditProps = Parameters<typeof Modal>[0];
+type BodyMembersProps = { values: Members };
+
+const BodyMembers = ({ values }: BodyMembersProps) => (
+  <div
+    css={{
+      overflow: "auto",
+      paddingTop: "12px",
+      minHeight: "270px",
+      height: "calc(100vh - 360px)",
+      maskImage:
+        "linear-gradient(to bottom, transparent, white 16px, white calc(100% - 16px), transparent 100%)",
+    }}
+  >
+    {values.map(({ position, list }) => (
+      <div key={position}>
+        <div
+          css={{
+            ...theme.font14_bold,
+            padding: "0 0 12px 12px",
+          }}
+        >
+          {position}
+        </div>
+        <div
+          css={{
+            display: "flex",
+            flexWrap: "wrap" as const,
+            gap: "12px",
+            paddingBottom: "12px",
+          }}
+        >
+          {list.map((member) => (
+            <Member key={member.id} {...member} />
+          ))}
+        </div>
+      </div>
+    ))}
+  </div>
+);
 
-const ModalCredit = (modalProps: ModalCreditProps) => {
+type ModalCreditProps = {
+  defaultSelectedCatagory?: string;
+} & Parameters<typeof Modal>[0];
+
+const ModalCredit = ({
+  defaultSelectedCatagory,
+  ...modalProps
+}: ModalCreditProps) => {
   const { t } = useTranslation("mypage");
+  const pages = useMemo(
+    () => [
+      {
+        key: "all",
+        name: t("page_credit.category_all"),
+        body: <BodyMembers values={members} />,
+      },
+      {
+        key: "2023FallEvent",
+        name: t("page_credit.category_2023fall_event"),
+        body: <BodyMembers values={members2023FallEvent} />,
+      },
+      {
+        key: "2023SpringEvent",
+        name: t("page_credit.category_2023spring_event"),
+        body: <BodyMembers values={members2023SpringEvent} />,
+      },
+    ],
+    [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 (
     <Modal
       width={theme.modal_width_large}
-      padding="16px 12px 12px"
+      css={{ padding: "16px 12px 12px" }}
       {...modalProps}
     >
-      <div css={styleTitle}>
-        <SparcsLogoBlack style={styleLogo} />
+      <div
+        css={{
+          ...theme.font18,
+          display: "flex",
+          alignItems: "center",
+          marginBottom: "12px",
+        }}
+      >
+        <SparcsLogoBlack
+          style={{
+            height: "21px",
+            width: "auto",
+            margin: "0 8px",
+          }}
+        />
         {t("credit")}
       </div>
-      <DottedLine direction="row" />
-      <div css={styleContainer}>
-        {members.map((item) => {
-          return (
-            <div key={item.position}>
-              <div css={styleRole}>{item.position}</div>
-              <div css={styleMemberContainer}>
-                {item.list.map((member) => (
-                  <Member
-                    name={member.name}
-                    id={member.id}
-                    period={member.period}
-                    key={member.id}
-                  />
-                ))}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      <DottedLine direction="row" />
+      <Navigation
+        defaultSelectedKey={defaultSelectedCatagory}
+        pages={pages}
+        isDisplayDottedLine
+      />
     </Modal>
   );
 };
 
-export default ModalCredit;
+export default memo(ModalCredit);

src/components/ModalPopup/ModalRoomSelection.tsx

@@ -78,7 +78,11 @@ const ModalRoomSelection = ({
   };
 
   return (
-    <Modal isOpen={isOpen} onChangeIsOpen={onChangeIsOpen} padding="10px">
+    <Modal
+      isOpen={isOpen}
+      onChangeIsOpen={onChangeIsOpen}
+      css={{ padding: "10px" }}
+    >
       {roomInfo && (
         <>
           <div css={styleTitle}>{roomInfo.name}</div>

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<Page>;
+  isDisplayDottedLine?: boolean;
+  defaultSelectedKey?: string;
 };
 
 const OptionNavigation = ({
@@ -40,8 +44,18 @@ const OptionNavigation = ({
   </div>
 );
 
-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<string>(defaultSelected);
+  useEffect(() => setSelected(defaultSelected), [defaultSelected]);
+
   return (
     <>
       <div
@@ -61,6 +75,7 @@ const Navigation = ({ pages }: NavigationProps) => {
           />
         ))}
       </div>
+      {isDisplayDottedLine && <DottedLine />}
       {pages.find(({ key }) => key === selected)?.body}
     </>
   );

src/pages/Event/Event2023FallHistory.tsx

@@ -83,6 +83,11 @@ const Event2023FallHistory = () => {
             label: "구매 이력",
             to: "/event/2023fall-history",
           },
+          {
+            value: "leaderboard",
+            label: "리더보드",
+            to: "/event/2023fall-leaderboard",
+          },
         ]}
       />
       <AdaptiveDiv type="center">