diff --git a/.gitignore b/.gitignore
index a547bf3..cf970ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,9 @@ dist
 dist-ssr
 *.local
 
+# TypeScript incremental build cache
+*.tsbuildinfo
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
diff --git a/apps/pyconkr-2025/src/App.tsx b/apps/pyconkr-2025/src/App.tsx
index 7ce3a4c..81bdf8f 100644
--- a/apps/pyconkr-2025/src/App.tsx
+++ b/apps/pyconkr-2025/src/App.tsx
@@ -1,10 +1,10 @@
-import { useBackendClient, useFlattenSiteMapQuery, useSponsorQuery } from "@frontend/common/src/hooks/useAPI";
-import { buildNestedSiteMap } from "@frontend/common/src/utils";
-import * as React from "react";
+import { useBackendClient, useFlattenSiteMapQuery, useSponsorQuery } from "@frontend/common/hooks/useAPI";
+import { NestedSiteMapSchema } from "@frontend/common/schemas/backendAPI";
+import { buildNestedSiteMap } from "@frontend/common/utils";
+import { FC, useEffect } from "react";
 import { Route, Routes, useLocation } from "react-router-dom";
-import * as R from "remeda";
+import { isEmpty, isNullish } from "remeda";
 
-import * as BackendAPISchemas from "@frontend/common/src/schemas/backendAPI";
 import MainLayout from "./components/layout/index.tsx";
 import { PageIdParamRenderer, RouteRenderer } from "./components/pages/dynamic_route.tsx";
 import { PresentationDetailPage } from "./components/pages/presentation_detail.tsx";
@@ -14,7 +14,7 @@ import { Test } from "./components/pages/test.tsx";
 import { IS_DEBUG_ENV } from "./consts";
 import { useAppContext } from "./contexts/app_context";
 
-export const App: React.FC = () => {
+export const App: FC = () => {
   const backendAPIClient = useBackendClient();
   const { data: sponsorTiers } = useSponsorQuery(backendAPIClient);
   const { data: flatSiteMap } = useFlattenSiteMapQuery(backendAPIClient);
@@ -23,17 +23,17 @@ export const App: React.FC = () => {
   const location = useLocation();
   const { setAppContext, language } = useAppContext();
 
-  React.useEffect(() => {
+  useEffect(() => {
     (async () => {
-      const currentRouteCodes = ["", ...location.pathname.split("/").filter((code) => !R.isEmpty(code))];
-      const currentSiteMapDepth: (BackendAPISchemas.NestedSiteMapSchema | undefined)[] = [siteMapNode];
+      const currentRouteCodes = ["", ...location.pathname.split("/").filter((code) => !isEmpty(code))];
+      const currentSiteMapDepth: (NestedSiteMapSchema | undefined)[] = [siteMapNode];
 
       for (const routeCode of currentRouteCodes.splice(1)) {
         const childrenMap = currentSiteMapDepth
           .at(-1)
-          ?.children?.reduce((acc, child) => ({ ...acc, [child.route_code]: child }), {} as Record<string, BackendAPISchemas.NestedSiteMapSchema>);
+          ?.children?.reduce((acc, child) => ({ ...acc, [child.route_code]: child }), {} as Record<string, NestedSiteMapSchema>);
         currentSiteMapDepth.push(childrenMap?.[routeCode]);
-        if (R.isNullish(currentSiteMapDepth.at(-1))) {
+        if (isNullish(currentSiteMapDepth.at(-1))) {
           console.warn(`Route not found in site map: ${routeCode}`);
           break;
         }
diff --git a/apps/pyconkr-2025/src/components/layout/BreadCrumb/index.tsx b/apps/pyconkr-2025/src/components/layout/BreadCrumb/index.tsx
index 483b786..caa7198 100644
--- a/apps/pyconkr-2025/src/components/layout/BreadCrumb/index.tsx
+++ b/apps/pyconkr-2025/src/components/layout/BreadCrumb/index.tsx
@@ -1,23 +1,21 @@
+import { NestedSiteMapSchema } from "@frontend/common/schemas/backendAPI";
 import { Stack, styled } from "@mui/material";
-import * as React from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
-import * as R from "remeda";
-
-import { NestedSiteMapSchema } from "../../../../../../packages/common/src/schemas/backendAPI";
-
+import { isNonNullish } from "remeda";
 type BreadCrumbPropType = {
   title: string;
   parentSiteMaps: (NestedSiteMapSchema | undefined)[];
 };
 
-export const BreadCrumb: React.FC<BreadCrumbPropType> = ({ title, parentSiteMaps }) => {
+export const BreadCrumb: FC<BreadCrumbPropType> = ({ title, parentSiteMaps }) => {
   let route = "/";
   return (
     <BreadCrumbContainer>
       <BreadcrumbPathContainer direction="row" alignItems="center">
         {parentSiteMaps
           .slice(1, -1)
-          .filter((routeInfo) => R.isNonNullish(routeInfo))
+          .filter((routeInfo) => isNonNullish(routeInfo))
           .map(({ route_code, name }, index) => {
             route += `${route_code}/`;
             return (
diff --git a/apps/pyconkr-2025/src/components/layout/CartBadgeButton/index.tsx b/apps/pyconkr-2025/src/components/layout/CartBadgeButton/index.tsx
index c18e20c..b3ac586 100644
--- a/apps/pyconkr-2025/src/components/layout/CartBadgeButton/index.tsx
+++ b/apps/pyconkr-2025/src/components/layout/CartBadgeButton/index.tsx
@@ -1,8 +1,8 @@
-import * as Shop from "@frontend/shop";
+import { useCart, useShopClient } from "@frontend/shop/hooks";
 import { ShoppingCart } from "@mui/icons-material";
 import { Badge, badgeClasses, IconButton, styled } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC } from "react";
 import { useNavigate } from "react-router-dom";
 
 type InnerCartBadgeButtonPropType = {
@@ -19,7 +19,7 @@ const ColoredIconButton = styled(IconButton)(({ theme }) => ({
 
 const InnerCartBadge = styled(Badge)({ [`& .${badgeClasses.badge}`]: { top: "-12px", right: "-3px" } });
 
-const InnerCartBadgeButton: React.FC<InnerCartBadgeButtonPropType> = ({ loading, count }) => {
+const InnerCartBadgeButton: FC<InnerCartBadgeButtonPropType> = ({ loading, count }) => {
   const navigate = useNavigate();
 
   return (
@@ -30,11 +30,11 @@ const InnerCartBadgeButton: React.FC<InnerCartBadgeButtonPropType> = ({ loading,
   );
 };
 
-export const CartBadgeButton: React.FC = Suspense.with(
+export const CartBadgeButton: FC = Suspense.with(
   { fallback: <InnerCartBadgeButton loading /> },
   ErrorBoundary.with({ fallback: <InnerCartBadgeButton /> }, () => {
-    const shopAPIClient = Shop.Hooks.useShopClient();
-    const { data: cart } = Shop.Hooks.useCart(shopAPIClient);
+    const shopAPIClient = useShopClient();
+    const { data: cart } = useCart(shopAPIClient);
     return <InnerCartBadgeButton count={cart?.products.length} loading={false} />;
   })
 );
diff --git a/apps/pyconkr-2025/src/components/layout/Footer/Mobile/MobileFooter.tsx b/apps/pyconkr-2025/src/components/layout/Footer/Mobile/MobileFooter.tsx
index 79efc63..d32cfe0 100644
--- a/apps/pyconkr-2025/src/components/layout/Footer/Mobile/MobileFooter.tsx
+++ b/apps/pyconkr-2025/src/components/layout/Footer/Mobile/MobileFooter.tsx
@@ -1,14 +1,13 @@
 import styled from "@emotion/styled";
-import { useEmail } from "@frontend/common/src/hooks/useEmail";
+import { useEmail } from "@frontend/common/hooks/useEmail";
 import { Article, Email, Facebook, GitHub, Instagram, LinkedIn, X, YouTube } from "@mui/icons-material";
-import * as React from "react";
+import { FC } from "react";
 
 import FlickrIcon from "@apps/pyconkr-2025/assets/thirdparty/flickr.svg?react";
-
-import { useAppContext } from "../../../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
 interface IconItem {
-  icon: React.FC<{ width?: number; height?: number }>;
+  icon: FC<{ width?: number; height?: number }>;
   alt: string;
   href: string;
 }
diff --git a/apps/pyconkr-2025/src/components/layout/Footer/index.tsx b/apps/pyconkr-2025/src/components/layout/Footer/index.tsx
index e5d313d..159aed1 100644
--- a/apps/pyconkr-2025/src/components/layout/Footer/index.tsx
+++ b/apps/pyconkr-2025/src/components/layout/Footer/index.tsx
@@ -1,17 +1,16 @@
 import styled from "@emotion/styled";
-import { useEmail } from "@frontend/common/src/hooks/useEmail";
+import { useEmail } from "@frontend/common/hooks/useEmail";
 import { Article, Email, Facebook, GitHub, Instagram, LinkedIn, OpenInNew, X, YouTube } from "@mui/icons-material";
 import { Button, useMediaQuery, useTheme } from "@mui/material";
-import * as React from "react";
+import { FC, Fragment } from "react";
 
 import FlickrIcon from "@apps/pyconkr-2025/assets/thirdparty/flickr.svg?react";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
-// import MobileFooter from "./Mobile/MobileFooter";
-import { useAppContext } from "../../../contexts/app_context";
 import MobileFooter from "./Mobile/MobileFooter";
 
 interface IconItem {
-  icon: React.FC<{ width?: number; height?: number }>;
+  icon: FC<{ width?: number; height?: number }>;
   alt: string;
   href: string;
 }
@@ -47,7 +46,7 @@ const defaultIcons: IconItem[] = [
   },
 ];
 
-const Bar: React.FC = () => <div style={{ display: "inline-block", padding: "0 0.25rem" }}>|</div>;
+const Bar: FC = () => <div style={{ display: "inline-block", padding: "0 0.25rem" }}>|</div>;
 
 export default function Footer() {
   const { sendEmail } = useEmail();
@@ -119,12 +118,12 @@ export default function Footer() {
           </FooterText>
           <FooterLinks>
             {links.map((link, index) => (
-              <React.Fragment key={index}>
+              <Fragment key={index}>
                 <Link key={link.text} href={link.href}>
                   {link.text}
                 </Link>
                 {index < links.length - 1 && <Separator>|</Separator>}
-              </React.Fragment>
+              </Fragment>
             ))}
           </FooterLinks>
           <FooterIcons>
diff --git a/apps/pyconkr-2025/src/components/layout/Header/Mobile/HamburgerButton.tsx b/apps/pyconkr-2025/src/components/layout/Header/Mobile/HamburgerButton.tsx
index c859d12..1f811bd 100644
--- a/apps/pyconkr-2025/src/components/layout/Header/Mobile/HamburgerButton.tsx
+++ b/apps/pyconkr-2025/src/components/layout/Header/Mobile/HamburgerButton.tsx
@@ -1,13 +1,12 @@
 import { IconButton, styled } from "@mui/material";
-import * as React from "react";
-
+import { FC } from "react";
 interface HamburgerButtonProps {
   isOpen: boolean;
   onClick: () => void;
   isMainPath?: boolean;
 }
 
-export const HamburgerButton: React.FC<HamburgerButtonProps> = ({ isOpen, onClick, isMainPath = true }) => {
+export const HamburgerButton: FC<HamburgerButtonProps> = ({ isOpen, onClick, isMainPath = true }) => {
   return (
     <StyledIconButton onClick={onClick} isMainPath={isMainPath}>
       <HamburgerIcon isOpen={isOpen} isMainPath={isMainPath}>
diff --git a/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileHeader.tsx b/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileHeader.tsx
index c93d8e9..34b6ca7 100644
--- a/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileHeader.tsx
+++ b/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileHeader.tsx
@@ -1,22 +1,23 @@
-import { Components } from "@frontend/common";
+import { PythonKorea } from "@frontend/common/components";
 import { Box, Stack, styled, Typography } from "@mui/material";
-import * as React from "react";
+import { FC, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
+
 import { HamburgerButton } from "./HamburgerButton";
 import { MobileLanguageToggle } from "./MobileLanguageToggle";
 import { MobileNavigation } from "./MobileNavigation";
-import { useAppContext } from "../../../../contexts/app_context";
 
 interface MobileHeaderProps {
   isNavigationOpen?: boolean;
   onToggleNavigation?: () => void;
 }
 
-export const MobileHeader: React.FC<MobileHeaderProps> = ({ isNavigationOpen = false, onToggleNavigation }) => {
+export const MobileHeader: FC<MobileHeaderProps> = ({ isNavigationOpen = false, onToggleNavigation }) => {
   const { siteMapNode } = useAppContext();
   const location = useLocation();
-  const [internalNavigationOpen, setInternalNavigationOpen] = React.useState(false);
+  const [internalNavigationOpen, setInternalNavigationOpen] = useState(false);
 
   const navigationOpen = onToggleNavigation ? isNavigationOpen : internalNavigationOpen;
   const toggleNavigation = onToggleNavigation || (() => setInternalNavigationOpen(!internalNavigationOpen));
@@ -31,7 +32,7 @@ export const MobileHeader: React.FC<MobileHeaderProps> = ({ isNavigationOpen = f
           <LogoAndTextContainer>
             <Link to="/" style={{ textDecoration: "none" }}>
               <Stack direction="row" alignItems="center" spacing={0.375}>
-                <Components.PythonKorea style={{ width: 29, height: 29 }} />
+                <PythonKorea style={{ width: 29, height: 29 }} />
                 <Typography
                   variant="h6"
                   sx={{
diff --git a/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileLanguageToggle.tsx b/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileLanguageToggle.tsx
index 520da03..3d69528 100644
--- a/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileLanguageToggle.tsx
+++ b/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileLanguageToggle.tsx
@@ -1,14 +1,14 @@
 import { ButtonBase, styled } from "@mui/material";
-import * as React from "react";
+import { FC } from "react";
 
-import { LOCAL_STORAGE_LANGUAGE_KEY } from "../../../../consts/local_stroage";
-import { useAppContext } from "../../../../contexts/app_context";
+import { LOCAL_STORAGE_LANGUAGE_KEY } from "@apps/pyconkr-2025/consts/local_stroage";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
 interface MobileLanguageToggleProps {
   isMainPath?: boolean;
 }
 
-export const MobileLanguageToggle: React.FC<MobileLanguageToggleProps> = ({ isMainPath = true }) => {
+export const MobileLanguageToggle: FC<MobileLanguageToggleProps> = ({ isMainPath = true }) => {
   const { language, setAppContext } = useAppContext();
 
   const toggleLanguage = () => {
diff --git a/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileNavigation.tsx b/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileNavigation.tsx
index 86d54d3..2bed3ec 100644
--- a/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileNavigation.tsx
+++ b/apps/pyconkr-2025/src/components/layout/Header/Mobile/MobileNavigation.tsx
@@ -1,17 +1,18 @@
-import { Components } from "@frontend/common";
-import * as BackendAPISchemas from "@frontend/common/src/schemas/backendAPI";
+import { PythonKorea } from "@frontend/common/components";
+import { NestedSiteMapSchema } from "@frontend/common/schemas/backendAPI";
 import { ArrowBack, ArrowForward } from "@mui/icons-material";
 import { Box, Button, Chip, Drawer, IconButton, Stack, styled, Typography } from "@mui/material";
-import * as React from "react";
+import { FC, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
-import * as R from "remeda";
+import { isEmpty } from "remeda";
+
+import { SignInButton } from "@apps/pyconkr-2025/components/layout/SignInButton";
 
 import { HamburgerButton } from "./HamburgerButton";
 import { MobileLanguageToggle } from "./MobileLanguageToggle";
-import { SignInButton } from "../../SignInButton";
-// import { ScanCodeButton } from "../../UserScanCodeButton";
+// import { ScanCodeButton } from "@apps/pyconkr-2025/components/layout/UserScanCodeButton";
 
-type MenuType = BackendAPISchemas.NestedSiteMapSchema;
+type MenuType = NestedSiteMapSchema;
 
 interface MobileNavigationProps {
   isOpen: boolean;
@@ -28,9 +29,9 @@ interface NavigationState {
   breadcrumbs: { name: string; level: NavigationLevel }[];
 }
 
-export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onClose, siteMapNode }) => {
+export const MobileNavigation: FC<MobileNavigationProps> = ({ isOpen, onClose, siteMapNode }) => {
   const location = useLocation();
-  const [navState, setNavState] = React.useState<NavigationState>({
+  const [navState, setNavState] = useState<NavigationState>({
     level: "depth1",
     breadcrumbs: [],
   });
@@ -88,7 +89,7 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
           .filter((s) => !s.hide)
           .map((menu) => (
             <MenuItem isMainPath={isMainPath} key={menu.id}>
-              {!R.isEmpty(menu.children) && Object.values(menu.children).some((child) => !child.hide) ? (
+              {!isEmpty(menu.children) && Object.values(menu.children).some((child) => !child.hide) ? (
                 <MenuButton isMainPath={isMainPath} onClick={() => navigateToDepth2(menu)}>
                   {menu.name}
                 </MenuButton>
@@ -97,7 +98,7 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
                   {menu.name}
                 </MenuLink>
               )}
-              {!R.isEmpty(menu.children) && Object.values(menu.children).some((child) => !child.hide) && (
+              {!isEmpty(menu.children) && Object.values(menu.children).some((child) => !child.hide) && (
                 <MenuArrowButton isMainPath={isMainPath} onClick={() => navigateToDepth2(menu)}>
                   <ArrowForward fontSize="small" />
                 </MenuArrowButton>
@@ -130,7 +131,7 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
                 <Link to={`${navState.depth1!.route_code}/${menu.route_code}`} onClick={handleClose} style={{ textDecoration: "none" }}>
                   <MenuChip isMainPath={isMainPath} label={menu.name} clickable />
                 </Link>
-                {!R.isEmpty(menu.children) && Object.values(menu.children).some((child) => !child.hide) && (
+                {!isEmpty(menu.children) && Object.values(menu.children).some((child) => !child.hide) && (
                   <MenuArrowButton isMainPath={isMainPath} onClick={() => navigateToDepth3(menu)}>
                     <ArrowForward fontSize="small" />
                   </MenuArrowButton>
@@ -183,7 +184,7 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
           <LogoAndTextContainer>
             <Link to="/" onClick={handleClose} style={{ textDecoration: "none" }}>
               <Stack direction="row" alignItems="center" spacing={0.375}>
-                <Components.PythonKorea style={{ width: 29, height: 29 }} />
+                <PythonKorea style={{ width: 29, height: 29 }} />
                 <HeaderTitle isMainPath={isMainPath}>파이콘 한국 2025</HeaderTitle>
               </Stack>
             </Link>
diff --git a/apps/pyconkr-2025/src/components/layout/Header/index.tsx b/apps/pyconkr-2025/src/components/layout/Header/index.tsx
index 0ecbe1b..a91e50d 100644
--- a/apps/pyconkr-2025/src/components/layout/Header/index.tsx
+++ b/apps/pyconkr-2025/src/components/layout/Header/index.tsx
@@ -1,17 +1,18 @@
-import { Components } from "@frontend/common";
+import { PythonKorea } from "@frontend/common/components";
+import { NestedSiteMapSchema } from "@frontend/common/schemas/backendAPI";
 import { ArrowForwardIos } from "@mui/icons-material";
 import { Box, Button, CircularProgress, Divider, Stack, styled, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { MUIStyledCommonProps } from "@mui/system";
-import * as React from "react";
+import { CSSProperties, FC, Fragment, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import * as R from "remeda";
-
-import { NestedSiteMapSchema } from "../../../../../../packages/common/src/schemas/backendAPI";
-import { useAppContext } from "../../../contexts/app_context";
-import { CartBadgeButton } from "../CartBadgeButton";
-import LanguageSelector from "../LanguageSelector";
-import { SignInButton } from "../SignInButton";
-// import { ScanCodeIconButton } from "../UserScanCodeButton";
+import { isEmpty, isNonNullish, isString } from "remeda";
+
+import { CartBadgeButton } from "@apps/pyconkr-2025/components/layout/CartBadgeButton";
+import LanguageSelector from "@apps/pyconkr-2025/components/layout/LanguageSelector";
+import { SignInButton } from "@apps/pyconkr-2025/components/layout/SignInButton";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
+
+// import { ScanCodeIconButton } from "@apps/pyconkr-2025/components/layout/UserScanCodeButton";
 import { MobileHeader } from "./Mobile/MobileHeader";
 
 type MenuType = NestedSiteMapSchema;
@@ -23,14 +24,14 @@ type NavigationStateType = {
   depth3?: MenuType;
 };
 
-const HeaderHeight: React.CSSProperties["height"] = "3.625rem";
-const BreadCrumbHeight: React.CSSProperties["height"] = "4.5rem";
+const HeaderHeight: CSSProperties["height"] = "3.625rem";
+const BreadCrumbHeight: CSSProperties["height"] = "4.5rem";
 
-const Header: React.FC = () => {
+const Header: FC = () => {
   const { title, language, siteMapNode, currentSiteMapDepth, shouldShowTitleBanner } = useAppContext();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-  const [navState, setNavState] = React.useState<NavigationStateType>({});
+  const [navState, setNavState] = useState<NavigationStateType>({});
 
   const resetDepths = () => setNavState({});
   const setDepth1 = (depth1: MenuOrUndefinedType) => setNavState({ depth1 });
@@ -40,7 +41,7 @@ const Header: React.FC = () => {
   const getDepth2Route = (nextRoute?: string) => (navState.depth1?.route_code || "") + `/${nextRoute || ""}`;
   const getDepth3Route = (nextRoute?: string) => getDepth2Route(navState.depth2?.route_code) + `/${nextRoute || ""}`;
 
-  React.useEffect(resetDepths, [language]);
+  useEffect(resetDepths, [language]);
 
   if (isMobile) {
     return <MobileHeader />;
@@ -48,7 +49,7 @@ const Header: React.FC = () => {
 
   let breadCrumbRoute = "";
   let breadCrumbArray = currentSiteMapDepth.slice(1, -1);
-  if (R.isEmpty(breadCrumbArray)) breadCrumbArray = currentSiteMapDepth.slice(0, -1);
+  if (isEmpty(breadCrumbArray)) breadCrumbArray = currentSiteMapDepth.slice(0, -1);
 
   const headerContainerStyle: SxProps<Theme> = shouldShowTitleBanner
     ? {}
@@ -63,7 +64,7 @@ const Header: React.FC = () => {
         <NavSideElementContainer>
           <Link to="/" onClick={resetDepths} style={{ marginRight: "auto" }}>
             <Stack justifyContent="center" alignItems="center">
-              <Components.PythonKorea style={{ width: 40, height: 40 }} />
+              <PythonKorea style={{ width: 40, height: 40 }} />
             </Stack>
           </Link>
         </NavSideElementContainer>
@@ -76,8 +77,8 @@ const Header: React.FC = () => {
                   <Link
                     key={r.id}
                     onClick={resetDepths}
-                    target={R.isString(r.external_link) ? "_blank" : undefined}
-                    rel={R.isString(r.external_link) ? "noopener noreferrer" : undefined}
+                    target={isString(r.external_link) ? "_blank" : undefined}
+                    rel={isString(r.external_link) ? "noopener noreferrer" : undefined}
                     to={r.external_link || r.route_code}
                   >
                     <Button key={r.id} onMouseEnter={() => setDepth1(r)} sx={{ minWidth: 0, textTransform: "none" }}>
@@ -106,17 +107,17 @@ const Header: React.FC = () => {
                             onClick={resetDepths}
                             onMouseEnter={() => setDepth2(r)}
                             // 하위 depth가 있는 경우, 하위 depth를 선택할 수 있도록 유지하기 위해 depth2도 유지합니다.
-                            onMouseLeave={() => R.isEmpty(navState.depth2?.children ?? {}) && setDepth2(undefined)}
-                            target={R.isString(r.external_link) ? "_blank" : undefined}
-                            rel={R.isString(r.external_link) ? "noopener noreferrer" : undefined}
+                            onMouseLeave={() => isEmpty(navState.depth2?.children ?? {}) && setDepth2(undefined)}
+                            target={isString(r.external_link) ? "_blank" : undefined}
+                            rel={isString(r.external_link) ? "noopener noreferrer" : undefined}
                             to={r.external_link || getDepth2Route(r.route_code)}
                           />
                         ))}
                     </Stack>
 
-                    {navState.depth2 && !R.isEmpty(navState.depth2.children) && (
+                    {navState.depth2 && !isEmpty(navState.depth2.children) && (
                       <>
-                        {!R.isEmpty(navState.depth2.children) && <Depth2to3Divider orientation="vertical" flexItem />}
+                        {!isEmpty(navState.depth2.children) && <Depth2to3Divider orientation="vertical" flexItem />}
 
                         <Stack spacing={1.5}>
                           {Object.values(navState.depth2.children)
@@ -129,8 +130,8 @@ const Header: React.FC = () => {
                                 onClick={resetDepths}
                                 onMouseEnter={() => setDepth3(r)}
                                 onMouseLeave={() => setDepth3(undefined)}
-                                target={R.isString(r.external_link) ? "_blank" : undefined}
-                                rel={R.isString(r.external_link) ? "noopener noreferrer" : undefined}
+                                target={isString(r.external_link) ? "_blank" : undefined}
+                                rel={isString(r.external_link) ? "noopener noreferrer" : undefined}
                                 to={r.external_link || getDepth3Route(r?.route_code)}
                               />
                             ))}
@@ -159,14 +160,14 @@ const Header: React.FC = () => {
           <BreadCrumbContainer>
             <Stack direction="row" alignItems="center" spacing={0.5}>
               {breadCrumbArray
-                .filter((routeInfo) => R.isNonNullish(routeInfo))
+                .filter((routeInfo) => isNonNullish(routeInfo))
                 .map(({ route_code, name }, index) => {
                   breadCrumbRoute += `${route_code}/`;
                   return (
-                    <React.Fragment key={index}>
+                    <Fragment key={index}>
                       {index > 0 && <ArrowForwardIos sx={{ fontSize: "0.75rem" }} />}
                       <Link to={breadCrumbRoute} children={name} />
-                    </React.Fragment>
+                    </Fragment>
                   );
                 })}
             </Stack>
diff --git a/apps/pyconkr-2025/src/components/layout/LanguageSelector/index.tsx b/apps/pyconkr-2025/src/components/layout/LanguageSelector/index.tsx
index 5535802..62a13f1 100644
--- a/apps/pyconkr-2025/src/components/layout/LanguageSelector/index.tsx
+++ b/apps/pyconkr-2025/src/components/layout/LanguageSelector/index.tsx
@@ -1,8 +1,8 @@
 import { Language } from "@mui/icons-material";
 import { Button, Stack, styled } from "@mui/material";
 
-import { LOCAL_STORAGE_LANGUAGE_KEY } from "../../../consts/local_stroage";
-import { useAppContext } from "../../../contexts/app_context";
+import { LOCAL_STORAGE_LANGUAGE_KEY } from "@apps/pyconkr-2025/consts/local_stroage";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
 export default function LanguageSelector() {
   const { language, setAppContext } = useAppContext();
diff --git a/apps/pyconkr-2025/src/components/layout/SignInButton/index.tsx b/apps/pyconkr-2025/src/components/layout/SignInButton/index.tsx
index 7996129..6fd174e 100644
--- a/apps/pyconkr-2025/src/components/layout/SignInButton/index.tsx
+++ b/apps/pyconkr-2025/src/components/layout/SignInButton/index.tsx
@@ -1,10 +1,10 @@
-import * as Shop from "@frontend/shop";
+import { useShopClient, useSignOutMutation, useUserStatus } from "@frontend/shop/hooks";
 import { Login, Logout } from "@mui/icons-material";
 import { Button, Stack } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useNavigate } from "react-router-dom";
 
-import { useAppContext } from "../../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
 type InnerSignInButtonImplPropType = {
   loading?: boolean;
@@ -77,29 +77,28 @@ const InnerSignInButtonImpl: React.FC<InnerSignInButtonImplPropType> = ({
   );
 };
 
-export const SignInButton: React.FC<{ isMobile?: boolean; isMainPath?: boolean; onClose?: () => void }> = ({
-  isMobile = false,
-  isMainPath = true,
-  onClose,
-}) => {
-  const SignInWithErrorBoundary = ErrorBoundary.with(
-    { fallback: <InnerSignInButtonImpl isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} /> },
-    Suspense.with({ fallback: <InnerSignInButtonImpl loading isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} /> }, () => {
-      const shopAPIClient = Shop.Hooks.useShopClient();
-      const signOutMutation = Shop.Hooks.useSignOutMutation(shopAPIClient);
-      const { data } = Shop.Hooks.useUserStatus(shopAPIClient);
+type SignInButtonProps = { isMobile?: boolean; isMainPath?: boolean; onClose?: () => void };
 
-      return (
-        <InnerSignInButtonImpl
-          signedIn={data !== null}
-          onSignOut={signOutMutation.mutate}
-          isMobile={isMobile}
-          isMainPath={isMainPath}
-          onClose={onClose}
-        />
-      );
-    })
-  );
+const SignInButtonContent: React.FC<SignInButtonProps> = ({ isMobile, isMainPath, onClose }) => {
+  const shopAPIClient = useShopClient();
+  const signOutMutation = useSignOutMutation(shopAPIClient);
+  const { data } = useUserStatus(shopAPIClient);
 
-  return <SignInWithErrorBoundary />;
+  return (
+    <InnerSignInButtonImpl
+      signedIn={data !== null}
+      onSignOut={signOutMutation.mutate}
+      isMobile={isMobile}
+      isMainPath={isMainPath}
+      onClose={onClose}
+    />
+  );
 };
+
+export const SignInButton: React.FC<SignInButtonProps> = ({ isMobile = false, isMainPath = true, onClose }) => (
+  <ErrorBoundary fallback={<InnerSignInButtonImpl isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} />}>
+    <Suspense fallback={<InnerSignInButtonImpl loading isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} />}>
+      <SignInButtonContent isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} />
+    </Suspense>
+  </ErrorBoundary>
+);
diff --git a/apps/pyconkr-2025/src/components/layout/Sponsor/index.tsx b/apps/pyconkr-2025/src/components/layout/Sponsor/index.tsx
index 547c2ba..b4199a7 100644
--- a/apps/pyconkr-2025/src/components/layout/Sponsor/index.tsx
+++ b/apps/pyconkr-2025/src/components/layout/Sponsor/index.tsx
@@ -2,7 +2,7 @@ import { Badge, CircularProgress, Divider, Stack, Tooltip, Typography, Typograph
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { Link } from "react-router-dom";
 
-import { useAppContext } from "../../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
 const LogoHeight: React.CSSProperties["height"] = "8rem";
 const LogoWidth: React.CSSProperties["width"] = "15rem";
diff --git a/apps/pyconkr-2025/src/components/layout/UserScanCodeButton/index.tsx b/apps/pyconkr-2025/src/components/layout/UserScanCodeButton/index.tsx
index 3a26bf0..03c2961 100644
--- a/apps/pyconkr-2025/src/components/layout/UserScanCodeButton/index.tsx
+++ b/apps/pyconkr-2025/src/components/layout/UserScanCodeButton/index.tsx
@@ -1,16 +1,16 @@
-import * as Shop from "@frontend/shop";
+import { useShopClient, useUserInfo } from "@frontend/shop/hooks";
 import { QrCode2 } from "@mui/icons-material";
 import { Button, IconButton, IconButtonProps } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, Fragment } from "react";
 
-import { useAppContext } from "../../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
-export const ScanCodeIconButton: React.FC<{ sx?: IconButtonProps["sx"] }> = Suspense.with(
-  { fallback: <React.Fragment /> },
-  ErrorBoundary.with({ fallback: <React.Fragment /> }, ({ sx }) => {
-    const shopAPIClient = Shop.Hooks.useShopClient();
-    const { data } = Shop.Hooks.useUserInfo(shopAPIClient);
+export const ScanCodeIconButton: FC<{ sx?: IconButtonProps["sx"] }> = Suspense.with(
+  { fallback: <Fragment /> },
+  ErrorBoundary.with({ fallback: <Fragment /> }, ({ sx }) => {
+    const shopAPIClient = useShopClient();
+    const { data } = useUserInfo(shopAPIClient);
 
     const iconBtnStyle: IconButtonProps["sx"] = (theme) => ({
       color: theme.palette.primary.nonFocus,
@@ -27,12 +27,12 @@ export const ScanCodeIconButton: React.FC<{ sx?: IconButtonProps["sx"] }> = Susp
   })
 );
 
-export const ScanCodeButton: React.FC = Suspense.with(
+export const ScanCodeButton: FC = Suspense.with(
   { fallback: null },
   ErrorBoundary.with({ fallback: null }, () => {
     const { language } = useAppContext();
-    const shopAPIClient = Shop.Hooks.useShopClient();
-    const { data } = Shop.Hooks.useUserInfo(shopAPIClient);
+    const shopAPIClient = useShopClient();
+    const { data } = useUserInfo(shopAPIClient);
 
     const buttonText = language === "ko" ? "등록 코드" : "Entrance QR Code";
 
diff --git a/apps/pyconkr-2025/src/components/layout/index.tsx b/apps/pyconkr-2025/src/components/layout/index.tsx
index ee0da09..7cb498c 100644
--- a/apps/pyconkr-2025/src/components/layout/index.tsx
+++ b/apps/pyconkr-2025/src/components/layout/index.tsx
@@ -2,10 +2,11 @@ import styled from "@emotion/styled";
 import { Stack } from "@mui/material";
 import { Outlet } from "react-router-dom";
 
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
+
 import Footer from "./Footer";
 import Header from "./Header";
 import { Sponsor } from "./Sponsor";
-import { useAppContext } from "../../contexts/app_context";
 
 export default function MainLayout() {
   const { shouldShowSponsorBanner } = useAppContext();
diff --git a/apps/pyconkr-2025/src/components/pages/dynamic_route.tsx b/apps/pyconkr-2025/src/components/pages/dynamic_route.tsx
index 1fd2246..b6241c8 100644
--- a/apps/pyconkr-2025/src/components/pages/dynamic_route.tsx
+++ b/apps/pyconkr-2025/src/components/pages/dynamic_route.tsx
@@ -1,19 +1,19 @@
-import { Components } from "@frontend/common";
-import { useBackendClient, usePageQuery } from "@frontend/common/src/hooks/useAPI";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
-import { parseCss } from "@frontend/common/src/utils";
-import { BackendAPIClientError } from "@frontend/common/src/apis";
+import { BackendAPIClientError } from "@frontend/common/apis";
+import { CenteredPage, ErrorFallback, MDXRenderer } from "@frontend/common/components";
+import { useBackendClient, usePageQuery } from "@frontend/common/hooks/useAPI";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
+import { parseCss } from "@frontend/common/utils";
 import { CircularProgress, Stack, Theme } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { AxiosError, AxiosResponse } from "axios";
-import * as React from "react";
+import { CSSProperties, FC, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import * as R from "remeda";
+import { isEmpty, isString } from "remeda";
 
-import { useAppContext } from "../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
-const initialPageStyle: (additionalStyle: React.CSSProperties) => (theme: Theme) => React.CSSProperties = (additionalStyle) => (theme) => ({
+const initialPageStyle: (additionalStyle: CSSProperties) => (theme: Theme) => CSSProperties = (additionalStyle) => (theme) => ({
   width: "100%",
   display: "flex",
   justifyContent: "flex-start",
@@ -22,7 +22,7 @@ const initialPageStyle: (additionalStyle: React.CSSProperties) => (theme: Theme)
 
   marginTop: theme.spacing(4),
 
-  ...(!R.isEmpty(additionalStyle)
+  ...(!isEmpty(additionalStyle)
     ? additionalStyle
     : {
         [theme.breakpoints.down("lg")]: {
@@ -34,7 +34,7 @@ const initialPageStyle: (additionalStyle: React.CSSProperties) => (theme: Theme)
       }),
 });
 
-const initialSectionStyle: (additionalStyle: React.CSSProperties) => (theme: Theme) => React.CSSProperties = (additionalStyle) => (theme) => ({
+const initialSectionStyle: (additionalStyle: CSSProperties) => (theme: Theme) => CSSProperties = (additionalStyle) => (theme) => ({
   width: "100%",
   maxWidth: "1200px",
   display: "flex",
@@ -44,7 +44,7 @@ const initialSectionStyle: (additionalStyle: React.CSSProperties) => (theme: The
   paddingLeft: theme.spacing(16),
 
   "& .markdown-body": { width: "100%" },
-  ...(!R.isEmpty(additionalStyle)
+  ...(!isEmpty(additionalStyle)
     ? additionalStyle
     : {
         [theme.breakpoints.down("lg")]: {
@@ -58,13 +58,13 @@ const initialSectionStyle: (additionalStyle: React.CSSProperties) => (theme: The
       }),
 });
 
-const LoginRequired: React.FC = () => <>401 Login Required</>;
-const PermissionDenied: React.FC = () => <>403 Permission Denied</>;
-const PageNotFound: React.FC = () => <>404 Not Found</>;
-const CenteredLoadingPage: React.FC = () => (
-  <Components.CenteredPage>
+const LoginRequired: FC = () => <>401 Login Required</>;
+const PermissionDenied: FC = () => <>403 Permission Denied</>;
+const PageNotFound: FC = () => <>404 Not Found</>;
+const CenteredLoadingPage: FC = () => (
+  <CenteredPage>
     <CircularProgress />
-  </Components.CenteredPage>
+  </CenteredPage>
 );
 
 const throwPageNotFound: (message: string) => never = (message) => {
@@ -75,7 +75,7 @@ const throwPageNotFound: (message: string) => never = (message) => {
   throw new BackendAPIClientError(axiosError);
 };
 
-const RouteErrorFallback: React.FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
+const RouteErrorFallback: FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
   if (error instanceof BackendAPIClientError) {
     switch (error.status) {
       case 401:
@@ -85,17 +85,17 @@ const RouteErrorFallback: React.FC<{ error: Error; reset: () => void }> = ({ err
       case 404:
         return <PageNotFound />;
       default:
-        return <Components.ErrorFallback error={error} reset={reset} />;
+        return <ErrorFallback error={error} reset={reset} />;
     }
   }
-  return <Components.ErrorFallback error={error} reset={reset} />;
+  return <ErrorFallback error={error} reset={reset} />;
 };
 
-const WaitedCenteredLoadingPage: React.FC = Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
-  const [isFetching, setIsFetching] = React.useState(true);
+const WaitedCenteredLoadingPage: FC = Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
+  const [isFetching, setIsFetching] = useState(true);
   const qClient = useQueryClient();
 
-  React.useEffect(() => {
+  useEffect(() => {
     const unsubscribe = qClient.getQueryCache().subscribe(() => setIsFetching(qClient.isFetching() > 0));
     return () => unsubscribe();
   }, [qClient]);
@@ -103,13 +103,13 @@ const WaitedCenteredLoadingPage: React.FC = Suspense.with({ fallback: <CenteredL
   return isFetching ? <CenteredLoadingPage /> : <PageNotFound />;
 });
 
-const InnerPageRenderer: React.FC<{ id: string }> = Suspense.with({ fallback: <CenteredLoadingPage /> }, ({ id }) => {
+const InnerPageRenderer: FC<{ id: string }> = Suspense.with({ fallback: <CenteredLoadingPage /> }, ({ id }) => {
   const { setAppContext } = useAppContext();
   const { baseUrl, mdxComponents } = useCommonContext();
   const backendClient = useBackendClient();
   const { data } = usePageQuery(backendClient, id);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setAppContext((prev) => ({
       ...prev,
       title: data.title,
@@ -122,33 +122,33 @@ const InnerPageRenderer: React.FC<{ id: string }> = Suspense.with({ fallback: <C
     <Stack sx={initialPageStyle(parseCss(data.css))}>
       {data.sections.map((s) => (
         <Stack sx={initialSectionStyle(parseCss(s.css))} key={s.id}>
-          <Components.MDXRenderer text={s.body} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
+          <MDXRenderer text={s.body} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </Stack>
       ))}
     </Stack>
   );
 });
 
-export const PageRenderer: React.FC<{ id: string }> = ({ id }) => (
+export const PageRenderer: FC<{ id: string }> = ({ id }) => (
   <ErrorBoundary fallback={RouteErrorFallback} resetKeys={[id]}>
     <InnerPageRenderer id={id} />
   </ErrorBoundary>
 );
 
-export const RouteRenderer: React.FC = ErrorBoundary.with(
+export const RouteRenderer: FC = ErrorBoundary.with(
   { fallback: RouteErrorFallback },
   Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
     const { siteMapNode, currentSiteMapDepth } = useAppContext();
-    const routeInfo = !R.isEmpty(currentSiteMapDepth) && currentSiteMapDepth[currentSiteMapDepth.length - 1];
+    const routeInfo = !isEmpty(currentSiteMapDepth) && currentSiteMapDepth[currentSiteMapDepth.length - 1];
 
     if (!(siteMapNode && routeInfo)) return <WaitedCenteredLoadingPage />;
-    if (R.isString(routeInfo.page)) return <PageRenderer id={routeInfo.page} />;
-    if (R.isString(routeInfo.external_link)) window.location.replace(routeInfo.external_link);
+    if (isString(routeInfo.page)) return <PageRenderer id={routeInfo.page} />;
+    if (isString(routeInfo.external_link)) window.location.replace(routeInfo.external_link);
     return <PageNotFound />;
   })
 );
 
-export const PageIdParamRenderer: React.FC = Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
+export const PageIdParamRenderer: FC = Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
   const { id } = useParams();
   if (!id) throwPageNotFound("Page ID is required");
   return <PageRenderer id={id} />;
diff --git a/apps/pyconkr-2025/src/components/pages/presentation_detail.tsx b/apps/pyconkr-2025/src/components/pages/presentation_detail.tsx
index 706109a..ed72966 100644
--- a/apps/pyconkr-2025/src/components/pages/presentation_detail.tsx
+++ b/apps/pyconkr-2025/src/components/pages/presentation_detail.tsx
@@ -1,16 +1,16 @@
-import { Components } from "@frontend/common";
-import { useBackendClient, useSessionQuery } from "@frontend/common/src/hooks/useAPI";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+import { CenteredPage, ErrorFallback, FallbackImage, LinkHandler, MDXRenderer } from "@frontend/common/components";
+import { useBackendClient, useSessionQuery } from "@frontend/common/hooks/useAPI";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
 import { Box, Chip, CircularProgress, Divider, Stack, styled, Table, TableBody, TableCell, TableRow, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { DateTime } from "luxon";
-import * as React from "react";
+import { CSSProperties, FC, useEffect } from "react";
 import { Navigate, useParams } from "react-router-dom";
-import * as R from "remeda";
+import { isString } from "remeda";
 
-import PyCon2025Logo from "../../assets/pyconkr2025_logo.png";
-import { useAppContext } from "../../contexts/app_context";
-import { PageLayout } from "../layout/PageLayout";
+import PyCon2025Logo from "@apps/pyconkr-2025/assets/pyconkr2025_logo.png";
+import { PageLayout } from "@apps/pyconkr-2025/components/layout/PageLayout";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
 const PROFILE_IMAGE_SIZE = "7rem";
 
@@ -21,13 +21,13 @@ type SimplifiedSpeakerSchema = {
   biography: string;
 };
 
-const CenteredLoadingPage: React.FC = () => (
-  <Components.CenteredPage>
+const CenteredLoadingPage: FC = () => (
+  <CenteredPage>
     <CircularProgress />
-  </Components.CenteredPage>
+  </CenteredPage>
 );
 
-const StyledPresentationImage = styled(Components.FallbackImage)(({ theme }) => ({
+const StyledPresentationImage = styled(FallbackImage)(({ theme }) => ({
   maxWidth: "75%",
   maxHeight: "480px",
   aspectRatio: "1",
@@ -86,21 +86,21 @@ const ProfileImageContainer = styled(Stack)({
   border: `1px solid rgba(0, 0, 0, 0.12)`,
 });
 
-const ProfileImageStyle: React.CSSProperties = {
+const ProfileImageStyle: CSSProperties = {
   width: "100%",
   height: "100%",
   objectFit: "cover",
 };
 
-const ProfileImage = styled(Components.FallbackImage)(ProfileImageStyle);
+const ProfileImage = styled(FallbackImage)(ProfileImageStyle);
 
-const ProfileImageErrorFallback: React.FC = () => (
+const ProfileImageErrorFallback: FC = () => (
   <Stack alignItems="center" justifyContent="center" sx={{ ...ProfileImageStyle }}>
     <img src={PyCon2025Logo} alt="PyCon 2025 Logo" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "50%" }} />
   </Stack>
 );
 
-const PresentationSpeakerItem: React.FC<{ speaker: SimplifiedSpeakerSchema }> = ({ speaker }) => {
+const PresentationSpeakerItem: FC<{ speaker: SimplifiedSpeakerSchema }> = ({ speaker }) => {
   const { baseUrl, mdxComponents } = useCommonContext();
   return (
     <>
@@ -111,9 +111,7 @@ const PresentationSpeakerItem: React.FC<{ speaker: SimplifiedSpeakerSchema }> =
         <Stack alignItems="flex-start" justifyContent="center" sx={{ flexGrow: 1 }}>
           <Typography variant="h4" fontWeight="700" fontSize="2rem" children={speaker.nickname} />
           {speaker.biography ? (
-            <BiographyBox
-              children={<Components.MDXRenderer text={speaker.biography || ""} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />}
-            />
+            <BiographyBox children={<MDXRenderer text={speaker.biography || ""} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />} />
           ) : (
             <>
               <br />
@@ -127,7 +125,7 @@ const PresentationSpeakerItem: React.FC<{ speaker: SimplifiedSpeakerSchema }> =
   );
 };
 
-const PresentationImageFallback: React.FC<{ language: "ko" | "en" }> = ({ language }) => {
+const PresentationImageFallback: FC<{ language: "ko" | "en" }> = ({ language }) => {
   const message =
     language === "ko" ? (
       <>
@@ -146,8 +144,8 @@ const PresentationImageFallback: React.FC<{ language: "ko" | "en" }> = ({ langua
   return <Typography variant="caption" color="textSecondary" children={message} />;
 };
 
-export const PresentationDetailPage: React.FC = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+export const PresentationDetailPage: FC = ErrorBoundary.with(
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
     const { id } = useParams();
     const { language, setAppContext } = useAppContext();
@@ -188,7 +186,7 @@ export const PresentationDetailPage: React.FC = ErrorBoundary.with(
       {} as Record<string, string[]>
     );
 
-    React.useEffect(() => {
+    useEffect(() => {
       setAppContext((prev) => ({
         ...prev,
         title: language === "ko" ? "발표 상세" : "Presentation Detail",
@@ -246,11 +244,11 @@ export const PresentationDetailPage: React.FC = ErrorBoundary.with(
                 </TableCell>
               </TableRow>
             ) : null}
-            {R.isString(presentation.public_slideshow_file) ? (
+            {isString(presentation.public_slideshow_file) ? (
               <TableRow>
                 <HeaderTableCell children={<Typography variant="subtitle1" fontWeight="bold" children={slideShowStr} />} />
                 <TableCell sx={(theme) => ({ color: theme.palette.primary.main, textDecoration: "underline" })}>
-                  <Components.LinkHandler href={presentation.public_slideshow_file} children={slideShowLinkStr} />
+                  <LinkHandler href={presentation.public_slideshow_file} children={slideShowLinkStr} />
                 </TableCell>
               </TableRow>
             ) : null}
@@ -264,12 +262,7 @@ export const PresentationDetailPage: React.FC = ErrorBoundary.with(
           />
         )}
         <DescriptionBox>
-          <Components.MDXRenderer
-            text={presentation.description || descriptionFallback}
-            format="md"
-            baseUrl={baseUrl}
-            mdxComponents={mdxComponents}
-          />
+          <MDXRenderer text={presentation.description || descriptionFallback} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </DescriptionBox>
         <Divider flexItem />
         {presentation.speakers && (
diff --git a/apps/pyconkr-2025/src/components/pages/sign_in.tsx b/apps/pyconkr-2025/src/components/pages/sign_in.tsx
index 905b2ad..d5ea20b 100644
--- a/apps/pyconkr-2025/src/components/pages/sign_in.tsx
+++ b/apps/pyconkr-2025/src/components/pages/sign_in.tsx
@@ -1,29 +1,29 @@
-import * as Shop from "@frontend/shop";
+import { useShopClient, useSignInWithSNSMutation, useUserStatus } from "@frontend/shop/hooks";
 import { AccountCircleOutlined, Google } from "@mui/icons-material";
 import { Backdrop, Button, ButtonProps, CircularProgress, Stack, Typography } from "@mui/material";
 import { Suspense } from "@suspensive/react";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
+import { FC, ReactNode, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { useAppContext } from "../../contexts/app_context";
-import { PageLayout } from "../layout/PageLayout";
+import { PageLayout } from "@apps/pyconkr-2025/components/layout/PageLayout";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
 type PageeStateType = {
   openBackdrop: boolean;
 };
 
-export const ShopSignInPage: React.FC = Suspense.with({ fallback: <CircularProgress /> }, () => {
+export const ShopSignInPage: FC = Suspense.with({ fallback: <CircularProgress /> }, () => {
   const { setAppContext, language } = useAppContext();
-  const [state, setState] = React.useState<PageeStateType>({ openBackdrop: false });
+  const [state, setState] = useState<PageeStateType>({ openBackdrop: false });
   const navigate = useNavigate();
-  const shopAPIClient = Shop.Hooks.useShopClient();
-  const SignInMutation = Shop.Hooks.useSignInWithSNSMutation(shopAPIClient);
-  const { data } = Shop.Hooks.useUserStatus(shopAPIClient);
+  const shopAPIClient = useShopClient();
+  const SignInMutation = useSignInWithSNSMutation(shopAPIClient);
+  const { data } = useUserStatus(shopAPIClient);
 
   const shouldOpenBackdrop = SignInMutation.isPending || state.openBackdrop;
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const triggerSignIn = (provider: "google" | "kakao" | "naver") => {
@@ -39,7 +39,7 @@ export const ShopSignInPage: React.FC = Suspense.with({ fallback: <CircularProgr
   const signInWithKakaoStr = language === "ko" ? "카카오로 로그인" : "Sign In with Kakao";
   const signInWithNaverStr = language === "ko" ? "네이버로 로그인" : "Sign In with Naver";
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (data && data.meta.is_authenticated) {
       addSnackbar(
         language === "ko" ? `이미 ${data.data.user.username}님으로 로그인되어 있습니다!` : `You are already signed in as ${data.data.user.username}!`,
@@ -55,7 +55,7 @@ export const ShopSignInPage: React.FC = Suspense.with({ fallback: <CircularProgr
       shouldShowTitleBanner: true,
       shouldShowSponsorBanner: false,
     }));
-  }, [signInTitleStr]);
+  }, [data, language, navigate, setAppContext, signInTitleStr]);
 
   const commonBtnProps: ButtonProps = {
     variant: "contained",
diff --git a/apps/pyconkr-2025/src/components/pages/sponsor_detail.tsx b/apps/pyconkr-2025/src/components/pages/sponsor_detail.tsx
index e81d528..17630ff 100644
--- a/apps/pyconkr-2025/src/components/pages/sponsor_detail.tsx
+++ b/apps/pyconkr-2025/src/components/pages/sponsor_detail.tsx
@@ -1,20 +1,20 @@
-import { Components } from "@frontend/common";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+import { CenteredPage, ErrorFallback, MDXRenderer } from "@frontend/common/components";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
+import { SponsorTierSchema } from "@frontend/common/schemas/backendAPI";
 import { Box, Chip, CircularProgress, Divider, Stack, styled, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import * as R from "remeda";
+import { isNonNullish } from "remeda";
 
-import { SponsorTierSchema } from "../../../../../packages/common/src/schemas/backendAPI";
-import { useAppContext } from "../../contexts/app_context";
-import { PageLayout } from "../layout/PageLayout";
+import { PageLayout } from "@apps/pyconkr-2025/components/layout/PageLayout";
+import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context";
 
-const PageNotFound: React.FC = () => <>404 Not Found</>;
-const CenteredLoadingPage: React.FC = () => (
-  <Components.CenteredPage>
+const PageNotFound: FC = () => <>404 Not Found</>;
+const CenteredLoadingPage: FC = () => (
+  <CenteredPage>
     <CircularProgress />
-  </Components.CenteredPage>
+  </CenteredPage>
 );
 
 const LogoImage = styled("img")(({ theme }) => ({
@@ -50,8 +50,8 @@ const DescriptionBox = styled(Box)(({ theme }) => ({
   },
 }));
 
-export const SponsorDetailPage: React.FC = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+export const SponsorDetailPage: FC = ErrorBoundary.with(
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
     const { id } = useParams();
     const { language, sponsorTiers, setAppContext } = useAppContext();
@@ -62,12 +62,12 @@ export const SponsorDetailPage: React.FC = ErrorBoundary.with(
     const title = language === "ko" ? "후원사" : "Sponsor";
     const descriptionFallback = language === "ko" ? "해당 후원사의 설명은 준비 중이에요!" : "This sponsor's description is under preparation!";
 
-    React.useEffect(() => {
+    useEffect(() => {
       setAppContext((prev) => ({
         ...prev,
         title: `${title} - ${sponsor?.name || "Detail"}`,
         shouldShowTitleBanner: true,
-        shouldShowSponsorBanner: !R.isNonNullish(sponsor),
+        shouldShowSponsorBanner: !isNonNullish(sponsor),
       }));
     }, [sponsor, title, setAppContext]);
 
@@ -90,7 +90,7 @@ export const SponsorDetailPage: React.FC = ErrorBoundary.with(
         </Typography>
         <Divider flexItem />
         <DescriptionBox>
-          <Components.MDXRenderer text={sponsor.description || descriptionFallback} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
+          <MDXRenderer text={sponsor.description || descriptionFallback} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </DescriptionBox>
       </PageLayout>
     );
diff --git a/apps/pyconkr-2025/src/components/pages/test.tsx b/apps/pyconkr-2025/src/components/pages/test.tsx
index da436f0..a25d9f8 100644
--- a/apps/pyconkr-2025/src/components/pages/test.tsx
+++ b/apps/pyconkr-2025/src/components/pages/test.tsx
@@ -1,10 +1,10 @@
 import { Button, Stack } from "@mui/material";
-import * as React from "react";
+import { FC, ReactNode, useState } from "react";
 
-import { ComponentTestPage } from "../../debug/page/component_test";
-import { MapTestPage } from "../../debug/page/map_test";
-import { MdiTestPage } from "../../debug/page/mdi_test";
-import { ShopTestPage } from "../../debug/page/shop_test";
+import { ComponentTestPage } from "@apps/pyconkr-2025/debug/page/component_test";
+import { MapTestPage } from "@apps/pyconkr-2025/debug/page/map_test";
+import { MdiTestPage } from "@apps/pyconkr-2025/debug/page/mdi_test";
+import { ShopTestPage } from "@apps/pyconkr-2025/debug/page/shop_test";
 
 const LOCAL_STORAGE_KEY = "selectedTab";
 type SelectedTabType = "shop" | "mdi" | "map" | "component";
@@ -16,17 +16,17 @@ const setTabToLocalStorage = (tab: SelectedTabType) => {
   return tab;
 };
 
-const TabList: { [key in SelectedTabType]: React.ReactNode } = {
+const TabList: { [key in SelectedTabType]: ReactNode } = {
   shop: <ShopTestPage />,
   mdi: <MdiTestPage />,
   map: <MapTestPage />,
   component: <ComponentTestPage />,
 };
 
-export const Test: React.FC = () => {
-  const [selectedTab, setSelectedTab] = React.useState<SelectedTabType>(getTabFromLocalStorage());
+export const Test: FC = () => {
+  const [selectedTab, setSelectedTab] = useState<SelectedTabType>(getTabFromLocalStorage());
   const selectTab = (tab: SelectedTabType) => setSelectedTab(setTabToLocalStorage(tab));
-  const TabButton: React.FC<{ tab: SelectedTabType }> = ({ tab }) => (
+  const TabButton: FC<{ tab: SelectedTabType }> = ({ tab }) => (
     <Button variant={selectedTab === tab ? "contained" : "outlined"} onClick={() => selectTab(tab)}>
       {tab} Test
     </Button>
diff --git a/apps/pyconkr-2025/src/consts/mdx_components.ts b/apps/pyconkr-2025/src/consts/mdx_components.ts
index 3276981..051477e 100644
--- a/apps/pyconkr-2025/src/consts/mdx_components.ts
+++ b/apps/pyconkr-2025/src/consts/mdx_components.ts
@@ -1,143 +1,281 @@
 // 후대의 개발자님께 : 컴포넌트 맨 첫글자가 대문자로 시작하지 않으면 JSX 컴포넌트가 아니라 일반 HTML 태그로 인식합니다. 제발 대문자로 시작해주세요.
-import { Components, Schemas } from "@frontend/common";
-import * as Shop from "@frontend/shop";
-import * as mui from "@mui/material";
+import PyCon2025HostLogoBig from "@frontend/common/assets/pyconkr2025_hostlogo_big.png";
+import PyCon2025HostLogoSmall from "@frontend/common/assets/pyconkr2025_hostlogo_small.png";
+import PyCon2025MobileLogoImage from "@frontend/common/assets/pyconkr2025_main_cover_image.png";
+import PyCon2025MobileLogoTitle from "@frontend/common/assets/pyconkr2025_main_cover_title.png";
+import { LottiePlayer, NetworkLottiePlayer } from "@frontend/common/components";
+import {
+  Confetti,
+  FAQAccordion,
+  Map as MDXMap,
+  MobileAccordion,
+  MobileCover,
+  PrimaryStyledDetails,
+  SecondaryStyledDetails,
+  SessionList,
+  SessionTimeTable,
+  StyledFullWidthButton,
+} from "@frontend/common/components/mdx_components";
+import type { SessionSchema } from "@frontend/common/schemas/backendAPI";
+import { PriceDisplay, ShopContextProvider, SignInGuard, UserSignInAccount, UserSignInMethod } from "@frontend/shop/components/common";
+import { CartStatus, OrderList, PatronList, ProductImageCardList, ProductList, UserInfo } from "@frontend/shop/components/features";
+import {
+  Accordion,
+  AccordionActions,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  AlertTitle,
+  AppBar,
+  Autocomplete,
+  Avatar,
+  AvatarGroup,
+  Backdrop,
+  Badge,
+  BottomNavigation,
+  BottomNavigationAction,
+  Box,
+  Breadcrumbs,
+  Button,
+  ButtonBase,
+  ButtonGroup,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  Checkbox,
+  Chip,
+  CircularProgress,
+  Collapse,
+  Container,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Divider,
+  Drawer,
+  Fab,
+  Fade,
+  FilledInput,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormHelperText,
+  FormLabel,
+  Grid,
+  Grow,
+  Icon,
+  IconButton,
+  ImageList,
+  ImageListItem,
+  ImageListItemBar,
+  Input,
+  InputAdornment,
+  InputBase,
+  InputLabel,
+  LinearProgress,
+  Link,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  ListSubheader,
+  Menu,
+  MenuItem,
+  MenuList,
+  MobileStepper,
+  Modal,
+  NativeSelect,
+  NoSsr,
+  OutlinedInput,
+  Pagination,
+  PaginationItem,
+  Paper,
+  Popover,
+  Popper,
+  Portal,
+  Radio,
+  RadioGroup,
+  Rating,
+  Select,
+  Skeleton,
+  Slide,
+  Slider,
+  Snackbar,
+  SnackbarContent,
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon,
+  Stack,
+  Step,
+  StepButton,
+  StepConnector,
+  StepContent,
+  StepIcon,
+  StepLabel,
+  Stepper,
+  SvgIcon,
+  SwipeableDrawer,
+  Switch,
+  Tab,
+  TabScrollButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableFooter,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TableSortLabel,
+  Tabs,
+  TextField,
+  TextareaAutosize,
+  ToggleButton,
+  ToggleButtonGroup,
+  Toolbar,
+  Tooltip,
+  Typography,
+  Zoom,
+} from "@mui/material";
 import type { MDXComponents } from "mdx/types.js";
-import * as React from "react";
+import { ComponentProps, FC, createElement } from "react";
 
-import PyCon2025HostLogoBig from "../../../../packages/common/src/assets/pyconkr2025_hostlogo_big.png";
-import PyCon2025HostLogoSmall from "../../../../packages/common/src/assets/pyconkr2025_hostlogo_small.png";
-import PyCon2025MobileLogoImage from "../../../../packages/common/src/assets/pyconkr2025_main_cover_image.png";
-import PyCon2025MobileLogoTitle from "../../../../packages/common/src/assets/pyconkr2025_main_cover_title.png";
-import PyCon2025Logo from "../assets/pyconkr2025_logo.png";
+import PyCon2025Logo from "@apps/pyconkr-2025/assets/pyconkr2025_logo.png";
 
 const MUIMDXComponents: MDXComponents = {
-  Mui__material__Accordion: mui.Accordion,
-  Mui__material__AccordionActions: mui.AccordionActions,
-  Mui__material__AccordionDetails: mui.AccordionDetails,
-  Mui__material__AccordionSummary: mui.AccordionSummary,
-  Mui__material__Alert: mui.Alert,
-  Mui__material__AlertTitle: mui.AlertTitle,
-  Mui__material__AppBar: mui.AppBar,
-  Mui__material__Autocomplete: mui.Autocomplete,
-  Mui__material__Avatar: mui.Avatar,
-  Mui__material__AvatarGroup: mui.AvatarGroup,
-  Mui__material__Backdrop: mui.Backdrop,
-  Mui__material__Badge: mui.Badge,
-  Mui__material__BottomNavigation: mui.BottomNavigation,
-  Mui__material__BottomNavigationAction: mui.BottomNavigationAction,
-  Mui__material__Box: mui.Box,
-  Mui__material__Breadcrumbs: mui.Breadcrumbs,
-  Mui__material__Button: mui.Button,
-  Mui__material__ButtonBase: mui.ButtonBase,
-  Mui__material__ButtonGroup: mui.ButtonGroup,
-  Mui__material__Card: mui.Card,
-  Mui__material__CardActionArea: mui.CardActionArea,
-  Mui__material__CardActions: mui.CardActions,
-  Mui__material__CardContent: mui.CardContent,
-  Mui__material__CardHeader: mui.CardHeader,
-  Mui__material__CardMedia: mui.CardMedia,
-  Mui__material__Checkbox: mui.Checkbox,
-  Mui__material__Chip: mui.Chip,
-  Mui__material__CircularProgress: mui.CircularProgress,
-  Mui__material__Collapse: mui.Collapse,
-  Mui__material__Container: mui.Container,
-  Mui__material__Dialog: mui.Dialog,
-  Mui__material__DialogActions: mui.DialogActions,
-  Mui__material__DialogContent: mui.DialogContent,
-  Mui__material__DialogContentText: mui.DialogContentText,
-  Mui__material__DialogTitle: mui.DialogTitle,
-  Mui__material__Divider: mui.Divider,
-  Mui__material__Drawer: mui.Drawer,
-  Mui__material__Fab: mui.Fab,
-  Mui__material__Fade: mui.Fade,
-  Mui__material__FilledInput: mui.FilledInput,
-  Mui__material__FormControl: mui.FormControl,
-  Mui__material__FormControlLabel: mui.FormControlLabel,
-  Mui__material__FormGroup: mui.FormGroup,
-  Mui__material__FormHelperText: mui.FormHelperText,
-  Mui__material__FormLabel: mui.FormLabel,
-  Mui__material__Grid: mui.Grid,
-  Mui__material__Grow: mui.Grow,
-  Mui__material__Icon: mui.Icon,
-  Mui__material__IconButton: mui.IconButton,
-  Mui__material__ImageList: mui.ImageList,
-  Mui__material__ImageListItem: mui.ImageListItem,
-  Mui__material__ImageListItemBar: mui.ImageListItemBar,
-  Mui__material__Input: mui.Input,
-  Mui__material__InputAdornment: mui.InputAdornment,
-  Mui__material__InputBase: mui.InputBase,
-  Mui__material__InputLabel: mui.InputLabel,
-  Mui__material__LinearProgress: mui.LinearProgress,
-  Mui__material__Link: mui.Link,
-  Mui__material__List: mui.List,
-  Mui__material__ListItem: mui.ListItem,
-  Mui__material__ListItemAvatar: mui.ListItemAvatar,
-  Mui__material__ListItemButton: mui.ListItemButton,
-  Mui__material__ListItemIcon: mui.ListItemIcon,
-  Mui__material__ListItemSecondaryAction: mui.ListItemSecondaryAction,
-  Mui__material__ListItemText: mui.ListItemText,
-  Mui__material__ListSubheader: mui.ListSubheader,
-  Mui__material__Menu: mui.Menu,
-  Mui__material__MenuItem: mui.MenuItem,
-  Mui__material__MenuList: mui.MenuList,
-  Mui__material__MobileStepper: mui.MobileStepper,
-  Mui__material__Modal: mui.Modal,
-  Mui__material__NativeSelect: mui.NativeSelect,
-  Mui__material__NoSsr: mui.NoSsr,
-  Mui__material__OutlinedInput: mui.OutlinedInput,
-  Mui__material__Pagination: mui.Pagination,
-  Mui__material__PaginationItem: mui.PaginationItem,
-  Mui__material__Paper: mui.Paper,
-  Mui__material__Popover: mui.Popover,
-  Mui__material__Popper: mui.Popper,
-  Mui__material__Portal: mui.Portal,
-  Mui__material__Radio: mui.Radio,
-  Mui__material__RadioGroup: mui.RadioGroup,
-  Mui__material__Rating: mui.Rating,
-  Mui__material__Select: mui.Select,
-  Mui__material__Skeleton: mui.Skeleton,
-  Mui__material__Slide: mui.Slide,
-  Mui__material__Slider: mui.Slider,
-  Mui__material__Snackbar: mui.Snackbar,
-  Mui__material__SnackbarContent: mui.SnackbarContent,
-  Mui__material__SpeedDial: mui.SpeedDial,
-  Mui__material__SpeedDialAction: mui.SpeedDialAction,
-  Mui__material__SpeedDialIcon: mui.SpeedDialIcon,
-  Mui__material__Stack: mui.Stack,
-  Mui__material__Step: mui.Step,
-  Mui__material__StepButton: mui.StepButton,
-  Mui__material__StepConnector: mui.StepConnector,
-  Mui__material__StepContent: mui.StepContent,
-  Mui__material__StepIcon: mui.StepIcon,
-  Mui__material__StepLabel: mui.StepLabel,
-  Mui__material__Stepper: mui.Stepper,
-  Mui__material__SvgIcon: mui.SvgIcon,
-  Mui__material__SwipeableDrawer: mui.SwipeableDrawer,
-  Mui__material__Switch: mui.Switch,
-  Mui__material__Tab: mui.Tab,
-  Mui__material__Table: mui.Table,
-  Mui__material__TableBody: mui.TableBody,
-  Mui__material__TableCell: mui.TableCell,
-  Mui__material__TableContainer: mui.TableContainer,
-  Mui__material__TableFooter: mui.TableFooter,
-  Mui__material__TableHead: mui.TableHead,
-  Mui__material__TablePagination: mui.TablePagination,
-  Mui__material__TableRow: mui.TableRow,
-  Mui__material__TableSortLabel: mui.TableSortLabel,
-  Mui__material__Tabs: mui.Tabs,
-  Mui__material__TabScrollButton: mui.TabScrollButton,
-  Mui__material__TextField: mui.TextField,
-  Mui__material__TextareaAutosize: mui.TextareaAutosize,
-  Mui__material__ToggleButton: mui.ToggleButton,
-  Mui__material__ToggleButtonGroup: mui.ToggleButtonGroup,
-  Mui__material__Toolbar: mui.Toolbar,
-  Mui__material__Tooltip: mui.Tooltip,
-  Mui__material__Typography: mui.Typography,
-  Mui__material__Zoom: mui.Zoom,
+  Mui__material__Accordion: Accordion,
+  Mui__material__AccordionActions: AccordionActions,
+  Mui__material__AccordionDetails: AccordionDetails,
+  Mui__material__AccordionSummary: AccordionSummary,
+  Mui__material__Alert: Alert,
+  Mui__material__AlertTitle: AlertTitle,
+  Mui__material__AppBar: AppBar,
+  Mui__material__Autocomplete: Autocomplete,
+  Mui__material__Avatar: Avatar,
+  Mui__material__AvatarGroup: AvatarGroup,
+  Mui__material__Backdrop: Backdrop,
+  Mui__material__Badge: Badge,
+  Mui__material__BottomNavigation: BottomNavigation,
+  Mui__material__BottomNavigationAction: BottomNavigationAction,
+  Mui__material__Box: Box,
+  Mui__material__Breadcrumbs: Breadcrumbs,
+  Mui__material__Button: Button,
+  Mui__material__ButtonBase: ButtonBase,
+  Mui__material__ButtonGroup: ButtonGroup,
+  Mui__material__Card: Card,
+  Mui__material__CardActionArea: CardActionArea,
+  Mui__material__CardActions: CardActions,
+  Mui__material__CardContent: CardContent,
+  Mui__material__CardHeader: CardHeader,
+  Mui__material__CardMedia: CardMedia,
+  Mui__material__Checkbox: Checkbox,
+  Mui__material__Chip: Chip,
+  Mui__material__CircularProgress: CircularProgress,
+  Mui__material__Collapse: Collapse,
+  Mui__material__Container: Container,
+  Mui__material__Dialog: Dialog,
+  Mui__material__DialogActions: DialogActions,
+  Mui__material__DialogContent: DialogContent,
+  Mui__material__DialogContentText: DialogContentText,
+  Mui__material__DialogTitle: DialogTitle,
+  Mui__material__Divider: Divider,
+  Mui__material__Drawer: Drawer,
+  Mui__material__Fab: Fab,
+  Mui__material__Fade: Fade,
+  Mui__material__FilledInput: FilledInput,
+  Mui__material__FormControl: FormControl,
+  Mui__material__FormControlLabel: FormControlLabel,
+  Mui__material__FormGroup: FormGroup,
+  Mui__material__FormHelperText: FormHelperText,
+  Mui__material__FormLabel: FormLabel,
+  Mui__material__Grid: Grid,
+  Mui__material__Grow: Grow,
+  Mui__material__Icon: Icon,
+  Mui__material__IconButton: IconButton,
+  Mui__material__ImageList: ImageList,
+  Mui__material__ImageListItem: ImageListItem,
+  Mui__material__ImageListItemBar: ImageListItemBar,
+  Mui__material__Input: Input,
+  Mui__material__InputAdornment: InputAdornment,
+  Mui__material__InputBase: InputBase,
+  Mui__material__InputLabel: InputLabel,
+  Mui__material__LinearProgress: LinearProgress,
+  Mui__material__Link: Link,
+  Mui__material__List: List,
+  Mui__material__ListItem: ListItem,
+  Mui__material__ListItemAvatar: ListItemAvatar,
+  Mui__material__ListItemButton: ListItemButton,
+  Mui__material__ListItemIcon: ListItemIcon,
+  Mui__material__ListItemSecondaryAction: ListItemSecondaryAction,
+  Mui__material__ListItemText: ListItemText,
+  Mui__material__ListSubheader: ListSubheader,
+  Mui__material__Menu: Menu,
+  Mui__material__MenuItem: MenuItem,
+  Mui__material__MenuList: MenuList,
+  Mui__material__MobileStepper: MobileStepper,
+  Mui__material__Modal: Modal,
+  Mui__material__NativeSelect: NativeSelect,
+  Mui__material__NoSsr: NoSsr,
+  Mui__material__OutlinedInput: OutlinedInput,
+  Mui__material__Pagination: Pagination,
+  Mui__material__PaginationItem: PaginationItem,
+  Mui__material__Paper: Paper,
+  Mui__material__Popover: Popover,
+  Mui__material__Popper: Popper,
+  Mui__material__Portal: Portal,
+  Mui__material__Radio: Radio,
+  Mui__material__RadioGroup: RadioGroup,
+  Mui__material__Rating: Rating,
+  Mui__material__Select: Select,
+  Mui__material__Skeleton: Skeleton,
+  Mui__material__Slide: Slide,
+  Mui__material__Slider: Slider,
+  Mui__material__Snackbar: Snackbar,
+  Mui__material__SnackbarContent: SnackbarContent,
+  Mui__material__SpeedDial: SpeedDial,
+  Mui__material__SpeedDialAction: SpeedDialAction,
+  Mui__material__SpeedDialIcon: SpeedDialIcon,
+  Mui__material__Stack: Stack,
+  Mui__material__Step: Step,
+  Mui__material__StepButton: StepButton,
+  Mui__material__StepConnector: StepConnector,
+  Mui__material__StepContent: StepContent,
+  Mui__material__StepIcon: StepIcon,
+  Mui__material__StepLabel: StepLabel,
+  Mui__material__Stepper: Stepper,
+  Mui__material__SvgIcon: SvgIcon,
+  Mui__material__SwipeableDrawer: SwipeableDrawer,
+  Mui__material__Switch: Switch,
+  Mui__material__Tab: Tab,
+  Mui__material__Table: Table,
+  Mui__material__TableBody: TableBody,
+  Mui__material__TableCell: TableCell,
+  Mui__material__TableContainer: TableContainer,
+  Mui__material__TableFooter: TableFooter,
+  Mui__material__TableHead: TableHead,
+  Mui__material__TablePagination: TablePagination,
+  Mui__material__TableRow: TableRow,
+  Mui__material__TableSortLabel: TableSortLabel,
+  Mui__material__Tabs: Tabs,
+  Mui__material__TabScrollButton: TabScrollButton,
+  Mui__material__TextField: TextField,
+  Mui__material__TextareaAutosize: TextareaAutosize,
+  Mui__material__ToggleButton: ToggleButton,
+  Mui__material__ToggleButtonGroup: ToggleButtonGroup,
+  Mui__material__Toolbar: Toolbar,
+  Mui__material__Tooltip: Tooltip,
+  Mui__material__Typography: Typography,
+  Mui__material__Zoom: Zoom,
 };
 
-const getPyConKR2025SessionUrl = (session: Schemas.BackendAPI.SessionSchema): string => {
+const getPyConKR2025SessionUrl = (session: SessionSchema): string => {
   const urlSafeTitle = session.title
     .replace(/ /g, "-")
     .replace(/([.])/g, "_")
@@ -145,27 +283,27 @@ const getPyConKR2025SessionUrl = (session: Schemas.BackendAPI.SessionSchema): st
   return `/presentations/${session.id}#${urlSafeTitle}`;
 };
 
-const PyConKR2025FallbackImage = React.createElement("img", {
+const PyConKR2025FallbackImage = createElement("img", {
   src: PyCon2025Logo,
   alt: "PyCon 2025 Logo",
   style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: "50%" },
 });
 
-const PyConKR2025SessionList: React.FC<React.ComponentProps<typeof Components.MDX.SessionList>> = (props) =>
-  React.createElement(Components.MDX.SessionList, {
+const PyConKR2025SessionList: FC<ComponentProps<typeof SessionList>> = (props) =>
+  createElement(SessionList, {
     ...props,
     fallbackImage: PyConKR2025FallbackImage,
     getSessionUrl: getPyConKR2025SessionUrl,
   });
 
-const PyConKR2025SessionTimeTable: React.FC<React.ComponentProps<typeof Components.MDX.SessionTimeTable>> = (props) =>
-  React.createElement(Components.MDX.SessionTimeTable, {
+const PyConKR2025SessionTimeTable: FC<ComponentProps<typeof SessionTimeTable>> = (props) =>
+  createElement(SessionTimeTable, {
     ...props,
     getSessionUrl: getPyConKR2025SessionUrl,
   });
 
-const PyConKR2025MobileAccordion: React.FC<object> = () =>
-  React.createElement(Components.MDX.MobileAccordion, {
+const PyConKR2025MobileAccordion: FC<object> = () =>
+  createElement(MobileAccordion, {
     marqueeText: "AUG 15 - 17",
     marqueeLogoSrc: PyCon2025HostLogoSmall,
     hostLogoBigSrc: PyCon2025HostLogoBig,
@@ -173,21 +311,21 @@ const PyConKR2025MobileAccordion: React.FC<object> = () =>
     venueEnLines: ["New Engineering Building, Dongguk University", "Pildong-ro 1-gil, Jung-gu, Seoul, Republic of Korea"],
   });
 
-const PyConKR2025MobileCover: React.FC<object> = () =>
-  React.createElement(Components.MDX.MobileCover, {
+const PyConKR2025MobileCover: FC<object> = () =>
+  createElement(MobileCover, {
     coverImageSrc: PyCon2025MobileLogoImage,
     coverTitleSrc: PyCon2025MobileLogoTitle,
   });
 
 const PyConKRCommonMDXComponents: MDXComponents = {
-  Common__Components__Lottie: Components.LottiePlayer,
-  Common__Components__NetworkLottie: Components.NetworkLottiePlayer,
-  Common__Components__MDX__Confetti: Components.MDX.Confetti,
-  Common__Components__MDX__PrimaryStyledDetails: Components.MDX.PrimaryStyledDetails,
-  Common__Components__MDX__SecondaryStyledDetails: Components.MDX.SecondaryStyledDetails,
-  Common__Components__MDX__Map: Components.MDX.Map,
-  Common__Components__MDX__FAQAccordion: Components.MDX.FAQAccordion,
-  Common__Components__MDX__FullWidthStyledButton: Components.MDX.StyledFullWidthButton,
+  Common__Components__Lottie: LottiePlayer,
+  Common__Components__NetworkLottie: NetworkLottiePlayer,
+  Common__Components__MDX__Confetti: Confetti,
+  Common__Components__MDX__PrimaryStyledDetails: PrimaryStyledDetails,
+  Common__Components__MDX__SecondaryStyledDetails: SecondaryStyledDetails,
+  Common__Components__MDX__Map: MDXMap,
+  Common__Components__MDX__FAQAccordion: FAQAccordion,
+  Common__Components__MDX__FullWidthStyledButton: StyledFullWidthButton,
   Common__Components__Session__List: PyConKR2025SessionList,
   Common__Components__Session__TimeTable: PyConKR2025SessionTimeTable,
   Common__Components__MDX__MobileAccordion: PyConKR2025MobileAccordion,
@@ -195,17 +333,17 @@ const PyConKRCommonMDXComponents: MDXComponents = {
 };
 
 const PythonKRShopMDXComponents: MDXComponents = {
-  Shop__Common__PriceDisplay: Shop.Components.Common.PriceDisplay,
-  Shop__Common__SignInGuard: Shop.Components.Common.SignInGuard,
-  Shop__Common__ContextProvider: Shop.Components.Common.ShopContextProvider,
-  Shop__Common__UserSignInMethod: Shop.Components.Common.UserSignInMethod,
-  Shop__Common__UserSignInAccount: Shop.Components.Common.UserSignInAccount,
-  Shop__Feature__CartStatus: Shop.Components.Features.CartStatus,
-  Shop__Feature__ProductList: Shop.Components.Features.ProductList,
-  Shop__Feature__ProductImageCardList: Shop.Components.Features.ProductImageCardList,
-  Shop__Feature__OrderList: Shop.Components.Features.OrderList,
-  Shop__Feature__UserInfo: Shop.Components.Features.UserInfo,
-  Shop__Feature__PatronList: Shop.Components.Features.PatronList,
+  Shop__Common__PriceDisplay: PriceDisplay,
+  Shop__Common__SignInGuard: SignInGuard,
+  Shop__Common__ContextProvider: ShopContextProvider,
+  Shop__Common__UserSignInMethod: UserSignInMethod,
+  Shop__Common__UserSignInAccount: UserSignInAccount,
+  Shop__Feature__CartStatus: CartStatus,
+  Shop__Feature__ProductList: ProductList,
+  Shop__Feature__ProductImageCardList: ProductImageCardList,
+  Shop__Feature__OrderList: OrderList,
+  Shop__Feature__UserInfo: UserInfo,
+  Shop__Feature__PatronList: PatronList,
 };
 
 export const PyConKRMDXComponents = {
diff --git a/apps/pyconkr-2025/src/contexts/app_context.tsx b/apps/pyconkr-2025/src/contexts/app_context.tsx
index 3c56bb8..3a20055 100644
--- a/apps/pyconkr-2025/src/contexts/app_context.tsx
+++ b/apps/pyconkr-2025/src/contexts/app_context.tsx
@@ -1,7 +1,5 @@
-import * as React from "react";
-
-import { NestedSiteMapSchema, SponsorTierSchema } from "../../../../packages/common/src/schemas/backendAPI";
-
+import { NestedSiteMapSchema, SponsorTierSchema } from "@frontend/common/schemas/backendAPI";
+import { Dispatch, SetStateAction, createContext, useContext } from "react";
 type LanguageType = "ko" | "en";
 
 export type AppContextType = {
@@ -14,13 +12,13 @@ export type AppContextType = {
   title: string;
   currentSiteMapDepth: (NestedSiteMapSchema | undefined)[];
 
-  setAppContext: React.Dispatch<React.SetStateAction<Omit<AppContextType, "setAppContext">>>;
+  setAppContext: Dispatch<SetStateAction<Omit<AppContextType, "setAppContext">>>;
 };
 
-export const AppContext = React.createContext<AppContextType | undefined>(undefined);
+export const AppContext = createContext<AppContextType | undefined>(undefined);
 
 export const useAppContext = (): AppContextType => {
-  const context = React.useContext(AppContext);
+  const context = useContext(AppContext);
   if (!context) {
     throw new Error("useAppContext must be used within an AppContextProvider");
   }
diff --git a/apps/pyconkr-2025/src/debug/page/component_test.tsx b/apps/pyconkr-2025/src/debug/page/component_test.tsx
index b406c61..0eb0e3b 100644
--- a/apps/pyconkr-2025/src/debug/page/component_test.tsx
+++ b/apps/pyconkr-2025/src/debug/page/component_test.tsx
@@ -1,8 +1,7 @@
-import { Components } from "@frontend/common";
+import { PrimaryStyledDetails, SecondaryStyledDetails } from "@frontend/common/components/mdx_components";
 import { Chip, Stack, Table, TableBody, TableCell, TableRow } from "@mui/material";
-import * as React from "react";
-
-const HighlightedChip: React.FC<{ label: string }> = ({ label }) => (
+import { FC } from "react";
+const HighlightedChip: FC<{ label: string }> = ({ label }) => (
   <Chip
     label={label}
     sx={(theme) => ({
@@ -14,10 +13,10 @@ const HighlightedChip: React.FC<{ label: string }> = ({ label }) => (
   />
 );
 
-export const ComponentTestPage: React.FC = () => {
+export const ComponentTestPage: FC = () => {
   return (
     <Stack direction="column" spacing={2} sx={{ p: 2 }}>
-      <Components.MDX.PrimaryStyledDetails summary="자가용 이용시">
+      <PrimaryStyledDetails summary="자가용 이용시">
         모든 자동차의 출입은 동국대 정문으로만 가능
         <Table>
           <TableBody>
@@ -47,9 +46,9 @@ export const ComponentTestPage: React.FC = () => {
             </TableRow>
           </TableBody>
         </Table>
-      </Components.MDX.PrimaryStyledDetails>
+      </PrimaryStyledDetails>
 
-      <Components.MDX.SecondaryStyledDetails summary="자가용 이용시">
+      <SecondaryStyledDetails summary="자가용 이용시">
         모든 자동차의 출입은 동국대 정문으로만 가능
         <Table>
           <TableBody>
@@ -79,7 +78,7 @@ export const ComponentTestPage: React.FC = () => {
             </TableRow>
           </TableBody>
         </Table>
-      </Components.MDX.SecondaryStyledDetails>
+      </SecondaryStyledDetails>
     </Stack>
   );
 };
diff --git a/apps/pyconkr-2025/src/debug/page/map_test.tsx b/apps/pyconkr-2025/src/debug/page/map_test.tsx
index 9c6bace..a67ed28 100644
--- a/apps/pyconkr-2025/src/debug/page/map_test.tsx
+++ b/apps/pyconkr-2025/src/debug/page/map_test.tsx
@@ -1,14 +1,13 @@
-import { Components } from "@frontend/common";
-import { getFormValue, isFormValid } from "@frontend/common/src/utils";
+import { Map as MDXMap, MapPropType } from "@frontend/common/components/mdx_components";
+import { getFormValue, isFormValid } from "@frontend/common/utils";
 import { Box, Button, FormControlLabel, Stack, Switch, TextField } from "@mui/material";
-import * as React from "react";
-
+import { FC, useRef, useState } from "react";
 type MapTestPageStateType = {
   checked: boolean;
-  mapProps: Components.MDX.MapPropType;
+  mapProps: MapPropType;
 };
 
-const INITIAL_DATA: Components.MDX.MapPropType = {
+const INITIAL_DATA: MapPropType = {
   geo: { lat: 37.5580918, lng: 126.9982178 },
   placeName: {
     ko: "동국대학교 신공학관",
@@ -23,13 +22,13 @@ const INITIAL_DATA: Components.MDX.MapPropType = {
     "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.871473157695!2d126.99821779999999!3d37.5580918!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca302befa0c31%3A0xbc66c66731962172!2z64-Z6rWt64yA7ZWZ6rWQIOyLoOqzte2Vmeq0gA!5e0!3m2!1sko!2sen!4v1748768615566!5m2!1sko!2sen",
 };
 
-export const MapTestPage: React.FC = () => {
-  const geoFormRef = React.useRef<HTMLFormElement>(null);
-  const placeNameFormRef = React.useRef<HTMLFormElement>(null);
-  const placeCodeFormRef = React.useRef<HTMLFormElement>(null);
-  const gMapIframeUrlInputRef = React.useRef<HTMLInputElement>(null);
+export const MapTestPage: FC = () => {
+  const geoFormRef = useRef<HTMLFormElement>(null);
+  const placeNameFormRef = useRef<HTMLFormElement>(null);
+  const placeCodeFormRef = useRef<HTMLFormElement>(null);
+  const gMapIframeUrlInputRef = useRef<HTMLInputElement>(null);
 
-  const [state, setState] = React.useState<MapTestPageStateType>({ checked: false, mapProps: INITIAL_DATA });
+  const [state, setState] = useState<MapTestPageStateType>({ checked: false, mapProps: INITIAL_DATA });
   const setChecked = (checked: boolean) => setState((ps) => ({ ...ps, checked }));
   const language = state.checked ? "en" : "ko";
 
@@ -90,7 +89,7 @@ export const MapTestPage: React.FC = () => {
         <Button onClick={onApply}>적용</Button>
       </Stack>
       <Box sx={{ width: "50%", maxWidth: "50%" }}>
-        <Components.MDX.Map {...state.mapProps} />
+        <MDXMap {...state.mapProps} />
       </Box>
     </Stack>
   );
diff --git a/apps/pyconkr-2025/src/debug/page/mdi_test.tsx b/apps/pyconkr-2025/src/debug/page/mdi_test.tsx
index ad7e376..2ff46fd 100644
--- a/apps/pyconkr-2025/src/debug/page/mdi_test.tsx
+++ b/apps/pyconkr-2025/src/debug/page/mdi_test.tsx
@@ -1,5 +1,5 @@
-import { Components } from "@frontend/common";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+import { MDXEditor, MDXRenderer } from "@frontend/common/components";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
 import { Box, Stack } from "@mui/material";
 import React from "react";
 
@@ -27,10 +27,10 @@ export const MdiTestPage: React.FC = () => {
       }}
     >
       <Box sx={HalfWidthStyle}>
-        <Components.MDXEditor defaultValue={state.text} onChange={setMDXInput} />
+        <MDXEditor defaultValue={state.text} onChange={setMDXInput} />
       </Box>
       <Box sx={HalfWidthStyle}>
-        <Components.MDXRenderer {...state} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
+        <MDXRenderer {...state} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
       </Box>
     </Stack>
   );
diff --git a/apps/pyconkr-2025/src/debug/page/shop_test.tsx b/apps/pyconkr-2025/src/debug/page/shop_test.tsx
index bb5beee..5bfbe1a 100644
--- a/apps/pyconkr-2025/src/debug/page/shop_test.tsx
+++ b/apps/pyconkr-2025/src/debug/page/shop_test.tsx
@@ -1,4 +1,4 @@
-import * as Shop from "@frontend/shop";
+import { CartStatus, OrderList, ProductImageCardList, ProductList, UserInfo } from "@frontend/shop/components/features";
 import { Divider, Stack, Typography } from "@mui/material";
 import React from "react";
 
@@ -11,26 +11,26 @@ export const ShopTestPage: React.FC = () => (
       <Typography variant="h5" gutterBottom>
         계정 상태
       </Typography>
-      <Shop.Components.Features.UserInfo />
+      <UserInfo />
       <Divider />
       <Typography variant="h5" gutterBottom>
         상품 목록
       </Typography>
-      <Shop.Components.Features.ProductList category_group="2025" category="티켓" />
+      <ProductList category_group="2025" category="티켓" />
       <Typography variant="h5" gutterBottom>
         상품 목록 (이미지 카드)
       </Typography>
-      <Shop.Components.Features.ProductImageCardList category_group="2025" category="티셔츠" />
+      <ProductImageCardList category_group="2025" category="티셔츠" />
       <Divider />
       <Typography variant="h5" gutterBottom>
         장바구니
       </Typography>
-      <Shop.Components.Features.CartStatus />
+      <CartStatus />
       <Divider />
       <Typography variant="h5" gutterBottom>
         주문 내역
       </Typography>
-      <Shop.Components.Features.OrderList />
+      <OrderList />
     </Stack>
   </Stack>
 );
diff --git a/apps/pyconkr-2025/src/main.tsx b/apps/pyconkr-2025/src/main.tsx
index eef13e6..c0c0d3b 100644
--- a/apps/pyconkr-2025/src/main.tsx
+++ b/apps/pyconkr-2025/src/main.tsx
@@ -1,14 +1,16 @@
 import { Global } from "@emotion/react";
-import { Components, Utils } from "@frontend/common";
-import type { ContextOptions } from "@frontend/common/src/contexts";
-import * as Shop from "@frontend/shop";
+import { CenteredPage, CommonContextProvider, ErrorFallback } from "@frontend/common/components";
+import type { ContextOptions } from "@frontend/common/contexts";
+import { registerChunkLoadErrorReloadHandler } from "@frontend/common/utils";
+import { ShopContextProvider } from "@frontend/shop/components/common";
+import { ContextOptions as ShopContextOptions } from "@frontend/shop/contexts";
 import { CircularProgress, CssBaseline, ThemeProvider } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { matchQuery, MutationCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { SnackbarProvider } from "notistack";
-import * as React from "react";
-import * as ReactDom from "react-dom/client";
+import { FC, StrictMode, useState } from "react";
+import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
 import { App } from "./App.tsx";
@@ -55,7 +57,7 @@ const CommonOptions: ContextOptions = {
   mdxComponents: PyConKRMDXComponents,
 };
 
-const ShopOptions: Shop.Contexts.ContextOptions = {
+const ShopOptions: ShopContextOptions = {
   language: "ko",
   shopApiDomain: import.meta.env.VITE_PYCONKR_SHOP_API_DOMAIN,
   shopApiCSRFCookieName: import.meta.env.VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME,
@@ -64,13 +66,13 @@ const ShopOptions: Shop.Contexts.ContextOptions = {
 };
 
 const SuspenseFallback = (
-  <Components.CenteredPage>
+  <CenteredPage>
     <CircularProgress />
-  </Components.CenteredPage>
+  </CenteredPage>
 );
 
-const MainApp: React.FC = () => {
-  const [appState, setAppContext] = React.useState<Omit<AppContextType, "setAppContext">>({
+export const MainApp: FC = () => {
+  const [appState, setAppContext] = useState<Omit<AppContextType, "setAppContext">>({
     language: (localStorage.getItem(LOCAL_STORAGE_LANGUAGE_KEY) as "ko" | "en" | null) ?? "ko",
     shouldShowTitleBanner: true,
     shouldShowSponsorBanner: false,
@@ -81,15 +83,15 @@ const MainApp: React.FC = () => {
   });
 
   return (
-    <React.StrictMode>
+    <StrictMode>
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools initialIsOpen={false} />
         <SnackbarProvider>
           <BrowserRouter>
             <AppContext.Provider value={{ ...appState, setAppContext }}>
-              <Components.CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
-                <Shop.Components.Common.ShopContextProvider options={{ ...ShopOptions, language: appState.language }}>
-                  <ErrorBoundary fallback={Components.ErrorFallback}>
+              <CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
+                <ShopContextProvider options={{ ...ShopOptions, language: appState.language }}>
+                  <ErrorBoundary fallback={ErrorFallback}>
                     <Suspense fallback={SuspenseFallback}>
                       <ThemeProvider theme={muiTheme}>
                         <CssBaseline />
@@ -98,16 +100,16 @@ const MainApp: React.FC = () => {
                       </ThemeProvider>
                     </Suspense>
                   </ErrorBoundary>
-                </Shop.Components.Common.ShopContextProvider>
-              </Components.CommonContextProvider>
+                </ShopContextProvider>
+              </CommonContextProvider>
             </AppContext.Provider>
           </BrowserRouter>
         </SnackbarProvider>
       </QueryClientProvider>
-    </React.StrictMode>
+    </StrictMode>
   );
 };
 
-Utils.registerChunkLoadErrorReloadHandler();
+registerChunkLoadErrorReloadHandler();
 
-ReactDom.createRoot(document.getElementById("root")!).render(<MainApp />);
+createRoot(document.getElementById("root")!).render(<MainApp />);
diff --git a/apps/pyconkr-2025/tsconfig.json b/apps/pyconkr-2025/tsconfig.json
index 2eacc5e..ff99f6e 100644
--- a/apps/pyconkr-2025/tsconfig.json
+++ b/apps/pyconkr-2025/tsconfig.json
@@ -1,32 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "forceConsistentCasingInFileNames": false,
-
-    /* Paths */
-    "baseUrl": ".",
-    "paths": {
-      "@apps/pyconkr-2025/*": ["apps/pyconkr-2025/src/*"],
-    }
-  },
-  "include": ["src", "vite.config.mts", "vite-env.d.ts", "../../types"],
+  "extends": "../../tsconfig.base.json",
+  "include": ["src", "vite.config.mts", "vite-env.d.ts", "../../types"]
 }
diff --git a/apps/pyconkr-2025/vite.config.mts b/apps/pyconkr-2025/vite.config.mts
index 0be52a7..0026113 100644
--- a/apps/pyconkr-2025/vite.config.mts
+++ b/apps/pyconkr-2025/vite.config.mts
@@ -20,9 +20,8 @@ export default defineConfig(({ mode }) => {
     plugins: [react(), mdx(), ...(isLocalHttpBackend ? [] : [mkcert({ hosts: [host] })]), svgr()],
     resolve: {
       alias: {
-        "@frontend/common/src": path.resolve(__dirname, "../../packages/common/src"),
-        "@frontend/common": path.resolve(__dirname, "../../packages/common/src/index.ts"),
-        "@frontend/shop": path.resolve(__dirname, "../../packages/shop/src/index.ts"),
+        "@frontend/common": path.resolve(__dirname, "../../packages/common/src"),
+        "@frontend/shop": path.resolve(__dirname, "../../packages/shop/src"),
         "@apps/pyconkr-2025": path.resolve(__dirname, "./src"),
       },
     },
diff --git a/apps/pyconkr-2026/src/App.tsx b/apps/pyconkr-2026/src/App.tsx
index 051811e..ad96358 100644
--- a/apps/pyconkr-2026/src/App.tsx
+++ b/apps/pyconkr-2026/src/App.tsx
@@ -1,9 +1,9 @@
-import { useBackendClient, useFlattenSiteMapQuery, useSponsorQuery } from "@frontend/common/src/hooks/useAPI";
-import * as BackendAPISchemas from "@frontend/common/src/schemas/backendAPI";
-import { buildNestedSiteMap } from "@frontend/common/src/utils";
-import * as React from "react";
+import { useBackendClient, useFlattenSiteMapQuery, useSponsorQuery } from "@frontend/common/hooks/useAPI";
+import { NestedSiteMapSchema } from "@frontend/common/schemas/backendAPI";
+import { buildNestedSiteMap } from "@frontend/common/utils";
+import { FC, useEffect } from "react";
 import { Route, Routes, useLocation } from "react-router-dom";
-import * as R from "remeda";
+import { isEmpty, isNullish } from "remeda";
 
 import MainLayout from "./components/layout/index.tsx";
 import { PageIdParamRenderer, RouteRenderer } from "./components/pages/dynamic_route.tsx";
@@ -12,7 +12,7 @@ import { ShopSignInPage } from "./components/pages/sign_in.tsx";
 import { SponsorDetailPage } from "./components/pages/sponsor_detail.tsx";
 import { useAppContext } from "./contexts/app_context";
 
-export const App: React.FC = () => {
+export const App: FC = () => {
   const backendAPIClient = useBackendClient();
   const { data: sponsorTiers } = useSponsorQuery(backendAPIClient);
   const { data: flatSiteMap } = useFlattenSiteMapQuery(backendAPIClient);
@@ -21,17 +21,17 @@ export const App: React.FC = () => {
   const location = useLocation();
   const { setAppContext, language } = useAppContext();
 
-  React.useEffect(() => {
+  useEffect(() => {
     (async () => {
-      const currentRouteCodes = ["", ...location.pathname.split("/").filter((code) => !R.isEmpty(code))];
-      const currentSiteMapDepth: (BackendAPISchemas.NestedSiteMapSchema | undefined)[] = [siteMapNode];
+      const currentRouteCodes = ["", ...location.pathname.split("/").filter((code) => !isEmpty(code))];
+      const currentSiteMapDepth: (NestedSiteMapSchema | undefined)[] = [siteMapNode];
 
       for (const routeCode of currentRouteCodes.splice(1)) {
         const childrenMap = currentSiteMapDepth
           .at(-1)
-          ?.children?.reduce((acc, child) => ({ ...acc, [child.route_code]: child }), {} as Record<string, BackendAPISchemas.NestedSiteMapSchema>);
+          ?.children?.reduce((acc, child) => ({ ...acc, [child.route_code]: child }), {} as Record<string, NestedSiteMapSchema>);
         currentSiteMapDepth.push(childrenMap?.[routeCode]);
-        if (R.isNullish(currentSiteMapDepth.at(-1))) {
+        if (isNullish(currentSiteMapDepth.at(-1))) {
           console.warn(`Route not found in site map: ${routeCode}`);
           break;
         }
diff --git a/apps/pyconkr-2026/src/components/layout/BreadCrumb/index.tsx b/apps/pyconkr-2026/src/components/layout/BreadCrumb/index.tsx
index 483b786..caa7198 100644
--- a/apps/pyconkr-2026/src/components/layout/BreadCrumb/index.tsx
+++ b/apps/pyconkr-2026/src/components/layout/BreadCrumb/index.tsx
@@ -1,23 +1,21 @@
+import { NestedSiteMapSchema } from "@frontend/common/schemas/backendAPI";
 import { Stack, styled } from "@mui/material";
-import * as React from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
-import * as R from "remeda";
-
-import { NestedSiteMapSchema } from "../../../../../../packages/common/src/schemas/backendAPI";
-
+import { isNonNullish } from "remeda";
 type BreadCrumbPropType = {
   title: string;
   parentSiteMaps: (NestedSiteMapSchema | undefined)[];
 };
 
-export const BreadCrumb: React.FC<BreadCrumbPropType> = ({ title, parentSiteMaps }) => {
+export const BreadCrumb: FC<BreadCrumbPropType> = ({ title, parentSiteMaps }) => {
   let route = "/";
   return (
     <BreadCrumbContainer>
       <BreadcrumbPathContainer direction="row" alignItems="center">
         {parentSiteMaps
           .slice(1, -1)
-          .filter((routeInfo) => R.isNonNullish(routeInfo))
+          .filter((routeInfo) => isNonNullish(routeInfo))
           .map(({ route_code, name }, index) => {
             route += `${route_code}/`;
             return (
diff --git a/apps/pyconkr-2026/src/components/layout/CartBadgeButton/index.tsx b/apps/pyconkr-2026/src/components/layout/CartBadgeButton/index.tsx
index c18e20c..b3ac586 100644
--- a/apps/pyconkr-2026/src/components/layout/CartBadgeButton/index.tsx
+++ b/apps/pyconkr-2026/src/components/layout/CartBadgeButton/index.tsx
@@ -1,8 +1,8 @@
-import * as Shop from "@frontend/shop";
+import { useCart, useShopClient } from "@frontend/shop/hooks";
 import { ShoppingCart } from "@mui/icons-material";
 import { Badge, badgeClasses, IconButton, styled } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC } from "react";
 import { useNavigate } from "react-router-dom";
 
 type InnerCartBadgeButtonPropType = {
@@ -19,7 +19,7 @@ const ColoredIconButton = styled(IconButton)(({ theme }) => ({
 
 const InnerCartBadge = styled(Badge)({ [`& .${badgeClasses.badge}`]: { top: "-12px", right: "-3px" } });
 
-const InnerCartBadgeButton: React.FC<InnerCartBadgeButtonPropType> = ({ loading, count }) => {
+const InnerCartBadgeButton: FC<InnerCartBadgeButtonPropType> = ({ loading, count }) => {
   const navigate = useNavigate();
 
   return (
@@ -30,11 +30,11 @@ const InnerCartBadgeButton: React.FC<InnerCartBadgeButtonPropType> = ({ loading,
   );
 };
 
-export const CartBadgeButton: React.FC = Suspense.with(
+export const CartBadgeButton: FC = Suspense.with(
   { fallback: <InnerCartBadgeButton loading /> },
   ErrorBoundary.with({ fallback: <InnerCartBadgeButton /> }, () => {
-    const shopAPIClient = Shop.Hooks.useShopClient();
-    const { data: cart } = Shop.Hooks.useCart(shopAPIClient);
+    const shopAPIClient = useShopClient();
+    const { data: cart } = useCart(shopAPIClient);
     return <InnerCartBadgeButton count={cart?.products.length} loading={false} />;
   })
 );
diff --git a/apps/pyconkr-2026/src/components/layout/Footer/Mobile/MobileFooter.tsx b/apps/pyconkr-2026/src/components/layout/Footer/Mobile/MobileFooter.tsx
index 2eb9368..39ac2b7 100644
--- a/apps/pyconkr-2026/src/components/layout/Footer/Mobile/MobileFooter.tsx
+++ b/apps/pyconkr-2026/src/components/layout/Footer/Mobile/MobileFooter.tsx
@@ -1,14 +1,13 @@
 import styled from "@emotion/styled";
-import { useEmail } from "@frontend/common/src/hooks/useEmail";
+import { useEmail } from "@frontend/common/hooks/useEmail";
 import { Article, Email, Facebook, GitHub, Instagram, LinkedIn, X, YouTube } from "@mui/icons-material";
-import * as React from "react";
+import { FC } from "react";
 
 import FlickrIcon from "@apps/pyconkr-2026/assets/thirdparty/flickr.svg?react";
-
-import { useAppContext } from "../../../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
 
 interface IconItem {
-  icon: React.FC<{ width?: number; height?: number }>;
+  icon: FC<{ width?: number; height?: number }>;
   alt: string;
   href: string;
 }
diff --git a/apps/pyconkr-2026/src/components/layout/Footer/index.tsx b/apps/pyconkr-2026/src/components/layout/Footer/index.tsx
index a010177..65538fa 100644
--- a/apps/pyconkr-2026/src/components/layout/Footer/index.tsx
+++ b/apps/pyconkr-2026/src/components/layout/Footer/index.tsx
@@ -1,16 +1,16 @@
 import styled from "@emotion/styled";
-import { useEmail } from "@frontend/common/src/hooks/useEmail";
+import { useEmail } from "@frontend/common/hooks/useEmail";
 import { Article, Email, Facebook, GitHub, Instagram, LinkedIn, OpenInNew, X, YouTube } from "@mui/icons-material";
 import { Button, useMediaQuery, useTheme } from "@mui/material";
-import * as React from "react";
+import { FC, Fragment } from "react";
 
 import FlickrIcon from "@apps/pyconkr-2026/assets/thirdparty/flickr.svg?react";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
 
-import { useAppContext } from "../../../contexts/app_context";
 import MobileFooter from "./Mobile/MobileFooter";
 
 interface IconItem {
-  icon: React.FC<{ width?: number; height?: number }>;
+  icon: FC<{ width?: number; height?: number }>;
   alt: string;
   href: string;
 }
@@ -46,7 +46,7 @@ const defaultIcons: IconItem[] = [
   },
 ];
 
-const Bar: React.FC = () => <div style={{ display: "inline-block", padding: "0 0.25rem" }}>|</div>;
+const Bar: FC = () => <div style={{ display: "inline-block", padding: "0 0.25rem" }}>|</div>;
 
 export default function Footer() {
   const { sendEmail } = useEmail();
@@ -117,12 +117,12 @@ export default function Footer() {
         </FooterText>
         <FooterLinks>
           {links.map((link, index) => (
-            <React.Fragment key={index}>
+            <Fragment key={index}>
               <Link key={link.text} href={link.href}>
                 {link.text}
               </Link>
               {index < links.length - 1 && <Separator>|</Separator>}
-            </React.Fragment>
+            </Fragment>
           ))}
         </FooterLinks>
         <FooterIcons>
diff --git a/apps/pyconkr-2026/src/components/layout/Header/Mobile/HamburgerButton.tsx b/apps/pyconkr-2026/src/components/layout/Header/Mobile/HamburgerButton.tsx
index 18f90b5..39ea37b 100644
--- a/apps/pyconkr-2026/src/components/layout/Header/Mobile/HamburgerButton.tsx
+++ b/apps/pyconkr-2026/src/components/layout/Header/Mobile/HamburgerButton.tsx
@@ -1,12 +1,11 @@
 import { IconButton, styled } from "@mui/material";
-import * as React from "react";
-
+import { FC } from "react";
 interface HamburgerButtonProps {
   isOpen: boolean;
   onClick: () => void;
 }
 
-export const HamburgerButton: React.FC<HamburgerButtonProps> = ({ isOpen, onClick }) => {
+export const HamburgerButton: FC<HamburgerButtonProps> = ({ isOpen, onClick }) => {
   return (
     <StyledIconButton onClick={onClick}>
       <HamburgerIcon isOpen={isOpen}>
diff --git a/apps/pyconkr-2026/src/components/layout/Header/Mobile/MobileHeader.tsx b/apps/pyconkr-2026/src/components/layout/Header/Mobile/MobileHeader.tsx
index 98c5f1c..ff6a501 100644
--- a/apps/pyconkr-2026/src/components/layout/Header/Mobile/MobileHeader.tsx
+++ b/apps/pyconkr-2026/src/components/layout/Header/Mobile/MobileHeader.tsx
@@ -1,16 +1,17 @@
-import { Components } from "@frontend/common";
+import { PythonKorea } from "@frontend/common/components";
 import { Box, Stack, styled, Typography } from "@mui/material";
-import * as React from "react";
+import { FC, useState } from "react";
 import { Link } from "react-router-dom";
 
+import LanguageSelector from "@apps/pyconkr-2026/components/layout/LanguageSelector";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
+
 import { HamburgerButton } from "./HamburgerButton";
 import { MobileNavigation } from "./MobileNavigation";
-import LanguageSelector from "../../LanguageSelector";
-import { useAppContext } from "../../../../contexts/app_context";
 
-export const MobileHeader: React.FC = () => {
+export const MobileHeader: FC = () => {
   const { siteMapNode } = useAppContext();
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
@@ -19,7 +20,7 @@ export const MobileHeader: React.FC = () => {
           <HamburgerButton isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} />
           <Link to="/" style={{ textDecoration: "none" }}>
             <Stack direction="row" alignItems="center" spacing={0.5}>
-              <Components.PythonKorea style={{ width: 28, height: 28 }} />
+              <PythonKorea style={{ width: 28, height: 28 }} />
               <Typography variant="h6" sx={{ color: "#ededde", fontSize: 17, fontWeight: 600 }}>
                 파이콘 한국 2026
               </Typography>
diff --git a/apps/pyconkr-2026/src/components/layout/Header/Mobile/MobileNavigation.tsx b/apps/pyconkr-2026/src/components/layout/Header/Mobile/MobileNavigation.tsx
index 7848de4..f398446 100644
--- a/apps/pyconkr-2026/src/components/layout/Header/Mobile/MobileNavigation.tsx
+++ b/apps/pyconkr-2026/src/components/layout/Header/Mobile/MobileNavigation.tsx
@@ -1,15 +1,16 @@
-import { Components } from "@frontend/common";
-import * as BackendAPISchemas from "@frontend/common/src/schemas/backendAPI";
+import { PythonKorea } from "@frontend/common/components";
+import { NestedSiteMapSchema } from "@frontend/common/schemas/backendAPI";
 import { ArrowBack, ArrowForward } from "@mui/icons-material";
 import { Box, Button, Chip, Drawer, IconButton, Stack, styled } from "@mui/material";
-import * as React from "react";
+import { FC, useState } from "react";
 import { Link } from "react-router-dom";
-import * as R from "remeda";
+import { isEmpty } from "remeda";
+
+import LanguageSelector from "@apps/pyconkr-2026/components/layout/LanguageSelector";
 
 import { HamburgerButton } from "./HamburgerButton";
-import LanguageSelector from "../../LanguageSelector";
 
-type MenuType = BackendAPISchemas.NestedSiteMapSchema;
+type MenuType = NestedSiteMapSchema;
 
 interface MobileNavigationProps {
   isOpen: boolean;
@@ -26,8 +27,8 @@ interface NavigationState {
   breadcrumbs: { name: string; level: NavigationLevel }[];
 }
 
-export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onClose, siteMapNode }) => {
-  const [navState, setNavState] = React.useState<NavigationState>({ level: "depth1", breadcrumbs: [] });
+export const MobileNavigation: FC<MobileNavigationProps> = ({ isOpen, onClose, siteMapNode }) => {
+  const [navState, setNavState] = useState<NavigationState>({ level: "depth1", breadcrumbs: [] });
 
   const resetNavigation = () => setNavState({ level: "depth1", breadcrumbs: [] });
 
@@ -65,14 +66,14 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
           .filter((s) => !s.hide)
           .map((menu) => (
             <MenuItem key={menu.id}>
-              {!R.isEmpty(menu.children) && Object.values(menu.children).some((c) => !c.hide) ? (
+              {!isEmpty(menu.children) && Object.values(menu.children).some((c) => !c.hide) ? (
                 <MenuButton onClick={() => navigateToDepth2(menu)}>{menu.name}</MenuButton>
               ) : (
                 <MenuLink to={menu.route_code} onClick={handleClose}>
                   {menu.name}
                 </MenuLink>
               )}
-              {!R.isEmpty(menu.children) && Object.values(menu.children).some((c) => !c.hide) && (
+              {!isEmpty(menu.children) && Object.values(menu.children).some((c) => !c.hide) && (
                 <MenuArrowButton onClick={() => navigateToDepth2(menu)}>
                   <ArrowForward fontSize="small" />
                 </MenuArrowButton>
@@ -102,7 +103,7 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
                 <Link to={`${navState.depth1!.route_code}/${menu.route_code}`} onClick={handleClose} style={{ textDecoration: "none" }}>
                   <MenuChip label={menu.name} clickable />
                 </Link>
-                {!R.isEmpty(menu.children) && Object.values(menu.children).some((c) => !c.hide) && (
+                {!isEmpty(menu.children) && Object.values(menu.children).some((c) => !c.hide) && (
                   <MenuArrowButton onClick={() => navigateToDepth3(menu)}>
                     <ArrowForward fontSize="small" />
                   </MenuArrowButton>
@@ -150,7 +151,7 @@ export const MobileNavigation: React.FC<MobileNavigationProps> = ({ isOpen, onCl
           <HamburgerButton isOpen={true} onClick={handleClose} />
           <Link to="/" onClick={handleClose} style={{ textDecoration: "none" }}>
             <Stack direction="row" alignItems="center" spacing={0.5}>
-              <Components.PythonKorea style={{ width: 28, height: 28 }} />
+              <PythonKorea style={{ width: 28, height: 28 }} />
               <HeaderTitle>파이콘 한국 2026</HeaderTitle>
             </Stack>
           </Link>
diff --git a/apps/pyconkr-2026/src/components/layout/Header/index.tsx b/apps/pyconkr-2026/src/components/layout/Header/index.tsx
index b9da072..7d274d3 100644
--- a/apps/pyconkr-2026/src/components/layout/Header/index.tsx
+++ b/apps/pyconkr-2026/src/components/layout/Header/index.tsx
@@ -1,14 +1,15 @@
-import { Components } from "@frontend/common";
+import { PythonKorea } from "@frontend/common/components";
+import { NestedSiteMapSchema } from "@frontend/common/schemas/backendAPI";
 import { ArrowForwardIos } from "@mui/icons-material";
 import { Box, Button, CircularProgress, Divider, Stack, styled, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { MUIStyledCommonProps } from "@mui/system";
-import * as React from "react";
+import { CSSProperties, Fragment, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import * as R from "remeda";
+import { isEmpty, isNonNullish, isString } from "remeda";
+
+import LanguageSelector from "@apps/pyconkr-2026/components/layout/LanguageSelector";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
 
-import { NestedSiteMapSchema } from "../../../../../../packages/common/src/schemas/backendAPI";
-import { useAppContext } from "../../../contexts/app_context";
-import LanguageSelector from "../LanguageSelector";
 import { MobileHeader } from "./Mobile/MobileHeader";
 
 type MenuType = NestedSiteMapSchema;
@@ -20,14 +21,14 @@ type NavigationStateType = {
   depth3?: MenuType;
 };
 
-const HeaderHeight: React.CSSProperties["height"] = "3.625rem";
-const BreadCrumbHeight: React.CSSProperties["height"] = "4.5rem";
+const HeaderHeight: CSSProperties["height"] = "3.625rem";
+const BreadCrumbHeight: CSSProperties["height"] = "4.5rem";
 
 export default function Header() {
   const { title, language, siteMapNode, currentSiteMapDepth, shouldShowTitleBanner } = useAppContext();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-  const [navState, setNavState] = React.useState<NavigationStateType>({});
+  const [navState, setNavState] = useState<NavigationStateType>({});
 
   const resetDepths = () => setNavState({});
   const setDepth1 = (depth1: MenuOrUndefinedType) => setNavState({ depth1 });
@@ -37,13 +38,13 @@ export default function Header() {
   const getDepth2Route = (nextRoute?: string) => (navState.depth1?.route_code || "") + `/${nextRoute || ""}`;
   const getDepth3Route = (nextRoute?: string) => getDepth2Route(navState.depth2?.route_code) + `/${nextRoute || ""}`;
 
-  React.useEffect(resetDepths, [language]);
+  useEffect(resetDepths, [language]);
 
   if (isMobile) return <MobileHeader />;
 
   let breadCrumbRoute = "";
   let breadCrumbArray = currentSiteMapDepth.slice(1, -1);
-  if (R.isEmpty(breadCrumbArray)) breadCrumbArray = currentSiteMapDepth.slice(0, -1);
+  if (isEmpty(breadCrumbArray)) breadCrumbArray = currentSiteMapDepth.slice(0, -1);
 
   const headerStyle: SxProps<Theme> = shouldShowTitleBanner ? {} : { backgroundColor: "transparent" };
 
@@ -53,7 +54,7 @@ export default function Header() {
         <NavSideElementContainer>
           <Link to="/" onClick={resetDepths}>
             <Stack direction="row" alignItems="center" spacing={0.75}>
-              <Components.PythonKorea style={{ width: 36, height: 36 }} />
+              <PythonKorea style={{ width: 36, height: 36 }} />
               <Typography className="header-title-text" sx={{ color: "#ededde", fontWeight: 600, fontSize: "1rem", letterSpacing: "0.01em" }}>
                 PyCon Korea 2026
               </Typography>
@@ -69,8 +70,8 @@ export default function Header() {
                 <Link
                   key={r.id}
                   onClick={resetDepths}
-                  target={R.isString(r.external_link) ? "_blank" : undefined}
-                  rel={R.isString(r.external_link) ? "noopener noreferrer" : undefined}
+                  target={isString(r.external_link) ? "_blank" : undefined}
+                  rel={isString(r.external_link) ? "noopener noreferrer" : undefined}
                   to={r.external_link || r.route_code}
                 >
                   <NavButton onMouseEnter={() => setDepth1(r)} isActive={navState.depth1?.id === r.id}>
@@ -105,9 +106,9 @@ export default function Header() {
                       className={r.id === navState.depth2?.id ? "active" : ""}
                       onClick={resetDepths}
                       onMouseEnter={() => setDepth2(r)}
-                      onMouseLeave={() => R.isEmpty(navState.depth2?.children ?? {}) && setDepth2(undefined)}
-                      target={R.isString(r.external_link) ? "_blank" : undefined}
-                      rel={R.isString(r.external_link) ? "noopener noreferrer" : undefined}
+                      onMouseLeave={() => isEmpty(navState.depth2?.children ?? {}) && setDepth2(undefined)}
+                      target={isString(r.external_link) ? "_blank" : undefined}
+                      rel={isString(r.external_link) ? "noopener noreferrer" : undefined}
                       to={r.external_link || getDepth2Route(r.route_code)}
                     >
                       {r.name}
@@ -115,7 +116,7 @@ export default function Header() {
                   ))}
               </Stack>
 
-              {navState.depth2 && !R.isEmpty(navState.depth2.children) && (
+              {navState.depth2 && !isEmpty(navState.depth2.children) && (
                 <>
                   <Depth2to3Divider orientation="vertical" flexItem />
                   <Stack spacing={1.5}>
@@ -128,8 +129,8 @@ export default function Header() {
                           onClick={resetDepths}
                           onMouseEnter={() => setDepth3(r)}
                           onMouseLeave={() => setDepth3(undefined)}
-                          target={R.isString(r.external_link) ? "_blank" : undefined}
-                          rel={R.isString(r.external_link) ? "noopener noreferrer" : undefined}
+                          target={isString(r.external_link) ? "_blank" : undefined}
+                          rel={isString(r.external_link) ? "noopener noreferrer" : undefined}
                           to={r.external_link || getDepth3Route(r?.route_code)}
                         >
                           {r.name}
@@ -148,14 +149,14 @@ export default function Header() {
           <BreadCrumbContainer>
             <Stack direction="row" alignItems="center" spacing={0.5}>
               {breadCrumbArray
-                .filter((routeInfo) => R.isNonNullish(routeInfo))
+                .filter((routeInfo) => isNonNullish(routeInfo))
                 .map(({ route_code, name }, index) => {
                   breadCrumbRoute += `${route_code}/`;
                   return (
-                    <React.Fragment key={index}>
+                    <Fragment key={index}>
                       {index > 0 && <ArrowForwardIos sx={{ fontSize: "0.75rem", color: "rgba(237,94,189,0.6)" }} />}
                       <Link to={breadCrumbRoute} children={name} />
-                    </React.Fragment>
+                    </Fragment>
                   );
                 })}
             </Stack>
diff --git a/apps/pyconkr-2026/src/components/layout/LanguageSelector/index.tsx b/apps/pyconkr-2026/src/components/layout/LanguageSelector/index.tsx
index 5535802..92b4f55 100644
--- a/apps/pyconkr-2026/src/components/layout/LanguageSelector/index.tsx
+++ b/apps/pyconkr-2026/src/components/layout/LanguageSelector/index.tsx
@@ -1,8 +1,8 @@
 import { Language } from "@mui/icons-material";
 import { Button, Stack, styled } from "@mui/material";
 
-import { LOCAL_STORAGE_LANGUAGE_KEY } from "../../../consts/local_stroage";
-import { useAppContext } from "../../../contexts/app_context";
+import { LOCAL_STORAGE_LANGUAGE_KEY } from "@apps/pyconkr-2026/consts/local_stroage";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
 
 export default function LanguageSelector() {
   const { language, setAppContext } = useAppContext();
diff --git a/apps/pyconkr-2026/src/components/layout/SignInButton/index.tsx b/apps/pyconkr-2026/src/components/layout/SignInButton/index.tsx
index 7996129..b965837 100644
--- a/apps/pyconkr-2026/src/components/layout/SignInButton/index.tsx
+++ b/apps/pyconkr-2026/src/components/layout/SignInButton/index.tsx
@@ -1,10 +1,10 @@
-import * as Shop from "@frontend/shop";
+import { useShopClient, useSignOutMutation, useUserStatus } from "@frontend/shop/hooks";
 import { Login, Logout } from "@mui/icons-material";
 import { Button, Stack } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useNavigate } from "react-router-dom";
 
-import { useAppContext } from "../../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
 
 type InnerSignInButtonImplPropType = {
   loading?: boolean;
@@ -77,29 +77,28 @@ const InnerSignInButtonImpl: React.FC<InnerSignInButtonImplPropType> = ({
   );
 };
 
-export const SignInButton: React.FC<{ isMobile?: boolean; isMainPath?: boolean; onClose?: () => void }> = ({
-  isMobile = false,
-  isMainPath = true,
-  onClose,
-}) => {
-  const SignInWithErrorBoundary = ErrorBoundary.with(
-    { fallback: <InnerSignInButtonImpl isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} /> },
-    Suspense.with({ fallback: <InnerSignInButtonImpl loading isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} /> }, () => {
-      const shopAPIClient = Shop.Hooks.useShopClient();
-      const signOutMutation = Shop.Hooks.useSignOutMutation(shopAPIClient);
-      const { data } = Shop.Hooks.useUserStatus(shopAPIClient);
+type SignInButtonProps = { isMobile?: boolean; isMainPath?: boolean; onClose?: () => void };
 
-      return (
-        <InnerSignInButtonImpl
-          signedIn={data !== null}
-          onSignOut={signOutMutation.mutate}
-          isMobile={isMobile}
-          isMainPath={isMainPath}
-          onClose={onClose}
-        />
-      );
-    })
-  );
+const SignInButtonContent: React.FC<SignInButtonProps> = ({ isMobile, isMainPath, onClose }) => {
+  const shopAPIClient = useShopClient();
+  const signOutMutation = useSignOutMutation(shopAPIClient);
+  const { data } = useUserStatus(shopAPIClient);
 
-  return <SignInWithErrorBoundary />;
+  return (
+    <InnerSignInButtonImpl
+      signedIn={data !== null}
+      onSignOut={signOutMutation.mutate}
+      isMobile={isMobile}
+      isMainPath={isMainPath}
+      onClose={onClose}
+    />
+  );
 };
+
+export const SignInButton: React.FC<SignInButtonProps> = ({ isMobile = false, isMainPath = true, onClose }) => (
+  <ErrorBoundary fallback={<InnerSignInButtonImpl isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} />}>
+    <Suspense fallback={<InnerSignInButtonImpl loading isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} />}>
+      <SignInButtonContent isMobile={isMobile} isMainPath={isMainPath} onClose={onClose} />
+    </Suspense>
+  </ErrorBoundary>
+);
diff --git a/apps/pyconkr-2026/src/components/layout/Sponsor/index.tsx b/apps/pyconkr-2026/src/components/layout/Sponsor/index.tsx
index 547c2ba..f999319 100644
--- a/apps/pyconkr-2026/src/components/layout/Sponsor/index.tsx
+++ b/apps/pyconkr-2026/src/components/layout/Sponsor/index.tsx
@@ -2,7 +2,7 @@ import { Badge, CircularProgress, Divider, Stack, Tooltip, Typography, Typograph
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { Link } from "react-router-dom";
 
-import { useAppContext } from "../../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
 
 const LogoHeight: React.CSSProperties["height"] = "8rem";
 const LogoWidth: React.CSSProperties["width"] = "15rem";
diff --git a/apps/pyconkr-2026/src/components/layout/UserScanCodeButton/index.tsx b/apps/pyconkr-2026/src/components/layout/UserScanCodeButton/index.tsx
index 3a26bf0..83af57f 100644
--- a/apps/pyconkr-2026/src/components/layout/UserScanCodeButton/index.tsx
+++ b/apps/pyconkr-2026/src/components/layout/UserScanCodeButton/index.tsx
@@ -1,16 +1,16 @@
-import * as Shop from "@frontend/shop";
+import { useShopClient, useUserInfo } from "@frontend/shop/hooks";
 import { QrCode2 } from "@mui/icons-material";
 import { Button, IconButton, IconButtonProps } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, Fragment } from "react";
 
-import { useAppContext } from "../../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
 
-export const ScanCodeIconButton: React.FC<{ sx?: IconButtonProps["sx"] }> = Suspense.with(
-  { fallback: <React.Fragment /> },
-  ErrorBoundary.with({ fallback: <React.Fragment /> }, ({ sx }) => {
-    const shopAPIClient = Shop.Hooks.useShopClient();
-    const { data } = Shop.Hooks.useUserInfo(shopAPIClient);
+export const ScanCodeIconButton: FC<{ sx?: IconButtonProps["sx"] }> = Suspense.with(
+  { fallback: <Fragment /> },
+  ErrorBoundary.with({ fallback: <Fragment /> }, ({ sx }) => {
+    const shopAPIClient = useShopClient();
+    const { data } = useUserInfo(shopAPIClient);
 
     const iconBtnStyle: IconButtonProps["sx"] = (theme) => ({
       color: theme.palette.primary.nonFocus,
@@ -27,12 +27,12 @@ export const ScanCodeIconButton: React.FC<{ sx?: IconButtonProps["sx"] }> = Susp
   })
 );
 
-export const ScanCodeButton: React.FC = Suspense.with(
+export const ScanCodeButton: FC = Suspense.with(
   { fallback: null },
   ErrorBoundary.with({ fallback: null }, () => {
     const { language } = useAppContext();
-    const shopAPIClient = Shop.Hooks.useShopClient();
-    const { data } = Shop.Hooks.useUserInfo(shopAPIClient);
+    const shopAPIClient = useShopClient();
+    const { data } = useUserInfo(shopAPIClient);
 
     const buttonText = language === "ko" ? "등록 코드" : "Entrance QR Code";
 
diff --git a/apps/pyconkr-2026/src/components/layout/index.tsx b/apps/pyconkr-2026/src/components/layout/index.tsx
index f86462c..017190c 100644
--- a/apps/pyconkr-2026/src/components/layout/index.tsx
+++ b/apps/pyconkr-2026/src/components/layout/index.tsx
@@ -2,7 +2,8 @@ import styled from "@emotion/styled";
 import { Stack } from "@mui/material";
 import { Outlet } from "react-router-dom";
 
-import { useAppContext } from "../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
+
 import Footer from "./Footer";
 import Header from "./Header";
 import { Sponsor } from "./Sponsor";
diff --git a/apps/pyconkr-2026/src/components/pages/dynamic_route.tsx b/apps/pyconkr-2026/src/components/pages/dynamic_route.tsx
index 1fd2246..7d3c3dd 100644
--- a/apps/pyconkr-2026/src/components/pages/dynamic_route.tsx
+++ b/apps/pyconkr-2026/src/components/pages/dynamic_route.tsx
@@ -1,19 +1,19 @@
-import { Components } from "@frontend/common";
-import { useBackendClient, usePageQuery } from "@frontend/common/src/hooks/useAPI";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
-import { parseCss } from "@frontend/common/src/utils";
-import { BackendAPIClientError } from "@frontend/common/src/apis";
+import { BackendAPIClientError } from "@frontend/common/apis";
+import { CenteredPage, ErrorFallback, MDXRenderer } from "@frontend/common/components";
+import { useBackendClient, usePageQuery } from "@frontend/common/hooks/useAPI";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
+import { parseCss } from "@frontend/common/utils";
 import { CircularProgress, Stack, Theme } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { AxiosError, AxiosResponse } from "axios";
-import * as React from "react";
+import { CSSProperties, FC, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import * as R from "remeda";
+import { isEmpty, isString } from "remeda";
 
-import { useAppContext } from "../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
 
-const initialPageStyle: (additionalStyle: React.CSSProperties) => (theme: Theme) => React.CSSProperties = (additionalStyle) => (theme) => ({
+const initialPageStyle: (additionalStyle: CSSProperties) => (theme: Theme) => CSSProperties = (additionalStyle) => (theme) => ({
   width: "100%",
   display: "flex",
   justifyContent: "flex-start",
@@ -22,7 +22,7 @@ const initialPageStyle: (additionalStyle: React.CSSProperties) => (theme: Theme)
 
   marginTop: theme.spacing(4),
 
-  ...(!R.isEmpty(additionalStyle)
+  ...(!isEmpty(additionalStyle)
     ? additionalStyle
     : {
         [theme.breakpoints.down("lg")]: {
@@ -34,7 +34,7 @@ const initialPageStyle: (additionalStyle: React.CSSProperties) => (theme: Theme)
       }),
 });
 
-const initialSectionStyle: (additionalStyle: React.CSSProperties) => (theme: Theme) => React.CSSProperties = (additionalStyle) => (theme) => ({
+const initialSectionStyle: (additionalStyle: CSSProperties) => (theme: Theme) => CSSProperties = (additionalStyle) => (theme) => ({
   width: "100%",
   maxWidth: "1200px",
   display: "flex",
@@ -44,7 +44,7 @@ const initialSectionStyle: (additionalStyle: React.CSSProperties) => (theme: The
   paddingLeft: theme.spacing(16),
 
   "& .markdown-body": { width: "100%" },
-  ...(!R.isEmpty(additionalStyle)
+  ...(!isEmpty(additionalStyle)
     ? additionalStyle
     : {
         [theme.breakpoints.down("lg")]: {
@@ -58,13 +58,13 @@ const initialSectionStyle: (additionalStyle: React.CSSProperties) => (theme: The
       }),
 });
 
-const LoginRequired: React.FC = () => <>401 Login Required</>;
-const PermissionDenied: React.FC = () => <>403 Permission Denied</>;
-const PageNotFound: React.FC = () => <>404 Not Found</>;
-const CenteredLoadingPage: React.FC = () => (
-  <Components.CenteredPage>
+const LoginRequired: FC = () => <>401 Login Required</>;
+const PermissionDenied: FC = () => <>403 Permission Denied</>;
+const PageNotFound: FC = () => <>404 Not Found</>;
+const CenteredLoadingPage: FC = () => (
+  <CenteredPage>
     <CircularProgress />
-  </Components.CenteredPage>
+  </CenteredPage>
 );
 
 const throwPageNotFound: (message: string) => never = (message) => {
@@ -75,7 +75,7 @@ const throwPageNotFound: (message: string) => never = (message) => {
   throw new BackendAPIClientError(axiosError);
 };
 
-const RouteErrorFallback: React.FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
+const RouteErrorFallback: FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
   if (error instanceof BackendAPIClientError) {
     switch (error.status) {
       case 401:
@@ -85,17 +85,17 @@ const RouteErrorFallback: React.FC<{ error: Error; reset: () => void }> = ({ err
       case 404:
         return <PageNotFound />;
       default:
-        return <Components.ErrorFallback error={error} reset={reset} />;
+        return <ErrorFallback error={error} reset={reset} />;
     }
   }
-  return <Components.ErrorFallback error={error} reset={reset} />;
+  return <ErrorFallback error={error} reset={reset} />;
 };
 
-const WaitedCenteredLoadingPage: React.FC = Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
-  const [isFetching, setIsFetching] = React.useState(true);
+const WaitedCenteredLoadingPage: FC = Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
+  const [isFetching, setIsFetching] = useState(true);
   const qClient = useQueryClient();
 
-  React.useEffect(() => {
+  useEffect(() => {
     const unsubscribe = qClient.getQueryCache().subscribe(() => setIsFetching(qClient.isFetching() > 0));
     return () => unsubscribe();
   }, [qClient]);
@@ -103,13 +103,13 @@ const WaitedCenteredLoadingPage: React.FC = Suspense.with({ fallback: <CenteredL
   return isFetching ? <CenteredLoadingPage /> : <PageNotFound />;
 });
 
-const InnerPageRenderer: React.FC<{ id: string }> = Suspense.with({ fallback: <CenteredLoadingPage /> }, ({ id }) => {
+const InnerPageRenderer: FC<{ id: string }> = Suspense.with({ fallback: <CenteredLoadingPage /> }, ({ id }) => {
   const { setAppContext } = useAppContext();
   const { baseUrl, mdxComponents } = useCommonContext();
   const backendClient = useBackendClient();
   const { data } = usePageQuery(backendClient, id);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setAppContext((prev) => ({
       ...prev,
       title: data.title,
@@ -122,33 +122,33 @@ const InnerPageRenderer: React.FC<{ id: string }> = Suspense.with({ fallback: <C
     <Stack sx={initialPageStyle(parseCss(data.css))}>
       {data.sections.map((s) => (
         <Stack sx={initialSectionStyle(parseCss(s.css))} key={s.id}>
-          <Components.MDXRenderer text={s.body} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
+          <MDXRenderer text={s.body} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </Stack>
       ))}
     </Stack>
   );
 });
 
-export const PageRenderer: React.FC<{ id: string }> = ({ id }) => (
+export const PageRenderer: FC<{ id: string }> = ({ id }) => (
   <ErrorBoundary fallback={RouteErrorFallback} resetKeys={[id]}>
     <InnerPageRenderer id={id} />
   </ErrorBoundary>
 );
 
-export const RouteRenderer: React.FC = ErrorBoundary.with(
+export const RouteRenderer: FC = ErrorBoundary.with(
   { fallback: RouteErrorFallback },
   Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
     const { siteMapNode, currentSiteMapDepth } = useAppContext();
-    const routeInfo = !R.isEmpty(currentSiteMapDepth) && currentSiteMapDepth[currentSiteMapDepth.length - 1];
+    const routeInfo = !isEmpty(currentSiteMapDepth) && currentSiteMapDepth[currentSiteMapDepth.length - 1];
 
     if (!(siteMapNode && routeInfo)) return <WaitedCenteredLoadingPage />;
-    if (R.isString(routeInfo.page)) return <PageRenderer id={routeInfo.page} />;
-    if (R.isString(routeInfo.external_link)) window.location.replace(routeInfo.external_link);
+    if (isString(routeInfo.page)) return <PageRenderer id={routeInfo.page} />;
+    if (isString(routeInfo.external_link)) window.location.replace(routeInfo.external_link);
     return <PageNotFound />;
   })
 );
 
-export const PageIdParamRenderer: React.FC = Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
+export const PageIdParamRenderer: FC = Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
   const { id } = useParams();
   if (!id) throwPageNotFound("Page ID is required");
   return <PageRenderer id={id} />;
diff --git a/apps/pyconkr-2026/src/components/pages/presentation_detail.tsx b/apps/pyconkr-2026/src/components/pages/presentation_detail.tsx
index eea07a4..60bb7d5 100644
--- a/apps/pyconkr-2026/src/components/pages/presentation_detail.tsx
+++ b/apps/pyconkr-2026/src/components/pages/presentation_detail.tsx
@@ -1,16 +1,16 @@
-import { Components } from "@frontend/common";
-import { useBackendClient, useSessionQuery } from "@frontend/common/src/hooks/useAPI";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+import PyCon2025Logo from "@frontend/common/assets/pyconkr2025_logo.png";
+import { CenteredPage, ErrorFallback, FallbackImage, LinkHandler, MDXRenderer } from "@frontend/common/components";
+import { useBackendClient, useSessionQuery } from "@frontend/common/hooks/useAPI";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
 import { Box, Chip, CircularProgress, Divider, Stack, styled, Table, TableBody, TableCell, TableRow, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { DateTime } from "luxon";
-import * as React from "react";
+import { CSSProperties, FC, useEffect } from "react";
 import { Navigate, useParams } from "react-router-dom";
-import * as R from "remeda";
+import { isString } from "remeda";
 
-import PyCon2025Logo from "../../../../../packages/common/src/assets/pyconkr2025_logo.png";
-import { useAppContext } from "../../contexts/app_context";
-import { PageLayout } from "../layout/PageLayout";
+import { PageLayout } from "@apps/pyconkr-2026/components/layout/PageLayout";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
 
 const PROFILE_IMAGE_SIZE = "7rem";
 
@@ -21,13 +21,13 @@ type SimplifiedSpeakerSchema = {
   biography: string;
 };
 
-const CenteredLoadingPage: React.FC = () => (
-  <Components.CenteredPage>
+const CenteredLoadingPage: FC = () => (
+  <CenteredPage>
     <CircularProgress />
-  </Components.CenteredPage>
+  </CenteredPage>
 );
 
-const StyledPresentationImage = styled(Components.FallbackImage)(({ theme }) => ({
+const StyledPresentationImage = styled(FallbackImage)(({ theme }) => ({
   maxWidth: "75%",
   maxHeight: "480px",
   aspectRatio: "1",
@@ -86,21 +86,21 @@ const ProfileImageContainer = styled(Stack)({
   border: `1px solid rgba(0, 0, 0, 0.12)`,
 });
 
-const ProfileImageStyle: React.CSSProperties = {
+const ProfileImageStyle: CSSProperties = {
   width: "100%",
   height: "100%",
   objectFit: "cover",
 };
 
-const ProfileImage = styled(Components.FallbackImage)(ProfileImageStyle);
+const ProfileImage = styled(FallbackImage)(ProfileImageStyle);
 
-const ProfileImageErrorFallback: React.FC = () => (
+const ProfileImageErrorFallback: FC = () => (
   <Stack alignItems="center" justifyContent="center" sx={{ ...ProfileImageStyle }}>
     <img src={PyCon2025Logo} alt="PyCon 2025 Logo" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "50%" }} />
   </Stack>
 );
 
-const PresentationSpeakerItem: React.FC<{ speaker: SimplifiedSpeakerSchema }> = ({ speaker }) => {
+const PresentationSpeakerItem: FC<{ speaker: SimplifiedSpeakerSchema }> = ({ speaker }) => {
   const { baseUrl, mdxComponents } = useCommonContext();
   return (
     <>
@@ -111,9 +111,7 @@ const PresentationSpeakerItem: React.FC<{ speaker: SimplifiedSpeakerSchema }> =
         <Stack alignItems="flex-start" justifyContent="center" sx={{ flexGrow: 1 }}>
           <Typography variant="h4" fontWeight="700" fontSize="2rem" children={speaker.nickname} />
           {speaker.biography ? (
-            <BiographyBox
-              children={<Components.MDXRenderer text={speaker.biography || ""} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />}
-            />
+            <BiographyBox children={<MDXRenderer text={speaker.biography || ""} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />} />
           ) : (
             <>
               <br />
@@ -127,7 +125,7 @@ const PresentationSpeakerItem: React.FC<{ speaker: SimplifiedSpeakerSchema }> =
   );
 };
 
-const PresentationImageFallback: React.FC<{ language: "ko" | "en" }> = ({ language }) => {
+const PresentationImageFallback: FC<{ language: "ko" | "en" }> = ({ language }) => {
   const message =
     language === "ko" ? (
       <>
@@ -146,8 +144,8 @@ const PresentationImageFallback: React.FC<{ language: "ko" | "en" }> = ({ langua
   return <Typography variant="caption" color="textSecondary" children={message} />;
 };
 
-export const PresentationDetailPage: React.FC = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+export const PresentationDetailPage: FC = ErrorBoundary.with(
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
     const { id } = useParams();
     const { language, setAppContext } = useAppContext();
@@ -188,7 +186,7 @@ export const PresentationDetailPage: React.FC = ErrorBoundary.with(
       {} as Record<string, string[]>
     );
 
-    React.useEffect(() => {
+    useEffect(() => {
       setAppContext((prev) => ({
         ...prev,
         title: language === "ko" ? "발표 상세" : "Presentation Detail",
@@ -246,11 +244,11 @@ export const PresentationDetailPage: React.FC = ErrorBoundary.with(
                 </TableCell>
               </TableRow>
             ) : null}
-            {R.isString(presentation.public_slideshow_file) ? (
+            {isString(presentation.public_slideshow_file) ? (
               <TableRow>
                 <HeaderTableCell children={<Typography variant="subtitle1" fontWeight="bold" children={slideShowStr} />} />
                 <TableCell sx={(theme) => ({ color: theme.palette.primary.main, textDecoration: "underline" })}>
-                  <Components.LinkHandler href={presentation.public_slideshow_file} children={slideShowLinkStr} />
+                  <LinkHandler href={presentation.public_slideshow_file} children={slideShowLinkStr} />
                 </TableCell>
               </TableRow>
             ) : null}
@@ -264,12 +262,7 @@ export const PresentationDetailPage: React.FC = ErrorBoundary.with(
           />
         )}
         <DescriptionBox>
-          <Components.MDXRenderer
-            text={presentation.description || descriptionFallback}
-            format="md"
-            baseUrl={baseUrl}
-            mdxComponents={mdxComponents}
-          />
+          <MDXRenderer text={presentation.description || descriptionFallback} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </DescriptionBox>
         <Divider flexItem />
         {presentation.speakers && (
diff --git a/apps/pyconkr-2026/src/components/pages/sign_in.tsx b/apps/pyconkr-2026/src/components/pages/sign_in.tsx
index 905b2ad..b9712d3 100644
--- a/apps/pyconkr-2026/src/components/pages/sign_in.tsx
+++ b/apps/pyconkr-2026/src/components/pages/sign_in.tsx
@@ -1,29 +1,29 @@
-import * as Shop from "@frontend/shop";
+import { useShopClient, useSignInWithSNSMutation, useUserStatus } from "@frontend/shop/hooks";
 import { AccountCircleOutlined, Google } from "@mui/icons-material";
 import { Backdrop, Button, ButtonProps, CircularProgress, Stack, Typography } from "@mui/material";
 import { Suspense } from "@suspensive/react";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
+import { FC, ReactNode, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { useAppContext } from "../../contexts/app_context";
-import { PageLayout } from "../layout/PageLayout";
+import { PageLayout } from "@apps/pyconkr-2026/components/layout/PageLayout";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
 
 type PageeStateType = {
   openBackdrop: boolean;
 };
 
-export const ShopSignInPage: React.FC = Suspense.with({ fallback: <CircularProgress /> }, () => {
+export const ShopSignInPage: FC = Suspense.with({ fallback: <CircularProgress /> }, () => {
   const { setAppContext, language } = useAppContext();
-  const [state, setState] = React.useState<PageeStateType>({ openBackdrop: false });
+  const [state, setState] = useState<PageeStateType>({ openBackdrop: false });
   const navigate = useNavigate();
-  const shopAPIClient = Shop.Hooks.useShopClient();
-  const SignInMutation = Shop.Hooks.useSignInWithSNSMutation(shopAPIClient);
-  const { data } = Shop.Hooks.useUserStatus(shopAPIClient);
+  const shopAPIClient = useShopClient();
+  const SignInMutation = useSignInWithSNSMutation(shopAPIClient);
+  const { data } = useUserStatus(shopAPIClient);
 
   const shouldOpenBackdrop = SignInMutation.isPending || state.openBackdrop;
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const triggerSignIn = (provider: "google" | "kakao" | "naver") => {
@@ -39,7 +39,7 @@ export const ShopSignInPage: React.FC = Suspense.with({ fallback: <CircularProgr
   const signInWithKakaoStr = language === "ko" ? "카카오로 로그인" : "Sign In with Kakao";
   const signInWithNaverStr = language === "ko" ? "네이버로 로그인" : "Sign In with Naver";
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (data && data.meta.is_authenticated) {
       addSnackbar(
         language === "ko" ? `이미 ${data.data.user.username}님으로 로그인되어 있습니다!` : `You are already signed in as ${data.data.user.username}!`,
@@ -55,7 +55,7 @@ export const ShopSignInPage: React.FC = Suspense.with({ fallback: <CircularProgr
       shouldShowTitleBanner: true,
       shouldShowSponsorBanner: false,
     }));
-  }, [signInTitleStr]);
+  }, [data, language, navigate, setAppContext, signInTitleStr]);
 
   const commonBtnProps: ButtonProps = {
     variant: "contained",
diff --git a/apps/pyconkr-2026/src/components/pages/sponsor_detail.tsx b/apps/pyconkr-2026/src/components/pages/sponsor_detail.tsx
index e81d528..8cb072a 100644
--- a/apps/pyconkr-2026/src/components/pages/sponsor_detail.tsx
+++ b/apps/pyconkr-2026/src/components/pages/sponsor_detail.tsx
@@ -1,20 +1,20 @@
-import { Components } from "@frontend/common";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+import { CenteredPage, ErrorFallback, MDXRenderer } from "@frontend/common/components";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
+import { SponsorTierSchema } from "@frontend/common/schemas/backendAPI";
 import { Box, Chip, CircularProgress, Divider, Stack, styled, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import * as R from "remeda";
+import { isNonNullish } from "remeda";
 
-import { SponsorTierSchema } from "../../../../../packages/common/src/schemas/backendAPI";
-import { useAppContext } from "../../contexts/app_context";
-import { PageLayout } from "../layout/PageLayout";
+import { PageLayout } from "@apps/pyconkr-2026/components/layout/PageLayout";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
 
-const PageNotFound: React.FC = () => <>404 Not Found</>;
-const CenteredLoadingPage: React.FC = () => (
-  <Components.CenteredPage>
+const PageNotFound: FC = () => <>404 Not Found</>;
+const CenteredLoadingPage: FC = () => (
+  <CenteredPage>
     <CircularProgress />
-  </Components.CenteredPage>
+  </CenteredPage>
 );
 
 const LogoImage = styled("img")(({ theme }) => ({
@@ -50,8 +50,8 @@ const DescriptionBox = styled(Box)(({ theme }) => ({
   },
 }));
 
-export const SponsorDetailPage: React.FC = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+export const SponsorDetailPage: FC = ErrorBoundary.with(
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
     const { id } = useParams();
     const { language, sponsorTiers, setAppContext } = useAppContext();
@@ -62,12 +62,12 @@ export const SponsorDetailPage: React.FC = ErrorBoundary.with(
     const title = language === "ko" ? "후원사" : "Sponsor";
     const descriptionFallback = language === "ko" ? "해당 후원사의 설명은 준비 중이에요!" : "This sponsor's description is under preparation!";
 
-    React.useEffect(() => {
+    useEffect(() => {
       setAppContext((prev) => ({
         ...prev,
         title: `${title} - ${sponsor?.name || "Detail"}`,
         shouldShowTitleBanner: true,
-        shouldShowSponsorBanner: !R.isNonNullish(sponsor),
+        shouldShowSponsorBanner: !isNonNullish(sponsor),
       }));
     }, [sponsor, title, setAppContext]);
 
@@ -90,7 +90,7 @@ export const SponsorDetailPage: React.FC = ErrorBoundary.with(
         </Typography>
         <Divider flexItem />
         <DescriptionBox>
-          <Components.MDXRenderer text={sponsor.description || descriptionFallback} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
+          <MDXRenderer text={sponsor.description || descriptionFallback} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </DescriptionBox>
       </PageLayout>
     );
diff --git a/apps/pyconkr-2026/src/consts/mdx_components.ts b/apps/pyconkr-2026/src/consts/mdx_components.ts
index 974feee..82b447b 100644
--- a/apps/pyconkr-2026/src/consts/mdx_components.ts
+++ b/apps/pyconkr-2026/src/consts/mdx_components.ts
@@ -1,143 +1,279 @@
 // 후대의 개발자님께 : 컴포넌트 맨 첫글자가 대문자로 시작하지 않으면 JSX 컴포넌트가 아니라 일반 HTML 태그로 인식합니다. 제발 대문자로 시작해주세요.
-import { Components, Schemas } from "@frontend/common";
-import * as Shop from "@frontend/shop";
-import * as mui from "@mui/material";
+import PyCon2025HostLogoBig from "@frontend/common/assets/pyconkr2025_hostlogo_big.png";
+import PyCon2025HostLogoSmall from "@frontend/common/assets/pyconkr2025_hostlogo_small.png";
+import PyCon2025Logo from "@frontend/common/assets/pyconkr2025_logo.png";
+import PyCon2025MobileLogoImage from "@frontend/common/assets/pyconkr2025_main_cover_image.png";
+import PyCon2025MobileLogoTitle from "@frontend/common/assets/pyconkr2025_main_cover_title.png";
+import { LottiePlayer, NetworkLottiePlayer } from "@frontend/common/components";
+import {
+  Confetti,
+  FAQAccordion,
+  Map as MDXMap,
+  MobileAccordion,
+  MobileCover,
+  PrimaryStyledDetails,
+  SecondaryStyledDetails,
+  SessionList,
+  SessionTimeTable,
+  StyledFullWidthButton,
+} from "@frontend/common/components/mdx_components";
+import type { SessionSchema } from "@frontend/common/schemas/backendAPI";
+import { PriceDisplay, ShopContextProvider, SignInGuard, UserSignInAccount, UserSignInMethod } from "@frontend/shop/components/common";
+import { CartStatus, OrderList, PatronList, ProductImageCardList, ProductList, UserInfo } from "@frontend/shop/components/features";
+import {
+  Accordion,
+  AccordionActions,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  AlertTitle,
+  AppBar,
+  Autocomplete,
+  Avatar,
+  AvatarGroup,
+  Backdrop,
+  Badge,
+  BottomNavigation,
+  BottomNavigationAction,
+  Box,
+  Breadcrumbs,
+  Button,
+  ButtonBase,
+  ButtonGroup,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  Checkbox,
+  Chip,
+  CircularProgress,
+  Collapse,
+  Container,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Divider,
+  Drawer,
+  Fab,
+  Fade,
+  FilledInput,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormHelperText,
+  FormLabel,
+  Grid,
+  Grow,
+  Icon,
+  IconButton,
+  ImageList,
+  ImageListItem,
+  ImageListItemBar,
+  Input,
+  InputAdornment,
+  InputBase,
+  InputLabel,
+  LinearProgress,
+  Link,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  ListSubheader,
+  Menu,
+  MenuItem,
+  MenuList,
+  MobileStepper,
+  Modal,
+  NativeSelect,
+  NoSsr,
+  OutlinedInput,
+  Pagination,
+  PaginationItem,
+  Paper,
+  Popover,
+  Popper,
+  Portal,
+  Radio,
+  RadioGroup,
+  Rating,
+  Select,
+  Skeleton,
+  Slide,
+  Slider,
+  Snackbar,
+  SnackbarContent,
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon,
+  Stack,
+  Step,
+  StepButton,
+  StepConnector,
+  StepContent,
+  StepIcon,
+  StepLabel,
+  Stepper,
+  SvgIcon,
+  SwipeableDrawer,
+  Switch,
+  Tab,
+  TabScrollButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableFooter,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TableSortLabel,
+  Tabs,
+  TextField,
+  TextareaAutosize,
+  ToggleButton,
+  ToggleButtonGroup,
+  Toolbar,
+  Tooltip,
+  Typography,
+  Zoom,
+} from "@mui/material";
 import type { MDXComponents } from "mdx/types.js";
-import * as React from "react";
-
-import PyCon2025HostLogoBig from "../../../../packages/common/src/assets/pyconkr2025_hostlogo_big.png";
-import PyCon2025HostLogoSmall from "../../../../packages/common/src/assets/pyconkr2025_hostlogo_small.png";
-import PyCon2025Logo from "../../../../packages/common/src/assets/pyconkr2025_logo.png";
-import PyCon2025MobileLogoImage from "../../../../packages/common/src/assets/pyconkr2025_main_cover_image.png";
-import PyCon2025MobileLogoTitle from "../../../../packages/common/src/assets/pyconkr2025_main_cover_title.png";
-
+import { ComponentProps, FC, createElement } from "react";
 const MUIMDXComponents: MDXComponents = {
-  Mui__material__Accordion: mui.Accordion,
-  Mui__material__AccordionActions: mui.AccordionActions,
-  Mui__material__AccordionDetails: mui.AccordionDetails,
-  Mui__material__AccordionSummary: mui.AccordionSummary,
-  Mui__material__Alert: mui.Alert,
-  Mui__material__AlertTitle: mui.AlertTitle,
-  Mui__material__AppBar: mui.AppBar,
-  Mui__material__Autocomplete: mui.Autocomplete,
-  Mui__material__Avatar: mui.Avatar,
-  Mui__material__AvatarGroup: mui.AvatarGroup,
-  Mui__material__Backdrop: mui.Backdrop,
-  Mui__material__Badge: mui.Badge,
-  Mui__material__BottomNavigation: mui.BottomNavigation,
-  Mui__material__BottomNavigationAction: mui.BottomNavigationAction,
-  Mui__material__Box: mui.Box,
-  Mui__material__Breadcrumbs: mui.Breadcrumbs,
-  Mui__material__Button: mui.Button,
-  Mui__material__ButtonBase: mui.ButtonBase,
-  Mui__material__ButtonGroup: mui.ButtonGroup,
-  Mui__material__Card: mui.Card,
-  Mui__material__CardActionArea: mui.CardActionArea,
-  Mui__material__CardActions: mui.CardActions,
-  Mui__material__CardContent: mui.CardContent,
-  Mui__material__CardHeader: mui.CardHeader,
-  Mui__material__CardMedia: mui.CardMedia,
-  Mui__material__Checkbox: mui.Checkbox,
-  Mui__material__Chip: mui.Chip,
-  Mui__material__CircularProgress: mui.CircularProgress,
-  Mui__material__Collapse: mui.Collapse,
-  Mui__material__Container: mui.Container,
-  Mui__material__Dialog: mui.Dialog,
-  Mui__material__DialogActions: mui.DialogActions,
-  Mui__material__DialogContent: mui.DialogContent,
-  Mui__material__DialogContentText: mui.DialogContentText,
-  Mui__material__DialogTitle: mui.DialogTitle,
-  Mui__material__Divider: mui.Divider,
-  Mui__material__Drawer: mui.Drawer,
-  Mui__material__Fab: mui.Fab,
-  Mui__material__Fade: mui.Fade,
-  Mui__material__FilledInput: mui.FilledInput,
-  Mui__material__FormControl: mui.FormControl,
-  Mui__material__FormControlLabel: mui.FormControlLabel,
-  Mui__material__FormGroup: mui.FormGroup,
-  Mui__material__FormHelperText: mui.FormHelperText,
-  Mui__material__FormLabel: mui.FormLabel,
-  Mui__material__Grid: mui.Grid,
-  Mui__material__Grow: mui.Grow,
-  Mui__material__Icon: mui.Icon,
-  Mui__material__IconButton: mui.IconButton,
-  Mui__material__ImageList: mui.ImageList,
-  Mui__material__ImageListItem: mui.ImageListItem,
-  Mui__material__ImageListItemBar: mui.ImageListItemBar,
-  Mui__material__Input: mui.Input,
-  Mui__material__InputAdornment: mui.InputAdornment,
-  Mui__material__InputBase: mui.InputBase,
-  Mui__material__InputLabel: mui.InputLabel,
-  Mui__material__LinearProgress: mui.LinearProgress,
-  Mui__material__Link: mui.Link,
-  Mui__material__List: mui.List,
-  Mui__material__ListItem: mui.ListItem,
-  Mui__material__ListItemAvatar: mui.ListItemAvatar,
-  Mui__material__ListItemButton: mui.ListItemButton,
-  Mui__material__ListItemIcon: mui.ListItemIcon,
-  Mui__material__ListItemSecondaryAction: mui.ListItemSecondaryAction,
-  Mui__material__ListItemText: mui.ListItemText,
-  Mui__material__ListSubheader: mui.ListSubheader,
-  Mui__material__Menu: mui.Menu,
-  Mui__material__MenuItem: mui.MenuItem,
-  Mui__material__MenuList: mui.MenuList,
-  Mui__material__MobileStepper: mui.MobileStepper,
-  Mui__material__Modal: mui.Modal,
-  Mui__material__NativeSelect: mui.NativeSelect,
-  Mui__material__NoSsr: mui.NoSsr,
-  Mui__material__OutlinedInput: mui.OutlinedInput,
-  Mui__material__Pagination: mui.Pagination,
-  Mui__material__PaginationItem: mui.PaginationItem,
-  Mui__material__Paper: mui.Paper,
-  Mui__material__Popover: mui.Popover,
-  Mui__material__Popper: mui.Popper,
-  Mui__material__Portal: mui.Portal,
-  Mui__material__Radio: mui.Radio,
-  Mui__material__RadioGroup: mui.RadioGroup,
-  Mui__material__Rating: mui.Rating,
-  Mui__material__Select: mui.Select,
-  Mui__material__Skeleton: mui.Skeleton,
-  Mui__material__Slide: mui.Slide,
-  Mui__material__Slider: mui.Slider,
-  Mui__material__Snackbar: mui.Snackbar,
-  Mui__material__SnackbarContent: mui.SnackbarContent,
-  Mui__material__SpeedDial: mui.SpeedDial,
-  Mui__material__SpeedDialAction: mui.SpeedDialAction,
-  Mui__material__SpeedDialIcon: mui.SpeedDialIcon,
-  Mui__material__Stack: mui.Stack,
-  Mui__material__Step: mui.Step,
-  Mui__material__StepButton: mui.StepButton,
-  Mui__material__StepConnector: mui.StepConnector,
-  Mui__material__StepContent: mui.StepContent,
-  Mui__material__StepIcon: mui.StepIcon,
-  Mui__material__StepLabel: mui.StepLabel,
-  Mui__material__Stepper: mui.Stepper,
-  Mui__material__SvgIcon: mui.SvgIcon,
-  Mui__material__SwipeableDrawer: mui.SwipeableDrawer,
-  Mui__material__Switch: mui.Switch,
-  Mui__material__Tab: mui.Tab,
-  Mui__material__Table: mui.Table,
-  Mui__material__TableBody: mui.TableBody,
-  Mui__material__TableCell: mui.TableCell,
-  Mui__material__TableContainer: mui.TableContainer,
-  Mui__material__TableFooter: mui.TableFooter,
-  Mui__material__TableHead: mui.TableHead,
-  Mui__material__TablePagination: mui.TablePagination,
-  Mui__material__TableRow: mui.TableRow,
-  Mui__material__TableSortLabel: mui.TableSortLabel,
-  Mui__material__Tabs: mui.Tabs,
-  Mui__material__TabScrollButton: mui.TabScrollButton,
-  Mui__material__TextField: mui.TextField,
-  Mui__material__TextareaAutosize: mui.TextareaAutosize,
-  Mui__material__ToggleButton: mui.ToggleButton,
-  Mui__material__ToggleButtonGroup: mui.ToggleButtonGroup,
-  Mui__material__Toolbar: mui.Toolbar,
-  Mui__material__Tooltip: mui.Tooltip,
-  Mui__material__Typography: mui.Typography,
-  Mui__material__Zoom: mui.Zoom,
+  Mui__material__Accordion: Accordion,
+  Mui__material__AccordionActions: AccordionActions,
+  Mui__material__AccordionDetails: AccordionDetails,
+  Mui__material__AccordionSummary: AccordionSummary,
+  Mui__material__Alert: Alert,
+  Mui__material__AlertTitle: AlertTitle,
+  Mui__material__AppBar: AppBar,
+  Mui__material__Autocomplete: Autocomplete,
+  Mui__material__Avatar: Avatar,
+  Mui__material__AvatarGroup: AvatarGroup,
+  Mui__material__Backdrop: Backdrop,
+  Mui__material__Badge: Badge,
+  Mui__material__BottomNavigation: BottomNavigation,
+  Mui__material__BottomNavigationAction: BottomNavigationAction,
+  Mui__material__Box: Box,
+  Mui__material__Breadcrumbs: Breadcrumbs,
+  Mui__material__Button: Button,
+  Mui__material__ButtonBase: ButtonBase,
+  Mui__material__ButtonGroup: ButtonGroup,
+  Mui__material__Card: Card,
+  Mui__material__CardActionArea: CardActionArea,
+  Mui__material__CardActions: CardActions,
+  Mui__material__CardContent: CardContent,
+  Mui__material__CardHeader: CardHeader,
+  Mui__material__CardMedia: CardMedia,
+  Mui__material__Checkbox: Checkbox,
+  Mui__material__Chip: Chip,
+  Mui__material__CircularProgress: CircularProgress,
+  Mui__material__Collapse: Collapse,
+  Mui__material__Container: Container,
+  Mui__material__Dialog: Dialog,
+  Mui__material__DialogActions: DialogActions,
+  Mui__material__DialogContent: DialogContent,
+  Mui__material__DialogContentText: DialogContentText,
+  Mui__material__DialogTitle: DialogTitle,
+  Mui__material__Divider: Divider,
+  Mui__material__Drawer: Drawer,
+  Mui__material__Fab: Fab,
+  Mui__material__Fade: Fade,
+  Mui__material__FilledInput: FilledInput,
+  Mui__material__FormControl: FormControl,
+  Mui__material__FormControlLabel: FormControlLabel,
+  Mui__material__FormGroup: FormGroup,
+  Mui__material__FormHelperText: FormHelperText,
+  Mui__material__FormLabel: FormLabel,
+  Mui__material__Grid: Grid,
+  Mui__material__Grow: Grow,
+  Mui__material__Icon: Icon,
+  Mui__material__IconButton: IconButton,
+  Mui__material__ImageList: ImageList,
+  Mui__material__ImageListItem: ImageListItem,
+  Mui__material__ImageListItemBar: ImageListItemBar,
+  Mui__material__Input: Input,
+  Mui__material__InputAdornment: InputAdornment,
+  Mui__material__InputBase: InputBase,
+  Mui__material__InputLabel: InputLabel,
+  Mui__material__LinearProgress: LinearProgress,
+  Mui__material__Link: Link,
+  Mui__material__List: List,
+  Mui__material__ListItem: ListItem,
+  Mui__material__ListItemAvatar: ListItemAvatar,
+  Mui__material__ListItemButton: ListItemButton,
+  Mui__material__ListItemIcon: ListItemIcon,
+  Mui__material__ListItemSecondaryAction: ListItemSecondaryAction,
+  Mui__material__ListItemText: ListItemText,
+  Mui__material__ListSubheader: ListSubheader,
+  Mui__material__Menu: Menu,
+  Mui__material__MenuItem: MenuItem,
+  Mui__material__MenuList: MenuList,
+  Mui__material__MobileStepper: MobileStepper,
+  Mui__material__Modal: Modal,
+  Mui__material__NativeSelect: NativeSelect,
+  Mui__material__NoSsr: NoSsr,
+  Mui__material__OutlinedInput: OutlinedInput,
+  Mui__material__Pagination: Pagination,
+  Mui__material__PaginationItem: PaginationItem,
+  Mui__material__Paper: Paper,
+  Mui__material__Popover: Popover,
+  Mui__material__Popper: Popper,
+  Mui__material__Portal: Portal,
+  Mui__material__Radio: Radio,
+  Mui__material__RadioGroup: RadioGroup,
+  Mui__material__Rating: Rating,
+  Mui__material__Select: Select,
+  Mui__material__Skeleton: Skeleton,
+  Mui__material__Slide: Slide,
+  Mui__material__Slider: Slider,
+  Mui__material__Snackbar: Snackbar,
+  Mui__material__SnackbarContent: SnackbarContent,
+  Mui__material__SpeedDial: SpeedDial,
+  Mui__material__SpeedDialAction: SpeedDialAction,
+  Mui__material__SpeedDialIcon: SpeedDialIcon,
+  Mui__material__Stack: Stack,
+  Mui__material__Step: Step,
+  Mui__material__StepButton: StepButton,
+  Mui__material__StepConnector: StepConnector,
+  Mui__material__StepContent: StepContent,
+  Mui__material__StepIcon: StepIcon,
+  Mui__material__StepLabel: StepLabel,
+  Mui__material__Stepper: Stepper,
+  Mui__material__SvgIcon: SvgIcon,
+  Mui__material__SwipeableDrawer: SwipeableDrawer,
+  Mui__material__Switch: Switch,
+  Mui__material__Tab: Tab,
+  Mui__material__Table: Table,
+  Mui__material__TableBody: TableBody,
+  Mui__material__TableCell: TableCell,
+  Mui__material__TableContainer: TableContainer,
+  Mui__material__TableFooter: TableFooter,
+  Mui__material__TableHead: TableHead,
+  Mui__material__TablePagination: TablePagination,
+  Mui__material__TableRow: TableRow,
+  Mui__material__TableSortLabel: TableSortLabel,
+  Mui__material__Tabs: Tabs,
+  Mui__material__TabScrollButton: TabScrollButton,
+  Mui__material__TextField: TextField,
+  Mui__material__TextareaAutosize: TextareaAutosize,
+  Mui__material__ToggleButton: ToggleButton,
+  Mui__material__ToggleButtonGroup: ToggleButtonGroup,
+  Mui__material__Toolbar: Toolbar,
+  Mui__material__Tooltip: Tooltip,
+  Mui__material__Typography: Typography,
+  Mui__material__Zoom: Zoom,
 };
 
-const getPyConKR2025SessionUrl = (session: Schemas.BackendAPI.SessionSchema): string => {
+const getPyConKR2025SessionUrl = (session: SessionSchema): string => {
   const urlSafeTitle = session.title
     .replace(/ /g, "-")
     .replace(/([.])/g, "_")
@@ -145,27 +281,27 @@ const getPyConKR2025SessionUrl = (session: Schemas.BackendAPI.SessionSchema): st
   return `/presentations/${session.id}#${urlSafeTitle}`;
 };
 
-const PyConKR2025FallbackImage = React.createElement("img", {
+const PyConKR2025FallbackImage = createElement("img", {
   src: PyCon2025Logo,
   alt: "PyCon 2025 Logo",
   style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: "50%" },
 });
 
-const PyConKR2025SessionList: React.FC<React.ComponentProps<typeof Components.MDX.SessionList>> = (props) =>
-  React.createElement(Components.MDX.SessionList, {
+const PyConKR2025SessionList: FC<ComponentProps<typeof SessionList>> = (props) =>
+  createElement(SessionList, {
     ...props,
     fallbackImage: PyConKR2025FallbackImage,
     getSessionUrl: getPyConKR2025SessionUrl,
   });
 
-const PyConKR2025SessionTimeTable: React.FC<React.ComponentProps<typeof Components.MDX.SessionTimeTable>> = (props) =>
-  React.createElement(Components.MDX.SessionTimeTable, {
+const PyConKR2025SessionTimeTable: FC<ComponentProps<typeof SessionTimeTable>> = (props) =>
+  createElement(SessionTimeTable, {
     ...props,
     getSessionUrl: getPyConKR2025SessionUrl,
   });
 
-const PyConKR2025MobileAccordion: React.FC<object> = () =>
-  React.createElement(Components.MDX.MobileAccordion, {
+const PyConKR2025MobileAccordion: FC<object> = () =>
+  createElement(MobileAccordion, {
     marqueeText: "AUG 15 - 17",
     marqueeLogoSrc: PyCon2025HostLogoSmall,
     hostLogoBigSrc: PyCon2025HostLogoBig,
@@ -173,21 +309,21 @@ const PyConKR2025MobileAccordion: React.FC<object> = () =>
     venueEnLines: ["New Engineering Building, Dongguk University", "Pildong-ro 1-gil, Jung-gu, Seoul, Republic of Korea"],
   });
 
-const PyConKR2025MobileCover: React.FC<object> = () =>
-  React.createElement(Components.MDX.MobileCover, {
+const PyConKR2025MobileCover: FC<object> = () =>
+  createElement(MobileCover, {
     coverImageSrc: PyCon2025MobileLogoImage,
     coverTitleSrc: PyCon2025MobileLogoTitle,
   });
 
 const PyConKRCommonMDXComponents: MDXComponents = {
-  Common__Components__Lottie: Components.LottiePlayer,
-  Common__Components__NetworkLottie: Components.NetworkLottiePlayer,
-  Common__Components__MDX__Confetti: Components.MDX.Confetti,
-  Common__Components__MDX__PrimaryStyledDetails: Components.MDX.PrimaryStyledDetails,
-  Common__Components__MDX__SecondaryStyledDetails: Components.MDX.SecondaryStyledDetails,
-  Common__Components__MDX__Map: Components.MDX.Map,
-  Common__Components__MDX__FAQAccordion: Components.MDX.FAQAccordion,
-  Common__Components__MDX__FullWidthStyledButton: Components.MDX.StyledFullWidthButton,
+  Common__Components__Lottie: LottiePlayer,
+  Common__Components__NetworkLottie: NetworkLottiePlayer,
+  Common__Components__MDX__Confetti: Confetti,
+  Common__Components__MDX__PrimaryStyledDetails: PrimaryStyledDetails,
+  Common__Components__MDX__SecondaryStyledDetails: SecondaryStyledDetails,
+  Common__Components__MDX__Map: MDXMap,
+  Common__Components__MDX__FAQAccordion: FAQAccordion,
+  Common__Components__MDX__FullWidthStyledButton: StyledFullWidthButton,
   Common__Components__Session__List: PyConKR2025SessionList,
   Common__Components__Session__TimeTable: PyConKR2025SessionTimeTable,
   Common__Components__MDX__MobileAccordion: PyConKR2025MobileAccordion,
@@ -195,17 +331,17 @@ const PyConKRCommonMDXComponents: MDXComponents = {
 };
 
 const PythonKRShopMDXComponents: MDXComponents = {
-  Shop__Common__PriceDisplay: Shop.Components.Common.PriceDisplay,
-  Shop__Common__SignInGuard: Shop.Components.Common.SignInGuard,
-  Shop__Common__ContextProvider: Shop.Components.Common.ShopContextProvider,
-  Shop__Common__UserSignInMethod: Shop.Components.Common.UserSignInMethod,
-  Shop__Common__UserSignInAccount: Shop.Components.Common.UserSignInAccount,
-  Shop__Feature__CartStatus: Shop.Components.Features.CartStatus,
-  Shop__Feature__ProductList: Shop.Components.Features.ProductList,
-  Shop__Feature__ProductImageCardList: Shop.Components.Features.ProductImageCardList,
-  Shop__Feature__OrderList: Shop.Components.Features.OrderList,
-  Shop__Feature__UserInfo: Shop.Components.Features.UserInfo,
-  Shop__Feature__PatronList: Shop.Components.Features.PatronList,
+  Shop__Common__PriceDisplay: PriceDisplay,
+  Shop__Common__SignInGuard: SignInGuard,
+  Shop__Common__ContextProvider: ShopContextProvider,
+  Shop__Common__UserSignInMethod: UserSignInMethod,
+  Shop__Common__UserSignInAccount: UserSignInAccount,
+  Shop__Feature__CartStatus: CartStatus,
+  Shop__Feature__ProductList: ProductList,
+  Shop__Feature__ProductImageCardList: ProductImageCardList,
+  Shop__Feature__OrderList: OrderList,
+  Shop__Feature__UserInfo: UserInfo,
+  Shop__Feature__PatronList: PatronList,
 };
 
 export const PyConKRMDXComponents = {
diff --git a/apps/pyconkr-2026/src/contexts/app_context.tsx b/apps/pyconkr-2026/src/contexts/app_context.tsx
index 3c56bb8..3a20055 100644
--- a/apps/pyconkr-2026/src/contexts/app_context.tsx
+++ b/apps/pyconkr-2026/src/contexts/app_context.tsx
@@ -1,7 +1,5 @@
-import * as React from "react";
-
-import { NestedSiteMapSchema, SponsorTierSchema } from "../../../../packages/common/src/schemas/backendAPI";
-
+import { NestedSiteMapSchema, SponsorTierSchema } from "@frontend/common/schemas/backendAPI";
+import { Dispatch, SetStateAction, createContext, useContext } from "react";
 type LanguageType = "ko" | "en";
 
 export type AppContextType = {
@@ -14,13 +12,13 @@ export type AppContextType = {
   title: string;
   currentSiteMapDepth: (NestedSiteMapSchema | undefined)[];
 
-  setAppContext: React.Dispatch<React.SetStateAction<Omit<AppContextType, "setAppContext">>>;
+  setAppContext: Dispatch<SetStateAction<Omit<AppContextType, "setAppContext">>>;
 };
 
-export const AppContext = React.createContext<AppContextType | undefined>(undefined);
+export const AppContext = createContext<AppContextType | undefined>(undefined);
 
 export const useAppContext = (): AppContextType => {
-  const context = React.useContext(AppContext);
+  const context = useContext(AppContext);
   if (!context) {
     throw new Error("useAppContext must be used within an AppContextProvider");
   }
diff --git a/apps/pyconkr-2026/src/main.tsx b/apps/pyconkr-2026/src/main.tsx
index cf24b1f..0703388 100644
--- a/apps/pyconkr-2026/src/main.tsx
+++ b/apps/pyconkr-2026/src/main.tsx
@@ -1,14 +1,16 @@
 import { Global } from "@emotion/react";
-import { Components, Utils } from "@frontend/common";
-import type { ContextOptions } from "@frontend/common/src/contexts";
-import * as Shop from "@frontend/shop";
+import { CenteredPage, CommonContextProvider, ErrorFallback } from "@frontend/common/components";
+import type { ContextOptions } from "@frontend/common/contexts";
+import { registerChunkLoadErrorReloadHandler } from "@frontend/common/utils";
+import { ShopContextProvider } from "@frontend/shop/components/common";
+import { ContextOptions as ShopContextOptions } from "@frontend/shop/contexts";
 import { CircularProgress, CssBaseline, ThemeProvider } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { matchQuery, MutationCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { SnackbarProvider } from "notistack";
-import * as React from "react";
-import * as ReactDom from "react-dom/client";
+import { FC, StrictMode, useState } from "react";
+import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
 import { App } from "./App.tsx";
@@ -55,7 +57,7 @@ const CommonOptions: ContextOptions = {
   mdxComponents: PyConKRMDXComponents,
 };
 
-const ShopOptions: Shop.Contexts.ContextOptions = {
+const ShopOptions: ShopContextOptions = {
   language: "ko",
   shopApiDomain: import.meta.env.VITE_PYCONKR_SHOP_API_DOMAIN,
   shopApiCSRFCookieName: import.meta.env.VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME,
@@ -64,13 +66,13 @@ const ShopOptions: Shop.Contexts.ContextOptions = {
 };
 
 const SuspenseFallback = (
-  <Components.CenteredPage>
+  <CenteredPage>
     <CircularProgress />
-  </Components.CenteredPage>
+  </CenteredPage>
 );
 
-const MainApp: React.FC = () => {
-  const [appState, setAppContext] = React.useState<Omit<AppContextType, "setAppContext">>({
+export const MainApp: FC = () => {
+  const [appState, setAppContext] = useState<Omit<AppContextType, "setAppContext">>({
     language: (localStorage.getItem(LOCAL_STORAGE_LANGUAGE_KEY) as "ko" | "en" | null) ?? "ko",
     shouldShowTitleBanner: true,
     shouldShowSponsorBanner: false,
@@ -81,15 +83,15 @@ const MainApp: React.FC = () => {
   });
 
   return (
-    <React.StrictMode>
+    <StrictMode>
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools initialIsOpen={false} />
         <SnackbarProvider>
           <BrowserRouter>
             <AppContext.Provider value={{ ...appState, setAppContext }}>
-              <Components.CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
-                <Shop.Components.Common.ShopContextProvider options={{ ...ShopOptions, language: appState.language }}>
-                  <ErrorBoundary fallback={Components.ErrorFallback}>
+              <CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
+                <ShopContextProvider options={{ ...ShopOptions, language: appState.language }}>
+                  <ErrorBoundary fallback={ErrorFallback}>
                     <Suspense fallback={SuspenseFallback}>
                       <ThemeProvider theme={muiTheme}>
                         <CssBaseline />
@@ -98,16 +100,16 @@ const MainApp: React.FC = () => {
                       </ThemeProvider>
                     </Suspense>
                   </ErrorBoundary>
-                </Shop.Components.Common.ShopContextProvider>
-              </Components.CommonContextProvider>
+                </ShopContextProvider>
+              </CommonContextProvider>
             </AppContext.Provider>
           </BrowserRouter>
         </SnackbarProvider>
       </QueryClientProvider>
-    </React.StrictMode>
+    </StrictMode>
   );
 };
 
-Utils.registerChunkLoadErrorReloadHandler();
+registerChunkLoadErrorReloadHandler();
 
-ReactDom.createRoot(document.getElementById("root")!).render(<MainApp />);
+createRoot(document.getElementById("root")!).render(<MainApp />);
diff --git a/apps/pyconkr-2026/tsconfig.json b/apps/pyconkr-2026/tsconfig.json
index e9694fd..ff99f6e 100644
--- a/apps/pyconkr-2026/tsconfig.json
+++ b/apps/pyconkr-2026/tsconfig.json
@@ -1,32 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "forceConsistentCasingInFileNames": false,
-
-    /* Paths */
-    "baseUrl": ".",
-    "paths": {
-      "@apps/pyconkr-2026/*": ["apps/pyconkr-2026/src/*"]
-    }
-  },
+  "extends": "../../tsconfig.base.json",
   "include": ["src", "vite.config.mts", "vite-env.d.ts", "../../types"]
 }
diff --git a/apps/pyconkr-2026/vite.config.mts b/apps/pyconkr-2026/vite.config.mts
index 1dbfc41..1f9cfbd 100644
--- a/apps/pyconkr-2026/vite.config.mts
+++ b/apps/pyconkr-2026/vite.config.mts
@@ -20,9 +20,8 @@ export default defineConfig(({ mode }) => {
     plugins: [react(), mdx(), ...(isLocalHttpBackend ? [] : [mkcert({ hosts: [host] })]), svgr()],
     resolve: {
       alias: {
-        "@frontend/common/src": path.resolve(__dirname, "../../packages/common/src"),
-        "@frontend/common": path.resolve(__dirname, "../../packages/common/src/index.ts"),
-        "@frontend/shop": path.resolve(__dirname, "../../packages/shop/src/index.ts"),
+        "@frontend/common": path.resolve(__dirname, "../../packages/common/src"),
+        "@frontend/shop": path.resolve(__dirname, "../../packages/shop/src"),
         "@apps/pyconkr-2026": path.resolve(__dirname, "./src"),
       },
     },
diff --git a/apps/pyconkr-admin/src/components/elements/admin_filter_fieldset.tsx b/apps/pyconkr-admin/src/components/elements/admin_filter_fieldset.tsx
index 9477fc3..f9bf07f 100644
--- a/apps/pyconkr-admin/src/components/elements/admin_filter_fieldset.tsx
+++ b/apps/pyconkr-admin/src/components/elements/admin_filter_fieldset.tsx
@@ -1,6 +1,5 @@
 import { Stack, styled } from "@mui/material";
-import * as React from "react";
-
+import { FC, ReactNode } from "react";
 const StyledFieldset = styled("fieldset")(({ theme }) => ({
   margin: 0,
   padding: theme.spacing(1, 2, 2),
@@ -19,10 +18,10 @@ const StyledLegend = styled("legend")(({ theme }) => ({
 
 type Props = {
   label: string;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
-export const AdminFilterFieldset: React.FC<Props> = ({ label, children }) => (
+export const AdminFilterFieldset: FC<Props> = ({ label, children }) => (
   <StyledFieldset>
     <StyledLegend>{label}</StyledLegend>
     <Stack direction="row" spacing={2} flexWrap="wrap" alignItems="center" sx={{ rowGap: 2 }}>
diff --git a/apps/pyconkr-admin/src/components/elements/admin_list_filter.tsx b/apps/pyconkr-admin/src/components/elements/admin_list_filter.tsx
index 142a0da..e24ad6c 100644
--- a/apps/pyconkr-admin/src/components/elements/admin_list_filter.tsx
+++ b/apps/pyconkr-admin/src/components/elements/admin_list_filter.tsx
@@ -1,9 +1,7 @@
+import { ChoicesResponse, OpenAPIParameterSchema } from "@frontend/common/schemas/backendAdminAPI";
 import { Add, Clear, FilterList, RestartAlt } from "@mui/icons-material";
 import { Box, Button, Chip, FormControl, IconButton, InputLabel, MenuItem, Select, Stack, TextField } from "@mui/material";
-import * as React from "react";
-
-import { ChoicesResponse, OpenAPIParameterSchema } from "../../../../../packages/common/src/schemas/backendAdminAPI";
-
+import { FC, useEffect, useState } from "react";
 type AdminListFilterProps = {
   parameters: OpenAPIParameterSchema[];
   values: Record<string, string>;
@@ -11,10 +9,10 @@ type AdminListFilterProps = {
   onApply: (values: Record<string, string>) => void;
 };
 
-export const AdminListFilter: React.FC<AdminListFilterProps> = ({ parameters, values, choices, onApply }) => {
-  const [localValues, setLocalValues] = React.useState<Record<string, string>>(values);
+export const AdminListFilter: FC<AdminListFilterProps> = ({ parameters, values, choices, onApply }) => {
+  const [localValues, setLocalValues] = useState<Record<string, string>>(values);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setLocalValues(values);
   }, [values]);
 
@@ -74,7 +72,7 @@ type FilterFieldProps = {
   onChange: (name: string, value: string) => void;
 };
 
-const FilterField: React.FC<FilterFieldProps> = ({ param, value, choices, onChange }) => {
+const FilterField: FC<FilterFieldProps> = ({ param, value, choices, onChange }) => {
   const { name, schema, description } = param;
 
   if (schema?.type === "array") return <ArrayFilterField name={name} items={schema.items} value={value} onChange={onChange} />;
@@ -121,7 +119,7 @@ type EnumFilterFieldProps = {
   onChange: (name: string, value: string) => void;
 };
 
-const EnumFilterField: React.FC<EnumFilterFieldProps> = ({ name, options, value, onChange }) => {
+const EnumFilterField: FC<EnumFilterFieldProps> = ({ name, options, value, onChange }) => {
   const selectedValues = value ? value.split(",") : [];
 
   const handleChange = (newValues: string | string[]) => {
@@ -162,7 +160,7 @@ type ArrayFilterFieldProps = {
   onChange: (name: string, value: string) => void;
 };
 
-const ArrayFilterField: React.FC<ArrayFilterFieldProps> = ({ name, items, value, onChange }) => {
+const ArrayFilterField: FC<ArrayFilterFieldProps> = ({ name, items, value, onChange }) => {
   const values = value ? value.split(",") : [];
 
   const updateValues = (newValues: string[]) => onChange(name, newValues.filter((v) => v !== "").join(","));
diff --git a/apps/pyconkr-admin/src/components/elements/admin_pagination.tsx b/apps/pyconkr-admin/src/components/elements/admin_pagination.tsx
index 4c50d7d..a6140d7 100644
--- a/apps/pyconkr-admin/src/components/elements/admin_pagination.tsx
+++ b/apps/pyconkr-admin/src/components/elements/admin_pagination.tsx
@@ -1,6 +1,5 @@
 import { FormControl, InputLabel, MenuItem, Pagination, Select, Stack, Typography } from "@mui/material";
-import * as React from "react";
-
+import { FC } from "react";
 type Props = {
   count: number;
   page: number;
@@ -15,7 +14,7 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
 
 const scrollToTop = () => window.scrollTo({ top: 0, behavior: "smooth" });
 
-export const AdminPagination: React.FC<Props> = ({
+export const AdminPagination: FC<Props> = ({
   count,
   page,
   pageSize,
diff --git a/apps/pyconkr-admin/src/components/elements/admin_signin_guard.tsx b/apps/pyconkr-admin/src/components/elements/admin_signin_guard.tsx
index 52e73e8..cae6a23 100644
--- a/apps/pyconkr-admin/src/components/elements/admin_signin_guard.tsx
+++ b/apps/pyconkr-admin/src/components/elements/admin_signin_guard.tsx
@@ -1,12 +1,12 @@
-import { useBackendAdminClient, useSignedInUserQuery } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useSignedInUserQuery } from "@frontend/common/hooks/useAdminAPI";
 import { CircularProgress } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, ReactNode } from "react";
 import { Navigate } from "react-router-dom";
 
-import { addSnackbar } from "../../utils/snackbar";
+import { addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
-export const BackendAdminSignInGuard: React.FC<{ children: React.ReactNode }> = ErrorBoundary.with(
+export const BackendAdminSignInGuard: FC<{ children: ReactNode }> = ErrorBoundary.with(
   { fallback: <>로그인 정보를 불러오는 중 문제가 발생했습니다.</> },
   Suspense.with({ fallback: <CircularProgress /> }, ({ children }) => {
     const backendAdminAPIClient = useBackendAdminClient();
diff --git a/apps/pyconkr-admin/src/components/elements/error_fallback.tsx b/apps/pyconkr-admin/src/components/elements/error_fallback.tsx
index 50b6dda..9988f02 100644
--- a/apps/pyconkr-admin/src/components/elements/error_fallback.tsx
+++ b/apps/pyconkr-admin/src/components/elements/error_fallback.tsx
@@ -1,8 +1,7 @@
-import { Components } from "@frontend/common";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
-import * as React from "react";
-
-export const ErrorFallback: React.FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
+import { ErrorFallback as BaseErrorFallback } from "@frontend/common/components";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
+import { FC } from "react";
+export const ErrorFallback: FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
   const { debug } = useCommonContext();
-  return <Components.ErrorFallback error={error} reset={reset} debug={debug} />;
+  return <BaseErrorFallback error={error} reset={reset} debug={debug} />;
 };
diff --git a/apps/pyconkr-admin/src/components/elements/public_file_picker.tsx b/apps/pyconkr-admin/src/components/elements/public_file_picker.tsx
index 626c154..acde042 100644
--- a/apps/pyconkr-admin/src/components/elements/public_file_picker.tsx
+++ b/apps/pyconkr-admin/src/components/elements/public_file_picker.tsx
@@ -1,8 +1,8 @@
-import { useBackendAdminClient, useChoicesQuery, usePublicFileQuery } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useChoicesQuery, usePublicFileQuery } from "@frontend/common/hooks/useAdminAPI";
 import { OpenInNew } from "@mui/icons-material";
 import { Autocomplete, Box, Button, CircularProgress, Stack, TextField } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, useMemo } from "react";
 import { Link as RouterLink } from "react-router-dom";
 
 type Option = { value: string; label: string };
@@ -35,7 +35,7 @@ const previewBoxSx = {
   overflow: "hidden",
 };
 
-const ImagePreview: React.FC<{ id: string }> = ErrorBoundary.with(
+const ImagePreview: FC<{ id: string }> = ErrorBoundary.with(
   { fallback: () => <Box sx={previewBoxSx} /> },
   Suspense.with(
     {
@@ -72,18 +72,10 @@ const ImagePreview: React.FC<{ id: string }> = ErrorBoundary.with(
   )
 );
 
-export const PublicFilePicker: React.FC<Props> = ({
-  label = "이미지",
-  value,
-  onChange,
-  choicesApp,
-  choicesResource,
-  choicesField,
-  acceptExtensions,
-}) => {
+export const PublicFilePicker: FC<Props> = ({ label = "이미지", value, onChange, choicesApp, choicesResource, choicesField, acceptExtensions }) => {
   const client = useBackendAdminClient();
   const choicesQuery = useChoicesQuery(client, choicesApp, choicesResource);
-  const options: Option[] = React.useMemo(() => {
+  const options: Option[] = useMemo(() => {
     const all = (choicesQuery.data?.[choicesField] ?? []).map((item) => ({ value: item.const ?? "", label: item.title }));
     if (!acceptExtensions || acceptExtensions.length === 0) return all;
     const allowed = acceptExtensions.map((e) => e.toLowerCase());
diff --git a/apps/pyconkr-admin/src/components/layouts/admin_editor.tsx b/apps/pyconkr-admin/src/components/layouts/admin_editor.tsx
index c7d0b03..d125136 100644
--- a/apps/pyconkr-admin/src/components/layouts/admin_editor.tsx
+++ b/apps/pyconkr-admin/src/components/layouts/admin_editor.tsx
@@ -1,5 +1,5 @@
-import { Components } from "@frontend/common";
-import { retrieve } from "@frontend/common/src/apis/admin_api";
+import { retrieve } from "@frontend/common/apis/admin_api";
+import { LottieDebugPanel, MDXRenderer, MarkdownEditor } from "@frontend/common/components";
 import {
   useBackendAdminClient,
   useChoicesQuery,
@@ -7,13 +7,13 @@ import {
   useRemoveMutation,
   useSchemaQuery,
   useUpdateMutation,
-} from "@frontend/common/src/hooks/useAdminAPI";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+} from "@frontend/common/hooks/useAdminAPI";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
 import {
   filterPropertiesByLanguageInJsonSchema,
   filterReadOnlyPropertiesInJsonSchema,
   filterWritablePropertiesInJsonSchema,
-} from "@frontend/common/src/utils";
+} from "@frontend/common/utils";
 import { Add, Close, Delete, Edit } from "@mui/icons-material";
 import {
   Box,
@@ -45,20 +45,32 @@ import { customizeValidator } from "@rjsf/validator-ajv8";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import AjvDraft04 from "ajv-draft-04";
 import { JSONSchema7 } from "json-schema";
-import * as React from "react";
+import {
+  ChangeEvent,
+  FC,
+  FocusEvent,
+  FormEvent,
+  MouseEventHandler,
+  PropsWithChildren,
+  SyntheticEvent,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import * as R from "remeda";
+import { addProp, isArray, isNonNullish, isObjectType, isString } from "remeda";
 
-import { addErrorSnackbar, addSnackbar } from "../../utils/snackbar";
-import { BackendAdminSignInGuard } from "../elements/admin_signin_guard";
-import { ErrorFallback } from "../elements/error_fallback";
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type EditorFormDataEventType = IChangeEvent<Record<string, string>, RJSFSchema, { [k in string]: unknown }>;
-type onSubmitType = (data: Record<string, string>, event: React.FormEvent<unknown>) => void;
+type onSubmitType = (data: Record<string, string>, event: FormEvent<unknown>) => void;
 
 type AppResourceType = { app: string; resource: string };
 type AppResourceIdType = AppResourceType & { id?: string };
-type AdminEditorPropsType = React.PropsWithChildren<{
+type AdminEditorPropsType = PropsWithChildren<{
   hidingFields?: string[];
   context?: Record<string, string>;
   onCreated?: (data: Record<string, string>) => void;
@@ -70,7 +82,7 @@ type AdminEditorPropsType = React.PropsWithChildren<{
   extraActions?: ButtonProps[];
 }>;
 
-const processFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+const processFile = (event: ChangeEvent<HTMLInputElement>) => {
   if (!event.target.files || event.target.files.length === 0) return Promise.resolve("");
 
   const f = event.target.files[0];
@@ -94,7 +106,7 @@ const FileField: Field = (p) => (
 type DescriptedEnum = { const: string; title: string };
 type DescriptedEnumObject = Record<string, DescriptedEnum>;
 
-const SelectdChipRenderer: React.FC<{ selectable: DescriptedEnumObject; selected: string[] }> = ({ selectable, selected }) => {
+const SelectdChipRenderer: FC<{ selectable: DescriptedEnumObject; selected: string[] }> = ({ selectable, selected }) => {
   const children = selected.map((v) => <Chip key={v} label={selectable[v].title || ""} />);
   return <Stack sx={{ flexWrap: "wrap" }} direction="row" spacing={0.5} children={children} />;
 };
@@ -139,12 +151,12 @@ const fieldPropsToSelectedProps = (props: FieldProps): OutlinedSelectProps & { d
     idPrefix,
     idSeparator,
   };
-  const onFocus = (event: React.FocusEvent<HTMLInputElement>) => rawOnFocus(event.currentTarget.name, event.currentTarget.value);
-  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => rawOnBlur(event.currentTarget.name, event.currentTarget.value);
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => rawOnChange(event.target.value, undefined, event.target.name);
+  const onFocus = (event: FocusEvent<HTMLInputElement>) => rawOnFocus(event.currentTarget.name, event.currentTarget.value);
+  const onBlur = (event: FocusEvent<HTMLInputElement>) => rawOnBlur(event.currentTarget.name, event.currentTarget.value);
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => rawOnChange(event.target.value, undefined, event.target.name);
   const sx: OutlinedSelectProps["sx"] = color ? { color, borderColor: color } : {};
-  const defaultValue = (formData ? (R.isArray(formData) ? formData : [formData.toString()]) : []) as string[];
-  return R.addProp({ ...rest, name, label: name, defaultValue, autoFocus, readOnly, onFocus, onBlur, onChange, sx }, "data-rjsf", data);
+  const defaultValue = (formData ? (isArray(formData) ? formData : [formData.toString()]) : []) as string[];
+  return addProp({ ...rest, name, label: name, defaultValue, autoFocus, readOnly, onFocus, onBlur, onChange, sx }, "data-rjsf", data);
 };
 
 const M2MSelect: Field = ErrorBoundary.with(
@@ -185,7 +197,7 @@ const MDRendererContainer = styled(Box)(({ theme }) => ({
 
 const MDEditorField: Field = ErrorBoundary.with({ fallback: ErrorFallback }, ({ disabled, formData, name, onChange: rawOnChange }) => {
   const { baseUrl, mdxComponents } = useCommonContext();
-  const [valueState, setValueState] = React.useState<string | undefined>(formData?.toString() || "");
+  const [valueState, setValueState] = useState<string | undefined>(formData?.toString() || "");
   const onChange = (value?: string) => {
     setValueState(value);
     rawOnChange(value, undefined, name);
@@ -195,10 +207,10 @@ const MDEditorField: Field = ErrorBoundary.with({ fallback: ErrorFallback }, ({
       <Typography variant="subtitle2" component="legend" children={name} />
       <Stack direction="row" spacing={2} sx={{ width: "100%", height: "100%", minHeight: "100%", maxHeight: "100%", flexGrow: 1, py: 2 }}>
         <Box sx={{ width: "50%", maxWidth: "50%" }}>
-          <Components.MarkdownEditor disabled={disabled} name={name} value={valueState} onChange={onChange} extraCommands={[]} />
+          <MarkdownEditor disabled={disabled} name={name} value={valueState} onChange={onChange} extraCommands={[]} />
         </Box>
         <MDRendererContainer>
-          <Components.MDXRenderer text={valueState || ""} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
+          <MDXRenderer text={valueState || ""} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </MDRendererContainer>
       </Stack>
     </MUIStyledFieldset>
@@ -212,21 +224,21 @@ type ReadOnlyValueFieldStateType = {
   objectUrl: string | null;
 };
 
-const ReadOnlyValueField: React.FC<{
+const ReadOnlyValueField: FC<{
   name: string;
   value: unknown;
   uiSchema: UiSchema;
 }> = Suspense.with({ fallback: <CircularProgress /> }, ({ name, value, uiSchema }) => {
-  const [fieldState, setFieldState] = React.useState<ReadOnlyValueFieldStateType>({
+  const [fieldState, setFieldState] = useState<ReadOnlyValueFieldStateType>({
     loading: true,
     blob: null,
     blobText: null,
     objectUrl: null,
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     (async () => {
-      if (!(R.isString(value) && value.startsWith("http") && uiSchema?.[name]["ui:field"] === "file")) {
+      if (!(isString(value) && value.startsWith("http") && uiSchema?.[name]["ui:field"] === "file")) {
         setFieldState((ps) => ({ ...ps, loading: false }));
         return;
       }
@@ -248,7 +260,7 @@ const ReadOnlyValueField: React.FC<{
         )}
         {fieldState.blob.type.startsWith("application/json") && fieldState.blobText && (
           <Box sx={{ maxWidth: "600px", overflow: "auto" }}>
-            <Components.LottieDebugPanel data={JSON.parse(fieldState.blobText)} />
+            <LottieDebugPanel data={JSON.parse(fieldState.blobText)} />
           </Box>
         )}
         <a href={value as string}>링크</a>
@@ -264,7 +276,7 @@ type InnerAdminEditorStateType = {
   formData: Record<string, string> | undefined;
 };
 
-const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = ErrorBoundary.with(
+const InnerAdminEditor: FC<AppResourceIdType & AdminEditorPropsType> = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with(
     { fallback: <CircularProgress /> },
@@ -284,8 +296,8 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
       children,
     }) => {
       const navigate = useNavigate();
-      const formRef = React.useRef<Form<Record<string, string>, RJSFSchema, { [k in string]: unknown }> | null>(null);
-      const [editorState, setEditorState] = React.useState<InnerAdminEditorStateType>({
+      const formRef = useRef<Form<Record<string, string>, RJSFSchema, { [k in string]: unknown }> | null>(null);
+      const [editorState, setEditorState] = useState<InnerAdminEditorStateType>({
         tab: 0,
         formData: undefined,
       });
@@ -295,7 +307,7 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
       const { data: choicesData } = useChoicesQuery(backendAdminClient, app, resource);
 
       // Merge choices into schema for FK/M2M fields
-      React.useMemo(() => {
+      useMemo(() => {
         if (!choicesData || !schemaInfo.schema.properties) return;
         for (const [fieldName, items] of Object.entries(choicesData)) {
           const prop = (schemaInfo.schema.properties as Record<string, RJSFSchema>)[fieldName];
@@ -308,7 +320,7 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
         }
       }, [choicesData, schemaInfo.schema]);
 
-      const setTab = (_: React.SyntheticEvent, tab: number) => setEditorState((ps) => ({ ...ps, tab }));
+      const setTab = (_: SyntheticEvent, tab: number) => setEditorState((ps) => ({ ...ps, tab }));
       const setFormData = (formData?: Record<string, string>) => setEditorState((ps) => ({ ...ps, formData }));
       const appendFormDataState = (data?: Record<string, string>) => setEditorState((ps) => ({ ...ps, formData: { ...ps.formData, ...data } }));
       const selectedLanguage = editorState.tab === 0 ? "ko" : "en";
@@ -319,7 +331,7 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
       const deleteMutation = useRemoveMutation(backendAdminClient, app, resource, id || "undefined");
       const submitMutation = id ? modifyMutation : createMutation;
 
-      React.useEffect(() => {
+      useEffect(() => {
         (async () => {
           if (!id) {
             setFormData(context || {});
@@ -332,9 +344,9 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
         // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [app, resource, id, context]);
 
-      const onSubmitButtonClick: React.MouseEventHandler<HTMLButtonElement> = () => formRef.current && formRef.current.submit();
+      const onSubmitButtonClick: MouseEventHandler<HTMLButtonElement> = () => formRef.current && formRef.current.submit();
 
-      const onSubmitFunc = (data: EditorFormDataEventType, event: React.FormEvent) => {
+      const onSubmitFunc = (data: EditorFormDataEventType, event: FormEvent) => {
         // react-jsonschema-form에서 주는 formData에는 translation_fields로 필터링된 필드가 빠져있어,
         // 사용자가 특정 탭에서 수정한 후 다른 탭으로 이동해서 수정하게 되면 이전 탭의 수정 내용이 사라지는 문제가 발생함.
         // 따라서, onChange로 항상 값이 추적되는 editorState.formData를 가장 우선적으로 사용함.
@@ -368,7 +380,7 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
 
       const goToCreateNew = () => navigate(`/${app}/${resource}/create`);
 
-      if (R.isNonNullish(hidingFields) && R.isObjectType(schemaInfo.schema.properties)) {
+      if (isNonNullish(hidingFields) && isObjectType(schemaInfo.schema.properties)) {
         schemaInfo.schema.properties = Object.entries(schemaInfo.schema.properties || {})
           .filter(([key]) => !hidingFields.includes(key))
           .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {} as RJSFSchema);
@@ -404,7 +416,7 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
         }
       };
 
-      React.useEffect(() => {
+      useEffect(() => {
         document.addEventListener("keydown", handleCtrlSAction);
         return () => {
           console.log("Removing event listener for Ctrl+S action");
@@ -502,18 +514,15 @@ const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = Err
   )
 );
 
-export const AdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = (props) => (
+export const AdminEditor: FC<AppResourceIdType & AdminEditorPropsType> = (props) => (
   <BackendAdminSignInGuard>
     <InnerAdminEditor {...props} />
   </BackendAdminSignInGuard>
 );
 
-export const AdminEditorCreateRoutePage: React.FC<AppResourceType & AdminEditorPropsType> = (props) => <AdminEditor {...props} />;
+export const AdminEditorCreateRoutePage: FC<AppResourceType & AdminEditorPropsType> = (props) => <AdminEditor {...props} />;
 
-export const AdminEditorModifyRoutePage: React.FC<AppResourceType & AdminEditorPropsType> = Suspense.with(
-  { fallback: <CircularProgress /> },
-  (props) => {
-    const { id } = useParams<{ id?: string }>();
-    return <AdminEditor {...props} id={id} />;
-  }
-);
+export const AdminEditorModifyRoutePage: FC<AppResourceType & AdminEditorPropsType> = Suspense.with({ fallback: <CircularProgress /> }, (props) => {
+  const { id } = useParams<{ id?: string }>();
+  return <AdminEditor {...props} id={id} />;
+});
diff --git a/apps/pyconkr-admin/src/components/layouts/admin_list.tsx b/apps/pyconkr-admin/src/components/layouts/admin_list.tsx
index ad8325d..fed1b82 100644
--- a/apps/pyconkr-admin/src/components/layouts/admin_list.tsx
+++ b/apps/pyconkr-admin/src/components/layouts/admin_list.tsx
@@ -4,18 +4,18 @@ import {
   useListQuery,
   useOpenApiSchemaQuery,
   useRemovePreparedMutation,
-} from "@frontend/common/src/hooks/useAdminAPI";
-import { extractQueryParameters } from "@frontend/common/src/utils";
+} from "@frontend/common/hooks/useAdminAPI";
+import { extractQueryParameters } from "@frontend/common/utils";
 import { Add, Delete, Edit } from "@mui/icons-material";
 import { Box, Button, CircularProgress, IconButton, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, type ReactNode, useMemo } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 
-import { addErrorSnackbar, addSnackbar } from "../../utils/snackbar";
-import { AdminListFilter } from "../elements/admin_list_filter";
-import { BackendAdminSignInGuard } from "../elements/admin_signin_guard";
-import { ErrorFallback } from "../elements/error_fallback";
+import { AdminListFilter } from "@apps/pyconkr-admin/components/elements/admin_list_filter";
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type ListRowType = {
   id: string;
@@ -29,7 +29,7 @@ export type AdminListColumn = {
   header: string;
   width?: string | number;
   align?: "left" | "right" | "center";
-  render?: (row: Record<string, unknown>) => React.ReactNode;
+  render?: (row: Record<string, unknown>) => ReactNode;
 };
 
 type AdminListProps = {
@@ -43,7 +43,7 @@ type AdminListProps = {
   enableRowActions?: boolean;
 };
 
-const InnerAdminList: React.FC<AdminListProps> = ErrorBoundary.with(
+const InnerAdminList: FC<AdminListProps> = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with(
     { fallback: <CircularProgress /> },
@@ -57,10 +57,7 @@ const InnerAdminList: React.FC<AdminListProps> = ErrorBoundary.with(
       const listQuery = useListQuery<ListRowType & Record<string, unknown>>(backendAdminClient, app, resource, filterParams);
 
       const openApiSchemaQuery = useOpenApiSchemaQuery(backendAdminClient);
-      const queryParameters = React.useMemo(
-        () => extractQueryParameters(openApiSchemaQuery.data, app, resource),
-        [openApiSchemaQuery.data, app, resource]
-      );
+      const queryParameters = useMemo(() => extractQueryParameters(openApiSchemaQuery.data, app, resource), [openApiSchemaQuery.data, app, resource]);
 
       const choicesQuery = useChoicesQuery(backendAdminClient, app, resource);
 
@@ -178,7 +175,7 @@ const InnerAdminList: React.FC<AdminListProps> = ErrorBoundary.with(
   )
 );
 
-export const AdminList: React.FC<AdminListProps> = (props) => (
+export const AdminList: FC<AdminListProps> = (props) => (
   <BackendAdminSignInGuard>
     <InnerAdminList {...props} />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/layouts/global.tsx b/apps/pyconkr-admin/src/components/layouts/global.tsx
index ff8e52e..6ec6910 100644
--- a/apps/pyconkr-admin/src/components/layouts/global.tsx
+++ b/apps/pyconkr-admin/src/components/layouts/global.tsx
@@ -18,7 +18,7 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import * as React from "react";
+import { CSSProperties, FC, useState } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 
 import { MiniVariantAppBar, MiniVariantDrawer } from "./sidebar";
@@ -76,12 +76,12 @@ const PageInnerContainer = styled(Box)(({ theme }) => ({
   flexGrow: 1,
 }));
 
-export const Layout: React.FC<{ routes: RouteDef[] }> = ({ routes }) => {
+export const Layout: FC<{ routes: RouteDef[] }> = ({ routes }) => {
   const navigate = useNavigate();
-  const [state, dispatch] = React.useState<LayoutState>({ showDrawer: false });
+  const [state, dispatch] = useState<LayoutState>({ showDrawer: false });
   const toggleDrawer = () => dispatch((ps) => ({ ...ps, showDrawer: !ps.showDrawer }));
 
-  const SidebarItem: React.FC<{ routeInfo: RouteDef }> = ({ routeInfo }) => {
+  const SidebarItem: FC<{ routeInfo: RouteDef }> = ({ routeInfo }) => {
     switch (routeInfo.type) {
       case "separator":
         return (
@@ -133,7 +133,7 @@ export const Layout: React.FC<{ routes: RouteDef[] }> = ({ routes }) => {
     }
   };
 
-  const menuButtonStyle: (t: Theme) => React.CSSProperties = (t) => ({
+  const menuButtonStyle: (t: Theme) => CSSProperties = (t) => ({
     width: `calc(${t.spacing(7)} + 1px)`,
     [t.breakpoints.up("sm")]: {
       width: `calc(${t.spacing(8)} + 1px)`,
diff --git a/apps/pyconkr-admin/src/components/pages/account/account.tsx b/apps/pyconkr-admin/src/components/pages/account/account.tsx
index ca6db0f..31fbc4b 100644
--- a/apps/pyconkr-admin/src/components/pages/account/account.tsx
+++ b/apps/pyconkr-admin/src/components/pages/account/account.tsx
@@ -1,12 +1,12 @@
-import { useBackendAdminClient, useSignedInUserQuery } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useSignedInUserQuery } from "@frontend/common/hooks/useAdminAPI";
 import { CircularProgress } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC } from "react";
 import { Navigate } from "react-router-dom";
 
-import { ErrorFallback } from "../../elements/error_fallback";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
 
-export const AccountRedirectPage: React.FC = ErrorBoundary.with(
+export const AccountRedirectPage: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const backendAdminAPIClient = useBackendAdminClient();
diff --git a/apps/pyconkr-admin/src/components/pages/account/manage.tsx b/apps/pyconkr-admin/src/components/pages/account/manage.tsx
index dbbdb03..0f82dd9 100644
--- a/apps/pyconkr-admin/src/components/pages/account/manage.tsx
+++ b/apps/pyconkr-admin/src/components/pages/account/manage.tsx
@@ -1,12 +1,12 @@
-import { me } from "@frontend/common/src/apis/admin_api";
-import { useBackendAdminClient, useChangePasswordMutation, useSignOutMutation } from "@frontend/common/src/hooks/useAdminAPI";
-import { getFormValue, isFormValid } from "@frontend/common/src/utils";
+import { me } from "@frontend/common/apis/admin_api";
+import { useBackendAdminClient, useChangePasswordMutation, useSignOutMutation } from "@frontend/common/hooks/useAdminAPI";
+import { getFormValue, isFormValid } from "@frontend/common/utils";
 import { Logout } from "@mui/icons-material";
 import { Button, Stack, Tab, Tabs, TextField, Typography } from "@mui/material";
-import * as React from "react";
+import { FC, FormEvent, SyntheticEvent, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type ChangePasswordFormType = {
   old_password: string;
@@ -14,15 +14,15 @@ type ChangePasswordFormType = {
   new_password_confirm: string;
 };
 
-export const AccountManagementPage: React.FC = () => {
-  const changePasswordFormRef = React.useRef<HTMLFormElement>(null);
-  const [pageState, setPageState] = React.useState<{ tab: number }>({ tab: 0 });
+export const AccountManagementPage: FC = () => {
+  const changePasswordFormRef = useRef<HTMLFormElement>(null);
+  const [pageState, setPageState] = useState<{ tab: number }>({ tab: 0 });
   const navigate = useNavigate();
   const backendAdminAPIClient = useBackendAdminClient();
   const signOutMutation = useSignOutMutation(backendAdminAPIClient);
   const changePasswordMutation = useChangePasswordMutation(backendAdminAPIClient);
 
-  const setTab = (_: React.SyntheticEvent, tab: number) => setPageState((ps) => ({ ...ps, tab }));
+  const setTab = (_: SyntheticEvent, tab: number) => setPageState((ps) => ({ ...ps, tab }));
 
   const handleSignOut = () => {
     signOutMutation.mutate(undefined, {
@@ -34,7 +34,7 @@ export const AccountManagementPage: React.FC = () => {
     });
   };
 
-  const handleChangePassword = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleChangePassword = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     event.stopPropagation();
 
@@ -59,7 +59,7 @@ export const AccountManagementPage: React.FC = () => {
     });
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     (async () => {
       const userInfo = await me(backendAdminAPIClient)();
       if (!userInfo) {
diff --git a/apps/pyconkr-admin/src/components/pages/account/sign_in.tsx b/apps/pyconkr-admin/src/components/pages/account/sign_in.tsx
index 82e4d1c..8f3799e 100644
--- a/apps/pyconkr-admin/src/components/pages/account/sign_in.tsx
+++ b/apps/pyconkr-admin/src/components/pages/account/sign_in.tsx
@@ -1,27 +1,27 @@
-import { useBackendAdminClient, useSignInMutation } from "@frontend/common/src/hooks/useAdminAPI";
-import { getFormValue } from "@frontend/common/src/utils";
-import { me } from "@frontend/common/src/apis/admin_api";
+import { me } from "@frontend/common/apis/admin_api";
+import { useBackendAdminClient, useSignInMutation } from "@frontend/common/hooks/useAdminAPI";
+import { getFormValue } from "@frontend/common/utils";
 import { Login } from "@mui/icons-material";
 import { Button, Stack, TextField, Typography } from "@mui/material";
-import * as React from "react";
+import { FC, FormEvent, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type PageStateType = {
   userJustSignedIn: boolean;
 };
 
-export const SignInPage: React.FC = () => {
+export const SignInPage: FC = () => {
   const navigate = useNavigate();
-  const formRef = React.useRef<HTMLFormElement>(null);
-  const [pageState, setPageState] = React.useState<PageStateType>({ userJustSignedIn: false });
+  const formRef = useRef<HTMLFormElement>(null);
+  const [pageState, setPageState] = useState<PageStateType>({ userJustSignedIn: false });
   const setUserJustSignedIn = () => setPageState((ps) => ({ ...ps, userJustSignedIn: true }));
 
   const backendAdminAPIClient = useBackendAdminClient();
   const signInMutation = useSignInMutation(backendAdminAPIClient);
 
-  const handleSignIn = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSignIn = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (!formRef.current) return;
 
@@ -39,7 +39,7 @@ export const SignInPage: React.FC = () => {
     });
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     (async () => {
       if (pageState.userJustSignedIn) return;
 
diff --git a/apps/pyconkr-admin/src/components/pages/external_api/google_oauth2_editor.tsx b/apps/pyconkr-admin/src/components/pages/external_api/google_oauth2_editor.tsx
index 5358720..31fcc74 100644
--- a/apps/pyconkr-admin/src/components/pages/external_api/google_oauth2_editor.tsx
+++ b/apps/pyconkr-admin/src/components/pages/external_api/google_oauth2_editor.tsx
@@ -1,12 +1,12 @@
-import { useBackendAdminClient, useIssueGoogleOAuth2AccessTokenMutation } from "@frontend/common/src/hooks/useAdminAPI";
-import { GoogleOAuth2AccessTokenResponseSchema } from "@frontend/common/src/schemas/backendAdminAPI";
+import { useBackendAdminClient, useIssueGoogleOAuth2AccessTokenMutation } from "@frontend/common/hooks/useAdminAPI";
+import { GoogleOAuth2AccessTokenResponseSchema } from "@frontend/common/schemas/backendAdminAPI";
 import { VpnKey } from "@mui/icons-material";
 import { Box, Button, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
-import * as React from "react";
+import { FC, ReactNode, useState } from "react";
 import { useParams } from "react-router-dom";
 
-import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar";
-import { AdminEditor } from "../../layouts/admin_editor";
+import { AdminEditor } from "@apps/pyconkr-admin/components/layouts/admin_editor";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type CachedToken = { issuedAt: number; response: GoogleOAuth2AccessTokenResponseSchema };
 type TokenState = { issuedAt: Date; response: GoogleOAuth2AccessTokenResponseSchema };
@@ -31,10 +31,10 @@ const loadCachedToken = (id: string): TokenState | null => {
   }
 };
 
-export const AdminGoogleOAuth2Editor: React.FC = () => {
+export const AdminGoogleOAuth2Editor: FC = () => {
   const { id } = useParams<{ id?: string }>();
   const backendAdminClient = useBackendAdminClient();
-  const [tokenState, setTokenState] = React.useState<TokenState | null>(() => (id ? loadCachedToken(id) : null));
+  const [tokenState, setTokenState] = useState<TokenState | null>(() => (id ? loadCachedToken(id) : null));
 
   const accessTokenMutation = useIssueGoogleOAuth2AccessTokenMutation(backendAdminClient, id ?? "");
 
@@ -51,7 +51,7 @@ export const AdminGoogleOAuth2Editor: React.FC = () => {
     });
   };
 
-  const renderValue = (key: string, value: unknown): React.ReactNode => {
+  const renderValue = (key: string, value: unknown): ReactNode => {
     if (Array.isArray(value)) {
       return (
         <Box component="ul" sx={{ m: 0, pl: 2 }}>
diff --git a/apps/pyconkr-admin/src/components/pages/file/upload.tsx b/apps/pyconkr-admin/src/components/pages/file/upload.tsx
index 251a60d..79f59c6 100644
--- a/apps/pyconkr-admin/src/components/pages/file/upload.tsx
+++ b/apps/pyconkr-admin/src/components/pages/file/upload.tsx
@@ -1,34 +1,34 @@
-import { useBackendAdminClient, useUploadPublicFileMutation } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useUploadPublicFileMutation } from "@frontend/common/hooks/useAdminAPI";
 import { CloudUpload, PermMedia } from "@mui/icons-material";
 import { Box, Button, Input, Stack, Typography } from "@mui/material";
-import * as React from "react";
+import { BaseSyntheticEvent, ChangeEvent, DragEvent, DragEventHandler, FC, MouseEventHandler, useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar";
-import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type PublicFileUploadPageStateType = {
   isMouseOnDragBox: boolean;
   _forceRerender: number;
 };
 
-const ignoreEvent = (e: React.BaseSyntheticEvent | Event) => {
+const ignoreEvent = (e: BaseSyntheticEvent | Event) => {
   e.preventDefault();
   e.stopPropagation();
 };
 
-const InnerPublicFileUploadPage: React.FC = () => {
+const InnerPublicFileUploadPage: FC = () => {
   const navigate = useNavigate();
-  const [state, setState] = React.useState<PublicFileUploadPageStateType>({
+  const [state, setState] = useState<PublicFileUploadPageStateType>({
     isMouseOnDragBox: false,
     _forceRerender: 0, // 강제 리렌더링을 위한 상태
   });
-  const fileInputRef = React.useRef<HTMLInputElement>(null);
-  const fileDragBoxRef = React.useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const fileDragBoxRef = useRef<HTMLDivElement>(null);
   const backendAdminClient = useBackendAdminClient();
   const uploadPublicFileMutation = useUploadPublicFileMutation(backendAdminClient);
 
-  const forceRerender = React.useCallback(
+  const forceRerender = useCallback(
     () =>
       setState((prev) => {
         let newValue = Math.random();
@@ -41,7 +41,7 @@ const InnerPublicFileUploadPage: React.FC = () => {
     []
   );
 
-  const onFileSelectButtonClick: React.MouseEventHandler = () => {
+  const onFileSelectButtonClick: MouseEventHandler = () => {
     if (fileInputRef.current) {
       fileInputRef.current.click();
     } else {
@@ -49,11 +49,11 @@ const InnerPublicFileUploadPage: React.FC = () => {
     }
   };
 
-  const onDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+  const onDragEnter = (e: DragEvent<HTMLDivElement>) => {
     ignoreEvent(e);
     setState((prev) => ({ ...prev, isMouseOnDragBox: true }));
   };
-  const onDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+  const onDragLeave = (e: DragEvent<HTMLDivElement>) => {
     // onDragLeave 이벤트는 자식 요소에 마우스가 들어갈 때도 발생합니다.
     // 따라서, 드래그 박스에 마우스가 있는지 확인하기 위해 마우스 위치를 확인하여 실제 onDragLeave 이벤트가 트리거되어야 하는지 확인합니다.
     // (e.relatedTarget는 Safari에서 지원되지 않아 사용할 수 없습니다.)
@@ -66,7 +66,7 @@ const InnerPublicFileUploadPage: React.FC = () => {
     if (!fileDragBoxRef.current.contains(currentHoveredElement) || (x === 0 && y === 0)) setState((prev) => ({ ...prev, isMouseOnDragBox: false }));
   };
 
-  const handleFile = React.useCallback(
+  const handleFile = useCallback(
     (file: File) => {
       if (!file || file.size === 0) {
         addSnackbar("파일을 찾을 수 없거나, 파일 크기가 0입니다.", "error");
@@ -99,7 +99,7 @@ const InnerPublicFileUploadPage: React.FC = () => {
     [forceRerender]
   );
 
-  const resetFileSelect = React.useCallback(() => {
+  const resetFileSelect = useCallback(() => {
     if (fileInputRef.current) {
       fileInputRef.current.value = ""; // 파일 선택 초기화
       fileInputRef.current.files = null; // 파일 목록 초기화
@@ -107,7 +107,7 @@ const InnerPublicFileUploadPage: React.FC = () => {
     }
   }, [forceRerender]);
 
-  const onFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
     ignoreEvent(e);
     setState((prev) => ({ ...prev, isMouseOnDragBox: false }));
 
@@ -132,7 +132,7 @@ const InnerPublicFileUploadPage: React.FC = () => {
     handleFile(file);
   };
 
-  const onClipboardPaste = React.useCallback(
+  const onClipboardPaste = useCallback(
     (event: DocumentEventMap["paste"]) => {
       ignoreEvent(event);
       setState((prev) => ({ ...prev, isMouseOnDragBox: false }));
@@ -159,7 +159,7 @@ const InnerPublicFileUploadPage: React.FC = () => {
     [handleFile]
   );
 
-  const onDrop: React.DragEventHandler<HTMLDivElement> = (event) => {
+  const onDrop: DragEventHandler<HTMLDivElement> = (event) => {
     ignoreEvent(event);
     setState((prev) => ({ ...prev, isMouseOnDragBox: false }));
 
@@ -187,7 +187,7 @@ const InnerPublicFileUploadPage: React.FC = () => {
     });
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener("paste", onClipboardPaste);
     return () => document.removeEventListener("paste", onClipboardPaste);
   }, [onClipboardPaste, state.isMouseOnDragBox]);
@@ -240,7 +240,7 @@ const InnerPublicFileUploadPage: React.FC = () => {
   );
 };
 
-export const PublicFileUploadPage: React.FC = () => (
+export const PublicFileUploadPage: FC = () => (
   <BackendAdminSignInGuard>
     <InnerPublicFileUploadPage />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/home.tsx b/apps/pyconkr-admin/src/components/pages/home.tsx
index fab4a35..ed2b558 100644
--- a/apps/pyconkr-admin/src/components/pages/home.tsx
+++ b/apps/pyconkr-admin/src/components/pages/home.tsx
@@ -1,6 +1,5 @@
-import * as React from "react";
-
-export const LandingPage: React.FC = () => (
+import { FC } from "react";
+export const LandingPage: FC = () => (
   <div>
     <h1>PyCon Korea Admin</h1>
     <p>
diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/components.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/components.tsx
index 3fbfaa1..02447b7 100644
--- a/apps/pyconkr-admin/src/components/pages/modification_audit/components.tsx
+++ b/apps/pyconkr-admin/src/components/pages/modification_audit/components.tsx
@@ -1,6 +1,6 @@
-import { Components } from "@frontend/common";
-import { useBackendAdminClient, usePublicFileQuery } from "@frontend/common/src/hooks/useAdminAPI";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+import { FallbackImage, Fieldset, MDXRenderer } from "@frontend/common/components";
+import { useBackendAdminClient, usePublicFileQuery } from "@frontend/common/hooks/useAdminAPI";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
 import {
   Accordion,
   AccordionDetails,
@@ -17,9 +17,8 @@ import {
   TextFieldProps,
   Typography,
 } from "@mui/material";
-import * as React from "react";
-import * as R from "remeda";
-
+import { FC, ReactNode } from "react";
+import { isArray, isEmpty } from "remeda";
 type SharedPreviewFieldProps = {
   originalDataset: Record<string, unknown>;
   previewDataset: Record<string, unknown>;
@@ -39,7 +38,7 @@ const MarkdownContainerBox = styled(Box)(({ theme }) => ({
   },
 }));
 
-export const PreviewTextField: React.FC<PreviewFieldProps> = ({ originalDataset, previewDataset, name, ...props }) => {
+export const PreviewTextField: FC<PreviewFieldProps> = ({ originalDataset, previewDataset, name, ...props }) => {
   const textFieldSx: TextFieldProps["sx"] = {
     "& .MuiInputBase-input, & .Mui-disabled": {
       color: "black",
@@ -78,61 +77,51 @@ export const PreviewTextField: React.FC<PreviewFieldProps> = ({ originalDataset,
   );
 };
 
-export const PreviewMarkdownField: React.FC<SharedPreviewFieldProps> = ({ originalDataset, previewDataset, name, label }) => {
+export const PreviewMarkdownField: FC<SharedPreviewFieldProps> = ({ originalDataset, previewDataset, name, label }) => {
   const { baseUrl, mdxComponents } = useCommonContext();
   return originalDataset[name] === previewDataset[name] ? (
-    <Components.Fieldset legend={label} style={{ width: "100%" }}>
+    <Fieldset legend={label} style={{ width: "100%" }}>
       <MarkdownContainerBox>
-        <Components.MDXRenderer format="md" text={(previewDataset[name] as string) || "(값 없음)"} baseUrl={baseUrl} mdxComponents={mdxComponents} />
+        <MDXRenderer format="md" text={(previewDataset[name] as string) || "(값 없음)"} baseUrl={baseUrl} mdxComponents={mdxComponents} />
       </MarkdownContainerBox>
-    </Components.Fieldset>
+    </Fieldset>
   ) : (
     <Box sx={{ my: 1 }}>
       <Accordion>
         <AccordionSummary>
           <Stack sx={{ width: "100%" }} direction="column" alignItems="flex-start" justifyContent="space-between">
-            <Components.Fieldset legend={label} style={{ width: "100%", backgroundColor: "rgba(255, 255, 0, 0.1)" }}>
+            <Fieldset legend={label} style={{ width: "100%", backgroundColor: "rgba(255, 255, 0, 0.1)" }}>
               <MarkdownContainerBox>
-                <Components.MDXRenderer
-                  format="md"
-                  text={(previewDataset[name] as string) || "(값 없음)"}
-                  baseUrl={baseUrl}
-                  mdxComponents={mdxComponents}
-                />
+                <MDXRenderer format="md" text={(previewDataset[name] as string) || "(값 없음)"} baseUrl={baseUrl} mdxComponents={mdxComponents} />
               </MarkdownContainerBox>
-            </Components.Fieldset>
+            </Fieldset>
             <Typography variant="caption">기존 값을 보려면 여기를 클릭해주세요.</Typography>
           </Stack>
         </AccordionSummary>
         <AccordionDetails>
-          <Components.Fieldset legend={label} style={{ backgroundColor: "rgba(0, 64, 64, 0.1)" }}>
+          <Fieldset legend={label} style={{ backgroundColor: "rgba(0, 64, 64, 0.1)" }}>
             <MarkdownContainerBox>
-              <Components.MDXRenderer
-                format="md"
-                text={(originalDataset[name] as string) || "(값 없음)"}
-                baseUrl={baseUrl}
-                mdxComponents={mdxComponents}
-              />
+              <MDXRenderer format="md" text={(originalDataset[name] as string) || "(값 없음)"} baseUrl={baseUrl} mdxComponents={mdxComponents} />
             </MarkdownContainerBox>
-          </Components.Fieldset>
+          </Fieldset>
         </AccordionDetails>
       </Accordion>
     </Box>
   );
 };
 
-const ImageFallback: React.FC = () => (
+const ImageFallback: FC = () => (
   <Stack sx={{ width: "100%", height: "100%", alignItems: "center", justifyContent: "center" }}>
     <Typography variant="caption" color="textSecondary" children="이미지를 불러오는 중 문제가 발생했습니다." />
   </Stack>
 );
 
-const WidthSpecifiedFallbackImage = styled(Components.FallbackImage)({
+const WidthSpecifiedFallbackImage = styled(FallbackImage)({
   maxWidth: "20rem",
   objectFit: "cover",
 });
 
-export const PreviewImageField: React.FC<SharedPreviewFieldProps> = ({ originalDataset, previewDataset, name, label }) => {
+export const PreviewImageField: FC<SharedPreviewFieldProps> = ({ originalDataset, previewDataset, name, label }) => {
   const backendAdminClient = useBackendAdminClient();
   const oldImgId = (originalDataset[name] as string) || "";
   const newImgId = (previewDataset[name] as string) || "";
@@ -141,7 +130,7 @@ export const PreviewImageField: React.FC<SharedPreviewFieldProps> = ({ originalD
   const { data: previewImage } = usePublicFileQuery(backendAdminClient, newImgId);
 
   return originalImage?.id === previewImage?.id ? (
-    <Components.Fieldset legend={label} style={{ width: "100%" }}>
+    <Fieldset legend={label} style={{ width: "100%" }}>
       <Stack alignItems="center" justifyContent="center">
         {previewImage?.file ? (
           <WidthSpecifiedFallbackImage src={previewImage?.file || ""} alt={label} errorFallback={<ImageFallback />} />
@@ -149,13 +138,13 @@ export const PreviewImageField: React.FC<SharedPreviewFieldProps> = ({ originalD
           <Typography variant="caption" children="이미지를 지정하지 않았습니다." />
         )}
       </Stack>
-    </Components.Fieldset>
+    </Fieldset>
   ) : (
     <Box sx={{ my: 1 }}>
       <Accordion>
         <AccordionSummary>
           <Stack sx={{ width: "100%" }} direction="column" alignItems="flex-start" justifyContent="space-between">
-            <Components.Fieldset legend={label} style={{ width: "100%", backgroundColor: "rgba(255, 255, 0, 0.1)" }}>
+            <Fieldset legend={label} style={{ width: "100%", backgroundColor: "rgba(255, 255, 0, 0.1)" }}>
               <Stack alignItems="center" justifyContent="center">
                 {previewImage?.file ? (
                   <WidthSpecifiedFallbackImage src={previewImage?.file || ""} alt={label} errorFallback={<ImageFallback />} />
@@ -163,12 +152,12 @@ export const PreviewImageField: React.FC<SharedPreviewFieldProps> = ({ originalD
                   <Typography variant="caption" children="새 이미지를 지정하지 않았습니다." />
                 )}
               </Stack>
-            </Components.Fieldset>
+            </Fieldset>
             <Typography variant="caption">기존 이미지를 보려면 여기를 클릭해주세요.</Typography>
           </Stack>
         </AccordionSummary>
         <AccordionDetails>
-          <Components.Fieldset legend={label} style={{ backgroundColor: "rgba(0, 64, 64, 0.1)" }}>
+          <Fieldset legend={label} style={{ backgroundColor: "rgba(0, 64, 64, 0.1)" }}>
             <Stack alignItems="center" justifyContent="center">
               {originalImage?.file ? (
                 <WidthSpecifiedFallbackImage src={originalImage?.file || ""} alt={label} errorFallback={<ImageFallback />} />
@@ -176,7 +165,7 @@ export const PreviewImageField: React.FC<SharedPreviewFieldProps> = ({ originalD
                 <Typography variant="caption" children="기존 이미지를 지정하지 않았습니다." />
               )}
             </Stack>
-          </Components.Fieldset>
+          </Fieldset>
         </AccordionDetails>
       </Accordion>
     </Box>
@@ -194,9 +183,9 @@ type SimplifiedModificationAudit = {
   }[];
 };
 
-export const ModificationAuditProperties: React.FC<{ audit: SimplifiedModificationAudit }> = ({ audit }) => {
-  let rejectReason: React.ReactNode = null;
-  if (R.isArray(audit.comments) && !R.isEmpty(audit.comments.filter((c) => c.created_by.is_superuser))) {
+export const ModificationAuditProperties: FC<{ audit: SimplifiedModificationAudit }> = ({ audit }) => {
+  let rejectReason: ReactNode = null;
+  if (isArray(audit.comments) && !isEmpty(audit.comments.filter((c) => c.created_by.is_superuser))) {
     const comment = audit.comments.filter((c) => c.created_by.is_superuser)[0];
     rejectReason = (
       <>
diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/dialogs.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/dialogs.tsx
index 10da0cc..3a72f07 100644
--- a/apps/pyconkr-admin/src/components/pages/modification_audit/dialogs.tsx
+++ b/apps/pyconkr-admin/src/components/pages/modification_audit/dialogs.tsx
@@ -1,21 +1,20 @@
-import { Components } from "@frontend/common";
-import { useApproveModificationAuditMutation, useBackendAdminClient, useRejectModificationAuditMutation } from "@frontend/common/src/hooks/useAdminAPI";
-import { BackendAPIClientError } from "@frontend/common/src/apis";
+import { BackendAPIClientError } from "@frontend/common/apis";
+import { Fieldset } from "@frontend/common/components";
+import { useApproveModificationAuditMutation, useBackendAdminClient, useRejectModificationAuditMutation } from "@frontend/common/hooks/useAdminAPI";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, Typography } from "@mui/material";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
-
+import { FC, ReactNode, useRef } from "react";
 type SubmitConfirmDialogProps = {
   open: boolean;
   onClose: () => void;
   modificationAuditId: string;
 };
 
-export const ApproveSubmitConfirmDialog: React.FC<SubmitConfirmDialogProps> = ({ open, onClose, modificationAuditId }) => {
+export const ApproveSubmitConfirmDialog: FC<SubmitConfirmDialogProps> = ({ open, onClose, modificationAuditId }) => {
   const backendAdminClient = useBackendAdminClient();
   const approveModificationAuditMutation = useApproveModificationAuditMutation(backendAdminClient, modificationAuditId);
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const onApproveClick = () => {
@@ -51,12 +50,12 @@ export const ApproveSubmitConfirmDialog: React.FC<SubmitConfirmDialogProps> = ({
   );
 };
 
-export const RejectSubmitConfirmDialog: React.FC<SubmitConfirmDialogProps> = ({ open, onClose, modificationAuditId }) => {
-  const inputRef = React.useRef<HTMLInputElement>(null);
+export const RejectSubmitConfirmDialog: FC<SubmitConfirmDialogProps> = ({ open, onClose, modificationAuditId }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
   const backendAdminClient = useBackendAdminClient();
   const rejectModificationAuditMutation = useRejectModificationAuditMutation(backendAdminClient, modificationAuditId);
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const onRejectClick = () => {
@@ -85,9 +84,9 @@ export const RejectSubmitConfirmDialog: React.FC<SubmitConfirmDialogProps> = ({
           <br />
           반려 후에는 다시 승인할 수 없습니다!
         </Typography>
-        <Components.Fieldset legend="반려 사유 (선택)">
+        <Fieldset legend="반려 사유 (선택)">
           <TextField fullWidth multiline minRows={4} inputRef={inputRef} label="반려 사유" />
-        </Components.Fieldset>
+        </Fieldset>
       </DialogContent>
       <DialogActions>
         <Button loading={rejectModificationAuditMutation.isPending} onClick={onClose} color="error" children="취소" />
diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/list.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/list.tsx
index f17a7b8..139086e 100644
--- a/apps/pyconkr-admin/src/components/pages/modification_audit/list.tsx
+++ b/apps/pyconkr-admin/src/components/pages/modification_audit/list.tsx
@@ -1,11 +1,11 @@
-import { useBackendAdminClient, useListQuery } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useListQuery } from "@frontend/common/hooks/useAdminAPI";
 import { CircularProgress, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
 
-import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
-import { ErrorFallback } from "../../elements/error_fallback";
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
 
 type ListRowType = {
   id: string;
@@ -15,7 +15,7 @@ type ListRowType = {
   updated_at: string;
 };
 
-const InnerAdminModificationAuditList: React.FC = ErrorBoundary.with(
+const InnerAdminModificationAuditList: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const backendAdminClient = useBackendAdminClient();
@@ -58,7 +58,7 @@ const InnerAdminModificationAuditList: React.FC = ErrorBoundary.with(
   })
 );
 
-export const AdminModificationAuditList: React.FC = () => (
+export const AdminModificationAuditList: FC = () => (
   <BackendAdminSignInGuard>
     <InnerAdminModificationAuditList />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/pages.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/pages.tsx
index b892a1f..8e8489c 100644
--- a/apps/pyconkr-admin/src/components/pages/modification_audit/pages.tsx
+++ b/apps/pyconkr-admin/src/components/pages/modification_audit/pages.tsx
@@ -1,19 +1,20 @@
-import { useBackendAdminClient, useModificationAuditPreviewQuery } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useModificationAuditPreviewQuery } from "@frontend/common/hooks/useAdminAPI";
 import { Box, Button, CircularProgress, Divider, Stack, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, useState } from "react";
 import { Navigate, useParams } from "react-router-dom";
 
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+
 import { ModificationAuditProperties } from "./components";
 import { ApproveSubmitConfirmDialog, RejectSubmitConfirmDialog } from "./dialogs";
 import { SubModificationAuditPage } from "./sub_pages";
-import { ErrorFallback } from "../../elements/error_fallback";
-import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
 
 type EditorStateType = { actionStatus?: "approve" | "reject" };
 
-const InnerAdminModificationAuditEditor: React.FC = () => {
-  const [editorState, setEditorState] = React.useState<EditorStateType>({});
+const InnerAdminModificationAuditEditor: FC = () => {
+  const [editorState, setEditorState] = useState<EditorStateType>({});
   const { id } = useParams<{ id?: string }>();
 
   const backendAdminClient = useBackendAdminClient();
@@ -64,7 +65,7 @@ const InnerAdminModificationAuditEditor: React.FC = () => {
   );
 };
 
-export const AdminModificationAuditEditor: React.FC = () => {
+export const AdminModificationAuditEditor: FC = () => {
   return (
     <BackendAdminSignInGuard>
       <ErrorBoundary fallback={ErrorFallback}>
diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/presentation_preview.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/presentation_preview.tsx
index 5cdc474..2780c71 100644
--- a/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/presentation_preview.tsx
+++ b/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/presentation_preview.tsx
@@ -1,7 +1,8 @@
-import { Components } from "@frontend/common";
+import { Fieldset } from "@frontend/common/components";
 import { Card, Divider, TextField, Typography } from "@mui/material";
 
-import { PreviewImageField, PreviewMarkdownField, PreviewTextField } from "../components";
+import { PreviewImageField, PreviewMarkdownField, PreviewTextField } from "@apps/pyconkr-admin/components/pages/modification_audit/components";
+
 import { PresentationPreviewSchema, SubModificationAuditPageType } from "./types";
 
 type PresentationSpeakerPreviewItemProps = {
@@ -21,17 +22,17 @@ const isSpeakerModified = (original: PresentationPreviewSchema["speakers"][numbe
 
 const PresentationSpeakerPreviewItem: React.FC<PresentationSpeakerPreviewItemProps> = ({ originalSpeaker, modifiedSpeaker }) => {
   const innerSpeakerPreviewItem = (
-    <Components.Fieldset legend={`발표자: ${modifiedSpeaker.user.nickname_ko} (${modifiedSpeaker.user.nickname_en})`}>
-      <Components.Fieldset legend="발표자 별칭">
+    <Fieldset legend={`발표자: ${modifiedSpeaker.user.nickname_ko} (${modifiedSpeaker.user.nickname_en})`}>
+      <Fieldset legend="발표자 별칭">
         <TextField fullWidth disabled variant="outlined" value={modifiedSpeaker.user.nickname_ko} label="발표자 별칭 (국문)" sx={{ my: 1 }} />
         <TextField fullWidth disabled variant="outlined" value={modifiedSpeaker.user.nickname_en} label="발표자 별칭 (영문)" sx={{ my: 1 }} />
-      </Components.Fieldset>
+      </Fieldset>
       <PreviewImageField originalDataset={originalSpeaker} previewDataset={modifiedSpeaker} name="image_id" label="발표자 이미지" />
-      <Components.Fieldset legend="발표자 약력">
+      <Fieldset legend="발표자 약력">
         <PreviewMarkdownField originalDataset={originalSpeaker} previewDataset={modifiedSpeaker} name="biography_ko" label="발표자 약력 (국문)" />
         <PreviewMarkdownField originalDataset={originalSpeaker} previewDataset={modifiedSpeaker} name="biography_en" label="발표자 약력 (영문)" />
-      </Components.Fieldset>
-    </Components.Fieldset>
+      </Fieldset>
+    </Fieldset>
   );
 
   return isSpeakerModified(originalSpeaker, modifiedSpeaker) ? (
@@ -45,21 +46,21 @@ export const PresentationPreviewSubPage: SubModificationAuditPageType<Presentati
   return (
     <>
       <Typography variant="h6" fontWeight="bold" children="발표 내용" />
-      <Components.Fieldset legend="제목">
+      <Fieldset legend="제목">
         <PreviewTextField originalDataset={original} previewDataset={modified} name="title_ko" label="제목 (한국어)" />
         <PreviewTextField originalDataset={original} previewDataset={modified} name="title_en" label="제목 (영어)" />
-      </Components.Fieldset>
-      <Components.Fieldset legend="발표 자료 URL">
+      </Fieldset>
+      <Fieldset legend="발표 자료 URL">
         <PreviewTextField originalDataset={original} previewDataset={modified} name="slideshow_url" label="발표 자료 URL" />
-      </Components.Fieldset>
-      <Components.Fieldset legend="요약">
+      </Fieldset>
+      <Fieldset legend="요약">
         <PreviewTextField originalDataset={original} previewDataset={modified} multiline name="summary_ko" label="요약 (한국어)" />
         <PreviewTextField originalDataset={original} previewDataset={modified} multiline name="summary_en" label="요약 (영어)" />
-      </Components.Fieldset>
-      <Components.Fieldset legend="상세 설명">
+      </Fieldset>
+      <Fieldset legend="상세 설명">
         <PreviewMarkdownField originalDataset={original} previewDataset={modified} name="description_ko" label="상세 설명 (한국어)" />
         <PreviewMarkdownField originalDataset={original} previewDataset={modified} name="description_en" label="상세 설명 (영어)" />
-      </Components.Fieldset>
+      </Fieldset>
       <PreviewImageField originalDataset={original} previewDataset={modified} name="image_id" label="발표 이미지" />
 
       <Divider sx={{ my: 1, borderColor: "black" }} />
diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/types.d.ts b/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/types.d.ts
index 3a8fe07..d1e4baa 100644
--- a/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/types.d.ts
+++ b/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/types.d.ts
@@ -1,4 +1,4 @@
-import BackendAdminAPISchemas from "../../../../../../../packages/common/src/schemas/backendAdminAPI";
+import BackendAdminAPISchemas from "@frontend/common/schemas/backendAdminAPI";
 
 export type ModificationAuditPreviewSchema<T> = BackendAdminAPISchemas.ModificationAuditPreviewSchema<T>;
 
diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/userext_preview.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/userext_preview.tsx
index ef15c67..b270448 100644
--- a/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/userext_preview.tsx
+++ b/apps/pyconkr-admin/src/components/pages/modification_audit/sub_pages/userext_preview.tsx
@@ -1,23 +1,24 @@
-import { Components } from "@frontend/common";
+import { Fieldset } from "@frontend/common/components";
 import { Typography } from "@mui/material";
 
-import { PreviewImageField, PreviewTextField } from "../components";
+import { PreviewImageField, PreviewTextField } from "@apps/pyconkr-admin/components/pages/modification_audit/components";
+
 import { SubModificationAuditPageType, UserPreviewSchema } from "./types";
 
 export const UserExtPreviewSubPage: SubModificationAuditPageType<UserPreviewSchema> = ({ original, modified }) => {
   return (
     <>
       <Typography variant="h6" fontWeight="bold" children="프로필 내용" />
-      <Components.Fieldset legend="계정 정보">
+      <Fieldset legend="계정 정보">
         <PreviewTextField originalDataset={original} previewDataset={modified} name="id" label="계정 일련번호" />
         <PreviewTextField originalDataset={original} previewDataset={modified} name="username" label="계정 ID" />
         <PreviewTextField originalDataset={original} previewDataset={modified} name="email" label="계정 이메일" />
-      </Components.Fieldset>
+      </Fieldset>
       <PreviewImageField originalDataset={original} previewDataset={modified} name="image_id" label="프로필 이미지" />
-      <Components.Fieldset legend="별칭">
+      <Fieldset legend="별칭">
         <PreviewTextField originalDataset={original} previewDataset={modified} multiline name="nickname_ko" label="별칭 (한국어)" />
         <PreviewTextField originalDataset={original} previewDataset={modified} multiline name="nickname_en" label="별칭 (영어)" />
-      </Components.Fieldset>
+      </Fieldset>
     </>
   );
 };
diff --git a/apps/pyconkr-admin/src/components/pages/notification/email_template_editor.tsx b/apps/pyconkr-admin/src/components/pages/notification/email_template_editor.tsx
index 17ce1d3..145e166 100644
--- a/apps/pyconkr-admin/src/components/pages/notification/email_template_editor.tsx
+++ b/apps/pyconkr-admin/src/components/pages/notification/email_template_editor.tsx
@@ -4,16 +4,16 @@ import {
   useRenderTemplateMutation,
   useRetrieveQuery,
   useUpdateMutation,
-} from "@frontend/common/src/hooks/useAdminAPI";
+} from "@frontend/common/hooks/useAdminAPI";
 import { Add, Close, Save, Visibility } from "@mui/icons-material";
 import { Box, Button, Chip, CircularProgress, IconButton, Stack, TextField, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
-import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar";
-import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
-import { ErrorFallback } from "../../elements/error_fallback";
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 const APP = "notification/email";
 const RESOURCE = "template";
@@ -48,7 +48,7 @@ const isValidJson = (s: string): boolean => {
   }
 };
 
-const InnerAdminEmailTemplateEditor: React.FC = ErrorBoundary.with(
+const InnerAdminEmailTemplateEditor: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const navigate = useNavigate();
@@ -56,14 +56,14 @@ const InnerAdminEmailTemplateEditor: React.FC = ErrorBoundary.with(
     const backendAdminClient = useBackendAdminClient();
     const { data: retrievedData } = useRetrieveQuery<EmailTemplateSchema>(backendAdminClient, APP, RESOURCE, id || "");
 
-    const [formData, setFormData] = React.useState<EmailTemplateFormData>(() => ({
+    const [formData, setFormData] = useState<EmailTemplateFormData>(() => ({
       code: retrievedData?.code ?? "",
       title: retrievedData?.title ?? "",
       description: retrievedData?.description ?? "",
       data: retrievedData?.data ?? "",
       sent_from: retrievedData?.sent_from ?? "",
     }));
-    const [contextJson, setContextJson] = React.useState("{}");
+    const [contextJson, setContextJson] = useState("{}");
 
     const createMutation = useCreateMutation<EmailTemplateFormData>(backendAdminClient, APP, RESOURCE);
     const updateMutation = useUpdateMutation<EmailTemplateFormData>(backendAdminClient, APP, RESOURCE, id || "");
@@ -197,7 +197,7 @@ const InnerAdminEmailTemplateEditor: React.FC = ErrorBoundary.with(
   })
 );
 
-export const AdminEmailTemplateEditor: React.FC = () => (
+export const AdminEmailTemplateEditor: FC = () => (
   <BackendAdminSignInGuard>
     <InnerAdminEmailTemplateEditor />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/notification/kakao_alimtalk_template_editor.tsx b/apps/pyconkr-admin/src/components/pages/notification/kakao_alimtalk_template_editor.tsx
index cedb2da..b30451f 100644
--- a/apps/pyconkr-admin/src/components/pages/notification/kakao_alimtalk_template_editor.tsx
+++ b/apps/pyconkr-admin/src/components/pages/notification/kakao_alimtalk_template_editor.tsx
@@ -1,12 +1,12 @@
-import { useBackendAdminClient, useRenderTemplateMutation, useRetrieveQuery } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useRenderTemplateMutation, useRetrieveQuery } from "@frontend/common/hooks/useAdminAPI";
 import { Close, Visibility } from "@mui/icons-material";
 import { Box, Button, Chip, CircularProgress, IconButton, Stack, TextField, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
-import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
-import { ErrorFallback } from "../../elements/error_fallback";
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
 
 const APP = "notification/kakao-alimtalk";
 const RESOURCE = "template";
@@ -38,7 +38,7 @@ const isValidJson = (s: string): boolean => {
   }
 };
 
-const InnerAdminKakaoAlimTalkTemplateEditor: React.FC = ErrorBoundary.with(
+const InnerAdminKakaoAlimTalkTemplateEditor: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const navigate = useNavigate();
@@ -46,7 +46,7 @@ const InnerAdminKakaoAlimTalkTemplateEditor: React.FC = ErrorBoundary.with(
     const backendAdminClient = useBackendAdminClient();
     const { data: retrievedData } = useRetrieveQuery<KakaoAlimTalkTemplateSchema>(backendAdminClient, APP, RESOURCE, id || "");
 
-    const [contextJson, setContextJson] = React.useState("{}");
+    const [contextJson, setContextJson] = useState("{}");
     const renderMutation = useRenderTemplateMutation(backendAdminClient, APP, RESOURCE);
 
     const onClose = () => navigate(`/${APP}/${RESOURCE}`);
@@ -131,7 +131,7 @@ const InnerAdminKakaoAlimTalkTemplateEditor: React.FC = ErrorBoundary.with(
   })
 );
 
-export const AdminKakaoAlimTalkTemplateEditor: React.FC = () => (
+export const AdminKakaoAlimTalkTemplateEditor: FC = () => (
   <BackendAdminSignInGuard>
     <InnerAdminKakaoAlimTalkTemplateEditor />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/notification/send_history_create.tsx b/apps/pyconkr-admin/src/components/pages/notification/send_history_create.tsx
index 251e5ce..d5e7581 100644
--- a/apps/pyconkr-admin/src/components/pages/notification/send_history_create.tsx
+++ b/apps/pyconkr-admin/src/components/pages/notification/send_history_create.tsx
@@ -1,5 +1,5 @@
-import { Components } from "@frontend/common";
-import { useBackendAdminClient, useCreateMutation, useListQuery, useRenderTemplateMutation } from "@frontend/common/src/hooks/useAdminAPI";
+import { Fieldset } from "@frontend/common/components";
+import { useBackendAdminClient, useCreateMutation, useListQuery, useRenderTemplateMutation } from "@frontend/common/hooks/useAdminAPI";
 import { Add, Close, Delete, Send, Visibility } from "@mui/icons-material";
 import {
   Box,
@@ -21,12 +21,12 @@ import {
   Typography,
 } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, Fragment, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar";
-import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
-import { ErrorFallback } from "../../elements/error_fallback";
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type NotificationChannelApp = "notification/email" | "notification/kakao-alimtalk" | "notification/sms";
 
@@ -121,7 +121,7 @@ type TemplateVariableFieldProps = {
   disabled?: boolean;
 };
 
-const TemplateVariableField: React.FC<TemplateVariableFieldProps> = ({ name, value, onChange, disabled }) => {
+const TemplateVariableField: FC<TemplateVariableFieldProps> = ({ name, value, onChange, disabled }) => {
   const error = validateTemplateVariable(name, value);
   return (
     <TextField
@@ -145,7 +145,7 @@ type SentToFormProps = {
   onPreview?: (item: OnMemorySentTo) => void;
 };
 
-const SentToForm: React.FC<SentToFormProps> = ({ item, app, perRecipientVarNames, onChange, onRemove, onPreview }) => {
+const SentToForm: FC<SentToFormProps> = ({ item, app, perRecipientVarNames, onChange, onRemove, onPreview }) => {
   const setContextField = (varName: string, value: string) => onChange({ ...item, context: { ...item.context, [varName]: value } });
   const recipientError = validateRecipientForApp(app, item.recipient);
   return (
@@ -161,7 +161,7 @@ const SentToForm: React.FC<SentToFormProps> = ({ item, app, perRecipientVarNames
             fullWidth
           />
           {perRecipientVarNames.length > 0 && (
-            <Components.Fieldset legend="템플릿 변수">
+            <Fieldset legend="템플릿 변수">
               <Stack spacing={1}>
                 {perRecipientVarNames.map((varName) => (
                   <TemplateVariableField
@@ -172,7 +172,7 @@ const SentToForm: React.FC<SentToFormProps> = ({ item, app, perRecipientVarNames
                   />
                 ))}
               </Stack>
-            </Components.Fieldset>
+            </Fieldset>
           )}
           <Stack direction="row" justifyContent="flex-end" spacing={1}>
             {onPreview && (
@@ -190,14 +190,14 @@ const SentToForm: React.FC<SentToFormProps> = ({ item, app, perRecipientVarNames
   );
 };
 
-const InnerAdminNotificationHistoryCreate: React.FC<AdminNotificationHistoryCreateProps> = ErrorBoundary.with(
+const InnerAdminNotificationHistoryCreate: FC<AdminNotificationHistoryCreateProps> = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, ({ app }) => {
     const navigate = useNavigate();
     const backendAdminClient = useBackendAdminClient();
     const createMutation = useCreateMutation<NotificationHistoryCreateRequest>(backendAdminClient, app, RESOURCE);
 
-    const [formData, setFormData] = React.useState<{
+    const [formData, setFormData] = useState<{
       template: string | null;
       template_data: string;
       sent_from: string;
@@ -206,9 +206,9 @@ const InnerAdminNotificationHistoryCreate: React.FC<AdminNotificationHistoryCrea
       template_data: "",
       sent_from: "",
     });
-    const [sentToList, setSentToList] = React.useState<OnMemorySentTo[]>([]);
-    const [templateContext, setTemplateContext] = React.useState<Record<string, string>>({});
-    const [globalVarFlags, setGlobalVarFlags] = React.useState<Record<string, boolean>>({});
+    const [sentToList, setSentToList] = useState<OnMemorySentTo[]>([]);
+    const [templateContext, setTemplateContext] = useState<Record<string, string>>({});
+    const [globalVarFlags, setGlobalVarFlags] = useState<Record<string, boolean>>({});
 
     const templateListQuery = useListQuery<NotificationTemplateSchema>(backendAdminClient, app, TEMPLATE_RESOURCE);
     const renderTemplateMutation = useRenderTemplateMutation(backendAdminClient, app, TEMPLATE_RESOURCE);
@@ -353,12 +353,12 @@ const InnerAdminNotificationHistoryCreate: React.FC<AdminNotificationHistoryCrea
                       helperText={selectedTemplate ? "선택된 템플릿의 sent_from 값을 사용합니다." : sentFromError || undefined}
                       fullWidth
                     />
-                    <Components.Fieldset legend="템플릿 변수">
+                    <Fieldset legend="템플릿 변수">
                       {templateVariables.map((varName) => {
                         const isAllRecipientsForbidden = NotAppliableToAllRecipientsFieldList.includes(varName);
                         const globalChecked = isGlobalVar(varName);
                         return (
-                          <React.Fragment key={varName}>
+                          <Fragment key={varName}>
                             <TemplateVariableField
                               name={varName}
                               value={templateContext[varName] ?? ""}
@@ -375,10 +375,10 @@ const InnerAdminNotificationHistoryCreate: React.FC<AdminNotificationHistoryCrea
                               }
                               label="모든 수신자에게 적용"
                             />
-                          </React.Fragment>
+                          </Fragment>
                         );
                       })}
-                    </Components.Fieldset>
+                    </Fieldset>
                   </>
                 )}
               </Stack>
@@ -451,7 +451,7 @@ const InnerAdminNotificationHistoryCreate: React.FC<AdminNotificationHistoryCrea
   })
 );
 
-export const AdminNotificationHistoryCreate: React.FC<AdminNotificationHistoryCreateProps> = (props) => (
+export const AdminNotificationHistoryCreate: FC<AdminNotificationHistoryCreateProps> = (props) => (
   <BackendAdminSignInGuard>
     <InnerAdminNotificationHistoryCreate {...props} />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/notification/send_history_result.tsx b/apps/pyconkr-admin/src/components/pages/notification/send_history_result.tsx
index a73018b..373a911 100644
--- a/apps/pyconkr-admin/src/components/pages/notification/send_history_result.tsx
+++ b/apps/pyconkr-admin/src/components/pages/notification/send_history_result.tsx
@@ -4,7 +4,7 @@ import {
   useRetrieveQuery,
   useRetryHistoryMutation,
   useRetrySentToMutation,
-} from "@frontend/common/src/hooks/useAdminAPI";
+} from "@frontend/common/hooks/useAdminAPI";
 import { Add, Close, ExpandLess, ExpandMore, Replay } from "@mui/icons-material";
 import {
   alpha,
@@ -30,12 +30,12 @@ import {
   Typography,
 } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, MouseEvent, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 
-import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar";
-import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
-import { ErrorFallback } from "../../elements/error_fallback";
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type NotificationChannelApp = "notification/email" | "notification/kakao-alimtalk" | "notification/sms";
 
@@ -102,8 +102,8 @@ type SentToListItemProps = {
   onSelect: (sentToId: string) => void;
 };
 
-const SentToListItem: React.FC<SentToListItemProps> = ({ item, app, historyId, selected, onSelect }) => {
-  const [open, setOpen] = React.useState(false);
+const SentToListItem: FC<SentToListItemProps> = ({ item, app, historyId, selected, onSelect }) => {
+  const [open, setOpen] = useState(false);
   const backendAdminClient = useBackendAdminClient();
   const retryMutation = useRetrySentToMutation(backendAdminClient, app, RESOURCE, historyId, item.id);
 
@@ -112,7 +112,7 @@ const SentToListItem: React.FC<SentToListItemProps> = ({ item, app, historyId, s
     onSelect(item.id);
   };
 
-  const handleRetry = (e: React.MouseEvent) => {
+  const handleRetry = (e: MouseEvent) => {
     e.stopPropagation();
     if (retryMutation.isPending) return;
     if (!window.confirm("재시도하시겠습니까?")) return;
@@ -161,7 +161,7 @@ const SentToListItem: React.FC<SentToListItemProps> = ({ item, app, historyId, s
   );
 };
 
-const InnerAdminNotificationHistoryEditor: React.FC<AdminNotificationHistoryEditorProps> = ErrorBoundary.with(
+const InnerAdminNotificationHistoryEditor: FC<AdminNotificationHistoryEditorProps> = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, ({ app }) => {
     const navigate = useNavigate();
@@ -169,14 +169,14 @@ const InnerAdminNotificationHistoryEditor: React.FC<AdminNotificationHistoryEdit
 
     const backendAdminClient = useBackendAdminClient();
     const { data: retrievedData } = useRetrieveQuery<NotificationHistorySchema>(backendAdminClient, app, RESOURCE, id || "");
-    const [statusFilter, setStatusFilter] = React.useState<Record<NotificationStatus, boolean>>({
+    const [statusFilter, setStatusFilter] = useState<Record<NotificationStatus, boolean>>({
       CREATED: true,
       SENDING: true,
       SENT: true,
       FAILED: true,
     });
-    const [selectedSentToId, setSelectedSentToId] = React.useState<string | null>(null);
-    const [renderTab, setRenderTab] = React.useState<0 | 1>(0);
+    const [selectedSentToId, setSelectedSentToId] = useState<string | null>(null);
+    const [renderTab, setRenderTab] = useState<0 | 1>(0);
     const renderQuery = useRenderSentToQuery(backendAdminClient, app, RESOURCE, id ?? "", selectedSentToId);
     const retryHistoryMutation = useRetryHistoryMutation(backendAdminClient, app, RESOURCE, id ?? "");
 
@@ -352,7 +352,7 @@ const InnerAdminNotificationHistoryEditor: React.FC<AdminNotificationHistoryEdit
   })
 );
 
-export const AdminNotificationHistoryEditor: React.FC<AdminNotificationHistoryEditorProps> = (props) => (
+export const AdminNotificationHistoryEditor: FC<AdminNotificationHistoryEditorProps> = (props) => (
   <BackendAdminSignInGuard>
     <InnerAdminNotificationHistoryEditor {...props} />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/notification/sms_template_editor.tsx b/apps/pyconkr-admin/src/components/pages/notification/sms_template_editor.tsx
index 05571b1..d0add09 100644
--- a/apps/pyconkr-admin/src/components/pages/notification/sms_template_editor.tsx
+++ b/apps/pyconkr-admin/src/components/pages/notification/sms_template_editor.tsx
@@ -4,16 +4,16 @@ import {
   useRenderTemplateMutation,
   useRetrieveQuery,
   useUpdateMutation,
-} from "@frontend/common/src/hooks/useAdminAPI";
+} from "@frontend/common/hooks/useAdminAPI";
 import { Add, Close, Save, Visibility } from "@mui/icons-material";
 import { Box, Button, Chip, CircularProgress, IconButton, Stack, TextField, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
-import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar";
-import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
-import { ErrorFallback } from "../../elements/error_fallback";
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 const APP = "notification/sms";
 const RESOURCE = "template";
@@ -48,7 +48,7 @@ const isValidJson = (s: string): boolean => {
   }
 };
 
-const InnerAdminSMSTemplateEditor: React.FC = ErrorBoundary.with(
+const InnerAdminSMSTemplateEditor: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const navigate = useNavigate();
@@ -56,14 +56,14 @@ const InnerAdminSMSTemplateEditor: React.FC = ErrorBoundary.with(
     const backendAdminClient = useBackendAdminClient();
     const { data: retrievedData } = useRetrieveQuery<SMSTemplateSchema>(backendAdminClient, APP, RESOURCE, id || "");
 
-    const [formData, setFormData] = React.useState<SMSTemplateFormData>(() => ({
+    const [formData, setFormData] = useState<SMSTemplateFormData>(() => ({
       code: retrievedData?.code ?? "",
       title: retrievedData?.title ?? "",
       description: retrievedData?.description ?? "",
       data: retrievedData?.data ?? "",
       sent_from: retrievedData?.sent_from ?? "",
     }));
-    const [contextJson, setContextJson] = React.useState("{}");
+    const [contextJson, setContextJson] = useState("{}");
 
     const createMutation = useCreateMutation<SMSTemplateFormData>(backendAdminClient, APP, RESOURCE);
     const updateMutation = useUpdateMutation<SMSTemplateFormData>(backendAdminClient, APP, RESOURCE, id || "");
@@ -198,7 +198,7 @@ const InnerAdminSMSTemplateEditor: React.FC = ErrorBoundary.with(
   })
 );
 
-export const AdminSMSTemplateEditor: React.FC = () => (
+export const AdminSMSTemplateEditor: FC = () => (
   <BackendAdminSignInGuard>
     <InnerAdminSMSTemplateEditor />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/page/editor.tsx b/apps/pyconkr-admin/src/components/pages/page/editor.tsx
index 59b7c7d..c485103 100644
--- a/apps/pyconkr-admin/src/components/pages/page/editor.tsx
+++ b/apps/pyconkr-admin/src/components/pages/page/editor.tsx
@@ -1,18 +1,18 @@
-import { Components } from "@frontend/common";
-import { useBackendAdminClient, useBulkUpdatePageSectionsMutation, useListPageSectionsQuery } from "@frontend/common/src/hooks/useAdminAPI";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+import { MDXEditor, MDXRenderer } from "@frontend/common/components";
+import { useBackendAdminClient, useBulkUpdatePageSectionsMutation, useListPageSectionsQuery } from "@frontend/common/hooks/useAdminAPI";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
+import { PageSectionSchema } from "@frontend/common/schemas/backendAdminAPI";
 import { Add, Delete, OpenInNew } from "@mui/icons-material";
 import { Box, Button, ButtonProps, CircularProgress, Divider, Stack, Tab, Tabs, ThemeProvider } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { commands } from "@uiw/react-md-editor";
-import * as React from "react";
+import { FC, SyntheticEvent, useState } from "react";
 import { useParams } from "react-router-dom";
 
-import { PageSectionSchema } from "../../../../../../packages/common/src/schemas/backendAdminAPI";
-import { muiTheme } from "../../../styles/globalStyles";
-import { addErrorSnackbar } from "../../../utils/snackbar";
-import { ErrorFallback } from "../../elements/error_fallback";
-import { AdminEditor } from "../../layouts/admin_editor";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { AdminEditor } from "@apps/pyconkr-admin/components/layouts/admin_editor";
+import { muiTheme } from "@apps/pyconkr-admin/styles/globalStyles";
+import { addErrorSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type SectionType = PageSectionSchema;
 
@@ -33,7 +33,7 @@ type SectionEditorPropType = CommonSectionEditorPropType & {
   onChange: (value: SectionType) => void;
 };
 
-const SectionTextEditor: React.FC<SectionTextEditorPropType> = ({ disabled, defaultValue, onInsertNewSection, onChange, onDelete }) => {
+const SectionTextEditor: FC<SectionTextEditorPropType> = ({ disabled, defaultValue, onInsertNewSection, onChange, onDelete }) => {
   const { baseUrl, mdxComponents } = useCommonContext();
   const deleteActionButton = commands.group([], {
     name: "delete",
@@ -46,21 +46,21 @@ const SectionTextEditor: React.FC<SectionTextEditorPropType> = ({ disabled, defa
   return (
     <Stack direction="row" spacing={2} sx={{ width: "100%", height: "100%", maxWidth: "100%" }}>
       <Stack sx={{ flexGrow: 1, width: "50%" }}>
-        <Components.MDXEditor disabled={disabled} defaultValue={defaultValue} onChange={onChange} extraCommands={[deleteActionButton]} />
+        <MDXEditor disabled={disabled} defaultValue={defaultValue} onChange={onChange} extraCommands={[deleteActionButton]} />
         <Button size="small" onClick={onInsertNewSection} startIcon={<Add />}>
           여기에 섹션 추가
         </Button>
       </Stack>
       <Box sx={{ flexGrow: 1, width: "50%", backgroundColor: "#fff" }}>
         <ThemeProvider theme={muiTheme}>
-          <Components.MDXRenderer text={defaultValue || ""} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
+          <MDXRenderer text={defaultValue || ""} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </ThemeProvider>
       </Box>
     </Stack>
   );
 };
 
-const SectionEditorField: React.FC<SectionEditorPropType> = ({ language, disabled, defaultValue, onInsertNewSection, onChange, onDelete }) => {
+const SectionEditorField: FC<SectionEditorPropType> = ({ language, disabled, defaultValue, onInsertNewSection, onChange, onDelete }) => {
   const onFieldChange = (key: "body_ko" | "body_en", value?: string) => onChange({ ...defaultValue, [key]: value });
 
   return (
@@ -81,20 +81,20 @@ type AdminCMSPageEditorStateType = {
   sections?: SectionType[];
 };
 
-export const AdminCMSPageEditor: React.FC = ErrorBoundary.with(
+export const AdminCMSPageEditor: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const { id } = useParams<{ id?: string }>();
     const { frontendDomain } = useCommonContext();
     const backendAdminClient = useBackendAdminClient();
     const { data: initialSections } = useListPageSectionsQuery(backendAdminClient, id || "");
-    const [editorState, setEditorState] = React.useState<AdminCMSPageEditorStateType>({
+    const [editorState, setEditorState] = useState<AdminCMSPageEditorStateType>({
       sections: initialSections,
       tab: 0,
     });
     const bulkUpdateSectionsMutation = useBulkUpdatePageSectionsMutation(backendAdminClient, id || "");
 
-    const setTab = (_: React.SyntheticEvent, selectedTab: number) => setEditorState((ps) => ({ ...ps, tab: selectedTab }));
+    const setTab = (_: SyntheticEvent, selectedTab: number) => setEditorState((ps) => ({ ...ps, tab: selectedTab }));
 
     const openOnSiteButton: ButtonProps = {
       variant: "outlined",
diff --git a/apps/pyconkr-admin/src/components/pages/presentation/editor.tsx b/apps/pyconkr-admin/src/components/pages/presentation/editor.tsx
index 0e39ec3..65bcf23 100644
--- a/apps/pyconkr-admin/src/components/pages/presentation/editor.tsx
+++ b/apps/pyconkr-admin/src/components/pages/presentation/editor.tsx
@@ -1,4 +1,4 @@
-import { Components } from "@frontend/common";
+import { Fieldset, MDXRenderer, MarkdownEditor } from "@frontend/common/components";
 import {
   useBackendAdminClient,
   useChoicesQuery,
@@ -7,8 +7,8 @@ import {
   useRemovePreparedMutation,
   useSchemaQuery,
   useUpdatePreparedMutation,
-} from "@frontend/common/src/hooks/useAdminAPI";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+} from "@frontend/common/hooks/useAdminAPI";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
 import { Autocomplete, Box, Button, Card, CardContent, CircularProgress, Stack, styled, Tab, Tabs, TextField, Typography } from "@mui/material";
 import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
@@ -16,11 +16,11 @@ import { PickerValue } from "@mui/x-date-pickers/internals";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { DateTime } from "luxon";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
+import { FC, ReactNode, SyntheticEvent, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 
-import { ErrorFallback } from "../../elements/error_fallback";
-import { AdminEditor } from "../../layouts/admin_editor";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { AdminEditor } from "@apps/pyconkr-admin/components/layouts/admin_editor";
 
 const DUMMY_UUID = "00000000-0000-4000-8000-000000000000";
 
@@ -96,10 +96,10 @@ type AutoCompleteType = {
   label: string;
 };
 
-const PresentationSpeakerForm: React.FC<PresentationSpeakerFormPropType> = ({ disabled, schema, speaker, onChange, onRemove }) => {
+const PresentationSpeakerForm: FC<PresentationSpeakerFormPropType> = ({ disabled, schema, speaker, onChange, onRemove }) => {
   const { baseUrl, mdxComponents } = useCommonContext();
-  const [formState, setFormState] = React.useState<PresentationSpeakerFormStateType>({ tab: "ko" });
-  const setLanguage = (_: React.SyntheticEvent, tab: "ko" | "en") => setFormState((ps) => ({ ...ps, tab }));
+  const [formState, setFormState] = useState<PresentationSpeakerFormStateType>({ tab: "ko" });
+  const setLanguage = (_: SyntheticEvent, tab: "ko" | "en") => setFormState((ps) => ({ ...ps, tab }));
 
   const userOptions: AutoCompleteType[] = schema.schema.properties.user.oneOf.map((item) => ({
     name: "user",
@@ -116,7 +116,7 @@ const PresentationSpeakerForm: React.FC<PresentationSpeakerFormPropType> = ({ di
 
   const bioField = formState.tab === "ko" ? "biography_ko" : "biography_en";
   const onSpeakerBioChange = (value?: string) => onChange({ ...speaker, [bioField]: value || "" });
-  const onSpeakerChange = (fieldName: string) => (_: React.SyntheticEvent, selected: AutoCompleteType | null) => {
+  const onSpeakerChange = (fieldName: string) => (_: SyntheticEvent, selected: AutoCompleteType | null) => {
     onChange({ ...speaker, [fieldName]: selected?.value || "" });
   };
   const onSpeakerRemove = () => {
@@ -155,10 +155,10 @@ const PresentationSpeakerForm: React.FC<PresentationSpeakerFormPropType> = ({ di
                 <Typography variant="subtitle2" component="legend" children="발표자 소개" />
                 <Stack direction="row" spacing={2}>
                   <Box sx={{ width: "50%", maxWidth: "50%" }}>
-                    <Components.MarkdownEditor disabled={disabled} value={speaker[bioField]} name={bioField} onChange={onSpeakerBioChange} />
+                    <MarkdownEditor disabled={disabled} value={speaker[bioField]} name={bioField} onChange={onSpeakerBioChange} />
                   </Box>
                   <MDXRendererContainer>
-                    <Components.MDXRenderer text={speaker[bioField]} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
+                    <MDXRenderer text={speaker[bioField]} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
                   </MDXRendererContainer>
                 </Stack>
               </MUIStyledFieldset>
@@ -206,7 +206,7 @@ type ScheduleFormPropType = {
   onRemove: (schedule: OnMemorySchedule) => void;
 };
 
-const PresentationScheduleForm: React.FC<ScheduleFormPropType> = ({ schema, disabled, schedule, onChange, onRemove }) => {
+const PresentationScheduleForm: FC<ScheduleFormPropType> = ({ schema, disabled, schedule, onChange, onRemove }) => {
   const roomOptions: AutoCompleteType[] = schema.schema.properties.room.oneOf.map((item) => ({
     name: "room",
     value: item.const || "",
@@ -214,7 +214,7 @@ const PresentationScheduleForm: React.FC<ScheduleFormPropType> = ({ schema, disa
   }));
   const currentSelectedRoom = roomOptions.find((r) => r.value === schedule.room?.toString());
 
-  const onSelectChange = (fieldName: string) => (_: React.SyntheticEvent, selected: AutoCompleteType | null) => {
+  const onSelectChange = (fieldName: string) => (_: SyntheticEvent, selected: AutoCompleteType | null) => {
     onChange({ ...schedule, [fieldName]: selected?.value || "" });
   };
 
@@ -274,12 +274,12 @@ type PresentationEditorStateType = {
   schedules: OnMemorySchedule[];
 };
 
-export const AdminPresentationEditor: React.FC = ErrorBoundary.with(
+export const AdminPresentationEditor: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const { id } = useParams<{ id?: string }>();
 
-    const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+    const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
       enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
     const backendAdminAPIClient = useBackendAdminClient();
@@ -302,8 +302,11 @@ export const AdminPresentationEditor: React.FC = ErrorBoundary.with(
     const { data: scheduleInitialData } = useListQuery<Schedule>(...scheduleQueryParams, { presentation });
     const schedules = scheduleInitialData.map((s) => ({ ...s, trackId: s.id || Math.random().toString(36).substring(2, 15) }));
 
-    React.useMemo(() => {
-      const mergeChoices = (schema: { schema?: { properties?: Record<string, { oneOf?: enumItemType[] }> } }, choices: Record<string, enumItemType[]>) => {
+    useMemo(() => {
+      const mergeChoices = (
+        schema: { schema?: { properties?: Record<string, { oneOf?: enumItemType[] }> } },
+        choices: Record<string, enumItemType[]>
+      ) => {
         if (!schema?.schema?.properties || !choices) return;
         for (const [fieldName, items] of Object.entries(choices)) {
           const prop = schema.schema.properties[fieldName];
@@ -332,7 +335,7 @@ export const AdminPresentationEditor: React.FC = ErrorBoundary.with(
       end_at: DateTime.now().plus({ hours: 1 }).toISO({ includeOffset: false }),
     });
 
-    const [editorState, setEditorState] = React.useState<PresentationEditorStateType>({ speakers, schedules });
+    const [editorState, setEditorState] = useState<PresentationEditorStateType>({ speakers, schedules });
     const onSpeakerCreate = () => setEditorState((ps) => ({ ...ps, speakers: [...ps.speakers, createEmptySpeaker()] }));
     const onSpeakerRemove = (oldSpeaker: OnMemoeryPresentationSpeaker) =>
       setEditorState((ps) => ({ ...ps, speakers: ps.speakers.filter((s) => s.trackId !== oldSpeaker.trackId) }));
@@ -386,7 +389,7 @@ export const AdminPresentationEditor: React.FC = ErrorBoundary.with(
       <AdminEditor app="event" resource="presentation" id={id} afterSubmit={onPresentationSubmit}>
         {id ? (
           <Stack sx={{ mb: 2 }} spacing={2}>
-            <Components.Fieldset legend="스케줄 정보">
+            <Fieldset legend="스케줄 정보">
               <Typography variant="h6">스케줄 정보</Typography>
               <Stack spacing={2}>
                 {editorState.schedules.map((s) => (
@@ -400,8 +403,8 @@ export const AdminPresentationEditor: React.FC = ErrorBoundary.with(
                 ))}
                 <Button variant="outlined" onClick={onScheduleCreate} children="스케줄 추가" />
               </Stack>
-            </Components.Fieldset>
-            <Components.Fieldset legend="발표자 정보">
+            </Fieldset>
+            <Fieldset legend="발표자 정보">
               <Typography variant="h6">발표자 정보</Typography>
               <Stack spacing={2}>
                 {editorState.speakers.map((s) => (
@@ -415,7 +418,7 @@ export const AdminPresentationEditor: React.FC = ErrorBoundary.with(
                 ))}
                 <Button variant="outlined" onClick={onSpeakerCreate} children="발표자 추가" />
               </Stack>
-            </Components.Fieldset>
+            </Fieldset>
           </Stack>
         ) : (
           <Stack>
diff --git a/apps/pyconkr-admin/src/components/pages/shop/_common/status_labels.ts b/apps/pyconkr-admin/src/components/pages/shop/_common/status_labels.ts
index dc1e038..322995e 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/_common/status_labels.ts
+++ b/apps/pyconkr-admin/src/components/pages/shop/_common/status_labels.ts
@@ -1,5 +1,5 @@
-import { OrderProductStatus, PaymentStatus } from "../order/types";
-import { ProductCurrentStatus } from "../product/types";
+import { OrderProductStatus, PaymentStatus } from "@apps/pyconkr-admin/components/pages/shop/order/types";
+import { ProductCurrentStatus } from "@apps/pyconkr-admin/components/pages/shop/product/types";
 
 type ChipColor = "default" | "primary" | "success" | "warning" | "error" | "info";
 
diff --git a/apps/pyconkr-admin/src/components/pages/shop/category_group/editor.tsx b/apps/pyconkr-admin/src/components/pages/shop/category_group/editor.tsx
index bed4e01..3f246be 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/category_group/editor.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/category_group/editor.tsx
@@ -1,4 +1,4 @@
-import { useBackendAdminClient, useRetrieveQuery } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useRetrieveQuery } from "@frontend/common/hooks/useAdminAPI";
 import { Add, Delete, Edit } from "@mui/icons-material";
 import {
   Button,
@@ -20,11 +20,11 @@ import {
 } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useMutation } from "@tanstack/react-query";
-import * as React from "react";
+import { FC, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
-import { addErrorSnackbar, addSnackbar } from "../../../../utils/snackbar";
-import { AdminEditor } from "../../../layouts/admin_editor";
+import { AdminEditor } from "@apps/pyconkr-admin/components/layouts/admin_editor";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type Category = {
   id?: string;
@@ -54,15 +54,15 @@ type CategoryDialogProps = {
   category?: Category;
 };
 
-const CategoryDialog: React.FC<CategoryDialogProps> = ({ open, onClose, group, category }) => {
+const CategoryDialog: FC<CategoryDialogProps> = ({ open, onClose, group, category }) => {
   const client = useBackendAdminClient();
 
-  const [values, setValues] = React.useState<CategoryFormValues>({
+  const [values, setValues] = useState<CategoryFormValues>({
     name: category?.name ?? "",
     priority: category ? String(category.priority) : "0",
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (open) {
       setValues({
         name: category?.name ?? "",
@@ -137,13 +137,13 @@ const CategoryDialog: React.FC<CategoryDialogProps> = ({ open, onClose, group, c
   );
 };
 
-const InnerChildCategoryList: React.FC<{ groupId: string }> = ErrorBoundary.with(
+const InnerChildCategoryList: FC<{ groupId: string }> = ErrorBoundary.with(
   { fallback: () => null },
   Suspense.with({ fallback: <CircularProgress /> }, ({ groupId }) => {
     const client = useBackendAdminClient();
     const groupQuery = useRetrieveQuery<CategoryGroup>(client, "shop", "category-groups", groupId);
     const group = groupQuery.data;
-    const [dialogState, setDialogState] = React.useState<{ open: boolean; category?: Category }>({ open: false });
+    const [dialogState, setDialogState] = useState<{ open: boolean; category?: Category }>({ open: false });
 
     const deleteMutation = useMutation({
       mutationFn: async (categoryId: string) => {
@@ -215,7 +215,7 @@ const InnerChildCategoryList: React.FC<{ groupId: string }> = ErrorBoundary.with
   })
 );
 
-export const ShopCategoryGroupEditorPage: React.FC = () => {
+export const ShopCategoryGroupEditorPage: FC = () => {
   const { id } = useParams<{ id?: string }>();
 
   return (
diff --git a/apps/pyconkr-admin/src/components/pages/shop/category_group/list.tsx b/apps/pyconkr-admin/src/components/pages/shop/category_group/list.tsx
index 81d44a7..f590004 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/category_group/list.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/category_group/list.tsx
@@ -1,7 +1,7 @@
-import * as React from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
 
-import { AdminList, AdminListColumn } from "../../../layouts/admin_list";
+import { AdminList, AdminListColumn } from "@apps/pyconkr-admin/components/layouts/admin_list";
 
 const columns: AdminListColumn[] = [
   {
@@ -31,4 +31,4 @@ const columns: AdminListColumn[] = [
   },
 ];
 
-export const ShopCategoryGroupListPage: React.FC = () => <AdminList app="shop" resource="category-groups" columns={columns} enableRowActions />;
+export const ShopCategoryGroupListPage: FC = () => <AdminList app="shop" resource="category-groups" columns={columns} enableRowActions />;
diff --git a/apps/pyconkr-admin/src/components/pages/shop/order/editor.tsx b/apps/pyconkr-admin/src/components/pages/shop/order/editor.tsx
index c0ae856..ca55e46 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/order/editor.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/order/editor.tsx
@@ -1,4 +1,4 @@
-import { useBackendAdminClient, useRetrieveQuery, useUpdateMutation } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useRetrieveQuery, useUpdateMutation } from "@frontend/common/hooks/useAdminAPI";
 import { CurrencyExchange, NotificationsActive, Save } from "@mui/icons-material";
 import {
   Alert,
@@ -19,36 +19,37 @@ import {
   Typography,
 } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, FormEvent, useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { ORDER_PRODUCT_STATUS_LABEL, PAYMENT_STATUS_LABEL } from "@apps/pyconkr-admin/components/pages/shop/_common/status_labels";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
+
 import { RefundDialog } from "./refund_dialog";
 import { OrderAdmin, SimpleCustomerInfo, SimpleOrderProductRelation } from "./types";
-import { addErrorSnackbar, addSnackbar } from "../../../../utils/snackbar";
-import { BackendAdminSignInGuard } from "../../../elements/admin_signin_guard";
-import { ErrorFallback } from "../../../elements/error_fallback";
-import { ORDER_PRODUCT_STATUS_LABEL, PAYMENT_STATUS_LABEL } from "../_common/status_labels";
 
 const formatPrice = (price: number) => `₩${price.toLocaleString()}`;
 
 // ----------------- Customer Info Tab (editable) -----------------
-const CustomerInfoTab: React.FC<{ order: OrderAdmin }> = ({ order }) => {
+const CustomerInfoTab: FC<{ order: OrderAdmin }> = ({ order }) => {
   const client = useBackendAdminClient();
   const updateMutation = useUpdateMutation<{ customer_info: SimpleCustomerInfo }>(client, "shop", "orders", order.id);
 
-  const [name, setName] = React.useState(order.customer_info?.name ?? "");
-  const [phone, setPhone] = React.useState(order.customer_info?.phone ?? "");
-  const [email, setEmail] = React.useState(order.customer_info?.email ?? "");
-  const [organization, setOrganization] = React.useState(order.customer_info?.organization ?? "");
+  const [name, setName] = useState(order.customer_info?.name ?? "");
+  const [phone, setPhone] = useState(order.customer_info?.phone ?? "");
+  const [email, setEmail] = useState(order.customer_info?.email ?? "");
+  const [organization, setOrganization] = useState(order.customer_info?.organization ?? "");
 
-  React.useEffect(() => {
+  useEffect(() => {
     setName(order.customer_info?.name ?? "");
     setPhone(order.customer_info?.phone ?? "");
     setEmail(order.customer_info?.email ?? "");
     setOrganization(order.customer_info?.organization ?? "");
   }, [order.customer_info]);
 
-  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!name.trim() || !phone.trim() || !email.trim()) {
       addSnackbar("이름, 연락처, 이메일은 필수입니다.", "error");
@@ -89,7 +90,7 @@ const CustomerInfoTab: React.FC<{ order: OrderAdmin }> = ({ order }) => {
   );
 };
 
-const OrderProductRow: React.FC<{ relation: SimpleOrderProductRelation }> = ({ relation }) => {
+const OrderProductRow: FC<{ relation: SimpleOrderProductRelation }> = ({ relation }) => {
   const status = ORDER_PRODUCT_STATUS_LABEL[relation.status];
   return (
     <>
@@ -142,7 +143,7 @@ const OrderProductRow: React.FC<{ relation: SimpleOrderProductRelation }> = ({ r
   );
 };
 
-const OrderProductsTab: React.FC<{ order: OrderAdmin }> = ({ order }) => (
+const OrderProductsTab: FC<{ order: OrderAdmin }> = ({ order }) => (
   <Table>
     <TableHead>
       <TableRow>
@@ -168,7 +169,7 @@ const OrderProductsTab: React.FC<{ order: OrderAdmin }> = ({ order }) => (
   </Table>
 );
 
-const PaymentHistoryTab: React.FC<{ order: OrderAdmin; onRefund: () => void }> = ({ order, onRefund }) => {
+const PaymentHistoryTab: FC<{ order: OrderAdmin; onRefund: () => void }> = ({ order, onRefund }) => {
   const histories = [...order.payment_histories].sort((a, b) => (a.created_at < b.created_at ? -1 : 1));
   const canRefund = order.current_paid_price > 0 && (order.current_status === "completed" || order.current_status === "partial_refunded");
 
@@ -221,14 +222,14 @@ const PaymentHistoryTab: React.FC<{ order: OrderAdmin; onRefund: () => void }> =
   );
 };
 
-const InnerOrderEditor: React.FC = ErrorBoundary.with(
+const InnerOrderEditor: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const { id } = useParams<{ id?: string }>();
     const navigate = useNavigate();
     const client = useBackendAdminClient();
-    const [tab, setTab] = React.useState(0);
-    const [refundOpen, setRefundOpen] = React.useState(false);
+    const [tab, setTab] = useState(0);
+    const [refundOpen, setRefundOpen] = useState(false);
 
     const orderQuery = useRetrieveQuery<OrderAdmin>(client, "shop", "orders", id ?? "");
     const order = orderQuery.data;
@@ -345,7 +346,7 @@ const InnerOrderEditor: React.FC = ErrorBoundary.with(
   })
 );
 
-export const ShopOrderEditorPage: React.FC = () => (
+export const ShopOrderEditorPage: FC = () => (
   <BackendAdminSignInGuard>
     <InnerOrderEditor />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/shop/order/list.tsx b/apps/pyconkr-admin/src/components/pages/shop/order/list.tsx
index 56af830..1e56eaa 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/order/list.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/order/list.tsx
@@ -1,4 +1,4 @@
-import { useBackendAdminClient, useListPaginatedQuery, useListQuery } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useListPaginatedQuery, useListQuery } from "@frontend/common/hooks/useAdminAPI";
 import {
   Chip,
   CircularProgress,
@@ -14,16 +14,17 @@ import {
   Typography,
 } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, useMemo } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 
+import { AdminFilterFieldset } from "@apps/pyconkr-admin/components/elements/admin_filter_fieldset";
+import { AdminPagination } from "@apps/pyconkr-admin/components/elements/admin_pagination";
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { PAYMENT_STATUS_LABEL } from "@apps/pyconkr-admin/components/pages/shop/_common/status_labels";
+import { CategoryGroupAdminWithCategories } from "@apps/pyconkr-admin/components/pages/shop/product/types";
+
 import { OrderAdmin, PaymentStatus } from "./types";
-import { AdminFilterFieldset } from "../../../elements/admin_filter_fieldset";
-import { AdminPagination } from "../../../elements/admin_pagination";
-import { BackendAdminSignInGuard } from "../../../elements/admin_signin_guard";
-import { ErrorFallback } from "../../../elements/error_fallback";
-import { PAYMENT_STATUS_LABEL } from "../_common/status_labels";
-import { CategoryGroupAdminWithCategories } from "../product/types";
 
 const formatPrice = (price: number) => `₩${price.toLocaleString()}`;
 
@@ -31,7 +32,7 @@ const DEFAULT_PAGE_SIZE = 50;
 
 type StatusFilter = "all" | PaymentStatus;
 
-const InnerOrderList: React.FC = ErrorBoundary.with(
+const InnerOrderList: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const client = useBackendAdminClient();
@@ -65,7 +66,7 @@ const InnerOrderList: React.FC = ErrorBoundary.with(
     const ordersQuery = useListPaginatedQuery<OrderAdmin>(client, "shop", "orders", apiParams);
     const groupsQuery = useListQuery<CategoryGroupAdminWithCategories>(client, "shop", "category-groups", {});
     const { count = 0, results: orders = [] } = ordersQuery.data ?? {};
-    const groups = React.useMemo(() => groupsQuery.data ?? [], [groupsQuery.data]);
+    const groups = useMemo(() => groupsQuery.data ?? [], [groupsQuery.data]);
 
     const updateFilterParam = (key: string, value: string) => {
       const next = new URLSearchParams(searchParams);
@@ -261,7 +262,7 @@ const InnerOrderList: React.FC = ErrorBoundary.with(
   })
 );
 
-export const ShopOrderListPage: React.FC = () => (
+export const ShopOrderListPage: FC = () => (
   <BackendAdminSignInGuard>
     <InnerOrderList />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/shop/order/refund_dialog.tsx b/apps/pyconkr-admin/src/components/pages/shop/order/refund_dialog.tsx
index 6822646..4219e0a 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/order/refund_dialog.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/order/refund_dialog.tsx
@@ -1,10 +1,11 @@
-import { useBackendAdminClient } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient } from "@frontend/common/hooks/useAdminAPI";
 import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, TextField, Typography } from "@mui/material";
 import { useMutation } from "@tanstack/react-query";
-import * as React from "react";
+import { FC, useEffect, useState } from "react";
+
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 import { OrderAdmin } from "./types";
-import { addErrorSnackbar, addSnackbar } from "../../../../utils/snackbar";
 
 type RefundDialogProps = {
   open: boolean;
@@ -14,12 +15,12 @@ type RefundDialogProps = {
 
 const formatPrice = (price: number) => `₩${price.toLocaleString()}`;
 
-export const RefundDialog: React.FC<RefundDialogProps> = ({ open, onClose, order }) => {
+export const RefundDialog: FC<RefundDialogProps> = ({ open, onClose, order }) => {
   const client = useBackendAdminClient();
-  const [totp, setTotp] = React.useState("");
-  const [touched, setTouched] = React.useState(false);
+  const [totp, setTotp] = useState("");
+  const [touched, setTouched] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (open) {
       setTotp("");
       setTouched(false);
diff --git a/apps/pyconkr-admin/src/components/pages/shop/product/editor.tsx b/apps/pyconkr-admin/src/components/pages/shop/product/editor.tsx
index d537752..a1f6a71 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/product/editor.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/product/editor.tsx
@@ -5,7 +5,7 @@ import {
   useRemoveMutation,
   useRetrieveQuery,
   useUpdateMutation,
-} from "@frontend/common/src/hooks/useAdminAPI";
+} from "@frontend/common/hooks/useAdminAPI";
 import { Add, Delete, Edit } from "@mui/icons-material";
 import {
   Box,
@@ -23,20 +23,21 @@ import {
   Typography,
 } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, ReactNode, useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
+
 import { buildDefaultFormValues, ProductFormValues, toPayload } from "./form";
 import { BasicInfoTab } from "./tabs/basic_info_tab";
 import { OptionGroupsTab } from "./tabs/option_groups_tab";
 import { PriceOptionsTab } from "./tabs/price_options_tab";
 import { TimeSettingsTab } from "./tabs/time_settings_tab";
 import { CategoryGroupAdminWithCategories, ProductAdmin, TagAdmin } from "./types";
-import { addErrorSnackbar, addSnackbar } from "../../../../utils/snackbar";
-import { BackendAdminSignInGuard } from "../../../elements/admin_signin_guard";
-import { ErrorFallback } from "../../../elements/error_fallback";
 
-const formatLeftover = (v: number | null | undefined): React.ReactNode =>
+const formatLeftover = (v: number | null | undefined): ReactNode =>
   v === undefined ? (
     <Typography component="span" variant="body2" color="text.disabled">
       —
@@ -47,7 +48,7 @@ const formatLeftover = (v: number | null | undefined): React.ReactNode =>
     v.toLocaleString()
   );
 
-const InnerProductEditor: React.FC = ErrorBoundary.with(
+const InnerProductEditor: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const { id } = useParams<{ id?: string }>();
@@ -63,10 +64,10 @@ const InnerProductEditor: React.FC = ErrorBoundary.with(
     const groups = groupsQuery.data ?? [];
     const tags = tagsQuery.data ?? [];
 
-    const [tab, setTab] = React.useState(0);
-    const [values, setValues] = React.useState<ProductFormValues>(() => buildDefaultFormValues(existing));
+    const [tab, setTab] = useState(0);
+    const [values, setValues] = useState<ProductFormValues>(() => buildDefaultFormValues(existing));
 
-    React.useEffect(() => {
+    useEffect(() => {
       if (existing) setValues(buildDefaultFormValues(existing));
     }, [existing]);
 
@@ -249,7 +250,7 @@ const InnerProductEditor: React.FC = ErrorBoundary.with(
   })
 );
 
-export const ShopProductEditorPage: React.FC = () => (
+export const ShopProductEditorPage: FC = () => (
   <BackendAdminSignInGuard>
     <InnerProductEditor />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/shop/product/list.tsx b/apps/pyconkr-admin/src/components/pages/shop/product/list.tsx
index ac137d3..8847537 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/product/list.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/product/list.tsx
@@ -1,4 +1,4 @@
-import { useBackendAdminClient, useListQuery } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useListQuery } from "@frontend/common/hooks/useAdminAPI";
 import { Add, Delete, Edit } from "@mui/icons-material";
 import {
   Button,
@@ -18,14 +18,15 @@ import {
 } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useMutation } from "@tanstack/react-query";
-import * as React from "react";
+import { FC, useMemo } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
 
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { PRODUCT_STATUS_LABEL } from "@apps/pyconkr-admin/components/pages/shop/_common/status_labels";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
+
 import { CategoryGroupAdminWithCategories, ProductAdmin, ProductCurrentStatus } from "./types";
-import { addErrorSnackbar, addSnackbar } from "../../../../utils/snackbar";
-import { BackendAdminSignInGuard } from "../../../elements/admin_signin_guard";
-import { ErrorFallback } from "../../../elements/error_fallback";
-import { PRODUCT_STATUS_LABEL } from "../_common/status_labels";
 
 const formatPrice = (price: number) => `₩${price.toLocaleString()}`;
 const formatLeftoverStock = (leftover: number | null | undefined) => {
@@ -35,7 +36,7 @@ const formatLeftoverStock = (leftover: number | null | undefined) => {
 
 type StatusFilter = "all" | ProductCurrentStatus;
 
-const InnerProductList: React.FC = ErrorBoundary.with(
+const InnerProductList: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const client = useBackendAdminClient();
@@ -57,9 +58,9 @@ const InnerProductList: React.FC = ErrorBoundary.with(
     const groupsQuery = useListQuery<CategoryGroupAdminWithCategories>(client, "shop", "category-groups", {});
 
     const products = productsQuery.data ?? [];
-    const groups = React.useMemo(() => groupsQuery.data ?? [], [groupsQuery.data]);
+    const groups = useMemo(() => groupsQuery.data ?? [], [groupsQuery.data]);
 
-    const categoryToGroup: Record<string, { groupId: string; groupName: string; categoryName: string }> = React.useMemo(() => {
+    const categoryToGroup: Record<string, { groupId: string; groupName: string; categoryName: string }> = useMemo(() => {
       const map: Record<string, { groupId: string; groupName: string; categoryName: string }> = {};
       for (const g of groups) {
         for (const c of g.categories ?? []) {
@@ -206,7 +207,7 @@ const InnerProductList: React.FC = ErrorBoundary.with(
   })
 );
 
-export const ShopProductListPage: React.FC = () => (
+export const ShopProductListPage: FC = () => (
   <BackendAdminSignInGuard>
     <InnerProductList />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/shop/product/tabs/basic_info_tab.tsx b/apps/pyconkr-admin/src/components/pages/shop/product/tabs/basic_info_tab.tsx
index 40e0799..a6eed90 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/product/tabs/basic_info_tab.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/product/tabs/basic_info_tab.tsx
@@ -1,5 +1,5 @@
-import { Components } from "@frontend/common";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+import { MarkdownEditor, MDXRenderer } from "@frontend/common/components";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
 import {
   Autocomplete,
   Box,
@@ -15,12 +15,12 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import * as React from "react";
+import { FC, useState } from "react";
 
-import { IMAGE_FILE_EXTENSIONS } from "../../../../../consts/file_extensions";
-import { PublicFilePicker } from "../../../../elements/public_file_picker";
-import { ProductFormValues, SetField } from "../form";
-import { CategoryGroupAdminWithCategories, TagAdmin } from "../types";
+import { PublicFilePicker } from "@apps/pyconkr-admin/components/elements/public_file_picker";
+import { ProductFormValues, SetField } from "@apps/pyconkr-admin/components/pages/shop/product/form";
+import { CategoryGroupAdminWithCategories, TagAdmin } from "@apps/pyconkr-admin/components/pages/shop/product/types";
+import { IMAGE_FILE_EXTENSIONS } from "@apps/pyconkr-admin/consts/file_extensions";
 
 const MUIStyledFieldset = styled("fieldset")(({ theme }) => ({
   color: theme.palette.text.secondary,
@@ -47,8 +47,8 @@ type Props = {
   tags: TagAdmin[];
 };
 
-export const BasicInfoTab: React.FC<Props> = ({ values, setField, disabled, groups, tags }) => {
-  const [langTab, setLangTab] = React.useState<"ko" | "en">("ko");
+export const BasicInfoTab: FC<Props> = ({ values, setField, disabled, groups, tags }) => {
+  const [langTab, setLangTab] = useState<"ko" | "en">("ko");
   const { baseUrl, mdxComponents } = useCommonContext();
   const selectedTags = tags.filter((t) => values.tag_set.includes(t.id));
   const isKo = langTab === "ko";
@@ -128,15 +128,10 @@ export const BasicInfoTab: React.FC<Props> = ({ values, setField, disabled, grou
             </Typography>
             <Stack direction="row" spacing={2}>
               <Box sx={{ width: "50%", maxWidth: "50%" }}>
-                <Components.MarkdownEditor
-                  disabled={disabled}
-                  name={descKey}
-                  value={values[descKey]}
-                  onChange={(value) => setField(descKey, value ?? "")}
-                />
+                <MarkdownEditor disabled={disabled} name={descKey} value={values[descKey]} onChange={(value) => setField(descKey, value ?? "")} />
               </Box>
               <MDXRendererContainer>
-                <Components.MDXRenderer text={values[descKey]} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
+                <MDXRenderer text={values[descKey]} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
               </MDXRendererContainer>
             </Stack>
           </MUIStyledFieldset>
diff --git a/apps/pyconkr-admin/src/components/pages/shop/product/tabs/option_groups_tab.tsx b/apps/pyconkr-admin/src/components/pages/shop/product/tabs/option_groups_tab.tsx
index 40f05e1..930a5b9 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/product/tabs/option_groups_tab.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/product/tabs/option_groups_tab.tsx
@@ -1,4 +1,4 @@
-import { useBackendAdminClient, useCreateMutation, useUpdateMutation } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useCreateMutation, useUpdateMutation } from "@frontend/common/hooks/useAdminAPI";
 import { Add, Delete, Edit, ExpandMore } from "@mui/icons-material";
 import {
   Accordion,
@@ -25,10 +25,10 @@ import {
   Typography,
 } from "@mui/material";
 import { useMutation } from "@tanstack/react-query";
-import * as React from "react";
+import { FC, useEffect, useState } from "react";
 
-import { addErrorSnackbar, addSnackbar } from "../../../../../utils/snackbar";
-import { OptionAdmin, OptionGroupAdmin } from "../types";
+import { OptionAdmin, OptionGroupAdmin } from "@apps/pyconkr-admin/components/pages/shop/product/types";
+import { addErrorSnackbar, addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 // ----------------- Option dialog -----------------
 type OptionFormValues = {
@@ -47,10 +47,10 @@ type OptionDialogProps = {
   option?: OptionAdmin;
 };
 
-const OptionDialog: React.FC<OptionDialogProps> = ({ open, onClose, optionGroup, option }) => {
+const OptionDialog: FC<OptionDialogProps> = ({ open, onClose, optionGroup, option }) => {
   const client = useBackendAdminClient();
   const updateMutation = useUpdateMutation<OptionGroupAdmin>(client, "shop", "option-groups", optionGroup.id);
-  const [values, setValues] = React.useState<OptionFormValues>({
+  const [values, setValues] = useState<OptionFormValues>({
     name_ko: "",
     name_en: "",
     additional_price: "0",
@@ -59,7 +59,7 @@ const OptionDialog: React.FC<OptionDialogProps> = ({ open, onClose, optionGroup,
     priority: "0",
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (open) {
       setValues({
         name_ko: option?.name_ko ?? "",
@@ -190,12 +190,12 @@ type OptionGroupDialogProps = {
   existingGroupCount: number;
 };
 
-const OptionGroupDialog: React.FC<OptionGroupDialogProps> = ({ open, onClose, productId, group, existingGroupCount }) => {
+const OptionGroupDialog: FC<OptionGroupDialogProps> = ({ open, onClose, productId, group, existingGroupCount }) => {
   const client = useBackendAdminClient();
   const createMutation = useCreateMutation<OptionGroupAdmin>(client, "shop", "option-groups");
   const updateMutation = useUpdateMutation<OptionGroupAdmin>(client, "shop", "option-groups", group?.id ?? "");
 
-  const [values, setValues] = React.useState<OptionGroupFormValues>({
+  const [values, setValues] = useState<OptionGroupFormValues>({
     name_ko: "",
     name_en: "",
     min_quantity_per_product: "0",
@@ -206,7 +206,7 @@ const OptionGroupDialog: React.FC<OptionGroupDialogProps> = ({ open, onClose, pr
     response_modifiable_ends_at: "",
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (open) {
       setValues({
         name_ko: group?.name_ko ?? "",
@@ -347,10 +347,10 @@ type Props = {
   optionGroups: OptionGroupAdmin[];
 };
 
-export const OptionGroupsTab: React.FC<Props> = ({ productId, optionGroups }) => {
+export const OptionGroupsTab: FC<Props> = ({ productId, optionGroups }) => {
   const client = useBackendAdminClient();
-  const [groupDialog, setGroupDialog] = React.useState<{ open: boolean; group?: OptionGroupAdmin }>({ open: false });
-  const [optionDialog, setOptionDialog] = React.useState<{ open: boolean; optionGroup?: OptionGroupAdmin; option?: OptionAdmin }>({ open: false });
+  const [groupDialog, setGroupDialog] = useState<{ open: boolean; group?: OptionGroupAdmin }>({ open: false });
+  const [optionDialog, setOptionDialog] = useState<{ open: boolean; optionGroup?: OptionGroupAdmin; option?: OptionAdmin }>({ open: false });
 
   const deleteGroupMutation = useMutation({
     mutationFn: async (groupId: string) => client.delete<void>(`v1/admin-api/shop/option-groups/${groupId}/`),
diff --git a/apps/pyconkr-admin/src/components/pages/shop/product/tabs/price_options_tab.tsx b/apps/pyconkr-admin/src/components/pages/shop/product/tabs/price_options_tab.tsx
index bb0c29f..295f935 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/product/tabs/price_options_tab.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/product/tabs/price_options_tab.tsx
@@ -1,14 +1,14 @@
 import { Checkbox, Divider, FormControlLabel, Stack, TextField } from "@mui/material";
-import * as React from "react";
+import { FC } from "react";
 
-import { ProductFormValues, SetField } from "../form";
+import { ProductFormValues, SetField } from "@apps/pyconkr-admin/components/pages/shop/product/form";
 
 type Props = {
   values: ProductFormValues;
   setField: SetField;
 };
 
-export const PriceOptionsTab: React.FC<Props> = ({ values, setField }) => (
+export const PriceOptionsTab: FC<Props> = ({ values, setField }) => (
   <Stack spacing={2}>
     <Stack direction="row" spacing={2}>
       <TextField label="가격 (₩)" type="number" required value={values.price} onChange={(e) => setField("price", e.target.value)} fullWidth />
diff --git a/apps/pyconkr-admin/src/components/pages/shop/product/tabs/time_settings_tab.tsx b/apps/pyconkr-admin/src/components/pages/shop/product/tabs/time_settings_tab.tsx
index fe7900c..89273aa 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/product/tabs/time_settings_tab.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/product/tabs/time_settings_tab.tsx
@@ -1,7 +1,7 @@
 import { Stack, TextField, Typography } from "@mui/material";
-import * as React from "react";
+import { ChangeEvent, FC } from "react";
 
-import { ProductFormValues, SetField } from "../form";
+import { ProductFormValues, SetField } from "@apps/pyconkr-admin/components/pages/shop/product/form";
 
 type Props = {
   values: ProductFormValues;
@@ -14,12 +14,12 @@ const dateTimeFieldProps = (values: ProductFormValues, setField: SetField, key:
   label,
   type: "datetime-local" as const,
   value: values[key]?.slice(0, 16) ?? "",
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => setField(key, e.target.value),
+  onChange: (e: ChangeEvent<HTMLInputElement>) => setField(key, e.target.value),
   fullWidth: true,
   slotProps: { inputLabel: { shrink: true } },
 });
 
-export const TimeSettingsTab: React.FC<Props> = ({ values, setField }) => (
+export const TimeSettingsTab: FC<Props> = ({ values, setField }) => (
   <Stack spacing={2}>
     <Typography variant="subtitle2" color="text.secondary">
       비워두면 항상 활성으로 처리됩니다.
diff --git a/apps/pyconkr-admin/src/components/pages/shop/tag/list.tsx b/apps/pyconkr-admin/src/components/pages/shop/tag/list.tsx
index 655146b..578e726 100644
--- a/apps/pyconkr-admin/src/components/pages/shop/tag/list.tsx
+++ b/apps/pyconkr-admin/src/components/pages/shop/tag/list.tsx
@@ -1,8 +1,8 @@
 import { Chip } from "@mui/material";
-import * as React from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
 
-import { AdminList, AdminListColumn } from "../../../layouts/admin_list";
+import { AdminList, AdminListColumn } from "@apps/pyconkr-admin/components/layouts/admin_list";
 
 const formatStock = (stock: number) => (stock === 0 ? "무한대" : stock.toLocaleString());
 const formatMaxPerUser = (qty: number) => (qty === 0 ? "제한 없음" : qty.toLocaleString());
@@ -48,4 +48,4 @@ const columns: AdminListColumn[] = [
   },
 ];
 
-export const ShopTagListPage: React.FC = () => <AdminList app="shop" resource="tags" columns={columns} enableRowActions />;
+export const ShopTagListPage: FC = () => <AdminList app="shop" resource="tags" columns={columns} enableRowActions />;
diff --git a/apps/pyconkr-admin/src/components/pages/sitemap/list.tsx b/apps/pyconkr-admin/src/components/pages/sitemap/list.tsx
index b341c00..007c975 100644
--- a/apps/pyconkr-admin/src/components/pages/sitemap/list.tsx
+++ b/apps/pyconkr-admin/src/components/pages/sitemap/list.tsx
@@ -4,8 +4,9 @@ import {
   useListQuery,
   useRemovePreparedMutation,
   useUpdatePreparedMutation,
-} from "@frontend/common/src/hooks/useAdminAPI";
-import { buildFlatSiteMap, buildNestedSiteMap } from "@frontend/common/src/utils";
+} from "@frontend/common/hooks/useAdminAPI";
+import { FlattenedSiteMapSchema, NestedSiteMapSchema } from "@frontend/common/schemas/backendAdminAPI";
+import { buildFlatSiteMap, buildNestedSiteMap } from "@frontend/common/utils";
 import { Add, Delete, Edit, Save } from "@mui/icons-material";
 import {
   Box,
@@ -28,20 +29,19 @@ import {
 } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
+import { CSSProperties, FC, ReactElement, ReactNode, cloneElement, useEffect, useState } from "react";
 import { GroupOptions, ReactSortable, SortableEvent, SortableOptions } from "react-sortablejs";
 
-import { FlattenedSiteMapSchema, NestedSiteMapSchema } from "../../../../../../packages/common/src/schemas/backendAdminAPI";
-import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
-import { ErrorFallback } from "../../elements/error_fallback";
-import { AdminEditor } from "../../layouts/admin_editor";
+import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { AdminEditor } from "@apps/pyconkr-admin/components/layouts/admin_editor";
 
 type FlatSiteMap = FlattenedSiteMapSchema;
 type FlatSiteMapObj = Record<string, FlatSiteMap>;
 type NestedSiteMap = NestedSiteMapSchema;
 type FlatNestedSiteMap = Record<string, NestedSiteMap>;
 
-const DepthColorMap: React.CSSProperties["backgroundColor"][] = [
+const DepthColorMap: CSSProperties["backgroundColor"][] = [
   "rgba(255, 229, 204, 1)",
   "rgba(255, 255, 204, 1)",
   "rgba(204, 255, 204, 1)",
@@ -88,11 +88,11 @@ type NodePropType = {
 
 type TooltipBtnPropType = IconButtonProps & {
   tooltip: string;
-  icon: React.ReactElement<{ fontSize: string }>;
+  icon: ReactElement<{ fontSize: string }>;
 };
 
-const TooltipBtn: React.FC<TooltipBtnPropType> = ({ tooltip, icon, ...props }) => (
-  <Tooltip title={tooltip} arrow children={<IconButton size="small" {...props} children={React.cloneElement(icon, { fontSize: "small" })} />} />
+const TooltipBtn: FC<TooltipBtnPropType> = ({ tooltip, icon, ...props }) => (
+  <Tooltip title={tooltip} arrow children={<IconButton size="small" {...props} children={cloneElement(icon, { fontSize: "small" })} />} />
 );
 
 type InnerSiteMapStateType = {
@@ -105,9 +105,9 @@ type InnerSiteMapStateType = {
 
 const ModifyDetectionFields: (keyof FlatSiteMap)[] = ["order", "parent_sitemap"];
 
-type InnerSiteMapListProps = { domainGroupId: string; headerSlot: React.ReactNode };
+type InnerSiteMapListProps = { domainGroupId: string; headerSlot: ReactNode };
 
-const InnerSiteMapList: React.FC<InnerSiteMapListProps> = ErrorBoundary.with(
+const InnerSiteMapList: FC<InnerSiteMapListProps> = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, ({ domainGroupId, headerSlot }: InnerSiteMapListProps) => {
     const backendAdminAPIClient = useBackendAdminClient();
@@ -115,17 +115,17 @@ const InnerSiteMapList: React.FC<InnerSiteMapListProps> = ErrorBoundary.with(
     const deleteMutation = useRemovePreparedMutation(backendAdminAPIClient, "cms", "sitemap");
     const { mutateAsync: updateMutationAsync } = useUpdatePreparedMutation(backendAdminAPIClient, "cms", "sitemap");
 
-    const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+    const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
       enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
     const originalFlatSiteMapObj = Object.values(data).reduce((acc, item) => ({ ...acc, [item.id]: item }), {} as FlatSiteMapObj);
 
-    const [state, setState] = React.useState<InnerSiteMapStateType>({ flatSiteMap: data });
+    const [state, setState] = useState<InnerSiteMapStateType>({ flatSiteMap: data });
     const nestedSiteMap = buildNestedSiteMap<FlatSiteMap>(state.flatSiteMap)[""];
     const childrenFlatSiteMap = buildFlatSiteMap<NestedSiteMap>(nestedSiteMap);
     const childrenFlatSiteMapObj = Object.values(childrenFlatSiteMap).reduce((acc, item) => ({ ...acc, [item.id]: item }), {} as FlatNestedSiteMap);
 
-    React.useEffect(() => setState((ps) => ({ ...ps, flatSiteMap: data })), [data]);
+    useEffect(() => setState((ps) => ({ ...ps, flatSiteMap: data })), [data]);
 
     const setEditorSiteMapId = (editorSiteMapId: string | undefined) => setState((ps) => ({ ...ps, editorSiteMapId }));
     const setDeleteSiteMapId = (deleteSiteMapId: string | undefined) => setState((ps) => ({ ...ps, deleteSiteMapId }));
@@ -197,7 +197,7 @@ const InnerSiteMapList: React.FC<InnerSiteMapListProps> = ErrorBoundary.with(
       onAdd,
     };
 
-    const Node: React.FC<NodePropType> = ({ node, index, parentRoute, depth }) => {
+    const Node: FC<NodePropType> = ({ node, index, parentRoute, depth }) => {
       const isSelected = state.editorSiteMapId === node.id;
       const route = parentRoute || node.route_code ? `${parentRoute}/${node.route_code}` : "";
       const group: GroupOptions = { pull: depth !== 0, put: depth !== 0, name: node.id };
@@ -261,14 +261,14 @@ const InnerSiteMapList: React.FC<InnerSiteMapListProps> = ErrorBoundary.with(
   })
 );
 
-const DomainGroupSelector: React.FC = ErrorBoundary.with(
+const DomainGroupSelector: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const backendAdminAPIClient = useBackendAdminClient();
     const { data: choices } = useChoicesQuery(backendAdminAPIClient, "cms", "sitemap");
     const domainGroupChoices = (choices["domain_group"] ?? []).filter((c): c is { const: string; title: string } => c.const !== null);
 
-    const [domainGroupId, setDomainGroupId] = React.useState<string>(() => domainGroupChoices[0]?.const ?? "");
+    const [domainGroupId, setDomainGroupId] = useState<string>(() => domainGroupChoices[0]?.const ?? "");
 
     if (domainGroupChoices.length === 0) {
       return (
@@ -295,7 +295,7 @@ const DomainGroupSelector: React.FC = ErrorBoundary.with(
   })
 );
 
-export const SiteMapList: React.FC = () => (
+export const SiteMapList: FC = () => (
   <BackendAdminSignInGuard>
     <DomainGroupSelector />
   </BackendAdminSignInGuard>
diff --git a/apps/pyconkr-admin/src/components/pages/user/editor.tsx b/apps/pyconkr-admin/src/components/pages/user/editor.tsx
index b718036..493a84d 100644
--- a/apps/pyconkr-admin/src/components/pages/user/editor.tsx
+++ b/apps/pyconkr-admin/src/components/pages/user/editor.tsx
@@ -1,15 +1,16 @@
-import { useBackendAdminClient, useResetUserPasswordMutation } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useResetUserPasswordMutation } from "@frontend/common/hooks/useAdminAPI";
 import { KeyOff } from "@mui/icons-material";
 import { Button, ButtonProps, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { AdminEditor } from "@apps/pyconkr-admin/components/layouts/admin_editor";
+import { addErrorSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
+
 import { PasswordResultDialog } from "./password_result_dialog";
 import { ShopOrderSection } from "./shop_order_section";
-import { addErrorSnackbar } from "../../../utils/snackbar";
-import { ErrorFallback } from "../../elements/error_fallback";
-import { AdminEditor } from "../../layouts/admin_editor";
 
 type PageStateType = {
   isConfirmDialogOpen: boolean;
@@ -18,12 +19,12 @@ type PageStateType = {
   createdUserId: string | null;
 };
 
-export const AdminUserExtEditor: React.FC = ErrorBoundary.with(
+export const AdminUserExtEditor: FC = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const { id } = useParams<{ id?: string }>();
     const navigate = useNavigate();
-    const [pageState, setPageState] = React.useState<PageStateType>({
+    const [pageState, setPageState] = useState<PageStateType>({
       isConfirmDialogOpen: false,
       isResultDialogOpen: false,
       newPassword: null,
diff --git a/apps/pyconkr-admin/src/components/pages/user/password_result_dialog.tsx b/apps/pyconkr-admin/src/components/pages/user/password_result_dialog.tsx
index f25dc3c..d03cf74 100644
--- a/apps/pyconkr-admin/src/components/pages/user/password_result_dialog.tsx
+++ b/apps/pyconkr-admin/src/components/pages/user/password_result_dialog.tsx
@@ -1,8 +1,8 @@
 import { ContentCopy } from "@mui/icons-material";
 import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, InputAdornment, TextField } from "@mui/material";
-import * as React from "react";
+import { FC } from "react";
 
-import { addSnackbar } from "../../../utils/snackbar";
+import { addSnackbar } from "@apps/pyconkr-admin/utils/snackbar";
 
 type PasswordResultDialogProps = {
   open: boolean;
@@ -10,7 +10,7 @@ type PasswordResultDialogProps = {
   onClose: () => void;
 };
 
-export const PasswordResultDialog: React.FC<PasswordResultDialogProps> = ({ open, password, onClose }) => {
+export const PasswordResultDialog: FC<PasswordResultDialogProps> = ({ open, password, onClose }) => {
   const copyPasswordToClipboard = () => {
     if (password) {
       navigator.clipboard.writeText(password).then(
diff --git a/apps/pyconkr-admin/src/components/pages/user/shop_order_section.tsx b/apps/pyconkr-admin/src/components/pages/user/shop_order_section.tsx
index cf0f9c9..2060c85 100644
--- a/apps/pyconkr-admin/src/components/pages/user/shop_order_section.tsx
+++ b/apps/pyconkr-admin/src/components/pages/user/shop_order_section.tsx
@@ -1,12 +1,12 @@
-import { useBackendAdminClient, useListQuery } from "@frontend/common/src/hooks/useAdminAPI";
+import { useBackendAdminClient, useListQuery } from "@frontend/common/hooks/useAdminAPI";
 import { Alert, Chip, CircularProgress, Divider, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC } from "react";
 import { Link } from "react-router-dom";
 
-import { ErrorFallback } from "../../elements/error_fallback";
-import { PAYMENT_STATUS_LABEL } from "../shop/_common/status_labels";
-import { PaymentStatus } from "../shop/order/types";
+import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback";
+import { PAYMENT_STATUS_LABEL } from "@apps/pyconkr-admin/components/pages/shop/_common/status_labels";
+import { PaymentStatus } from "@apps/pyconkr-admin/components/pages/shop/order/types";
 
 type OrderListRow = {
   id: string;
@@ -20,7 +20,7 @@ type OrderListRow = {
 
 const formatPrice = (price: number) => `₩${price.toLocaleString()}`;
 
-const InnerShopOrderSection: React.FC<{ userId: string }> = ErrorBoundary.with(
+const InnerShopOrderSection: FC<{ userId: string }> = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, ({ userId }) => {
     const client = useBackendAdminClient();
@@ -81,4 +81,4 @@ const InnerShopOrderSection: React.FC<{ userId: string }> = ErrorBoundary.with(
   })
 );
 
-export const ShopOrderSection: React.FC<{ userId: string }> = (props) => <InnerShopOrderSection {...props} />;
+export const ShopOrderSection: FC<{ userId: string }> = (props) => <InnerShopOrderSection {...props} />;
diff --git a/apps/pyconkr-admin/src/consts/mdx_components.ts b/apps/pyconkr-admin/src/consts/mdx_components.ts
index 8b2b767..f9b421e 100644
--- a/apps/pyconkr-admin/src/consts/mdx_components.ts
+++ b/apps/pyconkr-admin/src/consts/mdx_components.ts
@@ -1,160 +1,295 @@
 // 후대의 개발자님께 : 컴포넌트 맨 첫글자가 대문자로 시작하지 않으면 JSX 컴포넌트가 아니라 일반 HTML 태그로 인식합니다. 제발 대문자로 시작해주세요.
-import { Components } from "@frontend/common";
-import * as Shop from "@frontend/shop";
-import * as mui from "@mui/material";
+import { LottiePlayer, NetworkLottiePlayer } from "@frontend/common/components";
+import {
+  Confetti,
+  FAQAccordion,
+  Map as MDXMap,
+  PrimaryStyledDetails,
+  SecondaryStyledDetails,
+  SessionList,
+  SessionTimeTable,
+  StyledFullWidthButton,
+} from "@frontend/common/components/mdx_components";
+import { PriceDisplay, ShopContextProvider, SignInGuard, UserSignInAccount, UserSignInMethod } from "@frontend/shop/components/common";
+import { CartStatus, OrderList, PatronList, ProductImageCardList, ProductList, UserInfo } from "@frontend/shop/components/features";
+import {
+  Accordion,
+  AccordionActions,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  AlertTitle,
+  AppBar,
+  Autocomplete,
+  Avatar,
+  AvatarGroup,
+  Backdrop,
+  Badge,
+  BottomNavigation,
+  BottomNavigationAction,
+  Box,
+  Breadcrumbs,
+  Button,
+  ButtonBase,
+  ButtonGroup,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  Checkbox,
+  Chip,
+  CircularProgress,
+  Collapse,
+  Container,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Divider,
+  Drawer,
+  Fab,
+  Fade,
+  FilledInput,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormHelperText,
+  FormLabel,
+  Grid,
+  Grow,
+  Icon,
+  IconButton,
+  ImageList,
+  ImageListItem,
+  ImageListItemBar,
+  Input,
+  InputAdornment,
+  InputBase,
+  InputLabel,
+  LinearProgress,
+  Link,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  ListSubheader,
+  Menu,
+  MenuItem,
+  MenuList,
+  MobileStepper,
+  Modal,
+  NativeSelect,
+  NoSsr,
+  OutlinedInput,
+  Pagination,
+  PaginationItem,
+  Paper,
+  Popover,
+  Popper,
+  Portal,
+  Radio,
+  RadioGroup,
+  Rating,
+  Select,
+  Skeleton,
+  Slide,
+  Slider,
+  Snackbar,
+  SnackbarContent,
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon,
+  Stack,
+  Step,
+  StepButton,
+  StepConnector,
+  StepContent,
+  StepIcon,
+  StepLabel,
+  Stepper,
+  SvgIcon,
+  SwipeableDrawer,
+  Switch,
+  Tab,
+  TabScrollButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableFooter,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TableSortLabel,
+  Tabs,
+  TextField,
+  TextareaAutosize,
+  ToggleButton,
+  ToggleButtonGroup,
+  Toolbar,
+  Tooltip,
+  Typography,
+  Zoom,
+} from "@mui/material";
 import type { MDXComponents } from "mdx/types.js";
 
 const MUIMDXComponents: MDXComponents = {
-  Mui__material__Accordion: mui.Accordion,
-  Mui__material__AccordionActions: mui.AccordionActions,
-  Mui__material__AccordionDetails: mui.AccordionDetails,
-  Mui__material__AccordionSummary: mui.AccordionSummary,
-  Mui__material__Alert: mui.Alert,
-  Mui__material__AlertTitle: mui.AlertTitle,
-  Mui__material__AppBar: mui.AppBar,
-  Mui__material__Autocomplete: mui.Autocomplete,
-  Mui__material__Avatar: mui.Avatar,
-  Mui__material__AvatarGroup: mui.AvatarGroup,
-  Mui__material__Backdrop: mui.Backdrop,
-  Mui__material__Badge: mui.Badge,
-  Mui__material__BottomNavigation: mui.BottomNavigation,
-  Mui__material__BottomNavigationAction: mui.BottomNavigationAction,
-  Mui__material__Box: mui.Box,
-  Mui__material__Breadcrumbs: mui.Breadcrumbs,
-  Mui__material__Button: mui.Button,
-  Mui__material__ButtonBase: mui.ButtonBase,
-  Mui__material__ButtonGroup: mui.ButtonGroup,
-  Mui__material__Card: mui.Card,
-  Mui__material__CardActionArea: mui.CardActionArea,
-  Mui__material__CardActions: mui.CardActions,
-  Mui__material__CardContent: mui.CardContent,
-  Mui__material__CardHeader: mui.CardHeader,
-  Mui__material__CardMedia: mui.CardMedia,
-  Mui__material__Checkbox: mui.Checkbox,
-  Mui__material__Chip: mui.Chip,
-  Mui__material__CircularProgress: mui.CircularProgress,
-  Mui__material__Collapse: mui.Collapse,
-  Mui__material__Container: mui.Container,
-  Mui__material__Dialog: mui.Dialog,
-  Mui__material__DialogActions: mui.DialogActions,
-  Mui__material__DialogContent: mui.DialogContent,
-  Mui__material__DialogContentText: mui.DialogContentText,
-  Mui__material__DialogTitle: mui.DialogTitle,
-  Mui__material__Divider: mui.Divider,
-  Mui__material__Drawer: mui.Drawer,
-  Mui__material__Fab: mui.Fab,
-  Mui__material__Fade: mui.Fade,
-  Mui__material__FilledInput: mui.FilledInput,
-  Mui__material__FormControl: mui.FormControl,
-  Mui__material__FormControlLabel: mui.FormControlLabel,
-  Mui__material__FormGroup: mui.FormGroup,
-  Mui__material__FormHelperText: mui.FormHelperText,
-  Mui__material__FormLabel: mui.FormLabel,
-  Mui__material__Grid: mui.Grid,
-  Mui__material__Grow: mui.Grow,
-  Mui__material__Icon: mui.Icon,
-  Mui__material__IconButton: mui.IconButton,
-  Mui__material__ImageList: mui.ImageList,
-  Mui__material__ImageListItem: mui.ImageListItem,
-  Mui__material__ImageListItemBar: mui.ImageListItemBar,
-  Mui__material__Input: mui.Input,
-  Mui__material__InputAdornment: mui.InputAdornment,
-  Mui__material__InputBase: mui.InputBase,
-  Mui__material__InputLabel: mui.InputLabel,
-  Mui__material__LinearProgress: mui.LinearProgress,
-  Mui__material__Link: mui.Link,
-  Mui__material__List: mui.List,
-  Mui__material__ListItem: mui.ListItem,
-  Mui__material__ListItemAvatar: mui.ListItemAvatar,
-  Mui__material__ListItemButton: mui.ListItemButton,
-  Mui__material__ListItemIcon: mui.ListItemIcon,
-  Mui__material__ListItemSecondaryAction: mui.ListItemSecondaryAction,
-  Mui__material__ListItemText: mui.ListItemText,
-  Mui__material__ListSubheader: mui.ListSubheader,
-  Mui__material__Menu: mui.Menu,
-  Mui__material__MenuItem: mui.MenuItem,
-  Mui__material__MenuList: mui.MenuList,
-  Mui__material__MobileStepper: mui.MobileStepper,
-  Mui__material__Modal: mui.Modal,
-  Mui__material__NativeSelect: mui.NativeSelect,
-  Mui__material__NoSsr: mui.NoSsr,
-  Mui__material__OutlinedInput: mui.OutlinedInput,
-  Mui__material__Pagination: mui.Pagination,
-  Mui__material__PaginationItem: mui.PaginationItem,
-  Mui__material__Paper: mui.Paper,
-  Mui__material__Popover: mui.Popover,
-  Mui__material__Popper: mui.Popper,
-  Mui__material__Portal: mui.Portal,
-  Mui__material__Radio: mui.Radio,
-  Mui__material__RadioGroup: mui.RadioGroup,
-  Mui__material__Rating: mui.Rating,
-  Mui__material__Select: mui.Select,
-  Mui__material__Skeleton: mui.Skeleton,
-  Mui__material__Slide: mui.Slide,
-  Mui__material__Slider: mui.Slider,
-  Mui__material__Snackbar: mui.Snackbar,
-  Mui__material__SnackbarContent: mui.SnackbarContent,
-  Mui__material__SpeedDial: mui.SpeedDial,
-  Mui__material__SpeedDialAction: mui.SpeedDialAction,
-  Mui__material__SpeedDialIcon: mui.SpeedDialIcon,
-  Mui__material__Stack: mui.Stack,
-  Mui__material__Step: mui.Step,
-  Mui__material__StepButton: mui.StepButton,
-  Mui__material__StepConnector: mui.StepConnector,
-  Mui__material__StepContent: mui.StepContent,
-  Mui__material__StepIcon: mui.StepIcon,
-  Mui__material__StepLabel: mui.StepLabel,
-  Mui__material__Stepper: mui.Stepper,
-  Mui__material__SvgIcon: mui.SvgIcon,
-  Mui__material__SwipeableDrawer: mui.SwipeableDrawer,
-  Mui__material__Switch: mui.Switch,
-  Mui__material__Tab: mui.Tab,
-  Mui__material__Table: mui.Table,
-  Mui__material__TableBody: mui.TableBody,
-  Mui__material__TableCell: mui.TableCell,
-  Mui__material__TableContainer: mui.TableContainer,
-  Mui__material__TableFooter: mui.TableFooter,
-  Mui__material__TableHead: mui.TableHead,
-  Mui__material__TablePagination: mui.TablePagination,
-  Mui__material__TableRow: mui.TableRow,
-  Mui__material__TableSortLabel: mui.TableSortLabel,
-  Mui__material__Tabs: mui.Tabs,
-  Mui__material__TabScrollButton: mui.TabScrollButton,
-  Mui__material__TextField: mui.TextField,
-  Mui__material__TextareaAutosize: mui.TextareaAutosize,
-  Mui__material__ToggleButton: mui.ToggleButton,
-  Mui__material__ToggleButtonGroup: mui.ToggleButtonGroup,
-  Mui__material__Toolbar: mui.Toolbar,
-  Mui__material__Tooltip: mui.Tooltip,
-  Mui__material__Typography: mui.Typography,
-  Mui__material__Zoom: mui.Zoom,
+  Mui__material__Accordion: Accordion,
+  Mui__material__AccordionActions: AccordionActions,
+  Mui__material__AccordionDetails: AccordionDetails,
+  Mui__material__AccordionSummary: AccordionSummary,
+  Mui__material__Alert: Alert,
+  Mui__material__AlertTitle: AlertTitle,
+  Mui__material__AppBar: AppBar,
+  Mui__material__Autocomplete: Autocomplete,
+  Mui__material__Avatar: Avatar,
+  Mui__material__AvatarGroup: AvatarGroup,
+  Mui__material__Backdrop: Backdrop,
+  Mui__material__Badge: Badge,
+  Mui__material__BottomNavigation: BottomNavigation,
+  Mui__material__BottomNavigationAction: BottomNavigationAction,
+  Mui__material__Box: Box,
+  Mui__material__Breadcrumbs: Breadcrumbs,
+  Mui__material__Button: Button,
+  Mui__material__ButtonBase: ButtonBase,
+  Mui__material__ButtonGroup: ButtonGroup,
+  Mui__material__Card: Card,
+  Mui__material__CardActionArea: CardActionArea,
+  Mui__material__CardActions: CardActions,
+  Mui__material__CardContent: CardContent,
+  Mui__material__CardHeader: CardHeader,
+  Mui__material__CardMedia: CardMedia,
+  Mui__material__Checkbox: Checkbox,
+  Mui__material__Chip: Chip,
+  Mui__material__CircularProgress: CircularProgress,
+  Mui__material__Collapse: Collapse,
+  Mui__material__Container: Container,
+  Mui__material__Dialog: Dialog,
+  Mui__material__DialogActions: DialogActions,
+  Mui__material__DialogContent: DialogContent,
+  Mui__material__DialogContentText: DialogContentText,
+  Mui__material__DialogTitle: DialogTitle,
+  Mui__material__Divider: Divider,
+  Mui__material__Drawer: Drawer,
+  Mui__material__Fab: Fab,
+  Mui__material__Fade: Fade,
+  Mui__material__FilledInput: FilledInput,
+  Mui__material__FormControl: FormControl,
+  Mui__material__FormControlLabel: FormControlLabel,
+  Mui__material__FormGroup: FormGroup,
+  Mui__material__FormHelperText: FormHelperText,
+  Mui__material__FormLabel: FormLabel,
+  Mui__material__Grid: Grid,
+  Mui__material__Grow: Grow,
+  Mui__material__Icon: Icon,
+  Mui__material__IconButton: IconButton,
+  Mui__material__ImageList: ImageList,
+  Mui__material__ImageListItem: ImageListItem,
+  Mui__material__ImageListItemBar: ImageListItemBar,
+  Mui__material__Input: Input,
+  Mui__material__InputAdornment: InputAdornment,
+  Mui__material__InputBase: InputBase,
+  Mui__material__InputLabel: InputLabel,
+  Mui__material__LinearProgress: LinearProgress,
+  Mui__material__Link: Link,
+  Mui__material__List: List,
+  Mui__material__ListItem: ListItem,
+  Mui__material__ListItemAvatar: ListItemAvatar,
+  Mui__material__ListItemButton: ListItemButton,
+  Mui__material__ListItemIcon: ListItemIcon,
+  Mui__material__ListItemSecondaryAction: ListItemSecondaryAction,
+  Mui__material__ListItemText: ListItemText,
+  Mui__material__ListSubheader: ListSubheader,
+  Mui__material__Menu: Menu,
+  Mui__material__MenuItem: MenuItem,
+  Mui__material__MenuList: MenuList,
+  Mui__material__MobileStepper: MobileStepper,
+  Mui__material__Modal: Modal,
+  Mui__material__NativeSelect: NativeSelect,
+  Mui__material__NoSsr: NoSsr,
+  Mui__material__OutlinedInput: OutlinedInput,
+  Mui__material__Pagination: Pagination,
+  Mui__material__PaginationItem: PaginationItem,
+  Mui__material__Paper: Paper,
+  Mui__material__Popover: Popover,
+  Mui__material__Popper: Popper,
+  Mui__material__Portal: Portal,
+  Mui__material__Radio: Radio,
+  Mui__material__RadioGroup: RadioGroup,
+  Mui__material__Rating: Rating,
+  Mui__material__Select: Select,
+  Mui__material__Skeleton: Skeleton,
+  Mui__material__Slide: Slide,
+  Mui__material__Slider: Slider,
+  Mui__material__Snackbar: Snackbar,
+  Mui__material__SnackbarContent: SnackbarContent,
+  Mui__material__SpeedDial: SpeedDial,
+  Mui__material__SpeedDialAction: SpeedDialAction,
+  Mui__material__SpeedDialIcon: SpeedDialIcon,
+  Mui__material__Stack: Stack,
+  Mui__material__Step: Step,
+  Mui__material__StepButton: StepButton,
+  Mui__material__StepConnector: StepConnector,
+  Mui__material__StepContent: StepContent,
+  Mui__material__StepIcon: StepIcon,
+  Mui__material__StepLabel: StepLabel,
+  Mui__material__Stepper: Stepper,
+  Mui__material__SvgIcon: SvgIcon,
+  Mui__material__SwipeableDrawer: SwipeableDrawer,
+  Mui__material__Switch: Switch,
+  Mui__material__Tab: Tab,
+  Mui__material__Table: Table,
+  Mui__material__TableBody: TableBody,
+  Mui__material__TableCell: TableCell,
+  Mui__material__TableContainer: TableContainer,
+  Mui__material__TableFooter: TableFooter,
+  Mui__material__TableHead: TableHead,
+  Mui__material__TablePagination: TablePagination,
+  Mui__material__TableRow: TableRow,
+  Mui__material__TableSortLabel: TableSortLabel,
+  Mui__material__Tabs: Tabs,
+  Mui__material__TabScrollButton: TabScrollButton,
+  Mui__material__TextField: TextField,
+  Mui__material__TextareaAutosize: TextareaAutosize,
+  Mui__material__ToggleButton: ToggleButton,
+  Mui__material__ToggleButtonGroup: ToggleButtonGroup,
+  Mui__material__Toolbar: Toolbar,
+  Mui__material__Tooltip: Tooltip,
+  Mui__material__Typography: Typography,
+  Mui__material__Zoom: Zoom,
 };
 
 const PyConKRCommonMDXComponents: MDXComponents = {
-  Common__Components__Lottie: Components.LottiePlayer,
-  Common__Components__NetworkLottie: Components.NetworkLottiePlayer,
-  Common__Components__MDX__Confetti: Components.MDX.Confetti,
-  Common__Components__MDX__PrimaryStyledDetails: Components.MDX.PrimaryStyledDetails,
-  Common__Components__MDX__SecondaryStyledDetails: Components.MDX.SecondaryStyledDetails,
-  Common__Components__MDX__Map: Components.MDX.Map,
-  Common__Components__MDX__FAQAccordion: Components.MDX.FAQAccordion,
-  Common__Components__MDX__FullWidthStyledButton: Components.MDX.StyledFullWidthButton,
-  Common__Components__Session__List: Components.MDX.SessionList,
-  Common__Components__Session__TimeTable: Components.MDX.SessionTimeTable,
+  Common__Components__Lottie: LottiePlayer,
+  Common__Components__NetworkLottie: NetworkLottiePlayer,
+  Common__Components__MDX__Confetti: Confetti,
+  Common__Components__MDX__PrimaryStyledDetails: PrimaryStyledDetails,
+  Common__Components__MDX__SecondaryStyledDetails: SecondaryStyledDetails,
+  Common__Components__MDX__Map: MDXMap,
+  Common__Components__MDX__FAQAccordion: FAQAccordion,
+  Common__Components__MDX__FullWidthStyledButton: StyledFullWidthButton,
+  Common__Components__Session__List: SessionList,
+  Common__Components__Session__TimeTable: SessionTimeTable,
 };
 
 const PythonKRShopMDXComponents: MDXComponents = {
-  Shop__Common__PriceDisplay: Shop.Components.Common.PriceDisplay,
-  Shop__Common__SignInGuard: Shop.Components.Common.SignInGuard,
-  Shop__Common__ContextProvider: Shop.Components.Common.ShopContextProvider,
-  Shop__Common__UserSignInMethod: Shop.Components.Common.UserSignInMethod,
-  Shop__Common__UserSignInAccount: Shop.Components.Common.UserSignInAccount,
-  Shop__Feature__CartStatus: Shop.Components.Features.CartStatus,
-  Shop__Feature__ProductList: Shop.Components.Features.ProductList,
-  Shop__Feature__ProductImageCardList: Shop.Components.Features.ProductImageCardList,
-  Shop__Feature__OrderList: Shop.Components.Features.OrderList,
-  Shop__Feature__UserInfo: Shop.Components.Features.UserInfo,
-  Shop__Feature__PatronList: Shop.Components.Features.PatronList,
+  Shop__Common__PriceDisplay: PriceDisplay,
+  Shop__Common__SignInGuard: SignInGuard,
+  Shop__Common__ContextProvider: ShopContextProvider,
+  Shop__Common__UserSignInMethod: UserSignInMethod,
+  Shop__Common__UserSignInAccount: UserSignInAccount,
+  Shop__Feature__CartStatus: CartStatus,
+  Shop__Feature__ProductList: ProductList,
+  Shop__Feature__ProductImageCardList: ProductImageCardList,
+  Shop__Feature__OrderList: OrderList,
+  Shop__Feature__UserInfo: UserInfo,
+  Shop__Feature__PatronList: PatronList,
 };
 
 export const PyConKRMDXComponents = {
diff --git a/apps/pyconkr-admin/src/main.tsx b/apps/pyconkr-admin/src/main.tsx
index a2857dc..4efe2c1 100644
--- a/apps/pyconkr-admin/src/main.tsx
+++ b/apps/pyconkr-admin/src/main.tsx
@@ -1,13 +1,15 @@
-import { Components, Utils } from "@frontend/common";
-import type { ContextOptions } from "@frontend/common/src/contexts";
-import * as Shop from "@frontend/shop";
+import { CenteredPage, CommonContextProvider } from "@frontend/common/components";
+import type { ContextOptions } from "@frontend/common/contexts";
+import { registerChunkLoadErrorReloadHandler } from "@frontend/common/utils";
+import { ShopContextProvider } from "@frontend/shop/components/common";
+import { ContextOptions as ShopContextOptions } from "@frontend/shop/contexts";
 import { CircularProgress } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { matchQuery, MutationCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { SnackbarProvider } from "notistack";
-import * as React from "react";
-import * as ReactDom from "react-dom/client";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 
 import { Layout } from "./components/layouts/global";
@@ -49,7 +51,7 @@ const CommonOptions: ContextOptions = {
   mdxComponents: PyConKRMDXComponents,
 };
 
-const ShopOptions: Shop.Contexts.ContextOptions = {
+const ShopOptions: ShopContextOptions = {
   language: "ko",
   shopApiDomain: import.meta.env.VITE_PYCONKR_SHOP_API_DOMAIN,
   shopApiCSRFCookieName: import.meta.env.VITE_PYCONKR_SHOP_CSRF_COOKIE_NAME,
@@ -57,22 +59,22 @@ const ShopOptions: Shop.Contexts.ContextOptions = {
   shopImpAccountId: import.meta.env.VITE_PYCONKR_SHOP_IMP_ACCOUNT_ID,
 };
 
-Utils.registerChunkLoadErrorReloadHandler();
+registerChunkLoadErrorReloadHandler();
 
-ReactDom.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <ErrorBoundary fallback={<Components.CenteredPage>문제가 발생했습니다, 새로고침을 해주세요.</Components.CenteredPage>}>
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ErrorBoundary fallback={<CenteredPage>문제가 발생했습니다, 새로고침을 해주세요.</CenteredPage>}>
       <Suspense
         fallback={
-          <Components.CenteredPage>
+          <CenteredPage>
             <CircularProgress />
-          </Components.CenteredPage>
+          </CenteredPage>
         }
       >
         <QueryClientProvider client={queryClient}>
           <ReactQueryDevtools buttonPosition="top-right" position="right" />
-          <Components.CommonContextProvider options={CommonOptions}>
-            <Shop.Components.Common.ShopContextProvider options={ShopOptions}>
+          <CommonContextProvider options={CommonOptions}>
+            <ShopContextProvider options={ShopOptions}>
               <SnackbarProvider>
                 <BrowserRouter>
                   <Routes>
@@ -86,10 +88,10 @@ ReactDom.createRoot(document.getElementById("root")!).render(
                   </Routes>
                 </BrowserRouter>
               </SnackbarProvider>
-            </Shop.Components.Common.ShopContextProvider>
-          </Components.CommonContextProvider>
+            </ShopContextProvider>
+          </CommonContextProvider>
         </QueryClientProvider>
       </Suspense>
     </ErrorBoundary>
-  </React.StrictMode>
+  </StrictMode>
 );
diff --git a/apps/pyconkr-admin/src/vite-env.d.ts b/apps/pyconkr-admin/src/vite-env.d.ts
index f42f232..1ba6712 100644
--- a/apps/pyconkr-admin/src/vite-env.d.ts
+++ b/apps/pyconkr-admin/src/vite-env.d.ts
@@ -1,8 +1,7 @@
 /// <reference types="vite/client" />
-import * as React from "react";
-
+import { FC, SVGProps } from "react";
 declare module "*.svg?react" {
-  const component: React.FC<React.SVGProps<SVGSVGElement>>;
+  const component: FC<SVGProps<SVGSVGElement>>;
   export default component;
 }
 
diff --git a/apps/pyconkr-admin/tsconfig.json b/apps/pyconkr-admin/tsconfig.json
index ace5325..a487c70 100644
--- a/apps/pyconkr-admin/tsconfig.json
+++ b/apps/pyconkr-admin/tsconfig.json
@@ -1,32 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "forceConsistentCasingInFileNames": false,
-
-    /* Paths */
-    "baseUrl": ".",
-    "paths": {
-      "@apps/pyconkr-admin/*": ["apps/pyconkr-admin/src/*"],
-    }
-  },
-  "include": ["src", "vite.config.ts", "vite-env.d.ts", "../../types"],
+  "extends": "../../tsconfig.base.json",
+  "include": ["src", "vite.config.ts", "vite-env.d.ts", "../../types"]
 }
diff --git a/apps/pyconkr-admin/vite.config.ts b/apps/pyconkr-admin/vite.config.ts
index 6b7e2dc..ca277d0 100644
--- a/apps/pyconkr-admin/vite.config.ts
+++ b/apps/pyconkr-admin/vite.config.ts
@@ -20,9 +20,8 @@ export default defineConfig(({ mode }) => {
     plugins: [react(), mdx(), ...(isLocalHttpBackend ? [] : [mkcert({ hosts: [host] })]), svgr()],
     resolve: {
       alias: {
-        "@frontend/common/src": path.resolve(__dirname, "../../packages/common/src"),
-        "@frontend/common": path.resolve(__dirname, "../../packages/common/src/index.ts"),
-        "@frontend/shop": path.resolve(__dirname, "../../packages/shop/src/index.ts"),
+        "@frontend/common": path.resolve(__dirname, "../../packages/common/src"),
+        "@frontend/shop": path.resolve(__dirname, "../../packages/shop/src"),
         "@apps/pyconkr-admin": path.resolve(__dirname, "./src"),
       },
     },
diff --git a/apps/pyconkr-participant-portal/src/App.tsx b/apps/pyconkr-participant-portal/src/App.tsx
index f53bae5..63888cf 100644
--- a/apps/pyconkr-participant-portal/src/App.tsx
+++ b/apps/pyconkr-participant-portal/src/App.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import { FC } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 
 import { Layout } from "./components/layout.tsx";
@@ -9,7 +9,7 @@ import { SessionEditor } from "./components/pages/session_editor";
 import { SignInPage } from "./components/pages/signin.tsx";
 import { SponsorEditor } from "./components/pages/sponsor_editor";
 
-export const App: React.FC = () => (
+export const App: FC = () => (
   <Routes>
     <Route element={<Layout />}>
       <Route path="/" element={<LandingPage />} />
diff --git a/apps/pyconkr-participant-portal/src/components/dialogs/change_password.tsx b/apps/pyconkr-participant-portal/src/components/dialogs/change_password.tsx
index 52444ca..e802160 100644
--- a/apps/pyconkr-participant-portal/src/components/dialogs/change_password.tsx
+++ b/apps/pyconkr-participant-portal/src/components/dialogs/change_password.tsx
@@ -1,11 +1,11 @@
-import { useChangePasswordMutation, useParticipantPortalClient } from "@frontend/common/src/hooks/useParticipantPortalAPI";
-import { getFormValue, isFormValid } from "@frontend/common/src/utils";
-import { BackendAPIClientError } from "@frontend/common/src/apis";
+import { BackendAPIClientError } from "@frontend/common/apis";
+import { useChangePasswordMutation, useParticipantPortalClient } from "@frontend/common/hooks/useParticipantPortalAPI";
+import { getFormValue, isFormValid } from "@frontend/common/utils";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, TextField } from "@mui/material";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
+import { FC, ReactNode, useRef } from "react";
 
-import { useAppContext } from "../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
 type ChangePasswordDialogProps = {
   open: boolean;
@@ -18,13 +18,13 @@ type PasswordFormDataType = {
   new_password_confirm: string;
 };
 
-export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = ({ open, onClose }) => {
-  const formRef = React.useRef<HTMLFormElement>(null);
+export const ChangePasswordDialog: FC<ChangePasswordDialogProps> = ({ open, onClose }) => {
+  const formRef = useRef<HTMLFormElement>(null);
   const { language } = useAppContext();
   const participantPortalClient = useParticipantPortalClient();
   const changePasswordMutation = useChangePasswordMutation(participantPortalClient);
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const titleStr = language === "ko" ? "비밀번호 변경" : "Change Password";
diff --git a/apps/pyconkr-participant-portal/src/components/dialogs/modification_audit_cancel_confirm.tsx b/apps/pyconkr-participant-portal/src/components/dialogs/modification_audit_cancel_confirm.tsx
index 2e8ae85..9988b27 100644
--- a/apps/pyconkr-participant-portal/src/components/dialogs/modification_audit_cancel_confirm.tsx
+++ b/apps/pyconkr-participant-portal/src/components/dialogs/modification_audit_cancel_confirm.tsx
@@ -1,10 +1,10 @@
-import { useCancelModificationAuditMutation, useParticipantPortalClient } from "@frontend/common/src/hooks/useParticipantPortalAPI";
-import { BackendAPIClientError } from "@frontend/common/src/apis";
+import { BackendAPIClientError } from "@frontend/common/apis";
+import { useCancelModificationAuditMutation, useParticipantPortalClient } from "@frontend/common/hooks/useParticipantPortalAPI";
 import { Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
+import { FC, ReactNode, useRef } from "react";
 
-import { useAppContext } from "../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
 type ModificationAuditCancelConfirmDialogProps = {
   modificationAuditId: string;
@@ -12,13 +12,13 @@ type ModificationAuditCancelConfirmDialogProps = {
   onClose: () => void;
 };
 
-export const ModificationAuditCancelConfirmDialog: React.FC<ModificationAuditCancelConfirmDialogProps> = ({ open, onClose, modificationAuditId }) => {
-  const reasonInputRef = React.useRef<HTMLInputElement>(null);
+export const ModificationAuditCancelConfirmDialog: FC<ModificationAuditCancelConfirmDialogProps> = ({ open, onClose, modificationAuditId }) => {
+  const reasonInputRef = useRef<HTMLInputElement>(null);
   const { language } = useAppContext();
   const participantPortalClient = useParticipantPortalClient();
   const cancelModificationAuditMutation = useCancelModificationAuditMutation(participantPortalClient);
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const titleStr = language === "ko" ? "수정 요청 철회 확인" : "Confirm Withdrawal of Modification Request";
diff --git a/apps/pyconkr-participant-portal/src/components/dialogs/public_file_upload.tsx b/apps/pyconkr-participant-portal/src/components/dialogs/public_file_upload.tsx
index 9794dc8..4cba2b5 100644
--- a/apps/pyconkr-participant-portal/src/components/dialogs/public_file_upload.tsx
+++ b/apps/pyconkr-participant-portal/src/components/dialogs/public_file_upload.tsx
@@ -1,12 +1,12 @@
-import { Components } from "@frontend/common";
-import { useParticipantPortalClient, useUploadPublicFileMutation } from "@frontend/common/src/hooks/useParticipantPortalAPI";
-import { BackendAPIClientError } from "@frontend/common/src/apis";
+import { BackendAPIClientError } from "@frontend/common/apis";
+import { DndFileInput } from "@frontend/common/components";
+import { useParticipantPortalClient, useUploadPublicFileMutation } from "@frontend/common/hooks/useParticipantPortalAPI";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
-import * as R from "remeda";
+import { FC, ReactNode, useState } from "react";
+import { isEmpty, isString } from "remeda";
 
-import { useAppContext } from "../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
 type SetUploadedFileAsValueConfirmDialogProps = {
   language: "ko" | "en";
@@ -15,12 +15,7 @@ type SetUploadedFileAsValueConfirmDialogProps = {
   setValueAndCloseAll: () => void;
 };
 
-const SetUploadedFileAsValueConfirmDialog: React.FC<SetUploadedFileAsValueConfirmDialogProps> = ({
-  language,
-  open,
-  closeAll,
-  setValueAndCloseAll,
-}) => {
+const SetUploadedFileAsValueConfirmDialog: FC<SetUploadedFileAsValueConfirmDialogProps> = ({ language, open, closeAll, setValueAndCloseAll }) => {
   const titleStr = language === "ko" ? "파일 업로드 완료" : "File Upload Completed";
   const confirmStr =
     language === "ko" ? "업로드한 파일을 현재 값으로 설정하시겠습니까?" : "Do you want to set the uploaded file as the current value?";
@@ -50,13 +45,13 @@ type PublicFileUploadDialogState = {
   uploadedFileId: string | null;
 };
 
-export const PublicFileUploadDialog: React.FC<PublicFileUploadDialogProps> = ({ open, onClose, setFileIdAsValue }) => {
+export const PublicFileUploadDialog: FC<PublicFileUploadDialogProps> = ({ open, onClose, setFileIdAsValue }) => {
   const { language } = useAppContext();
-  const [dialogState, setDialogState] = React.useState<PublicFileUploadDialogState>({ selectedFile: null, uploadedFileId: null });
+  const [dialogState, setDialogState] = useState<PublicFileUploadDialogState>({ selectedFile: null, uploadedFileId: null });
   const participantPortalClient = useParticipantPortalClient();
   const uploadPublicFileMutation = useUploadPublicFileMutation(participantPortalClient);
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const titleStr = language === "ko" ? "파일 업로드" : "Upload File";
@@ -101,14 +96,14 @@ export const PublicFileUploadDialog: React.FC<PublicFileUploadDialogProps> = ({
     <>
       <SetUploadedFileAsValueConfirmDialog
         language={language}
-        open={R.isString(dialogState.uploadedFileId) && !R.isEmpty(dialogState.uploadedFileId)}
+        open={isString(dialogState.uploadedFileId) && !isEmpty(dialogState.uploadedFileId)}
         closeAll={closeAllDialogs}
         setValueAndCloseAll={setValueAndCloseAllDialogs}
       />
       <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
         <DialogTitle children={titleStr} />
         <DialogContent>
-          <Components.DndFileInput onFileChange={setFile} language={language} />
+          <DndFileInput onFileChange={setFile} language={language} />
         </DialogContent>
         <DialogActions>
           <Button variant="contained" loading={loading} children={cancelStr} color="error" onClick={onClose} />
diff --git a/apps/pyconkr-participant-portal/src/components/dialogs/submit_confirm.tsx b/apps/pyconkr-participant-portal/src/components/dialogs/submit_confirm.tsx
index 670c4f7..cfb6fcb 100644
--- a/apps/pyconkr-participant-portal/src/components/dialogs/submit_confirm.tsx
+++ b/apps/pyconkr-participant-portal/src/components/dialogs/submit_confirm.tsx
@@ -1,7 +1,7 @@
 import { Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
-import * as React from "react";
+import { FC } from "react";
 
-import { useAppContext } from "../../contexts/app_context";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
 type SubmitConfirmDialogProps = {
   open: boolean;
@@ -10,7 +10,7 @@ type SubmitConfirmDialogProps = {
   disabled?: boolean;
 };
 
-export const SubmitConfirmDialog: React.FC<SubmitConfirmDialogProps> = ({ open, onClose, onSubmit, disabled }) => {
+export const SubmitConfirmDialog: FC<SubmitConfirmDialogProps> = ({ open, onClose, onSubmit, disabled }) => {
   const { language } = useAppContext();
 
   const titleStr = language === "ko" ? "제출 확인" : "Confirm Submission";
diff --git a/apps/pyconkr-participant-portal/src/components/elements/error_page.tsx b/apps/pyconkr-participant-portal/src/components/elements/error_page.tsx
index 276e77b..4df0b79 100644
--- a/apps/pyconkr-participant-portal/src/components/elements/error_page.tsx
+++ b/apps/pyconkr-participant-portal/src/components/elements/error_page.tsx
@@ -1,14 +1,14 @@
-import { Components } from "@frontend/common";
+import { ErrorFallback } from "@frontend/common/components";
 import { Stack } from "@mui/material";
-import * as React from "react";
+import { FC } from "react";
 
-import { Page } from "../page";
+import { Page } from "@apps/pyconkr-participant-portal/components/page";
 
-export const ErrorPage: React.FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
+export const ErrorPage: FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
   return (
     <Page>
       <Stack alignItems="center" justifyContent="center" sx={{ width: "100%", flexGrow: 1 }}>
-        <Components.ErrorFallback error={error} reset={reset} />
+        <ErrorFallback error={error} reset={reset} />
       </Stack>
     </Page>
   );
diff --git a/apps/pyconkr-participant-portal/src/components/elements/fieldset.tsx b/apps/pyconkr-participant-portal/src/components/elements/fieldset.tsx
index 35c1319..e1d73eb 100644
--- a/apps/pyconkr-participant-portal/src/components/elements/fieldset.tsx
+++ b/apps/pyconkr-participant-portal/src/components/elements/fieldset.tsx
@@ -1,7 +1,6 @@
 import { styled } from "@mui/material";
-import * as React from "react";
-
-type FieldsetProps = React.HTMLAttributes<HTMLFieldSetElement> & {
+import { FC, HTMLAttributes } from "react";
+type FieldsetProps = HTMLAttributes<HTMLFieldSetElement> & {
   legend: string;
 };
 
@@ -16,7 +15,7 @@ const StyledFieldsetBase = styled("fieldset")(({ theme }) => ({
   },
 }));
 
-export const Fieldset: React.FC<FieldsetProps> = ({ legend, children, ...props }) => {
+export const Fieldset: FC<FieldsetProps> = ({ legend, children, ...props }) => {
   return (
     <StyledFieldsetBase {...props}>
       <legend style={{ fontSize: "0.75rem", padding: "0 0.25rem" }} children={legend} />
diff --git a/apps/pyconkr-participant-portal/src/components/elements/loading_page.tsx b/apps/pyconkr-participant-portal/src/components/elements/loading_page.tsx
index 1716b13..ae387f4 100644
--- a/apps/pyconkr-participant-portal/src/components/elements/loading_page.tsx
+++ b/apps/pyconkr-participant-portal/src/components/elements/loading_page.tsx
@@ -1,10 +1,10 @@
 import { CircularProgress, Stack, Typography } from "@mui/material";
-import * as React from "react";
+import { FC } from "react";
 
-import { useAppContext } from "../../contexts/app_context";
-import { Page } from "../page";
+import { Page } from "@apps/pyconkr-participant-portal/components/page";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
-export const LoadingPage: React.FC = () => {
+export const LoadingPage: FC = () => {
   const { language } = useAppContext();
   const loadingStr = language === "ko" ? "페이지를 불러오는 중입니다..." : "Loading...";
 
diff --git a/apps/pyconkr-participant-portal/src/components/elements/multilang_field.tsx b/apps/pyconkr-participant-portal/src/components/elements/multilang_field.tsx
index b3b0321..b7c6789 100644
--- a/apps/pyconkr-participant-portal/src/components/elements/multilang_field.tsx
+++ b/apps/pyconkr-participant-portal/src/components/elements/multilang_field.tsx
@@ -1,14 +1,15 @@
-import { Components } from "@frontend/common";
-import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+import { MDXRenderer, MarkdownEditor } from "@frontend/common/components";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
 import { Box, SelectProps, Stack, styled, Tab, Tabs, TextField, TextFieldProps, Typography, useMediaQuery } from "@mui/material";
-import * as React from "react";
+import { CSSProperties, ChangeEvent, FC, ReactNode, SyntheticEvent, useState } from "react";
+
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
 import { BlockQuote } from "./blockquote";
 import { Fieldset } from "./fieldset";
 import { PublicFileSelector } from "./public_file_selector";
-import { useAppContext } from "../../contexts/app_context";
 
-const ButtonWidth: React.CSSProperties["width"] = "4.5rem";
+const ButtonWidth: CSSProperties["width"] = "4.5rem";
 
 const FieldContainer = styled(Stack)(({ theme }) => ({
   flexDirection: "row",
@@ -63,8 +64,8 @@ type TranslatedText = {
 };
 
 type TranslatedNode = {
-  ko: React.ReactNode;
-  en: React.ReactNode;
+  ko: ReactNode;
+  en: ReactNode;
 };
 
 type MultiLanguageCommonProps = {
@@ -83,10 +84,10 @@ type MultiLanguageFieldState = {
   selectedFieldLanguage: "ko" | "en";
 };
 
-export const MultiLanguageField: React.FC<MultiLanguageFieldProps> = ({ label, description, defaultValue, value, onChange, ...props }) => {
+export const MultiLanguageField: FC<MultiLanguageFieldProps> = ({ label, description, defaultValue, value, onChange, ...props }) => {
   const { language } = useAppContext();
-  const [fieldState, setFieldState] = React.useState<MultiLanguageFieldState>({ selectedFieldLanguage: language });
-  const setFieldLanguage = (_: React.SyntheticEvent, selectedFieldLanguage: "ko" | "en") => setFieldState((ps) => ({ ...ps, selectedFieldLanguage }));
+  const [fieldState, setFieldState] = useState<MultiLanguageFieldState>({ selectedFieldLanguage: language });
+  const setFieldLanguage = (_: SyntheticEvent, selectedFieldLanguage: "ko" | "en") => setFieldState((ps) => ({ ...ps, selectedFieldLanguage }));
   const koreanStr = language === "ko" ? "한국어" : "Korean";
   const englishStr = language === "ko" ? "영어" : "English";
 
@@ -95,7 +96,7 @@ export const MultiLanguageField: React.FC<MultiLanguageFieldProps> = ({ label, d
 
   const inputDefaultValue = defaultValue && defaultValue[fieldState.selectedFieldLanguage];
   const inputValue = value && value[fieldState.selectedFieldLanguage];
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => onChange?.(event.target.value, fieldState.selectedFieldLanguage);
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => onChange?.(event.target.value, fieldState.selectedFieldLanguage);
 
   return (
     <Fieldset legend={label[language]}>
@@ -134,7 +135,7 @@ const MDRendererContainer = styled(Box)<{ fullWidth?: boolean }>(({ theme, fullW
   },
 }));
 
-export const MultiLanguageMarkdownField: React.FC<MultiLanguageMarkdownFieldProps> = ({
+export const MultiLanguageMarkdownField: FC<MultiLanguageMarkdownFieldProps> = ({
   label,
   description,
   defaultValue,
@@ -145,8 +146,8 @@ export const MultiLanguageMarkdownField: React.FC<MultiLanguageMarkdownFieldProp
 }) => {
   const { language } = useAppContext();
   const { baseUrl, mdxComponents } = useCommonContext();
-  const [fieldState, setFieldState] = React.useState<MultiLanguageFieldState>({ selectedFieldLanguage: language });
-  const setFieldLanguage = (_: React.SyntheticEvent, selectedFieldLanguage: "ko" | "en") => setFieldState((ps) => ({ ...ps, selectedFieldLanguage }));
+  const [fieldState, setFieldState] = useState<MultiLanguageFieldState>({ selectedFieldLanguage: language });
+  const setFieldLanguage = (_: SyntheticEvent, selectedFieldLanguage: "ko" | "en") => setFieldState((ps) => ({ ...ps, selectedFieldLanguage }));
   const koreanStr = language === "ko" ? "한국어" : "Korean";
   const englishStr = language === "ko" ? "영어" : "English";
 
@@ -169,17 +170,11 @@ export const MultiLanguageMarkdownField: React.FC<MultiLanguageMarkdownFieldProp
           <Stack direction="row" spacing={2} sx={{ width: "100%", flexGrow: 1 }}>
             {!disabled && (
               <Box sx={{ width: "50%", maxWidth: "50%" }}>
-                <Components.MarkdownEditor
-                  defaultValue={inputDefaultValue}
-                  value={inputValue}
-                  onChange={handleChange}
-                  extraCommands={[]}
-                  {...props}
-                />
+                <MarkdownEditor defaultValue={inputDefaultValue} value={inputValue} onChange={handleChange} extraCommands={[]} {...props} />
               </Box>
             )}
             <MDRendererContainer fullWidth={disabled}>
-              <Components.MDXRenderer text={inputValue || ""} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
+              <MDXRenderer text={inputValue || ""} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
             </MDRendererContainer>
           </Stack>
         </FieldContainer>
@@ -190,10 +185,10 @@ export const MultiLanguageMarkdownField: React.FC<MultiLanguageMarkdownFieldProp
 
 type MultiLanguagePublicFileSelect = Omit<SelectProps<string | null>, "label"> & MultiLanguageCommonProps;
 
-export const MultiLanguagePublicFileSelect: React.FC<MultiLanguagePublicFileSelect> = ({ label, description, ...props }) => {
+export const MultiLanguagePublicFileSelect: FC<MultiLanguagePublicFileSelect> = ({ label, description, ...props }) => {
   const { language } = useAppContext();
-  const [fieldState, setFieldState] = React.useState<MultiLanguageFieldState>({ selectedFieldLanguage: language });
-  const setFieldLanguage = (_: React.SyntheticEvent, selectedFieldLanguage: "ko" | "en") => setFieldState((ps) => ({ ...ps, selectedFieldLanguage }));
+  const [fieldState, setFieldState] = useState<MultiLanguageFieldState>({ selectedFieldLanguage: language });
+  const setFieldLanguage = (_: SyntheticEvent, selectedFieldLanguage: "ko" | "en") => setFieldState((ps) => ({ ...ps, selectedFieldLanguage }));
   const koreanStr = language === "ko" ? "한국어" : "Korean";
   const englishStr = language === "ko" ? "영어" : "English";
 
diff --git a/apps/pyconkr-participant-portal/src/components/elements/public_file_selector.tsx b/apps/pyconkr-participant-portal/src/components/elements/public_file_selector.tsx
index 503b0cd..02271ac 100644
--- a/apps/pyconkr-participant-portal/src/components/elements/public_file_selector.tsx
+++ b/apps/pyconkr-participant-portal/src/components/elements/public_file_selector.tsx
@@ -1,17 +1,18 @@
-import { Components } from "@frontend/common";
-import { useParticipantPortalClient, usePublicFilesQuery } from "@frontend/common/src/hooks/useParticipantPortalAPI";
+import { ErrorFallback, FallbackImage } from "@frontend/common/components";
+import { useParticipantPortalClient, usePublicFilesQuery } from "@frontend/common/hooks/useParticipantPortalAPI";
 import { PermMedia } from "@mui/icons-material";
 import { Box, Button, CircularProgress, FormControl, InputLabel, MenuItem, Select, SelectProps, Stack, styled, useMediaQuery } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { ChangeEvent, FC, useRef, useState } from "react";
+
+import { PublicFileUploadDialog } from "@apps/pyconkr-participant-portal/components/dialogs/public_file_upload";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
 import { Fieldset } from "./fieldset";
-import { useAppContext } from "../../contexts/app_context";
-import { PublicFileUploadDialog } from "../dialogs/public_file_upload";
 
 type PublicFileSelectorProps = Omit<SelectProps<string | null>, "inputRef">;
 
-const ImageFallback: React.FC<{ language: "ko" | "en" }> = ({ language }) => (
+const ImageFallback: FC<{ language: "ko" | "en" }> = ({ language }) => (
   <Box children={language === "ko" ? "이미지가 없습니다." : "No image available."} />
 );
 
@@ -20,17 +21,17 @@ type PublicFileSelectorState = {
   openUploadDialog?: boolean;
 };
 
-const ScaledFallbackImage = styled(Components.FallbackImage)({
+const ScaledFallbackImage = styled(FallbackImage)({
   width: "100%",
   maxWidth: "20rem",
   objectFit: "contain",
 });
 
-export const PublicFileSelector: React.FC<PublicFileSelectorProps> = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+export const PublicFileSelector: FC<PublicFileSelectorProps> = ErrorBoundary.with(
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, ({ value, onChange, disabled, ...props }) => {
-    const selectInputRef = React.useRef<HTMLSelectElement | null>(null);
-    const [selectorState, setSelectorState] = React.useState<PublicFileSelectorState>({ value });
+    const selectInputRef = useRef<HTMLSelectElement | null>(null);
+    const [selectorState, setSelectorState] = useState<PublicFileSelectorState>({ value });
     const { language } = useAppContext();
     const participantPortalClient = useParticipantPortalClient();
     const { data } = usePublicFilesQuery(participantPortalClient);
@@ -44,7 +45,7 @@ export const PublicFileSelector: React.FC<PublicFileSelectorProps> = ErrorBounda
       if (selectInputRef.current) selectInputRef.current.value = value || "";
 
       setSelectorState((ps) => ({ ...ps, value }));
-      onChange?.({ target: { value } } as React.ChangeEvent<HTMLSelectElement & HTMLInputElement>, null);
+      onChange?.({ target: { value } } as ChangeEvent<HTMLSelectElement & HTMLInputElement>, null);
     };
     const openUploadDialog = () => setSelectorState((ps) => ({ ...ps, openUploadDialog: true }));
     const closeUploadDialog = () => setSelectorState((ps) => ({ ...ps, openUploadDialog: false }));
diff --git a/apps/pyconkr-participant-portal/src/components/elements/requested_modification_audit_available_header.tsx b/apps/pyconkr-participant-portal/src/components/elements/requested_modification_audit_available_header.tsx
index a39f830..25a71fe 100644
--- a/apps/pyconkr-participant-portal/src/components/elements/requested_modification_audit_available_header.tsx
+++ b/apps/pyconkr-participant-portal/src/components/elements/requested_modification_audit_available_header.tsx
@@ -1,7 +1,7 @@
 import { Button, Card, CardContent, Stack, styled, Typography } from "@mui/material";
-import * as React from "react";
+import { FC, useState } from "react";
 
-import { ModificationAuditCancelConfirmDialog } from "../dialogs/modification_audit_cancel_confirm";
+import { ModificationAuditCancelConfirmDialog } from "@apps/pyconkr-participant-portal/components/dialogs/modification_audit_cancel_confirm";
 
 const StyledAlertCard = styled(Card)(({ theme }) => ({
   width: "100%",
@@ -11,8 +11,8 @@ const StyledAlertCard = styled(Card)(({ theme }) => ({
   fontWeight: 500,
 }));
 
-export const CurrentlyModAuditInProgress: React.FC<{ language: "ko" | "en"; modificationAuditId: string }> = ({ language, modificationAuditId }) => {
-  const [cardState, setCardState] = React.useState<{ openCancelConfirmDialog: boolean }>({ openCancelConfirmDialog: false });
+export const CurrentlyModAuditInProgress: FC<{ language: "ko" | "en"; modificationAuditId: string }> = ({ language, modificationAuditId }) => {
+  const [cardState, setCardState] = useState<{ openCancelConfirmDialog: boolean }>({ openCancelConfirmDialog: false });
   const openCancelConfirmDialog = () => setCardState((ps) => ({ ...ps, openCancelConfirmDialog: true }));
   const closeCancelConfirmDialog = () => setCardState((ps) => ({ ...ps, openCancelConfirmDialog: false }));
 
diff --git a/apps/pyconkr-participant-portal/src/components/elements/signin_guard.tsx b/apps/pyconkr-participant-portal/src/components/elements/signin_guard.tsx
index b45597b..f4d1044 100644
--- a/apps/pyconkr-participant-portal/src/components/elements/signin_guard.tsx
+++ b/apps/pyconkr-participant-portal/src/components/elements/signin_guard.tsx
@@ -1,12 +1,12 @@
-import { useParticipantPortalClient, useSignedInUserQuery } from "@frontend/common/src/hooks/useParticipantPortalAPI";
+import { useParticipantPortalClient, useSignedInUserQuery } from "@frontend/common/hooks/useParticipantPortalAPI";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, PropsWithChildren } from "react";
 import { Navigate } from "react-router-dom";
 
 import { ErrorPage } from "./error_page";
 import { LoadingPage } from "./loading_page";
 
-export const SignInGuard: React.FC<React.PropsWithChildren> = ErrorBoundary.with(
+export const SignInGuard: FC<PropsWithChildren> = ErrorBoundary.with(
   { fallback: ErrorPage },
   Suspense.with({ fallback: <LoadingPage /> }, ({ children }) => {
     const participantPortalClient = useParticipantPortalClient();
diff --git a/apps/pyconkr-participant-portal/src/components/layout.tsx b/apps/pyconkr-participant-portal/src/components/layout.tsx
index e271311..0c7c2a8 100644
--- a/apps/pyconkr-participant-portal/src/components/layout.tsx
+++ b/apps/pyconkr-participant-portal/src/components/layout.tsx
@@ -1,12 +1,12 @@
-import { useParticipantPortalClient, useSignOutMutation, useSignedInUserQuery } from "@frontend/common/src/hooks/useParticipantPortalAPI";
+import { useParticipantPortalClient, useSignOutMutation, useSignedInUserQuery } from "@frontend/common/hooks/useParticipantPortalAPI";
 import { AccountCircle } from "@mui/icons-material";
 import { AppBar, ButtonBase, CircularProgress, IconButton, Menu, MenuItem, Stack, styled, Toolbar, Tooltip, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, MouseEventHandler, useState } from "react";
 import { Link, Outlet, useNavigate } from "react-router-dom";
 
-import { LOCAL_STORAGE_LANGUAGE_KEY } from "../consts/local_stroage";
-import { useAppContext } from "../contexts/app_context";
+import { LOCAL_STORAGE_LANGUAGE_KEY } from "@apps/pyconkr-participant-portal/consts/local_stroage";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
 const FullPage = styled(Stack)({
   minHeight: "100vh",
@@ -58,11 +58,11 @@ type ProfileMenuButtonState = {
   anchorEl?: HTMLElement | null;
 };
 
-const InnerProfileMenuButton: React.FC<ProfileMenuButtonProps> = ({ loading, signedIn }) => {
+const InnerProfileMenuButton: FC<ProfileMenuButtonProps> = ({ loading, signedIn }) => {
   const navigate = useNavigate();
   const participantPortalClient = useParticipantPortalClient();
-  const [btnState, setBtnState] = React.useState<ProfileMenuButtonState>({});
-  const openMenu: React.MouseEventHandler<HTMLButtonElement> = (evt) => setBtnState((ps) => ({ ...ps, anchorEl: evt.currentTarget }));
+  const [btnState, setBtnState] = useState<ProfileMenuButtonState>({});
+  const openMenu: MouseEventHandler<HTMLButtonElement> = (evt) => setBtnState((ps) => ({ ...ps, anchorEl: evt.currentTarget }));
   const closeMenu = () => setBtnState((ps) => ({ ...ps, anchorEl: undefined }));
   const { language } = useAppContext();
   const accountStr = language === "ko" ? "계정" : "Account";
@@ -96,7 +96,7 @@ const InnerProfileMenuButton: React.FC<ProfileMenuButtonProps> = ({ loading, sig
   );
 };
 
-const ProfileMenuButton: React.FC = ErrorBoundary.with(
+const ProfileMenuButton: FC = ErrorBoundary.with(
   { fallback: <InnerProfileMenuButton /> },
   Suspense.with({ fallback: <InnerProfileMenuButton loading /> }, () => {
     const participantPortalClient = useParticipantPortalClient();
@@ -106,7 +106,7 @@ const ProfileMenuButton: React.FC = ErrorBoundary.with(
   })
 );
 
-export const Layout: React.FC = () => {
+export const Layout: FC = () => {
   const { language, setAppContext } = useAppContext();
   const toggleLanguage = () =>
     setAppContext((ps) => {
diff --git a/apps/pyconkr-participant-portal/src/components/pages/home.tsx b/apps/pyconkr-participant-portal/src/components/pages/home.tsx
index 6b33112..b2f5c84 100644
--- a/apps/pyconkr-participant-portal/src/components/pages/home.tsx
+++ b/apps/pyconkr-participant-portal/src/components/pages/home.tsx
@@ -1,5 +1,10 @@
-import { Components } from "@frontend/common";
-import { useListPresentationsQuery, useModificationAuditsQuery, useParticipantPortalClient, useSignedInUserQuery } from "@frontend/common/src/hooks/useParticipantPortalAPI";
+import { FallbackImage } from "@frontend/common/components";
+import {
+  useListPresentationsQuery,
+  useModificationAuditsQuery,
+  useParticipantPortalClient,
+  useSignedInUserQuery,
+} from "@frontend/common/hooks/useParticipantPortalAPI";
 import {
   Button,
   FormControlLabel,
@@ -15,18 +20,18 @@ import {
   useMediaQuery,
 } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { CSSProperties, FC, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import * as R from "remeda";
+import { isEmpty } from "remeda";
 
-import { useAppContext } from "../../contexts/app_context";
-import { ErrorPage } from "../elements/error_page";
-import { Fieldset } from "../elements/fieldset";
-import { LoadingPage } from "../elements/loading_page";
-import { SignInGuard } from "../elements/signin_guard";
-import { Page } from "../page";
+import { ErrorPage } from "@apps/pyconkr-participant-portal/components/elements/error_page";
+import { Fieldset } from "@apps/pyconkr-participant-portal/components/elements/fieldset";
+import { LoadingPage } from "@apps/pyconkr-participant-portal/components/elements/loading_page";
+import { SignInGuard } from "@apps/pyconkr-participant-portal/components/elements/signin_guard";
+import { Page } from "@apps/pyconkr-participant-portal/components/page";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
-const ProfileImageSize: React.CSSProperties["width" | "height"] = "8rem";
+const ProfileImageSize: CSSProperties["width" | "height"] = "8rem";
 
 type AuditState = "requested" | "approved" | "rejected" | "cancelled";
 
@@ -61,7 +66,7 @@ const ProfileImageContainer = styled(Stack)({
   maxHeight: ProfileImageSize,
 });
 
-const ProfileImageStyle: React.CSSProperties = {
+const ProfileImageStyle: CSSProperties = {
   border: "1px solid #ccc",
   width: "100%",
   height: "100%",
@@ -70,9 +75,9 @@ const ProfileImageStyle: React.CSSProperties = {
   textAlign: "center",
 };
 
-const ProfileImage = styled(Components.FallbackImage)(ProfileImageStyle);
+const ProfileImage = styled(FallbackImage)(ProfileImageStyle);
 
-const ProfileImageFallback: React.FC<{ language: "ko" | "en" }> = ({ language }) => {
+const ProfileImageFallback: FC<{ language: "ko" | "en" }> = ({ language }) => {
   const noProfileImageText = language === "ko" ? "프로필 이미지가 없어요." : "No profile image.";
   const registerProfileImageText = language === "ko" ? "이미지를 등록해주세요." : "Please register your profile image.";
 
@@ -91,7 +96,7 @@ type InnerLandingPageState = {
   showAllAudits: boolean;
 };
 
-const InnerLandingPage: React.FC = () => {
+const InnerLandingPage: FC = () => {
   const navigate = useNavigate();
   const { language } = useAppContext();
   const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
@@ -101,7 +106,7 @@ const InnerLandingPage: React.FC = () => {
   const { data: sessions } = useListPresentationsQuery(participantPortalAPIClient);
 
   const ongoingAudits = audits.filter((audit) => audit.status === "requested");
-  const [state, setState] = React.useState<InnerLandingPageState>({ showAllAudits: R.isEmpty(ongoingAudits) });
+  const [state, setState] = useState<InnerLandingPageState>({ showAllAudits: isEmpty(ongoingAudits) });
 
   if (!profile) {
     return (
@@ -206,7 +211,7 @@ const InnerLandingPage: React.FC = () => {
   );
 };
 
-export const LandingPage: React.FC = ErrorBoundary.with(
+export const LandingPage: FC = ErrorBoundary.with(
   { fallback: ErrorPage },
   Suspense.with({ fallback: <LoadingPage /> }, () => <SignInGuard children={<InnerLandingPage />} />)
 );
diff --git a/apps/pyconkr-participant-portal/src/components/pages/modification_audit_preview.tsx b/apps/pyconkr-participant-portal/src/components/pages/modification_audit_preview.tsx
index 9dbfade..a190f94 100644
--- a/apps/pyconkr-participant-portal/src/components/pages/modification_audit_preview.tsx
+++ b/apps/pyconkr-participant-portal/src/components/pages/modification_audit_preview.tsx
@@ -1,15 +1,16 @@
-import { useModificationAuditPreviewQuery, useParticipantPortalClient } from "@frontend/common/src/hooks/useParticipantPortalAPI";
+import { useModificationAuditPreviewQuery, useParticipantPortalClient } from "@frontend/common/hooks/useParticipantPortalAPI";
 import { Card, CardContent, Palette, PaletteColor, styled, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, ReactNode } from "react";
 import { Navigate, useParams } from "react-router-dom";
-import * as R from "remeda";
+import { isArray, isEmpty } from "remeda";
+
+import { ErrorPage } from "@apps/pyconkr-participant-portal/components/elements/error_page";
+import { LoadingPage } from "@apps/pyconkr-participant-portal/components/elements/loading_page";
+import { SignInGuard } from "@apps/pyconkr-participant-portal/components/elements/signin_guard";
+import { Page } from "@apps/pyconkr-participant-portal/components/page";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
-import { useAppContext } from "../../contexts/app_context";
-import { ErrorPage } from "../elements/error_page";
-import { LoadingPage } from "../elements/loading_page";
-import { SignInGuard } from "../elements/signin_guard";
-import { Page } from "../page";
 import { ProfileEditorForm, ProfileSchema } from "./profile_editor";
 import { SessionEditorForm, SessionSchema } from "./session_editor";
 
@@ -24,7 +25,7 @@ const StyledAlertCard = styled(Card)(({ theme }) => ({
   },
 }));
 
-const StyledNoticeHeader: React.FC<{ pName: keyof Palette; text: React.ReactNode }> = ({ pName, text }) => (
+const StyledNoticeHeader: FC<{ pName: keyof Palette; text: ReactNode }> = ({ pName, text }) => (
   <StyledAlertCard sx={(t) => ({ backgroundColor: (t.palette[pName] as PaletteColor).main, color: (t.palette[pName] as PaletteColor).contrastText })}>
     <CardContent>
       <Typography variant="body1" sx={{ fontWeight: 700 }} children={text} />
@@ -45,12 +46,12 @@ type AuditNoticeHeaderProps = {
   };
 };
 
-const ApprovedAuditNoticeHeader: React.FC<AuditNoticeHeaderProps> = ({ language }) => {
+const ApprovedAuditNoticeHeader: FC<AuditNoticeHeaderProps> = ({ language }) => {
   const text = language === "ko" ? "승인되어 반영된 수정 요청입니다." : "This is a modification request that has been approved and applied.";
   return <StyledNoticeHeader pName="success" text={text} />;
 };
 
-const RequestedAuditNoticeHeader: React.FC<AuditNoticeHeaderProps> = ({ language }) => {
+const RequestedAuditNoticeHeader: FC<AuditNoticeHeaderProps> = ({ language }) => {
   const text =
     language === "ko"
       ? "현재 파이콘 준비 위원회가 수정 요청을 확인 중입니다."
@@ -58,12 +59,12 @@ const RequestedAuditNoticeHeader: React.FC<AuditNoticeHeaderProps> = ({ language
   return <StyledNoticeHeader pName="info" text={text} />;
 };
 
-const RejectedAuditNoticeHeader: React.FC<AuditNoticeHeaderProps> = ({ language, audit }) => {
+const RejectedAuditNoticeHeader: FC<AuditNoticeHeaderProps> = ({ language, audit }) => {
   const auditRejectedText = language === "ko" ? "수정 요청이 반려되었습니다. " : "Your modification request has been rejected. ";
   const rejectReasonIsText = language === "ko" ? "반려 사유는 다음과 같습니다: " : "The reason for rejection is as follows: ";
 
-  let body: React.ReactNode = auditRejectedText;
-  if (R.isArray(audit.comments) && !R.isEmpty(audit.comments.filter((c) => c.created_by.is_superuser))) {
+  let body: ReactNode = auditRejectedText;
+  if (isArray(audit.comments) && !isEmpty(audit.comments.filter((c) => c.created_by.is_superuser))) {
     // 운영자가 쓴 가장 첫번째 코멘트를 반려 사유로 사용
     const rejectedReason = audit.comments.filter((c) => c.created_by.is_superuser)[0].content;
     body = (
@@ -77,12 +78,12 @@ const RejectedAuditNoticeHeader: React.FC<AuditNoticeHeaderProps> = ({ language,
   return <StyledNoticeHeader pName="error" text={body} />;
 };
 
-const CancelledAuditNoticeHeader: React.FC<AuditNoticeHeaderProps> = ({ language }) => {
+const CancelledAuditNoticeHeader: FC<AuditNoticeHeaderProps> = ({ language }) => {
   const text = language === "ko" ? "취소한 수정 요청입니다." : "This is a modification request that you have cancelled.";
   return <StyledNoticeHeader pName="warning" text={text} />;
 };
 
-const AuditNoticeHeader: React.FC<AuditNoticeHeaderProps> = ({ language, audit }) => {
+const AuditNoticeHeader: FC<AuditNoticeHeaderProps> = ({ language, audit }) => {
   switch (audit.status) {
     case "approved":
       return <ApprovedAuditNoticeHeader language={language} audit={audit} />;
@@ -97,7 +98,7 @@ const AuditNoticeHeader: React.FC<AuditNoticeHeaderProps> = ({ language, audit }
   }
 };
 
-export const InnerModificationAuditPreview: React.FC = () => {
+export const InnerModificationAuditPreview: FC = () => {
   const { language } = useAppContext();
   const { auditId } = useParams<{ auditId?: string }>();
   const participantPortalClient = useParticipantPortalClient();
@@ -118,7 +119,7 @@ export const InnerModificationAuditPreview: React.FC = () => {
   );
 };
 
-export const ModificationAuditPreview: React.FC = ErrorBoundary.with(
+export const ModificationAuditPreview: FC = ErrorBoundary.with(
   { fallback: ErrorPage },
   Suspense.with({ fallback: <LoadingPage /> }, () => <SignInGuard children={<InnerModificationAuditPreview />} />)
 );
diff --git a/apps/pyconkr-participant-portal/src/components/pages/profile_editor.tsx b/apps/pyconkr-participant-portal/src/components/pages/profile_editor.tsx
index 15ba6b2..1c0484f 100644
--- a/apps/pyconkr-participant-portal/src/components/pages/profile_editor.tsx
+++ b/apps/pyconkr-participant-portal/src/components/pages/profile_editor.tsx
@@ -1,22 +1,22 @@
-import { useParticipantPortalClient, useSignedInUserQuery, useUpdateMeMutation } from "@frontend/common/src/hooks/useParticipantPortalAPI";
-import { BackendAPIClientError } from "@frontend/common/src/apis";
+import { BackendAPIClientError } from "@frontend/common/apis";
+import { useParticipantPortalClient, useSignedInUserQuery, useUpdateMeMutation } from "@frontend/common/hooks/useParticipantPortalAPI";
 import { Key, SendAndArchive } from "@mui/icons-material";
 import { Button, SelectChangeEvent, Stack } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
-
-import { useAppContext } from "../../contexts/app_context";
-import { ChangePasswordDialog } from "../dialogs/change_password";
-import { SubmitConfirmDialog } from "../dialogs/submit_confirm";
-import { ErrorPage } from "../elements/error_page";
-import { LoadingPage } from "../elements/loading_page";
-import { MultiLanguageField } from "../elements/multilang_field";
-import { PublicFileSelector } from "../elements/public_file_selector";
-import { CurrentlyModAuditInProgress } from "../elements/requested_modification_audit_available_header";
-import { SignInGuard } from "../elements/signin_guard";
-import { PrimaryTitle } from "../elements/titles";
-import { Page } from "../page";
+import { FC, ReactNode, useState } from "react";
+
+import { ChangePasswordDialog } from "@apps/pyconkr-participant-portal/components/dialogs/change_password";
+import { SubmitConfirmDialog } from "@apps/pyconkr-participant-portal/components/dialogs/submit_confirm";
+import { ErrorPage } from "@apps/pyconkr-participant-portal/components/elements/error_page";
+import { LoadingPage } from "@apps/pyconkr-participant-portal/components/elements/loading_page";
+import { MultiLanguageField } from "@apps/pyconkr-participant-portal/components/elements/multilang_field";
+import { PublicFileSelector } from "@apps/pyconkr-participant-portal/components/elements/public_file_selector";
+import { CurrentlyModAuditInProgress } from "@apps/pyconkr-participant-portal/components/elements/requested_modification_audit_available_header";
+import { SignInGuard } from "@apps/pyconkr-participant-portal/components/elements/signin_guard";
+import { PrimaryTitle } from "@apps/pyconkr-participant-portal/components/elements/titles";
+import { Page } from "@apps/pyconkr-participant-portal/components/page";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
 export type ProfileSchema = {
   email: string;
@@ -37,12 +37,12 @@ const DummyProfile: ProfileSchema = {
   image: null,
 };
 
-const InnerProfileEditor: React.FC = () => {
+const InnerProfileEditor: FC = () => {
   const { language } = useAppContext();
   const participantPortalClient = useParticipantPortalClient();
   const { data: profile } = useSignedInUserQuery(participantPortalClient);
   const updateMeMutation = useUpdateMeMutation(participantPortalClient);
-  const [editorState, setEditorState] = React.useState<ProfileEditorState>({
+  const [editorState, setEditorState] = useState<ProfileEditorState>({
     openChangePasswordDialog: false,
     openSubmitConfirmDialog: false,
     ...(profile || DummyProfile),
@@ -63,7 +63,7 @@ const InnerProfileEditor: React.FC = () => {
   const openChangePasswordDialog = () => setEditorState((ps) => ({ ...ps, openChangePasswordDialog: true }));
   const closeChangePasswordDialog = () => setEditorState((ps) => ({ ...ps, openChangePasswordDialog: false }));
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const setImageId = (image: string | null) => setEditorState((ps) => ({ ...ps, image }));
@@ -152,7 +152,7 @@ const InnerProfileEditor: React.FC = () => {
   );
 };
 
-export const ProfileEditor: React.FC = ErrorBoundary.with(
+export const ProfileEditor: FC = ErrorBoundary.with(
   { fallback: ErrorPage },
   Suspense.with({ fallback: <LoadingPage /> }, () => <SignInGuard children={<InnerProfileEditor />} />)
 );
@@ -166,8 +166,8 @@ type ProfileEditorFormProps = {
 };
 
 // TODO: FIXME: 언젠간 위의 ProfileEditor를 아래 ProfileEditorForm에 마이그레이션해야 함
-export const ProfileEditorForm: React.FC<ProfileEditorFormProps> = ({ disabled, language, defaultValue, showSubmitButton, onSubmit }) => {
-  const [formState, setFormState] = React.useState<ProfileSchema>(defaultValue);
+export const ProfileEditorForm: FC<ProfileEditorFormProps> = ({ disabled, language, defaultValue, showSubmitButton, onSubmit }) => {
+  const [formState, setFormState] = useState<ProfileSchema>(defaultValue);
   const setImageId = (image: string | null) => setFormState((ps) => ({ ...ps, image }));
   const onImageSelectChange = (e: SelectChangeEvent<string | null>) => setImageId(e.target.value);
   const setNickname = (value: string | undefined, lang: "ko" | "en") => setFormState((ps) => ({ ...ps, [`nickname_${lang}`]: value }));
diff --git a/apps/pyconkr-participant-portal/src/components/pages/session_editor.tsx b/apps/pyconkr-participant-portal/src/components/pages/session_editor.tsx
index 549e2e8..f01c6d7 100644
--- a/apps/pyconkr-participant-portal/src/components/pages/session_editor.tsx
+++ b/apps/pyconkr-participant-portal/src/components/pages/session_editor.tsx
@@ -1,24 +1,28 @@
-import { Components } from "@frontend/common";
-import { useParticipantPortalClient, useRetrievePresentationQuery, useUpdatePresentationMutation } from "@frontend/common/src/hooks/useParticipantPortalAPI";
-import { BackendAPIClientError } from "@frontend/common/src/apis";
+import { BackendAPIClientError } from "@frontend/common/apis";
+import { Fieldset } from "@frontend/common/components";
+import {
+  useParticipantPortalClient,
+  useRetrievePresentationQuery,
+  useUpdatePresentationMutation,
+} from "@frontend/common/hooks/useParticipantPortalAPI";
 import { SendAndArchive } from "@mui/icons-material";
 import { Box, Button, Divider, SelectChangeEvent, Stack, TextField, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
+import { FC, ReactNode, useState } from "react";
 import { Link, Navigate, useParams } from "react-router-dom";
 
-import { useAppContext } from "../../contexts/app_context";
-import { SubmitConfirmDialog } from "../dialogs/submit_confirm";
-import { BlockQuote } from "../elements/blockquote";
-import { ErrorPage } from "../elements/error_page";
-import { LoadingPage } from "../elements/loading_page";
-import { MultiLanguageField, MultiLanguageMarkdownField } from "../elements/multilang_field";
-import { PublicFileSelector } from "../elements/public_file_selector";
-import { CurrentlyModAuditInProgress } from "../elements/requested_modification_audit_available_header";
-import { SignInGuard } from "../elements/signin_guard";
-import { PrimaryTitle, SecondaryTitle } from "../elements/titles";
-import { Page } from "../page";
+import { SubmitConfirmDialog } from "@apps/pyconkr-participant-portal/components/dialogs/submit_confirm";
+import { BlockQuote } from "@apps/pyconkr-participant-portal/components/elements/blockquote";
+import { ErrorPage } from "@apps/pyconkr-participant-portal/components/elements/error_page";
+import { LoadingPage } from "@apps/pyconkr-participant-portal/components/elements/loading_page";
+import { MultiLanguageField, MultiLanguageMarkdownField } from "@apps/pyconkr-participant-portal/components/elements/multilang_field";
+import { PublicFileSelector } from "@apps/pyconkr-participant-portal/components/elements/public_file_selector";
+import { CurrentlyModAuditInProgress } from "@apps/pyconkr-participant-portal/components/elements/requested_modification_audit_available_header";
+import { SignInGuard } from "@apps/pyconkr-participant-portal/components/elements/signin_guard";
+import { PrimaryTitle, SecondaryTitle } from "@apps/pyconkr-participant-portal/components/elements/titles";
+import { Page } from "@apps/pyconkr-participant-portal/components/page";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
 type SessionUpdateSchema = {
   id: string;
@@ -60,8 +64,8 @@ type SessionEditorFormProps = {
 
 type SessionEditorFormState = SessionSchema;
 
-export const SessionEditorForm: React.FC<SessionEditorFormProps> = ({ disabled, language, defaultValue, showSubmitButton, onSubmit }) => {
-  const [formState, setFormState] = React.useState<SessionEditorFormState>(defaultValue);
+export const SessionEditorForm: FC<SessionEditorFormProps> = ({ disabled, language, defaultValue, showSubmitButton, onSubmit }) => {
+  const [formState, setFormState] = useState<SessionEditorFormState>(defaultValue);
 
   const setTitle = (value: string | undefined, lang: "ko" | "en") => setFormState((ps) => ({ ...ps, [`title_${lang}`]: value }));
   const setSummary = (value: string | undefined, lang: "ko" | "en") => setFormState((ps) => ({ ...ps, [`summary_${lang}`]: value }));
@@ -140,7 +144,7 @@ export const SessionEditorForm: React.FC<SessionEditorFormProps> = ({ disabled,
           disabled={disabled}
           fullWidth
         />
-        <Components.Fieldset legend={slideShowStr}>
+        <Fieldset legend={slideShowStr}>
           <BlockQuote children={slideShowDescription} />
           <TextField
             label={slideShowStr}
@@ -150,7 +154,7 @@ export const SessionEditorForm: React.FC<SessionEditorFormProps> = ({ disabled,
             sx={{ mt: 2 }}
             fullWidth
           />
-        </Components.Fieldset>
+        </Fieldset>
         <MultiLanguageField
           label={{ ko: "발표 요약", en: "Session Summary" }}
           description={{ ko: "발표를 짧게 요약해주세요.", en: "Please enter the short session summary." }}
@@ -220,10 +224,10 @@ type SessionEditorState = {
   formData?: SessionUpdateSchema;
 };
 
-const InnerSessionEditor: React.FC = () => {
+const InnerSessionEditor: FC = () => {
   const { sessionId } = useParams<{ sessionId?: string }>();
   const { language } = useAppContext();
-  const [editorState, setEditorState] = React.useState<SessionEditorState>({ openSubmitConfirmDialog: false });
+  const [editorState, setEditorState] = useState<SessionEditorState>({ openSubmitConfirmDialog: false });
   const participantPortalClient = useParticipantPortalClient();
   const updateSessionMutation = useUpdatePresentationMutation(participantPortalClient);
   const { data: session } = useRetrievePresentationQuery(participantPortalClient, sessionId || "");
@@ -235,7 +239,7 @@ const InnerSessionEditor: React.FC = () => {
       ? "발표 정보 수정을 요청했어요. 검토 후 반영될 예정이에요."
       : "Presentation information update requested. It will be applied after review.";
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const openSubmitConfirmDialog = (formData: SessionUpdateSchema) => setEditorState((ps) => ({ ...ps, openSubmitConfirmDialog: true, formData }));
@@ -279,7 +283,7 @@ const InnerSessionEditor: React.FC = () => {
   );
 };
 
-export const SessionEditor: React.FC = ErrorBoundary.with(
+export const SessionEditor: FC = ErrorBoundary.with(
   { fallback: ErrorPage },
   Suspense.with({ fallback: <LoadingPage /> }, () => <SignInGuard children={<InnerSessionEditor />} />)
 );
diff --git a/apps/pyconkr-participant-portal/src/components/pages/signin.tsx b/apps/pyconkr-participant-portal/src/components/pages/signin.tsx
index c98369d..17b36dd 100644
--- a/apps/pyconkr-participant-portal/src/components/pages/signin.tsx
+++ b/apps/pyconkr-participant-portal/src/components/pages/signin.tsx
@@ -1,25 +1,26 @@
-import { useParticipantPortalClient, useSignInMutation, useSignedInUserQuery } from "@frontend/common/src/hooks/useParticipantPortalAPI";
-import { useEmail } from "@frontend/common/src/hooks/useEmail";
-import { getFormValue, isFormValid } from "@frontend/common/src/utils";
-import { BackendAPIClientError } from "@frontend/common/src/apis";
+import { BackendAPIClientError } from "@frontend/common/apis";
+import { useEmail } from "@frontend/common/hooks/useEmail";
+import { useParticipantPortalClient, useSignInMutation, useSignedInUserQuery } from "@frontend/common/hooks/useParticipantPortalAPI";
+import { getFormValue, isFormValid } from "@frontend/common/utils";
 import { Button, Stack, TextField, Typography } from "@mui/material";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
+import { FC, ReactNode, useRef } from "react";
 import { Navigate, useNavigate } from "react-router-dom";
 
-import { useAppContext } from "../../contexts/app_context";
-import { Page } from "../page";
+import { Page } from "@apps/pyconkr-participant-portal/components/page";
+import { useAppContext } from "@apps/pyconkr-participant-portal/contexts/app_context";
 
-export const SignInPage: React.FC = () => {
-  const formRef = React.useRef<HTMLFormElement>(null);
+export const SignInPage: FC = () => {
+  const formRef = useRef<HTMLFormElement>(null);
   const navigate = useNavigate();
   const { sendEmail } = useEmail();
   const { language } = useAppContext();
   const participantPortalClient = useParticipantPortalClient();
   const { data } = useSignedInUserQuery(participantPortalClient);
+  const signInMutation = useSignInMutation(participantPortalClient);
   if (data) return <Navigate to="/" replace />;
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const signInStr = language === "ko" ? "로그인" : "Sign In";
@@ -47,7 +48,6 @@ export const SignInPage: React.FC = () => {
       </>
     );
 
-  const signInMutation = useSignInMutation(participantPortalClient);
   const signIn = () => {
     if (!isFormValid(formRef.current)) return;
 
diff --git a/apps/pyconkr-participant-portal/src/components/pages/sponsor_editor.tsx b/apps/pyconkr-participant-portal/src/components/pages/sponsor_editor.tsx
index 50663e7..80a9c54 100644
--- a/apps/pyconkr-participant-portal/src/components/pages/sponsor_editor.tsx
+++ b/apps/pyconkr-participant-portal/src/components/pages/sponsor_editor.tsx
@@ -1,13 +1,13 @@
 import { FormControl, InputLabel, Select, Stack, Tab, Tabs, TextField, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC } from "react";
 
-import { ErrorPage } from "../elements/error_page";
-import { LoadingPage } from "../elements/loading_page";
-import { SignInGuard } from "../elements/signin_guard";
-import { Page } from "../page";
+import { ErrorPage } from "@apps/pyconkr-participant-portal/components/elements/error_page";
+import { LoadingPage } from "@apps/pyconkr-participant-portal/components/elements/loading_page";
+import { SignInGuard } from "@apps/pyconkr-participant-portal/components/elements/signin_guard";
+import { Page } from "@apps/pyconkr-participant-portal/components/page";
 
-const InnerSponsorEditor: React.FC = () => {
+const InnerSponsorEditor: FC = () => {
   return (
     <SignInGuard>
       <Page>
@@ -31,7 +31,7 @@ const InnerSponsorEditor: React.FC = () => {
   );
 };
 
-export const SponsorEditor: React.FC = ErrorBoundary.with(
+export const SponsorEditor: FC = ErrorBoundary.with(
   { fallback: ErrorPage },
   Suspense.with({ fallback: <LoadingPage /> }, () => <SignInGuard children={<InnerSponsorEditor />} />)
 );
diff --git a/apps/pyconkr-participant-portal/src/contexts/app_context.tsx b/apps/pyconkr-participant-portal/src/contexts/app_context.tsx
index 70d13f0..4ceb005 100644
--- a/apps/pyconkr-participant-portal/src/contexts/app_context.tsx
+++ b/apps/pyconkr-participant-portal/src/contexts/app_context.tsx
@@ -1,16 +1,15 @@
-import * as React from "react";
-
+import { Dispatch, SetStateAction, createContext, useContext } from "react";
 type LanguageType = "ko" | "en";
 
 export type AppContextType = {
   language: LanguageType;
-  setAppContext: React.Dispatch<React.SetStateAction<Omit<AppContextType, "setAppContext">>>;
+  setAppContext: Dispatch<SetStateAction<Omit<AppContextType, "setAppContext">>>;
 };
 
-export const AppContext = React.createContext<AppContextType | undefined>(undefined);
+export const AppContext = createContext<AppContextType | undefined>(undefined);
 
 export const useAppContext = (): AppContextType => {
-  const context = React.useContext(AppContext);
+  const context = useContext(AppContext);
   if (!context) {
     throw new Error("useAppContext must be used within an AppContextProvider");
   }
diff --git a/apps/pyconkr-participant-portal/src/main.tsx b/apps/pyconkr-participant-portal/src/main.tsx
index cdf8bbc..6018a27 100644
--- a/apps/pyconkr-participant-portal/src/main.tsx
+++ b/apps/pyconkr-participant-portal/src/main.tsx
@@ -1,12 +1,13 @@
-import { Components, Utils } from "@frontend/common";
-import type { ContextOptions } from "@frontend/common/src/contexts";
+import { CenteredPage, CommonContextProvider } from "@frontend/common/components";
+import type { ContextOptions } from "@frontend/common/contexts";
+import { registerChunkLoadErrorReloadHandler } from "@frontend/common/utils";
 import { CircularProgress, createTheme, CssBaseline, ThemeProvider } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { matchQuery, MutationCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { SnackbarProvider } from "notistack";
-import * as React from "react";
-import * as ReactDom from "react-dom/client";
+import { FC, StrictMode, useState } from "react";
+import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
 import { App } from "./App.tsx";
@@ -32,7 +33,7 @@ const queryClient = new QueryClient({
   }),
 });
 
-export const muiTheme = createTheme();
+const muiTheme = createTheme();
 
 const backendApiDomainEnv: string = import.meta.env.VITE_PYCONKR_BACKEND_API_DOMAIN;
 const backendApiDomain = backendApiDomainEnv.startsWith("http://") ? "" : backendApiDomainEnv;
@@ -48,24 +49,24 @@ const CommonOptions: ContextOptions = {
 };
 
 const SuspenseFallback = (
-  <Components.CenteredPage>
+  <CenteredPage>
     <CircularProgress />
-  </Components.CenteredPage>
+  </CenteredPage>
 );
 
-const MainApp: React.FC = () => {
-  const [appState, setAppContext] = React.useState<Omit<AppContextType, "setAppContext">>({
+export const MainApp: FC = () => {
+  const [appState, setAppContext] = useState<Omit<AppContextType, "setAppContext">>({
     language: (localStorage.getItem(LOCAL_STORAGE_LANGUAGE_KEY) as "ko" | "en" | null) ?? "ko",
   });
 
   return (
-    <React.StrictMode>
+    <StrictMode>
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools initialIsOpen={false} />
         <SnackbarProvider>
           <BrowserRouter>
             <AppContext.Provider value={{ ...appState, setAppContext }}>
-              <Components.CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
+              <CommonContextProvider options={{ ...CommonOptions, language: appState.language }}>
                 <ErrorBoundary fallback={ErrorPage}>
                   <Suspense fallback={SuspenseFallback}>
                     <ThemeProvider theme={muiTheme}>
@@ -74,15 +75,15 @@ const MainApp: React.FC = () => {
                     </ThemeProvider>
                   </Suspense>
                 </ErrorBoundary>
-              </Components.CommonContextProvider>
+              </CommonContextProvider>
             </AppContext.Provider>
           </BrowserRouter>
         </SnackbarProvider>
       </QueryClientProvider>
-    </React.StrictMode>
+    </StrictMode>
   );
 };
 
-Utils.registerChunkLoadErrorReloadHandler();
+registerChunkLoadErrorReloadHandler();
 
-ReactDom.createRoot(document.getElementById("root")!).render(<MainApp />);
+createRoot(document.getElementById("root")!).render(<MainApp />);
diff --git a/apps/pyconkr-participant-portal/tsconfig.json b/apps/pyconkr-participant-portal/tsconfig.json
index 0e0e049..ff99f6e 100644
--- a/apps/pyconkr-participant-portal/tsconfig.json
+++ b/apps/pyconkr-participant-portal/tsconfig.json
@@ -1,32 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "forceConsistentCasingInFileNames": false,
-
-    /* Paths */
-    "baseUrl": ".",
-    "paths": {
-      "@apps/pyconkr-participant-portal/*": ["apps/pyconkr-participant-portal/src/*"],
-    }
-  },
-  "include": ["src", "vite.config.mts", "vite-env.d.ts", "../../types"],
+  "extends": "../../tsconfig.base.json",
+  "include": ["src", "vite.config.mts", "vite-env.d.ts", "../../types"]
 }
diff --git a/apps/pyconkr-participant-portal/vite.config.mts b/apps/pyconkr-participant-portal/vite.config.mts
index 358e610..86e61cb 100644
--- a/apps/pyconkr-participant-portal/vite.config.mts
+++ b/apps/pyconkr-participant-portal/vite.config.mts
@@ -20,9 +20,8 @@ export default defineConfig(({ mode }) => {
     plugins: [react(), mdx(), ...(isLocalHttpBackend ? [] : [mkcert({ hosts: [host] })]), svgr()],
     resolve: {
       alias: {
-        "@frontend/common/src": path.resolve(__dirname, "../../packages/common/src"),
-        "@frontend/common": path.resolve(__dirname, "../../packages/common/src/index.ts"),
-        "@frontend/shop": path.resolve(__dirname, "../../packages/shop/src/index.ts"),
+        "@frontend/common": path.resolve(__dirname, "../../packages/common/src"),
+        "@frontend/shop": path.resolve(__dirname, "../../packages/shop/src"),
         "@apps/pyconkr-participant-portal": path.resolve(__dirname, "./src"),
       },
     },
diff --git a/eslint.config.js b/eslint.config.js
index 76c5720..c5a7106 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -7,45 +7,71 @@ import reactRefresh from "eslint-plugin-react-refresh";
 import globals from "globals";
 import tseslint from "typescript-eslint";
 
-export default tseslint.config(js.configs.recommended, tseslint.configs.recommended, eslintPluginPrettierRecommended, {
-  ignores: ["dist"],
-  files: ["**/*.{ts,tsx}"],
-  languageOptions: {
-    ecmaVersion: 2020,
-    globals: {
-      ...globals.browser,
-      React: "readonly",
+const APP_NAMES = ["pyconkr-2025", "pyconkr-2026", "pyconkr-admin", "pyconkr-participant-portal"];
+const crossAppZones = APP_NAMES.flatMap((target) =>
+  APP_NAMES.filter((from) => from !== target).map((from) => ({
+    target: `./apps/${target}`,
+    from: `./apps/${from}`,
+  }))
+);
+
+export default tseslint.config(
+  { ignores: ["**/dist/**", "**/node_modules/**", "**/*.tsbuildinfo"] },
+  js.configs.recommended,
+  tseslint.configs.recommended,
+  eslintPluginPrettierRecommended,
+  {
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: {
+        ...globals.browser,
+        React: "readonly",
+      },
+      parser: tseslint.parser,
+      parserOptions: {
+        project: "./tsconfig.json",
+      },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      import: importPlugin,
+      "jsx-a11y": jsxA11y,
     },
-    parser: tseslint.parser,
-    parserOptions: {
-      project: "./tsconfig.json",
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+      "prettier/prettier": ["error", { printWidth: 150 }],
+      "import/order": [
+        "error",
+        {
+          groups: ["builtin", "external", "internal"],
+          "newlines-between": "always",
+          alphabetize: { order: "asc" },
+        },
+      ],
+      "jsx-a11y/alt-text": "error",
+      "@typescript-eslint/no-namespace": "off",
+      "import/no-restricted-paths": [
+        "error",
+        {
+          zones: [
+            // 패키지는 앱에 의존할 수 없음
+            { target: "./packages", from: "./apps" },
+            // common은 shop에 의존할 수 없음 (하위 레이어가 상위 레이어를 참조 금지)
+            { target: "./packages/common", from: "./packages/shop" },
+            // 앱끼리는 서로 import할 수 없음
+            ...crossAppZones,
+          ],
+        },
+      ],
     },
-  },
-  plugins: {
-    "react-hooks": reactHooks,
-    "react-refresh": reactRefresh,
-    import: importPlugin,
-    "jsx-a11y": jsxA11y,
-  },
-  rules: {
-    ...reactHooks.configs.recommended.rules,
-    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
-    "prettier/prettier": ["error", { printWidth: 150 }],
-    "import/order": [
-      "error",
-      {
-        groups: ["builtin", "external", "internal"],
-        "newlines-between": "always",
-        alphabetize: { order: "asc" },
+    settings: {
+      "import/resolver": {
+        typescript: true,
+        node: true,
       },
-    ],
-    "jsx-a11y/alt-text": "error",
-    "@typescript-eslint/no-namespace": "off",
-  },
-  settings: {
-    "import/resolver": {
-      typescript: true,
-      node: true,
     },
-  },
-});
+  }
+);
diff --git a/packages/common/src/apis/admin_api.ts b/packages/common/src/apis/admin_api.ts
index cf887e1..0d068bf 100644
--- a/packages/common/src/apis/admin_api.ts
+++ b/packages/common/src/apis/admin_api.ts
@@ -1,4 +1,3 @@
-import { BackendAPIClient } from "./client";
 import {
   AdminSchemaDefinition,
   ChoicesResponse,
@@ -14,7 +13,9 @@ import {
   UserResetPasswordResponseSchema,
   UserSchema,
   UserSignInSchema,
-} from "../schemas/backendAdminAPI";
+} from "@frontend/common/schemas/backendAdminAPI";
+
+import { BackendAPIClient } from "./client";
 
 export const me = (client: BackendAPIClient) => async () => {
   try {
diff --git a/packages/common/src/apis/client.ts b/packages/common/src/apis/client.ts
index 958b461..1577c99 100644
--- a/packages/common/src/apis/client.ts
+++ b/packages/common/src/apis/client.ts
@@ -1,8 +1,8 @@
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
-import * as R from "remeda";
+import { isString } from "remeda";
 
-import * as BackendAPISchemas from "../schemas/backendAPI";
-import { getCookie } from "../utils/cookie";
+import { ErrorResponseSchema, isObjectErrorResponseSchema } from "@frontend/common/schemas/backendAPI";
+import { getCookie } from "@frontend/common/utils/cookie";
 
 const DEFAULT_ERROR_MESSAGE = "알 수 없는 문제가 발생했습니다, 잠시 후 다시 시도해주세요.";
 const DEFAULT_ERROR_RESPONSE = {
@@ -13,12 +13,12 @@ const DEFAULT_ERROR_RESPONSE = {
 export class BackendAPIClientError extends Error {
   readonly name = "BackendAPIClientError";
   readonly status: number;
-  readonly detail: BackendAPISchemas.ErrorResponseSchema;
+  readonly detail: ErrorResponseSchema;
   readonly originalError: unknown;
 
   constructor(error?: unknown) {
     let message: string = DEFAULT_ERROR_MESSAGE;
-    let detail: BackendAPISchemas.ErrorResponseSchema = DEFAULT_ERROR_RESPONSE;
+    let detail: ErrorResponseSchema = DEFAULT_ERROR_RESPONSE;
     let status = -1;
 
     if (axios.isAxiosError(error)) {
@@ -26,14 +26,14 @@ export class BackendAPIClientError extends Error {
 
       if (response) {
         status = response.status;
-        detail = BackendAPISchemas.isObjectErrorResponseSchema(response.data)
+        detail = isObjectErrorResponseSchema(response.data)
           ? response.data
           : {
               type: "axios_error",
               errors: [
                 {
                   code: "unknown",
-                  detail: R.isString(response.data) ? response.data : DEFAULT_ERROR_MESSAGE,
+                  detail: isString(response.data) ? response.data : DEFAULT_ERROR_MESSAGE,
                   attr: null,
                 },
               ],
@@ -61,8 +61,12 @@ export class BackendAPIClientError extends Error {
 
 type supportedLanguages = "ko" | "en";
 
-type AxiosRequestWithoutPayload = <T = unknown, R = AxiosResponse<T>, D = unknown>(url: string, config?: AxiosRequestConfig<D>) => Promise<R>;
-type AxiosRequestWithPayload = <T = unknown, R = AxiosResponse<T>, D = unknown>(url: string, data?: D, config?: AxiosRequestConfig<D>) => Promise<R>;
+type AxiosRequestWithoutPayload = <T = unknown, Resp = AxiosResponse<T>, D = unknown>(url: string, config?: AxiosRequestConfig<D>) => Promise<Resp>;
+type AxiosRequestWithPayload = <T = unknown, Resp = AxiosResponse<T>, D = unknown>(
+  url: string,
+  data?: D,
+  config?: AxiosRequestConfig<D>
+) => Promise<Resp>;
 
 export class BackendAPIClient {
   readonly language: supportedLanguages;
@@ -107,9 +111,9 @@ export class BackendAPIClient {
   }
 
   _safe_request_without_payload(requestFunc: AxiosRequestWithoutPayload): AxiosRequestWithoutPayload {
-    return async <T = unknown, R = AxiosResponse<T>, D = unknown>(url: string, config?: AxiosRequestConfig<D>) => {
+    return async <T = unknown, Resp = AxiosResponse<T>, D = unknown>(url: string, config?: AxiosRequestConfig<D>) => {
       try {
-        return await requestFunc<T, R, D>(url, config);
+        return await requestFunc<T, Resp, D>(url, config);
       } catch (error) {
         throw new BackendAPIClientError(error);
       }
@@ -117,9 +121,9 @@ export class BackendAPIClient {
   }
 
   _safe_request_with_payload(requestFunc: AxiosRequestWithPayload): AxiosRequestWithPayload {
-    return async <T = unknown, R = AxiosResponse<T>, D = unknown>(url: string, data: D, config?: AxiosRequestConfig<D>) => {
+    return async <T = unknown, Resp = AxiosResponse<T>, D = unknown>(url: string, data: D, config?: AxiosRequestConfig<D>) => {
       try {
-        return await requestFunc<T, R, D>(url, data, config);
+        return await requestFunc<T, Resp, D>(url, data, config);
       } catch (error) {
         throw new BackendAPIClientError(error);
       }
diff --git a/packages/common/src/apis/index.ts b/packages/common/src/apis/index.ts
index 664752c..77030c6 100644
--- a/packages/common/src/apis/index.ts
+++ b/packages/common/src/apis/index.ts
@@ -1,13 +1,20 @@
+import {
+  FlattenedSiteMapSchema,
+  PageSchema,
+  SessionQueryParameterSchema,
+  SessionSchema,
+  SponsorTierSchema,
+} from "@frontend/common/schemas/backendAPI";
+
 import { BackendAPIClient, BackendAPIClientError as _BackendAPIClientError } from "./client";
-import * as BackendAPISchemas from "../schemas/backendAPI";
 
 export const BackendAPIClientError = _BackendAPIClientError;
-export const listSiteMaps = (client: BackendAPIClient) => () => client.get<BackendAPISchemas.FlattenedSiteMapSchema[]>("v1/cms/sitemap/");
-export const retrievePage = (client: BackendAPIClient) => (id: string) => client.get<BackendAPISchemas.PageSchema>(`v1/cms/page/${id}/`);
-export const listSponsors = (client: BackendAPIClient) => () => client.get<BackendAPISchemas.SponsorTierSchema[]>("v1/event/sponsor/");
-export const listSessions = (client: BackendAPIClient, params?: BackendAPISchemas.SessionQueryParameterSchema) => () =>
-  client.get<BackendAPISchemas.SessionSchema[]>("v1/event/presentation/", { params });
+export const listSiteMaps = (client: BackendAPIClient) => () => client.get<FlattenedSiteMapSchema[]>("v1/cms/sitemap/");
+export const retrievePage = (client: BackendAPIClient) => (id: string) => client.get<PageSchema>(`v1/cms/page/${id}/`);
+export const listSponsors = (client: BackendAPIClient) => () => client.get<SponsorTierSchema[]>("v1/event/sponsor/");
+export const listSessions = (client: BackendAPIClient, params?: SessionQueryParameterSchema) => () =>
+  client.get<SessionSchema[]>("v1/event/presentation/", { params });
 export const retrieveSession = (client: BackendAPIClient) => (id: string) => {
   if (!id) return Promise.resolve(null);
-  return client.get<BackendAPISchemas.SessionSchema>(`v1/event/presentation/${id}/`);
+  return client.get<SessionSchema>(`v1/event/presentation/${id}/`);
 };
diff --git a/packages/common/src/apis/participant_portal_api.ts b/packages/common/src/apis/participant_portal_api.ts
index b09c0f4..4ea7f56 100644
--- a/packages/common/src/apis/participant_portal_api.ts
+++ b/packages/common/src/apis/participant_portal_api.ts
@@ -1,65 +1,71 @@
+import {
+  ModificationAuditCancelRequestSchema,
+  ModificationAuditPreviewSchema,
+  ModificationAuditSchema,
+  PresentationRetrieveSchema,
+  PresentationUpdateSchema,
+  PublicFileSchema,
+  UserChangePasswordSchema,
+  UserSchema,
+  UserSignInSchema,
+  UserUpdateSchema,
+} from "@frontend/common/schemas/backendParticipantPortalAPI";
+
 import { BackendAPIClient } from "./client";
-import * as ParticipantPortalAPISchemas from "../schemas/backendParticipantPortalAPI";
 
 export const me = (client: BackendAPIClient) => async () => {
   try {
-    return await client.get<ParticipantPortalAPISchemas.UserSchema>("v1/participant-portal/user/me/");
+    return await client.get<UserSchema>("v1/participant-portal/user/me/");
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (_) {
     return null;
   }
 };
 
-export const updateMe = (client: BackendAPIClient) => (data: ParticipantPortalAPISchemas.UserUpdateSchema) =>
-  client.patch<ParticipantPortalAPISchemas.UserSchema, ParticipantPortalAPISchemas.UserUpdateSchema>("v1/participant-portal/user/me/", data);
+export const updateMe = (client: BackendAPIClient) => (data: UserUpdateSchema) =>
+  client.patch<UserSchema, UserUpdateSchema>("v1/participant-portal/user/me/", data);
 
-export const previewMeModAudit = (client: BackendAPIClient) => async () =>
-  client.get<ParticipantPortalAPISchemas.UserSchema>("v1/participant-portal/user/me/preview/");
+export const previewMeModAudit = (client: BackendAPIClient) => async () => client.get<UserSchema>("v1/participant-portal/user/me/preview/");
 
-export const signIn = (client: BackendAPIClient) => (data: ParticipantPortalAPISchemas.UserSignInSchema) =>
-  client.post<ParticipantPortalAPISchemas.UserSchema, ParticipantPortalAPISchemas.UserSignInSchema>("v1/participant-portal/user/signin/", data);
+export const signIn = (client: BackendAPIClient) => (data: UserSignInSchema) =>
+  client.post<UserSchema, UserSignInSchema>("v1/participant-portal/user/signin/", data);
 
 export const signOut = (client: BackendAPIClient) => () => client.delete<void>("v1/participant-portal/user/signout/");
 
-export const changePassword = (client: BackendAPIClient) => (data: ParticipantPortalAPISchemas.UserChangePasswordSchema) =>
-  client.put<void, ParticipantPortalAPISchemas.UserChangePasswordSchema>("v1/participant-portal/user/password/", data);
+export const changePassword = (client: BackendAPIClient) => (data: UserChangePasswordSchema) =>
+  client.put<void, UserChangePasswordSchema>("v1/participant-portal/user/password/", data);
 
-export const listPublicFiles = (client: BackendAPIClient) => () =>
-  client.get<ParticipantPortalAPISchemas.PublicFileSchema[]>("v1/participant-portal/public-file/");
+export const listPublicFiles = (client: BackendAPIClient) => () => client.get<PublicFileSchema[]>("v1/participant-portal/public-file/");
 
 export const uploadPublicFile = (client: BackendAPIClient) => (file: File) => {
   const formData = new FormData();
   formData.append("file", file);
-  return client.post<ParticipantPortalAPISchemas.PublicFileSchema, FormData>(`v1/participant-portal/public-file/upload/`, formData, {
+  return client.post<PublicFileSchema, FormData>(`v1/participant-portal/public-file/upload/`, formData, {
     headers: { "Content-Type": "multipart/form-data" },
   });
 };
 
-export const listPresentations = (client: BackendAPIClient) => () =>
-  client.get<ParticipantPortalAPISchemas.PresentationRetrieveSchema[]>("v1/participant-portal/presentation/");
+export const listPresentations = (client: BackendAPIClient) => () => client.get<PresentationRetrieveSchema[]>("v1/participant-portal/presentation/");
 
 export const retrievePresentation = (client: BackendAPIClient, id: string) => () => {
   if (!id) return Promise.resolve(null);
-  return client.get<ParticipantPortalAPISchemas.PresentationRetrieveSchema>(`v1/participant-portal/presentation/${id}/`);
+  return client.get<PresentationRetrieveSchema>(`v1/participant-portal/presentation/${id}/`);
 };
 
 export const previewPresentationModAudit = (client: BackendAPIClient, id: string) => () => {
   if (!id) return Promise.resolve(null);
-  return client.get<ParticipantPortalAPISchemas.PresentationRetrieveSchema>(`v1/participant-portal/presentation/${id}/preview/`);
+  return client.get<PresentationRetrieveSchema>(`v1/participant-portal/presentation/${id}/preview/`);
 };
 
-export const patchPresentation = (client: BackendAPIClient) => (data: ParticipantPortalAPISchemas.PresentationUpdateSchema) =>
-  client.patch<ParticipantPortalAPISchemas.PresentationRetrieveSchema, ParticipantPortalAPISchemas.PresentationUpdateSchema>(
-    `v1/participant-portal/presentation/${data.id}/`,
-    data
-  );
+export const patchPresentation = (client: BackendAPIClient) => (data: PresentationUpdateSchema) =>
+  client.patch<PresentationRetrieveSchema, PresentationUpdateSchema>(`v1/participant-portal/presentation/${data.id}/`, data);
 
 export const listModificationAudits = (client: BackendAPIClient) => () =>
-  client.get<ParticipantPortalAPISchemas.ModificationAuditSchema[]>("v1/participant-portal/modification-audit/");
+  client.get<ModificationAuditSchema[]>("v1/participant-portal/modification-audit/");
 
 export const previewModificationAudit = (client: BackendAPIClient, id: string) => () => {
   try {
-    return client.get<ParticipantPortalAPISchemas.ModificationAuditPreviewSchema>(`v1/participant-portal/modification-audit/${id}/preview/`);
+    return client.get<ModificationAuditPreviewSchema>(`v1/participant-portal/modification-audit/${id}/preview/`);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (_) {
     return Promise.resolve(null);
@@ -67,10 +73,7 @@ export const previewModificationAudit = (client: BackendAPIClient, id: string) =
 };
 
 export const retrieveModificationAudit = (client: BackendAPIClient, id: string) => () =>
-  client.get<ParticipantPortalAPISchemas.ModificationAuditSchema[]>(`v1/participant-portal/modification-audit/${id}`);
+  client.get<ModificationAuditSchema[]>(`v1/participant-portal/modification-audit/${id}`);
 
-export const cancelModificationAudit = (client: BackendAPIClient) => (data: ParticipantPortalAPISchemas.ModificationAuditCancelRequestSchema) =>
-  client.patch<ParticipantPortalAPISchemas.ModificationAuditSchema, ParticipantPortalAPISchemas.ModificationAuditCancelRequestSchema>(
-    `v1/participant-portal/modification-audit/${data.id}/cancel/`,
-    data
-  );
+export const cancelModificationAudit = (client: BackendAPIClient) => (data: ModificationAuditCancelRequestSchema) =>
+  client.patch<ModificationAuditSchema, ModificationAuditCancelRequestSchema>(`v1/participant-portal/modification-audit/${data.id}/cancel/`, data);
diff --git a/packages/common/src/apis/session.ts b/packages/common/src/apis/session.ts
index c398708..78a6a6b 100644
--- a/packages/common/src/apis/session.ts
+++ b/packages/common/src/apis/session.ts
@@ -1,10 +1,11 @@
+import { SessionSchema } from "@frontend/common/schemas/backendSessionAPI";
+
 import { BackendAPIClient } from "./client";
-import * as BackendSessionAPISchemas from "../schemas/backendSessionAPI";
 
 export const sessionList = (client: BackendAPIClient) => async () => {
-  return await client.get<BackendSessionAPISchemas.SessionSchema[]>("v1/event/presentation/");
+  return await client.get<SessionSchema[]>("v1/event/presentation/");
 };
 
 export const sessionFilteredList = (client: BackendAPIClient, categoryName: string) => async () => {
-  return await client.get<BackendSessionAPISchemas.SessionSchema[]>(`v1/event/presentation/?category=${categoryName}`);
+  return await client.get<SessionSchema[]>(`v1/event/presentation/?category=${categoryName}`);
 };
diff --git a/packages/common/src/components/auto_text_linking.tsx b/packages/common/src/components/auto_text_linking.tsx
index aa671f0..57bf946 100644
--- a/packages/common/src/components/auto_text_linking.tsx
+++ b/packages/common/src/components/auto_text_linking.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
+import { FC } from "react";
 
 import { LinkHandler } from "./link_handler";
 
 const urlRegex = /(mailto:[\w.-]+@[\w.-]+\.[a-zA-Z]{2,})|(https?:\/\/[^\s]+)/gi;
 
-export const AutoTextLinking: React.FC<{ children: string }> = ({ children }) => {
+export const AutoTextLinking: FC<{ children: string }> = ({ children }) => {
   const convertedChildren = children
     .split(urlRegex)
     .filter((text) => text !== undefined)
diff --git a/packages/common/src/components/centered_page.tsx b/packages/common/src/components/centered_page.tsx
index b50869f..b38715e 100644
--- a/packages/common/src/components/centered_page.tsx
+++ b/packages/common/src/components/centered_page.tsx
@@ -1,7 +1,6 @@
 import { Stack } from "@mui/material";
-import * as React from "react";
-
-export const CenteredPage: React.FC<React.PropsWithChildren> = ({ children }) => (
+import { FC, PropsWithChildren } from "react";
+export const CenteredPage: FC<PropsWithChildren> = ({ children }) => (
   <Stack justifyContent="center" alignItems="center" sx={{ minHeight: "80vh", maxHeight: "100%" }}>
     {children}
   </Stack>
diff --git a/packages/common/src/components/common_context.tsx b/packages/common/src/components/common_context.tsx
index a3a2c59..bddea4b 100644
--- a/packages/common/src/components/common_context.tsx
+++ b/packages/common/src/components/common_context.tsx
@@ -1,12 +1,10 @@
-import * as React from "react";
+import { FC, ReactNode } from "react";
 
-import { context, ContextOptions } from "../contexts";
+import { context, ContextOptions } from "@frontend/common/contexts";
 
 type CommonContextProps = {
   options: ContextOptions;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
-export const CommonContextProvider: React.FC<CommonContextProps> = (props) => (
-  <context.Provider value={props.options}>{props.children}</context.Provider>
-);
+export const CommonContextProvider: FC<CommonContextProps> = (props) => <context.Provider value={props.options}>{props.children}</context.Provider>;
diff --git a/packages/common/src/components/dnd_file_input.tsx b/packages/common/src/components/dnd_file_input.tsx
index eb0ca60..f6d6113 100644
--- a/packages/common/src/components/dnd_file_input.tsx
+++ b/packages/common/src/components/dnd_file_input.tsx
@@ -1,9 +1,21 @@
 import { Cancel, PermMedia } from "@mui/icons-material";
 import { Box, Button, Input, Stack, styled } from "@mui/material";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
-
-const ignoreEvent = (e: React.BaseSyntheticEvent | Event) => {
+import {
+  BaseSyntheticEvent,
+  ChangeEvent,
+  DragEvent,
+  DragEventHandler,
+  FC,
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
+const ignoreEvent = (e: BaseSyntheticEvent | Event) => {
   e.preventDefault();
   e.stopPropagation();
 };
@@ -32,11 +44,11 @@ type DndFileInputState = {
   openSetValueDialog?: boolean;
 };
 
-export const DndFileInput: React.FC<DndFileInputProps> = ({ onFileChange, language }) => {
-  const fileInputRef = React.useRef<HTMLInputElement>(null);
-  const fileDragBoxRef = React.useRef<HTMLDivElement>(null);
-  const [state, setState] = React.useState<DndFileInputState>({});
-  const [, forceRender] = React.useReducer((x) => x + 1, 0);
+export const DndFileInput: FC<DndFileInputProps> = ({ onFileChange, language }) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const fileDragBoxRef = useRef<HTMLDivElement>(null);
+  const [state, setState] = useState<DndFileInputState>({});
+  const [, forceRender] = useReducer((x) => x + 1, 0);
 
   const selectFileStr = language === "ko" ? "파일 선택" : "Select File";
   const resetSelectStr = language === "ko" ? "파일 선택 초기화" : "Reset File Selection";
@@ -87,14 +99,14 @@ export const DndFileInput: React.FC<DndFileInputProps> = ({ onFileChange, langua
       </>
     );
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
-  const onDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+  const onDragEnter = (e: DragEvent<HTMLDivElement>) => {
     ignoreEvent(e);
     setState((ps) => ({ ...ps, isMouseHoverOnDragBox: true }));
   };
-  const onDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+  const onDragLeave = (e: DragEvent<HTMLDivElement>) => {
     // onDragLeave 이벤트는 자식 요소에 마우스가 들어갈 때도 발생합니다.
     // 따라서, 드래그 박스에 마우스가 있는지 확인하기 위해 마우스 위치를 확인하여 실제 onDragLeave 이벤트가 트리거되어야 하는지 확인합니다.
     // (e.relatedTarget는 Safari에서 지원되지 않아 사용할 수 없습니다.)
@@ -108,7 +120,7 @@ export const DndFileInput: React.FC<DndFileInputProps> = ({ onFileChange, langua
     if (!fileDragBoxRef.current.contains(currentHoveredElement) || (x === 0 && y === 0)) setState((ps) => ({ ...ps, isMouseHoverOnDragBox: false }));
   };
 
-  const resetFileSelect = React.useCallback(() => {
+  const resetFileSelect = useCallback(() => {
     if (fileInputRef.current) {
       fileInputRef.current.value = ""; // 파일 선택 초기화
       fileInputRef.current.files = null; // 파일 목록 초기화
@@ -116,7 +128,7 @@ export const DndFileInput: React.FC<DndFileInputProps> = ({ onFileChange, langua
     }
   }, [forceRender]);
 
-  const handleFile = React.useCallback(
+  const handleFile = useCallback(
     (file: File) => {
       if (!file || file.size === 0) {
         addSnackbar(fileIsEmptyStr, "error");
@@ -150,7 +162,7 @@ export const DndFileInput: React.FC<DndFileInputProps> = ({ onFileChange, langua
     [forceRender, onFileChange, fileIsEmptyStr, fileIsNotImageStr, fileReadErrorStr, language]
   );
 
-  const onFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
     ignoreEvent(e);
     setState((prev) => ({ ...prev, isMouseHoverOnDragBox: false }));
 
@@ -175,7 +187,7 @@ export const DndFileInput: React.FC<DndFileInputProps> = ({ onFileChange, langua
     handleFile(file);
   };
 
-  const onFileSelectButtonClick: React.MouseEventHandler = () => {
+  const onFileSelectButtonClick: MouseEventHandler = () => {
     if (fileInputRef.current) {
       fileInputRef.current.click();
     } else {
@@ -183,7 +195,7 @@ export const DndFileInput: React.FC<DndFileInputProps> = ({ onFileChange, langua
     }
   };
 
-  const onDrop: React.DragEventHandler<HTMLDivElement> = (event) => {
+  const onDrop: DragEventHandler<HTMLDivElement> = (event) => {
     ignoreEvent(event);
     setState((prev) => ({ ...prev, isMouseOnDragBox: false }));
 
@@ -196,7 +208,7 @@ export const DndFileInput: React.FC<DndFileInputProps> = ({ onFileChange, langua
     handleFile(items[0]);
   };
 
-  const onClipboardPaste = React.useCallback(
+  const onClipboardPaste = useCallback(
     (event: DocumentEventMap["paste"]) => {
       ignoreEvent(event);
       setState((prev) => ({ ...prev, isMouseOnDragBox: false }));
@@ -223,7 +235,7 @@ export const DndFileInput: React.FC<DndFileInputProps> = ({ onFileChange, langua
     [handleFile, fileNotInClipboardStr, imageFileNotInClipboardStr]
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener("paste", onClipboardPaste);
     return () => document.removeEventListener("paste", onClipboardPaste);
   }, [onClipboardPaste, state.isMouseHoverOnDragBox]);
diff --git a/packages/common/src/components/error_handler.tsx b/packages/common/src/components/error_handler.tsx
index 20a7b38..40afdcd 100644
--- a/packages/common/src/components/error_handler.tsx
+++ b/packages/common/src/components/error_handler.tsx
@@ -1,14 +1,15 @@
 import { Button, CircularProgress, Stack, Typography } from "@mui/material";
 import { Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, useEffect, useState } from "react";
+
+import { isChunkLoadError, reloadForChunkLoadError } from "@frontend/common/utils/chunk_load_error";
 
 import { CenteredPage } from "./centered_page";
-import { isChunkLoadError, reloadForChunkLoadError } from "../utils/chunk_load_error";
 
-const ChunkLoadErrorFallback: React.FC = () => {
-  const [reloadSkipped, setReloadSkipped] = React.useState(false);
+const ChunkLoadErrorFallback: FC = () => {
+  const [reloadSkipped, setReloadSkipped] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!reloadForChunkLoadError()) setReloadSkipped(true);
   }, []);
 
@@ -43,7 +44,7 @@ const ChunkLoadErrorFallback: React.FC = () => {
   );
 };
 
-const DetailedErrorFallback: React.FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
+const DetailedErrorFallback: FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
   console.error(error);
   const errorObject = Object.getOwnPropertyNames(error).reduce(
     (acc, key) => ({
@@ -79,7 +80,7 @@ const DetailedErrorFallback: React.FC<{ error: Error; reset: () => void }> = ({
   );
 };
 
-const SimplifiedErrorFallback: React.FC<{ reset: () => void }> = ({ reset }) => {
+const SimplifiedErrorFallback: FC<{ reset: () => void }> = ({ reset }) => {
   return (
     <>
       <Typography variant="body2" color="error">
@@ -100,7 +101,7 @@ const SimplifiedErrorFallback: React.FC<{ reset: () => void }> = ({ reset }) =>
   );
 };
 
-export const ErrorFallback: React.FC<{ error: Error; reset: () => void; debug?: boolean }> = ({ error, reset, debug }) => {
+export const ErrorFallback: FC<{ error: Error; reset: () => void; debug?: boolean }> = ({ error, reset, debug }) => {
   if (isChunkLoadError(error)) return <ChunkLoadErrorFallback />;
   return (
     <Suspense fallback={<>로딩 중...</>}>
diff --git a/packages/common/src/components/fallback_image.tsx b/packages/common/src/components/fallback_image.tsx
index 1efb5a6..7d2bb92 100644
--- a/packages/common/src/components/fallback_image.tsx
+++ b/packages/common/src/components/fallback_image.tsx
@@ -1,10 +1,9 @@
-import * as React from "react";
-
-type FallbackImageProps = React.ComponentProps<"img"> & {
-  errorFallback: React.ReactNode;
+import { ComponentProps, FC, ReactNode, useState } from "react";
+type FallbackImageProps = ComponentProps<"img"> & {
+  errorFallback: ReactNode;
 };
 
-export const FallbackImage: React.FC<FallbackImageProps> = ({ errorFallback, src, alt, ...props }) => {
-  const [isError, setIsError] = React.useState(!src ? true : false);
+export const FallbackImage: FC<FallbackImageProps> = ({ errorFallback, src, alt, ...props }) => {
+  const [isError, setIsError] = useState(!src ? true : false);
   return isError ? errorFallback : <img src={src} alt={alt} {...props} onError={() => setIsError(true)} />;
 };
diff --git a/packages/common/src/components/fieldset.tsx b/packages/common/src/components/fieldset.tsx
index 35c1319..e1d73eb 100644
--- a/packages/common/src/components/fieldset.tsx
+++ b/packages/common/src/components/fieldset.tsx
@@ -1,7 +1,6 @@
 import { styled } from "@mui/material";
-import * as React from "react";
-
-type FieldsetProps = React.HTMLAttributes<HTMLFieldSetElement> & {
+import { FC, HTMLAttributes } from "react";
+type FieldsetProps = HTMLAttributes<HTMLFieldSetElement> & {
   legend: string;
 };
 
@@ -16,7 +15,7 @@ const StyledFieldsetBase = styled("fieldset")(({ theme }) => ({
   },
 }));
 
-export const Fieldset: React.FC<FieldsetProps> = ({ legend, children, ...props }) => {
+export const Fieldset: FC<FieldsetProps> = ({ legend, children, ...props }) => {
   return (
     <StyledFieldsetBase {...props}>
       <legend style={{ fontSize: "0.75rem", padding: "0 0.25rem" }} children={legend} />
diff --git a/packages/common/src/components/index.ts b/packages/common/src/components/index.ts
index 24751bc..4ea7526 100644
--- a/packages/common/src/components/index.ts
+++ b/packages/common/src/components/index.ts
@@ -1,72 +1,13 @@
-import { AutoTextLinking as AutoTextLinkingComponent } from "./auto_text_linking";
-import { CenteredPage as CenteredPageComponent } from "./centered_page";
-import { CommonContextProvider as CommonContextProviderComponent } from "./common_context";
-import { DndFileInput as DndFileInputComponent } from "./dnd_file_input";
-import { ErrorFallback as ErrorFallbackComponent } from "./error_handler";
-import { FallbackImage as FallbackImageComponent } from "./fallback_image";
-import { Fieldset as FieldsetComponent } from "./fieldset";
-import { LinkHandler as LinkHandlerComponent } from "./link_handler";
-import {
-  LottieDebugPanel as LottieDebugPanelComponent,
-  LottiePlayer as LottiePlayerComponent,
-  NetworkLottiePlayer as NetworkLottiePlayerComponent,
-} from "./lottie";
-import { MarkdownEditor as MarkdownEditorComponent } from "./md_editor";
-import { MDXRenderer as MDXRendererComponent } from "./mdx";
-import { Confetti as ConfettiComponent } from "./mdx_components/confetti";
-import {
-  FAQAccordion as FAQAccordionComponent,
-  type FAQAccordionProps as FAQAccordionPropsType,
-  type FAQItem as FAQItemType,
-} from "./mdx_components/faq_accordion";
-import type { MapPropType as MapComponentPropType } from "./mdx_components/map";
-import { Map as MapComponent } from "./mdx_components/map";
-import { MobileAccordion as MobileAccordionComponent } from "./mdx_components/mobile_accordion";
-import { MobileCover as MobileCoverComponent } from "./mdx_components/mobile_cover";
-import { OneDetailsOpener as OneDetailsOpenerComponent } from "./mdx_components/one_details_opener";
-import { SessionList as SessionListComponent } from "./mdx_components/session_list";
-import { SessionTimeTable as SessionTimeTableComponent } from "./mdx_components/session_timetable";
-import {
-  PrimaryStyledDetails as PrimaryStyledDetailsComponent,
-  HighlightedStyledDetails as SecondaryStyledDetailsComponent,
-} from "./mdx_components/styled_details";
-import { StyledFullWidthButton as StyledFullWidthButtonComponent } from "./mdx_components/styled_full_width_button";
-import { MDXEditor as MDXEditorComponent } from "./mdx_editor";
-import { PythonKorea as PythonKoreaComponent } from "./pythonkorea";
-
-namespace Components {
-  export const CenteredPage = CenteredPageComponent;
-  export const CommonContextProvider = CommonContextProviderComponent;
-  export const MarkdownEditor = MarkdownEditorComponent;
-  export const MDXEditor = MDXEditorComponent;
-  export const MDXRenderer = MDXRendererComponent;
-  export const PythonKorea = PythonKoreaComponent;
-  export const LottieDebugPanel = LottieDebugPanelComponent;
-  export const LottiePlayer = LottiePlayerComponent;
-  export const NetworkLottiePlayer = NetworkLottiePlayerComponent;
-  export const ErrorFallback = ErrorFallbackComponent;
-  export const FallbackImage = FallbackImageComponent;
-  export const LinkHandler = LinkHandlerComponent;
-  export const AutoTextLinking = AutoTextLinkingComponent;
-  export const DndFileInput = DndFileInputComponent;
-  export const Fieldset = FieldsetComponent;
-
-  export namespace MDX {
-    export const Confetti = ConfettiComponent;
-    export const MobileAccordion = MobileAccordionComponent;
-    export const MobileCover = MobileCoverComponent;
-    export const StyledFullWidthButton = StyledFullWidthButtonComponent;
-    export const PrimaryStyledDetails = PrimaryStyledDetailsComponent;
-    export const SecondaryStyledDetails = SecondaryStyledDetailsComponent;
-    export const Map = MapComponent;
-    export const FAQAccordion = FAQAccordionComponent;
-    export const OneDetailsOpener = OneDetailsOpenerComponent;
-    export const SessionList = SessionListComponent;
-    export const SessionTimeTable = SessionTimeTableComponent;
-    export type MapPropType = MapComponentPropType;
-    export type FAQAccordionProps = FAQAccordionPropsType;
-    export type FAQItem = FAQItemType;
-  }
-}
-
-export default Components;
+export { AutoTextLinking } from "./auto_text_linking";
+export { CenteredPage } from "./centered_page";
+export { CommonContextProvider } from "./common_context";
+export { DndFileInput } from "./dnd_file_input";
+export { ErrorFallback } from "./error_handler";
+export { FallbackImage } from "./fallback_image";
+export { Fieldset } from "./fieldset";
+export { LinkHandler } from "./link_handler";
+export { LottieDebugPanel, LottiePlayer, NetworkLottiePlayer } from "./lottie";
+export { MarkdownEditor } from "./md_editor";
+export { MDXRenderer } from "./mdx";
+export { MDXEditor } from "./mdx_editor";
+export { PythonKorea } from "./pythonkorea";
diff --git a/packages/common/src/components/link_handler.tsx b/packages/common/src/components/link_handler.tsx
index 834fd4e..0862d0d 100644
--- a/packages/common/src/components/link_handler.tsx
+++ b/packages/common/src/components/link_handler.tsx
@@ -1,9 +1,9 @@
-import * as React from "react";
+import { FC, PropsWithChildren } from "react";
 import { Link } from "react-router-dom";
 
 const EXTERNAL_PROTOCOLS = ["http://", "https://", "mailto:", "tel:"];
 
-export const LinkHandler: React.FC<React.PropsWithChildren<{ href: string }>> = ({ href, ...props }) => {
+export const LinkHandler: FC<PropsWithChildren<{ href: string }>> = ({ href, ...props }) => {
   // If the href starts with "http" or "https", it's an external link
   if (EXTERNAL_PROTOCOLS.some((protocol) => href.startsWith(protocol))) return <a href={href} target="_blank" rel="noopener noreferrer" {...props} />;
 
diff --git a/packages/common/src/components/lottie.tsx b/packages/common/src/components/lottie.tsx
index 8686b0c..e8e2733 100644
--- a/packages/common/src/components/lottie.tsx
+++ b/packages/common/src/components/lottie.tsx
@@ -1,11 +1,12 @@
 import { Pause, PlayArrow, Stop } from "@mui/icons-material";
 import { Box, CircularProgress, FormControlLabel, IconButton, Stack, Switch } from "@mui/material";
 import { ErrorBoundary } from "@suspensive/react";
-import * as React from "react";
+import { CSSProperties, FC, useEffect, useState } from "react";
 import Lottie, { Options } from "react-lottie";
 
+import { isValidHttpUrl } from "@frontend/common/utils/string";
+
 import { ErrorFallback } from "./error_handler";
-import { isValidHttpUrl } from "../utils/string";
 
 type PlayState = "playing" | "paused" | "stopped";
 
@@ -14,7 +15,7 @@ type LottiePlayerProps = {
   playState?: PlayState;
   disableLoop?: boolean;
   renderSettings?: Options["rendererSettings"];
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 };
 
 type LottiePlayerStateType = {
@@ -31,8 +32,8 @@ const playStateToLottiePlayerState = (playState: PlayState): { isStopped: boolea
   return { isStopped: true, isPaused: true };
 };
 
-export const LottieDebugPanel: React.FC<LottiePlayerProps> = ({ data, playState = "playing", disableLoop = false, renderSettings = {}, style }) => {
-  const [playerState, setPlayerState] = React.useState<LottieDebugPanelStateType>({
+export const LottieDebugPanel: FC<LottiePlayerProps> = ({ data, playState = "playing", disableLoop = false, renderSettings = {}, style }) => {
+  const [playerState, setPlayerState] = useState<LottieDebugPanelStateType>({
     playState,
     loop: !disableLoop,
   });
@@ -67,7 +68,7 @@ export const LottieDebugPanel: React.FC<LottiePlayerProps> = ({ data, playState
   );
 };
 
-export const LottiePlayer: React.FC<LottiePlayerProps> = ({ data, playState = "playing", disableLoop = false, renderSettings = {}, style }) => (
+export const LottiePlayer: FC<LottiePlayerProps> = ({ data, playState = "playing", disableLoop = false, renderSettings = {}, style }) => (
   <Lottie
     {...playStateToLottiePlayerState(playState)}
     options={{
@@ -89,10 +90,10 @@ type NetworkLottiePlayerStateType = {
   data?: unknown | null;
 };
 
-export const NetworkLottiePlayer: React.FC<NetworkLottiePlayerProps> = ErrorBoundary.with({ fallback: ErrorFallback }, (props) => {
-  const [playerState, setPlayerState] = React.useState<NetworkLottiePlayerStateType>({});
+export const NetworkLottiePlayer: FC<NetworkLottiePlayerProps> = ErrorBoundary.with({ fallback: ErrorFallback }, (props) => {
+  const [playerState, setPlayerState] = useState<NetworkLottiePlayerStateType>({});
 
-  React.useEffect(() => {
+  useEffect(() => {
     (async () => {
       if (!isValidHttpUrl(props.url)) throw new Error("Invalid URL for NetworkLottiePlayer: " + props.url);
 
diff --git a/packages/common/src/components/md_editor.tsx b/packages/common/src/components/md_editor.tsx
index e4d42c0..9d8449a 100644
--- a/packages/common/src/components/md_editor.tsx
+++ b/packages/common/src/components/md_editor.tsx
@@ -1,7 +1,6 @@
 import { Stack } from "@mui/material";
 import MDEditor, { ICommand, commands } from "@uiw/react-md-editor";
-import * as React from "react";
-
+import { CSSProperties, FC } from "react";
 type MDEditorProps = {
   disabled?: boolean;
   name?: string;
@@ -11,7 +10,7 @@ type MDEditorProps = {
   extraCommands?: ICommand[];
 };
 
-const TextEditorStyle: React.CSSProperties = {
+const TextEditorStyle: CSSProperties = {
   flexGrow: 1,
   width: "100%",
   maxWidth: "100%",
@@ -21,9 +20,9 @@ const TextEditorStyle: React.CSSProperties = {
   overflowWrap: "break-word",
 
   fieldSizing: "content",
-} as React.CSSProperties;
+} as CSSProperties;
 
-export const MarkdownEditor: React.FC<MDEditorProps> = ({ disabled, name, defaultValue, value, onChange, extraCommands }) => (
+export const MarkdownEditor: FC<MDEditorProps> = ({ disabled, name, defaultValue, value, onChange, extraCommands }) => (
   <Stack direction="column" spacing={2} sx={{ width: "100%", height: "100%", maxWidth: "100%" }}>
     <MDEditor
       data-color-mode="light"
diff --git a/packages/common/src/components/mdx.tsx b/packages/common/src/components/mdx.tsx
index ae49bd9..a28d18d 100644
--- a/packages/common/src/components/mdx.tsx
+++ b/packages/common/src/components/mdx.tsx
@@ -4,14 +4,15 @@ import { CircularProgress, Table, TableBody, TableCell, TableContainer, TableFoo
 import { ErrorBoundary } from "@suspensive/react";
 import type { MDXComponents } from "mdx/types";
 import muiComponents from "mui-mdx-components";
-import * as React from "react";
+import { FC, ReactNode, useEffect, useState } from "react";
 import * as runtime from "react/jsx-runtime";
 import remarkGfm from "remark-gfm";
-import * as R from "remeda";
+import { isEmpty } from "remeda";
+
+import { rtrim } from "@frontend/common/utils/string";
 
 import { ErrorFallback } from "./error_handler";
 import { LinkHandler } from "./link_handler";
-import { rtrim } from "../utils/string";
 import { StyledDivider } from "./mdx_components/styled_divider";
 import { SubContentContainer } from "./mdx_components/sub_content_container";
 
@@ -67,7 +68,7 @@ const CustomMDXComponents: MDXComponents = {
 };
 
 const lineFormatterForMDX = (line: string) => {
-  if (R.isEmpty(line.trim())) return "\n";
+  if (isEmpty(line.trim())) return "\n";
 
   const trimmedLine = rtrim(line);
 
@@ -91,19 +92,19 @@ type MDXRendererPropType = {
   mdxComponents?: MDXComponents;
 };
 
-export const MDXRenderer: React.FC<MDXRendererPropType> = ({ text, resetKey, format, baseUrl, mdxComponents }) => {
-  const [state, setState] = React.useState<{
-    component: React.ReactNode;
+export const MDXRenderer: FC<MDXRendererPropType> = ({ text, resetKey, format, baseUrl, mdxComponents }) => {
+  const [state, setState] = useState<{
+    component: ReactNode;
     resetKey: number;
   }>({
     component: <CircularProgress />,
     resetKey: Math.random(),
   });
 
-  const setRenderResult = (component: React.ReactNode) => setState((prev) => ({ ...prev, component: component }));
+  const setRenderResult = (component: ReactNode) => setState((prev) => ({ ...prev, component: component }));
   const setRandomResetKey = () => setState((prev) => ({ ...prev, resetKey: Math.random() }));
 
-  React.useEffect(() => {
+  useEffect(() => {
     (async () => {
       try {
         // 원래 MDX는 각 줄의 마지막에 공백 2개가 있어야 줄바꿈이 되고, 또 연속 줄바꿈은 무시되지만,
diff --git a/packages/common/src/components/mdx_components/confetti.tsx b/packages/common/src/components/mdx_components/confetti.tsx
index 0ef4382..575e604 100644
--- a/packages/common/src/components/mdx_components/confetti.tsx
+++ b/packages/common/src/components/mdx_components/confetti.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
+import { FC } from "react";
 import ReactConfetti from "react-confetti";
 import { useWindowSize } from "react-use";
 
-export const Confetti: React.FC = () => {
+export const Confetti: FC = () => {
   const { width, height } = useWindowSize();
   return <ReactConfetti width={width} height={height} />;
 };
diff --git a/packages/common/src/components/mdx_components/faq_accordion.tsx b/packages/common/src/components/mdx_components/faq_accordion.tsx
index 39ba1e9..9ca00e5 100644
--- a/packages/common/src/components/mdx_components/faq_accordion.tsx
+++ b/packages/common/src/components/mdx_components/faq_accordion.tsx
@@ -1,8 +1,7 @@
 import styled from "@emotion/styled";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Accordion as MuiAccordion, AccordionDetails, AccordionSummary } from "@mui/material";
-import * as React from "react";
-
+import { FC, Fragment } from "react";
 export interface FAQItem {
   id: string;
   question: string;
@@ -13,11 +12,11 @@ export interface FAQAccordionProps {
   items: FAQItem[];
 }
 
-export const FAQAccordion: React.FC<FAQAccordionProps> = ({ items }) => {
+export const FAQAccordion: FC<FAQAccordionProps> = ({ items }) => {
   return (
     <AccordionWrapper>
       {items.map((faq, index) => (
-        <React.Fragment key={faq.id}>
+        <Fragment key={faq.id}>
           <StyledAccordion>
             <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`panel${faq.id}-content`} id={`panel${faq.id}-header`}>
               <Number>{faq.id}</Number>
@@ -26,7 +25,7 @@ export const FAQAccordion: React.FC<FAQAccordionProps> = ({ items }) => {
             <StyledAccordionDetails>{faq.answer}</StyledAccordionDetails>
           </StyledAccordion>
           {index !== items.length - 1 && <Divider />}
-        </React.Fragment>
+        </Fragment>
       ))}
     </AccordionWrapper>
   );
diff --git a/packages/common/src/components/mdx_components/index.ts b/packages/common/src/components/mdx_components/index.ts
new file mode 100644
index 0000000..5fbb4ee
--- /dev/null
+++ b/packages/common/src/components/mdx_components/index.ts
@@ -0,0 +1,10 @@
+export { Confetti } from "./confetti";
+export { FAQAccordion, type FAQAccordionProps, type FAQItem } from "./faq_accordion";
+export { Map, type MapPropType } from "./map";
+export { MobileAccordion } from "./mobile_accordion";
+export { MobileCover } from "./mobile_cover";
+export { OneDetailsOpener } from "./one_details_opener";
+export { SessionList } from "./session_list";
+export { SessionTimeTable } from "./session_timetable";
+export { PrimaryStyledDetails, HighlightedStyledDetails as SecondaryStyledDetails } from "./styled_details";
+export { StyledFullWidthButton } from "./styled_full_width_button";
diff --git a/packages/common/src/components/mdx_components/map.tsx b/packages/common/src/components/mdx_components/map.tsx
index b8dd41b..a0308fb 100644
--- a/packages/common/src/components/mdx_components/map.tsx
+++ b/packages/common/src/components/mdx_components/map.tsx
@@ -1,8 +1,8 @@
 import { Box, Button, Stack, Tab, Tabs } from "@mui/material";
-import * as React from "react";
+import { CSSProperties, FC, SyntheticEvent, useEffect, useRef, useState } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 
-import { useCommonContext } from "../../hooks/useCommonContext";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
 
 type SupportedMapType = "kakao" | "google" | "naver";
 const MAP_TYPES: SupportedMapType[] = ["kakao", "google", "naver"];
@@ -29,8 +29,8 @@ export type MapDataType = {
     en: string;
   };
   color: {
-    backgroundColor: React.CSSProperties["backgroundColor"];
-    color: React.CSSProperties["color"];
+    backgroundColor: CSSProperties["backgroundColor"];
+    color: CSSProperties["color"];
   };
   basePlaceInfoUrl: string;
   hideInTabs?: boolean;
@@ -55,14 +55,14 @@ const MapData: { [key in SupportedMapType]: MapDataType } = {
   },
 };
 
-export const Map: React.FC<MapPropType> = ({ geo, placeName, placeCode, googleMapIframeSrc }) => {
+export const Map: FC<MapPropType> = ({ geo, placeName, placeCode, googleMapIframeSrc }) => {
   const { language } = useCommonContext();
-  const kakaoMapRef = React.useRef<HTMLDivElement>(null);
-  const [mapState, setMapState] = React.useState<MapStateType>({ tab: 0 });
+  const kakaoMapRef = useRef<HTMLDivElement>(null);
+  const [mapState, setMapState] = useState<MapStateType>({ tab: 0 });
   const selectedMapType = MAP_TYPES[mapState.tab] || "kakao";
-  const setTab = (_: React.SyntheticEvent, tab: number) => setMapState((ps) => ({ ...ps, tab }));
+  const setTab = (_: SyntheticEvent, tab: number) => setMapState((ps) => ({ ...ps, tab }));
 
-  React.useEffect(() => {
+  useEffect(() => {
     const kakaoMapDiv = kakaoMapRef.current;
     if (!(window.kakao && window.kakao.maps && kakaoMapDiv)) return;
 
@@ -95,7 +95,7 @@ export const Map: React.FC<MapPropType> = ({ geo, placeName, placeCode, googleMa
     };
   }, [mapState.tab, geo, language, placeName, placeCode.kakao]);
 
-  const mapStyle: React.CSSProperties = { border: 0, width: "100%", aspectRatio: "3/2" };
+  const mapStyle: CSSProperties = { border: 0, width: "100%", aspectRatio: "3/2" };
 
   return (
     <Box>
diff --git a/packages/common/src/components/mdx_components/mobile_accordion.tsx b/packages/common/src/components/mdx_components/mobile_accordion.tsx
index 9940a56..cab970e 100644
--- a/packages/common/src/components/mdx_components/mobile_accordion.tsx
+++ b/packages/common/src/components/mdx_components/mobile_accordion.tsx
@@ -1,15 +1,14 @@
 import styled from "@emotion/styled";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { AccordionDetails, AccordionSummary, Accordion as MuiAccordion, Stack, Typography } from "@mui/material";
-import * as React from "react";
+import { FC, useMemo, useState } from "react";
 import Marquee from "react-fast-marquee";
 
-import * as Hooks from "../../hooks";
-
-const MarqueeAccordion: React.FC<{ marqueeText: string; marqueeLogoSrc: string }> = ({ marqueeText, marqueeLogoSrc }) => {
+import { Common } from "@frontend/common/hooks";
+const MarqueeAccordion: FC<{ marqueeText: string; marqueeLogoSrc: string }> = ({ marqueeText, marqueeLogoSrc }) => {
   const marqueeWidth = window.innerWidth * 0.9;
   const marqueeGradientWidth = window.innerWidth * 0.1;
-  const items = React.useMemo(() => {
+  const items = useMemo(() => {
     return Array.from({ length: 100 }, () => (
       <Stack direction="row" sx={{ gap: 0 }}>
         <StyledTypography>{marqueeText}</StyledTypography>
@@ -29,9 +28,9 @@ type MobileAccordionProps = {
   venueEnLines: string[];
 };
 
-export const MobileAccordion: React.FC<MobileAccordionProps> = ({ marqueeText, marqueeLogoSrc, hostLogoBigSrc, venueKo, venueEnLines }) => {
-  const { language } = Hooks.Common.useCommonContext();
-  const [expanded, setExpanded] = React.useState<boolean>(false);
+export const MobileAccordion: FC<MobileAccordionProps> = ({ marqueeText, marqueeLogoSrc, hostLogoBigSrc, venueKo, venueEnLines }) => {
+  const { language } = Common.useCommonContext();
+  const [expanded, setExpanded] = useState<boolean>(false);
 
   return (
     <AccordionWrapper>
diff --git a/packages/common/src/components/mdx_components/mobile_cover.tsx b/packages/common/src/components/mdx_components/mobile_cover.tsx
index badd579..6ac1ff2 100644
--- a/packages/common/src/components/mdx_components/mobile_cover.tsx
+++ b/packages/common/src/components/mdx_components/mobile_cover.tsx
@@ -1,31 +1,34 @@
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import { ButtonBase, Stack, Typography } from "@mui/material";
-import * as React from "react";
-
-import * as Hooks from "../../hooks";
+import { CSSProperties, FC } from "react";
 
+import { Common } from "@frontend/common/hooks";
 type MobileCoverProps = {
   coverImageSrc: string;
   coverTitleSrc: string;
-  coverImageObjectFit?: React.CSSProperties["objectFit"];
+  coverImageObjectFit?: CSSProperties["objectFit"];
   buttonTextKo?: string;
   buttonTextEn?: string;
 };
 
-export const MobileCover: React.FC<MobileCoverProps> = ({
+export const MobileCover: FC<MobileCoverProps> = ({
   coverImageSrc,
   coverTitleSrc,
   coverImageObjectFit = "cover",
   buttonTextKo = "티켓 구매하기",
   buttonTextEn = "Buy Ticket",
 }) => {
-  const { language } = Hooks.Common.useCommonContext();
+  const { language } = Common.useCommonContext();
   const buttonTitle = language === "ko" ? buttonTextKo : buttonTextEn;
 
   return (
     <Stack sx={{ display: "flex", flexDirection: "column", position: "relative", width: "100vw", height: "100vh", overflow: "hidden" }}>
       <Stack sx={{ zIndex: 1, position: "absolute", top: 0, left: 0, flex: 1, display: "flex", width: "100%", height: "100%" }}>
-        <img src={coverImageSrc} alt="Mobile Cover Image" style={{ flex: 1, width: "100%", height: "100%", objectFit: coverImageObjectFit, objectPosition: "center center" }} />
+        <img
+          src={coverImageSrc}
+          alt="Mobile Cover Image"
+          style={{ flex: 1, width: "100%", height: "100%", objectFit: coverImageObjectFit, objectPosition: "center center" }}
+        />
       </Stack>
       <Stack sx={{ zIndex: 2, position: "absolute", top: 96, left: 46 }}>
         <img src={coverTitleSrc} alt="Mobile Cover Title" style={{ objectFit: "contain" }} />
diff --git a/packages/common/src/components/mdx_components/one_details_opener.tsx b/packages/common/src/components/mdx_components/one_details_opener.tsx
index ef9a511..1ad7f3a 100644
--- a/packages/common/src/components/mdx_components/one_details_opener.tsx
+++ b/packages/common/src/components/mdx_components/one_details_opener.tsx
@@ -1,22 +1,21 @@
 import { AccordionProps } from "@mui/material";
-import * as React from "react";
-
+import { Children, FC, ReactElement, SyntheticEvent, cloneElement, useEffect, useState } from "react";
 type PHOpenOneFoldMgrPropType = {
-  children: React.ReactElement<AccordionProps>[];
+  children: ReactElement<AccordionProps>[];
   resetKey?: string;
 };
 
-export const OneDetailsOpener: React.FC<PHOpenOneFoldMgrPropType> = (props) => {
-  const childrenCount = React.Children.count(props.children);
+export const OneDetailsOpener: FC<PHOpenOneFoldMgrPropType> = (props) => {
+  const childrenCount = Children.count(props.children);
   const initialFoldState = new Array(childrenCount).fill(false);
-  const [oneFoldOpener, setOneFoldOpener] = React.useState(initialFoldState);
+  const [oneFoldOpener, setOneFoldOpener] = useState(initialFoldState);
   const foldAll = () => setOneFoldOpener([...initialFoldState]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  React.useEffect(foldAll, [props.resetKey]);
+  useEffect(foldAll, [props.resetKey]);
 
   const foldStateSwitcher =
-    (index: number): ((event: React.SyntheticEvent<Element, Event>, expanded: boolean) => void) =>
+    (index: number): ((event: SyntheticEvent<Element, Event>, expanded: boolean) => void) =>
     (event, expanded) => {
       event.preventDefault();
       event.stopPropagation();
@@ -28,10 +27,6 @@ export const OneDetailsOpener: React.FC<PHOpenOneFoldMgrPropType> = (props) => {
     };
 
   return (
-    <>
-      {React.Children.map(props.children, (child, index) =>
-        React.cloneElement(child, { expanded: oneFoldOpener[index], onChange: foldStateSwitcher(index) })
-      )}
-    </>
+    <>{Children.map(props.children, (child, index) => cloneElement(child, { expanded: oneFoldOpener[index], onChange: foldStateSwitcher(index) }))}</>
   );
 };
diff --git a/packages/common/src/components/mdx_components/session_list.tsx b/packages/common/src/components/mdx_components/session_list.tsx
index 1408f9b..ebf3c3b 100644
--- a/packages/common/src/components/mdx_components/session_list.tsx
+++ b/packages/common/src/components/mdx_components/session_list.tsx
@@ -1,27 +1,28 @@
 import { Box, Button, Chip, CircularProgress, Stack, styled, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, ReactNode, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
-import * as R from "remeda";
+import { isArray, isEmpty, isString } from "remeda";
+
+import { ErrorFallback } from "@frontend/common/components/error_handler";
+import { FallbackImage } from "@frontend/common/components/fallback_image";
+import { BackendAPI, Common } from "@frontend/common/hooks";
+import { SessionSchema } from "@frontend/common/schemas/backendAPI";
 
-import * as Hooks from "../../hooks";
-import * as BackendAPISchemas from "../../schemas/backendAPI";
-import { ErrorFallback } from "../error_handler";
-import { FallbackImage } from "../fallback_image";
 import { StyledDivider } from "./styled_divider";
 
 const EXCLUDE_CATEGORIES = ["후원사", "Sponsor"];
 
-const SessionItem: React.FC<{
-  session: BackendAPISchemas.SessionSchema;
+const SessionItem: FC<{
+  session: SessionSchema;
   enableLink?: boolean;
-  fallbackImage?: React.ReactNode;
-  getSessionUrl?: (session: BackendAPISchemas.SessionSchema) => string;
+  fallbackImage?: ReactNode;
+  getSessionUrl?: (session: SessionSchema) => string;
 }> = Suspense.with({ fallback: <CircularProgress /> }, ({ session, enableLink, fallbackImage, getSessionUrl }) => {
   const sessionTitle = session.title.replace("\\n", "\n");
 
   let speakerImgSrc = session.image || "";
-  if (!speakerImgSrc && R.isArray(session.speakers) && !R.isEmpty(session.speakers)) {
+  if (!speakerImgSrc && isArray(session.speakers) && !isEmpty(session.speakers)) {
     for (const speaker of session.speakers) {
       if (speaker.image) {
         speakerImgSrc = speaker.image;
@@ -71,26 +72,26 @@ type SessionListPropType = {
   event?: string;
   types?: string | string[];
   enableLink?: boolean;
-  fallbackImage?: React.ReactNode;
-  getSessionUrl?: (session: BackendAPISchemas.SessionSchema) => string;
+  fallbackImage?: ReactNode;
+  getSessionUrl?: (session: SessionSchema) => string;
 };
 
-export const SessionList: React.FC<SessionListPropType> = ErrorBoundary.with(
+export const SessionList: FC<SessionListPropType> = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, ({ event, types, enableLink, fallbackImage, getSessionUrl }) => {
-    const { language } = Hooks.Common.useCommonContext();
-    const backendAPIClient = Hooks.BackendAPI.useBackendClient();
-    const params = { ...(event && { event }), ...(types && { types: R.isString(types) ? types : types.join(",") }) };
-    const { data: sessions } = Hooks.BackendAPI.useSessionsQuery(backendAPIClient, params);
+    const { language } = Common.useCommonContext();
+    const backendAPIClient = BackendAPI.useBackendClient();
+    const params = { ...(event && { event }), ...(types && { types: isString(types) ? types : types.join(",") }) };
+    const { data: sessions } = BackendAPI.useSessionsQuery(backendAPIClient, params);
 
     const warningMessage =
       language === "ko"
         ? "* 발표 목록은 발표자 사정에 따라 변동될 수 있습니다."
         : "* The list of sessions may change due to the speaker's circumstances.";
 
-    const [selectedCategoryIds, setSelectedCategories] = React.useState<string[]>([]);
+    const [selectedCategoryIds, setSelectedCategories] = useState<string[]>([]);
     const toggleCategory = (catId: string) => setSelectedCategories((ps) => (ps.includes(catId) ? ps.filter((id) => id !== catId) : [...ps, catId]));
-    const categories = React.useMemo(
+    const categories = useMemo(
       () =>
         sessions
           .map((s) => s.categories)
@@ -99,7 +100,7 @@ export const SessionList: React.FC<SessionListPropType> = ErrorBoundary.with(
           .filter((cat) => !EXCLUDE_CATEGORIES.includes(cat.name)),
       [sessions]
     );
-    const filteredSessions = React.useMemo(() => {
+    const filteredSessions = useMemo(() => {
       return sessions.filter((session) => {
         const sessionCategoryIds: string[] = session.categories.map((category) => category.id);
         return selectedCategoryIds.length === 0 || selectedCategoryIds.some((cat) => sessionCategoryIds.includes(cat));
@@ -200,7 +201,7 @@ const SessionImageErrorFallbackBox = styled(Box)(({ theme }) => ({
   justifyContent: "center",
 }));
 
-const SessionImageErrorFallback: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+const SessionImageErrorFallback: FC<{ children?: ReactNode }> = ({ children }) => (
   <SessionImageErrorFallbackBox>{children}</SessionImageErrorFallbackBox>
 );
 
diff --git a/packages/common/src/components/mdx_components/session_timetable.tsx b/packages/common/src/components/mdx_components/session_timetable.tsx
index 1453fd5..56597e9 100644
--- a/packages/common/src/components/mdx_components/session_timetable.tsx
+++ b/packages/common/src/components/mdx_components/session_timetable.tsx
@@ -1,14 +1,15 @@
 import { Button, Chip, CircularProgress, Stack, styled, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { DateTime } from "luxon";
-import * as React from "react";
+import { FC, useState } from "react";
 import { Link } from "react-router-dom";
-import * as R from "remeda";
+import { isArray, isEmpty, isString } from "remeda";
+
+import { CenteredPage } from "@frontend/common/components/centered_page";
+import { ErrorFallback } from "@frontend/common/components/error_handler";
+import { BackendAPI, Common } from "@frontend/common/hooks";
+import { SessionSchema } from "@frontend/common/schemas/backendAPI";
 
-import * as Hooks from "../../hooks";
-import * as BackendAPISchemas from "../../schemas/backendAPI";
-import { CenteredPage } from "../centered_page";
-import { ErrorFallback } from "../error_handler";
 import { StyledDivider } from "./styled_divider";
 
 const TD_HEIGHT = 4;
@@ -21,7 +22,7 @@ type TimeTableData = {
       [room: string]:
         | {
             rowSpan: number;
-            session: BackendAPISchemas.SessionSchema;
+            session: SessionSchema;
           }
         | undefined;
     };
@@ -30,11 +31,11 @@ type TimeTableData = {
 
 const getPaddedTime = (time: DateTime) => `${time.hour}:${time.minute.toString().padStart(2, "0")}`;
 
-const getRooms = (data: BackendAPISchemas.SessionSchema[]) => {
+const getRooms = (data: SessionSchema[]) => {
   return Array.from(new Set<string>(data.reduce((acc, s) => [...acc, ...s.room_schedules.map((r) => r.room_name)], [] as string[])));
 };
 
-const getConfStartEndTimePerDay: (data: BackendAPISchemas.SessionSchema[]) => {
+const getConfStartEndTimePerDay: (data: SessionSchema[]) => {
   [date: string]: { start: DateTime; end: DateTime };
 } = (data) => {
   const startTimes = data.reduce((acc, s) => [...acc, ...s.room_schedules.map((r) => DateTime.fromISO(r.start_at))], [] as DateTime[]);
@@ -74,7 +75,7 @@ const getEveryTenMinutesArr = (start: DateTime, end: DateTime) => {
   return arr;
 };
 
-const getTimeTableData: (data: BackendAPISchemas.SessionSchema[]) => TimeTableData = (data) => {
+const getTimeTableData: (data: SessionSchema[]) => TimeTableData = (data) => {
   // Initialize timeTableData structure
   const timeTableData: TimeTableData = Object.entries(getConfStartEndTimePerDay(data)).reduce(
     (acc, [date, { start, end }]) => ({
@@ -103,24 +104,21 @@ const getTimeTableData: (data: BackendAPISchemas.SessionSchema[]) => TimeTableDa
   return timeTableData;
 };
 
-const SessionColumn: React.FC<{
+const SessionColumn: FC<{
   rowSpan: number;
   colSpan?: number;
-  session: BackendAPISchemas.SessionSchema;
-  getSessionUrl?: (session: BackendAPISchemas.SessionSchema) => string;
+  session: SessionSchema;
+  getSessionUrl?: (session: SessionSchema) => string;
 }> = ({ rowSpan, colSpan, session, getSessionUrl }) => {
   const sessionUrl = getSessionUrl ? getSessionUrl(session) : undefined;
-  const clickable = R.isArray(session.speakers) && !R.isEmpty(session.speakers) && !!sessionUrl;
+  const clickable = isArray(session.speakers) && !isEmpty(session.speakers) && !!sessionUrl;
   // Firefox는 rowSpan된 td의 height를 계산할 때 rowSpan을 고려하지 않습니다. 따라서 직접 계산하여 height를 설정합니다.
   const sessionBoxHeight = `${TD_HEIGHT * rowSpan}rem`;
   return (
     <SessionTableCell rowSpan={rowSpan} colSpan={colSpan}>
       {clickable ? (
-        <Link to={sessionUrl!} style={{ textDecoration: 'none', display: 'block' }}>
-          <SessionBox
-            className="clickable"
-            sx={{ height: sessionBoxHeight, gap: 0.75, padding: "0.5rem" }}
-          >
+        <Link to={sessionUrl!} style={{ textDecoration: "none", display: "block" }}>
+          <SessionBox className="clickable" sx={{ height: sessionBoxHeight, gap: 0.75, padding: "0.5rem" }}>
             <SessionTitle children={session.title.replace("\\n", "\n")} align="center" />
             <Stack direction="row" alignItems="center" justifyContent="center" sx={{ width: "100%", flexWrap: "wrap", gap: 0.5 }}>
               {session.speakers.map((speaker) => (
@@ -130,9 +128,7 @@ const SessionColumn: React.FC<{
           </SessionBox>
         </Link>
       ) : (
-        <SessionBox
-          sx={{ height: sessionBoxHeight, gap: 0.75, padding: "0.5rem" }}
-        >
+        <SessionBox sx={{ height: sessionBoxHeight, gap: 0.75, padding: "0.5rem" }}>
           <SessionTitle children={session.title.replace("\\n", "\n")} align="center" />
           <Stack direction="row" alignItems="center" justifyContent="center" sx={{ width: "100%", flexWrap: "wrap", gap: 0.5 }}>
             {session.speakers.map((speaker) => (
@@ -145,7 +141,7 @@ const SessionColumn: React.FC<{
   );
 };
 
-const BreakTime: React.FC<{ language: "ko" | "en"; duration: number }> = ({ language, duration }) => {
+const BreakTime: FC<{ language: "ko" | "en"; duration: number }> = ({ language, duration }) => {
   const text = language === "ko" ? `휴식 (${duration}분)` : `Break Time (${duration}min.)`;
   return <Typography variant="subtitle2" fontWeight="500" children={text} />;
 };
@@ -153,18 +149,18 @@ const BreakTime: React.FC<{ language: "ko" | "en"; duration: number }> = ({ lang
 type SessionTimeTablePropType = {
   event?: string;
   types?: string | string[];
-  getSessionUrl?: (session: BackendAPISchemas.SessionSchema) => string;
+  getSessionUrl?: (session: SessionSchema) => string;
 };
 
-export const SessionTimeTable: React.FC<SessionTimeTablePropType> = ErrorBoundary.with(
+export const SessionTimeTable: FC<SessionTimeTablePropType> = ErrorBoundary.with(
   { fallback: ErrorFallback },
   Suspense.with({ fallback: <CenteredPage children={<CircularProgress />} /> }, ({ event, types, getSessionUrl }) => {
-    const [confDate, setConfDate] = React.useState("");
+    const [confDate, setConfDate] = useState("");
 
-    const { language } = Hooks.Common.useCommonContext();
-    const backendAPIClient = Hooks.BackendAPI.useBackendClient();
-    const params = { ...(event && { event }), ...(types && { types: R.isString(types) ? types : types.join(",") }) };
-    const { data: sessionList } = Hooks.BackendAPI.useSessionsQuery(backendAPIClient, params);
+    const { language } = Common.useCommonContext();
+    const backendAPIClient = BackendAPI.useBackendClient();
+    const params = { ...(event && { event }), ...(types && { types: isString(types) ? types : types.join(",") }) };
+    const { data: sessionList } = BackendAPI.useSessionsQuery(backendAPIClient, params);
 
     const timeTableData = getTimeTableData(sessionList);
     const dates = Object.keys(timeTableData).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
@@ -273,7 +269,12 @@ export const SessionTimeTable: React.FC<SessionTimeTablePropType> = ErrorBoundar
                   return (
                     <SessionTableRow>
                       <SessionTableCell align="center" children={time} />
-                      <SessionColumn rowSpan={firstSessionInfo.rowSpan} colSpan={roomCount} session={firstSessionInfo.session} getSessionUrl={getSessionUrl} />
+                      <SessionColumn
+                        rowSpan={firstSessionInfo.rowSpan}
+                        colSpan={roomCount}
+                        session={firstSessionInfo.session}
+                        getSessionUrl={getSessionUrl}
+                      />
                     </SessionTableRow>
                   );
                 }
diff --git a/packages/common/src/components/mdx_components/styled_details.tsx b/packages/common/src/components/mdx_components/styled_details.tsx
index be82e96..476969f 100644
--- a/packages/common/src/components/mdx_components/styled_details.tsx
+++ b/packages/common/src/components/mdx_components/styled_details.tsx
@@ -11,13 +11,12 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import * as React from "react";
-
-type StyledDetailsProps = React.PropsWithChildren<
+import { FC, PropsWithChildren, ReactNode } from "react";
+type StyledDetailsProps = PropsWithChildren<
   AccordionProps & {
-    expandIcon?: React.ReactNode;
-    summary?: React.ReactNode;
-    actions?: React.ReactNode;
+    expandIcon?: ReactNode;
+    summary?: ReactNode;
+    actions?: ReactNode;
   }
 >;
 
@@ -26,15 +25,7 @@ type BaseStyledDetailsProps = StyledDetailsProps & {
   transparencyOnExpand?: number;
 };
 
-const BaseStyledDetails: React.FC<BaseStyledDetailsProps> = ({
-  expandIcon,
-  summary,
-  children,
-  actions,
-  paletteColor,
-  transparencyOnExpand,
-  ...props
-}) => {
+const BaseStyledDetails: FC<BaseStyledDetailsProps> = ({ expandIcon, summary, children, actions, paletteColor, transparencyOnExpand, ...props }) => {
   const StyledAccordion = styled(Accordion)(({ theme }) => ({
     width: "100%",
     paddingRight: theme.spacing(1),
@@ -71,12 +62,12 @@ const BaseStyledDetails: React.FC<BaseStyledDetailsProps> = ({
   );
 };
 
-export const PrimaryStyledDetails: React.FC<StyledDetailsProps> = (props) => {
+export const PrimaryStyledDetails: FC<StyledDetailsProps> = (props) => {
   const { palette } = useTheme();
   return <BaseStyledDetails {...props} paletteColor={palette.primary} transparencyOnExpand={20} />;
 };
 
-export const HighlightedStyledDetails: React.FC<StyledDetailsProps> = (props) => {
+export const HighlightedStyledDetails: FC<StyledDetailsProps> = (props) => {
   const { palette } = useTheme();
   return <BaseStyledDetails {...props} paletteColor={palette.highlight} transparencyOnExpand={10} />;
 };
diff --git a/packages/common/src/components/mdx_components/styled_divider.tsx b/packages/common/src/components/mdx_components/styled_divider.tsx
index c1b5dbc..64a16ec 100644
--- a/packages/common/src/components/mdx_components/styled_divider.tsx
+++ b/packages/common/src/components/mdx_components/styled_divider.tsx
@@ -1,7 +1,6 @@
 import { Divider, DividerProps, useTheme } from "@mui/material";
-import * as React from "react";
-
-export const StyledDivider: React.FC<DividerProps> = (props) => {
+import { FC } from "react";
+export const StyledDivider: FC<DividerProps> = (props) => {
   const { palette } = useTheme();
   const sx = { borderColor: palette.primary.dark, ...props.sx };
   const newProps = { ...props, sx };
diff --git a/packages/common/src/components/mdx_components/styled_full_width_button.tsx b/packages/common/src/components/mdx_components/styled_full_width_button.tsx
index 8272ce2..af686ee 100644
--- a/packages/common/src/components/mdx_components/styled_full_width_button.tsx
+++ b/packages/common/src/components/mdx_components/styled_full_width_button.tsx
@@ -1,8 +1,8 @@
 import { Button, ButtonProps, Typography } from "@mui/material";
-import * as React from "react";
-import * as R from "remeda";
+import { FC, isValidElement } from "react";
+import { isString } from "remeda";
 
-import { LinkHandler } from "../link_handler";
+import { LinkHandler } from "@frontend/common/components/link_handler";
 
 type StyledFullWidthButtonPropType = ButtonProps & {
   link?: string;
@@ -10,9 +10,9 @@ type StyledFullWidthButtonPropType = ButtonProps & {
   transparency: number;
 };
 
-export const StyledFullWidthButton: React.FC<StyledFullWidthButtonPropType> = ({ link, setBackgroundColor, transparency, ...props }) => {
+export const StyledFullWidthButton: FC<StyledFullWidthButtonPropType> = ({ link, setBackgroundColor, transparency, ...props }) => {
   let children = props.children;
-  if (React.isValidElement(children) && R.isString((children.props as { children: unknown }).children))
+  if (isValidElement(children) && isString((children.props as { children: unknown }).children))
     children = (children.props as { children: unknown }).children as string;
   if (children) children = <Typography variant="h5" fontSize="1.5rem" children={children} />;
 
diff --git a/packages/common/src/components/mdx_components/sub_content_container.tsx b/packages/common/src/components/mdx_components/sub_content_container.tsx
index 5d28008..7473c77 100644
--- a/packages/common/src/components/mdx_components/sub_content_container.tsx
+++ b/packages/common/src/components/mdx_components/sub_content_container.tsx
@@ -1,6 +1,5 @@
 import { Box } from "@mui/material";
-import * as React from "react";
-
-export const SubContentContainer: React.FC<React.PropsWithChildren> = ({ children }) => (
+import { FC, PropsWithChildren } from "react";
+export const SubContentContainer: FC<PropsWithChildren> = ({ children }) => (
   <Box sx={(theme) => ({ px: theme.spacing(2), py: theme.spacing(4) })}>{children}</Box>
 );
diff --git a/packages/common/src/components/mdx_editor.tsx b/packages/common/src/components/mdx_editor.tsx
index 2fa500c..290e418 100644
--- a/packages/common/src/components/mdx_editor.tsx
+++ b/packages/common/src/components/mdx_editor.tsx
@@ -4,12 +4,11 @@ import { Grid } from "@mui/system";
 import { Suspense } from "@suspensive/react";
 import MDEditor, { GroupOptions, ICommand, commands } from "@uiw/react-md-editor";
 import type { MDXComponents } from "mdx/types";
-import * as React from "react";
-import * as R from "remeda";
+import { CSSProperties, FC, SyntheticEvent, useRef, useState } from "react";
+import { isString } from "remeda";
 // import * as CryptoJS from "crypto-js";
 
-import * as Hooks from "../hooks";
-
+import { BackendAdminAPI, Common } from "@frontend/common/hooks";
 type CustomComponentInfoType = {
   k: string; // key
   n: string; // name
@@ -23,7 +22,7 @@ type MDXEditorProps = {
   extraCommands?: ICommand[];
 };
 
-const TextEditorStyle: React.CSSProperties = {
+const TextEditorStyle: CSSProperties = {
   flexGrow: 1,
   width: "100%",
   maxWidth: "100%",
@@ -33,11 +32,11 @@ const TextEditorStyle: React.CSSProperties = {
   overflowWrap: "break-word",
 
   fieldSizing: "content",
-} as React.CSSProperties;
+} as CSSProperties;
 
 // const calculateMD5FromFileBase64 = (fileBase64: string): string => CryptoJS.MD5(CryptoJS.enc.Base64.parse(fileBase64)).toString();
 
-// const onFileInEvent: React.DragEventHandler<HTMLDivElement> = (event) => {
+// const onFileInEvent: DragEventHandler<HTMLDivElement> = (event) => {
 //   event.preventDefault();
 //   event.stopPropagation();
 
@@ -95,11 +94,11 @@ type PublicFileType = {
 };
 
 const ImageSelector: GroupOptions["children"] = Suspense.with({ fallback: <CircularProgress /> }, ({ close, getState, textApi }) => {
-  const urlInputRef = React.useRef<HTMLInputElement>(null);
-  const backendAdminAPIClient = Hooks.BackendAdminAPI.useBackendAdminClient();
-  const { data } = Hooks.BackendAdminAPI.useListQuery<PublicFileType>(backendAdminAPIClient, "file", "publicfile");
-  const [widgetState, setWidgetState] = React.useState<ImageSelectorWidgetStateType>({ tab: 0 });
-  const setTab = (_: React.SyntheticEvent, tab: number) => setWidgetState((ps) => ({ ...ps, tab }));
+  const urlInputRef = useRef<HTMLInputElement>(null);
+  const backendAdminAPIClient = BackendAdminAPI.useBackendAdminClient();
+  const { data } = BackendAdminAPI.useListQuery<PublicFileType>(backendAdminAPIClient, "file", "publicfile");
+  const [widgetState, setWidgetState] = useState<ImageSelectorWidgetStateType>({ tab: 0 });
+  const setTab = (_: SyntheticEvent, tab: number) => setWidgetState((ps) => ({ ...ps, tab }));
   const setImageUrl = (selectedImageUrl?: string) => setWidgetState((ps) => ({ ...ps, selectedImageUrl }));
 
   const insertImage = (inputStr: string) => {
@@ -110,7 +109,7 @@ const ImageSelector: GroupOptions["children"] = Suspense.with({ fallback: <Circu
     close();
   };
   const getSelectedUrl = (): string | undefined => {
-    if (widgetState.tab === 0 && R.isString(widgetState.selectedImageUrl) && widgetState.selectedImageUrl.trim() !== "") {
+    if (widgetState.tab === 0 && isString(widgetState.selectedImageUrl) && widgetState.selectedImageUrl.trim() !== "") {
       return widgetState.selectedImageUrl.trim();
     } else if (widgetState.tab === 1 && urlInputRef.current && urlInputRef.current.checkValidity() && urlInputRef.current.value.trim() !== "") {
       return urlInputRef.current.value.trim();
@@ -123,11 +122,11 @@ const ImageSelector: GroupOptions["children"] = Suspense.with({ fallback: <Circu
   };
   const onHTMLInsertBtnClick = () => {
     const url = getSelectedUrl();
-    if (R.isString(url)) insertImage(`<img src="${url}" alt="이미지 설명" />`);
+    if (isString(url)) insertImage(`<img src="${url}" alt="이미지 설명" />`);
   };
   const onMarkdownInsertBtnClick = () => {
     const url = getSelectedUrl();
-    if (R.isString(url)) insertImage(`![이미지 설명](${url})`);
+    if (isString(url)) insertImage(`![이미지 설명](${url})`);
   };
 
   return (
@@ -188,7 +187,7 @@ const ImageSelector: GroupOptions["children"] = Suspense.with({ fallback: <Circu
 const getCustomComponentSelector: (registeredComponentList: CustomComponentInfoType[]) => GroupOptions["children"] =
   (registeredComponentList) =>
   ({ close, getState, textApi }) => {
-    const componentSelectorRef = React.useRef<HTMLSelectElement>(null);
+    const componentSelectorRef = useRef<HTMLSelectElement>(null);
 
     const onInsertBtnClick = () => {
       if (!textApi || !getState || !registeredComponentList?.length || !componentSelectorRef.current) return undefined;
@@ -222,8 +221,8 @@ const getCustomComponentSelector: (registeredComponentList: CustomComponentInfoT
     );
   };
 
-export const MDXEditor: React.FC<MDXEditorProps> = ({ disabled, defaultValue, onChange, extraCommands }) => {
-  const { mdxComponents } = Hooks.Common.useCommonContext();
+export const MDXEditor: FC<MDXEditorProps> = ({ disabled, defaultValue, onChange, extraCommands }) => {
+  const { mdxComponents } = Common.useCommonContext();
 
   const registeredComponentList: CustomComponentInfoType[] = [
     { k: "", n: "", v: undefined },
diff --git a/packages/common/src/components/pythonkorea.tsx b/packages/common/src/components/pythonkorea.tsx
index bce78f5..ada7fa6 100644
--- a/packages/common/src/components/pythonkorea.tsx
+++ b/packages/common/src/components/pythonkorea.tsx
@@ -1,6 +1,5 @@
-import * as React from "react";
-
-export const PythonKorea: React.FC<{ style: React.CSSProperties }> = (props) => (
+import { CSSProperties, FC } from "react";
+export const PythonKorea: FC<{ style: CSSProperties }> = (props) => (
   <svg width="226.667" height="226.667" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 226.667 226.667" {...props}>
     <defs>
       <clipPath clipPathUnits="userSpaceOnUse" id="a">
diff --git a/packages/common/src/contexts/index.ts b/packages/common/src/contexts/index.ts
index 421d589..108350a 100644
--- a/packages/common/src/contexts/index.ts
+++ b/packages/common/src/contexts/index.ts
@@ -1,6 +1,5 @@
 import { MDXComponents } from "mdx/types";
-import * as React from "react";
-
+import { createContext } from "react";
 export type ContextOptions = {
   language: "ko" | "en";
   frontendDomain?: string;
@@ -12,7 +11,7 @@ export type ContextOptions = {
   mdxComponents?: MDXComponents;
 };
 
-export const context = React.createContext<ContextOptions>({
+export const context = createContext<ContextOptions>({
   language: "ko",
   frontendDomain: "",
   baseUrl: "",
diff --git a/packages/common/src/hooks/useAPI.ts b/packages/common/src/hooks/useAPI.ts
index 3cc90d9..553f283 100644
--- a/packages/common/src/hooks/useAPI.ts
+++ b/packages/common/src/hooks/useAPI.ts
@@ -1,11 +1,10 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import * as React from "react";
-
-import * as BackendAPIs from "../apis";
-import { BackendAPIClient } from "../apis/client";
-import { context as backendContext } from "../contexts";
-import * as BackendAPISchemas from "../schemas/backendAPI";
+import { useContext } from "react";
 
+import { listSessions, listSiteMaps, listSponsors, retrievePage, retrieveSession } from "@frontend/common/apis";
+import { BackendAPIClient } from "@frontend/common/apis/client";
+import { context as backendContext } from "@frontend/common/contexts";
+import { SessionQueryParameterSchema } from "@frontend/common/schemas/backendAPI";
 const QUERY_KEYS = {
   SITEMAP_LIST: ["query", "sitemap", "list"],
   PAGE: ["query", "page"],
@@ -14,7 +13,7 @@ const QUERY_KEYS = {
 };
 
 export const useBackendContext = () => {
-  const ctx = React.useContext(backendContext);
+  const ctx = useContext(backendContext);
   if (!ctx) throw new Error("useBackendContext must be used within a CommonProvider");
   return ctx;
 };
@@ -27,29 +26,29 @@ export const useBackendClient = () => {
 export const useFlattenSiteMapQuery = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.SITEMAP_LIST, client.language],
-    queryFn: BackendAPIs.listSiteMaps(client),
+    queryFn: listSiteMaps(client),
   });
 
 export const usePageQuery = (client: BackendAPIClient, id: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PAGE, id, client.language],
-    queryFn: () => BackendAPIs.retrievePage(client)(id),
+    queryFn: () => retrievePage(client)(id),
   });
 
 export const useSponsorQuery = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.SPONSOR_LIST, client.language],
-    queryFn: BackendAPIs.listSponsors(client),
+    queryFn: listSponsors(client),
   });
 
-export const useSessionsQuery = (client: BackendAPIClient, params?: BackendAPISchemas.SessionQueryParameterSchema) =>
+export const useSessionsQuery = (client: BackendAPIClient, params?: SessionQueryParameterSchema) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.SESSION_LIST, client.language, ...(params ? [JSON.stringify(params)] : [])],
-    queryFn: BackendAPIs.listSessions(client, params),
+    queryFn: listSessions(client, params),
   });
 
 export const useSessionQuery = (client: BackendAPIClient, id: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.SESSION_LIST, id, client.language],
-    queryFn: () => BackendAPIs.retrieveSession(client)(id),
+    queryFn: () => retrieveSession(client)(id),
   });
diff --git a/packages/common/src/hooks/useAdminAPI.ts b/packages/common/src/hooks/useAdminAPI.ts
index 1f7a6c2..d218bdb 100644
--- a/packages/common/src/hooks/useAdminAPI.ts
+++ b/packages/common/src/hooks/useAdminAPI.ts
@@ -1,9 +1,38 @@
 import { useMutation, useQuery, useSuspenseQuery } from "@tanstack/react-query";
 
+import {
+  approveModificationAudit,
+  bulkUpdateSections,
+  changePassword,
+  choices,
+  create,
+  issueGoogleOAuth2AccessToken,
+  list,
+  listPaginated,
+  listSections,
+  me,
+  openApiSchema,
+  previewModificationAudit,
+  rejectModificationAudit,
+  remove,
+  removePrepared,
+  renderSentTo,
+  renderTemplate,
+  resetUserPassword,
+  retrieve,
+  retryHistory,
+  retrySentTo,
+  schema,
+  signIn,
+  signOut,
+  update,
+  updatePrepared,
+  uploadPublicFile,
+} from "@frontend/common/apis/admin_api";
+import { BackendAPIClient } from "@frontend/common/apis/client";
+import { PublicFileSchema } from "@frontend/common/schemas/backendAdminAPI";
+
 import { useBackendContext } from "./useAPI";
-import * as BackendAdminAPIs from "../apis/admin_api";
-import { BackendAPIClient } from "../apis/client";
-import * as BackendAdminAPISchemas from "../schemas/backendAdminAPI";
 
 const QUERY_KEYS = {
   ADMIN_ME: ["query", "admin", "me"],
@@ -40,171 +69,171 @@ export const useBackendAdminClient = () => {
 export const useSignedInUserQuery = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: QUERY_KEYS.ADMIN_ME,
-    queryFn: BackendAdminAPIs.me(client),
+    queryFn: me(client),
   });
 
 export const useSignInMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_SIGN_IN],
-    mutationFn: BackendAdminAPIs.signIn(client),
+    mutationFn: signIn(client),
   });
 
 export const useSignOutMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_SIGN_OUT],
-    mutationFn: BackendAdminAPIs.signOut(client),
+    mutationFn: signOut(client),
   });
 
 export const useChangePasswordMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_CHANGE_PASSWORD],
-    mutationFn: BackendAdminAPIs.changePassword(client),
+    mutationFn: changePassword(client),
   });
 
 export const useResetUserPasswordMutation = (client: BackendAPIClient, id: string) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_RESET_PASSWORD, id],
-    mutationFn: BackendAdminAPIs.resetUserPassword(client, id),
+    mutationFn: resetUserPassword(client, id),
   });
 
 export const useSchemaQuery = (client: BackendAPIClient, app: string, resource: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.ADMIN_SCHEMA, app, resource],
-    queryFn: BackendAdminAPIs.schema(client, app, resource),
+    queryFn: schema(client, app, resource),
   });
 
 export const useChoicesQuery = (client: BackendAPIClient, app: string, resource: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.ADMIN_CHOICES, app, resource],
-    queryFn: BackendAdminAPIs.choices(client, app, resource),
+    queryFn: choices(client, app, resource),
   });
 
 export const useOpenApiSchemaQuery = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: QUERY_KEYS.ADMIN_OPENAPI_SCHEMA,
-    queryFn: BackendAdminAPIs.openApiSchema(client),
+    queryFn: openApiSchema(client),
     staleTime: Infinity,
   });
 
 export const useListQuery = <T>(client: BackendAPIClient, app: string, resource: string, params?: Record<string, string>) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.ADMIN_LIST, app, resource, JSON.stringify(params)],
-    queryFn: BackendAdminAPIs.list<T>(client, app, resource, params),
+    queryFn: list<T>(client, app, resource, params),
   });
 
 export const useListPaginatedQuery = <T>(client: BackendAPIClient, app: string, resource: string, params?: Record<string, string>) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.ADMIN_LIST, app, resource, "paginated", JSON.stringify(params)],
-    queryFn: BackendAdminAPIs.listPaginated<T>(client, app, resource, params),
+    queryFn: listPaginated<T>(client, app, resource, params),
   });
 
 export const useRetrieveQuery = <T>(client: BackendAPIClient, app: string, resource: string, id: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.ADMIN_RETRIEVE, app, resource, id],
-    queryFn: BackendAdminAPIs.retrieve<T>(client, app, resource, id),
+    queryFn: retrieve<T>(client, app, resource, id),
   });
 
 export const useCreateMutation = <T>(client: BackendAPIClient, app: string, resource: string) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_CREATE, app, resource],
-    mutationFn: BackendAdminAPIs.create<T>(client, app, resource),
+    mutationFn: create<T>(client, app, resource),
   });
 
 export const useUpdateMutation = <T>(client: BackendAPIClient, app: string, resource: string, id: string) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_UPDATE, app, resource, id],
-    mutationFn: BackendAdminAPIs.update<T>(client, app, resource, id),
+    mutationFn: update<T>(client, app, resource, id),
   });
 
 export const useUpdatePreparedMutation = <T extends { id: string }>(client: BackendAPIClient, app: string, resource: string) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_UPDATE, app, resource, "prepared"],
-    mutationFn: BackendAdminAPIs.updatePrepared<T>(client, app, resource),
+    mutationFn: updatePrepared<T>(client, app, resource),
   });
 
 export const useRemoveMutation = (client: BackendAPIClient, app: string, resource: string, id: string) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_REMOVE, app, resource, id],
-    mutationFn: BackendAdminAPIs.remove(client, app, resource, id),
+    mutationFn: remove(client, app, resource, id),
   });
 
 export const useRemovePreparedMutation = (client: BackendAPIClient, app: string, resource: string) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_REMOVE, app, resource, "prepared"],
-    mutationFn: BackendAdminAPIs.removePrepared(client, app, resource),
+    mutationFn: removePrepared(client, app, resource),
   });
 
 export const usePublicFileQuery = (client: BackendAPIClient, id: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.ADMIN_RETRIEVE, "file", "publicfile", id],
-    queryFn: BackendAdminAPIs.retrieve<BackendAdminAPISchemas.PublicFileSchema>(client, "file", "publicfile", id),
+    queryFn: retrieve<PublicFileSchema>(client, "file", "publicfile", id),
   });
 
 export const useUploadPublicFileMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_CREATE, "public-file", "upload"],
-    mutationFn: BackendAdminAPIs.uploadPublicFile(client),
+    mutationFn: uploadPublicFile(client),
   });
 
 export const useListPageSectionsQuery = (client: BackendAPIClient, pageId: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.ADMIN_LIST, "cms", "page", pageId, "section"],
-    queryFn: BackendAdminAPIs.listSections(client, pageId),
+    queryFn: listSections(client, pageId),
   });
 
 export const useBulkUpdatePageSectionsMutation = (client: BackendAPIClient, pageId: string) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_UPDATE, "cms", "page", pageId, "section"],
-    mutationFn: BackendAdminAPIs.bulkUpdateSections(client, pageId),
+    mutationFn: bulkUpdateSections(client, pageId),
   });
 
 export const useModificationAuditPreviewQuery = <T>(client: BackendAPIClient, id: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.ADMIN_PREVIEW_MODIFICATION_AUDIT, id],
-    queryFn: BackendAdminAPIs.previewModificationAudit<T>(client, id),
+    queryFn: previewModificationAudit<T>(client, id),
   });
 
 export const useApproveModificationAuditMutation = (client: BackendAPIClient, id: string) =>
   useMutation({
     mutationKey: MUTATION_KEYS.ADMIN_APPROVE_MODIFICATION_AUDIT,
-    mutationFn: BackendAdminAPIs.approveModificationAudit(client, id),
+    mutationFn: approveModificationAudit(client, id),
   });
 
 export const useRejectModificationAuditMutation = (client: BackendAPIClient, id: string) =>
   useMutation({
     mutationKey: MUTATION_KEYS.ADMIN_REJECT_MODIFICATION_AUDIT,
-    mutationFn: BackendAdminAPIs.rejectModificationAudit(client, id),
+    mutationFn: rejectModificationAudit(client, id),
   });
 
 export const useRenderTemplateMutation = (client: BackendAPIClient, app: string, resource: string) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_RENDER_TEMPLATE, app, resource],
-    mutationFn: BackendAdminAPIs.renderTemplate(client, app, resource),
+    mutationFn: renderTemplate(client, app, resource),
     meta: { invalidates: [] },
   });
 
 export const useRetryHistoryMutation = (client: BackendAPIClient, app: string, resource: string, id: string) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_RETRY_HISTORY, app, resource, id],
-    mutationFn: BackendAdminAPIs.retryHistory(client, app, resource, id),
+    mutationFn: retryHistory(client, app, resource, id),
   });
 
 export const useRetrySentToMutation = (client: BackendAPIClient, app: string, resource: string, id: string, sentToId: string) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_RETRY_SENT_TO, app, resource, id, sentToId],
-    mutationFn: BackendAdminAPIs.retrySentTo(client, app, resource, id, sentToId),
+    mutationFn: retrySentTo(client, app, resource, id, sentToId),
   });
 
 export const useRenderSentToQuery = (client: BackendAPIClient, app: string, resource: string, id: string, sentToId: string | null) =>
   useQuery({
     queryKey: [...QUERY_KEYS.ADMIN_RENDER_SENT_TO, app, resource, id, sentToId],
-    queryFn: BackendAdminAPIs.renderSentTo(client, app, resource, id, sentToId ?? ""),
+    queryFn: renderSentTo(client, app, resource, id, sentToId ?? ""),
     enabled: !!sentToId,
   });
 
 export const useIssueGoogleOAuth2AccessTokenMutation = (client: BackendAPIClient, id: string) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.ADMIN_ISSUE_GOOGLE_OAUTH2_ACCESS_TOKEN, id],
-    mutationFn: BackendAdminAPIs.issueGoogleOAuth2AccessToken(client, id),
+    mutationFn: issueGoogleOAuth2AccessToken(client, id),
     meta: { invalidates: [] },
   });
diff --git a/packages/common/src/hooks/useCommonContext.ts b/packages/common/src/hooks/useCommonContext.ts
index 3cb5e56..99c14c7 100644
--- a/packages/common/src/hooks/useCommonContext.ts
+++ b/packages/common/src/hooks/useCommonContext.ts
@@ -1,9 +1,9 @@
-import * as React from "react";
+import { useContext } from "react";
 
-import { context } from "../contexts";
+import { context } from "@frontend/common/contexts";
 
 export const useCommonContext = () => {
-  const ctx = React.useContext(context);
+  const ctx = useContext(context);
   if (!ctx) {
     throw new Error("useCommonContext must be used within a CommonProvider");
   }
diff --git a/packages/common/src/hooks/useParticipantPortalAPI.ts b/packages/common/src/hooks/useParticipantPortalAPI.ts
index f5d4d33..7400b0c 100644
--- a/packages/common/src/hooks/useParticipantPortalAPI.ts
+++ b/packages/common/src/hooks/useParticipantPortalAPI.ts
@@ -1,8 +1,26 @@
 import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
 
+import { BackendAPIClient } from "@frontend/common/apis/client";
+import {
+  cancelModificationAudit,
+  changePassword,
+  listModificationAudits,
+  listPresentations,
+  listPublicFiles,
+  me,
+  patchPresentation,
+  previewMeModAudit,
+  previewModificationAudit,
+  previewPresentationModAudit,
+  retrieveModificationAudit,
+  retrievePresentation,
+  signIn,
+  signOut,
+  updateMe,
+  uploadPublicFile,
+} from "@frontend/common/apis/participant_portal_api";
+
 import { useBackendContext } from "./useAPI";
-import { BackendAPIClient } from "../apis/client";
-import * as ParticipantPortalAPI from "../apis/participant_portal_api";
 
 const QUERY_KEYS = {
   PARTICIPANT_ME: ["query", "participant", "me"],
@@ -31,95 +49,95 @@ export const useParticipantPortalClient = () => {
 export const useSignedInUserQuery = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PARTICIPANT_ME, client.language],
-    queryFn: ParticipantPortalAPI.me(client),
+    queryFn: me(client),
   });
 
 export const usePreviewMeModAuditQuery = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PARTICIPANT_ME, "preview", client.language],
-    queryFn: ParticipantPortalAPI.previewMeModAudit(client),
+    queryFn: previewMeModAudit(client),
   });
 
 export const useUpdateMeMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.PARTICIPANT_UPDATE_ME],
-    mutationFn: ParticipantPortalAPI.updateMe(client),
+    mutationFn: updateMe(client),
   });
 
 export const useSignInMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.PARTICIPANT_SIGN_IN],
-    mutationFn: ParticipantPortalAPI.signIn(client),
+    mutationFn: signIn(client),
   });
 
 export const useSignOutMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.PARTICIPANT_SIGN_OUT],
-    mutationFn: ParticipantPortalAPI.signOut(client),
+    mutationFn: signOut(client),
   });
 
 export const useChangePasswordMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.PARTICIPANT_CHANGE_PASSWORD],
-    mutationFn: ParticipantPortalAPI.changePassword(client),
+    mutationFn: changePassword(client),
   });
 
 export const usePublicFilesQuery = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PARTICIPANT_PUBLIC_FILES, client.language],
-    queryFn: ParticipantPortalAPI.listPublicFiles(client),
+    queryFn: listPublicFiles(client),
   });
 
 export const useUploadPublicFileMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.PARTICIPANT_UPLOAD_PUBLIC_FILE, "upload"],
-    mutationFn: ParticipantPortalAPI.uploadPublicFile(client),
+    mutationFn: uploadPublicFile(client),
   });
 
 export const useListPresentationsQuery = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PARTICIPANT_LIST_PRESENTATION, client.language],
-    queryFn: ParticipantPortalAPI.listPresentations(client),
+    queryFn: listPresentations(client),
   });
 
 export const useRetrievePresentationQuery = (client: BackendAPIClient, id: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PARTICIPANT_RETRIEVE_PRESENTATION, id, client.language],
-    queryFn: ParticipantPortalAPI.retrievePresentation(client, id),
+    queryFn: retrievePresentation(client, id),
   });
 
 export const useUpdatePresentationMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.PARTICIPANT_UPDATE_PRESENTATION],
-    mutationFn: ParticipantPortalAPI.patchPresentation(client),
+    mutationFn: patchPresentation(client),
   });
 
 export const usePreviewPresentationModAuditQuery = (client: BackendAPIClient, id: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PARTICIPANT_RETRIEVE_PRESENTATION, id, "preview", client.language],
-    queryFn: ParticipantPortalAPI.previewPresentationModAudit(client, id),
+    queryFn: previewPresentationModAudit(client, id),
   });
 
 export const useModificationAuditsQuery = (client: BackendAPIClient) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PARTICIPANT_LIST_MODIFICATION_AUDIT, client.language],
-    queryFn: ParticipantPortalAPI.listModificationAudits(client),
+    queryFn: listModificationAudits(client),
   });
 
 export const useModificationAuditPreviewQuery = (client: BackendAPIClient, id: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PARTICIPANT_LIST_MODIFICATION_AUDIT, "preview", id, client.language],
-    queryFn: ParticipantPortalAPI.previewModificationAudit(client, id),
+    queryFn: previewModificationAudit(client, id),
   });
 
 export const useRetrieveModificationAuditQuery = (client: BackendAPIClient, id: string) =>
   useSuspenseQuery({
     queryKey: [...QUERY_KEYS.PARTICIPANT_RETRIEVE_MODIFICATION_AUDIT, id, client.language],
-    queryFn: ParticipantPortalAPI.retrieveModificationAudit(client, id),
+    queryFn: retrieveModificationAudit(client, id),
   });
 
 export const useCancelModificationAuditMutation = (client: BackendAPIClient) =>
   useMutation({
     mutationKey: [...MUTATION_KEYS.PARTICIPANT_CANCEL_MODIFICATION_AUDIT],
-    mutationFn: ParticipantPortalAPI.cancelModificationAudit(client),
+    mutationFn: cancelModificationAudit(client),
   });
diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
index 15451f6..552c57b 100644
--- a/packages/common/src/index.ts
+++ b/packages/common/src/index.ts
@@ -1,8 +1,4 @@
-export * as BackendAdminAPIs from "./apis/admin_api";
-export * as BackendAPIs from "./apis/index";
-export * as BackendParticipantPortalAPIs from "./apis/participant_portal_api";
-export { default as Components } from "./components/index";
-export * as Contexts from "./contexts/index";
-export * as Hooks from "./hooks/index";
-export * as Schemas from "./schemas/index";
-export * as Utils from "./utils/index";
+export * from "./apis";
+export * from "./components";
+export * from "./contexts";
+export * from "./utils";
diff --git a/packages/common/src/schemas/backendAPI.ts b/packages/common/src/schemas/backendAPI.ts
index 5b7ba58..471cdc5 100644
--- a/packages/common/src/schemas/backendAPI.ts
+++ b/packages/common/src/schemas/backendAPI.ts
@@ -1,5 +1,4 @@
-import * as R from "remeda";
-
+import { isArray, isPlainObject, isString } from "remeda";
 export type EmptyObject = Record<string, never>;
 
 export type DetailedErrorSchema = {
@@ -102,11 +101,11 @@ export type SessionSchema = {
 
 export const isObjectErrorResponseSchema = (obj?: unknown): obj is ErrorResponseSchema => {
   return (
-    R.isPlainObject(obj) &&
-    R.isString(obj.type) &&
-    R.isArray(obj.errors) &&
+    isPlainObject(obj) &&
+    isString(obj.type) &&
+    isArray(obj.errors) &&
     obj.errors.every((error) => {
-      return R.isPlainObject(error) && R.isString(error.code) && R.isString(error.detail) && (error.attr === null || R.isString(error.attr));
+      return isPlainObject(error) && isString(error.code) && isString(error.detail) && (error.attr === null || isString(error.attr));
     })
   );
 };
diff --git a/packages/common/src/utils/api.ts b/packages/common/src/utils/api.ts
index a9312f8..700c4f9 100644
--- a/packages/common/src/utils/api.ts
+++ b/packages/common/src/utils/api.ts
@@ -1,5 +1,4 @@
-import * as R from "remeda";
-
+import { isEmpty, isString } from "remeda";
 type GFlatSiteMap = {
   id: string;
   route_code: string;
@@ -49,7 +48,7 @@ export const buildFlatSiteMap = <T extends GNestedSiteMap>(nested: GNestedSiteMa
 
 export const parseCss = (t: unknown): React.CSSProperties => {
   try {
-    if (R.isString(t) && !R.isEmpty(t)) return JSON.parse(t);
+    if (isString(t) && !isEmpty(t)) return JSON.parse(t);
   } catch (e) {
     console.warn("Failed to parse CSS string:", t, e);
   }
diff --git a/packages/common/src/utils/cookie.ts b/packages/common/src/utils/cookie.ts
index 4bc7640..fc2addd 100644
--- a/packages/common/src/utils/cookie.ts
+++ b/packages/common/src/utils/cookie.ts
@@ -1,11 +1,10 @@
-import * as R from "remeda";
-
+import { isEmpty, isString } from "remeda";
 export const getCookie = (name: string) => {
-  if (!R.isString(document.cookie) || R.isEmpty(document.cookie)) return undefined;
+  if (!isString(document.cookie) || isEmpty(document.cookie)) return undefined;
 
   let cookieValue: string | undefined;
   document.cookie.split(";").forEach((cookie) => {
-    if (R.isEmpty(cookie) || !cookie.includes("=")) return;
+    if (isEmpty(cookie) || !cookie.includes("=")) return;
     const [key, value] = cookie.split("=", 2);
     if (key.trim() === name) cookieValue = decodeURIComponent(value) as string;
   });
diff --git a/packages/common/src/utils/form.ts b/packages/common/src/utils/form.ts
index 52bf3e4..35dd8a1 100644
--- a/packages/common/src/utils/form.ts
+++ b/packages/common/src/utils/form.ts
@@ -1,12 +1,11 @@
-import * as R from "remeda";
-
+import { isEmpty, isObjectType } from "remeda";
 export type PossibleFormInputType = HTMLFormElement | undefined | null;
 export type FormResultObject = {
   [k: string]: FormDataEntryValue | boolean | null;
 };
 
 export const isFormValid = (form: HTMLFormElement | null | undefined): form is HTMLFormElement => {
-  if (!(R.isObjectType(form) && form instanceof HTMLFormElement)) return false;
+  if (!(isObjectType(form) && form instanceof HTMLFormElement)) return false;
 
   if (!form.checkValidity()) {
     form.reportValidity();
@@ -22,7 +21,7 @@ export function getFormValue<T>(_: { form: HTMLFormElement; fieldToExcludeWhenFa
   } = Object.fromEntries(new FormData(_.form));
   Object.keys(formData)
     .filter((key) => (_.fieldToExcludeWhenFalse ?? []).includes(key) || (_.fieldToNullWhenFalse ?? []).includes(key))
-    .filter((key) => R.isEmpty(formData[key] as string))
+    .filter((key) => isEmpty(formData[key] as string))
     .forEach((key) => {
       if ((_.fieldToExcludeWhenFalse ?? []).includes(key)) {
         delete formData[key];
diff --git a/packages/common/src/utils/openapi.ts b/packages/common/src/utils/openapi.ts
index c795897..23f09a1 100644
--- a/packages/common/src/utils/openapi.ts
+++ b/packages/common/src/utils/openapi.ts
@@ -1,4 +1,4 @@
-import { OpenAPIParameterSchema, OpenAPISchema } from "../schemas/backendAdminAPI";
+import { OpenAPIParameterSchema, OpenAPISchema } from "@frontend/common/schemas/backendAdminAPI";
 
 export const extractQueryParameters = (schema: OpenAPISchema, app: string, resource: string): OpenAPIParameterSchema[] => {
   const pathItem = schema.paths[`/v1/admin-api/${app}/${resource}/`];
diff --git a/packages/common/src/utils/string.ts b/packages/common/src/utils/string.ts
index 4bf656e..0955984 100644
--- a/packages/common/src/utils/string.ts
+++ b/packages/common/src/utils/string.ts
@@ -1,6 +1,5 @@
-import * as R from "remeda";
-
-export const isFilledString = (obj: unknown): obj is string => R.isString(obj) && !R.isEmpty(obj);
+import { isEmpty, isString } from "remeda";
+export const isFilledString = (obj: unknown): obj is string => isString(obj) && !isEmpty(obj);
 
 export const isValidHttpUrl = (obj: unknown): obj is string => {
   try {
diff --git a/packages/common/tsconfig.json b/packages/common/tsconfig.json
index 85713e4..cade86f 100644
--- a/packages/common/tsconfig.json
+++ b/packages/common/tsconfig.json
@@ -1,12 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "declaration": true,
-    "outDir": "dist",
-    "strict": true,
-    "jsx": "react"
-  },
-  "include": ["src", "vite.config.ts", "vite-env.d.ts", "../../types"],
+  "extends": "../../tsconfig.base.json",
+  "include": ["src", "../../types"]
 }
diff --git a/packages/shop/src/apis/client.ts b/packages/shop/src/apis/client.ts
index 368a4a9..2daf53c 100644
--- a/packages/shop/src/apis/client.ts
+++ b/packages/shop/src/apis/client.ts
@@ -1,8 +1,8 @@
-import * as Common from "@frontend/common";
+import { getCookie } from "@frontend/common/utils";
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
-import * as R from "remeda";
+import { isString } from "remeda";
 
-import ShopSchemas from "../schemas";
+import { isObjectErrorResponseSchema, type ErrorResponseSchema } from "@frontend/shop/schemas";
 
 const DEFAULT_ERROR_MESSAGE = "알 수 없는 문제가 발생했습니다, 잠시 후 다시 시도해주세요.";
 const DEFAULT_ERROR_RESPONSE = {
@@ -13,12 +13,12 @@ const DEFAULT_ERROR_RESPONSE = {
 export class ShopAPIClientError extends Error {
   readonly name = "ShopAPIError";
   readonly status: number;
-  readonly detail: ShopSchemas.ErrorResponseSchema;
+  readonly detail: ErrorResponseSchema;
   readonly originalError: unknown;
 
   constructor(error?: unknown) {
     let message: string = DEFAULT_ERROR_MESSAGE;
-    let detail: ShopSchemas.ErrorResponseSchema = DEFAULT_ERROR_RESPONSE;
+    let detail: ErrorResponseSchema = DEFAULT_ERROR_RESPONSE;
     let status = -1;
 
     if (axios.isAxiosError(error)) {
@@ -26,14 +26,14 @@ export class ShopAPIClientError extends Error {
 
       if (response) {
         status = response.status;
-        detail = ShopSchemas.isObjectErrorResponseSchema(response.data)
+        detail = isObjectErrorResponseSchema(response.data)
           ? response.data
           : {
               type: "axios_error",
               errors: [
                 {
                   code: "unknown",
-                  detail: R.isString(response.data) ? response.data : DEFAULT_ERROR_MESSAGE,
+                  detail: isString(response.data) ? response.data : DEFAULT_ERROR_MESSAGE,
                   attr: null,
                 },
               ],
@@ -58,8 +58,12 @@ export class ShopAPIClientError extends Error {
   }
 }
 
-type AxiosRequestWithoutPayload = <T = unknown, R = AxiosResponse<T>, D = unknown>(url: string, config?: AxiosRequestConfig<D>) => Promise<R>;
-type AxiosRequestWithPayload = <T = unknown, R = AxiosResponse<T>, D = unknown>(url: string, data?: D, config?: AxiosRequestConfig<D>) => Promise<R>;
+type AxiosRequestWithoutPayload = <T = unknown, Resp = AxiosResponse<T>, D = unknown>(url: string, config?: AxiosRequestConfig<D>) => Promise<Resp>;
+type AxiosRequestWithPayload = <T = unknown, Resp = AxiosResponse<T>, D = unknown>(
+  url: string,
+  data?: D,
+  config?: AxiosRequestConfig<D>
+) => Promise<Resp>;
 
 export class ShopAPIClient {
   readonly baseURL: string;
@@ -87,9 +91,9 @@ export class ShopAPIClient {
   }
 
   _safe_request_without_payload(requestFunc: AxiosRequestWithoutPayload): AxiosRequestWithoutPayload {
-    return async <T = unknown, R = AxiosResponse<T>, D = unknown>(url: string, config?: AxiosRequestConfig<D>) => {
+    return async <T = unknown, Resp = AxiosResponse<T>, D = unknown>(url: string, config?: AxiosRequestConfig<D>) => {
       try {
-        return await requestFunc<T, R, D>(url, config);
+        return await requestFunc<T, Resp, D>(url, config);
       } catch (error) {
         throw new ShopAPIClientError(error);
       }
@@ -97,9 +101,9 @@ export class ShopAPIClient {
   }
 
   _safe_request_with_payload(requestFunc: AxiosRequestWithPayload): AxiosRequestWithPayload {
-    return async <T = unknown, R = AxiosResponse<T>, D = unknown>(url: string, data: D, config?: AxiosRequestConfig<D>) => {
+    return async <T = unknown, Resp = AxiosResponse<T>, D = unknown>(url: string, data: D, config?: AxiosRequestConfig<D>) => {
       try {
-        return await requestFunc<T, R, D>(url, data, config);
+        return await requestFunc<T, Resp, D>(url, data, config);
       } catch (error) {
         throw new ShopAPIClientError(error);
       }
@@ -107,7 +111,7 @@ export class ShopAPIClient {
   }
 
   getCSRFToken(): string | undefined {
-    return Common.Utils.getCookie(this.csrfCookieName);
+    return getCookie(this.csrfCookieName);
   }
 
   async get<T, D = unknown>(url: string, config?: AxiosRequestConfig<D>): Promise<T> {
diff --git a/packages/shop/src/apis/index.ts b/packages/shop/src/apis/index.ts
index 36295c0..732546e 100644
--- a/packages/shop/src/apis/index.ts
+++ b/packages/shop/src/apis/index.ts
@@ -1,149 +1,161 @@
-import ShopSchemas from "../schemas";
-import { ShopAPIClient } from "./client";
+import type {
+  CartItemAppendRequest,
+  CustomerInfo,
+  EmailSignInRequest,
+  EmptyObject,
+  OneItemOrderRequest,
+  OneItemRefundRequest,
+  Order,
+  OrderOptionsPatchRequest,
+  Patron,
+  Product,
+  ProductListQueryParams,
+  SocialSignInRequest,
+  UserRow,
+  UserSignedInStatus,
+} from "@frontend/shop/schemas";
 
-namespace ShopAPIs {
-  /**
-   * 로그인합니다.
-   */
-  export const signInWithEmail = (client: ShopAPIClient) => (data: ShopSchemas.EmailSignInRequest) => {
-    const requestPayload = {
-      ...data,
-      csrfmiddlewaretoken: client.getCSRFToken() ?? "",
-    };
-    return client.post<ShopSchemas.UserSignedInStatus, ShopSchemas.EmailSignInRequest>("authn/social/browser/v1/auth/login", requestPayload);
-  };
+import { ShopAPIClient } from "./client";
 
-  /**
-   * SNS로 로그인합니다.
-   */
-  export const signInWithSNS = (client: ShopAPIClient) => async (socialSignInInfo: ShopSchemas.SocialSignInRequest) => {
-    const form = document.createElement("form");
-    form.method = "POST";
-    form.action = `${client.baseURL}/authn/social/browser/v1/auth/provider/redirect`;
-
-    Object.entries({
-      ...socialSignInInfo,
-      csrfmiddlewaretoken: client.getCSRFToken() ?? "",
-      process: "login",
-    }).forEach(([key, value]) => {
-      const inputElement = document.createElement("input");
-      inputElement.type = "hidden";
-      inputElement.name = key;
-      inputElement.value = value;
-      form.appendChild(inputElement);
-    });
-    document.body.appendChild(form);
-    form.submit();
-    setTimeout(() => document.body.removeChild(form), 100);
-  };
+export { ShopAPIClient, ShopAPIClientError } from "./client";
 
-  /**
-   * 로그아웃합니다.
-   */
-  export const signOut = (client: ShopAPIClient) => async () => {
-    try {
-      await client.delete<void>("authn/social/browser/v1/auth/session");
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    } catch (_) {
-      return Promise.resolve({});
-    }
+/**
+ * 로그인합니다.
+ */
+export const signInWithEmail = (client: ShopAPIClient) => (data: EmailSignInRequest) => {
+  const requestPayload = {
+    ...data,
+    csrfmiddlewaretoken: client.getCSRFToken() ?? "",
   };
-
-  /**
-   * 로그인 정보를 조회합니다.
-   * @returns 로그인 정보
-   */
-  export const retrieveUserInfo = (client: ShopAPIClient) => async () => {
-    try {
-      const response = await client.get<ShopSchemas.UserSignedInStatus>("authn/social/browser/v1/auth/session");
-      if (response.meta.is_authenticated) {
-        return response;
-      } else {
-        throw new Error("User is not authenticated");
-      }
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    } catch (_) {
-      return Promise.resolve(null);
+  return client.post<UserSignedInStatus, EmailSignInRequest>("authn/social/browser/v1/auth/login", requestPayload);
+};
+
+/**
+ * SNS로 로그인합니다.
+ */
+export const signInWithSNS = (client: ShopAPIClient) => async (socialSignInInfo: SocialSignInRequest) => {
+  const form = document.createElement("form");
+  form.method = "POST";
+  form.action = `${client.baseURL}/authn/social/browser/v1/auth/provider/redirect`;
+
+  Object.entries({
+    ...socialSignInInfo,
+    csrfmiddlewaretoken: client.getCSRFToken() ?? "",
+    process: "login",
+  }).forEach(([key, value]) => {
+    const inputElement = document.createElement("input");
+    inputElement.type = "hidden";
+    inputElement.name = key;
+    inputElement.value = value;
+    form.appendChild(inputElement);
+  });
+  document.body.appendChild(form);
+  form.submit();
+  setTimeout(() => document.body.removeChild(form), 100);
+};
+
+/**
+ * 로그아웃합니다.
+ */
+export const signOut = (client: ShopAPIClient) => async () => {
+  try {
+    await client.delete<void>("authn/social/browser/v1/auth/session");
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (_) {
+    return Promise.resolve({});
+  }
+};
+
+/**
+ * 로그인 정보를 조회합니다.
+ * @returns 로그인 정보
+ */
+export const retrieveUserInfo = (client: ShopAPIClient) => async () => {
+  try {
+    const response = await client.get<UserSignedInStatus>("authn/social/browser/v1/auth/session");
+    if (response.meta.is_authenticated) {
+      return response;
+    } else {
+      throw new Error("User is not authenticated");
     }
-  };
-
-  /**
-   * 현재 사용자의 row 정보를 가져옵니다.
-   * @returns 로그인 정보
-   */
-  export const retrieveUserRowInfo = (client: ShopAPIClient) => async () => client.get<ShopSchemas.UserRow>("v1/users/");
-
-  /**
-   * 노출 중인 모든 상품의 목록을 가져옵니다.
-   * @returns 노출 중인 모든 상품의 목록
-   */
-  export const listProducts = (client: ShopAPIClient) => (qs?: ShopSchemas.ProductListQueryParams) =>
-    client.get<ShopSchemas.Product[]>("v1/products/", { params: qs });
-
-  /**
-   * 현재 사용자의 장바구니에 담긴 상품의 목록을 가져옵니다.
-   * @returns 현재 장바구니 상태
-   */
-  export const retrieveCart = (client: ShopAPIClient) => () => client.get<ShopSchemas.Order | ShopSchemas.EmptyObject>("v1/orders/cart/");
-
-  /**
-   * 장바구니에 상품을 추가합니다.
-   * @returns 현재 장바구니 상태
-   */
-  export const appendItemToCart = (client: ShopAPIClient) => (data: ShopSchemas.CartItemAppendRequest) =>
-    client.post<ShopSchemas.Order, ShopSchemas.CartItemAppendRequest>("v1/orders/cart/products/", data);
-
-  /**
-   * 장바구니에서 특정 상품을 제거합니다.
-   * @returns 현재 장바구니 상태
-   */
-  export const removeItemFromCart = (client: ShopAPIClient) => (data: { cartProductId: string }) =>
-    client.delete<ShopSchemas.Order>(`v1/orders/cart/products/${data.cartProductId}/`);
-
-  /**
-   * 단일 상품 즉시 결제를 PortOne에 등록합니다.
-   * @returns PortOne에 등록된 주문 정보
-   */
-  export const prepareOneItemOrder = (client: ShopAPIClient) => (data: ShopSchemas.OneItemOrderRequest) =>
-    client.post<ShopSchemas.Order, ShopSchemas.OneItemOrderRequest>("v1/orders/single/", data);
-
-  /**
-   * 고객의 장바구니에 담긴 전체 상품 결제를 PortOne에 등록합니다.
-   * @returns PortOne에 등록된 주문 정보
-   */
-  export const prepareCartOrder = (client: ShopAPIClient) => (data: ShopSchemas.CustomerInfo) =>
-    client.post<ShopSchemas.Order, ShopSchemas.CustomerInfo>("v1/orders/", data);
-
-  /**
-   * 고객의 모든 결제 내역을 가져옵니다.
-   * @returns 고객의 모든 결제 내역
-   */
-  export const listOrders = (client: ShopAPIClient) => () => client.get<ShopSchemas.Order[]>("v1/orders/");
-
-  /**
-   * 결제 완료된 주문 내역에서 특정 상품을 환불 시도합니다.
-   */
-  export const refundOneItemFromOrder = (client: ShopAPIClient) => (data: ShopSchemas.OneItemRefundRequest) =>
-    client.delete<void>(`v1/orders/${data.order_id}/products/${data.order_product_relation_id}/`);
-
-  /**
-   * 결제 완료된 주문 내역을 환불 시도합니다.
-   */
-  export const refundAllItemsInOrder = (client: ShopAPIClient) => (data: { order_id: string }) => client.delete<void>(`v1/orders/${data.order_id}/`);
-
-  /**
-   * 결제 완료된 주문의 사용자 정의 응답용 상품 옵션을 수정합니다.
-   */
-  export const patchOrderOptions = (client: ShopAPIClient) => async (data: ShopSchemas.OrderOptionsPatchRequest) =>
-    client.patch<ShopSchemas.Order, ShopSchemas.OrderOptionsPatchRequest["options"]>(
-      `v1/orders/${data.order_id}/products/${data.order_product_relation_id}/options/`,
-      data.options
-    );
-
-  /**
-   * 후원자 목록을 가져옵니다.
-   */
-  export const listPatrons = (client: ShopAPIClient, year: number) => () => client.get<ShopSchemas.Patron[]>("v1/ext/patron/", { params: { year } });
-}
-
-export default ShopAPIs;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (_) {
+    return Promise.resolve(null);
+  }
+};
+
+/**
+ * 현재 사용자의 row 정보를 가져옵니다.
+ * @returns 로그인 정보
+ */
+export const retrieveUserRowInfo = (client: ShopAPIClient) => async () => client.get<UserRow>("v1/users/");
+
+/**
+ * 노출 중인 모든 상품의 목록을 가져옵니다.
+ * @returns 노출 중인 모든 상품의 목록
+ */
+export const listProducts = (client: ShopAPIClient) => (qs?: ProductListQueryParams) => client.get<Product[]>("v1/products/", { params: qs });
+
+/**
+ * 현재 사용자의 장바구니에 담긴 상품의 목록을 가져옵니다.
+ * @returns 현재 장바구니 상태
+ */
+export const retrieveCart = (client: ShopAPIClient) => () => client.get<Order | EmptyObject>("v1/orders/cart/");
+
+/**
+ * 장바구니에 상품을 추가합니다.
+ * @returns 현재 장바구니 상태
+ */
+export const appendItemToCart = (client: ShopAPIClient) => (data: CartItemAppendRequest) =>
+  client.post<Order, CartItemAppendRequest>("v1/orders/cart/products/", data);
+
+/**
+ * 장바구니에서 특정 상품을 제거합니다.
+ * @returns 현재 장바구니 상태
+ */
+export const removeItemFromCart = (client: ShopAPIClient) => (data: { cartProductId: string }) =>
+  client.delete<Order>(`v1/orders/cart/products/${data.cartProductId}/`);
+
+/**
+ * 단일 상품 즉시 결제를 PortOne에 등록합니다.
+ * @returns PortOne에 등록된 주문 정보
+ */
+export const prepareOneItemOrder = (client: ShopAPIClient) => (data: OneItemOrderRequest) =>
+  client.post<Order, OneItemOrderRequest>("v1/orders/single/", data);
+
+/**
+ * 고객의 장바구니에 담긴 전체 상품 결제를 PortOne에 등록합니다.
+ * @returns PortOne에 등록된 주문 정보
+ */
+export const prepareCartOrder = (client: ShopAPIClient) => (data: CustomerInfo) => client.post<Order, CustomerInfo>("v1/orders/", data);
+
+/**
+ * 고객의 모든 결제 내역을 가져옵니다.
+ * @returns 고객의 모든 결제 내역
+ */
+export const listOrders = (client: ShopAPIClient) => () => client.get<Order[]>("v1/orders/");
+
+/**
+ * 결제 완료된 주문 내역에서 특정 상품을 환불 시도합니다.
+ */
+export const refundOneItemFromOrder = (client: ShopAPIClient) => (data: OneItemRefundRequest) =>
+  client.delete<void>(`v1/orders/${data.order_id}/products/${data.order_product_relation_id}/`);
+
+/**
+ * 결제 완료된 주문 내역을 환불 시도합니다.
+ */
+export const refundAllItemsInOrder = (client: ShopAPIClient) => (data: { order_id: string }) => client.delete<void>(`v1/orders/${data.order_id}/`);
+
+/**
+ * 결제 완료된 주문의 사용자 정의 응답용 상품 옵션을 수정합니다.
+ */
+export const patchOrderOptions = (client: ShopAPIClient) => async (data: OrderOptionsPatchRequest) =>
+  client.patch<Order, OrderOptionsPatchRequest["options"]>(
+    `v1/orders/${data.order_id}/products/${data.order_product_relation_id}/options/`,
+    data.options
+  );
+
+/**
+ * 후원자 목록을 가져옵니다.
+ */
+export const listPatrons = (client: ShopAPIClient, year: number) => () => client.get<Patron[]>("v1/ext/patron/", { params: { year } });
diff --git a/packages/shop/src/components/common/customer_info_form_dialog.tsx b/packages/shop/src/components/common/customer_info_form_dialog.tsx
index 7a36234..64a3c28 100644
--- a/packages/shop/src/components/common/customer_info_form_dialog.tsx
+++ b/packages/shop/src/components/common/customer_info_form_dialog.tsx
@@ -1,31 +1,31 @@
-import * as Common from "@frontend/common";
+import { getFormValue, isFormValid } from "@frontend/common/utils";
 import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, Stack, TextField } from "@mui/material";
 import { Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, MouseEventHandler, useRef } from "react";
 
-import ShopHooks from "../../hooks";
-import ShopSchemas from "../../schemas";
+import { useShopClient, useShopContext, useUserStatus } from "@frontend/shop/hooks";
+import type { CustomerInfo } from "@frontend/shop/schemas";
 
 type CustomerInfoFormDialogPropsType = {
   open: boolean;
   closeFunc: () => void;
-  onSubmit?: (formData: ShopSchemas.CustomerInfo) => void;
-  defaultValue?: ShopSchemas.CustomerInfo | null;
+  onSubmit?: (formData: CustomerInfo) => void;
+  defaultValue?: CustomerInfo | null;
 };
 
-export const CustomerInfoFormDialog: React.FC<CustomerInfoFormDialogPropsType> = Suspense.with(
+export const CustomerInfoFormDialog: FC<CustomerInfoFormDialogPropsType> = Suspense.with(
   { fallback: <CircularProgress /> },
   ({ open, closeFunc, onSubmit, defaultValue }) => {
-    const formRef = React.useRef<HTMLFormElement | null>(null);
+    const formRef = useRef<HTMLFormElement | null>(null);
 
-    const { language } = ShopHooks.useShopContext();
-    const shopAPIClient = ShopHooks.useShopClient();
-    const { data: userInfo } = ShopHooks.useUserStatus(shopAPIClient);
+    const { language } = useShopContext();
+    const shopAPIClient = useShopClient();
+    const { data: userInfo } = useUserStatus(shopAPIClient);
 
-    const onSubmitFunc: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    const onSubmitFunc: MouseEventHandler<HTMLButtonElement> = (e) => {
       e.preventDefault();
       e.stopPropagation();
-      if (Common.Utils.isFormValid(formRef?.current)) onSubmit?.(Common.Utils.getFormValue<ShopSchemas.CustomerInfo>({ form: formRef.current }));
+      if (isFormValid(formRef?.current)) onSubmit?.(getFormValue<CustomerInfo>({ form: formRef.current }));
     };
 
     const titleStr = language === "ko" ? "고객 정보 입력" : "Customer Information";
diff --git a/packages/shop/src/components/common/index.ts b/packages/shop/src/components/common/index.ts
index 196a77d..5307246 100644
--- a/packages/shop/src/components/common/index.ts
+++ b/packages/shop/src/components/common/index.ts
@@ -1,19 +1,6 @@
-import { CustomerInfoFormDialog as CustomerInfoFormDialog_ } from "./customer_info_form_dialog";
-import { OptionGroupInput as OptionGroupInput_, OrderProductRelationOptionInput as OrderProductRelationOptionInput_ } from "./option_group_input";
-import { PriceDisplay as PriceDisplay_ } from "./price_display";
-import { ShopContextProvider as ShopContextProvider_ } from "./shop_context";
-import { SignInGuard as SignInGuard_ } from "./signin_guard";
-import { UserSignInAccount as UserSignInAccount_, UserSignInMethod as UserSignInMethod_ } from "./user_ident";
-
-namespace CommonComponents {
-  export const ShopContextProvider = ShopContextProvider_;
-  export const OptionGroupInput = OptionGroupInput_;
-  export const OrderProductRelationOptionInput = OrderProductRelationOptionInput_;
-  export const PriceDisplay = PriceDisplay_;
-  export const SignInGuard = SignInGuard_;
-  export const CustomerInfoFormDialog = CustomerInfoFormDialog_;
-  export const UserSignInMethod = UserSignInMethod_;
-  export const UserSignInAccount = UserSignInAccount_;
-}
-
-export default CommonComponents;
+export { CustomerInfoFormDialog } from "./customer_info_form_dialog";
+export { OptionGroupInput, OrderProductRelationOptionInput } from "./option_group_input";
+export { PriceDisplay } from "./price_display";
+export { ShopContextProvider } from "./shop_context";
+export { SignInGuard } from "./signin_guard";
+export { UserSignInAccount, UserSignInMethod } from "./user_ident";
diff --git a/packages/shop/src/components/common/option_group_input.tsx b/packages/shop/src/components/common/option_group_input.tsx
index d3782e0..7650919 100644
--- a/packages/shop/src/components/common/option_group_input.tsx
+++ b/packages/shop/src/components/common/option_group_input.tsx
@@ -1,13 +1,14 @@
 import { CircularProgress, FormControl, InputLabel, MenuItem, Select, TextField, Tooltip } from "@mui/material";
 import { Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC } from "react";
 import { Control, Controller, FieldValues } from "react-hook-form";
-import * as R from "remeda";
+import { isEmpty, isNonNull, isNumber, isString } from "remeda";
+
+import { useShopContext } from "@frontend/shop/hooks";
+import type { Option, OrderProductItem } from "@frontend/shop/schemas";
+import { getCustomResponsePattern, isOrderProductOptionModifiable } from "@frontend/shop/utils";
 
 import { PriceDisplay } from "./price_display";
-import ShopHooks from "../../hooks";
-import ShopSchemas from "../../schemas";
-import ShopAPIUtil from "../../utils";
 
 type CommonOptionGroupType = {
   id: string;
@@ -23,11 +24,11 @@ type CustomResponseOptionGroupType = CommonOptionGroupType & {
 };
 type OptionGroupType = SelectableOptionGroupType | CustomResponseOptionGroupType;
 
-type SimplifiedOption = Pick<ShopSchemas.Option, "id" | "name" | "additional_price" | "leftover_stock">;
+type SimplifiedOption = Pick<Option, "id" | "name" | "additional_price" | "leftover_stock">;
 
-const isFilledString = (str: unknown): str is string => R.isString(str) && !R.isEmpty(str);
+const isFilledString = (str: unknown): str is string => isString(str) && !isEmpty(str);
 
-const SelectableOptionGroupInput: React.FC<{
+const SelectableOptionGroupInput: FC<{
   language: "ko" | "en";
   optionGroup: SelectableOptionGroupType;
   options: SimplifiedOption[];
@@ -37,7 +38,7 @@ const SelectableOptionGroupInput: React.FC<{
   control: Control<FieldValues, unknown, FieldValues>;
 }> = ({ language, optionGroup, options, defaultValue, disabled, disabledReason, control }) => {
   const optionElements = options.map((option) => {
-    const isOptionOutOfStock = R.isNumber(option.leftover_stock) && option.leftover_stock <= 0;
+    const isOptionOutOfStock = isNumber(option.leftover_stock) && option.leftover_stock <= 0;
 
     return (
       <MenuItem key={option.id} value={option.id} disabled={disabled || isOptionOutOfStock}>
@@ -70,7 +71,7 @@ const SelectableOptionGroupInput: React.FC<{
   return isFilledString(disabledReason) ? <Tooltip title={disabledReason}>{selectElement}</Tooltip> : selectElement;
 };
 
-const CustomResponseOptionGroupInput: React.FC<{
+const CustomResponseOptionGroupInput: FC<{
   optionGroup: CustomResponseOptionGroupType;
   defaultValue?: string;
   disabled?: boolean;
@@ -81,7 +82,7 @@ const CustomResponseOptionGroupInput: React.FC<{
     <Controller
       control={control}
       name={optionGroup.id}
-      rules={{ pattern: ShopAPIUtil.getCustomResponsePattern(optionGroup), required: true }}
+      rules={{ pattern: getCustomResponsePattern(optionGroup), required: true }}
       disabled={disabled}
       defaultValue={defaultValue || ""}
       render={({ field, formState: { errors } }) => {
@@ -94,7 +95,7 @@ const CustomResponseOptionGroupInput: React.FC<{
   return isFilledString(disabledReason) ? <Tooltip title={disabledReason}>{textFieldElement}</Tooltip> : textFieldElement;
 };
 
-export const OptionGroupInput: React.FC<{
+export const OptionGroupInput: FC<{
   language?: "ko" | "en";
   optionGroup: OptionGroupType;
   options: SimplifiedOption[];
@@ -125,13 +126,13 @@ export const OptionGroupInput: React.FC<{
     />
   );
 
-export const OrderProductRelationOptionInput: React.FC<{
-  optionRel: ShopSchemas.OrderProductItem["options"][number];
+export const OrderProductRelationOptionInput: FC<{
+  optionRel: OrderProductItem["options"][number];
   disabled?: boolean;
   disabledReason?: string;
   control: Control<FieldValues, unknown, FieldValues>;
 }> = Suspense.with({ fallback: <CircularProgress /> }, ({ optionRel, disabled, disabledReason, control }) => {
-  const { language } = ShopHooks.useShopContext();
+  const { language } = useShopContext();
   let defaultValue: string | null = null;
   let guessedDisabledReason: string | undefined = undefined;
   let dummyOptions: {
@@ -142,7 +143,7 @@ export const OrderProductRelationOptionInput: React.FC<{
   }[] = [];
 
   // type hinting을 위해 if문을 사용함
-  if (optionRel.product_option_group.is_custom_response === false && R.isNonNull(optionRel.product_option)) {
+  if (optionRel.product_option_group.is_custom_response === false && isNonNull(optionRel.product_option)) {
     defaultValue = optionRel.product_option.id;
     guessedDisabledReason =
       language === "ko" ? "추가 비용이 발생하는 옵션은 수정할 수 없어요." : "You cannot modify options that incur additional costs.";
@@ -164,7 +165,7 @@ export const OrderProductRelationOptionInput: React.FC<{
       optionGroup={optionRel.product_option_group}
       options={dummyOptions}
       defaultValue={defaultValue || undefined}
-      disabled={disabled || !ShopAPIUtil.isOrderProductOptionModifiable(optionRel)}
+      disabled={disabled || !isOrderProductOptionModifiable(optionRel)}
       disabledReason={disabledReason || guessedDisabledReason}
       control={control}
     />
diff --git a/packages/shop/src/components/common/price_display.tsx b/packages/shop/src/components/common/price_display.tsx
index 7cb6afe..547d139 100644
--- a/packages/shop/src/components/common/price_display.tsx
+++ b/packages/shop/src/components/common/price_display.tsx
@@ -1,11 +1,11 @@
 import { CircularProgress } from "@mui/material";
 import { Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC } from "react";
 
-import ShopHooks from "../../hooks";
+import { useShopContext } from "@frontend/shop/hooks";
 
-export const PriceDisplay: React.FC<{ price: number; label?: string }> = Suspense.with({ fallback: <CircularProgress /> }, ({ price, label }) => {
-  const { language } = ShopHooks.useShopContext();
+export const PriceDisplay: FC<{ price: number; label?: string }> = Suspense.with({ fallback: <CircularProgress /> }, ({ price, label }) => {
+  const { language } = useShopContext();
   const priceStr = language === "ko" ? "원" : "KRW";
   return <>{(label ? `${label} : ` : "") + price.toLocaleString() + priceStr}</>;
 });
diff --git a/packages/shop/src/components/common/shop_context.tsx b/packages/shop/src/components/common/shop_context.tsx
index a5987c7..4c9d078 100644
--- a/packages/shop/src/components/common/shop_context.tsx
+++ b/packages/shop/src/components/common/shop_context.tsx
@@ -1,12 +1,10 @@
-import * as React from "react";
+import { FC, ReactNode } from "react";
 
-import ShopContext from "../../contexts";
+import { context, type ContextOptions } from "@frontend/shop/contexts";
 
 type ShopContextProps = {
-  options: ShopContext.ContextOptions;
-  children: React.ReactNode;
+  options: ContextOptions;
+  children: ReactNode;
 };
 
-export const ShopContextProvider: React.FC<ShopContextProps> = (props) => (
-  <ShopContext.context.Provider value={props.options}>{props.children}</ShopContext.context.Provider>
-);
+export const ShopContextProvider: FC<ShopContextProps> = (props) => <context.Provider value={props.options}>{props.children}</context.Provider>;
diff --git a/packages/shop/src/components/common/signin_guard.tsx b/packages/shop/src/components/common/signin_guard.tsx
index 07cefc3..b4d56d9 100644
--- a/packages/shop/src/components/common/signin_guard.tsx
+++ b/packages/shop/src/components/common/signin_guard.tsx
@@ -1,18 +1,18 @@
 import { CircularProgress, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, ReactNode } from "react";
 
-import ShopHooks from "../../hooks";
+import { useShopClient, useShopContext, useUserStatus } from "@frontend/shop/hooks";
 
 type SignInGuardProps = {
-  children: React.ReactNode;
-  fallback?: React.ReactNode;
+  children: ReactNode;
+  fallback?: ReactNode;
 };
 
-export const SignInGuard: React.FC<SignInGuardProps> = Suspense.with({ fallback: <CircularProgress /> }, ({ children, fallback }) => {
-  const { language } = ShopHooks.useShopContext();
-  const shopAPIClient = ShopHooks.useShopClient();
-  const { data } = ShopHooks.useUserStatus(shopAPIClient);
+export const SignInGuard: FC<SignInGuardProps> = Suspense.with({ fallback: <CircularProgress /> }, ({ children, fallback }) => {
+  const { language } = useShopContext();
+  const shopAPIClient = useShopClient();
+  const { data } = useUserStatus(shopAPIClient);
 
   const errorFallbackStr =
     language === "ko"
diff --git a/packages/shop/src/components/common/user_ident.tsx b/packages/shop/src/components/common/user_ident.tsx
index 88f4931..9cd512c 100644
--- a/packages/shop/src/components/common/user_ident.tsx
+++ b/packages/shop/src/components/common/user_ident.tsx
@@ -1,9 +1,9 @@
 import { CircularProgress } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
-import * as R from "remeda";
+import { FC } from "react";
+import { isArray, isEmpty } from "remeda";
 
-import ShopHooks from "../../hooks";
+import { useShopClient, useShopContext, useUserStatus } from "@frontend/shop/hooks";
 
 const ProviderTranslation: Record<string, { ko: string; en: string }> = {
   google: { ko: "구글", en: "Google" },
@@ -11,23 +11,23 @@ const ProviderTranslation: Record<string, { ko: string; en: string }> = {
   naver: { ko: "네이버", en: "Naver" },
 };
 
-const ErrorBoundariedText: React.FC<{ ko: string; en: string }> = (props) => {
-  const { language } = ShopHooks.useShopContext();
+const ErrorBoundariedText: FC<{ ko: string; en: string }> = (props) => {
+  const { language } = useShopContext();
   return props[language];
 };
 
-export const UserSignInMethod: React.FC = ErrorBoundary.with(
+export const UserSignInMethod: FC = ErrorBoundary.with(
   { fallback: <ErrorBoundariedText ko="손님" en="Guest" /> },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
-    const { language } = ShopHooks.useShopContext();
-    const shopAPIClient = ShopHooks.useShopClient();
-    const { data } = ShopHooks.useUserStatus(shopAPIClient);
+    const { language } = useShopContext();
+    const shopAPIClient = useShopClient();
+    const { data } = useUserStatus(shopAPIClient);
 
     const notSignedInStr = language === "ko" ? "손님" : "Guest";
     const directSignInStr = language === "ko" ? "계정 로그인" : "Direct Sign-in";
 
     if (!data?.meta?.is_authenticated) return notSignedInStr;
-    if (!R.isArray(data.data.methods) || R.isEmpty(data.data.methods)) return directSignInStr;
+    if (!isArray(data.data.methods) || isEmpty(data.data.methods)) return directSignInStr;
 
     const signInMethod = data.data.methods[0];
     return signInMethod.method === "socialaccount"
@@ -36,12 +36,12 @@ export const UserSignInMethod: React.FC = ErrorBoundary.with(
   })
 );
 
-export const UserSignInAccount: React.FC = ErrorBoundary.with(
+export const UserSignInAccount: FC = ErrorBoundary.with(
   { fallback: <ErrorBoundariedText ko="로그아웃됨" en="Signed-out" /> },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
-    const { language } = ShopHooks.useShopContext();
-    const shopAPIClient = ShopHooks.useShopClient();
-    const { data } = ShopHooks.useUserStatus(shopAPIClient);
+    const { language } = useShopContext();
+    const shopAPIClient = useShopClient();
+    const { data } = useUserStatus(shopAPIClient);
 
     const notSignedInStr = language === "ko" ? "로그아웃됨" : "Signed-out";
     return data?.meta?.is_authenticated ? data.data.user.email : notSignedInStr;
diff --git a/packages/shop/src/components/features/cart.tsx b/packages/shop/src/components/features/cart.tsx
index ae51d59..fae1819 100644
--- a/packages/shop/src/components/features/cart.tsx
+++ b/packages/shop/src/components/features/cart.tsx
@@ -1,23 +1,23 @@
-import * as Common from "@frontend/common";
+import { OneDetailsOpener, PrimaryStyledDetails } from "@frontend/common/components/mdx_components";
 import { AccordionProps, Backdrop, Button, CircularProgress, Divider, Stack, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
+import { FC, ReactNode, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
-import * as R from "remeda";
+import { isArray } from "remeda";
 
-import { ShopAPIClientError } from "../../apis/client";
-import ShopHooks from "../../hooks";
-import ShopSchemas from "../../schemas";
-import ShopUtils from "../../utils";
-import CommonComponents from "../common";
+import { ShopAPIClientError } from "@frontend/shop/apis/client";
+import { CustomerInfoFormDialog, OrderProductRelationOptionInput, PriceDisplay, SignInGuard } from "@frontend/shop/components/common";
+import { useCart, usePrepareCartOrderMutation, useRemoveItemFromCartMutation, useShopClient, useShopContext } from "@frontend/shop/hooks";
+import type { CustomerInfo, Order, OrderProductItem } from "@frontend/shop/schemas";
+import { startPortOnePurchase } from "@frontend/shop/utils";
 
-const CartItem: React.FC<
+const CartItem: FC<
   Omit<AccordionProps, "children"> & {
     language: "ko" | "en";
-    cartProdRel: ShopSchemas.OrderProductItem;
+    cartProdRel: OrderProductItem;
     removeItemFromCartFunc: (cartProductId: string) => void;
     disabled?: boolean;
   }
@@ -31,7 +31,7 @@ const CartItem: React.FC<
   const removeFromCartStr = language === "ko" ? "장바구니에서 상품 삭제" : "Remove from Cart";
 
   return (
-    <Common.Components.MDX.PrimaryStyledDetails
+    <PrimaryStyledDetails
       {...props}
       summary={cartProdRel.product.name}
       actions={[
@@ -46,7 +46,7 @@ const CartItem: React.FC<
     >
       <Stack spacing={2} sx={{ width: "100%" }}>
         {cartProdRel.options.map((optionRel) => (
-          <CommonComponents.OrderProductRelationOptionInput
+          <OrderProductRelationOptionInput
             key={optionRel.product_option_group.id + (optionRel.product_option?.id || "")}
             optionRel={optionRel}
             disabled
@@ -59,9 +59,9 @@ const CartItem: React.FC<
       <Divider />
       <br />
       <Typography variant="h6" sx={{ textAlign: "end" }}>
-        {productPriceStr}: <CommonComponents.PriceDisplay price={cartProdRel.price + cartProdRel.donation_price} />
+        {productPriceStr}: <PriceDisplay price={cartProdRel.price + cartProdRel.donation_price} />
       </Typography>
-    </Common.Components.MDX.PrimaryStyledDetails>
+    </PrimaryStyledDetails>
   );
 };
 
@@ -70,19 +70,19 @@ type CartStatusStateType = {
   openBackdrop: boolean;
 };
 
-export const CartStatus: React.FC = Suspense.with({ fallback: <CircularProgress /> }, () => {
+export const CartStatus: FC = Suspense.with({ fallback: <CircularProgress /> }, () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const { language, shopImpAccountId } = ShopHooks.useShopContext();
-  const shopAPIClient = ShopHooks.useShopClient();
-  const cartOrderStartMutation = ShopHooks.usePrepareCartOrderMutation(shopAPIClient);
-  const removeItemFromCartMutation = ShopHooks.useRemoveItemFromCartMutation(shopAPIClient);
-  const [state, setState] = React.useState<CartStatusStateType>({
+  const { language, shopImpAccountId } = useShopContext();
+  const shopAPIClient = useShopClient();
+  const cartOrderStartMutation = usePrepareCartOrderMutation(shopAPIClient);
+  const removeItemFromCartMutation = useRemoveItemFromCartMutation(shopAPIClient);
+  const [state, setState] = useState<CartStatusStateType>({
     openDialog: false,
     openBackdrop: false,
   });
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const cartIsEmptyStr = language === "ko" ? "장바구니가 비어있어요!" : "Your cart is empty!";
@@ -114,12 +114,12 @@ export const CartStatus: React.FC = Suspense.with({ fallback: <CircularProgress
   const openBackdrop = () => setState((ps) => ({ ...ps, openBackdrop: true }));
   const closeBackdrop = () => setState((ps) => ({ ...ps, openBackdrop: false }));
 
-  const onFormSubmit = (formData: ShopSchemas.CustomerInfo) => {
+  const onFormSubmit = (formData: CustomerInfo) => {
     closeDialog();
     openBackdrop();
     cartOrderStartMutation.mutate(formData, {
-      onSuccess: (order: ShopSchemas.Order) => {
-        ShopUtils.startPortOnePurchase(
+      onSuccess: (order: Order) => {
+        startPortOnePurchase(
           shopImpAccountId,
           order,
           () => {
@@ -141,33 +141,28 @@ export const CartStatus: React.FC = Suspense.with({ fallback: <CircularProgress
 
   const disabled = removeItemFromCartMutation.isPending || cartOrderStartMutation.isPending;
 
-  const WrappedShopCartList: React.FC = () => {
-    const { data } = ShopHooks.useCart(shopAPIClient);
+  const WrappedShopCartList: FC = () => {
+    const { data } = useCart(shopAPIClient);
 
-    return !R.isArray(data.products) || data.products.length === 0 ? (
+    return !isArray(data.products) || data.products.length === 0 ? (
       <Typography variant="body1" color="error">
         {cartIsEmptyStr}
       </Typography>
     ) : (
       <>
         <Backdrop sx={(theme) => ({ zIndex: theme.zIndex.drawer + 1 })} open={state.openBackdrop} onClick={() => {}} />
-        <CommonComponents.CustomerInfoFormDialog
-          open={state.openDialog}
-          closeFunc={closeDialog}
-          onSubmit={onFormSubmit}
-          defaultValue={data.customer_info}
-        />
+        <CustomerInfoFormDialog open={state.openDialog} closeFunc={closeDialog} onSubmit={onFormSubmit} defaultValue={data.customer_info} />
         <Stack spacing={2}>
-          <Common.Components.MDX.OneDetailsOpener>
+          <OneDetailsOpener>
             {data.products.map((prodRel) => (
               <CartItem language={language} key={prodRel.id} cartProdRel={prodRel} disabled={disabled} removeItemFromCartFunc={removeItemFromCart} />
             ))}
-          </Common.Components.MDX.OneDetailsOpener>
+          </OneDetailsOpener>
         </Stack>
         <br />
         <Divider />
         <Typography variant="h6" sx={{ textAlign: "end" }}>
-          {totalPriceStr}: <CommonComponents.PriceDisplay price={data.first_paid_price} />
+          {totalPriceStr}: <PriceDisplay price={data.first_paid_price} />
         </Typography>
         <Button variant="contained" color="secondary" onClick={openDialog} disabled={disabled}>
           {orderCartStr}
@@ -177,12 +172,12 @@ export const CartStatus: React.FC = Suspense.with({ fallback: <CircularProgress
   };
 
   return (
-    <CommonComponents.SignInGuard>
+    <SignInGuard>
       <ErrorBoundary fallback={errorWhileLoadingCartStr}>
         <Suspense fallback={<CircularProgress />}>
           <WrappedShopCartList />
         </Suspense>
       </ErrorBoundary>
-    </CommonComponents.SignInGuard>
+    </SignInGuard>
   );
 });
diff --git a/packages/shop/src/components/features/index.ts b/packages/shop/src/components/features/index.ts
index f592fd8..fa3d343 100644
--- a/packages/shop/src/components/features/index.ts
+++ b/packages/shop/src/components/features/index.ts
@@ -1,16 +1,5 @@
-import { CartStatus as CartStatus_ } from "./cart";
-import { OrderList as OrderList_ } from "./order";
-import { PatronList as PatronList_ } from "./patron_list";
-import { ProductImageCardList as ProductImageCardList_, ProductList as ProductList_ } from "./product";
-import { UserInfo as UserInfo_ } from "./user_status";
-
-namespace FeatureComponents {
-  export const CartStatus = CartStatus_;
-  export const OrderList = OrderList_;
-  export const ProductList = ProductList_;
-  export const ProductImageCardList = ProductImageCardList_;
-  export const UserInfo = UserInfo_;
-  export const PatronList = PatronList_;
-}
-
-export default FeatureComponents;
+export { CartStatus } from "./cart";
+export { OrderList } from "./order";
+export { PatronList } from "./patron_list";
+export { ProductImageCardList, ProductList } from "./product";
+export { UserInfo } from "./user_status";
diff --git a/packages/shop/src/components/features/order.tsx b/packages/shop/src/components/features/order.tsx
index 6cdb4f5..1de9786 100644
--- a/packages/shop/src/components/features/order.tsx
+++ b/packages/shop/src/components/features/order.tsx
@@ -1,4 +1,4 @@
-import * as Common from "@frontend/common";
+import { OneDetailsOpener, PrimaryStyledDetails } from "@frontend/common/components/mdx_components";
 import {
   AccordionProps,
   Button,
@@ -14,17 +14,24 @@ import {
 } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
+import { FC, ReactNode } from "react";
 import { useForm } from "react-hook-form";
-import * as R from "remeda";
+import { isNullish } from "remeda";
 
-import ShopHooks from "../../hooks";
-import ShopSchemas from "../../schemas";
-import ShopUtils from "../../utils";
-import CommonComponents from "../common";
+import { OrderProductRelationOptionInput, PriceDisplay, SignInGuard } from "@frontend/shop/components/common";
+import {
+  useOneItemRefundMutation,
+  useOptionsOfOneItemInOrderPatchMutation,
+  useOrderRefundMutation,
+  useOrders,
+  useShopClient,
+  useShopContext,
+} from "@frontend/shop/hooks";
+import type { Order, OrderOptionsPatchRequest, OrderProductItem, PaymentHistoryStatus } from "@frontend/shop/schemas";
+import { isOrderProductOptionModifiable } from "@frontend/shop/utils";
 
 const PaymentHistoryStatusKo: {
-  [k in ShopSchemas.PaymentHistoryStatus]: string;
+  [k in PaymentHistoryStatus]: string;
 } = {
   pending: "결제 대기중",
   completed: "결제 완료",
@@ -33,7 +40,7 @@ const PaymentHistoryStatusKo: {
 };
 
 const PaymentHistoryStatusEn: {
-  [k in ShopSchemas.PaymentHistoryStatus]: string;
+  [k in PaymentHistoryStatus]: string;
 } = {
   pending: "Pending",
   completed: "Completed",
@@ -43,14 +50,14 @@ const PaymentHistoryStatusEn: {
 
 type OrderProductRelationItemProps = Omit<AccordionProps, "children"> & {
   language: "ko" | "en";
-  order: ShopSchemas.Order;
-  prodRel: ShopSchemas.OrderProductItem;
+  order: Order;
+  prodRel: OrderProductItem;
   isPending: boolean;
-  oneItemRefundMutation: ReturnType<typeof ShopHooks.useOneItemRefundMutation>;
-  optionsOfOneItemInOrderPatchMutation: ReturnType<typeof ShopHooks.useOptionsOfOneItemInOrderPatchMutation>;
+  oneItemRefundMutation: ReturnType<typeof useOneItemRefundMutation>;
+  optionsOfOneItemInOrderPatchMutation: ReturnType<typeof useOptionsOfOneItemInOrderPatchMutation>;
 };
 
-const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
+const OrderProductRelationItem: FC<OrderProductRelationItemProps> = ({
   language,
   order,
   prodRel,
@@ -61,7 +68,7 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
 }) => {
   const { control, handleSubmit, getValues } = useForm<Record<string, string>>();
   const currentCustomOptionValues: { [k: string]: string } = prodRel.options
-    .filter((optionRel) => ShopUtils.isOrderProductOptionModifiable(optionRel))
+    .filter((optionRel) => isOrderProductOptionModifiable(optionRel))
     .reduce(
       (acc, optionRel) => ({
         ...acc,
@@ -70,7 +77,7 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
       {}
     );
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const hasPatchableOption = Object.entries(currentCustomOptionValues).length > 0;
@@ -90,8 +97,8 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
       ? "옵션 수정 중 문제가 발생했습니다,\n잠시 후 다시 시도해주세요."
       : "An error occurred while modifying the options,\nplease try again later.";
 
-  const refundBtnDisabled = isPending || !R.isNullish(prodRel.not_refundable_reason);
-  const refundBtnText = R.isNullish(prodRel.not_refundable_reason)
+  const refundBtnDisabled = isPending || !isNullish(prodRel.not_refundable_reason);
+  const refundBtnText = isNullish(prodRel.not_refundable_reason)
     ? refundOneProductStr
     : prodRel.status === "refunded"
       ? refundedStr
@@ -110,7 +117,7 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
     );
   const patchOneItemOptions = () => {
     const formValues = getValues();
-    const modifiedCustomOptionValues: ShopSchemas.OrderOptionsPatchRequest["options"] = Object.entries(formValues)
+    const modifiedCustomOptionValues: OrderOptionsPatchRequest["options"] = Object.entries(formValues)
       .map(([key, value]) => {
         // 여기서 key는 order_product_option_relation의 id가 아니라 product_option_group의 id이므로, order_product_option_relation의 id로 변경해야 함
         const optionRel = prodRel.options.find((option) => option.product_option_group.id === key);
@@ -155,16 +162,11 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
   );
 
   return (
-    <Common.Components.MDX.PrimaryStyledDetails
-      {...props}
-      key={prodRel.id}
-      summary={<Typography variant="h6">{prodRel.product.name}</Typography>}
-      actions={actionButtons}
-    >
+    <PrimaryStyledDetails {...props} key={prodRel.id} summary={<Typography variant="h6">{prodRel.product.name}</Typography>} actions={actionButtons}>
       <form onSubmit={handleSubmit(() => {})}>
         <Stack spacing={2} sx={{ width: "100%" }}>
           {prodRel.options.map((optionRel) => (
-            <CommonComponents.OrderProductRelationOptionInput
+            <OrderProductRelationOptionInput
               key={optionRel.product_option_group.id + (optionRel.product_option?.id || "")}
               optionRel={optionRel}
               disabled={isPending}
@@ -173,20 +175,20 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
           ))}
         </Stack>
       </form>
-    </Common.Components.MDX.PrimaryStyledDetails>
+    </PrimaryStyledDetails>
   );
 };
 
-type OrderItemProps = Omit<AccordionProps, "children"> & { order: ShopSchemas.Order; disabled?: boolean };
+type OrderItemProps = Omit<AccordionProps, "children"> & { order: Order; disabled?: boolean };
 
-const OrderItem: React.FC<OrderItemProps> = ({ order, disabled, ...props }) => {
-  const { language, shopApiDomain } = ShopHooks.useShopContext();
-  const shopAPIClient = ShopHooks.useShopClient();
-  const orderRefundMutation = ShopHooks.useOrderRefundMutation(shopAPIClient);
-  const oneItemRefundMutation = ShopHooks.useOneItemRefundMutation(shopAPIClient);
-  const optionsOfOneItemInOrderPatchMutation = ShopHooks.useOptionsOfOneItemInOrderPatchMutation(shopAPIClient);
+const OrderItem: FC<OrderItemProps> = ({ order, disabled, ...props }) => {
+  const { language, shopApiDomain } = useShopContext();
+  const shopAPIClient = useShopClient();
+  const orderRefundMutation = useOrderRefundMutation(shopAPIClient);
+  const oneItemRefundMutation = useOneItemRefundMutation(shopAPIClient);
+  const optionsOfOneItemInOrderPatchMutation = useOptionsOfOneItemInOrderPatchMutation(shopAPIClient);
 
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const PaymentHistoryStatus = language === "ko" ? PaymentHistoryStatusKo : PaymentHistoryStatusEn;
@@ -213,9 +215,9 @@ const OrderItem: React.FC<OrderItemProps> = ({ order, disabled, ...props }) => {
   const openReceipt = () => window.open(`${shopApiDomain}/v1/orders/${order.id}/receipt/`, "_blank");
 
   const isPending = disabled || orderRefundMutation.isPending || oneItemRefundMutation.isPending || optionsOfOneItemInOrderPatchMutation.isPending;
-  const refundBtnDisabled = isPending || !R.isNullish(order.not_fully_refundable_reason);
+  const refundBtnDisabled = isPending || !isNullish(order.not_fully_refundable_reason);
   const receipyBtnDisabled = isPending || order.current_status === "pending";
-  const btnText = R.isNullish(order.not_fully_refundable_reason)
+  const btnText = isNullish(order.not_fully_refundable_reason)
     ? refundFullOrderStr
     : order.current_status === "refunded"
       ? orderFullyRefundedStr
@@ -235,7 +237,7 @@ const OrderItem: React.FC<OrderItemProps> = ({ order, disabled, ...props }) => {
   );
 
   return (
-    <Common.Components.MDX.PrimaryStyledDetails {...props} summary={order.name} actions={actionButtons}>
+    <PrimaryStyledDetails {...props} summary={order.name} actions={actionButtons}>
       <Table>
         <TableHead>
           <TableRow>
@@ -249,7 +251,7 @@ const OrderItem: React.FC<OrderItemProps> = ({ order, disabled, ...props }) => {
           </TableRow>
           <TableRow>
             <TableCell children={orderedPriceStr} />
-            <TableCell children={<CommonComponents.PriceDisplay price={order.first_paid_price} />} />
+            <TableCell children={<PriceDisplay price={order.first_paid_price} />} />
           </TableRow>
           <TableRow>
             <TableCell children={statusStr} />
@@ -284,7 +286,7 @@ const OrderItem: React.FC<OrderItemProps> = ({ order, disabled, ...props }) => {
       <Typography variant="h6">{productsInOrderStr}</Typography>
       <br />
       <Stack spacing={2}>
-        <Common.Components.MDX.OneDetailsOpener>
+        <OneDetailsOpener>
           {order.products.map((prodRel) => (
             <OrderProductRelationItem
               key={prodRel.id}
@@ -296,30 +298,30 @@ const OrderItem: React.FC<OrderItemProps> = ({ order, disabled, ...props }) => {
               optionsOfOneItemInOrderPatchMutation={optionsOfOneItemInOrderPatchMutation}
             />
           ))}
-        </Common.Components.MDX.OneDetailsOpener>
+        </OneDetailsOpener>
       </Stack>
       <br />
       <Divider />
-    </Common.Components.MDX.PrimaryStyledDetails>
+    </PrimaryStyledDetails>
   );
 };
 
-export const OrderList: React.FC = () => {
-  const WrappedOrderList: React.FC = () => {
-    const shopAPIClient = ShopHooks.useShopClient();
-    const { data } = ShopHooks.useOrders(shopAPIClient);
+export const OrderList: FC = () => {
+  const WrappedOrderList: FC = () => {
+    const shopAPIClient = useShopClient();
+    const { data } = useOrders(shopAPIClient);
 
     return (
-      <Common.Components.MDX.OneDetailsOpener>
+      <OneDetailsOpener>
         {data.map((item) => (
           <OrderItem key={item.id} order={item} />
         ))}
-      </Common.Components.MDX.OneDetailsOpener>
+      </OneDetailsOpener>
     );
   };
 
   return (
-    <CommonComponents.SignInGuard>
+    <SignInGuard>
       <ErrorBoundary fallback={<div>주문 내역을 불러오는 중 문제가 발생했습니다.</div>}>
         <Suspense fallback={<CircularProgress />}>
           <Stack spacing={2}>
@@ -327,6 +329,6 @@ export const OrderList: React.FC = () => {
           </Stack>
         </Suspense>
       </ErrorBoundary>
-    </CommonComponents.SignInGuard>
+    </SignInGuard>
   );
 };
diff --git a/packages/shop/src/components/features/patron_list.tsx b/packages/shop/src/components/features/patron_list.tsx
index e45313d..93ee9ed 100644
--- a/packages/shop/src/components/features/patron_list.tsx
+++ b/packages/shop/src/components/features/patron_list.tsx
@@ -1,24 +1,24 @@
-import * as Common from "@frontend/common";
+import { AutoTextLinking } from "@frontend/common/components";
 import { CircularProgress, Stack, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC } from "react";
 
-import ShopHooks from "../../hooks";
+import { usePatrons, useShopClient } from "@frontend/shop/hooks";
 
-const InnerPatronList: React.FC<{ year: number }> = ErrorBoundary.with(
+const InnerPatronList: FC<{ year: number }> = ErrorBoundary.with(
   { fallback: <>개인후원자 목록을 불러오는 중 문제가 발생했습니다.</> },
   Suspense.with({ fallback: <CircularProgress /> }, ({ year }) => {
-    const shopAPIClient = ShopHooks.useShopClient();
-    const { data } = ShopHooks.usePatrons(shopAPIClient, year);
+    const shopAPIClient = useShopClient();
+    const { data } = usePatrons(shopAPIClient, year);
     return data.map((patron) => (
       <Stack key={patron.name} spacing={1} sx={{ my: 2 }}>
         <Typography variant="h5" sx={(theme) => ({ fontWeight: 400, color: theme.palette.primary.dark })} children={patron.name} />
         <Typography variant="subtitle1" sx={(theme) => ({ a: { color: theme.palette.primary.main }, whiteSpace: "pre-wrap" })}>
-          <Common.Components.AutoTextLinking children={patron.contribution_message.replace("\\n", "\n") || "Weave with Python!"} />
+          <AutoTextLinking children={patron.contribution_message.replace("\\n", "\n") || "Weave with Python!"} />
         </Typography>
       </Stack>
     ));
   })
 );
 
-export const PatronList: React.FC<{ year: number }> = ({ year }) => <Stack children={<InnerPatronList year={year} />} />;
+export const PatronList: FC<{ year: number }> = ({ year }) => <Stack children={<InnerPatronList year={year} />} />;
diff --git a/packages/shop/src/components/features/product.tsx b/packages/shop/src/components/features/product.tsx
index cc41591..0745254 100644
--- a/packages/shop/src/components/features/product.tsx
+++ b/packages/shop/src/components/features/product.tsx
@@ -1,4 +1,6 @@
-import * as Common from "@frontend/common";
+import { FallbackImage, MDXRenderer } from "@frontend/common/components";
+import { OneDetailsOpener, PrimaryStyledDetails } from "@frontend/common/components/mdx_components";
+import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
 import { Close } from "@mui/icons-material";
 import {
   AccordionProps,
@@ -25,18 +27,18 @@ import {
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { enqueueSnackbar, OptionsObject } from "notistack";
-import * as React from "react";
+import { FC, FocusEventHandler, PropsWithChildren, ReactNode, useEffect, useReducer, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
-import * as R from "remeda";
+import { isEmpty, isNullish, isNumber, isString } from "remeda";
 
-import { ShopAPIClientError } from "../../apis/client";
-import ShopHooks from "../../hooks";
-import ShopSchemas from "../../schemas";
-import ShopUtils from "../../utils";
-import CommonComponents from "../common";
+import { ShopAPIClientError } from "@frontend/shop/apis/client";
+import { CustomerInfoFormDialog, OptionGroupInput, PriceDisplay, SignInGuard } from "@frontend/shop/components/common";
+import { useAddItemToCartMutation, usePrepareOneItemOrderMutation, useProducts, useShopClient, useShopContext } from "@frontend/shop/hooks";
+import type { CartItemAppendRequest, CustomerInfo, Order, Product, ProductListQueryParams } from "@frontend/shop/schemas";
+import { startPortOnePurchase } from "@frontend/shop/utils";
 
-const getCartAppendRequestPayload = (product: ShopSchemas.Product, formValue: { [key: string]: string }): ShopSchemas.CartItemAppendRequest => {
+const getCartAppendRequestPayload = (product: Product, formValue: { [key: string]: string }): CartItemAppendRequest => {
   let donation_price = formValue.donation_price ? parseInt(formValue.donation_price) : 0;
   if (isNaN(donation_price)) donation_price = 0;
 
@@ -54,7 +56,7 @@ const getCartAppendRequestPayload = (product: ShopSchemas.Product, formValue: {
   return { product: product.id, options, ...(product.donation_allowed ? { donation_price } : {}) };
 };
 
-const getProductNotPurchasableReason = (language: "ko" | "en", product: ShopSchemas.Product): string | null => {
+const getProductNotPurchasableReason = (language: "ko" | "en", product: Product): string | null => {
   // 상품이 구매 가능 기간 내에 있고, 상품이 매진되지 않았으며, 매진된 상품 옵션 재고가 없으면 true
   const now = new Date();
   const orderableStartsAt = new Date(product.orderable_starts_at);
@@ -68,9 +70,9 @@ const getProductNotPurchasableReason = (language: "ko" | "en", product: ShopSche
   }
   if (orderableEndsAt < now) return language === "ko" ? "판매가 종료됐어요!" : "This product is no longer available for purchase!";
 
-  if (R.isNumber(product.leftover_stock) && product.leftover_stock <= 0)
+  if (isNumber(product.leftover_stock) && product.leftover_stock <= 0)
     return language === "ko" ? "상품이 매진되었어요!" : "This product is out of stock!";
-  if (product.option_groups.some((og) => !R.isEmpty(og.options) && og.options.every((o) => R.isNumber(o.leftover_stock) && o.leftover_stock <= 0)))
+  if (product.option_groups.some((og) => !isEmpty(og.options) && og.options.every((o) => isNumber(o.leftover_stock) && o.leftover_stock <= 0)))
     return language === "ko"
       ? "선택 가능한 상품 옵션이 모두 품절되어 구매할 수 없어요!"
       : "All selectable options for this product are out of stock!";
@@ -78,7 +80,7 @@ const getProductNotPurchasableReason = (language: "ko" | "en", product: ShopSche
   return null;
 };
 
-const NotPurchasable: React.FC<React.PropsWithChildren> = ({ children }) => {
+const NotPurchasable: FC<PropsWithChildren> = ({ children }) => {
   return (
     <Typography variant="body1" color="error" sx={{ width: "100%", textAlign: "center", mt: "2rem", mb: "1rem" }}>
       {children}
@@ -89,9 +91,9 @@ const NotPurchasable: React.FC<React.PropsWithChildren> = ({ children }) => {
 type ProductItemPropType = {
   disabled?: boolean;
   language: "ko" | "en";
-  product: ShopSchemas.Product;
+  product: Product;
   onAddToCartSuccess?: () => void;
-  startPurchaseProcess: (oneItemOrderData: ShopSchemas.CartItemAppendRequest) => void;
+  startPurchaseProcess: (oneItemOrderData: CartItemAppendRequest) => void;
 };
 
 /**
@@ -99,22 +101,22 @@ type ProductItemPropType = {
  * @param p 상품 객체
  * @returns 상품의 가격이 0 이하인 경우 true, 그렇지 않으면 false
  */
-const isZeroPriceProduct = (p: ShopSchemas.Product): boolean => {
+const isZeroPriceProduct = (p: Product): boolean => {
   return p.price + p.option_groups.reduce((sum, group) => sum + group.options.reduce((s, o) => s + (o.additional_price || 0), 0), 0) === 0;
 };
 
-const ProductItem: React.FC<ProductItemPropType> = ({ disabled: rootDisabled, language, product, startPurchaseProcess, onAddToCartSuccess }) => {
+const ProductItem: FC<ProductItemPropType> = ({ disabled: rootDisabled, language, product, startPurchaseProcess, onAddToCartSuccess }) => {
   const navigate = useNavigate();
-  const [, forceRender] = React.useReducer((x) => x + 1, 0);
-  const [helperText, setHelperText] = React.useState<string | undefined>(undefined);
-  const { baseUrl, mdxComponents } = Common.Hooks.Common.useCommonContext();
+  const [, forceRender] = useReducer((x) => x + 1, 0);
+  const [helperText, setHelperText] = useState<string | undefined>(undefined);
+  const { baseUrl, mdxComponents } = useCommonContext();
   const { handleSubmit, subscribe, control, getValues, register, formState } = useForm<Record<string, string>>({ mode: "all" });
-  const shopAPIClient = ShopHooks.useShopClient();
-  const addItemToCartMutation = ShopHooks.useAddItemToCartMutation(shopAPIClient);
-  const addSnackbar = (c: string | React.ReactNode, variant: OptionsObject["variant"]) =>
+  const shopAPIClient = useShopClient();
+  const addItemToCartMutation = useAddItemToCartMutation(shopAPIClient);
+  const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) =>
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
-  React.useEffect(() => {
+  useEffect(() => {
     const callback = subscribe({
       formState: { values: true },
       callback: forceRender,
@@ -160,14 +162,14 @@ const ProductItem: React.FC<ProductItemPropType> = ({ disabled: rootDisabled, la
   const possibleDonationAmountStr =
     language === "ko" ? (
       <>
-        최소 <CommonComponents.PriceDisplay price={product.donation_min_price || 0} />
-        , 최대 <CommonComponents.PriceDisplay price={product.donation_max_price || 0} />
+        최소 <PriceDisplay price={product.donation_min_price || 0} />
+        , 최대 <PriceDisplay price={product.donation_max_price || 0} />
         까지 입력할 수 있습니다.
       </>
     ) : (
       <>
-        You can enter a minimum of <CommonComponents.PriceDisplay price={product.donation_min_price || 0} />
-        &nbsp;and a maximum of <CommonComponents.PriceDisplay price={product.donation_max_price || 0} />.
+        You can enter a minimum of <PriceDisplay price={product.donation_min_price || 0} />
+        &nbsp;and a maximum of <PriceDisplay price={product.donation_max_price || 0} />.
       </>
     );
 
@@ -177,10 +179,10 @@ const ProductItem: React.FC<ProductItemPropType> = ({ disabled: rootDisabled, la
   const actionButtonProps: ButtonProps = {
     variant: "contained",
     color: "secondary",
-    disabled: disabled || R.isString(helperText) || !formState.isValid,
+    disabled: disabled || isString(helperText) || !formState.isValid,
   };
 
-  const validateDonationPrice: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> = (e) => {
+  const validateDonationPrice: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> = (e) => {
     const value = e.target.value || "0";
 
     if (!/^[0-9]*$/.test(value)) {
@@ -263,16 +265,16 @@ const ProductItem: React.FC<ProductItemPropType> = ({ disabled: rootDisabled, la
 
   return (
     <>
-      <Common.Components.MDXRenderer text={product.description || ""} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
+      <MDXRenderer text={product.description || ""} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
       <br />
       <Divider />
-      {R.isNullish(notPurchasableReason) ? (
+      {isNullish(notPurchasableReason) ? (
         <>
           <br />
           <form onSubmit={handleSubmit(() => {})}>
             <Stack spacing={2}>
               {product.option_groups.map((group) => (
-                <CommonComponents.OptionGroupInput
+                <OptionGroupInput
                   key={group.id}
                   optionGroup={group}
                   options={group.options}
@@ -313,19 +315,19 @@ const ProductItem: React.FC<ProductItemPropType> = ({ disabled: rootDisabled, la
           </form>
           <br />
           <Typography variant="h6" sx={{ textAlign: "right" }}>
-            {orderPriceStr}: <CommonComponents.PriceDisplay price={getTotalProductPrice(getValues())} />
+            {orderPriceStr}: <PriceDisplay price={getTotalProductPrice(getValues())} />
           </Typography>
         </>
       ) : (
         <NotPurchasable>{notPurchasableReason}</NotPurchasable>
       )}
-      {R.isNullish(notPurchasableReason) && (
-        <CommonComponents.SignInGuard fallback={<NotPurchasable>{requiresSignInStr}</NotPurchasable>}>
+      {isNullish(notPurchasableReason) && (
+        <SignInGuard fallback={<NotPurchasable>{requiresSignInStr}</NotPurchasable>}>
           <Stack direction="row" spacing={1} sx={{ justifyContent: "flex-end", mt: 2 }}>
             <Button {...actionButtonProps} onClick={addItemToCart} children={addToCartStr} />
             <Button {...actionButtonProps} onClick={onOrderOneItemButtonClick} children={orderOneItemStr} />
           </Stack>
-        </CommonComponents.SignInGuard>
+        </SignInGuard>
       )}
     </>
   );
@@ -333,11 +335,11 @@ const ProductItem: React.FC<ProductItemPropType> = ({ disabled: rootDisabled, la
 
 type FoldableProductItemPropType = Omit<AccordionProps, "children"> & ProductItemPropType;
 
-const FoldableProductItem: React.FC<FoldableProductItemPropType> = ({ disabled, language, product, startPurchaseProcess, ...props }) => {
+const FoldableProductItem: FC<FoldableProductItemPropType> = ({ disabled, language, product, startPurchaseProcess, ...props }) => {
   return (
-    <Common.Components.MDX.PrimaryStyledDetails {...props} summary={product.name}>
+    <PrimaryStyledDetails {...props} summary={product.name}>
       <ProductItem disabled={disabled} language={language} product={product} startPurchaseProcess={startPurchaseProcess} />
-    </Common.Components.MDX.PrimaryStyledDetails>
+    </PrimaryStyledDetails>
   );
 };
 
@@ -350,10 +352,10 @@ const CloseButton = styled(IconButton)(({ theme }) => ({
 
 type DialogedProductItemPropType = Omit<DialogProps, "children"> &
   Omit<ProductItemPropType, "product"> & {
-    product?: ShopSchemas.Product;
+    product?: Product;
   };
 
-const DialogedProductItem: React.FC<DialogedProductItemPropType> = ({ disabled, language, product, startPurchaseProcess, ...props }) => {
+const DialogedProductItem: FC<DialogedProductItemPropType> = ({ disabled, language, product, startPurchaseProcess, ...props }) => {
   const dialogTitle = language === "ko" ? "상품 상세 정보" : "Product Details";
   const onCloseClick = (props.onClose as () => void) || (() => {});
   return (
@@ -377,9 +379,9 @@ const DialogedProductItem: React.FC<DialogedProductItemPropType> = ({ disabled,
 
 type ProductImageCardPropType = {
   language: "ko" | "en";
-  product: ShopSchemas.Product;
+  product: Product;
   disabled?: boolean;
-  showDetail: (product: ShopSchemas.Product) => void;
+  showDetail: (product: Product) => void;
 };
 
 const StyledProductImageCard = styled(Card)(({ theme }) => ({
@@ -395,12 +397,12 @@ const StyledProductImageCard = styled(Card)(({ theme }) => ({
   },
 }));
 
-const ProductImageCard: React.FC<ProductImageCardPropType> = ({ language, product, disabled, showDetail }) => {
+const ProductImageCard: FC<ProductImageCardPropType> = ({ language, product, disabled, showDetail }) => {
   const showDetailStr = language === "ko" ? "상품 상세 정보 보기" : "View Product Details";
   return (
     <StyledProductImageCard onClick={() => showDetail(product)} elevation={0}>
       <CardMedia sx={{ height: "200px", objectFit: "contain", borderRadius: "0 0 0.5rem 0.5rem" }}>
-        <Common.Components.FallbackImage
+        <FallbackImage
           src={product.image || ""}
           alt="Product Image"
           loading="lazy"
@@ -411,7 +413,7 @@ const ProductImageCard: React.FC<ProductImageCardPropType> = ({ language, produc
       <CardContent sx={{ py: 1 }}>
         <Stack spacing={1}>
           <Typography variant="h6" sx={{ textAlign: "center" }} children={product.name} />
-          <Typography variant="body1" sx={{ textAlign: "right" }} children={<CommonComponents.PriceDisplay price={product.price} />} />
+          <Typography variant="body1" sx={{ textAlign: "right" }} children={<PriceDisplay price={product.price} />} />
         </Stack>
       </CardContent>
       <CardActions>
@@ -425,20 +427,20 @@ type ProductListStateType = {
   openDialog: boolean;
   openBackdrop: boolean;
   resetKey: string;
-  product?: ShopSchemas.Product;
-  oneItemOrderData?: ShopSchemas.CartItemAppendRequest;
+  product?: Product;
+  oneItemOrderData?: CartItemAppendRequest;
 };
 
-export const ProductList: React.FC<ShopSchemas.ProductListQueryParams> = (qs) => {
-  const WrappedProductList: React.FC = () => {
+export const ProductList: FC<ProductListQueryParams> = (qs) => {
+  const WrappedProductList: FC = () => {
     const queryClient = useQueryClient();
     const navigate = useNavigate();
-    const { language, shopImpAccountId } = ShopHooks.useShopContext();
-    const shopAPIClient = ShopHooks.useShopClient();
-    const oneItemOrderStartMutation = ShopHooks.usePrepareOneItemOrderMutation(shopAPIClient);
-    const { data } = ShopHooks.useProducts(shopAPIClient, qs);
+    const { language, shopImpAccountId } = useShopContext();
+    const shopAPIClient = useShopClient();
+    const oneItemOrderStartMutation = usePrepareOneItemOrderMutation(shopAPIClient);
+    const { data } = useProducts(shopAPIClient, qs);
 
-    const [state, setState] = React.useState<ProductListStateType>({
+    const [state, setState] = useState<ProductListStateType>({
       openDialog: false,
       openBackdrop: false,
       resetKey: Math.random().toString(36).substring(2),
@@ -449,7 +451,7 @@ export const ProductList: React.FC<ShopSchemas.ProductListQueryParams> = (qs) =>
     const closeDialog = () => setState((ps) => ({ ...ps, openDialog: false }));
     const openBackdrop = () => setState((ps) => ({ ...ps, openBackdrop: true }));
     const closeBackdrop = () => setState((ps) => ({ ...ps, openBackdrop: false }));
-    const setProductDataAndOpenDialog = (oneItemOrderData: ShopSchemas.CartItemAppendRequest) => {
+    const setProductDataAndOpenDialog = (oneItemOrderData: CartItemAppendRequest) => {
       // 부모 리렌더링에 따른 form 상태 초기화를 숨기기 위해 accordion을 닫습니다.
       // TODO: FIXME: form 상태가 애초에 초기화되면 안됩니다. form 내부 값을 초기화되지 않도록 막고, 접히지 않도록 하세요.
       foldAll();
@@ -462,7 +464,7 @@ export const ProductList: React.FC<ShopSchemas.ProductListQueryParams> = (qs) =>
     const orderErrorStr =
       language === "ko" ? `결제 준비 중 문제가 발생했습니다,${pleaseRetryStr}` : `An error occurred while preparing the payment,${pleaseRetryStr}`;
 
-    const onFormSubmit = (customer_info: ShopSchemas.CustomerInfo) => {
+    const onFormSubmit = (customer_info: CustomerInfo) => {
       if (!state.oneItemOrderData) return;
 
       closeDialog();
@@ -470,8 +472,8 @@ export const ProductList: React.FC<ShopSchemas.ProductListQueryParams> = (qs) =>
       oneItemOrderStartMutation.mutate(
         { ...state.oneItemOrderData, customer_info: customer_info },
         {
-          onSuccess: (order: ShopSchemas.Order) => {
-            ShopUtils.startPortOnePurchase(
+          onSuccess: (order: Order) => {
+            startPortOnePurchase(
               shopImpAccountId,
               order,
               () => {
@@ -494,8 +496,8 @@ export const ProductList: React.FC<ShopSchemas.ProductListQueryParams> = (qs) =>
 
     return (
       <>
-        <CommonComponents.CustomerInfoFormDialog open={state.openDialog} closeFunc={closeDialog} onSubmit={onFormSubmit} />
-        <Common.Components.MDX.OneDetailsOpener resetKey={state.resetKey}>
+        <CustomerInfoFormDialog open={state.openDialog} closeFunc={closeDialog} onSubmit={onFormSubmit} />
+        <OneDetailsOpener resetKey={state.resetKey}>
           {data.map((p) => (
             <FoldableProductItem
               disabled={oneItemOrderStartMutation.isPending}
@@ -505,7 +507,7 @@ export const ProductList: React.FC<ShopSchemas.ProductListQueryParams> = (qs) =>
               startPurchaseProcess={setProductDataAndOpenDialog}
             />
           ))}
-        </Common.Components.MDX.OneDetailsOpener>
+        </OneDetailsOpener>
       </>
     );
   };
@@ -525,32 +527,32 @@ type ProductImageCardListStateType = {
   openProductDialog: boolean;
   openCustomerInfoDialog: boolean;
   openBackdrop: boolean;
-  product?: ShopSchemas.Product;
-  oneItemOrderData?: ShopSchemas.CartItemAppendRequest;
+  product?: Product;
+  oneItemOrderData?: CartItemAppendRequest;
 };
 
-export const ProductImageCardList: React.FC<ShopSchemas.ProductListQueryParams> = (qs) => {
-  const WrappedProductImageCardList: React.FC = () => {
+export const ProductImageCardList: FC<ProductListQueryParams> = (qs) => {
+  const WrappedProductImageCardList: FC = () => {
     const queryClient = useQueryClient();
     const navigate = useNavigate();
-    const { language, shopImpAccountId } = ShopHooks.useShopContext();
-    const shopAPIClient = ShopHooks.useShopClient();
-    const oneItemOrderStartMutation = ShopHooks.usePrepareOneItemOrderMutation(shopAPIClient);
-    const { data } = ShopHooks.useProducts(shopAPIClient, qs);
+    const { language, shopImpAccountId } = useShopContext();
+    const shopAPIClient = useShopClient();
+    const oneItemOrderStartMutation = usePrepareOneItemOrderMutation(shopAPIClient);
+    const { data } = useProducts(shopAPIClient, qs);
 
-    const [state, setState] = React.useState<ProductImageCardListStateType>({
+    const [state, setState] = useState<ProductImageCardListStateType>({
       openProductDialog: false,
       openCustomerInfoDialog: false,
       openBackdrop: false,
     });
 
-    const openProductDialog = (product: ShopSchemas.Product) => setState((ps) => ({ ...ps, product, openProductDialog: true }));
+    const openProductDialog = (product: Product) => setState((ps) => ({ ...ps, product, openProductDialog: true }));
     const closeProductDialog = () => setState((ps) => ({ ...ps, openProductDialog: false }));
     const openCustomerInfoDialog = () => setState((ps) => ({ ...ps, openCustomerInfoDialog: true }));
     const closeCustomerInfoDialog = () => setState((ps) => ({ ...ps, openCustomerInfoDialog: false }));
     const openBackdrop = () => setState((ps) => ({ ...ps, openBackdrop: true }));
     const closeBackdrop = () => setState((ps) => ({ ...ps, openBackdrop: false }));
-    const setProductDataAndOpenDialog = (oneItemOrderData: ShopSchemas.CartItemAppendRequest) => {
+    const setProductDataAndOpenDialog = (oneItemOrderData: CartItemAppendRequest) => {
       closeProductDialog();
       setState((ps) => ({ ...ps, oneItemOrderData }));
       openCustomerInfoDialog();
@@ -561,7 +563,7 @@ export const ProductImageCardList: React.FC<ShopSchemas.ProductListQueryParams>
     const orderErrorStr =
       language === "ko" ? `결제 준비 중 문제가 발생했습니다,${pleaseRetryStr}` : `An error occurred while preparing the payment,${pleaseRetryStr}`;
 
-    const onFormSubmit = (customer_info: ShopSchemas.CustomerInfo) => {
+    const onFormSubmit = (customer_info: CustomerInfo) => {
       if (!state.oneItemOrderData) return;
 
       closeCustomerInfoDialog();
@@ -569,8 +571,8 @@ export const ProductImageCardList: React.FC<ShopSchemas.ProductListQueryParams>
       oneItemOrderStartMutation.mutate(
         { ...state.oneItemOrderData, customer_info: customer_info },
         {
-          onSuccess: (order: ShopSchemas.Order) => {
-            ShopUtils.startPortOnePurchase(
+          onSuccess: (order: Order) => {
+            startPortOnePurchase(
               shopImpAccountId,
               order,
               () => {
@@ -593,7 +595,7 @@ export const ProductImageCardList: React.FC<ShopSchemas.ProductListQueryParams>
 
     return (
       <>
-        <CommonComponents.CustomerInfoFormDialog open={state.openCustomerInfoDialog} closeFunc={closeCustomerInfoDialog} onSubmit={onFormSubmit} />
+        <CustomerInfoFormDialog open={state.openCustomerInfoDialog} closeFunc={closeCustomerInfoDialog} onSubmit={onFormSubmit} />
         <DialogedProductItem
           open={state.openProductDialog}
           onClose={closeProductDialog}
diff --git a/packages/shop/src/components/features/user_status.tsx b/packages/shop/src/components/features/user_status.tsx
index 1c76edc..d71c21e 100644
--- a/packages/shop/src/components/features/user_status.tsx
+++ b/packages/shop/src/components/features/user_status.tsx
@@ -1,29 +1,29 @@
-import * as Common from "@frontend/common";
+import { getFormValue, isFormValid } from "@frontend/common/utils";
 import { Button, CircularProgress, Stack, TextField, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
-import * as React from "react";
+import { FC, FormEvent, useRef } from "react";
 
-import ShopHooks from "../../hooks";
+import { useShopClient, useSignInWithEmailMutation, useSignInWithSNSMutation, useSignOutMutation, useUserStatus } from "@frontend/shop/hooks";
 
-export const UserInfo: React.FC = () => {
-  const formRef = React.useRef<HTMLFormElement>(null);
-  const shopAPIClient = ShopHooks.useShopClient();
-  const signInWithEmailMutation = ShopHooks.useSignInWithEmailMutation(shopAPIClient);
-  const SignInWithSNSMutation = ShopHooks.useSignInWithSNSMutation(shopAPIClient);
-  const signOutMutation = ShopHooks.useSignOutMutation(shopAPIClient);
+export const UserInfo: FC = () => {
+  const formRef = useRef<HTMLFormElement>(null);
+  const shopAPIClient = useShopClient();
+  const signInWithEmailMutation = useSignInWithEmailMutation(shopAPIClient);
+  const SignInWithSNSMutation = useSignInWithSNSMutation(shopAPIClient);
+  const signOutMutation = useSignOutMutation(shopAPIClient);
 
   const signInWithGoogle = () =>
     SignInWithSNSMutation.mutate({
       provider: "google",
       callback_url: window.location.href,
     });
-  const signInWithEmail = (e: React.FormEvent) => {
+  const signInWithEmail = (e: FormEvent) => {
     e.preventDefault();
     e.stopPropagation();
 
-    if (!Common.Utils.isFormValid(formRef.current)) return;
+    if (!isFormValid(formRef.current)) return;
     signInWithEmailMutation.mutate(
-      Common.Utils.getFormValue<{ email: string; password: string }>({
+      getFormValue<{ email: string; password: string }>({
         form: formRef.current,
       })
     );
@@ -31,9 +31,9 @@ export const UserInfo: React.FC = () => {
 
   const disabled = SignInWithSNSMutation.isPending || signInWithEmailMutation.isPending || signOutMutation.isPending;
 
-  const WrappedUserStatus: React.FC = () => {
-    const shopAPIClient = ShopHooks.useShopClient();
-    const { data } = ShopHooks.useUserStatus(shopAPIClient);
+  const WrappedUserStatus: FC = () => {
+    const shopAPIClient = useShopClient();
+    const { data } = useUserStatus(shopAPIClient);
 
     return data && data.meta.is_authenticated === true ? (
       <Stack>
diff --git a/packages/shop/src/components/index.ts b/packages/shop/src/components/index.ts
index 56b63bf..4d72019 100644
--- a/packages/shop/src/components/index.ts
+++ b/packages/shop/src/components/index.ts
@@ -1,9 +1,2 @@
-import CommonComponents from "./common";
-import FeatureComponents from "./features";
-
-namespace ShopComponents {
-  export const Common = CommonComponents;
-  export const Features = FeatureComponents;
-}
-
-export default ShopComponents;
+export * from "./common";
+export * from "./features";
diff --git a/packages/shop/src/contexts/index.ts b/packages/shop/src/contexts/index.ts
index 9bfd521..e1a1651 100644
--- a/packages/shop/src/contexts/index.ts
+++ b/packages/shop/src/contexts/index.ts
@@ -1,21 +1,16 @@
-import * as React from "react";
+import { createContext } from "react";
+export type ContextOptions = {
+  language: "ko" | "en";
+  shopApiDomain: string;
+  shopApiCSRFCookieName: string;
+  shopApiTimeout: number;
+  shopImpAccountId: string;
+};
 
-namespace ShopContext {
-  export type ContextOptions = {
-    language: "ko" | "en";
-    shopApiDomain: string;
-    shopApiCSRFCookieName: string;
-    shopApiTimeout: number;
-    shopImpAccountId: string;
-  };
-
-  export const context = React.createContext<ContextOptions>({
-    language: "ko",
-    shopApiDomain: "",
-    shopApiCSRFCookieName: "",
-    shopApiTimeout: 10000,
-    shopImpAccountId: "",
-  });
-}
-
-export default ShopContext;
+export const context = createContext<ContextOptions>({
+  language: "ko",
+  shopApiDomain: "",
+  shopApiCSRFCookieName: "",
+  shopApiTimeout: 10000,
+  shopImpAccountId: "",
+});
diff --git a/packages/shop/src/hooks/index.ts b/packages/shop/src/hooks/index.ts
index 3ef97b5..e8baf4a 100644
--- a/packages/shop/src/hooks/index.ts
+++ b/packages/shop/src/hooks/index.ts
@@ -1,10 +1,27 @@
 import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
-import * as React from "react";
-
-import ShopAPIs from "../apis";
-import { ShopAPIClient } from "../apis/client";
-import ShopContext from "../contexts";
-import ShopSchemas from "../schemas";
+import { useContext } from "react";
+
+import {
+  appendItemToCart,
+  listOrders,
+  listPatrons,
+  listProducts,
+  patchOrderOptions,
+  prepareCartOrder,
+  prepareOneItemOrder,
+  refundAllItemsInOrder,
+  refundOneItemFromOrder,
+  removeItemFromCart,
+  retrieveCart,
+  retrieveUserInfo,
+  retrieveUserRowInfo,
+  signInWithEmail,
+  signInWithSNS,
+  signOut,
+} from "@frontend/shop/apis";
+import { ShopAPIClient } from "@frontend/shop/apis/client";
+import { context as shopContext } from "@frontend/shop/contexts";
+import type { ProductListQueryParams } from "@frontend/shop/schemas";
 
 const QUERY_KEYS = {
   BASE: ["query", "shop"],
@@ -28,128 +45,124 @@ const MUTATION_KEYS = {
   ONE_ITEM_REFUND: ["mutation", "shop", "one_item_refund"],
 };
 
-namespace ShopHooks {
-  export const useShopContext = () => {
-    const context = React.useContext(ShopContext.context);
-    if (!context) {
-      throw new Error("useShopContext must be used within a ShopProvider");
-    }
-    return context;
-  };
-
-  export const useShopClient = () => {
-    const { shopApiDomain, shopApiCSRFCookieName, shopApiTimeout, language } = useShopContext();
-    return new ShopAPIClient(shopApiDomain, shopApiCSRFCookieName, shopApiTimeout, language);
-  };
-
-  export const useUserStatus = (client: ShopAPIClient) =>
-    useSuspenseQuery({
-      queryKey: [...QUERY_KEYS.USER, client.language],
-      queryFn: ShopAPIs.retrieveUserInfo(client),
-      retry: 3,
-    });
-
-  export const useUserInfo = (client: ShopAPIClient) =>
-    useSuspenseQuery({
-      queryKey: [...QUERY_KEYS.USER_ROW, client.language],
-      queryFn: ShopAPIs.retrieveUserRowInfo(client),
-      retry: 3,
-    });
-
-  export const useSignInWithEmailMutation = (client: ShopAPIClient) =>
-    useMutation({
-      mutationKey: MUTATION_KEYS.USER_SIGN_IN_EMAIL,
-      mutationFn: ShopAPIs.signInWithEmail(client),
-      meta: { invalidates: [QUERY_KEYS.BASE] },
-    });
-
-  export const useSignInWithSNSMutation = (client: ShopAPIClient) =>
-    useMutation({
-      mutationKey: MUTATION_KEYS.USER_SIGN_IN_SNS,
-      mutationFn: ShopAPIs.signInWithSNS(client),
-      meta: { invalidates: [QUERY_KEYS.BASE] },
-    });
-
-  export const useSignOutMutation = (client: ShopAPIClient) =>
-    useMutation({
-      mutationKey: MUTATION_KEYS.USER_SIGN_OUT,
-      mutationFn: ShopAPIs.signOut(client),
-      retry: 0,
-      meta: { invalidates: [QUERY_KEYS.BASE] },
-    });
-
-  export const useProducts = (client: ShopAPIClient, qs?: ShopSchemas.ProductListQueryParams) =>
-    useSuspenseQuery({
-      queryKey: [...QUERY_KEYS.PRODUCT_LIST, qs ? JSON.stringify(qs) : "", client.language],
-      queryFn: () => ShopAPIs.listProducts(client)(qs),
-    });
-
-  export const useCart = (client: ShopAPIClient) =>
-    useSuspenseQuery({
-      queryKey: [...QUERY_KEYS.CART_INFO, client.language],
-      queryFn: ShopAPIs.retrieveCart(client),
-    });
-
-  export const useAddItemToCartMutation = (client: ShopAPIClient) =>
-    useMutation({
-      mutationKey: MUTATION_KEYS.CART_ITEM_APPEND,
-      mutationFn: ShopAPIs.appendItemToCart(client),
-      meta: { invalidates: [QUERY_KEYS.CART_INFO] },
-    });
-
-  export const useRemoveItemFromCartMutation = (client: ShopAPIClient) =>
-    useMutation({
-      mutationKey: MUTATION_KEYS.CART_ITEM_REMOVE,
-      mutationFn: ShopAPIs.removeItemFromCart(client),
-      meta: { invalidates: [QUERY_KEYS.CART_INFO] },
-    });
-
-  export const usePrepareOneItemOrderMutation = (client: ShopAPIClient) =>
-    useMutation({
-      mutationKey: MUTATION_KEYS.ONE_ITEM_ORDER_START,
-      mutationFn: ShopAPIs.prepareOneItemOrder(client),
-      meta: { invalidates: [QUERY_KEYS.CART_INFO, QUERY_KEYS.ORDER_LIST] },
-    });
-
-  export const usePrepareCartOrderMutation = (client: ShopAPIClient) =>
-    useMutation({
-      mutationKey: MUTATION_KEYS.CART_ORDER_START,
-      mutationFn: ShopAPIs.prepareCartOrder(client),
-      meta: { invalidates: [QUERY_KEYS.CART_INFO, QUERY_KEYS.ORDER_LIST] },
-    });
-
-  export const useOrders = (client: ShopAPIClient) =>
-    useSuspenseQuery({
-      queryKey: [...QUERY_KEYS.ORDER_LIST, client.language],
-      queryFn: ShopAPIs.listOrders(client),
-    });
-
-  export const useOneItemRefundMutation = (client: ShopAPIClient) =>
-    useMutation({
-      mutationKey: MUTATION_KEYS.ONE_ITEM_REFUND,
-      mutationFn: ShopAPIs.refundOneItemFromOrder(client),
-      meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
-    });
-
-  export const useOrderRefundMutation = (client: ShopAPIClient) =>
-    useMutation({
-      mutationKey: MUTATION_KEYS.ALL_ORDER_REFUND,
-      mutationFn: ShopAPIs.refundAllItemsInOrder(client),
-      meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
-    });
-
-  export const useOptionsOfOneItemInOrderPatchMutation = (client: ShopAPIClient) =>
-    useMutation({
-      mutationKey: MUTATION_KEYS.CART_ITEM_APPEND,
-      mutationFn: ShopAPIs.patchOrderOptions(client),
-      meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
-    });
-
-  export const usePatrons = (client: ShopAPIClient, year: number) =>
-    useSuspenseQuery({
-      queryKey: [...QUERY_KEYS.PATRONS, year],
-      queryFn: ShopAPIs.listPatrons(client, year),
-    });
-}
-
-export default ShopHooks;
+export const useShopContext = () => {
+  const context = useContext(shopContext);
+  if (!context) {
+    throw new Error("useShopContext must be used within a ShopProvider");
+  }
+  return context;
+};
+
+export const useShopClient = () => {
+  const { shopApiDomain, shopApiCSRFCookieName, shopApiTimeout, language } = useShopContext();
+  return new ShopAPIClient(shopApiDomain, shopApiCSRFCookieName, shopApiTimeout, language);
+};
+
+export const useUserStatus = (client: ShopAPIClient) =>
+  useSuspenseQuery({
+    queryKey: [...QUERY_KEYS.USER, client.language],
+    queryFn: retrieveUserInfo(client),
+    retry: 3,
+  });
+
+export const useUserInfo = (client: ShopAPIClient) =>
+  useSuspenseQuery({
+    queryKey: [...QUERY_KEYS.USER_ROW, client.language],
+    queryFn: retrieveUserRowInfo(client),
+    retry: 3,
+  });
+
+export const useSignInWithEmailMutation = (client: ShopAPIClient) =>
+  useMutation({
+    mutationKey: MUTATION_KEYS.USER_SIGN_IN_EMAIL,
+    mutationFn: signInWithEmail(client),
+    meta: { invalidates: [QUERY_KEYS.BASE] },
+  });
+
+export const useSignInWithSNSMutation = (client: ShopAPIClient) =>
+  useMutation({
+    mutationKey: MUTATION_KEYS.USER_SIGN_IN_SNS,
+    mutationFn: signInWithSNS(client),
+    meta: { invalidates: [QUERY_KEYS.BASE] },
+  });
+
+export const useSignOutMutation = (client: ShopAPIClient) =>
+  useMutation({
+    mutationKey: MUTATION_KEYS.USER_SIGN_OUT,
+    mutationFn: signOut(client),
+    retry: 0,
+    meta: { invalidates: [QUERY_KEYS.BASE] },
+  });
+
+export const useProducts = (client: ShopAPIClient, qs?: ProductListQueryParams) =>
+  useSuspenseQuery({
+    queryKey: [...QUERY_KEYS.PRODUCT_LIST, qs ? JSON.stringify(qs) : "", client.language],
+    queryFn: () => listProducts(client)(qs),
+  });
+
+export const useCart = (client: ShopAPIClient) =>
+  useSuspenseQuery({
+    queryKey: [...QUERY_KEYS.CART_INFO, client.language],
+    queryFn: retrieveCart(client),
+  });
+
+export const useAddItemToCartMutation = (client: ShopAPIClient) =>
+  useMutation({
+    mutationKey: MUTATION_KEYS.CART_ITEM_APPEND,
+    mutationFn: appendItemToCart(client),
+    meta: { invalidates: [QUERY_KEYS.CART_INFO] },
+  });
+
+export const useRemoveItemFromCartMutation = (client: ShopAPIClient) =>
+  useMutation({
+    mutationKey: MUTATION_KEYS.CART_ITEM_REMOVE,
+    mutationFn: removeItemFromCart(client),
+    meta: { invalidates: [QUERY_KEYS.CART_INFO] },
+  });
+
+export const usePrepareOneItemOrderMutation = (client: ShopAPIClient) =>
+  useMutation({
+    mutationKey: MUTATION_KEYS.ONE_ITEM_ORDER_START,
+    mutationFn: prepareOneItemOrder(client),
+    meta: { invalidates: [QUERY_KEYS.CART_INFO, QUERY_KEYS.ORDER_LIST] },
+  });
+
+export const usePrepareCartOrderMutation = (client: ShopAPIClient) =>
+  useMutation({
+    mutationKey: MUTATION_KEYS.CART_ORDER_START,
+    mutationFn: prepareCartOrder(client),
+    meta: { invalidates: [QUERY_KEYS.CART_INFO, QUERY_KEYS.ORDER_LIST] },
+  });
+
+export const useOrders = (client: ShopAPIClient) =>
+  useSuspenseQuery({
+    queryKey: [...QUERY_KEYS.ORDER_LIST, client.language],
+    queryFn: listOrders(client),
+  });
+
+export const useOneItemRefundMutation = (client: ShopAPIClient) =>
+  useMutation({
+    mutationKey: MUTATION_KEYS.ONE_ITEM_REFUND,
+    mutationFn: refundOneItemFromOrder(client),
+    meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
+  });
+
+export const useOrderRefundMutation = (client: ShopAPIClient) =>
+  useMutation({
+    mutationKey: MUTATION_KEYS.ALL_ORDER_REFUND,
+    mutationFn: refundAllItemsInOrder(client),
+    meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
+  });
+
+export const useOptionsOfOneItemInOrderPatchMutation = (client: ShopAPIClient) =>
+  useMutation({
+    mutationKey: MUTATION_KEYS.CART_ITEM_APPEND,
+    mutationFn: patchOrderOptions(client),
+    meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
+  });
+
+export const usePatrons = (client: ShopAPIClient, year: number) =>
+  useSuspenseQuery({
+    queryKey: [...QUERY_KEYS.PATRONS, year],
+    queryFn: listPatrons(client, year),
+  });
diff --git a/packages/shop/src/index.ts b/packages/shop/src/index.ts
index 35bfcea..5e5343f 100644
--- a/packages/shop/src/index.ts
+++ b/packages/shop/src/index.ts
@@ -1,5 +1,6 @@
-export { default as Components } from "./components/index";
-export { default as Contexts } from "./contexts/index";
-export { default as Hooks } from "./hooks/index";
-export { default as Schemas } from "./schemas/index";
-export { default as Utils } from "./utils/index";
+export * from "./apis";
+export * from "./components";
+export * from "./contexts";
+export * from "./hooks";
+export * from "./schemas";
+export * from "./utils";
diff --git a/packages/shop/src/schemas/index.ts b/packages/shop/src/schemas/index.ts
index 0d13508..6ff652a 100644
--- a/packages/shop/src/schemas/index.ts
+++ b/packages/shop/src/schemas/index.ts
@@ -1,254 +1,249 @@
-import * as R from "remeda";
-
-namespace ShopSchemas {
-  export type EmptyObject = Record<string, never>;
-
-  export type DetailedErrorSchema = {
-    code: string;
-    detail: string;
-    attr: string | null;
-  };
-
-  export type ErrorResponseSchema = {
-    type: string;
-    errors: DetailedErrorSchema[];
-  };
-
-  export type SocialSignInProvider = "google" | "naver" | "kakao";
-
-  export type SocialSignInRequest = {
-    provider: SocialSignInProvider;
-    callback_url: string;
-  };
-
-  export type SocialSessionStatusType = {
-    meta: { is_authenticated: boolean };
-    data: { user?: { email: string } };
-  };
-
-  export type EmailSignInRequest = {
-    email: string;
-    password: string;
-  };
-
-  export type UserSignedInStatus = {
-    status: number;
-    meta: {
-      is_authenticated: true;
-    };
-    data: {
-      user: {
-        id: number;
-        display: string;
-        has_usable_password: boolean;
-        email: string;
-        username: string;
-      };
-      methods: {
-        method: "socialaccount";
-        at: number;
-        provider: SocialSignInProvider;
-        uid: string;
-      }[];
-    };
-  };
-
-  export type UserNotSignedInStatus = {
-    status: number;
-    meta: {
-      is_authenticated: false;
-    };
-    data: {
-      flows:
-        | {
-            id: "login";
-          }
-        | {
-            id: "provider_redirect";
-            providers: SocialSignInProvider[];
-          }
-        | {
-            id: "provider_token";
-            providers: SocialSignInProvider[];
-          };
+import { isArray, isPlainObject, isString } from "remeda";
+export type EmptyObject = Record<string, never>;
+
+export type DetailedErrorSchema = {
+  code: string;
+  detail: string;
+  attr: string | null;
+};
+
+export type ErrorResponseSchema = {
+  type: string;
+  errors: DetailedErrorSchema[];
+};
+
+export type SocialSignInProvider = "google" | "naver" | "kakao";
+
+export type SocialSignInRequest = {
+  provider: SocialSignInProvider;
+  callback_url: string;
+};
+
+export type SocialSessionStatusType = {
+  meta: { is_authenticated: boolean };
+  data: { user?: { email: string } };
+};
+
+export type EmailSignInRequest = {
+  email: string;
+  password: string;
+};
+
+export type UserSignedInStatus = {
+  status: number;
+  meta: {
+    is_authenticated: true;
+  };
+  data: {
+    user: {
+      id: number;
+      display: string;
+      has_usable_password: boolean;
+      email: string;
+      username: string;
     };
+    methods: {
+      method: "socialaccount";
+      at: number;
+      provider: SocialSignInProvider;
+      uid: string;
+    }[];
   };
+};
 
-  export type UserRow = {
-    id: string;
-    email: string;
-    scancode_url: string;
+export type UserNotSignedInStatus = {
+  status: number;
+  meta: {
+    is_authenticated: false;
   };
-
-  export type Option = {
+  data: {
+    flows:
+      | {
+          id: "login";
+        }
+      | {
+          id: "provider_redirect";
+          providers: SocialSignInProvider[];
+        }
+      | {
+          id: "provider_token";
+          providers: SocialSignInProvider[];
+        };
+  };
+};
+
+export type UserRow = {
+  id: string;
+  email: string;
+  scancode_url: string;
+};
+
+export type Option = {
+  id: string;
+  name: string;
+  additional_price: number;
+  max_quantity_per_user: number;
+  leftover_stock: number | null;
+};
+
+export type OptionGroup = {
+  id: string;
+  name: string;
+
+  min_quantity_per_product: number;
+  max_quantity_per_product: number;
+  options: Option[];
+} & (
+  | {
+      is_custom_response: false;
+      custom_response_pattern: null;
+    }
+  | {
+      is_custom_response: true;
+      custom_response_pattern: string;
+    }
+);
+
+export type ProductListQueryParams = {
+  category_group?: string;
+  category?: string;
+};
+
+export type Product = {
+  id: string;
+  name: string;
+  description: string | null;
+  image: string | null;
+  price: number;
+  orderable_starts_at: string;
+  orderable_ends_at: string;
+  refundable_ends_at: string;
+
+  category_group: string;
+  category: string;
+
+  donation_allowed: boolean;
+  donation_min_price: number | null;
+  donation_max_price: number | null;
+
+  option_groups: OptionGroup[];
+  leftover_stock: number;
+  tag_names: string[];
+};
+
+export type PaymentHistoryStatus = "pending" | "completed" | "partial_refunded" | "refunded";
+
+export type PaymentHistory = {
+  price: number;
+  status: PaymentHistoryStatus;
+};
+
+export type OrderProductItemStatus = "pending" | "paid" | "used" | "refunded";
+
+export type OrderProductItem = {
+  id: string;
+  status: OrderProductItemStatus;
+  price: number;
+  donation_price: number;
+  not_refundable_reason: string | null;
+  scancode_url: string | null;
+  product: {
     id: string;
     name: string;
-    additional_price: number;
-    max_quantity_per_user: number;
-    leftover_stock: number | null;
+    price: number;
+    image: string | null;
   };
-
-  export type OptionGroup = {
-    id: string;
-    name: string;
-
-    min_quantity_per_product: number;
-    max_quantity_per_product: number;
-    options: Option[];
-  } & (
+  options: (
     | {
-        is_custom_response: false;
-        custom_response_pattern: null;
+        id: string;
+        product_option_group: {
+          id: string;
+          name: string;
+          is_custom_response: false;
+          custom_response_pattern: null;
+          response_modifiable_ends_at: string | null;
+        };
+        product_option: {
+          id: string;
+          name: string;
+          additional_price: number;
+        };
+        custom_response: null;
       }
     | {
-        is_custom_response: true;
-        custom_response_pattern: string;
+        id: string;
+        product_option_group: {
+          id: string;
+          name: string;
+          is_custom_response: true;
+          custom_response_pattern: string;
+          response_modifiable_ends_at: string | null;
+        };
+        product_option: null;
+        custom_response: string;
       }
+  )[];
+};
+
+export type CustomerInfo = {
+  name: string; // ^(.*)$
+  phone: string; // ^([\d]{3}-[\d]{3,4}-[\d]{4}|\+[\d]{9,14})$
+  email: string; // $email
+  organization: string | null; // ^(.*)$
+};
+
+export type Order = {
+  id: string;
+  name: string;
+  first_paid_price: number;
+  current_paid_price: number;
+  current_status: PaymentHistoryStatus;
+  not_fully_refundable_reason: string | null;
+  created_at: string;
+
+  payment_histories: PaymentHistory[];
+  products: OrderProductItem[];
+  customer_info: CustomerInfo | null;
+};
+export type Cart = Order;
+
+export type CartItemAppendRequest = {
+  product: string;
+  options: {
+    product_option_group: string;
+    product_option: string | null;
+    custom_response: string | null;
+  }[];
+  donation_price?: number;
+};
+export type OneItemOrderRequest = CartItemAppendRequest & { customer_info: CustomerInfo };
+
+export type OneItemRefundRequest = {
+  order_id: string;
+  order_product_relation_id: string;
+};
+
+export type OrderOptionsPatchRequest = {
+  order_id: string;
+  order_product_relation_id: string;
+  options: {
+    order_product_option_relation: string;
+    custom_response: string;
+  }[];
+};
+
+export type Patron = {
+  name: string;
+  contribution_message: string;
+};
+
+export const isObjectErrorResponseSchema = (obj?: unknown): obj is ErrorResponseSchema => {
+  return (
+    isPlainObject(obj) &&
+    isString(obj.type) &&
+    isArray(obj.errors) &&
+    obj.errors.every((error) => {
+      return isPlainObject(error) && isString(error.code) && isString(error.detail) && (error.attr === null || isString(error.attr));
+    })
   );
-
-  export type ProductListQueryParams = {
-    category_group?: string;
-    category?: string;
-  };
-
-  export type Product = {
-    id: string;
-    name: string;
-    description: string | null;
-    image: string | null;
-    price: number;
-    orderable_starts_at: string;
-    orderable_ends_at: string;
-    refundable_ends_at: string;
-
-    category_group: string;
-    category: string;
-
-    donation_allowed: boolean;
-    donation_min_price: number | null;
-    donation_max_price: number | null;
-
-    option_groups: OptionGroup[];
-    leftover_stock: number;
-    tag_names: string[];
-  };
-
-  export type PaymentHistoryStatus = "pending" | "completed" | "partial_refunded" | "refunded";
-
-  export type PaymentHistory = {
-    price: number;
-    status: PaymentHistoryStatus;
-  };
-
-  export type OrderProductItemStatus = "pending" | "paid" | "used" | "refunded";
-
-  export type OrderProductItem = {
-    id: string;
-    status: OrderProductItemStatus;
-    price: number;
-    donation_price: number;
-    not_refundable_reason: string | null;
-    scancode_url: string | null;
-    product: {
-      id: string;
-      name: string;
-      price: number;
-      image: string | null;
-    };
-    options: (
-      | {
-          id: string;
-          product_option_group: {
-            id: string;
-            name: string;
-            is_custom_response: false;
-            custom_response_pattern: null;
-            response_modifiable_ends_at: string | null;
-          };
-          product_option: {
-            id: string;
-            name: string;
-            additional_price: number;
-          };
-          custom_response: null;
-        }
-      | {
-          id: string;
-          product_option_group: {
-            id: string;
-            name: string;
-            is_custom_response: true;
-            custom_response_pattern: string;
-            response_modifiable_ends_at: string | null;
-          };
-          product_option: null;
-          custom_response: string;
-        }
-    )[];
-  };
-
-  export type CustomerInfo = {
-    name: string; // ^(.*)$
-    phone: string; // ^([\d]{3}-[\d]{3,4}-[\d]{4}|\+[\d]{9,14})$
-    email: string; // $email
-    organization: string | null; // ^(.*)$
-  };
-
-  export type Order = {
-    id: string;
-    name: string;
-    first_paid_price: number;
-    current_paid_price: number;
-    current_status: PaymentHistoryStatus;
-    not_fully_refundable_reason: string | null;
-    created_at: string;
-
-    payment_histories: PaymentHistory[];
-    products: OrderProductItem[];
-    customer_info: CustomerInfo | null;
-  };
-  export type Cart = Order;
-
-  export type CartItemAppendRequest = {
-    product: string;
-    options: {
-      product_option_group: string;
-      product_option: string | null;
-      custom_response: string | null;
-    }[];
-    donation_price?: number;
-  };
-  export type OneItemOrderRequest = CartItemAppendRequest & { customer_info: CustomerInfo };
-
-  export type OneItemRefundRequest = {
-    order_id: string;
-    order_product_relation_id: string;
-  };
-
-  export type OrderOptionsPatchRequest = {
-    order_id: string;
-    order_product_relation_id: string;
-    options: {
-      order_product_option_relation: string;
-      custom_response: string;
-    }[];
-  };
-
-  export type Patron = {
-    name: string;
-    contribution_message: string;
-  };
-
-  export const isObjectErrorResponseSchema = (obj?: unknown): obj is ShopSchemas.ErrorResponseSchema => {
-    return (
-      R.isPlainObject(obj) &&
-      R.isString(obj.type) &&
-      R.isArray(obj.errors) &&
-      obj.errors.every((error) => {
-        return R.isPlainObject(error) && R.isString(error.code) && R.isString(error.detail) && (error.attr === null || R.isString(error.attr));
-      })
-    );
-  };
-}
-
-export default ShopSchemas;
+};
diff --git a/packages/shop/src/utils/index.ts b/packages/shop/src/utils/index.ts
index 53fd611..78ffab2 100644
--- a/packages/shop/src/utils/index.ts
+++ b/packages/shop/src/utils/index.ts
@@ -1,24 +1,19 @@
-import * as R from "remeda";
+import { isEmpty, isNullish, isString } from "remeda";
 
-import ShopSchemas from "../schemas";
-import { startPortOnePurchase as _startPortOnePurchase } from "./portone";
+import type { OptionGroup, OrderProductItem } from "@frontend/shop/schemas";
 
-namespace ShopAPIUtil {
-  export const getCustomResponsePattern = (optionGroup: Pick<ShopSchemas.OptionGroup, "custom_response_pattern">) => {
-    const pattern = optionGroup.custom_response_pattern?.trim() ?? "";
-    return R.isString(pattern) && !R.isEmpty(pattern) ? new RegExp(pattern, "g") : undefined;
-  };
+export { startPortOnePurchase } from "./portone";
 
-  export const isOrderProductOptionModifiable = (optionRel: ShopSchemas.OrderProductItem["options"][number]): boolean => {
-    if (!optionRel.product_option_group.is_custom_response) return false;
+export const getCustomResponsePattern = (optionGroup: Pick<OptionGroup, "custom_response_pattern">) => {
+  const pattern = optionGroup.custom_response_pattern?.trim() ?? "";
+  return isString(pattern) && !isEmpty(pattern) ? new RegExp(pattern, "g") : undefined;
+};
 
-    if (R.isNullish(optionRel.product_option_group.response_modifiable_ends_at)) return true;
-    else if (new Date() <= new Date(optionRel.product_option_group.response_modifiable_ends_at)) return true;
+export const isOrderProductOptionModifiable = (optionRel: OrderProductItem["options"][number]): boolean => {
+  if (!optionRel.product_option_group.is_custom_response) return false;
 
-    return false;
-  };
+  if (isNullish(optionRel.product_option_group.response_modifiable_ends_at)) return true;
+  else if (new Date() <= new Date(optionRel.product_option_group.response_modifiable_ends_at)) return true;
 
-  export const startPortOnePurchase = _startPortOnePurchase;
-}
-
-export default ShopAPIUtil;
+  return false;
+};
diff --git a/packages/shop/src/utils/portone.ts b/packages/shop/src/utils/portone.ts
index 2d6083e..3fb2ce4 100644
--- a/packages/shop/src/utils/portone.ts
+++ b/packages/shop/src/utils/portone.ts
@@ -1,11 +1,11 @@
 import { RequestPayResponse } from "iamport-typings/src";
-import * as R from "remeda";
+import { isEmpty, isString } from "remeda";
 
-import ShopSchemas from "../schemas";
+import type { Order } from "@frontend/shop/schemas";
 
 export const startPortOnePurchase = (
   portOneAccountId: string,
-  order: ShopSchemas.Order,
+  order: Order,
   onSuccess?: (response: RequestPayResponse) => void,
   onFailure?: (response: RequestPayResponse) => void,
   onCleanUp?: (response: RequestPayResponse) => void
@@ -16,7 +16,7 @@ export const startPortOnePurchase = (
     return;
   }
 
-  if (!R.isString(portOneAccountId) || R.isEmpty(portOneAccountId)) {
+  if (!isString(portOneAccountId) || isEmpty(portOneAccountId)) {
     alert("PortOne 계정 ID가 설정되지 않았습니다.");
     return;
   }
diff --git a/packages/shop/tsconfig.json b/packages/shop/tsconfig.json
index a129af4..cade86f 100644
--- a/packages/shop/tsconfig.json
+++ b/packages/shop/tsconfig.json
@@ -1,13 +1,4 @@
 {
-    "compilerOptions": {
-      "target": "ES2022",
-      "module": "ESNext",
-      "moduleResolution": "node",
-      "declaration": true,
-      "outDir": "dist",
-      "strict": true,
-      "jsx": "react",
-      "types": ["vite/client", "@types/node"]
-    },
-    "include": ["src"]
-  }
+  "extends": "../../tsconfig.base.json",
+  "include": ["src", "../../types"]
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
new file mode 100644
index 0000000..60e1929
--- /dev/null
+++ b/tsconfig.base.json
@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "forceConsistentCasingInFileNames": false,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@apps/pyconkr-2025/*": ["apps/pyconkr-2025/src/*"],
+      "@apps/pyconkr-2026/*": ["apps/pyconkr-2026/src/*"],
+      "@apps/pyconkr-admin/*": ["apps/pyconkr-admin/src/*"],
+      "@apps/pyconkr-participant-portal/*": ["apps/pyconkr-participant-portal/src/*"],
+      "@frontend/common": ["packages/common/src/index.ts"],
+      "@frontend/common/*": ["packages/common/src/*"],
+      "@frontend/shop": ["packages/shop/src/index.ts"],
+      "@frontend/shop/*": ["packages/shop/src/*"]
+    }
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 04b1e70..367aad7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,36 +1,4 @@
 {
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "forceConsistentCasingInFileNames": false,
-
-    /* Paths */
-    "baseUrl": ".",
-    "paths": {
-      "@apps/pyconkr-2025/*": ["apps/pyconkr-2025/src/*"],
-      "@apps/pyconkr-2026/*": ["apps/pyconkr-2026/src/*"],
-      "@frontend/common/*": ["packages/common/*"],
-      "@frontend/shop/*": ["packages/shop/*"],
-    }
-  },
+  "extends": "./tsconfig.base.json",
   "include": ["apps", "packages", "types", "eslint.config.js"]
 }