BPVcznbxInt45bYXEX5@$pZKES`BHkZ
z$?87>Wwi@PZOV57P6rxU=1^fZQuF2i*Yn)oljw0`w#29J!Drz0bdj=>-m2)ugzQ4E
zhcvA8lHTj0dT|mRT%Po!-Ffmi`;5ThYl>w@t|=JkFAA!eT`1#8_0O_<&-s^Xp7a5i
zFG-|-jM*IgzPt+i&-3MXQoofm(0eb-kbJQONjaUT@r(A>lX*Y*Y|y#kP~VSf7;I6UezjeDq~@kI$laAMNpdR8kt|#e9MU
zp7^;zmY8<%q|UfBVNJ>j^8T|HQtr4=I+@cKwRuZIc-)rlh~4xt
zR
z+D(XF6^mt2YY-6`jqrsZV(#2U2nq^=ukRdq&h&$a`z*Lj@_=)f!Y|tPc8;I+8G)$i
z_1jmhT#u;eby&81H3PqJ(K5^nTY})=1qkqes=nKl8JOhkhVc#)Uyi^Sr}RD}uyolf
z+0tb(h+Mi7OCnY<<--VkNH_um=Q8iloZ*M5?w+rtz5^rRDC`^XOP3B`w0QZWMT?g+
z)fa?EV&1&P2oCN9@9RU>@yE2OUT}4pj)_jLFRi`<^%zG>pAZNOTjDo=egwkiM=;=_
zp$jo*&U^$0bb_Dd>5pk1UDlc44##nmUmm<2>ql;*+=kekz?_iqjUgf7%W^)38{-Fs0{-Jt*YQJE;ug`4#EYAS_
z%o%=q5BFJmw<$C9lP0+9oyWQ89qcFQ?d_aixyRW#yV#t-Kn>JDaei_2KdSW7*cw-)
QKL7v#07*qoM6N<$g8Le@2LJ#7
literal 0
HcmV?d00001
diff --git a/src/assets/profile/8.png b/src/assets/profile/8.png
new file mode 100644
index 0000000000000000000000000000000000000000..4941ed0eabb930483c532152c38d1433987aab54
GIT binary patch
literal 1840
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
af5(5=%gm+#K!`#B0000
\ No newline at end of file
diff --git a/src/components/AddModal.tsx b/src/components/AddModal.tsx
new file mode 100644
index 00000000..b223b398
--- /dev/null
+++ b/src/components/AddModal.tsx
@@ -0,0 +1,187 @@
+import { styled } from "styled-components";
+import Button from "./common/Button";
+import Modal from "./common/Modal";
+import ModalTitle from "./common/ModalTitle";
+import { useState } from "react";
+import { css } from "styled-components";
+import { theme } from "../styles/theme";
+import DatePickerComponent from "./DatePicker";
+import useDateStore from "../store/dateStore";
+import { AddEvent, addEvent } from "../lib/api/eventApi";
+import { MODAL_MESSAGE, EVENT_TYPE, TAB_ADD } from "../lib/util/constants";
+import { calcPeriods } from "../lib/util/functions";
+import useOpenModal from "../store/closeState";
+import { AiOutlineClose } from "react-icons/ai";
+import { notification } from "antd";
+import { useEventQuery } from "../hooks/useEventQuery";
+
+const AddModal = () => {
+ const [selected, setSelected] = useState(TAB_ADD[0]);
+ const { startDate, endDate } = useDateStore();
+ const { setOpenAddModal } = useOpenModal();
+ const { refetch } = useEventQuery("myevents");
+
+ const showNotification = (startDate: Date, endDate: Date | null) => {
+ notification.info({
+ message: `${selected === TAB_ADD[0] ? selected + "가" : selected + "이"} 신청되었습니다.`,
+ description: `${
+ endDate
+ ? `${startDate.toLocaleDateString()} ~ ${endDate.toLocaleDateString()}`
+ : `${startDate.toLocaleDateString()}`
+ }`,
+ placement: "top",
+ duration: 1.5,
+ });
+ };
+
+ const onSubmit = async (event: MouseEvent) => {
+ event.preventDefault();
+ const reqBody: AddEvent = new Object();
+
+ reqBody.startDate = startDate;
+ reqBody.eventType = EVENT_TYPE[selected];
+
+ if (selected === TAB_ADD[0]) {
+ if (!endDate) {
+ alert(MODAL_MESSAGE.PLEASE_ENDDATE);
+ return;
+ } else {
+ reqBody.endDate = endDate;
+ reqBody.count = calcPeriods(startDate, endDate);
+ }
+ } else {
+ reqBody.endDate = startDate;
+ }
+ try {
+ const res = await addEvent(reqBody);
+ res.status === 200 && showNotification(startDate, endDate);
+ setOpenAddModal(false);
+ refetch();
+ window.location.reload();
+ } catch (error) {
+ console.error(error);
+ throw error;
+ }
+ };
+
+ return (
+
+ 신청하기
+ setOpenAddModal(false)}>
+
+
+
+
+ {TAB_ADD.map((name, idx) => (
+ setSelected(name)}
+ >
+ {name}
+
+ ))}
+
+
+
+
+
+ setOpenAddModal(false)}
+ >
+ 취소
+
+
+ 신청
+
+
+
+ );
+};
+
+const CloseButton = styled.button`
+ top: 2rem;
+ right: 2rem;
+ cursor: pointer;
+ position: absolute;
+ background-color: transparent;
+`;
+
+const SelectWrapper = styled.div`
+ width: 50%;
+ display: flex;
+ position: relative;
+ align-items: center;
+ border-radius: 0.5rem;
+ justify-content: space-around;
+ transition: all 1s ease-in-out;
+ background-color: ${theme.colors.gray[2]};
+ border: 1px solid ${theme.colors.gray[1]};
+`;
+
+const ToggleBar = styled.div<{
+ $selected: string;
+}>`
+ width: 45%;
+ height: 85%;
+ border: none;
+ display: flex;
+ position: absolute;
+ border-radius: 0.5rem;
+ color: ${theme.colors.orange.dark};
+ left: calc((219px / 2 - 97.65px) / 2);
+ transition: transform 0.4s ease-in-out;
+ background-color: ${theme.colors.white};
+
+ ${({ $selected }) =>
+ $selected === TAB_ADD[0]
+ ? css`
+ transform: none;
+ `
+ : css`
+ transform: translateX(calc(219px / 2 - 2px));
+ `};
+`;
+
+const Select = styled.div<{ $isClicked: boolean; $selected: string }>`
+ z-index: 1;
+ display: flex;
+ cursor: pointer;
+ padding: 10px 0;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease-in-out;
+
+ ${({ $isClicked, $selected, theme }) =>
+ $isClicked
+ ? $selected === TAB_ADD[0]
+ ? css`
+ font-weight: 700;
+ color: ${theme.colors.green.main};
+ `
+ : css`
+ font-weight: 700;
+ color: ${theme.colors.orange.main};
+ `
+ : css`
+ font-weight: 400;
+ `}
+`;
+
+const CalendarWrapper = styled.div`
+ display: flex;
+ height: 100%;
+ width: 100%;
+ margin: 20px 0;
+`;
+
+const ButtonWrapper = styled.div`
+ gap: 10px;
+ display: flex;
+ align-self: end;
+`;
+
+export default AddModal;
diff --git a/src/components/CharAnimation.tsx b/src/components/CharAnimation.tsx
new file mode 100644
index 00000000..9cc134a2
--- /dev/null
+++ b/src/components/CharAnimation.tsx
@@ -0,0 +1,337 @@
+import { useEffect, useRef, useState } from "react";
+import sprite from "../assets/character_sprite_2.png";
+import { styled } from "styled-components";
+
+const CharAnimation = () => {
+ const canvasRef = useRef(null);
+ const imageRef = useRef(null);
+
+ const [canvasWidth, setCanvasWidth] = useState(1100);
+
+ const [mouseState, setMouseState] = useState(false);
+ const [direction, setDirection] = useState("");
+ const [movingDirection, setMovingDirection] = useState(null);
+
+ useEffect(() => {
+ const handleResize = () => {
+ const canvasContainer = document.querySelector(".canvas-container");
+ if (canvasContainer) {
+ setCanvasWidth(canvasContainer.clientWidth);
+ } else {
+ setCanvasWidth(window.innerWidth);
+ }
+ };
+
+ window.addEventListener("resize", handleResize);
+ handleResize(); // 초기 리사이징
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+ });
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ const image = imageRef.current;
+
+ const canvasContainer = document.querySelector(".canvas-container");
+ if (canvasContainer) {
+ setCanvasWidth(canvasContainer.clientWidth);
+ }
+ if (canvas === null || image === null) {
+ return;
+ }
+
+ canvas.width = canvasWidth;
+
+ const characterPosition = { x: canvas.width / 2, y: canvas.height / 2 }; // 이 위치로 이동
+
+ const ctx = canvas.getContext("2d");
+ const spriteWidth = 32;
+ const spriteHeight = 32;
+ const drawWidth = 96;
+ const drawHeight = 96;
+ // const spriteRows = 8;
+ const spriteColumns = 4;
+ const spriteMargin = { top: -12, right: -65, bottom: -10, left: -66 };
+ const charSpeed = 4;
+ const motionSpeed = 7;
+ const LEFT_BOUNDARY = 186;
+ const RIGHT_BOUNDARY = canvas.width;
+ let frameCounter = 0;
+
+ let currentRow = 0;
+ let currentColumn = 0;
+ let isMoving = false;
+
+ const keyState: { [key: string]: boolean } = {
+ w: false,
+ a: false,
+ s: false,
+ d: false,
+ ArrowUp: false,
+ ArrowLeft: false,
+ ArrowDown: false,
+ ArrowRight: false,
+ };
+
+ const draw = () => {
+ updateDirection();
+
+ if (ctx !== null) {
+ ctx.imageSmoothingEnabled = false; // 이미지 스무딩을 끄기. 최적화
+ }
+
+ if (ctx === null) {
+ return;
+ }
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.fillStyle = "#249e8c";
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ ctx.drawImage(
+ image,
+ currentColumn * spriteWidth,
+ currentRow * spriteHeight,
+ spriteWidth,
+ spriteHeight,
+ characterPosition.x - drawWidth / 2,
+ characterPosition.y - drawHeight / 2,
+ drawWidth,
+ drawHeight
+ );
+
+ if (isMoving) {
+ if (frameCounter % motionSpeed === 0) {
+ // 10 프레임마다 한 번씩 업데이트
+ currentColumn++;
+ if (currentColumn >= spriteColumns) {
+ currentColumn = 0;
+ }
+ }
+ frameCounter++;
+ } else {
+ currentColumn = 0;
+ frameCounter = 0;
+ }
+
+ // 경계 제약을 계산할 때 여백 크기를 고려함.
+ switch (currentRow) {
+ case 0:
+ characterPosition.y = Math.min(
+ characterPosition.y + (isMoving ? charSpeed : 0),
+ canvas.height - drawHeight / 2 - spriteMargin.bottom
+ );
+ break; // Down
+ case 1:
+ characterPosition.y = Math.max(
+ characterPosition.y - (isMoving ? charSpeed : 0),
+ drawHeight / 2 + spriteMargin.top
+ );
+ break; // Up
+ case 2:
+ characterPosition.x = characterPosition.x + (isMoving ? charSpeed : 0);
+ if (characterPosition.x > RIGHT_BOUNDARY) {
+ characterPosition.x = LEFT_BOUNDARY;
+ }
+ break;
+ case 3:
+ characterPosition.x = characterPosition.x - (isMoving ? charSpeed : 0);
+ if (characterPosition.x < LEFT_BOUNDARY) {
+ characterPosition.x = RIGHT_BOUNDARY;
+ }
+ break;
+ }
+ };
+
+ const updateDirection = () => {
+ if (mouseState && movingDirection) {
+ switch (movingDirection) {
+ case "right-up":
+ currentRow = 1;
+ isMoving = true;
+ break;
+ case "left-up":
+ currentRow = 3;
+ isMoving = true;
+ break;
+ case "left-down":
+ currentRow = 0;
+ isMoving = true;
+ break;
+ case "right-down":
+ currentRow = 2;
+ isMoving = true;
+ break;
+ default:
+ break;
+ }
+ return; // 마우스 입력이 있을 경우 키보드 입력을 무시
+ }
+ if (mouseState) {
+ switch (direction) {
+ case "right-up":
+ currentRow = 1; // 예: 오른쪽 위로 이동
+ isMoving = true;
+ break;
+ case "left-up":
+ currentRow = 3; // 예: 왼쪽 위로 이동
+ isMoving = true;
+ break;
+ case "left-down":
+ currentRow = 0; // 예: 왼쪽 아래로 이동
+ isMoving = true;
+ break;
+ case "right-down":
+ currentRow = 2; // 예: 오른쪽 아래로 이동
+ isMoving = true;
+ break;
+ default:
+ break;
+ }
+ }
+
+ if (keyState["w"] || keyState["ArrowUp"]) {
+ currentRow = 1;
+ isMoving = true;
+ } else if (keyState["s"] || keyState["ArrowDown"]) {
+ currentRow = 0;
+ isMoving = true;
+ } else if (keyState["a"] || keyState["ArrowLeft"]) {
+ currentRow = 3;
+ isMoving = true;
+ } else if (keyState["d"] || keyState["ArrowRight"]) {
+ currentRow = 2;
+ isMoving = true;
+ } else {
+ isMoving = false;
+ }
+ };
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ // console.log("Key Down:", e.key);
+ keyState[e.key] = true;
+ switch (e.key) {
+ case "w":
+ case "ArrowUp":
+ currentRow = 1;
+ isMoving = true;
+ break;
+ case "a":
+ case "ArrowLeft":
+ currentRow = 3;
+ isMoving = true;
+ break;
+ case "s":
+ case "ArrowDown":
+ currentRow = 0;
+ isMoving = true;
+ break;
+ case "d":
+ case "ArrowRight":
+ currentRow = 2;
+ isMoving = true;
+ break;
+ default:
+ break;
+ }
+ };
+
+ const handleKeyUp = (e: KeyboardEvent) => {
+ keyState[e.key] = false;
+ if (["w", "a", "s", "d", "ArrowUp", "ArrowLeft", "ArrowDown", "ArrowRight"].includes(e.key)) {
+ isMoving = false;
+ currentColumn = 0;
+ }
+ };
+
+ const handleMouseDown = (e: MouseEvent) => {
+ const canvas = canvasRef.current;
+ if (canvas) {
+ const rect = canvas.getBoundingClientRect();
+ const relativeX = e.clientX - rect.left - characterPosition.x;
+ const relativeY = e.clientY - rect.top - characterPosition.y;
+
+ let clickedDirection = "";
+ if (relativeX >= 0 && relativeY < 0) clickedDirection = "right-up";
+ else if (relativeX < 0 && relativeY < 0) clickedDirection = "left-up";
+ else if (relativeX < 0 && relativeY >= 0) clickedDirection = "left-down";
+ else if (relativeX >= 0 && relativeY >= 0) clickedDirection = "right-down";
+
+ if (clickedDirection === movingDirection) {
+ setMovingDirection(null);
+ setMouseState(false);
+ } else {
+ setMovingDirection(clickedDirection);
+ setMouseState(true);
+ setDirection(clickedDirection);
+ }
+ }
+ };
+
+ const handleMouseUp = () => {
+ setMouseState(false);
+ };
+
+ const handleMouseMove = (e: MouseEvent) => {
+ const canvas = canvasRef.current;
+ if (canvas) {
+ const rect = canvas.getBoundingClientRect();
+ const relativeX = e.clientX - rect.left - characterPosition.x;
+ const relativeY = e.clientY - rect.top - characterPosition.y;
+
+ let movingDirection = "";
+ if (relativeX >= 0 && relativeY < 0) movingDirection = "right-up";
+ else if (relativeX < 0 && relativeY < 0) movingDirection = "left-up";
+ else if (relativeX < 0 && relativeY >= 0) movingDirection = "left-down";
+ else if (relativeX >= 0 && relativeY >= 0) movingDirection = "right-down";
+
+ setMovingDirection(movingDirection);
+ }
+ };
+
+ canvas.addEventListener("mousedown", handleMouseDown);
+ canvas.addEventListener("mouseup", handleMouseUp);
+ canvas.addEventListener("mousemove", handleMouseMove);
+ window.addEventListener("keydown", handleKeyDown);
+ window.addEventListener("keyup", handleKeyUp);
+
+ image.onload = () => {
+ // 이미지 로드 후 게임 루프 시작
+ gameLoop();
+ };
+
+ const gameLoop = () => {
+ draw();
+ requestAnimationFrame(gameLoop);
+ };
+
+ return () => {
+ window.removeEventListener("keydown", handleKeyDown);
+ window.removeEventListener("keyup", handleKeyUp);
+ canvas.removeEventListener("mousedown", handleMouseDown); // 마우스 클릭 이벤트 리스너 제거
+ canvas.removeEventListener("mouseup", handleMouseUp);
+ canvas.removeEventListener("mousemove", handleMouseMove);
+ };
+ }, []);
+
+ return (
+
+
+
+
+ );
+};
+
+export default CharAnimation;
+
+const CanvasContainer = styled.div.attrs({ className: "canvas-container" })``;
+
+const StyledCanvas = styled.canvas`
+ /* width: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: -1; // LogoBox 및 Profile 컴포넌트 아래에 위치하도록 함 */
+`;
diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
new file mode 100644
index 00000000..67c391f0
--- /dev/null
+++ b/src/components/DatePicker.tsx
@@ -0,0 +1,40 @@
+import { DatePicker, Space } from "antd";
+import useDateStore from "../store/dateStore";
+import { RangeValue } from "rc-picker/lib/interface";
+import { Dayjs } from "dayjs";
+
+const { RangePicker } = DatePicker;
+
+type DateValue = Dayjs | null;
+
+interface DatePickerProp {
+ isRange: boolean;
+}
+
+const DatePickerComponent = ({ isRange }: DatePickerProp) => {
+ const { setStartDate, setEndDate } = useDateStore();
+
+ const getSelectedDate = (_: RangeValue | DateValue, dateString: string[] | string) => {
+ if (typeof dateString === "string") {
+ setStartDate(new Date(dateString));
+ } else {
+ setStartDate(new Date(dateString[0]));
+ setEndDate(new Date(dateString[1]));
+ }
+ };
+ return (
+
+ {isRange ? (
+ current.isBefore(Date.now())} />
+ ) : (
+