Feature: projectBox(#6)

package.json

@@ -10,6 +10,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4",

src/App.js

@@ -19,6 +19,9 @@ function App() {
             <Route path="/admin/main" element={<Test />} />
           </Route>
         </Routes>
+        <Routes>
+          <Route path="/test" element={<Test />} />
+        </Routes>
       </BrowserRouter>
     </div>
   );

src/components/common/ProjectBox.js

@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import { Link } from "react-router-dom";
+import { AiFillGithub } from "react-icons/ai";
 
 const container = css`
   @media (min-width: 360px) and (max-width: 1919px) {
@@ -160,19 +161,28 @@ const icon = css`
   margin-right: 10px;
 `;
 
+const github = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  background: #d9d9d9;
+  border-radius: 5px;
+  margin-right: 10px;
+  text-align: center;
+`;
+
 const image = css`
   height: 100%;
   width: 100%;
   text-align: center;
   object-fit: cover;
 `;
 
-export default function ProjectBox({ detailPage, project, match }) {
-  // console.log(props.match.url);
+export default function ProjectBox(prop) {
   return (
-    /*<Link to={`${match.url}/${mach.params.id}`} */
-    /*<Link to={`/${detailPage}/${project.id}`}> */
-    <div css={container}>
+    <div css={container} onClick={prop.onClick}>
       <div css={subContainer1}>
         <div css={pic}>
           썸네일
@@ -181,6 +191,7 @@ export default function ProjectBox({ detailPage, project, match }) {
       </div>
       <div css={subContainer2}>
         <div css={tags}>
+          {/* api 나오면 바꿈 */}
           <div css={tag}>웹{/*{project.tag}*/}</div>
           <div css={tag}>앱</div>
         </div>
@@ -189,7 +200,9 @@ export default function ProjectBox({ detailPage, project, match }) {
           <p css={subTitle}>프로젝트 간략한 설명{/*{project.explain}*/}</p>
         </div>
         <div css={icons}>
-          <div css={icon}>아이콘</div>
+          <div css={icon}>
+            <AiFillGithub css={github} />
+          </div>
           <div css={icon}>아이콘</div>
         </div>
       </div>

src/pages/Test.js

@@ -1,7 +1,12 @@
 import React from "react";
+import ProjectBox from "../components/common/ProjectBox";
 
 const Test = () => {
-  return <div>Test</div>;
+  return (
+    <div>
+      <ProjectBox />
+    </div>
+  );
 };
 
 export default Test;