[기능] LocalStoarge를 활용한 간편한 계정 관리

컴포넌트 개요

• LocalStorage를 활용하면 로그인 시스템 없이도 사용자 고유의 식별자를 클라이언트에 저장하고, 이를 바탕으로 간단한 계정 시스템처럼 사용 가능

목표

• 사용자가 게시글을 작성할 때 고유 ID 생성
• 이 ID를 LocalStorage에 저장해서 추후 계정처럼 활용
• LocalStorage에 저장된 ID 목록을 기준으로 내가 작성한 게시글 관리 가능

기본 흐름

• 사용자가 폼을 제출하면 postSubjects API 호출
• 서버로부터 응답으로 받은 id를 LocalStorage에 저장
• 기존에 저장된 ID가 있다면 그 목록에 push, 없다면 빈 배열로 시작
• 저장 후 상세 페이지(/post/{id}/answer)로 이동

전체 코드

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsLoading(true);

    try {
    // 1. API 요청 -> postSubjects 호출
      const { id } = await postSubjects({ name: nameInput, team: "1-50" });

    // 2. 기존 LocalStorage에서 personalId 배열을 가져옴(없으면 빈 배열)
      const stored = JSON.parse(localStorage.getItem("personalId") || "[]");
      
    // 3. 새 ID를 배열에 추가
      stored.push(id);
      
    // 4. 다시 LocalStorage에 저장
      localStorage.setItem("personalId", JSON.stringify(stored));
      
    // 5. 작성한 글 상세 페이지로 이동
      router.push(`/post/${id}/answer`);
    } catch (err) {
      console.error("에러발생", err);
    } finally {
      setIsLoading(false);
    }
  };

주의할 점

• localStorage.getItem("personalId")는 문자열을 반환하므로 반드시 JSON.parse() 필요
• LocalStorage는 브라우저에 영구 저장되므로 새로고침해도 유지됨
• 문자열 저장만 가능하므로 객체나 배열은 반드시 JSON으로 인코딩/디코딩해야 함
  -로그인 없이도 나의 게시글 ID를 저장하고 식별 가능