onOpenModal(ogsm.id)}
+ />
+
+
+
+ )
+}
+
+export default OgsmItem
diff --git a/src/components/features/main/OgsmList.tsx b/src/components/features/main/OgsmList.tsx
new file mode 100644
index 0000000..f237ba1
--- /dev/null
+++ b/src/components/features/main/OgsmList.tsx
@@ -0,0 +1,41 @@
+import React from "react"
+import { List } from "@mui/material"
+import OgsmItem from "./OgsmItem"
+import { OGSM_TYPE } from "@/types"
+import useAuth from "@/hooks/useAuth"
+
+interface OgsmListProps {
+ onOpenModal: (id?: number) => void
+ ogsmList: OGSM_TYPE[]
+ onSave: (ogsm: OGSM_TYPE) => void
+}
+
+const OgsmList = ({ onOpenModal, ogsmList, onSave }: OgsmListProps) => {
+ const { user } = useAuth()
+
+ return user && ogsmList.length > 0 ? (
+
+ {ogsmList.map((ogsm: OGSM_TYPE) => {
+ return (
+
+ )
+ })}
+
+ ) : (
+
+ {user ? "No data available." : "Please use after logging in."}
+
+ )
+}
+
+export default OgsmList
diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx
new file mode 100644
index 0000000..bc162d0
--- /dev/null
+++ b/src/hooks/useAuth.tsx
@@ -0,0 +1,14 @@
+import { useContext } from "react"
+import { AuthContext } from "../app/providers/index"
+
+const useAuth = () => {
+ const authContext = useContext(AuthContext)
+
+ if (!authContext) {
+ throw new Error("Not Found")
+ }
+
+ return authContext
+}
+
+export default useAuth
diff --git a/src/hooks/useGetOgsm.tsx b/src/hooks/useGetOgsm.tsx
new file mode 100644
index 0000000..b29d3bc
--- /dev/null
+++ b/src/hooks/useGetOgsm.tsx
@@ -0,0 +1,62 @@
+import { OGSM_TYPE } from "@/types"
+import { useEffect, useMemo, useState } from "react"
+import { db } from "../../firebase.config"
+import { collection, doc, getDoc, setDoc } from "firebase/firestore"
+
+interface useFetchOgsmProps {
+ email?: string
+}
+
+const useFetchOgsm = ({ email }: useFetchOgsmProps) => {
+ const [data, setData] = useState([])
+ const [error, setError] = useState(null)
+ const [isLoading, setIsLoading] = useState(true)
+ const [isRefetch, setIsRefetch] = useState(false)
+
+ useEffect(() => {
+ if (!email) {
+ setData([])
+ setIsLoading(false)
+ return
+ }
+
+ const id = email.replace("@", "")
+ const fetchData = async () => {
+ try {
+ const collectionRef = collection(db, "user")
+ const docRef = doc(collectionRef, id)
+ const response = await getDoc(docRef)
+
+ if (response.exists()) {
+ const list = response.data()["ogsm"].map((item: any) => {
+ return {
+ ...item,
+ id: item.id || `${id}-${item.goal}`,
+ }
+ })
+ setData(list)
+ } else {
+ await setDoc(docRef, { ogsm: [] })
+ setData([])
+ }
+ } catch (error) {
+ setError(error)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ if (id || isRefetch) {
+ fetchData()
+ setIsRefetch(false)
+ }
+ }, [email, isRefetch])
+
+ const onRefetch = () => {
+ setIsRefetch(true)
+ }
+
+ return { data, isLoading, error, refetch: onRefetch }
+}
+
+export default useFetchOgsm
diff --git a/src/hooks/useLogin.tsx b/src/hooks/useLogin.tsx
new file mode 100644
index 0000000..f471bf5
--- /dev/null
+++ b/src/hooks/useLogin.tsx
@@ -0,0 +1,37 @@
+import { useState } from "react"
+import { auth } from "../../firebase.config"
+import { GoogleAuthProvider, signInWithPopup } from "firebase/auth"
+
+type DATA_TYPE = GoogleAuthProvider
+
+type MUTATION_FN_TYPE = {
+ onSuccess: (params?: any) => void
+ onError: () => void
+}
+
+const useLogin = () => {
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+
+ const mutate = async (data: DATA_TYPE, mutationFn: MUTATION_FN_TYPE) => {
+ const provider = data
+ const { onSuccess, onError } = mutationFn
+ setIsLoading(true)
+
+ try {
+ const response = await signInWithPopup(auth, provider)
+ if (response) {
+ onSuccess(response)
+ }
+ } catch (error) {
+ setError(error)
+ onError()
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ return { mutate, isLoading, error }
+}
+
+export default useLogin
diff --git a/src/hooks/useLogout.tsx b/src/hooks/useLogout.tsx
new file mode 100644
index 0000000..efc0b80
--- /dev/null
+++ b/src/hooks/useLogout.tsx
@@ -0,0 +1,31 @@
+import { useState } from "react"
+
+type MUTATION_FN_TYPE = {
+ onSuccess: (params?: any) => void
+ onError: () => void
+}
+
+const useLogout = () => {
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+
+ const mutate = async (data: any, mutationFn: MUTATION_FN_TYPE) => {
+ const auth = data
+ const { onSuccess, onError } = mutationFn
+ setIsLoading(true)
+
+ try {
+ const response = await auth.signOut()
+ onSuccess()
+ } catch (error) {
+ setError(error)
+ onError()
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ return { mutate, isLoading, error }
+}
+
+export default useLogout
diff --git a/src/hooks/useMutation.tsx b/src/hooks/useMutation.tsx
new file mode 100644
index 0000000..4b2035b
--- /dev/null
+++ b/src/hooks/useMutation.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from "react"
+import { OGSM_TYPE } from "@/types"
+import useAuth from "./useAuth"
+import { collection, doc, updateDoc } from "firebase/firestore"
+import { db } from "../../firebase.config"
+
+type DATA_TYPE = {
+ id?: number
+ ogsmList: OGSM_TYPE[]
+ newOgsm?: OGSM_TYPE
+}
+
+type MUTATION_FN_TYPE = {
+ onSuccess: () => void
+ onError: () => void
+}
+
+interface useMutationProps {
+ method: "GET" | "POST" | "PUT" | "DELETE"
+}
+
+const useMutation = ({ method }: useMutationProps) => {
+ const { user } = useAuth()
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+
+ const mutate = async (data: DATA_TYPE, mutationFn: MUTATION_FN_TYPE) => {
+ const { id: ogsmId, ogsmList, newOgsm } = data
+ const { onSuccess, onError } = mutationFn
+ const userId = user.email.replace("@", "")
+ setIsLoading(true)
+
+ try {
+ const collectionRef = collection(db, "user")
+ const docRef = doc(collectionRef, userId)
+ let updatedOgsm
+
+ if (method === "DELETE") {
+ updatedOgsm = ogsmList.filter((ogsm) => ogsm.id !== ogsmId)
+ }
+
+ if (method === "POST") {
+ updatedOgsm = ogsmList.map((ogsm) => {
+ if (ogsm.id === newOgsm?.id) {
+ return { ...ogsm, ...newOgsm }
+ }
+ return ogsm
+ })
+ }
+
+ await updateDoc(docRef, { ogsm: updatedOgsm })
+ onSuccess()
+ } catch (error) {
+ setError(error)
+ onError()
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ return { mutate, isLoading, error }
+}
+
+export default useMutation
diff --git a/src/hooks/useSaveOgsm.tsx b/src/hooks/useSaveOgsm.tsx
new file mode 100644
index 0000000..9924e27
--- /dev/null
+++ b/src/hooks/useSaveOgsm.tsx
@@ -0,0 +1,45 @@
+import { OGSM_TYPE } from "@/types"
+import { useState } from "react"
+import { db } from "../../firebase.config"
+import { arrayUnion, collection, doc, updateDoc } from "firebase/firestore"
+import useAuth from "./useAuth"
+
+type DATA_TYPE = {
+ newOgsm: OGSM_TYPE
+}
+
+type MUTATION_FN_TYPE = {
+ onSuccess: () => void
+ onError: () => void
+}
+
+const useSaveOgsm = () => {
+ const { user } = useAuth()
+ const [isLoading, setIsLoading] = useState(false)
+ const [error, setError] = useState(null)
+
+ const mutate = async (data: DATA_TYPE, mutationFn: MUTATION_FN_TYPE) => {
+ const { newOgsm } = data
+ const { onSuccess, onError } = mutationFn
+ const id = user.email.replace("@", "")
+ setIsLoading(true)
+
+ try {
+ const collectionRef = collection(db, "user")
+ const docRef = doc(collectionRef, id)
+ await updateDoc(docRef, {
+ ogsm: arrayUnion(newOgsm),
+ })
+ onSuccess()
+ } catch (error) {
+ setError(error)
+ onError()
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ return { mutate, isLoading, error }
+}
+
+export default useSaveOgsm
diff --git a/src/types/index.tsx b/src/types/index.tsx
new file mode 100644
index 0000000..20c1512
--- /dev/null
+++ b/src/types/index.tsx
@@ -0,0 +1,18 @@
+export type OGSM_TYPE = {
+ id: number
+ objective: string
+ goal: string
+ strategy: string
+ measure: string
+ startDate?: string | null
+ endDate?: string | null
+ isDone?: boolean
+}
+
+export enum NUMBER_SUFFIX {
+ NULL = "",
+ FIRST = "st",
+ SECOND = "nd",
+ THIRD = "rd",
+ OTHER = "th",
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..18c1136
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}