Merge branch 'release/0.1.8'

boostcampwm-2024 · Dec 4, 2024 · e12110b · e12110b
2 parents 12df503 + d58d9e7
commit e12110b
Show file tree

Hide file tree

Showing 16 changed files with 210 additions and 98 deletions.
diff --git a/@noctaCrdt/Interfaces.ts b/@noctaCrdt/Interfaces.ts
@@ -15,7 +15,15 @@ export type ElementType =
   | "blockquote"
   | "hr";
 
-export type AnimationType = "none" | "highlight" | "gradation";
+export type AnimationType =
+  | "none"
+  | "highlight"
+  | "rainbow"
+  | "fadeIn"
+  | "slideIn"
+  | "pulse"
+  | "gradation"
+  | "bounce";
 
 export type TextStyleType = "bold" | "italic" | "underline" | "strikethrough";
 

diff --git a/client/index.html b/client/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
 
 <head>
   <meta charset="UTF-8" />
@@ -14,19 +14,13 @@
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://www.nocta.site/" />
   <meta property="og:title" content="Nocta" />
-  <meta
-    property="og:description"
-    content="밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터"
-  />
+  <meta property="og:description" content="밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터" />
   <meta property="og:image" content="https://www.nocta.site/images/nocta.png" />
 
   <meta property="twitter:card" content="summary_large_image" />
   <meta property="twitter:url" content="https://www.nocta.site/" />
   <meta property="twitter:title" content="Nocta" />
-  <meta
-    property="twitter:description"
-    content="밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터"
-  />
+  <meta property="twitter:description" content="밤하늘의 별빛처럼, 자유로운 인터랙션 실시간 에디터" />
   <meta property="twitter:image" content="https://www.nocta.site/images/nocta.png" />
 
   <meta name="robots" content="index, follow" />

diff --git a/client/src/constants/option.ts b/client/src/constants/option.ts
@@ -22,7 +22,12 @@ export const OPTION_CATEGORIES = {
     options: [
       { id: "none", label: "없음" },
       { id: "highlight", label: "하이라이트" },
+      { id: "rainbow", label: "레인보우" },
       { id: "gradation", label: "그라데이션" },
+      { id: "fadeIn", label: "페이드 인" },
+      { id: "slideIn", label: "슬라이드 인" },
+      { id: "pulse", label: "펄스" },
+      { id: "bounce", label: "바운스" },
     ] as { id: AnimationType; label: string }[],
   },
   DUPLICATE: {

diff --git a/client/src/features/editor/components/IconBlock/IconBlock.style.ts b/client/src/features/editor/components/IconBlock/IconBlock.style.ts
@@ -4,8 +4,8 @@ import { css, cva } from "@styled-system/css";
 export const iconContainerStyle = css({
   display: "flex",
   justifyContent: "center",
-  alignItems: "center",
-  minWidth: "24px",
+  width: "24px",
+  height: "24px",
   marginRight: "8px",
 });
 

diff --git a/client/src/features/editor/components/MenuBlock/MenuBlock.style.ts b/client/src/features/editor/components/MenuBlock/MenuBlock.style.ts
@@ -8,8 +8,8 @@ export const menuBlockStyle = css({
   left: 0,
   justifyContent: "center",
   alignItems: "center",
-  width: "20px",
-  height: "20px",
+  width: "24px",
+  height: "24px",
   marginLeft: "-20px",
   opacity: 0,
   transition: "opacity 0.2s ease-in-out",

diff --git a/client/src/features/editor/components/block/Block.animation.ts b/client/src/features/editor/components/block/Block.animation.ts
@@ -1,46 +1,60 @@
+const defaultState = {
+  background: "transparent",
+  opacity: 1,
+  x: 0,
+  y: 0,
+  scale: 1,
+  backgroundSize: "100% 100%",
+  backgroundPosition: "0 0",
+};
+
 const none = {
   initial: {
-    background: "transparent",
+    ...defaultState,
   },
   animate: {
-    background: "transparent",
+    ...defaultState,
   },
 };
 
 const highlight = {
   initial: {
-    background: `linear-gradient(to right, 
-          #BFBFFF70 0%, 
-          #BFBFFF70 0%, 
-          transparent 0%, 
-          transparent 100%
-        )`,
+    ...defaultState,
+    background: `linear-gradient(to right,
+      #BFBFFF70 0%,
+      #BFBFFF70 0%,
+      transparent 0%,
+      transparent 100%
+    )`,
   },
   animate: {
-    background: `linear-gradient(to right, 
-          #BFBFFF70 0%, 
-          #BFBFFF70 100%, 
-          transparent 100%, 
-          transparent 100%
-        )`,
+    ...defaultState,
+    background: `linear-gradient(to right,
+      #BFBFFF70 0%,
+      #BFBFFF70 100%,
+      transparent 100%,
+      transparent 100%
+    )`,
     transition: {
       duration: 1,
       ease: "linear",
     },
   },
 };
 
-const gradation = {
+const rainbow = {
   initial: {
+    ...defaultState,
     background: `linear-gradient(to right,
-      #BFBFFF 0%,    
-      #B0E2FF 50%,   
-      #FFE4E1 100%   
+      #BFBFFF 0%,
+      #B0E2FF 50%,
+      #FFE4E1 100%
     )`,
     backgroundSize: "300% 100%",
     backgroundPosition: "100% 0",
   },
   animate: {
+    ...defaultState,
     background: [
       `linear-gradient(to right,
         #BFBFFF 0%,
@@ -63,6 +77,7 @@ const gradation = {
         #FFE4E1 100%
       )`,
     ],
+    backgroundSize: "300% 100%",
     transition: {
       duration: 3,
       ease: "linear",
@@ -72,8 +87,110 @@ const gradation = {
   },
 };
 
+const fadeIn = {
+  initial: {
+    ...defaultState,
+    opacity: 0,
+  },
+  animate: {
+    ...defaultState,
+    opacity: 1,
+    transition: {
+      duration: 1,
+      ease: "easeOut",
+    },
+  },
+};
+
+const slideIn = {
+  initial: {
+    ...defaultState,
+    x: -20,
+    opacity: 0,
+  },
+  animate: {
+    ...defaultState,
+    x: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.5,
+      ease: "easeOut",
+    },
+  },
+};
+
+const pulse = {
+  initial: {
+    ...defaultState,
+    scale: 1,
+  },
+  animate: {
+    ...defaultState,
+    scale: [1, 1.02, 1],
+    transition: {
+      duration: 1.5,
+      ease: "easeInOut",
+      repeat: Infinity,
+    },
+  },
+};
+
+const gradation = {
+  initial: {
+    ...defaultState,
+    background: `linear-gradient(
+      90deg,
+      rgba(255,255,255,0) 0%,
+      #BFBFFF80 70%,
+      rgba(255,255,255,0) 100%
+    )`,
+    backgroundSize: "200% 100%",
+    backgroundPosition: "100% 0",
+  },
+  animate: {
+    ...defaultState,
+    background: `linear-gradient(
+      90deg,
+      rgba(255,255,255,0) 0%,
+      #BFBFFF80 70%,
+      rgba(255,255,255,0) 100%
+    )`,
+    backgroundSize: "200% 100%",
+    backgroundPosition: ["100% 0", "-100% 0"],
+    transition: {
+      duration: 2,
+      ease: "linear",
+      repeat: Infinity,
+    },
+  },
+};
+
+const bounce = {
+  initial: {
+    ...defaultState,
+    y: 0,
+  },
+  animate: {
+    ...defaultState,
+    y: [-2, 2, -2],
+    transition: {
+      duration: 1,
+      ease: "easeInOut",
+      repeat: Infinity,
+    },
+  },
+};
+
 export const blockAnimation = {
   none,
   highlight,
+  rainbow,
+  fadeIn,
+  slideIn,
+  pulse,
   gradation,
+  bounce,
 };
+
+// types.ts
+export type AnimationType = keyof typeof blockAnimation;
diff --git a/client/src/features/editor/components/block/Block.style.ts b/client/src/features/editor/components/block/Block.style.ts
@@ -38,8 +38,9 @@ export const contentWrapperStyle = cva({
     position: "relative",
     flex: 1,
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-start",
     width: "100%",
+    height: "100%",
   },
 });
 

diff --git a/server/src/auth/auth.controller.ts b/server/src/auth/auth.controller.ts
@@ -103,9 +103,6 @@ export class AuthController {
     // DB에서 refresh token 삭제
     await this.authService.removeRefreshToken(user.id);
 
-    // 사용자의 token version 증가
-    await this.authService.increaseTokenVersion(user);
-
     // 쿠키 삭제
     this.authService.clearCookie(req.res);
   }

diff --git a/server/src/auth/auth.service.ts b/server/src/auth/auth.service.ts
@@ -71,7 +71,6 @@ export class AuthService {
     return this.jwtService.sign({
       sub: user.id,
       email: user.email,
-      tokenVersion: await this.increaseTokenVersion(user),
     });
   }
 
@@ -87,12 +86,6 @@ export class AuthService {
     return refreshToken;
   }
 
-  async increaseTokenVersion(user: User): Promise<number> {
-    const tokenVersion = user.tokenVersion + 1;
-    await this.userModel.updateOne({ id: user.id }, { tokenVersion });
-    return tokenVersion;
-  }
-
   async login(user: User, res: Response): Promise<UserDto> {
     const accessToken = await this.generateAccessToken(user);
     const refreshToken = await this.generateRefreshToken(user.id);

diff --git a/server/src/auth/guards/jwt-auth.guard.ts b/server/src/auth/guards/jwt-auth.guard.ts
@@ -1,14 +1,9 @@
 import { Injectable, ExecutionContext, UnauthorizedException } from "@nestjs/common";
 import { AuthGuard } from "@nestjs/passport";
-import { AuthService } from "../auth.service";
-import { JwtService } from "@nestjs/jwt";
 
 @Injectable()
 export class JwtAuthGuard extends AuthGuard("jwt") {
-  constructor(
-    private readonly authService: AuthService,
-    private readonly jwtService: JwtService,
-  ) {
+  constructor() {
     super();
   }
 
@@ -22,14 +17,6 @@ export class JwtAuthGuard extends AuthGuard("jwt") {
 
     const canActivate = (await super.canActivate(context)) as boolean;
 
-    // Access Token의 tokenVersion과 사용자의 tokenVersion 일치 여부 확인
-    const decodedToken = this.jwtService.decode(token) as { sub: string; tokenVersion: number };
-    const user = await this.authService.findById(decodedToken.sub);
-
-    if (!user || user.tokenVersion !== decodedToken.tokenVersion) {
-      throw new UnauthorizedException("Invalid token version");
-    }
-
     return canActivate;
   }
 }
diff --git a/server/src/auth/schemas/user.schema.ts b/server/src/auth/schemas/user.schema.ts
@@ -18,9 +18,6 @@ export class User {
   @Prop({ required: true })
   name: string;
 
-  @Prop({ required: true, default: () => 0 })
-  tokenVersion: number;
-
   @Prop()
   refreshToken: string;
 

diff --git a/server/src/auth/test/auth.controller.spec.ts b/server/src/auth/test/auth.controller.spec.ts
@@ -25,7 +25,6 @@ describe("AuthController", () => {
     validateUser: jest.fn(),
     getProfile: jest.fn(),
     refresh: jest.fn(),
-    increaseTokenVersion: jest.fn(),
     isValidEmail: jest.fn(),
   };