feat:#21-목록페이 html,css추가

.eslintrc.cjs

@@ -6,16 +6,41 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
+    'plugin: prettier/recommended',
+    'react-app',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
   settings: { react: { version: '18.2' } },
   plugins: ['react-refresh'],
   rules: {
+    'no-var': 'warn', // var 금지
+    'no-multiple-empty-lines': 'warn', // 여러 줄 공백 금지
+    'no-console': ['warn', { allow: ['warn', 'error'] }], // console.log() 금지
+    eqeqeq: 'warn', // 일치 연산자 사용 필수
+    'dot-notation': 'warn', // 가능하다면 dot notation 사용
+    'no-unused-vars': 'warn', // 사용하지 않는 변수 금지
+    'react/destructuring-assignment': 'warn', // state, prop 등에 구조분해 할당 적용
+    'react/jsx-pascal-case': 'warn', // 컴포넌트 이름은 PascalCase로
+    'react/no-direct-mutation-state': 'warn', // state 직접 수정 금지
+    'react/jsx-no-useless-fragment': 'warn', // 불필요한 fragment 금지
+    'react/no-unused-state': 'warn', // 사용되지 않는 state
+    'react/jsx-key': 'warn', // 반복문으로 생성하는 요소에 key 강제
+    'react/self-closing-comp': 'warn', // 셀프 클로징 태그 가능하면 적용
+    'react/jsx-curly-brace-presence': 'warn', // jsx 내 불필요한 중괄호 금지
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
+    env: {
+      browser: true, // document, window 등의 브라우저 내장 객체들 조회시 ESLint 오류 없이 작업
+    },
     'react/jsx-no-target-blank': 'off',
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },
     ],
   },
-}
+};

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "endOfLine": "lf",
+  "arrowParens": "avoid",
+  "singleQuote": true
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["streetsidesoftware.code-spell-checker"]
+}

package.json

@@ -28,10 +28,13 @@
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "json-server": "^0.17.4",
+    "prettier": "^3.2.5",
     "vite": "^5.2.0"
   }
 }

src/api/WastesApi.jsx

@@ -28,3 +28,8 @@ export const deletePost = async (wasteId) => {
     throw error; // 오류를 다시 throw하여 컴포넌트에서 처리할 수 있도록 함
   }
 };
+
+export const updatePost = async (wasteId, updatedPost) => {
+  const response = await axios.put(`${API_URL}/wastes/${wasteId}`, updatedPost);
+  return response.data;
+};

src/components/ProductCard.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import * as S from '../styles/ProductCardStyle';
+import { GoHeart } from 'react-icons/go';
+import { GoHeartFill } from 'react-icons/go';
+import { useRecoilState } from 'recoil';
+import { postsState } from '../recoil/RecoilWastes';
+import { useEffect } from 'react';
+import { fetchPosts } from '../api/WastesApi';
+import { updatePost } from '../api/WastesApi';
+const ProductCard = ({ post, onDelete }) => {
+  const handleDeleteClick = () => {
+    onDelete(post.id);
+  };
+
+  const [posts, setPosts] = useRecoilState(postsState);
+
+  const handleLikeToggle = async () => {
+    const updatedPost = { ...post };
+    if (updatedPost.hearted) {
+      updatedPost.likeCount -= 1; // 채워진 하트에서 빈 하트로 변경되면 likeCount 감소
+    } else {
+      updatedPost.likeCount += 1; // 빈 하트에서 채워진 하트로 변경되면 likeCount 증가
+    }
+    updatedPost.hearted = !updatedPost.hearted; // 하트 상태 업데이트
+    await updatePost(post.id, updatedPost); // 서버에 업데이트 요청
+    const updatedPosts = posts.map(p => (p.id === post.id ? updatedPost : p));
+    setPosts(updatedPosts); // Recoil 상태 업데이트
+  };
+  return (
+    <div>
+      <S.Container>
+        <div className="card">
+          <div className="product-box">
+            <img src="https://placehold.jp/300x300.png" alt="임시이미지" />
+            <div>
+              <div className=" title">{post.title}</div>
+              <div className=" content">
+                <div className="adrress">
+                  <div className="state">{post.address.state}</div>
+                  <div className="city">{post.address.city}</div>
+                </div>
+                <div className="day">
+                  {/* <LuCalendarDays /> */}
+                  {/* <div className="created-at">{wastes.created_at}</div> */}
+                </div>
+              </div>
+              <div className=" price">{post.wastePrice}원</div>
+            </div>
+          </div>
+          <div className="card-bottom">
+            <p>{post.sellStatus} </p>
+            <div className="like">
+              <button onClick={handleLikeToggle}>
+                {post.hearted ? (
+                  <GoHeartFill size="30" />
+                ) : (
+                  <GoHeart size="30" />
+                )}
+              </button>
+              <div>{post.likeCount}</div>
+            </div>
+          </div>
+          {/* <button onClick={() => handleDelete(post.id)}>삭제</button> */}
+          {/* <button onClick={handleDeleteClick}>삭제</button> */}
+        </div>
+      </S.Container>
+    </div>
+  );
+};
+
+export default ProductCard;