C2C Dev

"use client";

import { useState } from "react";
import { TextField, Button, Container, Typography, Box } from "@mui/material";
import Link from "next/link";

export default function Form() {
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");
  const [status, setStatus] = useState("");

  // 기본 이메일 주소
  const email = "ysh940129@gmail.com";

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    const res = await fetch("/api/send-email", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ to: email, subject, message }),
    });

    const data = await res.json();
    setStatus(
      data.success ? "이메일이 성공적으로 전송되었습니다!" : "전송 실패"
    );
  };

  return (
    <Box
      sx={{
        width: "100vw",
        height: "100vh",
        backgroundImage: 'url("/assets/plane.png")',
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
    >
      <Container
        maxWidth="sm"
        sx={{
          pt: 8,
        }}
      >
        <Container
          sx={{
            backgroundColor: "#ffffff",
            p: 4,
            borderRadius: "20px",
            boxShadow: "0 2px 10px rgba(0, 0, 0, 0.3)",
          }}
        >
          <Typography
            gutterBottom
            sx={{
              display: "flex",
              justifyContent: "center",
              backgroundColor: "#87CEEB",
              height: "50px",
              fontSize: "30px",
              fontWeight: "bold",
              borderRadius: "10px",
              color: "#ffffff",
              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.3)",
              lineHeight: "50px",
            }}
          >
            이메일 보내기
          </Typography>
          <form onSubmit={handleSubmit}>
            <TextField
              placeholder={email}
              fullWidth
              margin="normal"
              disabled // 이메일 입력란을 비활성화
              InputProps={{
                style: {
                  fontWeight: "bold",
                  fontSize: "20px",
                },
              }}
            />
            <TextField
              label="제목"
              fullWidth
              margin="normal"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              required
            />
            <TextField
              label="내용"
              fullWidth
              multiline
              rows={6}
              margin="normal"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              required
            />
            <Container
              disableGutters
              maxWidth="sm"
              sx={{
                display: "flex",
                justifyContent: "space-between",
                marginTop: 2,
              }}
            >
              <Button
                type="submit"
                variant="contained"
                sx={{
                  width: "240px",
                  height: "50px",
                  fontWeight: "bold",
                  backgroundColor: "#87CEEB",
                  fontSize: "20px",
                }}
              >
                보내기
              </Button>
              <Link href={"Contact"}>
                <Button
                  type="button" // 버튼 타입을 'button'으로 변경
                  variant="contained"
                  sx={{
                    width: "240px",
                    height: "50px",
                    fontWeight: "bold",
                    backgroundColor: "#87CEEB",
                    fontSize: "20px",
                  }}
                >
                  뒤로가기
                </Button>
              </Link>
            </Container>
          </form>
          {status && <Typography sx={{ mt: 2 }}>{status}</Typography>}
        </Container>
      </Container>
    </Box>
  );
}

      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle
          sx={{
            minHeight: "8vh",
            fontWeight: "bold",
            fontSize: "30px",
            margin: 2,
            lineHeight: "25px",
            display: "block",
            textAlign: "center",
            marginBottom: 5,
            backgroundColor: "#87CEEB",
            color: "#ffffff",
            borderRadius: "10px",
          }}
        >
          {projectName}
        </DialogTitle>
        <DialogContent>
          <Typography
            sx={{
              fontSize: "20px",
              backgroundColor: "#87CEEB",
              color: "#fff",
              height: "40px",
              lineHeight: "40px",
              borderRadius: "10px",
              textAlign: "center",
              marginBottom: 2,
              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
            }}
          >
            {subTitle1}
          </Typography>
          <CardMedia
            component="img"
            alt="Project"
            image={projectImg}
            sx={{
              width: "100%",
              height: "auto",
              marginTop: 1,
              marginBottom: 8,
              padding: 2,
              borderRadius: "8px",
              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
            }}
          />
          <Typography
            sx={{
              fontSize: "20px",
              backgroundColor: "#87CEEB",
              color: "#fff",
              height: "40px",
              lineHeight: "40px",
              borderRadius: "10px",
              textAlign: "center",
              marginBottom: 2,
              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
            }}
          >
            {subTitle2}
          </Typography>
          <CardMedia
            component="img"
            alt="Project"
            image={image1}
            sx={{
              width: "100%",
              height: "auto",
              marginTop: 1,
              marginBottom: 8,
              padding: 2,
              borderRadius: "8px",
              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
            }}
          />
          <Typography
            sx={{
              fontSize: "20px",
              backgroundColor: "#87CEEB",
              color: "#fff",
              height: "40px",
              lineHeight: "40px",
              borderRadius: "10px",
              textAlign: "center",
              marginBottom: 2,
              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
            }}
          >
            {subTitle3}
          </Typography>
          <CardMedia
            component="img"
            alt="Project"
            image={image2}
            sx={{
              width: "100%",
              height: "auto",
              marginTop: 1,
              marginBottom: 8,
              padding: 2,
              borderRadius: "8px",
              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
            }}
          />
          {/* 새탭으로 PPT 파일 보기 */}
          <Link
            href={projectFile || "#"}
            target={projectFile ? "_blank" : ""}
            rel="noopener noreferrer"
            onClick={(e) => {
              if (!projectFile) e.preventDefault(); // 클릭 차단
            }}
          >
            <Button
              sx={{
                height: "40px",
                padding: 2,
                fontSize: "18px",
                backgroundColor: "#87CEEB",
                color: "#fff",
                fontWeight: "bold",
                boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
                opacity: projectFile ? 1 : 0.5, // 비활성화 시 투명도 낮춤
                pointerEvents: projectFile ? "auto" : "none", // 클릭 비활성화
              }}
              disabled={!projectFile} // projectFile이 없으면 버튼 비활성화
            >
              PPT로 자세히 보기
            </Button>
          </Link>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => setOpen(false)}
            color="primary"
            sx={{
              height: 40,
              width: 100,
              backgroundColor: "#87CEEB",
              color: "#ffffff",
              fontWeight: "bold",
              fontSize: "20px",
              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
              margin: 2,
            }}
          >
            닫기
          </Button>
        </DialogActions>
      </Dialog>