Merge branch 'dev' into feat/489-search

client/.babelrc.js

@@ -0,0 +1,16 @@
+import ReactFreshBabelPlugin from 'react-refresh/babel';
+
+/** @type {import('@babel/core').TransformOptions} */
+export default {
+  presets: [
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        development: process.env.NODE_ENV === 'development',
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: [process.env.NODE_ENV === 'development' && false && ReactFreshBabelPlugin].filter(Boolean),
+};

client/.storybook/main.ts

@@ -1,11 +1,13 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {},
+    options: {
+      fastRefresh: true,
+    },
   },
   docs: {
     autodocs: 'tag',

client/.storybook/preview.tsx

@@ -1,11 +1,17 @@
 import type { Preview } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { initialize, mswDecorator, mswLoader } from 'msw-storybook-addon';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
+import { AuthProvider } from '../src/context/AuthContext';
+import handlers from '../src/mocks/handlers';
 import GlobalStyle from '../src/styles/GlobalStyle';
 import ResetStyle from '../src/styles/ResetStyle';
 import theme from '../src/styles/theme';
 
+initialize();
+
 const customViewports = {
   Default: {
     name: 'Default',
@@ -16,6 +22,14 @@ const customViewports = {
   },
 };
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      suspense: true,
+    },
+  },
+});
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -29,19 +43,29 @@ const preview: Preview = {
       viewports: { ...customViewports },
       defaultViewport: 'Default',
     },
+    msw: {
+      handlers,
+    },
   },
 
   decorators: [
+    mswDecorator,
     (Story) => (
-      <MemoryRouter initialEntries={['/']}>
+      <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
           <ResetStyle />
           <GlobalStyle />
-          <Story />
+          <AuthProvider>
+            <MemoryRouter initialEntries={['/']}>
+              <Story />
+            </MemoryRouter>
+          </AuthProvider>
         </ThemeProvider>
-      </MemoryRouter>
+      </QueryClientProvider>
     ),
   ],
+
+  loaders: [mswLoader],
 };
 
 export default preview;

client/.storybook/webpack.config.js

@@ -1,5 +1,5 @@
 import { merge } from 'webpack-merge';
-import defaultConfig from '../webpack.config.js';
+import defaultConfig from '../webpack.development.js';
 
 export default function ({ config }) {
   return merge(defaultConfig, config);

client/index.html

@@ -4,21 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
-    <meta name="theme-color" content="#FFD3D8" />
-
-    <meta name="apple-mobile-web-app-title" content="요즘카페" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="#FFD3D8" />
-    <link rel="apple-touch-icon" sizes="128x128" href="/assets/ios.png" />
-    <link rel="apple-touch-icon-precomposed" sizes="128x128" href="ios.png" />
+    <title>요즘카페</title>
 
     <meta property="og:title" content="요즘카페" />
     <meta property="og:url" content="https://yozm.cafe/" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="/assets/thumbnail-image.png" />
     <meta property="og:description" content="트렌디한 성수 지역의 카페를 손쉽게 탐색하는 서비스, 요즘카페" />
-
-    <title>요즘카페</title>
   </head>
   <body>
     <div id="root"></div>

client/package.json

@@ -10,14 +10,15 @@
     "solo5star <[email protected]>"
   ],
   "scripts": {
-    "start": "cross-env NODE_ENV=development webpack serve --config webpack.development.js",
+    "start": "node scripts/start.js",
     "build": "cross-env NODE_ENV=production webpack --config webpack.production.js",
     "storybook": "cross-env NODE_ENV=development storybook dev -p 6006",
     "build:storybook": "cross-env NODE_ENV=production storybook build",
     "cypress:open": "cypress open --e2e --browser chrome",
     "cypress:run": "cypress run --e2e --browser chrome --headless"
   },
   "dependencies": {
+    "@googlemaps/react-wrapper": "^1.1.35",
     "@tanstack/react-query": "^4.29.19",
     "@tanstack/react-query-devtools": "^4.32.1",
     "axios": "^1.4.0",
@@ -32,19 +33,21 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@storybook/addon-essentials": "7.0.25",
-    "@storybook/addon-interactions": "7.0.25",
-    "@storybook/addon-links": "7.0.25",
-    "@storybook/addon-styling": "^1.3.4",
-    "@storybook/blocks": "7.0.25",
-    "@storybook/react": "^7.0.25",
-    "@storybook/react-webpack5": "7.0.25",
-    "@storybook/testing-library": "0.0.14-next.2",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-webpack5": "^7.4.5",
+    "@storybook/testing-library": "0.2.1",
+    "@types/google.maps": "^3.54.0",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "babel-loader": "^9.1.2",
+    "commander": "^11.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "cypress": "^12.17.4",
@@ -59,15 +62,18 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.14",
+    "favicons": "^7.1.4",
+    "favicons-webpack-plugin": "^6.0.1",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.3",
-    "msw": "^1.2.2",
+    "msw": "^1.3.1",
+    "msw-storybook-addon": "^1.8.0",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
     "react-refresh": "^0.14.0",
     "start-server-and-test": "^2.0.0",
-    "storybook": "7.0.25",
+    "storybook": "^7.4.5",
     "stylelint": "^15.9.0",
     "stylelint-config-clean-order": "^5.0.1",
     "stylelint-no-unsupported-browser-features": "^7.0.0",

client/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.2).
+ * Mock Service Worker (1.3.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

client/scripts/start.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+
+import { program } from 'commander';
+import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import webpackConfig from '../webpack.development.js';
+
+process.env.NODE_ENV = 'development';
+
+/** @type {Record<string, import('webpack-dev-server').ProxyConfigMap | null>} */
+const profiles = {
+  msw: {},
+  local: {
+    '/api': {
+      changeOrigin: true,
+      target: 'http://localhost:8080',
+      pathRewrite: {
+        '^/api': '',
+      },
+    },
+  },
+  dev: {
+    '/api': {
+      changeOrigin: true,
+      target: 'https://dev.yozm.cafe',
+    },
+    '/images': {
+      changeOrigin: true,
+      target: 'https://dev.yozm.cafe',
+    },
+  },
+  prod: {
+    '/api': {
+      changeOrigin: true,
+      target: 'https://yozm.cafe',
+    },
+    '/images': {
+      changeOrigin: true,
+      target: 'https://yozm.cafe',
+    },
+  },
+};
+
+program.option(
+  '--profile <profile>',
+  `API 서버 프로필을 지정합니다. ${Object.keys(profiles).join(', ')} 중 하나를 선택할 수 있습니다`,
+  'msw',
+);
+program.parse();
+
+const options = program.opts();
+const profile = profiles[options.profile];
+
+if (!profile) {
+  program.error(
+    `"${options.profile}"는 존재하지 않는 프로필입니다. ${Object.keys(profiles).join(', ')} 중 하나를 선택해주세요.`,
+  );
+}
+
+if (options.profile === 'msw') {
+  process.env.MSW = 'true';
+}
+
+const compiler = webpack(webpackConfig);
+const devServerConfig = {
+  ...webpackConfig.devServer,
+  proxy: profile,
+};
+const server = new WebpackDevServer(devServerConfig, compiler);
+
+const runServer = async () => {
+  console.log(`Starting server with profile ${options.profile}`);
+  await server.start();
+};
+
+runServer();

client/src/App.tsx

@@ -3,6 +3,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { RouterProvider } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { AuthProvider } from './context/AuthContext';
+import { ToastProvider } from './context/ToastContext';
 import router from './router';
 import GlobalStyle from './styles/GlobalStyle';
 import ResetStyle from './styles/ResetStyle';
@@ -23,9 +24,11 @@ const App = () => {
       <ThemeProvider theme={theme}>
         <ResetStyle />
         <GlobalStyle />
-        <AuthProvider>
-          <RouterProvider router={router} />
-        </AuthProvider>
+        <ToastProvider>
+          <AuthProvider>
+            <RouterProvider router={router} />
+          </AuthProvider>
+        </ToastProvider>
       </ThemeProvider>
     </QueryClientProvider>
   );

client/src/client.ts

@@ -1,4 +1,4 @@
-import type { AuthProvider, AuthUrl, Cafe, CafeMenu, LikedCafe, Rank, SearchedCafe, User } from './types';
+import type { AuthProvider, AuthUrl, Cafe, CafeMapLocation, CafeMenu, LikedCafe, MapBounds, Rank, SearchedCafe, User } from './types';
 
 export class ClientNetworkError extends Error {
   constructor() {
@@ -118,6 +118,17 @@ class Client {
     return this.fetchJson<SearchedCafe[]>(`/cafes/search?${new URLSearchParams(sanitizedSearchParams).toString()}`);
   }
 
+  getCafesNearLocation(
+    longitude: MapBounds['longitude'],
+    latitude: MapBounds['latitude'],
+    longitudeDelta: MapBounds['longitudeDelta'],
+    latitudeDelta: MapBounds['latitudeDelta'],
+  ) {
+    return this.fetchJson<CafeMapLocation[]>(
+      `/cafes/location?longitude=${longitude}&latitude=${latitude}&longitudeDelta=${longitudeDelta}&latitudeDelta=${latitudeDelta}`,
+    );
+  }
+
   /**
    * 인증 수행 시, OAuth 제공자(provider)와 인증 코드(Authorization Code) 값을
    * 백엔드에 전송하면 백엔드에서 발급한 accessToken을 응답으로 받을 수 있다.

client/src/components/Button.tsx

@@ -38,13 +38,9 @@ const ButtonVariants = {
 };
 
 const Container = styled.button<ButtonProps>`
-  cursor: pointer;
-
   padding: ${({ theme }) => theme.space['1.5']} ${({ theme }) => theme.space[2]};
-
   font-size: 16px;
   font-weight: 500;
-
   border-radius: 40px;
   ${(props) => ButtonVariants[props.$variant || 'default']}
   ${(props) => props.$fullWidth && 'width: 100%;'}

client/src/components/CafeActionBar.tsx

@@ -94,8 +94,6 @@ const ActionButton = (props: ActionButtonProps) => {
 };
 
 const ActionButtonContainer = styled.button`
-  cursor: pointer;
-
   display: flex;
   flex-direction: column;
   align-items: center;