[feat] Portfolio Page 구현

package.json

@@ -19,9 +19,11 @@
     "@lukemorales/query-key-factory": "^1.3.4",
     "@mui/material": "^6.1.0",
     "@mui/material-nextjs": "^6.1.0",
+    "@mui/x-date-pickers": "^7.22.3",
     "@tanstack/react-query": "^5.55.4",
     "@tanstack/react-query-devtools": "^5.59.15",
     "chokidar": "^4.0.1",
+    "dayjs": "^1.11.13",
     "lightweight-charts": "^4.2.1",
     "next": "14.2.10",
     "react": "^18",

scripts/utils/api-router-generator-utils.ts

@@ -53,7 +53,7 @@ const createApiFiles = (methodDetails: MethodDetails[]) => {
     // Method 별 처리
     const methodHandlers = methods
       .map((method) => {
-        const hasBody = ["POST", "PUT", "PATCH"].includes(method);
+        const hasBody = ["POST", "PUT", "PATCH", "DELETE"].includes(method);
         const bodyContent = hasBody ? ", req.body" : "";
 
         return `

src/api/fetcher.ts

@@ -58,7 +58,7 @@ const addCookiesToHeaders = (
   };
 };
 
-// 데이터를 받지 않는 요청 (GET, DELETE)
+// 데이터를 받지 않는 요청 (GET)
 const requestWithoutData = async <T>(
   url: string,
   method: string,
@@ -132,9 +132,10 @@ const createFetcher = (
       }),
     delete: <T>(
       url: string,
+      data?: Record<string, unknown> | FormData,
       options?: FetcherOptions
     ): Promise<FetcherResponse<T>> =>
-      requestWithoutData<T>(`${baseURL}${url}`, "DELETE", {
+      requestWithData<T>(`${baseURL}${url}`, "DELETE", data, {
         ...defaultOptions,
         ...options,
       }),

src/components/BasePage.tsx

@@ -43,7 +43,10 @@ const StyledBasePage = styled.div<{ $isMobile: boolean; $isIOSPWA: boolean }>`
         ? "64px"
         : "0"};
 
-  background-color: ${designSystem.color.neutral.white};
+  background-color: ${({ $isMobile }) =>
+    $isMobile
+      ? designSystem.color.neutral.white
+      : designSystem.color.neutral.gray50};
 `;
 
 const Main = styled.main<{ $isMobile: boolean }>`

src/components/Breadcrumb.tsx

@@ -0,0 +1,67 @@
+import designSystem from "@/styles/designSystem";
+import { useRouter } from "next/router";
+import styled from "styled-components";
+import { Icon } from "./Icon";
+
+type Props = {
+  depthData: {
+    name: string;
+    url: string;
+  }[];
+};
+
+export default function Breadcrumb({ depthData }: Props) {
+  const router = useRouter();
+
+  const lastIndex = depthData.length - 1;
+
+  return (
+    <StyledBreadcrumb>
+      {depthData.map((data, index) => {
+        const { name, url } = data;
+        return (
+          <div key={index}>
+            <DepthTitle
+              $isLast={lastIndex === index}
+              onClick={() => router.push(url)}>
+              {name}
+            </DepthTitle>
+            {index !== depthData.length - 1 && (
+              <Icon icon="chevron-right" color="gray400" size={12} />
+            )}
+          </div>
+        );
+      })}
+    </StyledBreadcrumb>
+  );
+}
+
+const StyledBreadcrumb = styled.div`
+  display: flex;
+
+  gap: 2.5px;
+  ${designSystem.font.title5};
+
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 2.5px;
+    ${designSystem.font.title5};
+    color: ${designSystem.color.neutral.gray400};
+  }
+`;
+
+const DepthTitle = styled.span<{ $isLast: boolean }>`
+  text-decoration: ${({ $isLast }) => ($isLast ? "none" : "underline")};
+  text-decoration-color: ${designSystem.color.neutral.gray600};
+  color: ${({ $isLast }) =>
+    $isLast
+      ? designSystem.color.neutral.gray800
+      : designSystem.color.neutral.gray600};
+
+  &:hover {
+    color: ${designSystem.color.neutral.gray800};
+    cursor: pointer;
+  }
+`;

src/components/Buttons/AsyncButton.tsx

@@ -0,0 +1,48 @@
+import designSystem from "@/styles/designSystem";
+import Spinner from "../Spinner";
+import Button, { ButtonProps } from "./Button";
+
+type AsyncButtonProps = {
+  isPending: boolean;
+} & ButtonProps;
+
+export default function AsyncButton({
+  isPending,
+  children,
+  ...props
+}: AsyncButtonProps) {
+  return (
+    <Button {...props}>
+      {isPending ? (
+        <Spinner
+          size={calcSpinnerSize(props.size)}
+          color={determineSpinnerColor(props.variant)}
+        />
+      ) : (
+        children
+      )}
+    </Button>
+  );
+}
+
+const calcSpinnerSize = (size: ButtonProps["size"]) => {
+  switch (size) {
+    case "h24":
+      return 12;
+    case "h32":
+      return 15;
+    case "h44":
+      return 20;
+  }
+};
+
+const determineSpinnerColor = (variant: ButtonProps["variant"]) => {
+  switch (variant) {
+    case "primary":
+      return designSystem.color.neutral.white;
+    case "secondary":
+      return designSystem.color.primary.blue200;
+    case "tertiary":
+      return designSystem.color.neutral.gray400;
+  }
+};

src/components/DatePicker.tsx

@@ -0,0 +1,81 @@
+import useResponsiveLayout from "@/hooks/useResponsiveLayout";
+import designSystem, { parseFontString } from "@/styles/designSystem";
+import { ThemeProvider, createTheme } from "@mui/material";
+import { DesktopDatePicker } from "@mui/x-date-pickers";
+import { Dayjs } from "dayjs";
+import { Icon } from "./Icon";
+
+type SizeType = "small" | "big";
+
+type Props = {
+  size: SizeType;
+  disabled?: boolean;
+  value: Dayjs | null;
+  onChange: (newVal: Dayjs | null) => void;
+};
+
+export default function DatePicker({
+  size,
+  disabled = false,
+  value,
+  onChange,
+}: Props) {
+  const { isMobile } = useResponsiveLayout();
+
+  return (
+    <ThemeProvider theme={datePickerTheme(size, isMobile)}>
+      <DesktopDatePicker
+        disabled={disabled}
+        value={value}
+        onChange={onChange}
+        format="YYYY-MM-DD"
+        disableOpenPicker={false}
+        slotProps={{
+          textField: { placeholder: "매입 날짜" },
+        }}
+        slots={{
+          openPickerIcon: () => {
+            return <Icon icon="calendar" color="gray600" size={16} />;
+          },
+        }}
+      />
+    </ThemeProvider>
+  );
+}
+
+const datePickerTheme = (size: SizeType, isMobile: boolean) => {
+  const WIDTH_SIZE = isMobile ? "100%" : size === "small" ? "127px" : "352px";
+  const HEIGHT_SIZE = isMobile
+    ? size === "small"
+      ? "32px"
+      : "48px"
+    : size === "small"
+      ? "24px"
+      : "32px";
+
+  return createTheme({
+    components: {
+      MuiInputBase: {
+        styleOverrides: {
+          root: {
+            "width": WIDTH_SIZE,
+            "height": HEIGHT_SIZE,
+            "padding": "0 0 0 8px",
+            ...parseFontString(designSystem.font.body3),
+            "&:hover, &:focus-within": {
+              fieldset: {
+                border: `1px solid ${designSystem.color.primary.blue500} !important`,
+              },
+            },
+            "fieldset": {
+              border: `1px solid ${designSystem.color.neutral.gray200}`,
+            },
+          },
+          input: {
+            padding: "0 !important",
+          },
+        },
+      },
+    },
+  });
+};

src/components/Pagination/LabelRowsPerPage.tsx

@@ -0,0 +1,42 @@
+import { Icon } from "@/components/Icon";
+import designSystem from "@/styles/designSystem";
+import styled from "styled-components";
+
+type Props = {
+  count: number;
+  startRow: number | undefined;
+  endRow: number | undefined;
+};
+
+export function LabelRowsPerPage({ count, endRow, startRow }: Props) {
+  return (
+    <LabelRowsPerPageWrapper>
+      <StyledLabelRowsPerPage>
+        전체 <span>{count}</span> 중{" "}
+        <span>
+          {startRow && endRow
+            ? endRow === 1
+              ? 1
+              : `${startRow}-${endRow}`
+            : count}
+        </span>
+      </StyledLabelRowsPerPage>
+      <Icon icon="divider" size={12} color="gray100" />
+    </LabelRowsPerPageWrapper>
+  );
+}
+
+const LabelRowsPerPageWrapper = styled.span`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledLabelRowsPerPage = styled.span`
+  margin-right: 8px;
+  ${designSystem.font.body3};
+  color: ${designSystem.color.neutral.gray600};
+
+  > span {
+    color: ${designSystem.color.neutral.gray900};
+  }
+`;

src/components/Pagination/Pagination.tsx

@@ -0,0 +1,81 @@
+import useResponsiveLayout from "@/hooks/useResponsiveLayout";
+import designSystem from "@/styles/designSystem";
+import {
+  Pagination as MuiPagination,
+  PaginationItem,
+  paginationClasses,
+} from "@mui/material";
+import { ChangeEvent } from "react";
+import styled from "styled-components";
+import { Icon } from "../Icon";
+
+type Props = {
+  count: number;
+  page: number;
+  onPageChange: (event: ChangeEvent<unknown>, page: number) => void;
+};
+
+export default function Pagination({ count, page, onPageChange }: Props) {
+  const { isMobile } = useResponsiveLayout();
+
+  return (
+    <StyledPagination
+      $isMobile={isMobile}
+      count={count}
+      page={page}
+      onChange={(event: ChangeEvent<unknown>, newPage: number) => {
+        if (page === newPage) return;
+
+        if (isMobile) {
+          window.scroll({ top: 0 });
+        }
+        onPageChange(event, newPage - 1);
+      }}
+      shape="rounded"
+      renderItem={(item) => (
+        <PaginationItem
+          slots={{
+            previous: () => (
+              <Icon icon="chevron-left" size={16} color="gray600" />
+            ),
+            next: () => <Icon icon="chevron-right" size={16} color="gray600" />,
+          }}
+          {...item}
+        />
+      )}
+    />
+  );
+}
+
+const StyledPagination = styled(MuiPagination)<{ $isMobile: boolean }>`
+  display: flex;
+  justify-content: center;
+  height: ${({ $isMobile }) => ($isMobile ? "32px" : "24px")};
+
+  .${paginationClasses.ul} {
+    gap: 8px;
+
+    > li {
+      width: ${({ $isMobile }) => ($isMobile ? "32px" : "24px")};
+      height: ${({ $isMobile }) => ($isMobile ? "32px" : "24px")};
+
+      > button {
+        width: ${({ $isMobile }) => ($isMobile ? "32px" : "24px")};
+        min-width: ${({ $isMobile }) => ($isMobile ? "32px" : "24px")};
+        height: ${({ $isMobile }) => ($isMobile ? "32px" : "24px")};
+        margin: 0;
+        padding: 0;
+        ${designSystem.font.body3};
+
+        &.Mui-selected {
+          background-color: ${designSystem.color.primary.blue50};
+          color: ${designSystem.color.primary.blue500};
+        }
+
+        &:hover {
+          background-color: ${designSystem.color.neutral.gray50};
+        }
+      }
+    }
+  }
+`;