이벤트 준비

frontend/src/api/alarm.ts

@@ -57,15 +57,15 @@ export interface ReportApproveResult {
 }
 
 export interface ReportApproveResultResponse {
- reportId: number;
+ reportActionId: number;
  type: ReportType;
  reasons: ReportMessage[];
  content: string;
  createdAt: StringDate;
 }
 
 const transformReportApproveResultResponse = (reportApproveResult: ReportApproveResultResponse) => {
- const { reportId, type, reasons, content, createdAt } = reportApproveResult;
+ const { reportActionId: reportId, type, reasons, content, createdAt } = reportApproveResult;
  return { reportId, type, reasonList: reasons, content, createdAt };
 };
 

frontend/src/components/common/LogoButton/index.tsx

@@ -1,4 +1,6 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, useState } from 'react';
+
+import EventMascot from '@pages/EventMascot';
 
 import logo from '@assets/logo.svg';
 import votogether from '@assets/projectName.svg';
@@ -29,19 +31,29 @@ interface LogoButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export default function LogoButton({ content, ...rest }: LogoButtonProps) {
  const src = contentCategory[content].url;
  const ariaLabelText = contentCategory[content].name;
+ const [count, setCount] = useState(0);
+
+ //이벤트를 위한 코드
+ const handleLogoClick = () => {
+ if (count > 5) return;
+
+ setCount(count + 1);
+ };
 
  if (content === 'full') {
  return (
  <S.Button content={content} aria-label={ariaLabelText} {...rest}>
- <img src={logo} alt="로고 아이콘" />
+ <img src={logo} alt="로고 아이콘" onClick={handleLogoClick} />
+ {count > 5 && <EventMascot type={'ma'} />}
  <img src={votogether} alt="보투게더 아이콘" />
  </S.Button>
  );
  }
 
  return (
  <S.Button content={content} aria-label={ariaLabelText} {...rest}>
- <img src={src} alt="보투게더 아이콘" />
+ <img src={src} alt="보투게더 아이콘" onClick={handleLogoClick} />
+ {count > 5 && <EventMascot type={'ma'} />}
  </S.Button>
  );
 }

frontend/src/components/common/UpButton/index.tsx

@@ -1,15 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import chevronUp from '@assets/chevron_up_primary.svg';
+import mascotYo from '@assets/dangseon-yo.png';
 
 import * as S from './style';
 
 interface UpButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export default function UpButton({ ...rest }: UpButtonProps) {
+ const [count, setCount] = useState(0);
+
+ //이벤트를 위한 코드
+ const handleLogoClick = () => {
+ if (count > 5) return;
+
+ setCount(count + 1);
+ };
+ const handleClick = () => {
+ setCount(0);
+ };
+
  return (
- <S.Button {...rest}>
- <img src={chevronUp} alt="페이지 최상단으로 스크롤 올리기" />
- </S.Button>
+ <>
+ <S.Button {...rest}>
+ <img src={chevronUp} alt="페이지 최상단으로 스크롤 올리기" onClick={handleLogoClick} />
+ </S.Button>
+ <S.Image src={mascotYo} onClick={handleClick} $isMoving={count > 5} />
+ </>
  );
 }

frontend/src/components/common/UpButton/style.ts

@@ -10,3 +10,31 @@ export const Button = styled.button`
 
  cursor: pointer;
 `;
+
+//이벤트를 위한 코드
+export const Image = styled.img<{ $isMoving: boolean }>`
+ width: 50px;
+ height: 50px;
+
+ position: absolute;
+ right: 13px;
+ bottom: 83px;
+ z-index: -1;
+
+ ${props =>
+ props.$isMoving
+ ? `animation: move 1s linear infinite;
+
+ @keyframes move {
+ 0% {
+ right: 13px;
+ }
+ 50% {
+ right: 200px;
+ }
+ 100% {
+ right: 13px;
+ }
+ }`
+ : ''};
+`;

frontend/src/hooks/query/user/useUserInfo.ts

@@ -11,8 +11,6 @@ export const useUserInfo = (isLoggedIn: boolean) => {
  [QUERY_KEY.USER_INFO, isLoggedIn],
  () => getUserInfo(isLoggedIn),
  {
- cacheTime: 60 * 60 * 1000,
- staleTime: 60 * 60 * 1000,
  suspense: true,
  }
  );

frontend/src/mocks/mockData/reportApproveResult.ts

@@ -1,7 +1,7 @@
 import { ReportApproveResultResponse } from '@api/alarm';
 
 export const MOCK_REPORT_APPROVE_RESULT: ReportApproveResultResponse = {
- reportId: 1,
+ reportActionId: 1,
  type: 'POST',
  reasons: ['BEHAVIOR', 'SPECIFIC_PERSON', 'PRIVACY', 'SPAMMING', 'BEHAVIOR'],
  content: '10004',

frontend/src/pages/EventMascot/index.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+import mascotYo from '@assets/dangseon-yo.png';
+import mascot from '@assets/dangseon.png';
+
+import * as S from './style';
+
+//이벤트를 위한 코드
+export default function EventMascot({ type }: { type: 'ma' | 'mayo' }) {
+ const [isVisible, setIsVisible] = useState(true);
+
+ const handleClick = () => {
+ setIsVisible(false);
+ };
+
+ return (
+ <S.Container onClick={handleClick} $isVisible={isVisible}>
+ <S.Image src={type === 'ma' ? mascot : mascotYo} />
+ </S.Container>
+ );
+}

frontend/src/pages/EventMascot/style.ts

@@ -0,0 +1,22 @@
+import { styled } from 'styled-components';
+
+import { theme } from '@styles/theme';
+
+//이벤트를 위한 코드
+export const Container = styled.div<{ $isVisible: boolean }>`
+ display: ${props => (props.$isVisible ? '' : 'none')};
+
+ position: absolute;
+ top: 40vh;
+ left: 40vw;
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ top: 45vh;
+ left: 45vw;
+ }
+`;
+
+export const Image = styled.img`
+ width: 100px;
+ height: 100px;
+`;

frontend/src/types/time.ts

@@ -10,7 +10,9 @@ export interface DHMTime {
 /**
  * yyyy-mm-dd HH-MM
  */
-export type StringDate = `${number}-${number}-${number} ${number}:${number}`;
+export type StringDate = `${number}-${number | string}-${number | string} ${number | string}:${
+ | number
+ | string}`;
 
 /**
  * yyyy-mm-dd

frontend/src/utils/post/addTimeToDate.ts

@@ -15,10 +15,10 @@ export const addTimeToDate = (addTime: DHMTime, baseTime: Date): StringDate => {
  newTime.setMinutes(baseTime.getMinutes() + minute);
 
  const newYear = newTime.getFullYear();
- const newDay = Number(String(newTime.getDate()).padStart(2, '0'));
- const newMonth = Number(String(newTime.getMonth() + 1).padStart(2, '0'));
- const newHour = Number(String(newTime.getHours()).padStart(2, '0'));
- const newMinute = Number(String(newTime.getMinutes()).padStart(2, '0'));
+ const newDay = String(newTime.getDate()).padStart(2, '0');
+ const newMonth = String(newTime.getMonth() + 1).padStart(2, '0');
+ const newHour = String(newTime.getHours()).padStart(2, '0');
+ const newMinute = String(newTime.getMinutes()).padStart(2, '0');
 
  return `${newYear}-${newMonth}-${newDay} ${newHour}:${newMinute}`;
 };