채널톡 부착 및 stylelint 이슈 수정 (#450)

* feat: 채널톡 설치

* chore: stylelint 설정 고도화

.stylelintrc.json

@@ -9,7 +9,7 @@
       "files": [
         "**/*.tsx"
       ],
-      "customSyntax": "@stylelint/postcss-css-in-js",
+      "customSyntax": "postcss-styled-syntax",
       "rules": {
         "value-keyword-case": null
       }

.vscode/settings.json

@@ -6,10 +6,11 @@
   "eslint.nodePath": ".yarn/sdks",
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "stylelint.validate": ["css", "scss", "typescriptreact"],
+
+  "stylelint.validate": ["css", "scss", "typescript", "typescriptreact"],
   "stylelint.configFile": ".stylelintrc.json",
+  "stylelint.customSyntax": "postcss-styled-syntax",
 
-  "stylelint.packageManager": "yarn",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
     "source.fixAll.stylelint": true

@types/environment.d.ts

@@ -10,5 +10,6 @@ namespace NodeJS {
     CLOUDFLARE_ENV: string;
     NEXTAUTH_URL: string;
     NEXTAUTH_SECRET: string;
+    NEXT_PUBLIC_CHANNEL_TALK_PLUGIN_KEY: string;
   }
 }

package.json

@@ -38,6 +38,7 @@
     ]
   },
   "dependencies": {
+    "@channel.io/channel-web-sdk-loader": "^1.1.1",
     "@egjs/flicking": "^4.10.7",
     "@egjs/flicking-plugins": "^4.7.0",
     "@egjs/react-flicking": "^4.10.9",
@@ -78,7 +79,6 @@
     "@storybook/nextjs": "^7.0.6",
     "@storybook/react": "^7.0.6",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@stylelint/postcss-css-in-js": "^0.38.0",
     "@tanstack/react-query-devtools": "^4.29.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -114,7 +114,7 @@
     "next-router-mock": "^0.9.3",
     "next-sitemap": "^4.1.3",
     "postcss": "^8.4.31",
-    "postcss-syntax": "^0.36.2",
+    "postcss-styled-syntax": "^0.5.0",
     "prettier": "^2.8.7",
     "react-copy-to-clipboard": "^5.1.0",
     "storybook": "^7.0.6",

src/pages/404.page.tsx

@@ -49,13 +49,11 @@ const sectionCss = css`
 
 const headingCss = css`
   ${HEAD_1}
-
   margin-bottom: 6px;
 `;
 
 const smallCss = (theme: Theme) => css`
   ${BODY_1};
-
   color: ${theme.colors.gray_300};
 `;
 

src/pages/_app.page.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { AppProps } from 'next/app';
 import { SessionProvider } from 'next-auth/react';
+import * as ChannelTalk from '@channel.io/channel-web-sdk-loader';
 import { css, type Theme, ThemeProvider } from '@emotion/react';
 import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -20,6 +21,11 @@ import GlobalStyles from '~/styles/GlobalStyle';
 import defaultTheme from '~/styles/theme';
 import { type NextPageWithLayout } from '~/types/page';
 
+ChannelTalk.loadScript();
+ChannelTalk.boot({
+  pluginKey: process.env.NEXT_PUBLIC_CHANNEL_TALK_PLUGIN_KEY,
+});
+
 type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };