Merge pull request #255 from purplenib/React-김영주-sprint8

[김영주] Sprint8

package.json

@@ -3,18 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.24.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "tsc",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
@@ -37,5 +40,19 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "file-loader": "^6.2.0",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^3.4.7",
+    "ts-loader": "^9.5.1",
+    "typescript": "^4.9.5",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
+  "main": "index.js",
+  "author": "",
+  "license": "ISC"
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Header from "./components/Layout/Header";
+import Home from "./pages/Home";
+import SignIn from "./pages/SignIn";
+import Items from "./pages/Items";
+import ItemInfo from "./pages/ItemInfo";
+import AddItem from "./pages/AddItem";
+import Community from "./pages/Community";
+import NotFound from "./pages/NotFound";
+
+const Router: React.FC = () => {
+  return (
+    <BrowserRouter>
+      <Header />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/SignIn" element={<SignIn />} />
+        <Route path="/Items" element={<Items />} />
+        <Route path="/Items/:productId" element={<ItemInfo />} />
+        <Route path="/AddItem" element={<AddItem />} />
+        <Route path="/Community" element={<Community />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Router;

src/DTO/article.ts

@@ -0,0 +1,20 @@
+export interface Writer {
+  id: number;
+  nickname: string;
+}
+
+export interface Article {
+  id: number;
+  images?: string;
+  count: string;
+  title: string;
+  likeCount: number;
+  createdAt: string;
+  updatedAt: string;
+  writer: Writer;
+}
+
+export interface ArticlesResponse {
+  list: Article[];
+  totalCount: number;
+}

src/DTO/comment.ts

@@ -0,0 +1,17 @@
+export interface CommentWriter {
+  image: string;
+  nickname: string;
+  id: number;
+}
+
+export interface CommentRequest {
+  content: string;
+}
+
+export interface CommentResponse {
+  writer: CommentWriter;
+  updatedAt: string;
+  createdAt: string;
+  content: string;
+  id: number;
+}

src/DTO/product.ts

@@ -0,0 +1,16 @@
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  description?: string;
+  createdAt?: string;
+  favoriteCount?: number;
+  ownerId?: number;
+  images?: string[];
+  tags?: string[];
+}
+
+export interface ProductResponse {
+  list: Product[];
+  totalCount: number;
+}

src/DTO/user.ts

@@ -0,0 +1,7 @@
+export interface User {
+  id: number;
+  nickname: string;
+  createdAt: string;
+  updatedAt: string;
+  images?: string | null;
+}

src/components/AddItem/AddItemDetails.jsx → src/components/AddItem/AddItemDetails.tsx

@@ -1,7 +1,18 @@
 import React from "react";
+import { ItemDetails } from "../../pages/AddItem";
 
-function AddItemDetails({ details, setDetails }) {
-  const handleDetailsChange = (e) => {
+interface AddItemDetailsProps {
+  details: ItemDetails;
+  setDetails: React.Dispatch<React.SetStateAction<ItemDetails>>;
+}
+
+const AddItemDetails: React.FC<AddItemDetailsProps> = ({
+  details,
+  setDetails,
+}) => {
+  const handleDetailsChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
     const { name, value } = e.target;
     setDetails((prevDetails) => ({
       ...prevDetails,
@@ -12,7 +23,7 @@ function AddItemDetails({ details, setDetails }) {
   return (
     <section className="item-details">
       <div className="item-detail-container">
-        <label htmlFor="itemName" className="section-title">
+        <label htmlFor="itemName" className="font-bold text-gray-800 text-lg">
           상품명
         </label>
         <input
@@ -27,7 +38,10 @@ function AddItemDetails({ details, setDetails }) {
       </div>
 
       <div className="item-detail-container">
-        <label htmlFor="itemDesciption" className="section-title">
+        <label
+          htmlFor="itemDesciption"
+          className="font-bold text-gray-800 text-lg"
+        >
           상품 소개
         </label>
         <textarea
@@ -41,7 +55,7 @@ function AddItemDetails({ details, setDetails }) {
       </div>
 
       <div className="item-detail-container">
-        <label htmlFor="itemPrice" className="section-title">
+        <label htmlFor="itemPrice" className="font-bold text-gray-800 text-lg">
           판매가격
         </label>
         <input
@@ -56,6 +70,6 @@ function AddItemDetails({ details, setDetails }) {
       </div>
     </section>
   );
-}
+};
 
 export default AddItemDetails;