OnadWeb => next 변환

.eslintrc.js

@@ -68,6 +68,8 @@ module.exports = {
     '@typescript-eslint/no-var-requires': 'warn',
     '@typescript-eslint/no-use-before-define': 2,
     '@typescript-eslint/no-shadow': 'error',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/camelcase': 'off',
   },
   ignorePatterns: ['generated/**/*.tsx'],
   settings: {

api/src/resources/auth/guards/preCreatorTwitch.filter.ts

@@ -16,7 +16,7 @@ export class PreCreatorTwitchExceptionFilter implements ExceptionFilter {
 
     console.log('[PreCreatorTwitchExceptionFilter] ERROR => ', err);
     if (err.message) {
-      res.redirect(`${this.HOST}/creator/signup/pre-user?${err.message}&platform=twitch`);
-    } else res.redirect(`${this.HOST}/creator/signup/pre-user?error=error&platform=twitch`);
+      res.redirect(`${this.HOST}/regist/pre-user?${err.message}&platform=twitch`);
+    } else res.redirect(`${this.HOST}/regist/pre-user?error=error&platform=twitch`);
   }
 }

api/src/resources/auth/login.controller.ts

@@ -123,7 +123,7 @@ export class LoginController {
     const { creatorId, creatorName, accessToken } = req.user as any;
     res.redirect(
       [
-        `${this.HOST}/creator/signup/pre-user`,
+        `${this.HOST}/regist/pre-user`,
         `?creatorId=${creatorId}`,
         `&creatorName=${creatorName}`,
         `&accessToken=${accessToken}`,

api/src/resources/auth/strategies/marketerKakao.strategy.ts

@@ -27,6 +27,6 @@ export class MarketerKakaoStrategy extends PassportStrategy(Strategy, 'kakao') {
     refreshToken: string,
     profile: KakaoProfile,
   ): Promise<MarketerSession> {
-    return this.authService.naverLogin(profile);
+    return this.authService.kakaoLogin(profile);
   }
 }

api/src/resources/marketer/marketer.controller.ts

@@ -65,7 +65,7 @@ export class MarketerController {
   // * 광고주 생성 ( 소셜 플랫폼 로그인 시 )
   @Post('/platform')
   createMarketerWithSocialLogin(
-    dto: CreateNewMarketerWithSocialLoginDto,
+    @Body() dto: CreateNewMarketerWithSocialLoginDto,
   ): Promise<CreateNewMarketerRes> {
     return this.marketerService.createNewMarketerWithSocialLogin(dto);
   }

api/src/resources/marketer/marketer.service.ts

@@ -113,7 +113,6 @@ export class MarketerService {
     const data = await this.marketerInfoRepo.findOne({
       where: { marketerMail: dto.marketerMail, marketerName: dto.marketerName },
     });
-
     return { marketerId: data.marketerId };
   }
 

client-next/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+#lint
+.eslintrc
+
+# yarn
+yarn.lock

client-next/README.md

@@ -0,0 +1,64 @@
+# client-ts > client-next rewriting
+
+기존 client-ts에 client side 코드들을
+next.js를 기반으로 재구축
+
+next에 cra migration을 하지 않고 초기 빌딩부터 CNA로 빌딩
+
+연동서버는 api, 프론트는 client-next로
+
+서버 시동은 기존과 동일,
+프론트 시동도 기존과 동일
+
+~~~bash
+./client-next
+
+# 개발환경
+> yarn dev
+
+# 빌드
+> yarn build
+
+# 빌드 실행
+> yarn start
+~~~
+
+## Client-next 구조
+```bash
+├── assets                  : 외부 자원 - 다운로드 폰트
+│   ├── fonts               
+├── atoms                   : Material-UI 기반 커스텀 컴포넌트
+│   ├── table
+│   ├── avatar
+│   └── ...
+├── components              : 각 page 하위 구성 컴포넌트들
+│   ├── mainpage            
+│   ├── mypage
+│   ├── shared
+│   └── temp
+├── config                  : 설정값
+├── constants               : 공유 상수값
+├── context                 : 마케터 컨텍스트
+├── pages                   : 라우팅 페이지
+│   ├── introduction
+│   ├── mypage
+│   ├── policy
+│   └── ...
+├── public                  : 이미지 및 manifest 등 구성자원
+│   ├── creatorList
+│   ├── door
+│   └── ...
+├── source                  : 메인페이지 사용 텍스트
+├── store                   : zustand-store
+├── style                   : 글로벌 CSS 및 메인페이지 CSS
+│   ├── mainpage
+│   └── ...
+├── utils                   : utils 관련 파일
+│   ├── aws
+│   ├── hooks
+│   └── ...
+├── next.config.js          : next.js 환경설정
+├── theme.tsx               : 공유 테마 파일
+└── tsconifg.json           : 프로젝트 typescript 설정
+``` 
+

client-next/atoms/avatar/editableAvatar.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { Avatar, Button, CircularProgress, makeStyles, Typography } from '@material-ui/core';
+import { CameraAlt } from '@material-ui/icons';
+import { useDialog } from '../../utils/hooks';
+
+const useStyles = makeStyles(theme => ({
+  avatarButton: {
+    margin: theme.spacing(1, 2, 1, 0),
+  },
+  avatar: {
+    width: theme.spacing(8),
+    height: theme.spacing(8),
+  },
+  small: {
+    width: theme.spacing(5),
+    height: theme.spacing(5),
+  },
+  avatarBackgroundOnHover: {
+    position: 'absolute',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    width: '100%',
+    height: '100%',
+  },
+  avatarBackdrop: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    visibility: 'hidden',
+  },
+  backdropText: {
+    color: theme.palette.common.white,
+  },
+}));
+
+export interface EditableAvatarProps {
+  src?: string;
+  small?: boolean;
+  changeLoading?: boolean;
+  avatarClassName?: string;
+  onProfileImageChange: (e: React.FormEvent<HTMLElement>) => void;
+}
+export default function EditableAvatar({
+  src,
+  small,
+  changeLoading,
+  avatarClassName,
+  onProfileImageChange,
+}: EditableAvatarProps): JSX.Element {
+  const classes = useStyles();
+  // 마우스 hover 감지를 위해
+  const isAvatarHover = useDialog();
+
+  return (
+    <Button
+      className={classes.avatarButton}
+      onMouseEnter={isAvatarHover.handleOpen}
+      onMouseLeave={isAvatarHover.handleClose}
+      component="label"
+      onChange={onProfileImageChange}
+      disabled={changeLoading}
+    >
+      {!changeLoading ? (
+        <Avatar
+          variant="circular"
+          className={classnames(classes.avatar, avatarClassName, { [classes.small]: small })}
+          src={changeLoading ? '' : src}
+        />
+      ) : (
+        <Avatar variant="circular" className={classnames(classes.avatar, avatarClassName)}>
+          <CircularProgress />
+        </Avatar>
+      )}
+      <input type="file" accept="image/jpeg,image/png" tabIndex={-1} hidden />
+      {isAvatarHover.open && <div className={classes.avatarBackgroundOnHover} />}
+      {isAvatarHover.open && (
+        <div
+          className={classes.avatarBackdrop}
+          style={{ visibility: isAvatarHover.open ? 'visible' : 'hidden' }}
+        >
+          <Typography variant="body2" className={classes.backdropText}>
+            <CameraAlt fontSize="small" />
+            <br />
+            편집
+          </Typography>
+        </div>
+      )}
+    </Button>
+  );
+}

client-next/atoms/banner/onadBanner.tsx

@@ -0,0 +1,70 @@
+import { ButtonBase } from '@material-ui/core';
+import * as React from 'react';
+import isVideo from '../../utils/isVideo';
+
+export interface OnadBannerProps {
+  src: string;
+  alt?: string;
+  width?: string | number;
+  height?: string | number;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  onError?: (e: React.SyntheticEvent<HTMLElement>) => void;
+  [key: string]: any;
+}
+
+export default function OnadBanner({
+  src,
+  alt = '',
+  width = 320,
+  height = 160,
+  onClick,
+  onError,
+  ...rest
+}: OnadBannerProps): JSX.Element {
+  if (isVideo(src)) {
+    if (onClick) {
+      return (
+        <ButtonBase onClick={onClick}>
+          <video
+            draggable={false}
+            autoPlay
+            loop
+            muted
+            onError={onError}
+            width={width}
+            height={height}
+            {...rest}
+          >
+            <source src={src} type="video/mp4" />
+            <track srcLang="ko" kind="captions" />
+          </video>
+        </ButtonBase>
+      );
+    }
+    return (
+      <video
+        draggable={false}
+        autoPlay
+        loop
+        muted
+        onError={onError}
+        width={width}
+        height={height}
+        {...rest}
+      >
+        <source src={src} type="video/mp4" />
+        <track srcLang="ko" kind="captions" />
+      </video>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <ButtonBase onClick={onClick}>
+        <img draggable={false} src={src} alt={alt} width={width} height={height} {...rest} />
+      </ButtonBase>
+    );
+  }
+
+  return <img draggable={false} src={src} alt={alt} width={width} height={height} {...rest} />;
+}

client-next/atoms/banner/videoBanner.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface VideoProps
+  extends React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> {
+  src: string;
+  onError?: () => void;
+  [key: string]: any;
+}
+export default function VideoBanner({ onError, src, ...rest }: VideoProps): JSX.Element {
+  return (
+    <video {...rest} autoPlay loop muted onError={onError}>
+      <source src={src} type="video/mp4" />
+      <track srcLang="ko" kind="captions" />
+    </video>
+  );
+}