Sign-in

1. email, password state 생성
2. axios로 signin 요청 보내기
3. 받아온 data에서 access_token을 localStorage에 저장
4. access_token을 header에 저장하게 설정
5. todo 페이지로 리다이렉트

const instance = axios.create({
  baseURL: "<https://pre-onboarding-selection-task.shop>",
});

const accessToken = localStorage.getItem("access_token");

instance.defaults.headers.common["Authorization"] = accessToken
  ? `Bearer ${accessToken}`
  : null;

-----

const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");

const handleSignin = async () => {
  try {
    const { data } = await instance.post("/auth/signin", { email, password });
    localStorage.setItem("access_token", data.access_token);

    instance.defaults.headers.common[
      "Authorization"
    ] = `Bearer ${data.access_token}`;

    navigate("/todo");
  } catch (error) {
    console.log(error);
  }
};

Sign-up

1. email, password state 생성
2. axios로 signup 요청 보내기

const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");

const handleSignup = async () => {
  try {
    await instance.post("/auth/signup", { email, password });
    navigate("/signin");
  } catch (error) {
    console.log(error);
  }
};

CreateTodo

1. todo state 생성 (todo가 할일 입력한 내용임)
2. 버튼을 누르면 createTodo 함수 실행
3. todo 내용 전송 후 todo 내용 갱신하는 함수 실행하기
4. 입력되어졌던 todo state는 초기화

const [todo, setTodo] = useState<string>("");
const [todos, setTodos] = useState<TodoType[]>(); 

const createTodo = async (e: React.ChangeEvent<HTMLInputElement>) => {
  e.preventDefault();
  if (todo === "") return;
  try {
    await instance.post("/todos", {
      todo,
    });
    getAndUpdateTodos();

    setTodo("");
  } catch (error) {
    console.log(error);
  }
};

갱신하는 함수

1. todos state 생성(생성된 todo들임)