Merge pull request #127 from boostcampwm2023/fix/diary-list-modal-ui

[Fix] 반응형 UI 수정
boostcampwm2023 · Nov 23, 2023 · b0be7d5 · b0be7d5
2 parents 64b8790 + d8dd11c
commit b0be7d5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/FE/src/App.js b/FE/src/App.js
@@ -19,6 +19,7 @@ const GlobalStyle = createGlobalStyle`
 
     &::-webkit-scrollbar {
       width: 0.5rem;
+      height: 0.5rem;
     }
 
     &::-webkit-scrollbar-track {

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -135,8 +135,8 @@ function DiaryReadModal() {
             src={starIcon}
             alt='star'
             style={{
-              width: "100%",
-              height: "100%",
+              width: "5rem",
+              height: "5rem",
             }}
           />
         </DiaryModalIcon>
@@ -204,11 +204,9 @@ const DiaryModalTag = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 5rem;
-  height: 2rem;
+  padding: 0.5rem 1rem;
   border-radius: 1rem;
   background-color: rgba(255, 255, 255, 0.3);
-  padding: 0.5rem;
   box-sizing: border-box;
   color: #ffffff;
   outline: none;
@@ -219,23 +217,29 @@ const DiaryModalTagList = styled.div`
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-wrap: wrap;
+  overflow-y: auto;
 `;
 
 const DiaryModalEmotionBar = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+
   height: 5rem;
+  flex-wrap: wrap;
 `;
 
 const DiaryModalIcon = styled.div`
-  width: 5rem;
-  height: 5rem;
+  width: 20%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const EmotionIndicatorWrapper = styled.div`
+  width: 70%;
   display: flex;
   align-items: center;
   gap: 1.5rem;

diff --git a/FE/src/components/SideBar/SideBar.js b/FE/src/components/SideBar/SideBar.js
@@ -23,6 +23,7 @@ function SideBar() {
               }));
               setDiaryState((prev) => ({
                 ...prev,
+                isRead: false,
                 isList: false,
               }));
             }}