💄 design: 모바일 UI 구현 (소개 페이지, 마이 페이지, 설정 페이지)

[ccconac]

✅ 체크리스트

• [x] 소개 페이지 모바일 UI 구현
  • [x] 소개 페이지 UI 오류 수정
• [x] 마이 페이지 모바일 UI 구현
• [x] 설정 페이지 모바일 UI 구현

📝 작업 상세 내용

1️⃣ 소개 페이지 모바일 UI 구현

🔥 소개 페이지 UI 오류 수정

채연 님이 만들어 주신 loginModal hook을 사용했더니 바로 해결되어 버렸습니다.... 🥹 중복된 모달 사용으로 인해 모달 겹침 현상이 발생하는 것이었고... 채연 님이 만들어 주신 hook 덕분에 중복 코드가 발생하지 않아 바로 해결되었습니다. 최고....

  const { loginModal } = useModal();
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);

  useEffect(() => {
    const loggedIn = async () => {
      const accessToken = await checkAuth();
      if (accessToken) setIsLoggedIn(true);
    };

    loggedIn();
  }, []);

  type TStartButton = () => void;

  const handleStartButton: TStartButton = () => {
    if (isLoggedIn) navigate('/main');
    if (!isLoggedIn) loginModal();
  };

2️⃣ 마이 페이지 모바일 UI 구현

3️⃣ 설정 페이지 모바일 UI 구현

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

📸 스크린샷 (선택 사항)

✅ 셀프 체크리스트

• [x] 브랜치 확인하기
• [x] 불필요한 코드가 들어가지 않았는지 재확인하기
• [x] issue 닫기
• [x] reiewers, assignees, Lables 등록 확인하기

이슈 번호: #200