feat: Ver 2.2.0 작품 둘러보기 css 구현 (#151)

Author: goodsmell

package-lock.json

@@ -53,11 +53,15 @@
     ]
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.4",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.10.8",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.4",
     "typescript": "^5.7.3",
     "vite": "^6.0.7"
   }

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {}, // ✅ 요걸로 바꿔야 해!
+    autoprefixer: {},
+  },
+};

postcss.config.js

@@ -1,3 +1,4 @@
+// App.jsx
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 import DefaultLayout from "./layouts/DefaultLayout";
@@ -13,6 +14,7 @@ import SignIn from "./pages/auth/SignIn";
 import SignInV2 from "./pages/auth/SignInV2";
 import FindBar from "./pages/auth/FindBar";
 import List from "./pages/work/List";
+import PostList from "./pages/work/postList/PostGallery";
 import Detail from "./pages/work/Detail";
 import PostWork from "./pages/work/PostWork";
 import Purchase from "./pages/payment/Purchase";
@@ -56,14 +58,26 @@ function App() {
               <Route path="signin/v2" element={<SignInV2 />} />
               <Route path="signin/find/:id" element={<FindBar />} />
 
+              <Route path="post-list" element={<PostList />} />
+              <Route path="post-list/detail/:id" element={<Detail />} />
+
               <Route path="list" element={<List />} />
               <Route path="list/detail/:id" element={<Detail />} />
 
-              <Route path="purchase/:id" element={<ProtectedRoute element={<Purchase />} />} />
+              <Route
+                path="purchase/:id"
+                element={<ProtectedRoute element={<Purchase />} />}
+              />
 
               <Route element={<MarginLayout />}>
-                <Route path="admin/scriptManage" element={<AdminSwitch page={0} />} />
-                <Route path="admin/orderManage" element={<AdminSwitch page={1} />} />
+                <Route
+                  path="admin/scriptManage"
+                  element={<AdminSwitch page={0} />}
+                />
+                <Route
+                  path="admin/orderManage"
+                  element={<AdminSwitch page={1} />}
+                />
 
                 <Route path="policy/:id" element={<PolicyBar />} />
 
@@ -73,7 +87,10 @@ function App() {
                   path="purchase/success"
                   element={<ProtectedRoute element={<PurchaseSuccess />} />}
                 />
-                <Route path="purchase/abort" element={<ProtectedRoute element={<Abort />} />} />
+                <Route
+                  path="purchase/abort"
+                  element={<ProtectedRoute element={<Abort />} />}
+                />
                 <Route path="post" element={<PostWork />} />
 
                 <Route

src/App.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { formatNumber } from "@/utils/formatNumber";
+import liekIcon from "./../../assets/image/post/list/ic-fill-heart.svg";
+import viewIcon from "./../../assets/image/post/list/ic-outline-eye.svg";
+
+interface LikeViewCountProps {
+  likes: number;
+  views: number;
+}
+
+function LikeViewCount({ likes, views }: LikeViewCountProps) {
+  return (
+    <div className="flex items-center text-basetext-black gap-[10px]">
+      <div className="flex items-center gap-[5px]">
+        <img
+          src={liekIcon}
+          alt="Like"
+          className="flex-shrink-0 w-4 h-4 aspect-square"
+        />
+        <span className="text-black text-[14px] font-normal leading-[20px] font-['Pretendard']">
+          {formatNumber(likes)}
+        </span>
+      </div>
+      <div className="flex items-center  gap-[5px] ">
+        <img
+          src={viewIcon}
+          alt="View"
+          className="flex-shrink-0 w-4 h-4 aspect-square"
+        />
+        <span className="text-black text-[14px] font-normal leading-[20px] font-['Pretendard']">
+          {formatNumber(views)}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default LikeViewCount;