[fix] Team components migration

package.json

@@ -14,6 +14,7 @@
     "http-proxy-middleware": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-paypal-express-checkout": "^1.0.5",
     "react-router-dom": "^6.24.1",
     "react-scripts": "5.0.1",
     "styled-component": "^2.8.0",

src/components/team/commons/teamInput.jsx → src/components/team/commons/teamInput.tsx

@@ -22,14 +22,25 @@ const StyledInput = styled.input`
   }
 `;
 
-const TeamInput = ({ placeholder, width, height, onChange }) => {
+interface TeamInputProps {
+  placeholder?: string;
+  width?: string;
+  height?: string;
+  onChange: (value: string) => void;
+}
+
+const TeamInput: React.FC<TeamInputProps> = ({
+  placeholder,
+  width,
+  height,
+  onChange,
+}) => {
   return (
-    <StyledInput
+    <input
       type="text"
       placeholder={placeholder}
-      width={width}
-      height={height}
-      onChange={onChange}
+      style={{ width, height }}
+      onChange={(e) => onChange(e.target.value)}
     />
   );
 };

src/components/team/diaryCard.jsx → src/components/team/diaryCard.tsx

@@ -1,20 +1,28 @@
-import React from "react";
+interface Diary {
+  postId: Number;
+  postTitle: string;
+  nickname: string;
+  postBody: string;
+  createdAt: any;
+  memberId: string;
+  thumbnailImageUrl: string;
+}
 
-const DiaryCard = ({ data }) => {
-  const cardContainer = {
+const DiaryCard = ({ data }: { data: Diary }) => {
+  const cardContainer: React.CSSProperties = {
     display: "flex",
     flexDirection: "column",
     width: "360px",
     height: "460px",
   };
 
-  const imgContainer = {
+  const imgContainer: React.CSSProperties = {
     width: "100%",
     height: "200px",
   };
   return (
     <div style={cardContainer}>
-      <img src={data.thumbImg} style={imgContainer} />
+      <img src={data.thumbnailImageUrl} style={imgContainer} />
       <div
         style={{
           width: "96%",
@@ -27,9 +35,9 @@ const DiaryCard = ({ data }) => {
         <div style={{ fontSize: "25px", margin: "15px 15px 40px" }}>
           {data.postTitle}
         </div>
-        <div style={{ fontSize: "20px", margin: "15px" }}>{data.writer}</div>
+        <div style={{ fontSize: "20px", margin: "15px" }}>{data.nickname}</div>
         <div style={{ fontSize: "16px", margin: "15px", color: "#999999" }}>
-          {data.contents}
+          {data.postBody}
         </div>
       </div>
     </div>