내 맘대로 적는 일기[TIL]-56

오늘은 과제를 하면서 route handler의 에러 핸들링을 하고 css를 작업하였습니다.

route handler의 에러 핸들링을 하면서 그의 맞는 status를 내보내는 것을 하면서 http 상태코드의 대해서 알아보게 되고 그에 맞는 상태코드들을 작성하면서 생각보다 여러가지들을 알게 되는 거 같았습니다.

여러가지 status에 대해서 알게되는 거 같습니다.

그리고 css를 작성하면서 하고 싶었던 기능인 마우스 포인트에 따라 원같은게 따라다니는 것을 만들려고 알아보면서 작성을 했습니다.

"use client";

import React, { PropsWithChildren, useState } from "react";

const MousePointer = ({ children }: PropsWithChildren) => {
  const [xy, setXY] = useState({ x: 0, y: 0 });

  const mouseMoveHandler = (
    e: React.MouseEvent<HTMLDivElement, MouseEvent>
  ) => {
    const mouseX = e.pageX;
    const mouseY = e.pageY;

    setXY({ x: mouseX, y: mouseY });
  };

  return (
    <div onMouseMove={mouseMoveHandler} className="w-screen h-screen">
      {children}
      <div
        style={{ transform: `translate(${xy?.x}px, ${xy?.y}px)` }}
        className="absolute ease-linear duration-75 rounded-full -z-10 w-12 h-12 -left-4 -top-4 border-2 border-solid border-gray-900"
      />
    </div>
  );
};

export default MousePointer;

위의 방식으로 코드를 짠 다음에 next.js기준 app directory에 있는 layout.tsx에 넣어서 페이지 전체에 적용하는 식으로 작성했습니다.

처음으로 해봤던 디자인이었지만 생각보다 쉬운 디자인이었던거 같습니다.