import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

// 리액트 컴포넌트는 대문자로 시작하는 자바스크립트 함수입니다.
export default function App() {
  // JSX를 사용하여 화면에 보여줄 HTML을 반환(return)합니다.
  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h1 style={{ color: '#61DAFB' }}>Hello, World!</h1>
      <p>나의 첫 번째 리액트 컴포넌트입니다.</p>
    </div>
  );
}

import React, { useState } from 'react';
import { UserCard } from './UserCard';
import { Container } from './Container';
import { CounterButton } from './CounterButton';

// 부모 컴포넌트 (상태 관리자)
export function PropsExample() {
  // 상태 끌어올리기 (Lifting State Up)
  // 자식 컴포넌트들이 공유해야 할 상태는 부모가 가지고 있어야 합니다.
  const [globalCount, setGlobalCount] = useState(0);

  return (
    <Container title={"팀원 목록 (총 " + globalCount + "명 조회)"}>
      <UserCard name="홍길동" job="프론트엔드 개발자" />
      <UserCard name="김철수" /> {/* job을 안 넘기면 기본값이 들어갑니다 */}
      
      {/* 함수를 Props로 전달하여 자식이 부모의 상태를 바꿀 수 있게 합니다 */}
      <CounterButton onIncrease={() => setGlobalCount(prev => prev + 1)} />
    </Container>
  );
}

import React, { useState } from 'react';

export default function LoginForm() {
  const [userId, setUserId] = useState('');

  const handleInputChange = (e) => {
    setUserId(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`로그인 시도: ${userId}`);
  };

  const handleSpecialClick = (msg) => {
    console.log("전달받은 메시지:", msg);
  };

  return (
    <form onSubmit={handleSubmit} style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px' }}>
      <label style={{ display: 'block', marginBottom: '10px' }}>
        아이디:
        <input 
          type="text" 
          value={userId} 
          onChange={handleInputChange} 
          placeholder="아이디를 입력하세요"
          style={{ marginLeft: '10px', padding: '5px' }}
        />
      </label>
      
      <button type="submit" style={{ padding: '8px 16px', background: '#3b82f6', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer', marginRight: '10px' }}>로그인</button>

      <button type="button" onClick={() => handleSpecialClick('비밀번호 찾기')} style={{ padding: '8px 16px', background: '#64748b', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
        비밀번호를 잊으셨나요?
      </button>
    </form>
  );
}

import React, { useState } from 'react';

export default function LoginGreeting() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px' }}>
      <h2 style={{ marginTop: 0 }}>조건부 렌더링 예제</h2>
      
      {/* 삼항 연산자 (? :) 활용 */}
      <div style={{ marginBottom: '20px' }}>
        <p>상태: {isLoggedIn ? <strong style={{color: 'green'}}>로그인 됨</strong> : <strong style={{color: 'red'}}>로그아웃 상태</strong>}</p>
        <button 
          onClick={() => setIsLoggedIn(!isLoggedIn)}
          style={{ padding: '8px 16px', background: '#3b82f6', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
        >
          {isLoggedIn ? '로그아웃 하기' : '로그인 하기'}
        </button>
      </div>

      {/* 논리 AND (&&) 연산자 활용 */}
      {isLoggedIn && (
        <div style={{ padding: '15px', background: '#dcfce7', color: '#166534', borderRadius: '8px' }}>
          환영합니다! 회원 전용 콘텐츠입니다. 👋
        </div>
      )}
    </div>
  );
}

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // 1. Mount 시점에 1초마다 동작하는 타이머 세팅
    console.log("타이머 시작!");
    const intervalId = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    // 2. Cleanup 함수 반환
    // 컴포넌트가 화면에서 사라질 때(Unmount) 반드시 타이머를 해제해야 메모리 누수를 막습니다.
    return () => {
      console.log("타이머 정리됨");
      clearInterval(intervalId);
    };
  }, []); // 빈 배열이므로 처음 한 번만 실행됨

  return <p style={{ fontSize: '1.2rem', fontWeight: 'bold', color: '#0f172a' }}>경과 시간: {seconds}초</p>;
}

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px' }}>
      <h3 style={{ marginTop: 0 }}>타이머 마운트/언마운트 예제</h3>
      <button 
        onClick={() => setShow(!show)}
        style={{ padding: '8px 16px', background: show ? '#ef4444' : '#10b981', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer', marginBottom: '15px' }}
      >
        {show ? '타이머 숨기기 (Unmount)' : '타이머 켜기 (Mount)'}
      </button>
      
      <div style={{ minHeight: '50px', padding: '15px', background: '#fff', borderRadius: '6px', border: '1px solid #e2e8f0' }}>
        {show ? <Timer /> : <p style={{ color: '#64748b' }}>타이머가 화면에서 사라졌습니다.</p>}
      </div>
    </div>
  );
}

// Tailwind CSS가 설정된 환경이라고 가정합니다.

function TailwindCard() {
  return (
    // 부모 컨테이너: 최대 너비 설정, 중앙 정렬, 상하 여백
    <div className="max-w-sm mx-auto mt-10">
      
      {/* 카드 래퍼: 흰색 배경, 그림자, 둥근 모서리, 패딩, 테두리 */}
      <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6 overflow-hidden">
        
        {/* 태그 뱃지 */}
        <span className="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">
          New Course
        </span>
        
        {/* 제목 텍스트 */}
        <h2 className="mt-3 text-xl font-bold text-gray-800">
          Tailwind CSS 완벽 가이드
        </h2>
        
        <p className="mt-2 text-gray-600 text-sm leading-relaxed">
          별도의 CSS 파일 없이 오직 클래스 조합만으로 아름다운 반응형 UI를 구축하는 비법을 배웁니다.
        </p>
        
        {/* 액션 버튼: flex 박스 정렬, 배경색, 호버 효과, 트랜지션 */}
        <div className="mt-5 flex justify-end">
          <button className="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200">
            수강하기
          </button>
        </div>
        
      </div>
    </div>
  );
}

// TypeScript 환경 (.tsx 파일)
import React, { useState } from 'react';

// 1. Props의 형태를 interface로 명확히 정의합니다.
interface UserCardProps {
  name: string;
  age: number;
  // ?를 붙이면 선택적(Optional) 속성이 됩니다.
  email?: string;
  isOnline: boolean;
}

// 2. 컴포넌트 매개변수에 타입을 적용합니다.
function UserProfile({ name, age, email, isOnline }: UserCardProps) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '1rem', borderRadius: '8px' }}>
      <h2>
        {name} ({age}세)
        <span style={{ color: isOnline ? 'green' : 'gray', marginLeft: '8px' }}>
          ●
        </span>
      </h2>
      {email && <p>이메일: {email}</p>}
    </div>
  );
}

function App() {
  // State에도 제네릭(<>) 문법으로 타입을 명시할 수 있습니다.
  const [users, setUsers] = useState<UserCardProps[]>([]);

  // 만약 props 타입에 맞지 않는 데이터를 넘기면 VScode 편집기에서 에디터가 빨간 줄로 경고해줍니다!
  return (
    <div>
      <UserProfile name="Minstudio" age={28} isOnline={true} />
    </div>
  );
}

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

// 1. Zod를 사용하여 폼의 스키마(규칙) 정의
const loginSchema = z.object({
  email: z.string().email("올바른 이메일 형식을 입력해주세요."),
  password: z.string().min(6, "비밀번호는 최소 6자 이상이어야 합니다."),
});

type LoginFormInputs = z.infer<typeof loginSchema>;

export default function LoginForm() {
  // 2. useForm에 zodResolver를 연결하여 검증 위임
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(loginSchema),
  });

  const onSubmit = (data) => {
    console.log("검증 성공! 전송된 데이터:", data);
    alert(JSON.stringify(data, null, 2));
  };

  return (
    <div style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px' }}>
      <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
        <div>
          <input 
            {...register("email")} 
            placeholder="이메일" 
            style={{ width: '100%', padding: '10px', borderRadius: '4px', border: '1px solid #cbd5e1' }}
          />
          {/* 에러 메시지 출력 */}
          {errors.email && <p style={{ color: '#ef4444', fontSize: '0.875rem', marginTop: '5px' }}>{errors.email.message}</p>}
        </div>

        <div>
          <input 
            type="password" 
            {...register("password")} 
            placeholder="비밀번호" 
            style={{ width: '100%', padding: '10px', borderRadius: '4px', border: '1px solid #cbd5e1' }}
          />
          {errors.password && <p style={{ color: '#ef4444', fontSize: '0.875rem', marginTop: '5px' }}>{errors.password.message}</p>}
        </div>

        <button 
          type="submit" 
          style={{ padding: '10px', background: '#3b82f6', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer', fontWeight: 'bold' }}
        >
          로그인
        </button>
      </form>
    </div>
  );
}

import React, { useRef } from 'react';
import CustomInput from './CustomInput';
import Modal from './Modal';

export default function App() {
  const inputRef = useRef(null);

  const focusInput = () => {
    // 부모 컴포넌트에서 자식 컴포넌트 내부의 DOM 함수(focus)를 직접 호출
    inputRef.current?.focus();
  };

  return (
    <div style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px' }}>
      <CustomInput ref={inputRef} label="사용자 이름" />
      <button 
        onClick={focusInput} 
        style={{ marginTop: '16px', background: '#3b82f6', color: 'white', padding: '8px 16px', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
        포커스 이동하기
      </button>
      
      <Modal isOpen={true}>
        <h2 style={{marginTop: 0}}>이것은 포탈로 열린 모달입니다!</h2>
      </Modal>
    </div>
  );
}

import ResponsiveApp from './ResponsiveApp';

export default function App() {
  return (
    <div style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px' }}>
      <ResponsiveApp />
    </div>
  );
}

import React from 'react';
import Counter from './Counter';

export default function App() {
  return (
    <div style={{ padding: '20px', background: '#f8fafc', borderRadius: '8px', textAlign: 'center' }}>
      <h2 style={{ marginTop: 0 }}>Vitest 테스트 대상 컴포넌트</h2>
      <p style={{ color: '#64748b', marginBottom: '20px' }}>아래의 카운터 컴포넌트가 테스트 대상입니다.</p>
      <Counter />
    </div>
  );
}