FIX : 레이아웃 에러 해결

junvhui · Feb 25, 2024 · 0e9256d · 0e9256d
1 parent 2e73620
commit 0e9256d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/backend/article_add.js b/backend/article_add.js
@@ -21,10 +21,10 @@ async function insertDocument() {
     await connectToMongoDB();
 
     const newDocument = {
-      title: '‘주급이라도 아끼자’ 맨유, 앙토니 마샬 1년 연장 옵션 행사 안 한다',
-      content: 'https://www.stnsports.co.kr/news/articleView.html?idxno=210532',
-      url: 'https://assets.goal.com/v3/assets/bltcc7a7ffd2fbf71f5/blt75efef14859572cf/65a952bcda2a53040a5cf06a/Martial_Man_United.jpg?auto=webp&format=pjpg&width=2048&quality=60',
-      team: '맨유',
+      title: '알폰소 데이비스, 레알 마드리드 간다 "이적료 최소 580억에 합의"',
+      content: 'https://v.daum.net/v/20240225182106255',
+      url: 'https://img3.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202402/25/spotvnews/20240225182108798dscr.jpg',
+      team: '레알 마드리드',
     };
 
     const insertResult = await collection.insertOne(newDocument);

diff --git a/src/MainPage/App.tsx b/src/MainPage/App.tsx
@@ -126,12 +126,13 @@ const Name = styled.div`
 `;
 
 const BottomBackground = styled.div`
-  width: 67%;
+  width: 100%;
   height: 100%;
-  margin-left: 16%;
+  justify-content: center;
   margin-top: -2rem;
   position: static;
   display: flex;
+  margin-left: -3rem;
 
   @media (max-width: 900px) {
     margin-top: 4rem;
@@ -146,7 +147,10 @@ const FlexContainer = styled.div`
 `;
 
 const ListWrapper = styled.div`
-  flex-grow: 7;
+  width: 100%;
+
+  margin-right: 6%;
+  margin-top: 3.7rem;
 `;
 
 const RankWrapper = styled.div`

diff --git a/src/MainPage/List.tsx b/src/MainPage/List.tsx
@@ -17,8 +17,8 @@ interface PostProps {
 
 const PostWrap = styled.div`
   position: relative;
-  width: 40rem;
-  margin: 4rem auto;
+  width: 100%;
+
   border-radius: 1rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
@@ -210,7 +210,6 @@ const Post = () => {
     }
   }, [inView]);
 
-  // 이전 코드와 동일하게 axios를 이용하여 데이터를 가져옴
   useEffect(() => {
     const fetchData = async () => {
       try {