edit css

front/src/components/MoreButton.js

@@ -11,6 +11,12 @@ function MoreButton({nav}){// 'modifyInfo''announcement''contactUs''signOut'
         contactUs:<svg width="13" height="24" viewBox="0 0 13 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4811 6.07196L11.4811 17.2812C11.4811 20.3321 9.37344 22.8 6.26282 22.8C3.2119 22.8 1.2002 20.3918 1.2002 17.2812L1.20019 4.68084C1.20019 2.75238 2.75252 1.20005 4.68099 1.20005C6.60945 1.20005 8.16178 2.75238 8.16178 4.68084L8.16178 17.5025C8.16178 18.4636 7.38258 19.2428 6.42139 19.2428C5.46019 19.2428 4.68099 18.4636 4.68099 17.5025L4.68099 6.07196" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>,
         modifyInfo:<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.3999 19.5124C1.3999 15.7369 4.55419 12.6762 10.9999 12.6762C17.4456 12.6762 20.5999 15.7369 20.5999 19.5124C20.5999 20.1131 20.1617 20.6 19.6211 20.6H2.37873C1.83814 20.6 1.3999 20.1131 1.3999 19.5124Z" stroke="black" stroke-width="2"/><path d="M14.5999 5.00002C14.5999 6.98825 12.9881 8.60002 10.9999 8.60002C9.01168 8.60002 7.3999 6.98825 7.3999 5.00002C7.3999 3.0118 9.01168 1.40002 10.9999 1.40002C12.9881 1.40002 14.5999 3.0118 14.5999 5.00002Z" stroke="black" stroke-width="2"/></svg>,
     }
+    const svgName={
+        modifyInfo:"내 정보 수정",
+        announcement:"공지사항",
+        contactUs:"개발 팀",
+        signOut:"로그아웃",
+    }
     const handleClickFunction={
         modifyInfo:()=>{},
         announcement:()=>{navigate('/announcement')},
@@ -23,7 +29,8 @@ function MoreButton({nav}){// 'modifyInfo''announcement''contactUs''signOut'
     }
     return (<>
     <div className={styles.MoreButton} onClick={handleClickFunction[nav]}>
-        {svg[nav]}
+        <span>{svgName[nav]}</span>
+        {/* {svg[nav]} */}
     </div>
     </>);
 }

front/src/components/MorePage.js

@@ -40,6 +40,8 @@ function MorePage() {
                 <div className={styles.libraryBox}>
                     <h2>내 서재</h2>
                     <div className={styles.postsContainer}>
+                        {console.log(posts.length)}
+                        {posts.length===0  &&  <span>작성된 후기가 없습니다. 후기를 작성해보세요</span>}
                         {posts.map(post => (
                             <div key={post.postID} 
                                 className={styles.postBox} 

front/src/components/NavButton.js

@@ -163,9 +163,9 @@ function NavButton(props) {
         style={customStyles}
         contentLabel="Filter Modal"
       >
-        <button onClick={()=>{closeModal(1)}}>close</button>
-        <h2 ref={(_subtitle) => (subtitle = _subtitle)}>추천받고 싶지 않는 항목에 체크해주세요</h2>
-        <form name="filter" onSubmit={handleSubmit}>
+        <h2 ref={(_subtitle) => (subtitle = _subtitle)}>추천받고 싶지 않는 항목을 선택해주세요</h2>
+        <form name="filter" onSubmit={handleSubmit} style={{display:'flex',flexDirection:'column'}}>
+          <div style={{display:'flex',justifyContent:'space-around'}}>
         {/* 총류 / 철학,심리학,윤리학 / 종교 / 사회과학 / 자연과학 / 기술과학 / 예술 / 언어 / 역사 / 문학 */}
           <label><input name="literature" type="checkbox" checked={checkboxStates.literature} onChange={handleCheckboxChange} />문학</label>
           <label><input name="nonFiction" type="checkbox" checked={checkboxStates.nonFiction} onChange={handleCheckboxChange} />비문학</label>
@@ -174,7 +174,11 @@ function NavButton(props) {
           <label><input name="art" type="checkbox" checked={checkboxStates.art} onChange={handleCheckboxChange} />예술</label>
           <label><input name="language" type="checkbox" checked={checkboxStates.language} onChange={handleCheckboxChange} />언어</label>
           <label><input name="philosophy" type="checkbox" checked={checkboxStates.philosophy} onChange={handleCheckboxChange} />철학,심리,윤리</label> */}
+         </div>
+          <div style={{display:'flex',justifyContent:'space-around',marginTop:'10px'}}>
           <input type="submit" value="확인"/>
+          <button className={styles.xButton}onClick={()=>{closeModal(1)}}>닫기</button>
+          </div>
         </form>
       </Modal>
     </div>
@@ -185,9 +189,12 @@ function NavButton(props) {
         style={customStyles}
         contentLabel="SignIn Modal"
       >
-        <button onClick={()=>{closeModal(2)}}>close</button>
+
         <h3>로그인을 하여 기능을 사용해보세요</h3>
+        <div style={{display:'flex',justifyContent:'space-around'}}>
         <button onClick={toSignIn}>로그인하기</button>
+        <button onClick={()=>{closeModal(2)}}>닫기</button>
+        </div>
       </Modal>
     </div>
     </>

front/src/css/MoreButton.module.css

@@ -1,3 +1,6 @@
 .MoreButton:hover{
     cursor:pointer;
+}
+.MoreButton span{
+    text-decoration: underline;
 }

front/src/css/MorePage.module.css

@@ -16,8 +16,7 @@
     justify-content: space-evenly;
 }
 .buttonBox div{
-    width:40px;
-    aspect-ratio: 1/1;
+    margin-bottom: 10px;
 }
 .libraryBox{
     width:91vw;
@@ -33,6 +32,11 @@
     align-items: center;
     border:5px solid darkcyan;
 }
+.postsContainer span{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
 .postBox{
     border:0.5px solid green;
     margin: 1vh ;

front/src/css/NavButton.module.css

@@ -20,12 +20,18 @@
 #buttonName{
     text-align: center;
     font-size:1em;
+    text-decoration: underline;
 }
 #buttonName[name="logo"]{
     font-size: 2em;
     font-weight:600;
+    text-decoration: none;
 }
 #img{
     width:32px;
     height:20px;
 }
+#modalButtonBox{
+    display: flex;
+    justify-content: space-around;
+}

front/src/css/PostFragment.module.css

@@ -14,6 +14,7 @@
     /* box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); */
 }
 
+
 @media (max-width: 600px) {
     .fragmentBody{
         width:100vw;

front/src/css/PostViewPage.module.css

@@ -19,6 +19,8 @@ html{
     margin:10vh 0;
 }
 .bookInfoBox{
+    background-color: #fff;
+    border-radius: 5px;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -29,6 +31,11 @@ html{
     margin: 30px auto;
     overflow: hidden; /* 내부 요소가 벗어나지 않도록 처리 */
 }
+@media (max-width: 600px) {
+    .bookInfoBox{
+        width:100vw;
+    }
+}
 
 ul{
     list-style-type: none;

front/src/css/ScrollView.module.css

@@ -22,3 +22,8 @@ html{
     transform-origin: 50% 50%;
     opacity: 0.4;
 }
+@media (max-width: 600px) {
+    .listEnd{
+        width:3.6vw;
+    }
+}

front/src/index.css

@@ -12,14 +12,25 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -ms-overflow-style: none;/* 마이크로소프트 브라우저 스크롤바 없애기 */
+  /* -ms-overflow-style: none;마이크로소프트 브라우저 스크롤바 없애기 */
   background-color: #dedede;
   }
 
- ::-webkit-scrollbar {/* WebKit 기반 브라우저(예: 크롬, 사파리) 스크롤바 없애기 */
+ /* ::-webkit-scrollbar {WebKit 기반 브라우저(예: 크롬, 사파리) 스크롤바 없애기
    display: none;
- }
+ } */
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+button ,input[type=submit]{
+  border: 0;
+  background-color: transparent;
+  font-family: 'GyeonggiBatang',-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  text-decoration: underline;
+}
+button:hover , input[type=submit]:hover{
+  cursor:pointer;
+}