[3주차-ts] 이상형월드컵 자스👉타스

package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "@types/styled-components": "^5.1.25",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",
     "styled-reset": "^4.3.4",
@@ -36,5 +38,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "typescript": "^4.7.4"
   }
 }

src/App.js → src/App.tsx

@@ -1,10 +1,11 @@
 import "./App.css";
 import Game from './pages/Game';
-import Result from './pages/Result';
-import GlobalStyle from './components/GlobalStyle';
+import GlobalStyle from './style/GlobalStyle';
+import React from 'react';
 function App() {
 
-  return (<>
+  return (
+  <>
   <GlobalStyle/>
   <Game/>
   {/* <Result/> */}

src/components/GameImg.jsx → src/components/GameImg.tsx

@@ -1,4 +1,5 @@
-import { React, useState, useEffect, useRef } from "react";
+import React from "react";
+import { ImgProperty } from '../types/type';
 import styled from "styled-components";
 
 const ImgContainer = styled.div`
@@ -25,14 +26,15 @@ const Desc = styled.h1`
   color: white;
   text-shadow: 3px 3px 3px black; //글자 잘 안 보여서 shadow 설정
 `;
+
 //게임에 사용되는 이미지 컴포넌트
-function GameImg({ src, name, onClick }) {
+function GameImg({ src, title, onClick }:ImgProperty) {
   //src: 이미지 , name: 사진에 대한 이름, onCLick: 온클릭 함수
 
   return (
     <ImgContainer onClick={onClick}>
-      <StyledImg src={src} name={name} />
-      <Desc>{name}</Desc>
+      <StyledImg src={src} title={title} />
+      <Desc>{title}</Desc>
     </ImgContainer>
   );
 }

src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.jpge";
+declare module "*.gif";

src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -14,4 +13,4 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+