chat main component (after #4 merged)

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = {
       1,
       { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
     ],
+    'react/jsx-props-no-spreading': 'off',
     'no-param-reassign': [
       'error',
       { props: true, ignorePropertyModificationsForRegex: ['^draft'] },

.github/workflows/chromatic.yml

@@ -0,0 +1,15 @@
+name: 'Storybook Deployment'
+
+# Event for the workflow
+on: push
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - run: yarn
+      - uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GH_TOKEN }}

.storybook/main.js

@@ -0,0 +1,25 @@
+const custom = require('../config/webpack/webpack.common');
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: '@storybook/react',
+  core: {
+    builder: 'webpack5',
+  },
+  webpackFinal: async (config) => {
+    const {
+      module: { rules },
+      resolve: { alias },
+    } = custom;
+
+    return {
+      ...config,
+      module: { ...config.module, rules },
+      resolve: {
+        ...config.resolve,
+        alias,
+      },
+    };
+  },
+};

.storybook/preview.js

@@ -0,0 +1,26 @@
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from '@emotion/react';
+import GlobalStyle from '../src/styles/GlobalStyle';
+
+import { primaryTheme } from '../src/styles/theme';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => (
+    <RecoilRoot>
+      <ThemeProvider theme={primaryTheme}>
+        <GlobalStyle />
+        <Story />
+      </ThemeProvider>
+    </RecoilRoot>
+  ),
+];

config/.swcrc

@@ -0,0 +1,23 @@
+{
+  "jsc": {
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "throwIfNamespace": true,
+        "importSource": "@emotion/react"
+      }
+    },
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    }
+  },
+  "env": {
+    "targets": ">= 1%, not dead",
+    "mode": "usage",
+    "coreJs": 3
+  },
+  "minify": true
+}

config/jest.config.js

@@ -1,3 +1,7 @@
+const fs = require('fs');
+
+const swcConfig = JSON.parse(fs.readFileSync(`${__dirname}/.swcrc`, 'utf-8'));
+
 module.exports = {
   rootDir: '../',
   testEnvironment: 'jsdom',
@@ -7,8 +11,7 @@ module.exports = {
   transform: {
     '.+\\.(svg|css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
-    '^.+\\.(js|jsx)?$': 'babel-jest',
-    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    '^.+\\.(j|t)sx?$': ['@swc/jest', { ...swcConfig }],
   },
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
 };

config/webpack/paths.js

@@ -42,10 +42,11 @@ const resolveModule = (resolveFn, filePath) => {
 
 module.exports = {
   appPath: resolveApp('.'),
+  appSource: resolveApp('src'),
   appIndex: resolveModule(resolveApp, './src/index'),
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  babelConfig: resolveApp('config/babel.config.json'),
+  swcConfig: resolveApp('config/.swcrc'),
   publicUrlOrPath,
 };

config/webpack/webpack.common.js

@@ -28,16 +28,9 @@ module.exports = {
         test: /\.(js|jsx|ts|tsx)$/,
         use: [
           {
-            loader: 'babel-loader',
+            loader: 'swc-loader',
             options: {
-              babelrc: true,
-              configFile: paths.babelConfig,
-            },
-          },
-          {
-            loader: 'ts-loader',
-            options: {
-              transpileOnly: true,
+              configFile: paths.swcConfig,
             },
           },
         ],
@@ -89,5 +82,8 @@ module.exports = {
   ],
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+    alias: {
+      '@': paths.appSource,
+    },
   },
 };

package.json

@@ -15,16 +15,19 @@
     "precommit": "yarn lint-staged --config ./config/lintstagedrc.json",
     "test": "jest --config ./config/jest.config.js",
     "test:watch": "jest --watchAll --config ./config/jest.config.js",
-    "test:coverage": "jest --coverage --config ./config/jest.config.js"
+    "test:coverage": "jest --coverage --config ./config/jest.config.js",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/plugin-transform-runtime": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@babel/runtime-corejs3": "^7.15.4",
-    "@emotion/babel-plugin": "^11.3.0",
+    "@storybook/addon-actions": "^6.4.4",
+    "@storybook/addon-essentials": "^6.4.4",
+    "@storybook/addon-links": "^6.4.4",
+    "@storybook/builder-webpack5": "^6.4.4",
+    "@storybook/manager-webpack5": "^6.4.4",
+    "@storybook/react": "^6.4.4",
+    "@swc/core": "^1.2.115",
+    "@swc/jest": "^0.2.11",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.2",
@@ -33,10 +36,8 @@
     "@types/react-router-dom": "^5.3.1",
     "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@typescript-eslint/parser": "^4.29.3",
-    "babel-jest": "^27.3.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-root-import": "^6.6.0",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "chromatic": "^6.1.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.4.0",
@@ -63,8 +64,7 @@
     "prettier": "^2.4.1",
     "style-loader": "^3.3.0",
     "svg-url-loader": "^7.1.1",
-    "ts-jest": "^27.0.7",
-    "ts-loader": "^9.2.6",
+    "swc-loader": "^0.1.15",
     "typescript": "^4.4.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.56.0",
@@ -73,7 +73,6 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
     "@emotion/react": "^11.5.0",
     "core-js": "3",
     "react": "^17.0.2",

src/@types/image.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string;
+  export default value;
+}

src/App.tsx

@@ -1,9 +1,25 @@
 import React, { FC } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from '@emotion/react';
 
-import TelbbyServiceClient from './components/TelbbyServiceClient';
+import { primaryTheme, subTheme } from './styles/theme';
+import GlobalStyle from './styles/GlobalStyle';
+import TelbbyChat from './components/TelbbyChat';
 
 const App: FC = () => {
-  return <TelbbyServiceClient />;
+  // @TODO: primary 정보를 가져와 어떤 theme을 전달할지 결정해야 합니다.
+  const isPrimary = true;
+  return (
+    <BrowserRouter>
+      <RecoilRoot>
+        <ThemeProvider theme={isPrimary ? primaryTheme : subTheme}>
+          <GlobalStyle />
+          <TelbbyChat />
+        </ThemeProvider>
+      </RecoilRoot>
+    </BrowserRouter>
+  );
 };
 
 export default App;

src/components/Main/BottomButton.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+
+import {
+  mainBottomSectionStyle,
+  mainBottomButtonWrapperStyle,
+  mainBottomButtonStyle,
+} from './style';
+
+const BottomButton: FC = () => {
+  // @TODO: 버튼 클릭시 채팅 컴포넌트로 넘어가도록 해야합니다.
+
+  return (
+    <div css={mainBottomSectionStyle}>
+      <div css={mainBottomButtonWrapperStyle}>
+        <p>
+          나도 프로젝트 피드백 남기고 <br /> 베스트 리뷰어 되기
+        </p>
+        <button css={mainBottomButtonStyle} type="button">
+          GO
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default BottomButton;

src/components/Main/Nav.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { useTheme } from '@emotion/react';
+
+import ExitBtn from '@/components/common/ExitBtn';
+
+import { mainNavStyle } from './style';
+
+type NavProps = {
+  handleExit: () => void;
+  image: string;
+  name: string;
+};
+
+const Nav: FC<NavProps> = ({ handleExit, image, name }) => {
+  const theme = useTheme();
+
+  return (
+    <nav css={mainNavStyle}>
+      <img src={image} alt={`${name} logo`} />
+      <ExitBtn
+        width="14px"
+        height="14px"
+        color={theme.colorReverse}
+        onClick={handleExit}
+      />
+    </nav>
+  );
+};
+
+export default Nav;

src/components/Main/PresentationalMain.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+
+import { chatMainWrapperStyle } from './style';
+import Nav from './Nav';
+import ProjectIntro from './ProjectIntro';
+import BottomButton from './BottomButton';
+import FeedbackList from '@/components/feedback/FeedbackList';
+
+import type { Project } from '@/types/project';
+
+type PresentationalMainProps = {
+  project: Project;
+  handleExit: () => void;
+};
+
+const PresentationalMain: FC<PresentationalMainProps> = ({
+  project,
+  handleExit,
+}) => {
+  const {
+    name,
+    image,
+    description,
+    feedbackList: feedbacks,
+    totalFeedbackCount,
+  } = project;
+
+  return (
+    <div css={chatMainWrapperStyle}>
+      <Nav name={name} image={image} handleExit={handleExit} />
+      <ProjectIntro name={name} description={description} />
+      <FeedbackList
+        feedbacks={feedbacks}
+        totalFeedbackCount={totalFeedbackCount}
+      />
+      <BottomButton />
+    </div>
+  );
+};
+
+export default PresentationalMain;