From 7cb9143e1c1e0685765cf19a8d8ed2e5e08ffebd Mon Sep 17 00:00:00 2001
From: Minminminwoo <alsdnsms07@naver.com>
Date: Wed, 10 Apr 2024 15:24:32 +0900
Subject: [PATCH 1/3] Update Listpage.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

listpage 디자인 변
---
 src/pages/study/Listpage.js | 163 ++++++++++++++++++++++--------------
 1 file changed, 100 insertions(+), 63 deletions(-)

diff --git a/src/pages/study/Listpage.js b/src/pages/study/Listpage.js
index e891a91..4025dd7 100644
--- a/src/pages/study/Listpage.js
+++ b/src/pages/study/Listpage.js
@@ -1,76 +1,113 @@
-import * as React from "react";
-import {Card,CardContent,CardMedia} from "@mui/material";
-import CssBaseline from "@mui/material/CssBaseline";
-import {Grid,Typography,Container} from "@mui/material";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import { Link } from "react-router-dom";
+import * as React from 'react';
+import { Card, CardContent, CardMedia, TextField, Button } from '@mui/material';
+import CssBaseline from '@mui/material/CssBaseline';
+import { Grid, Typography, Container, Box } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import EditIcon from '@mui/icons-material/Edit';
+import { Link } from 'react-router-dom';
+
+const cards = [1, 2, 3, 4]; // Adjust the number of cards as per your 2x2 layout
 
-const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 
-// TODO remove, this demo shouldn't need to reset the theme.
 const defaultTheme = createTheme();
 
+
 function Listpage() {
+
+  const backgroundImage = 'https://miro.medium.com/v2/resize:fit:1200/1*6Jp3vJWe7VFlFHZ9WhSJng.jpeg';
+  //const backgroundImage = 'https://i0.wp.com/www.oxbridgeacademy.edu.za/blog/wp-content/uploads/2015/07/CN63QSUO8C.jpg?resize=1280%2C640&ssl=1';
+
   return (
     <ThemeProvider theme={defaultTheme}>
       <CssBaseline>
-        <Container sx={{ mt: 3 }} maxWidth="md">
-          <main>
-            {/* Hero unit */}
-            <Container sx={{ py: 4 }} maxWidth="md">
-              {/* End hero unit */}
-              <Grid container spacing={4}>
-                {cards.map((card) => (
-                  <Grid item key={card} xs={12} sm={6} md={4}>
-                    <Card
-                      sx={{
-                        height: "100%",
-                        display: "flex",
-                        flexDirection: "column",
-                      }}
-                    >
-                      <Link
-                        to={`/study/detail/${card}`}
-                        style={{ textDecoration: "none" }}
-                      >
-                        {/* 포스터 클릭 시 DetailPage로 이동하는 링크 */}
-                        <CardMedia
-                          component="div"
-                          sx={{
-                            // 16:9
-                            pt: "56.25%",
-                          }}
-                          image="https://source.unsplash.com/random?wallpapers"
-                        />
-                        <CardContent
-                          sx={{
-                            flexGrow: 1,
-                            display: "flex",
-                            justifyContent: "space-between",
-                          }}
-                        >
-                          <div>
-                            <Typography
-                              gutterBottom
-                              variant="h5"
-                              component="h2"
-                            >
-                              제목 {card} {/* 각 카드에 다른 제목을 표시 */}
-                            </Typography>
-                            <Typography>User ID {card}</Typography>
-                          </div>
-                        </CardContent>
-                      </Link>
-                    </Card>
-                  </Grid>
-                ))}
-              </Grid>
-            </Container>
-          </main>
-        </Container>
+          
+          <Box sx={{ position: 'relative', mt: 3, mb: 3 }}>
+            {/* Background image with transparency */}
+            <Box
+              sx={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundImage: `url(${backgroundImage})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                opacity: 0.4, //이미지 투명도
+                zIndex: -1,
+              }}
+            />
+            {/* Search bar container */}
+              <Container maxWidth="md">
+                <Box sx={{ display: 'flex', justifyContent: 'center', paddingTop: '20vh', paddingBottom: '5vh' }}>
+                  <TextField id="search" label="검색어를 입력해주세요" variant="filled" color='success' 
+                    sx={{ 
+                      mr: 2, 
+                      width: 600, 
+                      '& .MuiFilledInput-root': {
+                        backgroundColor: 'white',
+                        '&:hover': {
+                          backgroundColor: 'white',
+                        },
+                        '&.Mui-focused': {
+                          backgroundColor: 'white',
+                        },
+                      },
+                      
+                      }} />
+                  <Button variant="contained" color="success">
+                    Go!
+                  </Button>
+                </Box>
+              </Container>
+          </Box>
+
+        
+          {/* Posts cards container */}
+          <Container maxWidth="md" sx={{ pt: 10 }}>
+            <Grid container spacing={8}>
+              {cards.map((card) => (
+                <Grid item key={card} xs={12} sm={6} sx={{ px: 4 }}>
+                  <Card
+                    sx={{
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column',
+                    }}
+                  >
+                    <Link to={`/study/detail/${card}`} style={{ textDecoration: 'none' }}>
+                      <CardMedia
+                        component="img"
+                        height="140"
+                        image="https://source.unsplash.com/random?wallpapers"
+                        alt={`Content ${card}`}
+                      />
+                      <CardContent sx={{ flexGrow: 1 }}>
+                        <Typography gutterBottom variant="h5" component="h2" sx={{ color: 'black' }}>
+                          제목 {card}
+                        </Typography>
+                        <Typography sx={{ color: 'black' }}>User ID {card}</Typography>
+                      </CardContent>
+                    </Link>
+                  </Card>
+                </Grid>
+              ))}
+
+            </Grid>
+
+            
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 4, mr: 4  }}>
+              <Button variant="contained" endIcon={<EditIcon />} sx={{ backgroundColor: '#000', color: '#fff', '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.8)' } }}>
+                작성하기
+              </Button>
+            </Box>
+
+          </Container>
+
+          
       </CssBaseline>
     </ThemeProvider>
   );
 }
 
-export default Listpage;
+export default Listpage;
\ No newline at end of file

From abad99a2156db65d59ba30c89a4f5be377430d6d Mon Sep 17 00:00:00 2001
From: Minminminwoo <alsdnsms07@naver.com>
Date: Thu, 11 Apr 2024 00:08:07 +0900
Subject: [PATCH 2/3] =?UTF-8?q?listpage=20=EC=B9=B4=EB=93=9C=EC=97=90=20?=
 =?UTF-8?q?=ED=8F=AC=EC=8A=A4=ED=8A=B8=20=EB=B3=B4=EC=9D=B4=EA=B2=8C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

detail 폴더에 post 1, 2, 3, 4 카드에 연결-> listpage 란에 보이게 수정
---
 src/pages/study/Listpage.js | 40 ++++++++++++++++++++++----
 src/pages/study/detail/1.js | 56 +++++++++++++++++++++++++++++++++++++
 src/pages/study/detail/2.js | 56 +++++++++++++++++++++++++++++++++++++
 src/pages/study/detail/3.js | 56 +++++++++++++++++++++++++++++++++++++
 src/pages/study/detail/4.js | 56 +++++++++++++++++++++++++++++++++++++
 5 files changed, 258 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/study/detail/1.js
 create mode 100644 src/pages/study/detail/2.js
 create mode 100644 src/pages/study/detail/3.js
 create mode 100644 src/pages/study/detail/4.js

diff --git a/src/pages/study/Listpage.js b/src/pages/study/Listpage.js
index 4025dd7..1f7a7c4 100644
--- a/src/pages/study/Listpage.js
+++ b/src/pages/study/Listpage.js
@@ -6,7 +6,35 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import EditIcon from '@mui/icons-material/Edit';
 import { Link } from 'react-router-dom';
 
-const cards = [1, 2, 3, 4]; // Adjust the number of cards as per your 2x2 layout
+
+// 포스팅 글 -> detail 폴더에 작성
+
+const cardData = [
+  {
+    id: 1,
+    imageUrl: "https://images.mypetlife.co.kr/content/uploads/2023/11/17133418/61fbb115-3845-4427-b72d-76c5e650cd3c.jpeg",
+    title: "Card Title 1",
+    content: "Card content 1",
+  },
+  {
+    id: 2,
+    imageUrl: "https://source.unsplash.com/random?sig=2",
+    title: "Card Title 2",
+    content: "Card content 2",
+  },
+  {
+    id: 3,
+    imageUrl: "https://source.unsplash.com/random?sig=3",
+    title: "Card Title 3",
+    content: "Card content 3",
+  },
+  {
+    id: 4,
+    imageUrl: "https://source.unsplash.com/random?sig=4",
+    title: "Card Title 4",
+    content: "Card content 4",
+  },
+];
 
 
 const defaultTheme = createTheme();
@@ -66,7 +94,7 @@ function Listpage() {
           {/* Posts cards container */}
           <Container maxWidth="md" sx={{ pt: 10 }}>
             <Grid container spacing={8}>
-              {cards.map((card) => (
+              {cardData.map((card) => (
                 <Grid item key={card} xs={12} sm={6} sx={{ px: 4 }}>
                   <Card
                     sx={{
@@ -79,14 +107,14 @@ function Listpage() {
                       <CardMedia
                         component="img"
                         height="140"
-                        image="https://source.unsplash.com/random?wallpapers"
-                        alt={`Content ${card}`}
+                        image={card.imageUrl}
+                        alt={card.title}
                       />
                       <CardContent sx={{ flexGrow: 1 }}>
                         <Typography gutterBottom variant="h5" component="h2" sx={{ color: 'black' }}>
-                          제목 {card}
+                          {card.title}
                         </Typography>
-                        <Typography sx={{ color: 'black' }}>User ID {card}</Typography>
+                        <Typography sx={{ color: 'black' }}>{card.content}</Typography>
                       </CardContent>
                     </Link>
                   </Card>
diff --git a/src/pages/study/detail/1.js b/src/pages/study/detail/1.js
new file mode 100644
index 0000000..67eb743
--- /dev/null
+++ b/src/pages/study/detail/1.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import styled from "styled-components";
+
+const DetailPageEx = ({title,date,content,tag}) => {
+    const location = useLocation();
+    const { postId } = useParams();
+
+    return(
+    <>
+       <h1><Title>{title}</Title></h1>
+       <p><Date>{date}</Date></p>
+       <p><PostId>Posted By &nbsp; Greek{postId}</PostId></p>
+      
+       <br />
+       {/* Content : 글, 그림 등등등*/}
+       <p><Content>{content}</Content></p>
+       <img src={process.env.PUBLIC_URL + "/example.png"} width="200px" height="200px"/>
+       <p><Tag>{tag}</Tag></p>
+      
+      </> 
+    )
+
+    
+}
+
+export default DetailPageEx;
+
+const Title = styled.h1`
+  font-size: 2rem;
+  text:bold;
+  text-align:center;
+`;
+
+const Date = styled.p`
+  font-size: 1rem;
+  text-align:right;
+`;
+
+const PostId = styled.p`
+  font-size: 1.2rem;
+  text:bold
+`;
+
+const Tag = styled.p`
+  font-size: 1rem;
+  text:bold;
+  color: blue;
+  margin-top:12rem;
+`;
+
+const Content = styled.p`
+  font-size: 1rem;
+  text:bold
+`;
diff --git a/src/pages/study/detail/2.js b/src/pages/study/detail/2.js
new file mode 100644
index 0000000..67eb743
--- /dev/null
+++ b/src/pages/study/detail/2.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import styled from "styled-components";
+
+const DetailPageEx = ({title,date,content,tag}) => {
+    const location = useLocation();
+    const { postId } = useParams();
+
+    return(
+    <>
+       <h1><Title>{title}</Title></h1>
+       <p><Date>{date}</Date></p>
+       <p><PostId>Posted By &nbsp; Greek{postId}</PostId></p>
+      
+       <br />
+       {/* Content : 글, 그림 등등등*/}
+       <p><Content>{content}</Content></p>
+       <img src={process.env.PUBLIC_URL + "/example.png"} width="200px" height="200px"/>
+       <p><Tag>{tag}</Tag></p>
+      
+      </> 
+    )
+
+    
+}
+
+export default DetailPageEx;
+
+const Title = styled.h1`
+  font-size: 2rem;
+  text:bold;
+  text-align:center;
+`;
+
+const Date = styled.p`
+  font-size: 1rem;
+  text-align:right;
+`;
+
+const PostId = styled.p`
+  font-size: 1.2rem;
+  text:bold
+`;
+
+const Tag = styled.p`
+  font-size: 1rem;
+  text:bold;
+  color: blue;
+  margin-top:12rem;
+`;
+
+const Content = styled.p`
+  font-size: 1rem;
+  text:bold
+`;
diff --git a/src/pages/study/detail/3.js b/src/pages/study/detail/3.js
new file mode 100644
index 0000000..67eb743
--- /dev/null
+++ b/src/pages/study/detail/3.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import styled from "styled-components";
+
+const DetailPageEx = ({title,date,content,tag}) => {
+    const location = useLocation();
+    const { postId } = useParams();
+
+    return(
+    <>
+       <h1><Title>{title}</Title></h1>
+       <p><Date>{date}</Date></p>
+       <p><PostId>Posted By &nbsp; Greek{postId}</PostId></p>
+      
+       <br />
+       {/* Content : 글, 그림 등등등*/}
+       <p><Content>{content}</Content></p>
+       <img src={process.env.PUBLIC_URL + "/example.png"} width="200px" height="200px"/>
+       <p><Tag>{tag}</Tag></p>
+      
+      </> 
+    )
+
+    
+}
+
+export default DetailPageEx;
+
+const Title = styled.h1`
+  font-size: 2rem;
+  text:bold;
+  text-align:center;
+`;
+
+const Date = styled.p`
+  font-size: 1rem;
+  text-align:right;
+`;
+
+const PostId = styled.p`
+  font-size: 1.2rem;
+  text:bold
+`;
+
+const Tag = styled.p`
+  font-size: 1rem;
+  text:bold;
+  color: blue;
+  margin-top:12rem;
+`;
+
+const Content = styled.p`
+  font-size: 1rem;
+  text:bold
+`;
diff --git a/src/pages/study/detail/4.js b/src/pages/study/detail/4.js
new file mode 100644
index 0000000..67eb743
--- /dev/null
+++ b/src/pages/study/detail/4.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import styled from "styled-components";
+
+const DetailPageEx = ({title,date,content,tag}) => {
+    const location = useLocation();
+    const { postId } = useParams();
+
+    return(
+    <>
+       <h1><Title>{title}</Title></h1>
+       <p><Date>{date}</Date></p>
+       <p><PostId>Posted By &nbsp; Greek{postId}</PostId></p>
+      
+       <br />
+       {/* Content : 글, 그림 등등등*/}
+       <p><Content>{content}</Content></p>
+       <img src={process.env.PUBLIC_URL + "/example.png"} width="200px" height="200px"/>
+       <p><Tag>{tag}</Tag></p>
+      
+      </> 
+    )
+
+    
+}
+
+export default DetailPageEx;
+
+const Title = styled.h1`
+  font-size: 2rem;
+  text:bold;
+  text-align:center;
+`;
+
+const Date = styled.p`
+  font-size: 1rem;
+  text-align:right;
+`;
+
+const PostId = styled.p`
+  font-size: 1.2rem;
+  text:bold
+`;
+
+const Tag = styled.p`
+  font-size: 1rem;
+  text:bold;
+  color: blue;
+  margin-top:12rem;
+`;
+
+const Content = styled.p`
+  font-size: 1rem;
+  text:bold
+`;

From 3ceb58ab1945c8da5a0318f2b6bc6508c8d6664d Mon Sep 17 00:00:00 2001
From: Minminminwoo <alsdnsms07@naver.com>
Date: Thu, 11 Apr 2024 11:54:08 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=EC=9E=91=EC=84=B1=ED=95=98=EA=B8=B0=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20->=20=EC=9E=91=EC=84=B1=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<Link to = "/Editor" style={{ textDecoration: 'none' }}>
---
 src/pages/study/Listpage.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/study/Listpage.js b/src/pages/study/Listpage.js
index 1f7a7c4..96e5828 100644
--- a/src/pages/study/Listpage.js
+++ b/src/pages/study/Listpage.js
@@ -125,9 +125,11 @@ function Listpage() {
 
             
             <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 4, mr: 4  }}>
-              <Button variant="contained" endIcon={<EditIcon />} sx={{ backgroundColor: '#000', color: '#fff', '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.8)' } }}>
-                작성하기
-              </Button>
+              <Link to = "/Editor" style={{ textDecoration: 'none' }}>
+                <Button variant="contained" endIcon={<EditIcon />} sx={{ backgroundColor: '#000', color: '#fff', '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.8)' } }}>
+                  작성하기
+                </Button>
+              </Link>
             </Box>
 
           </Container>