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

function ClickCounter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef(0);
  // 여기에 useRef 훅을 사용하여 이전 클릭 수를 저장할 참조 변수를 선언하세요.

  const handleClick = () => {
    // 여기에 이전 클릭 수를 업데이트하고, 콘솔에 현재 및 이전 클릭 수를 출력하는 코드를 작성하세요.
    console.log(`이전 카운트 ${prevCountRef.current}`);
    setCount(count + 1);

    prevCountRef.current = count + 1;
  };

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

// export default FocusInput;

// 사용 예시
function App() {
  return (
    <div>
      <ClickCounter></ClickCounter>
    </div>
  );
}

export default App;

import React, { useRef } from 'react';

function PreventTyping() {
  const stop = useRef<HTMLInputElement>(null);
  // 여기에 useRef 훅을 사용하여 input 요소를 참조할 변수를 선언하세요.

  const handleInput = (e : React.ChangeEvent<HTMLInputElement>) => {
    if(stop.current) {
      stop.current.value='stop typing!';
    }
    // 여기에 input 요소의 입력을 방지하고 "Stop typing!" 메시지를 표시하세요.
  };

  return (
    <div>
      <input ref={stop} type="text" placeholder="Try to type here..." onInput={handleInput} />
    </div>
  );
}

// export default FocusInput;

// 사용 예시
function App() {
  return (
    <div>
      <PreventTyping></PreventTyping>
    </div>
  );
}

export default App;

import React, { useRef } from "react";
import "./App.css";
function AnimatedBox() {
  // useRef 훅을 사용하여 Box 요소를 참조할 변수를 선언
  const boxRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    // 여기에 Box 요소에 'animate' 클래스를 추가하여 애니메이션을 적용하세요.
    // 애니메이션이 끝난 후에는 클래스를 제거하세요.
    if (boxRef.current) {
      //animate 클래스를 추가하여 애니메이션 시작
      boxRef.current.classList.add("animate");

      //끝난후 제거
      boxRef.current.addEventListener(
        "animationend",
        () => {
          boxRef.current?.classList.remove("animate");
        },
        { once: true }
      );
    }
  };

  return (
    <div>
      <div
        ref={boxRef}
        className="box"
        style={{ width: "100px", height: "100px", backgroundColor: "skyblue" }}
      ></div>
      <button onClick={handleClick}>Animate Box</button>
    </div>
  );
}

// export default FocusInput;

// 사용 예시
function App() {
  return (
    <div>
      <AnimatedBox></AnimatedBox>
    </div>
  );
}

export default App;

import React, { useRef, useState } from "react";
import "./App.css";
function AnimatedPositionBox() {
  // useRef 훅을 사용하여 Box 요소의 위치를 저장할 변수를 선언
  const boxRef = useRef<HTMLDivElement>(null);
  const positionRef = useRef(0); // Box의 현재 위치를 저장할 변수

  const moveBox = () => {
    const box = boxRef.current;
    if (box) {
      // 현재 위치에서 100px 이동
      positionRef.current += 100;
      box.style.transform = `translateX(${positionRef.current}px)`;
      box.style.transition = "transform 0.5s ease-in-out";
    }
  };

  return (
    <div>
      <div
        ref={boxRef}
        className="box"
        style={{ width: "100px", height: "100px", backgroundColor: "skyblue" }}
      ></div>
      <button onClick={moveBox}>Move Box</button>
    </div>
  );
}
// export default FocusInput;

// 사용 예시
function App() {
  return (
    <div>
      <AnimatedPositionBox></AnimatedPositionBox>
    </div>
  );
}

export default App;

import React, { useRef, useState } from "react";
// import "./App.css";

function TextInputColorChanger() {
  const [text, setText] = useState("");
  // useRef 훅을 사용하여 p 요소의 배경색을 저장할 변수를 선언
  const pRef = useRef<HTMLParagraphElement>(null);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
    if (pRef.current) {
      // 텍스트 길이에 따라 p 요소의 배경색을 변경
      if (e.target.value.length >= 10) {
        pRef.current.style.backgroundColor = "red"; // 10자 이상이면 배경색 빨간색
      } else {
        pRef.current.style.backgroundColor = "green"; // 10자 미만이면 배경색 초록색
      }
    }
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleInputChange} />
      <p ref={pRef} style={{ padding: "10px" }}>
        Text Length: {text.length}
      </p>
    </div>
  );
}

// 사용 예시
function App() {
  return (
    <div>
      <TextInputColorChanger></TextInputColorChanger>
    </div>
  );
}

export default App;

import React, { useRef, useState } from "react";
// import "./App.css";

function MouseOverComponent() {
  // useRef 훅을 사용하여 div 요소를 참조할 변수를 선언
  const divRef = useRef<HTMLDivElement>(null);

  const handleMouseOver = () => {
    if (divRef.current) {
      divRef.current.textContent = "Mouse Over!"; // 마우스 오버 시 텍스트 변경
    }
  };

  const handleMouseOut = () => {
    if (divRef.current) {
      divRef.current.textContent = "Mouse Out!"; // 마우스 아웃 시 텍스트 변경
    }
  };

  return (
    <div
      ref={divRef}
      style={{
        width: "200px",
        height: "100px",
        backgroundColor: "lightgray",
        textAlign: "center",
        lineHeight: "100px",
      }}
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
    >
      Hover me!
    </div>
  );
}

// 사용 예시
function App() {
  return (
    <div>
      <MouseOverComponent></MouseOverComponent>
    </div>
  );
}

export default App;