프론트 코드

//component/LetterWrite.jsx
import React, { useState } from 'react';
import styled from "styled-components";
import heartMsg from "../img/heartMsg.svg";
import axios from 'axios';

const W = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
`;

const Image = styled.img`
    position: fixed;
    top: 15%;
    background-color: #ffffff;
    border-radius: 50px;
`

const WiteLetter = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 329px;
    height: 544px;
    border-radius: 15px;
    margin-top: 80px;
    padding-top: 50px;
    background-color: #ffffff;
    box-sizing: border-box;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.315);
`;

const Text = styled.div`
    font-size: 15px;
    color: #000000;
    font-weight: bold;
    margin-bottom: 20px;
`;
const TextComplete = styled.div`
    font-size: 15px;
    color: #F27781;
    font-weight: bold;
    margin-bottom: 20px;
`;

const LetterPaper = styled.textarea`
    background-color: #ECECEC;
    width: 300px;
    height: 430px;
    border: none;
    border-radius: 15px;
    box-sizing: border-box;
    padding: 20px;
    word-wrap: break-word;
    word-break:break-all;
    outline-color: #F27781;
    font-family: 'Raleway', sans-serif;

    &::placeholder{
        color: #CBCBCB;
    }

    &:focus {
        background-color: #ECECEC;
    }
`;

const P = styled.div`
    float: right;
    color: #CBCBCB;
    margin-bottom: 5px;
`;

const Send = styled.button `
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 329px;
    height: 143px;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.315);
    border: none;
`;

const From = styled.div `
    font-size: 12px;
    color: #999999;
`
const SendText = styled.div `
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    margin: 5px;
`
const SendCaution = styled.div `
    font-size: 12px;
    font-weight: bold;
    color: #CBCBCB;
`

const LetterWrite = (props) => {
    let [inputCount, setInputCount] = useState(0);
    const [content, setContent] = useState([]);
    const [isWriteComplete, setIsWriteComplete] = useState(false);

    
    const onInputHandler = (e) => {
        setInputCount(e.target.value.length);
    };
    
    const handleSubmit = async (event) => {
        event.preventDefault();

        try {
            const response = await axios.post('<http://43.201.221.221:8080/visitorComment>', {
                // "ownerId": 0,
                // "writerId": 0,
                "content": "string"
            });
            // console.log('Sending data:', { ownerId, writerId, content });
            console.log('Server response:', response.data);
            setIsWriteComplete(true);
        }catch(error){
            console.log(error);
        }
    };

    return (
    <>
        <W>
            <Image src={heartMsg} alt='msg'/>
            <WiteLetter>
            {isWriteComplete ? (
                    <TextComplete>편지 쓰기 완료!</TextComplete>
                ) : (
                    <Text>편지쓰기</Text>
            )}
            <LetterPaper 
                onChange={(e) => {
                    onInputHandler(e);
                    setContent(e.target.value);
                }} 
                value={content} placeholder="TO. 엔프제에게...">
            </LetterPaper>
            <P>
            <span>{inputCount}</span>
            <span>/500</span>
            </P>
            {inputCount > 0 && (
            <Send type="submit" onSubmit={handleSubmit}>
                <From>from</From>
                <From>엔삐</From>
                {/* <From>{props.writerId}</From> */}
                <SendText>보내기</SendText>
                <SendCaution>한 번 보낸 편지는 수정할 수 없어요.</SendCaution>
            </Send>
            )}
            </WiteLetter>
        </W>
    </>
    );
}

export default LetterWrite;

//component/Mine.jsx
import React, { useState } from 'react';
import styled from "styled-components";
import profile from "../img/profile.svg";

const W = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
`;

const Image = styled.img`
    position: fixed;
    top: 40%;
    z-index: 10;
    margin-bottom: 100px;
`;

const WiteLetter = styled.div`
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    width: 329px;
    height: 544px;
    border-radius: 15px;
    padding-top: 100px;
    padding: 30px;
    background-color: #ffffff;
    box-sizing: border-box;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.315);
`;

const Pro = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
`;

const Name = styled.div`
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 5px;
`;
const Id = styled.div`
    font-size: 15px;
    color: #F27781;
    margin-bottom: 60px;
`;
const Text = styled.div`
    font-size: 18px;
    color: #000000;
    font-weight: bold;
`;

const TextGray = styled.div`
    font-size: 18px;
    color: #ABABAB;
    font-weight: bold;
`;

const Button = styled.button`
    font-size: 20px;
    color: #000000;
    font-weight: bold;
    background: none;
    border: none;
    margin-top: 20px;
    margin-bottom: 10px;
`;

const ButtonRed = styled.button`
    font-size: 20px;
    color: #F27781;
    font-weight: bold;
    background: none;
    border: none;
`;

const P = styled.button`
    float: right;
    color: #AC66F2;
    font-size: 18px;
    font-weight: bold;
    background: none;
    border: none;
`;

const Label = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    
`;
const Bottom = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    border-top: 1px solid #ECECEC;
    padding: 20px;
    
`;

const Mine = (props) => {
    return (
    <>
        <W>
            <Image src={profile} alt='msg'/>
            <WiteLetter>
                <Pro>
                    <Name>엔삐</Name>
                    <Id>@enfpie</Id>
                    {/* <Name>{props.name}</Name>
                    <Id>@{props.id}</Id> */}
                </Pro>
            {/* <Label>
                <Text>알림 on/off</Text><P onClick={}>OFF</P>
            </Label>
            <Label>
                <Text>얻은 리워드 목록</Text>
            </Label>
            <Label>
                <Text>테마</Text><P>W</P>
            </Label> */}
            <Label>
                <TextGray>버전</TextGray><P>beta</P>
            </Label>
            <hr/>
            <Bottom>
                <Button>로그아웃</Button>
                <ButtonRed>회원탈퇴</ButtonRed>
            </Bottom>
            </WiteLetter>
        </W>
    </>
    );
}

export default Mine;

//pages/Letter.jsx
import React from "react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import backgroundImg from "../img/letterBack.svg";
import goback from "../img/mypageBack.svg";
import LetterWrite from './../component/LetterWrite';
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body, html {
    margin: 0;
    padding: 0;
  }
`;

function Letter() {
  const navigate = useNavigate();

  return (
    <>
      <GlobalStyle />
      <C>
        <Cover>
            <img src={goback} alt="back"onClick={() => navigate(-1)}/>
            <LetterWrite/>
        </Cover>
      </C>
    </>
  );
}

const Cover = styled.div`
  width: 100%;
  height: 100%;
`;

const C = styled.div`
  background: url(${backgroundImg}) no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
`;

export default Letter;

//pages/MyPage.jsx
import React from "react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import backgroundImg from "../img/mineBack.svg";
import goback from "../img/mypageBack.svg";
import { createGlobalStyle } from "styled-components";
import Mine from "../component/Mine";

const GlobalStyle = createGlobalStyle`
  body, html {
    margin: 0;
    padding: 0;
  }
`;

function MyPage() {
  const navigate = useNavigate();

  return (
    <>
      <GlobalStyle />
      <C>
        <Cover>
            <img src={goback} alt="back"onClick={() => navigate(-1)}/>
            <Mine/>
        </Cover>
      </C>
    </>
  );
}

const Cover = styled.div`
  width: 100%;
  height: 100%;
`;

const C = styled.div`
  background: url(${backgroundImg}) no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
`;

export default MyPage;

// App.js 추가
<Route path="/letter" element={<Letter/>} />
<Route path="/mypage" element={<MyPage/>} /