🍅 TaskTracker - 회고

  // 회원가입을 처리하는 함수
  const handleSignUp = async (e) => {
    e.preventDefault();
    if (Object.values(errors).some((error) => error)) {
      alert("Please check your information again.");
      return;
    }
    await dispatch(
      signupUser({
        email: userInfo?.email,
        password: userInfo?.password,
        imgFile,
        displayName: userInfo?.username,
      })
    ).unwrap();

    alert("Sign up successful!");
    navigate("/signin");
  };

export const signupUser = createAsyncThunk(
  "user/signupUser",
  async (userInfo) => {
    try {
      // Firebase를 통해, 이메일과 비밀번호로 사용자를 생성
      await createUserWithEmailAndPassword(
        auth,
        userInfo?.email,
        userInfo?.password
      );

      // 현재 사용자가 있는 경우(=firebase에 회원 등록이 된 경우)
      if (auth.currentUser) {
        // 동시에 이미지 파일이 있는 경우
        if (userInfo?.imgFile) {
          // firebase에 이미지를 업로드
          const storageRef = ref(
            storage,
            new Date().getTime() + userInfo?.imgFile?.name
          );
          const uploadTask = uploadBytesResumable(
            storageRef,
            userInfo?.imgFile
          );
          uploadTask.on(
            "state_changed",
            // 업로드 상태가 변경될 때 실행될 콜백 함수
            (snapshot) => {
              // 업로드 진행률을 계산하는 로직
              const progress =
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
              console.log("Upload is " + progress + "% done");
              switch (snapshot.state) {
                case "paused":
                  console.log("Upload is paused");
                  break;
                case "running":
                  console.log("Upload is running");
                  break;
              }
            },
            // 업로드 중 에러가 발생한 경우
            (error) => {
              alert("Failed to upload image. Please try again later.");
            },
            // 업로드가 완료된 경우
            () => {
              // 업로드된 파일의 다운로드 URL을 가져옴
              getDownloadURL(uploadTask.snapshot.ref).then(
                async (downloadURL) => {
                  // 사용자 프로필을 업데이트
                  await updateProfile(auth.currentUser, {
                    displayName: userInfo?.displayName,
                    photoURL: downloadURL,
                  });
                }
              );
            }
          );
        }
        // 이미지 파일이 없는 경우
        else {
          await updateProfile(auth.currentUser, {
            displayName: userInfo?.displayName,
            photoURL: "",
          });
        }
      }
    } catch (error) {
      // 예외가 발생한 경우
      switch (error.code) {
        case "auth/email-already-in-use":
          alert("Email already in use.");
          break;
        case "auth/weak-password":
          alert("Password should be at least 6 characters.");
          break;
        case "auth/network-request-failed":
          alert("Network request failed.");
          break;
        case "auth/invalid-email":
          alert("Invalid email format.");
          break;
        case "auth/internal-error":
          alert("Internal error.");
          break;
        default:
          alert("Sign up failed.");
      }
    }
  }
);

 // 로그인을 처리하는 함수
  const handleSignIn = async () => {
    try {
      await dispatch(
        signInUser({ email: signinInfo?.email, password: signinInfo?.password })
      ).unwrap();

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

export const signInUser = createAsyncThunk(
  "user/signInUser",
  async (userInfo) => {
    const userCredential = await signInWithEmailAndPassword(
      auth,
      userInfo?.email,
      userInfo?.password
    );
    const result = {
      uid: userCredential?.user?.uid,
      displayName: userCredential?.user?.displayName,
      email: userCredential?.user?.email,
    };
    localStorage.setItem("user", JSON.stringify(result));

    return result;
  }
);

  useEffect(() => {
    dispatch(checkLoginUser(JSON.parse(localStorage.getItem("user"))));
  }, [dispatch]);

// 유저 정보를 설정하는 비동기 함수
export const checkLoginUser = createAsyncThunk(
  "user/checkLoginUser",
  async (user) => {
    console.log(user);
    const auth = getAuth();
    onAuthStateChanged(auth, (user) => {
      console.log(user);
      localStorage.setItem("user", JSON.stringify(user));
    });

    return user;
  }
);

  const handleAddTask = () => {
    if (!task.trim()) {
      return alert("태스크를 입력해주세요.");
    }
    const newTask = {
      createdAt: Date.now(),
      task,
      status: "pending",
      initialTime: time,
      pausedTime: "",
      userId: user.uid,
    };
    dispatch(addTask(newTask));
    setTask("");
    setTime(300);
  };

import { createSlice } from "@reduxjs/toolkit";
import { createAsyncThunk } from "@reduxjs/toolkit";
import {
  addDoc,
  getDocs,
  deleteDoc,
  doc,
  collection,
  updateDoc,
} from "firebase/firestore";
import { db } from "../firebase";

// 모든 태스크 가져오기
export const getAllTasks = createAsyncThunk(
  "tasks/getAllTasks",
  async (userId) => {
    const taskCollection = await getDocs(collection(db, "tasks"));
    const allTasks = [
      ...taskCollection.docs.map((doc) => ({ ...doc.data(), id: doc.id })),
    ].filter((task) => task.userId === userId);
    return allTasks;
  }
);

// 태스크 추가하기
export const addTask = createAsyncThunk("tasks/addTask", async (data) => {
  const result = await addDoc(collection(db, "tasks"), {
    userId: data?.userId,
    task: data?.task,
    initialTime: data?.initialTime,
    pausedTime: "",
    createdAt: data?.createdAt,
    status: data.status,
  });
  const taskId = result.path.split("/")[1];
  return { ...data, id: taskId };
});

// 태스크 삭제하기
export const deleteTask = createAsyncThunk(
  "tasks/deleteTask",
  async (taskId) => {
    console.log(taskId);
    await deleteDoc(doc(db, "tasks", taskId));

    return taskId;
  }
);

// 멈춘 태스크 추가하기
export const putTask = createAsyncThunk("tasks/putTask", async (task) => {
  if (task.pausedTime !== "") {
    await updateDoc(doc(db, "tasks", task.id), {
      pausedTime: task?.pausedTime,
      status: task.status,
    });
  }
  return task;
});

// 완료된 태스크 추가하기
export const completedTask = createAsyncThunk(
  "tasks/completedTask",
  async (task) => {
    if (task?.status === "complete") {
      await updateDoc(doc(db, "tasks", task.id), {
        status: task?.status,
      });
    }

    return task;
  }
);

// 모든 'complete task' 삭제하기
export const allClear = createAsyncThunk(
  "tasks/allClearTask",
  async (userId) => {
    const taskCollection = await getDocs(collection(db, "tasks"));
    const tasksToDelete = taskCollection.docs.filter(
      (doc) => doc.data().userId === userId && doc.data().status === "complete"
    );

    const deletePromises = tasksToDelete.map((task) =>
      deleteDoc(doc(db, "tasks", task.id))
    );
    await Promise.all(deletePromises);

    return tasksToDelete.map((task) => task.id);
  }
);

const initialState = {
  tasks: [],
  loading: false,
  error: null,
};

const tasksSlice = createSlice({
  name: "tasks",
  initialState,
  extraReducers: (builder) => {
    builder.addCase(getAllTasks.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(getAllTasks.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks = action.payload;
    });
    builder.addCase(getAllTasks.rejected, (state) => {
      state.loading = false;
    });
    builder.addCase(addTask.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(addTask.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks.push(action.payload);
    });
    builder.addCase(addTask.rejected, (state) => {
      state.loading = false;
    });
    builder.addCase(deleteTask.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(deleteTask.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks = state.tasks.filter((task) => task.id !== action.payload);
    });
    builder.addCase(deleteTask.rejected, (state) => {
      state.loading = false;
    });
    builder.addCase(putTask.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(putTask.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks = state.tasks.map((task) =>
        task.id === action.payload.id ? action.payload : task
      );
    });
    builder.addCase(putTask.rejected, (state) => {
      state.loading = false;
    });
    builder.addCase(completedTask.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(completedTask.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks = state.tasks.filter((task) => task.id !== action.payload.id);
      window.alert("Task saved successfully 😄");
    });
    builder.addCase(completedTask.rejected, (state) => {
      state.loading = false;
    });
    builder.addCase(allClear.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(allClear.fulfilled, (state, action) => {
      state.loading = false;
      state.tasks = state.tasks.filter((task) => !action.payload.some(task.id));
    });
    builder.addCase(allClear.rejected, (state) => {
      state.loading = false;
    });
  },
});

export default tasksSlice.reducer;

export const validateUsername = (username) => {
  const usernameRegex = /^[a-zA-Z0-9_]{3,16}$/;
  return usernameRegex.test(username)
    ? ""
    : "3자 이상 16자 이하, 영문자, 숫자, 밑줄(_)만 허용됩니다.";
};

export const validateEmail = (email) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email) ? "" : "잘못된 이메일 형식입니다.";
};

export const validatePassword = (password) => {
  const passwordRegex =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
  return passwordRegex.test(password)
    ? ""
    : "최소 8자 이상, 대문자, 소문자, 숫자, 특수문자를 포함해야 합니다.";
};

import { useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";

const usePreventAuth = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  useEffect(() => {
    if (JSON.parse(localStorage.getItem("user"))) {
      navigate("/home");
      if (pathname === "/archive") {
        navigate("/archive");
      }
    } else {
      if (pathname === "/home" || pathname === "/archive") {
        navigate("/");
      }
    }
  }, []);
  return;
};

export default usePreventAuth;

 <Button disabled={loading} onClick={handleSignIn}>
            Sign In
          </Button>

const Button = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  padding: 1rem 0;
  margin: 1rem;
  font-size: 1.5rem;
  color: black;
  background: white;
  border: 2px solid white;
  border-radius: 50px;
  box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 0;
  animation: fadeIn 1.5s ease forwards;

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
    }
  }

  &:hover {
    background: #ffffff;
    color: black;
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.3);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.2);
  }
  &:disabled {
    background-color: gray;
  }
`;

import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: "task-tracker3.firebaseapp.com",
  projectId: "task-tracker3",
  storageBucket: "task-tracker3.appspot.com",
  messagingSenderId: "977756658453",
  appId: "1:977756658453:web:588402c61ac23db27c671c",
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app); // Initialize storage

export { auth, db, storage, onAuthStateChanged };