Merge pull request #11 from sasha1107/issue#8

Issue#8 타스로 이사가기 🏘️ - 1차 이사

my-diary/package.json

@@ -7,6 +7,10 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.4.0",
+    "@types/node": "^18.14.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "firebase": "^9.14.0",
     "firebase-tools": "^11.23.0",
     "react": "^18.2.0",
@@ -20,6 +24,7 @@
     "redux": "^4.2.1",
     "styled-components": "^5.3.6",
     "styled-reset": "^4.4.5",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -45,5 +50,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26"
   }
 }

my-diary/src/App.jsx → my-diary/src/App.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useAuthContext } from './hooks/useAuthContext';
 import { Provider } from 'react-redux';
 import { GlobalStyle } from './app.style';
@@ -8,6 +9,7 @@ import Router from './routes/Router';
 function App() {
 
   const { isAuthReady, user } = useAuthContext();
+  console.log(isAuthReady)
 
   return (
     <div className="App">

my-diary/src/components/DiaryForm/DiaryForm.jsx → my-diary/src/components/DiaryForm/DiaryForm.tsx

@@ -1,21 +1,29 @@
+import React from 'react';
 import { useEffect, useState } from 'react'
 import { useFirestore } from '../../hooks/useFirestore';
 import DiaryFormView from './DiaryFormView';
 
-export default function DiaryForm({ uid }) {
+export interface PropsType {
+    title: string;
+    text: string;
+    handleData: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
+    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+}
+
+export default function DiaryForm({ uid } : { uid: string }) {
     const [title, setTitle] = useState('');
     const [text, setText] = useState('');
     const { addDocument, response } = useFirestore('myDiary');
 
-    const handleData = (event) => {
+    const handleData = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         if (event.target.id === 'tit') {
             setTitle(event.target.value);
         } else if (event.target.id === 'txt') {
             setText(event.target.value);
         }
     }
 
-    const handleSubmit = (event) => {
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         console.log(title, text);
         addDocument({

my-diary/src/components/DiaryForm/DiaryFormView.jsx → my-diary/src/components/DiaryForm/DiaryFormView.tsx

@@ -2,13 +2,14 @@ import React from 'react'
 import { useDispatch } from 'react-redux';
 import DragCont from '../DragContainer/DragCont';
 import * as S from "./diaryForm.style";
+import { PropsType } from './DiaryForm';
 
 export default function DiaryFormView({
     title,
     text,
     handleData,
     handleSubmit,
-}) {
+}: PropsType) {
     const dispatch = useDispatch();
 
     return (

my-diary/src/components/Navbar/NavView.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Modal from "../Modal/Modal";
 import icon from '../../img/MyComputer.png'
-import *  as S from "./nav.style.js"
+import *  as S from "./nav.style"
 
 export default function NavView({
         logout,

my-diary/src/global.d.ts

@@ -0,0 +1,3 @@
+declare module "*.png"
+declare module "*.otf"
+declare module "*.wav"

my-diary/src/pages/account/Login/Login.jsx → my-diary/src/pages/account/Login/Login.tsx

@@ -1,17 +1,30 @@
+import React from 'react';
 import { useEffect, useState, useRef } from 'react'
 import { useLogin } from '../../../hooks/useLogin';
 import LoginView from './LoginView';
 
+export interface PropsType {
+    isPending: boolean;
+    email: string;
+    password: string;
+    emailErrMsg: string | null;
+    pwErrMsg: string | null;
+    emailRef: React.RefObject<HTMLInputElement>;
+    pwRef: React.RefObject<HTMLInputElement>;
+    handleData: (event: React.ChangeEvent<HTMLInputElement>) => void
+    handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+}
+
 export default function Login() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const { error, isPending, login } = useLogin();
-    const [emailErrMsg, setEmailErrMsg] = useState(null);
-    const [pwErrMsg, setPwErrMsg] = useState(null);
-    const emailRef = useRef(null);
-    const pwRef = useRef(null);
+    const [emailErrMsg, setEmailErrMsg] = useState<string | null>(null);
+    const [pwErrMsg, setPwErrMsg] = useState<string | null>(null);
+    const emailRef = useRef<HTMLInputElement>(null);
+    const pwRef = useRef<HTMLInputElement>(null);
 
-    const handleData = (event) => {
+    const handleData = (event: React.ChangeEvent<HTMLInputElement>) => {
         // console.log(event.target.type);
         if (event.target.type === 'email') {
             setEmail(event.target.value);
@@ -20,7 +33,7 @@ export default function Login() {
         }
     }
 
-    const handleSubmit = (event) => {
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();// 새로고침 막기
         login(email, password);
     }
@@ -31,18 +44,18 @@ export default function Login() {
             setPwErrMsg(null);
 
             // 이메일 인풋창으로 다시 커서 포커스
-            emailRef.current.focus();
+            emailRef.current?.focus();
         }
         else if (error === "Firebase: Error (auth/wrong-password)."){
             setPwErrMsg("* 비밀번호가 일치하지 않습니다.");
             setEmailErrMsg(null);
 
             // 패스워드 인풋창으로 다시 커서 포커스
-            pwRef.current.focus();
+            pwRef.current?.focus();
         }
     }, [error])
 
-    const props = {
+    const props: PropsType = {
         isPending,
         email,
         password,

my-diary/src/pages/account/Login/LoginView.jsx → my-diary/src/pages/account/Login/LoginView.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import DragCont from '../../../components/DragContainer/DragCont';
 import * as S from "../shared.style";
+import { PropsType } from './Login';
 
 export default function LoginView({
     isPending,
@@ -12,7 +13,7 @@ export default function LoginView({
     pwRef,
     handleData,
     handleSubmit
-}) {
+}: PropsType) {
     return (
         <DragCont>
             <S.Form onSubmit={handleSubmit}>

my-diary/src/pages/account/Signup/Signup.jsx → my-diary/src/pages/account/Signup/Signup.tsx

@@ -1,18 +1,32 @@
+import React from 'react';
 import { useEffect, useRef, useState } from 'react'
 import { useSignup } from '../../../hooks/useSignup'
 import SignupView from './SignupView';
 
+export interface PropsType {
+  email: string;
+  password: string;
+  displayName: string;
+  emailErrMsg: string | null;
+  pwErrMsg: string | null;
+  emailRef: React.RefObject<HTMLInputElement>;
+  pwRef: React.RefObject<HTMLInputElement>;
+  handleData : (event: React.ChangeEvent<HTMLInputElement>) => void
+  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+  isPending: boolean;
+}
+
 export default function Signup() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [displayName, setDisplayName] = useState('');
-  const [emailErrMsg, setEmailErrMsg] = useState(null);
-  const [pwErrMsg, setPwErrMsg] = useState(null);
-  const emailRef = useRef(null);
-  const pwRef = useRef(null);
+  const [emailErrMsg, setEmailErrMsg] = useState<string | null>(null);
+  const [pwErrMsg, setPwErrMsg] = useState<string | null>(null);
+  const emailRef = useRef<HTMLInputElement>(null);
+  const pwRef = useRef<HTMLInputElement>(null);
   const {error, isPending, signup} = useSignup();
 
-  const handleData = (e) => {
+  const handleData = (e: React.ChangeEvent<HTMLInputElement>) => {
     // console.log(e.target.type);
     if (e.target.type === 'email'){
       setEmail(e.target.value)
@@ -24,7 +38,7 @@ export default function Signup() {
       setDisplayName(e.target.value)
     }
   }
-  const handleSubmit = (e) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault(); // 새로고침 막기
     signup(email, password,displayName)
   }
@@ -35,18 +49,18 @@ export default function Signup() {
       setPwErrMsg(null);
 
       // 이메일 인풋창으로 다시 커서 포커스
-      emailRef.current.focus();
+      emailRef.current?.focus();
     }
     else if (error === "Firebase: Password should be at least 6 characters (auth/weak-password)."){
       setPwErrMsg("* 비밀번호는 6자 이상 입력해주세요.");
       setEmailErrMsg(null);
 
       // 패스워드 인풋창으로 다시 커서 포커스
-      pwRef.current.focus();
+      pwRef.current?.focus();
     }
   }, [error])
 
-  const props = {
+  const props: PropsType = {
     email,
     password,
     displayName,

my-diary/src/pages/account/Signup/SignupView.jsx → my-diary/src/pages/account/Signup/SignupView.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import DragCont from '../../../components/DragContainer/DragCont';
 import * as S from "../shared.style";
+import { PropsType } from './Signup';
 
 export default function SignupView({
     email,
@@ -13,7 +14,7 @@ export default function SignupView({
     handleData,
     handleSubmit,
     isPending
-}) {
+}: PropsType) {
     return (
         <DragCont>
             <S.Form onSubmit={handleSubmit}>

my-diary/src/pages/home/Home.jsx → my-diary/src/pages/home/Home.tsx

@@ -1,19 +1,31 @@
+import React from "react";
 import { useSelector } from 'react-redux';
 import { useCollection } from '../../hooks/useCollection';
 import { useAuthContext } from '../../hooks/useAuthContext'
 import HomeView from './HomeView';
+import { StateType } from "../../types/state.type";
+import { DiaryType } from "../../types/diary.type";
+
+interface PropsType {
+  formStatus: boolean;
+  userUid: string;
+  documents: DiaryType[] | null;
+  error: string | null; 
+}
 
 export default function Home() {  
   const { user } = useAuthContext();
+  const userUid = user.uid;
   const { documents, error } = useCollection('myDiary',["uid", "==", user.uid]);
-  const formStatus = useSelector(state => state.form)
-  
-  const props = {
+  const formStatus = useSelector((state: StateType) => state.form)
+
+  const props : PropsType= {
     formStatus,
-    user,
+    userUid,
     documents,
     error
   }
+
   return (
     <HomeView {...props}/>
   )

my-diary/src/pages/home/HomeView.jsx

@@ -6,7 +6,7 @@ import styles from './Home.module.css'
 
 export default function HomeView({
     formStatus,
-    user,
+    userUid,
     documents,
     error
 }) {
@@ -15,7 +15,7 @@ export default function HomeView({
             <IconArea />
             <main className={styles.cont}>
                 <aside>
-                {formStatus ? <DiaryForm uid={user.uid}/> : <></>}
+                {formStatus ? <DiaryForm uid={userUid}/> : <></>}
                 </aside>
                 <ul className={styles.content_list}>
                 {error && <strong>{error}</strong>}

my-diary/src/pages/home/IconArea/IconArea.jsx → my-diary/src/pages/home/IconArea/IconArea.tsx

@@ -1,19 +1,26 @@
 import React from 'react'
-import { useSelector,  } from 'react-redux';
+import { useSelector } from 'react-redux';
 import IconAreaView from './IconAreaView';
 import binAudio from "../../../assets/audio/Windows_XP_Recycle.wav"
+import { StateType } from '../../../types/state.type';
+
+export interface PropsType {
+    handleUrl: (URL: string) => void;
+    formStatus: boolean;
+    audio: HTMLAudioElement;
+}
 
 export default function IconArea() {
-    const handleUrl = (URL) => {
+    const handleUrl = (URL: string)=> {
         window.open(URL, '_blank');
     }
 
     // 일기 쓰기 탭 디스플레이 상태
-    const formStatus = useSelector(state => state.form);
+    const formStatus = useSelector((state: StateType) => state.form);
 
     const audio = new Audio(binAudio);
 
-    const props = {
+    const props: PropsType = {
         handleUrl,
         formStatus,
         audio

my-diary/src/pages/home/IconArea/IconAreaView.jsx → my-diary/src/pages/home/IconArea/IconAreaView.tsx

@@ -7,8 +7,9 @@ import network from "../../../img/Network.png"
 import computer from "../../../img/Wordpad.png"
 import internet from "../../../img/Internet.png"
 import * as S from "./iconArea.style"
+import { PropsType } from './IconArea';
 
-export default function IconAreaView({ handleUrl, formStatus, audio}) {
+export default function IconAreaView({ handleUrl, formStatus, audio} : PropsType) {
     const dispatch = useDispatch();
 
     return (

my-diary/src/redux/reducer.js

@@ -1,4 +1,4 @@
-export function reducer(state, action){
+export function reducer(state, action) {
     if (action.type === 'toggleForm'){
         return {
             ...state, form: !state.form
@@ -16,7 +16,7 @@ export function reducer(state, action){
     }
     else if (action.type === 'countDiary'){
         return {
-            ...state, diaryList: state.count
+            ...state, diaryList: state.diaryList
         }
     }
     return state;

my-diary/src/redux/store.js

@@ -7,4 +7,5 @@ const initialState = {
     exit: false,
     diaryList: 0,
 }
+
 export const store = createStore(reducer, initialState)

my-diary/src/routes/Router.jsx → my-diary/src/routes/Router.tsx

@@ -7,6 +7,7 @@ import Login from '../pages/account/Login/Login'
 import Signup from '../pages/account/Signup/Signup'
 import Off from '../pages/etc/Off'
 import Footer from '../components/Footer/Footer'
+
 export default function Router() {
     const { isAuthReady, user } = useAuthContext();