Merge pull request #143 from 2022-Winter-Bootcamp-Team-K/feat/#142-Te…

…xtAlign Feat/#142 text align
SVTeamK-ROLLIT · Feb 1, 2023 · e9d5e1f · e9d5e1f
2 parents 9938a2b + 2421d86
commit e9d5e1f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/src/component/DeleteBtn.js b/src/component/DeleteBtn.js
@@ -10,6 +10,7 @@ const DelBtn = styled.button`
   z-index: 10000;
   right: ${props => props.right};
   top: ${props => props.top};
+  color: black;
 `;
 
 export default function DeleteBtn({ onClick, right, top }) {

diff --git a/src/page/RollingPaper/RollingMemo.js b/src/page/RollingPaper/RollingMemo.js
@@ -55,17 +55,17 @@ export default function App({ list, isAdmin, HandleMemoDelete }) {
           position: 'absolute',
         }}
       >
+        {isAdmin ? (
+          <DeleteBtn
+            right="5%"
+            onClick={() => {
+              HandleMemoDelete(memo_id);
+            }}
+          />
+        ) : (
+          <div />
+        )}
         <MemoText font={font} font_color={font_color}>
-          {isAdmin ? (
-            <DeleteBtn
-              right="5%"
-              onClick={() => {
-                HandleMemoDelete(memo_id);
-              }}
-            />
-          ) : (
-            <div />
-          )}
           {content}
         </MemoText>
         <Name color={color}>
@@ -94,10 +94,14 @@ const MemoBox = styled.div`
 
 const MemoText = styled.div`
   width: 170px;
+  height: 170px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   word-break: break-all;
+  font-size: 1.2rem;
   color: ${props => props.font_color};
   font-family: ${props => props.font};
-  font-size: 1.2rem;
 `;
 
 const Name = styled.div`

diff --git a/src/page/RollingPaper/newMemo.js b/src/page/RollingPaper/newMemo.js
@@ -45,10 +45,10 @@ export default function newMemo({ list, setCoor, setMemoData }) {
           position: 'absolute',
         }}
       >
-        <MemoText font={font} color={font_color}>
+        <MemoText font={font} font_color={font_color}>
           {content}
         </MemoText>
-        <Name>
+        <Name color={color}>
           <b>from.</b>
           {nickname}{' '}
         </Name>
@@ -60,7 +60,6 @@ export default function newMemo({ list, setCoor, setMemoData }) {
 const MemoBox = styled.div`
   padding: 0.4rem;
   width: 184px;
-  font-size: 1.2rem;
   height: 174px;
   background: ${props => props.background};
   border-radius: 15px;
@@ -75,12 +74,18 @@ const MemoBox = styled.div`
 
 const MemoText = styled.div`
   width: 170px;
+  height: 170px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   word-break: break-all;
-  color: ${props => props.color};
+  color: ${props => props.font_color};
   font-family: ${props => props.font};
+  font-size: 1.2rem;
 `;
 
 const Name = styled.div`
   text-align: right;
   align-items: end;
+  color: ${props => (props.color === 'white' ? 'black' : 'white')};
 `;