Feat : fill licenseList data using dummydata #104

src/components/common/IssueList.js

@@ -6,41 +6,33 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 import ListSubheader from "@mui/material/ListSubheader";
+import { Button } from "@mui/material";
 import axios from "axios";
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
 import { alpha } from "@mui/material/styles";
+import dummy from "../../dummy/dummyIssueTemplate.json";
+import {
+  templateContent,
+  templatePreviewState,
+  templateSelectState,
+} from "../../recoil/templateState";
+import { style } from "@mui/system";
+
 const IssueList = (props) => {
+  const [data, setData] = useState([]);
+  const handleCheck = (temTitle) => {
+    // if (window.confirm(`${temTitle}`)) {
+    //   console.log("확인");
+    // } else {
+    //   console.log("취소");
+    // }
+    setData(`${temTitle}`);
+  };
+
   return (
-    // <StIssueList>
-    //   <List
-    //     sx={{
-    //       width: "100%",
-    //       maxWidth: 360,
-    //       bgcolor: "background.paper",
-    //       position: "relative",
-    //       overflow: "auto",
-    //       maxHeight: 300,
-    //       "& ul": { padding: 0 },
-    //     }}
-    //     subheader={<li />}
-    //   >
-    //     {[0, 1, 2, 3, 4].map((sectionId) => (
-    //       <li key={`section-${sectionId}`}>
-    //         <ul>
-    //           <ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
-    //           {[0, 1, 2].map((item) => (
-    //             <ListItem key={`item-${sectionId}-${item}`}>
-    //               <ListItemText primary={`Item ${item}`} />
-    //             </ListItem>
-    //           ))}
-    //         </ul>
-    //       </li>
-    //     ))}
-    //   </List>
-    // </StIssueList>
     <StIssueList>
-      <Box
+      <ListBox
         sx={{
           width: "100%",
           height: "100%",
@@ -59,35 +51,77 @@ const IssueList = (props) => {
             overscanCount: 5,
           }}
         >
-          {[0, 1, 2, 3, 4].map((sectionId) => (
-            <li key={`section-${sectionId}`}>
+          {dummy.dummyIssueTemplate.map((it) => (
+            <li key={it.type}>
               <ul>
-                <ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
-                {[0, 1, 2].map((item) => (
-                  <ListItemButton key={`item-${sectionId}-${item}`}>
-                    <ListItemText primary={`Item ${item}`} />
-                  </ListItemButton>
+                <ListSubheader>{`${it.type}`}</ListSubheader>
+                {it.templates.map((item) => (
+                  <ListItem
+                    components="div"
+                    onClick={() => {
+                      handleCheck(item.title);
+                    }}
+                    key={item.title}
+                  >
+                    <ListItemButton>
+                      <ItemTxt primary={`${item.title}`} />
+                    </ListItemButton>
+                  </ListItem>
                 ))}
               </ul>
             </li>
           ))}
         </List>
-      </Box>
+      </ListBox>
+      <ContentBtnDiv>
+        <ContentP>
+          <p>{data}</p>
+        </ContentP>
+        <UseBtn variant="contained">Use</UseBtn>
+      </ContentBtnDiv>
     </StIssueList>
   );
 };
 
 export default IssueList;
 
-const StIssueList=styled.div`
-width: 100%;
-height: 100%;
+const StIssueList = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  border: 1px solid blue;
+  background-color: aqua;
+`;
+
+const ListBox = styled(Box)`
+  border: 1px solid green;
+  height: 100%;
+  width: 25%;
+`;
+
+const ItemTxt = styled(ListItemText)`
+  font-size: 20rem;
 `;
 
-// const Item = styled(Paper)(({ theme }) => ({
-//   padding: theme.spacing(1),
-//   backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
-//   ...theme.typography.body2,
-//   color: theme.palette.text.secondary,
-//   textAlign: "center",
-// }));
+const ContentBtnDiv = styled.div`
+  height: 100%;
+  width: 75%;
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  flex-direction: column;
+`;
+
+const ContentP = styled.div`
+  width: 100%;
+  height: 100%;
+  font-size: 5rem;
+  background-color: green;
+`;
+
+const UseBtn = styled(Button)`
+  width: 10%;  
+`;

src/pages/IssueTemplatePage.js

@@ -2,35 +2,19 @@ import styled from "styled-components";
 import { COLOR } from "../styles/color";
 import React, { useEffect } from "react";
 import IssueList from "../components/common/IssueList";
-
 function IssueTemplatePage() {
   return (
     <StIssueTemplatePage>
-      {/* <TmpDiv1>
-        <IssueList type={"issue"} />
-      </TmpDiv1> */}
-      <IssueList type={"issue"}/>
-      <Tmpdiv />
+      <IssueList />
+      {/* <Tmpdiv><IssueBody/></Tmpdiv> */}
     </StIssueTemplatePage>
   );
 }
 
 const StIssueTemplatePage = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
   width: 100%;
   height: 100%;
   border: 1px solid red;
 `;
 
-const Tmpdiv = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  border: 1px solid red;
-`;
-
 export default IssueTemplatePage;