핫픽스 배포

.eslintrc.cjs

@@ -8,6 +8,7 @@ module.exports = {
     'airbnb/hooks',
     'airbnb-typescript',
     'plugin:react/recommended',
+    // '@feature-sliced',
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     'plugin:jsx-a11y/recommended', // jsx-a11y 규칙은 웹 접근성을 준수하기 위함
@@ -102,7 +103,13 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['.eslintrc.cjs', 'public/**', 'src/assets/svgs/**', '**/*.stories.tsx', '**/*.stories.ts'], 
+      files: [
+        '.eslintrc.cjs',
+        'public/**',
+        'src/shared/assets/**',
+        '**/*.stories.tsx',
+        '**/*.stories.ts',
+      ],
       parserOptions: {
         project: './tsconfig.app.json',
       },

.github/workflows/prod-ci-cd.yml

@@ -48,6 +48,7 @@ jobs:
         env:
           VITE_SERVER_URL: ${{ secrets.VITE_SERVER_URL }}
           VITE_KAKAO_JAVASCRIPT_KEY: ${{ secrets.VITE_KAKAO_JAVASCRIPT_KEY }}
+          VITE_SUPABASE_PUBLIC_KEY: ${{ secrets.VITE_SUPABASE_PUBLIC_KEY }}
         run: yarn build
 
       # Step 7: 빌드 결과물 저장
@@ -58,7 +59,7 @@ jobs:
 
   cd:
     runs-on: ubuntu-latest
-    if: github.event_name == 'push'  # push일 때만 실행
+    if: github.event_name == 'push' # push일 때만 실행
     needs: ci
     steps:
       # Step 1: AWS 인증

.github/workflows/publish-storybook.yml

@@ -38,7 +38,23 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           onlyChanged: true # Only run Chromatic on changed stories
 
-      - name: Comment on PR
+      - name: Comment on PR (with snapshot changes)
+        if: steps.chromatic.outputs.changeCount != '0'
         uses: thollander/actions-comment-pull-request@v3
         with:
-          message: '✨ **Storybook preview** : ${{ steps.chromatic.outputs.storybookUrl }}'
+          message: |
+            ✨ Storybook
+            👉 ${{ steps.chromatic.outputs.storybookUrl }}
+
+            📸 변경된 스냅샷
+            👉 ${{ steps.chromatic.outputs.buildUrl }}
+
+      - name: Comment on PR (no snapshot changes)
+        if: steps.chromatic.outputs.changeCount == '0'
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          message: |
+            ✨ Storybook
+            👉 ${{ steps.chromatic.outputs.storybookUrl }}
+
+            ✅ 스냅샷 변경 없음

.storybook/main.ts

@@ -1,7 +1,11 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    './**/*.mdx',
+  ],
   addons: [
     'storybook-addon-pseudo-states',
     '@storybook/addon-onboarding',

.storybook/preview.ts

@@ -1,12 +1,16 @@
 import type { Preview } from '@storybook/react';
-
+import { initialize, mswLoader } from 'msw-storybook-addon';
 import { ThemeProvider } from 'styled-components';
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
-import theme from '../src/styles/theme';
-import GlobalStyles from '../src/styles/globalStyles';
+import theme from '../src/shared/styles/theme';
+import GlobalStyles from '../src/shared/styles/globalStyles';
+
+// Initialize MSW
+initialize();
 
 const preview: Preview = {
   parameters: {
+    chromatic: { disableSnapshot: true }, // 기본적으로 Chromatic 스냅샷 비활성화 (필요한 스토리에서만 활성화한다)
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -25,6 +29,9 @@ const preview: Preview = {
       GlobalStyles,
     }),
   ],
+
+  // Provide the MSW addon loader globally
+  loaders: [mswLoader],
 };
 
 export default preview;

src/stories/colors.mdx → .storybook/stories/colors.mdx

@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
-import theme from '../styles/theme';
+import theme from '@/shared/styles/theme';
 
 <Meta title="Design Tokens/Colors" />
 

src/stories/icon-gallery.mdx → .storybook/stories/icon-gallery.mdx

@@ -1,6 +1,6 @@
 import { Meta, IconGallery, IconItem } from '@storybook/addon-docs';
-import theme from '../styles/theme';
-import * as Icons from '../assets/svgs/icon';
+import theme from '@/shared/styles/theme';
+import * as Icons from '@/shared/assets/svgs/icon';
 
 <Meta title="Design Tokens/Icon Gallery" />
 

src/stories/units-radius.mdx → .storybook/stories/units-radius.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/blocks';
-import theme from '../styles/theme';
+import theme from '@/shared/styles/theme';
 
 <Meta title="Design Tokens/Units & Border Radius" />
 

package.json

@@ -8,7 +8,7 @@
     "build": "tsc -b && vite build",
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
     "preview": "vite preview",
-    "svgr": "npx @svgr/cli -d src/assets/svgs --typescript --no-dimensions public/svgs",
+    "svgr": "npx @svgr/cli -d src/shared/assets/svgs/icon --typescript --no-dimensions public/svgs",
     "pwa": "pwa-assets-generator --preset minimal public/pwa/moddo.svg",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "STORYBOOK=true storybook build",
@@ -48,13 +48,14 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",
+    "@feature-sliced/eslint-config": "^0.1.1",
     "@hookform/devtools": "^4.3.3",
     "@storybook/addon-essentials": "^8.5.0",
     "@storybook/addon-interactions": "^8.5.0",
     "@storybook/addon-onboarding": "^8.5.0",
     "@storybook/addon-themes": "^8.5.2",
     "@storybook/blocks": "^8.5.0",
-    "@storybook/react": "^8.5.0",
+    "@storybook/react": "^8.6.12",
     "@storybook/react-vite": "^8.5.0",
     "@storybook/test": "^8.5.0",
     "@tanstack/eslint-plugin-query": "^5.68.0",
@@ -73,7 +74,8 @@
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "10.0.1",
     "eslint-import-resolver-typescript": "^3.7.0",
-    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-boundaries": "^5.0.1",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "7.37.4",
@@ -82,8 +84,9 @@
     "eslint-plugin-storybook": "^0.11.2",
     "globals": "^15.14.0",
     "msw": "^2.7.0",
+    "msw-storybook-addon": "^2.0.6",
     "prettier": "^3.4.2",
-    "storybook": "^8.5.0",
+    "storybook": "^8.6.12",
     "storybook-addon-pseudo-states": "^4.0.2",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.18.2",

src/App.tsx → src/app/App.tsx

@@ -5,14 +5,14 @@ import {
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/react-query';
-import GlobalStyles from '@/styles/globalStyles';
-import theme from '@/styles/theme';
-import Layout from '@/common/components/Layout';
-import AppRouter from '@/Router';
+import GlobalStyles from '@/shared/styles/globalStyles';
+import theme from '@/shared/styles/theme';
+import AppRouter from '@/app/Router';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import GlobalErrorBoundary from '@/common/components/GlobalErrorBoundary';
-import Toast from '@/common/components/Toast';
-import useApiError from '@/common/hooks/useApiError';
+import GlobalErrorBoundary from '@/app/GlobalErrorBoundary';
+import Toast from '@/shared/ui/Toast';
+import useApiError from '@/shared/hooks/useApiError';
+import Layout from './Layout';
 import 'react-toastify/dist/ReactToastify.css';
 
 function App() {
@@ -35,7 +35,6 @@ function App() {
         }),
       })
   );
-
   return (
     <ThemeProvider theme={theme}>
       <GlobalErrorBoundary>

src/common/components/GlobalErrorBoundary/index.tsx → src/app/GlobalErrorBoundary/index.tsx

@@ -1,5 +1,5 @@
 import { ErrorBoundary } from 'react-error-boundary';
-import ErrorPage from '@/pages/error';
+import { ErrorPage } from '@/pages/error';
 
 interface GlobalErrorBoundaryProps {
   children: React.ReactNode;

src/common/components/RouteErrorBoundary/index.tsx → src/app/RouteErrorBoundary/index.tsx

@@ -1,6 +1,6 @@
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
-import ErrorPage from '@/pages/error';
-import { BoundaryError } from '@/common/types/error.type';
+import { ErrorPage } from '@/pages/error';
+import { BoundaryError } from '@/shared/types/error.type';
 
 type FallbackPageProps = Omit<FallbackProps, 'error'> & {
   error: BoundaryError;

src/common/components/RouteErrorElement/index.tsx → src/app/RouteErrorElement/index.tsx

@@ -1,6 +1,6 @@
 import { useRouteError } from 'react-router';
-import { BoundaryError } from '@/common/types/error.type';
-import ErrorPage from '@/pages/error';
+import { BoundaryError } from '@/shared/types/error.type';
+import { ErrorPage } from '@/pages/error';
 
 function RouteErrorElement() {
   const error = useRouteError();

src/Router.tsx → src/app/Router.tsx

@@ -1,21 +1,53 @@
 import { lazy, Suspense } from 'react';
 import { createBrowserRouter, Outlet, RouterProvider } from 'react-router';
-import { ROUTE } from '@/common/constants/route';
-import { checkAuth, groupTokenUrlLoader } from '@/common/loaders';
-import getGroupManagerAuth from '@/common/loaders/getGroupManagerAuth';
-import RouteErrorBoundary from '@/common/components/RouteErrorBoundary';
-import RouteErrorElement from '@/common/components/RouteErrorElement';
+import { ROUTE } from '@/shared/config/route';
+import RouteErrorBoundary from '@/app/RouteErrorBoundary';
+import RouteErrorElement from '@/app/RouteErrorElement';
+import checkAuth from '@/entities/auth/lib/checkAuth';
+import getGroupManagerAuth from '@/entities/auth/lib/getGroupManagerAuth';
+import groupTokenUrlLoader from '@/entities/auth/lib/groupTokenUrlLoader';
 
-const BillDetail = lazy(() => import('@/pages/billDetail'));
-const CharacterShare = lazy(() => import('@/pages/billDetail/characterShare'));
-const CreateBill = lazy(() => import('@/pages/createBill'));
-const GroupSetup = lazy(() => import('@/pages/groupSetup'));
-const Home = lazy(() => import('@/pages/home'));
-const Login = lazy(() => import('@/pages/auth/login'));
-const LoginSuccess = lazy(() => import('@/pages/auth/loginSuccess'));
-const Onboarding = lazy(() => import('@/pages/onboarding'));
-const SelectGroup = lazy(() => import('@/pages/selectGroup'));
-const NotFound = lazy(() => import('@/pages/notFound'));
+const BillDetail = lazy(() =>
+  import('@/pages/billDetail/').then(({ BillDetailPage }) => ({
+    default: BillDetailPage,
+  }))
+);
+const CharacterShare = lazy(() =>
+  import('@/pages/characterShare').then(({ CharacterSharePage }) => ({
+    default: CharacterSharePage,
+  }))
+);
+const CreateBill = lazy(() =>
+  import('@/pages/createBill').then(({ CreateBillPage }) => ({
+    default: CreateBillPage,
+  }))
+);
+const GroupSetup = lazy(() =>
+  import('@/pages/groupSetup').then(({ GroupSetupPage }) => ({
+    default: GroupSetupPage,
+  }))
+);
+const Home = lazy(() =>
+  import('@/pages/home').then(({ HomePage }) => ({ default: HomePage }))
+);
+const Login = lazy(() =>
+  import('@/pages/login').then(({ LoginPage }) => ({ default: LoginPage }))
+);
+const Onboarding = lazy(() =>
+  import('@/pages/onboarding').then(({ OnboardingPage }) => ({
+    default: OnboardingPage,
+  }))
+);
+const SelectGroup = lazy(() =>
+  import('@/pages/selectGroup').then(({ SelectGroupPage }) => ({
+    default: SelectGroupPage,
+  }))
+);
+const NotFound = lazy(() =>
+  import('@/pages/notFound').then(({ NotFoundPage }) => ({
+    default: NotFoundPage,
+  }))
+);
 
 function AppRouter() {
   const router = createBrowserRouter([
@@ -36,10 +68,6 @@ function AppRouter() {
           path: ROUTE.onboarding,
           element: <Onboarding />,
         },
-        {
-          path: ROUTE.loginSuccess,
-          element: <LoginSuccess />,
-        },
         {
           path: ROUTE.home,
           element: <Home />,

src/service/apis/auth.ts → src/entities/auth/api/auth.ts

@@ -1,4 +1,4 @@
-import axiosInstance from './axios';
+import axiosInstance from '@/shared/api/axios';
 
 export interface GuestTokenData {
   accessToken: string;

src/common/queries/auth/useGetGuestToken.ts → src/entities/auth/api/useGetGuestToken.ts

@@ -1,7 +1,7 @@
-import { useQuery } from '@tanstack/react-query';
-import { ROUTE } from '@/common/constants/route';
 import { useNavigate } from 'react-router';
-import { getGuestToken } from '@/service/apis/auth';
+import { useQuery } from '@tanstack/react-query';
+import { ROUTE } from '@/shared/config/route';
+import { getGuestToken } from './auth';
 
 export const useGetGuestToken = () => {
   const navigate = useNavigate();

src/common/loaders/checkAuth.ts → src/entities/auth/lib/checkAuth.ts

@@ -1,5 +1,5 @@
 import { redirect } from 'react-router';
-import { ROUTE } from '@/common/constants/route';
+import { ROUTE } from '@/shared/config/route';
 
 /**
  * 페이지에 접근하기 전에 실행되는 함수

src/common/loaders/getGroupManagerAuth.ts → src/entities/auth/lib/getGroupManagerAuth.ts

@@ -1,5 +1,5 @@
 import { LoaderFunction, redirect } from 'react-router';
-import { ROUTE } from '@/common/constants/route';
+import { ROUTE } from '@/shared/config/route';
 
 /** 정산 담당자가 필요한 토큰을 모두 가지고 있는지 확인하는 로더 */
 const getGroupManagerAuth: LoaderFunction = async () => {

src/common/loaders/groupTokenUrlLoader.ts → src/entities/auth/lib/groupTokenUrlLoader.ts

@@ -1,8 +1,8 @@
-import { LoaderFunction, redirect } from 'react-router';
-import { ROUTE } from '@/common/constants/route';
-import { getGroupHeader } from '@/service/apis/group';
 import { isAxiosError } from 'axios';
-import { BoundaryError } from '../types/error.type';
+import { LoaderFunction, redirect } from 'react-router';
+import { getGroupHeader } from '@/entities/group/api/group';
+import { ROUTE } from '@/shared/config/route';
+import { BoundaryError } from '@/shared/types/error.type';
 
 const groupTokenUrlLoader: LoaderFunction = async ({ params }) => {
   const { groupToken } = params;

src/service/apis/image.ts → src/entities/character/api/image.ts

@@ -1,5 +1,5 @@
-import { CharacterData } from '@/common/types/character';
-import axiosInstance from './axios';
+import { CharacterData } from '@/entities/character/model/character.type';
+import axiosInstance from '@/shared/api/axios';
 
 const image = {
   // GET GetCharacter

src/common/constants/character.ts → src/entities/character/config/character.ts

@@ -1,4 +1,4 @@
-import { CharacterType } from '@/common/types/character';
+import { CharacterType } from '@/entities/character/model/character.type';
 
 export const CHARACTER_IMAGE_SIZE: Record<
   CharacterType,