[마이페이지] 구독 관리 화면 구현 및 api 연결

src/apis/prompt/prompt.model.ts

@@ -22,7 +22,7 @@ export type PromptDetails = {
     is_starred_by_user: boolean;
 };
 
-type PaginationInfo = {
+export type PaginationInfo = {
     total_pages: number;
     total_count: number;
     current_page: number;

src/components/Header/User/User.tsx

@@ -1,15 +1,34 @@
+import Button from "@/components/common/Button/Button";
 import { useUser } from "@/hooks/useUser";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
+import { LOCALSTORAGE_KEYS, removeLocalStorage } from "@/utils/storageUtils";
+import Text from "@/components/common/Text/Text";
 
 export default function User() {
-    const { userData } = useUser();
+    const { userData, resetUserState } = useUser();
     const navigate = useNavigate();
 
+    function handleLogout() {
+        removeLocalStorage(LOCALSTORAGE_KEYS.ACCESS_TOKEN);
+        resetUserState();
+        navigate("/", { replace: true });
+    }
+
     return (
         <UserContainer onClick={() => navigate("/my")}>
             <UserImage src={userData.user?.picture} />
             <UserNickname>{userData.user?.nickname}</UserNickname>
+            <Button
+                hierarchy="default"
+                size={36}
+                style={{ justifyContent: "center" }}
+                onClick={handleLogout}
+            >
+                <Text font="b3_14_semi" color="G_400">
+                    로그아웃
+                </Text>
+            </Button>
         </UserContainer>
     );
 }

src/components/LNB/LNB.tsx

@@ -0,0 +1,151 @@
+import styled from "styled-components";
+import { Flex, Menu } from "antd";
+import type { MenuProps } from "antd";
+import { ReactNode, useEffect, useState } from "react";
+import * as Icons from "iconsax-react";
+import Icon from "../common/Icon";
+import useDeviceSize from "@/hooks/useDeviceSize";
+
+export interface MenuItemsType {
+    key: string;
+    label?: string;
+    iconType?: keyof typeof Icons;
+    type?: "divider";
+    onClick?: () => void;
+    disabled?: boolean;
+}
+
+interface LNBtype {
+    menuItems: MenuItemsType[];
+    button?: ReactNode;
+    initialMenu?: string;
+}
+
+const LNB = ({ menuItems, button, initialMenu = "1" }: LNBtype) => {
+    const [selectedKey, setSelectedKey] = useState<string>("1");
+    const { isUnderTablet } = useDeviceSize();
+    console.log(menuItems, isUnderTablet);
+
+    // 메뉴 항목을 동적으로 생성
+    const desktopItems: MenuProps["items"] = menuItems.map((item) => {
+        if (!item.iconType || item.type === "divider") {
+            return { type: "divider", key: item.key };
+        }
+
+        return {
+            key: item.key,
+            icon: (
+                <Icon
+                    name={item.iconType}
+                    color={selectedKey === item.key ? "primary" : "G_400"}
+                    size={20}
+                />
+            ),
+            label: item.label,
+            onClick: item.onClick,
+        };
+    });
+
+    const handleClickMenu: MenuProps["onClick"] = (e) => {
+        const selectedItem = menuItems.find((item) => item.key === e.key);
+
+        if (!selectedItem?.disabled) {
+            setSelectedKey(e.key);
+        }
+    };
+
+    useEffect(() => {
+        setSelectedKey(initialMenu);
+    }, [initialMenu]);
+
+    if (isUnderTablet) {
+        return (
+            <Flex
+                justify="space-between"
+                align="center"
+                wrap="wrap"
+                gap={10}
+                style={{ width: "100vw", padding: "0 10px" }}
+            >
+                <Flex gap={20}>
+                    {menuItems.map((item) => (
+                        <button onClick={item.onClick} key={item.key}>
+                            {item.iconType && (
+                                <Icon
+                                    name={item.iconType}
+                                    color={
+                                        selectedKey === item.key
+                                            ? "primary"
+                                            : "G_400"
+                                    }
+                                    size={20}
+                                />
+                            )}
+                        </button>
+                    ))}
+                </Flex>
+                {button}
+            </Flex>
+        );
+    }
+
+    return (
+        <LNBWrapper>
+            <StyledMenu
+                onClick={handleClickMenu}
+                selectedKeys={[selectedKey]}
+                mode="vertical"
+                items={desktopItems}
+            />
+            {button}
+        </LNBWrapper>
+    );
+};
+
+export default LNB;
+
+const LNBWrapper = styled.div`
+    ${({ theme }) => theme.mixins.flexBox("column")};
+    width: 133px;
+`;
+
+const StyledMenu = styled(Menu)`
+    border-inline-end: none !important;
+    padding: 0;
+
+    .ant-menu-item {
+        ${({ theme }) => theme.mixins.flexBox("row", "start", "center")};
+        gap: 6px;
+        padding: 0;
+        padding-left: 10px;
+        background-color: transparent !important;
+        width: 149px;
+        height: 48px;
+    }
+
+    .ant-menu-title-content {
+        ${({ theme }) => theme.fonts.medium};
+        color: ${({ theme }) => theme.colors.G_400};
+    }
+
+    .ant-menu-item-selected {
+        background-color: transparent !important;
+
+        .ant-menu-title-content {
+            ${({ theme }) => theme.fonts.bold};
+            color: ${({ theme }) => theme.colors.primary};
+        }
+
+        svg {
+            stroke: ${({ theme }) => theme.colors.primary} !important;
+        }
+    }
+
+    .ant-menu-item-active {
+        background-color: ${({ theme }) => theme.colors.primary_10} !important;
+    }
+
+    .ant-menu-item-divider {
+        margin-bottom: 2px;
+    }
+`;

src/components/Sidebar/Item/GuideItem.tsx

@@ -1,5 +1,5 @@
 import Text from "@/components/common/Text/Text";
-import Icon from "@/pages/home/components/common/Icon";
+import Icon from "@/components/common/Icon";
 import { Flex } from "antd";
 import styled from "styled-components";
 

src/components/common/Button/Button.tsx

@@ -89,7 +89,7 @@ const StyledButton = styled.button<{
                 `;
             case "default":
                 return css`
-                    background: none;
+                    background: ${theme.colors.white};
                     color: ${theme.colors.black};
 
                     &:hover {

src/core/Payment.ts

@@ -0,0 +1,4 @@
+const PORTONE_STORE_ID = import.meta.env.VITE_PORTONE_STORE_ID;
+const PORTONE_CHANNEL_KEY = import.meta.env.VITE_PORTONE_CHANNEL_KEY;
+
+export { PORTONE_CHANNEL_KEY, PORTONE_STORE_ID };