Merge pull request #354 from JayJayleee/hotfix/#329-bug-fix

헤더 고정에 따른 스타일 추가

src/asset/sass/etc/header/titleHeader.scss

@@ -1,6 +1,8 @@
-img.back {
-  margin-right: 30%;
-  margin-top: 0.8%;
+img.back-pointer {
+  height: 2rem;
+  margin-right: 20rem;
+  cursor: pointer;
+
 }
 
 span.page-title {

src/asset/sass/etc/tabBar/tabBar.scss

@@ -32,7 +32,8 @@ nav > div {
 
 .icon {
   font-size: 1.3rem;
-  margin-top: 10%;
+  margin: 10% 0;
+
 }
 
 .text {

src/asset/sass/pages/myPage/feedbackPage.scss

@@ -1,7 +1,7 @@
 .feedback-container {
   width: 80%;
   height: auto;
-  margin: 20% 10%;
+  margin: 30% 10%;
 }
 .feedback-title-wrapper {
   display: flex;

src/asset/sass/pages/myPage/infoEditPage.scss

@@ -32,7 +32,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: 4rem;
+  margin-top: 6rem;
 }
 
 .modify-nick {

src/asset/sass/pages/myPage/myPage.scss

@@ -14,7 +14,7 @@
 
 .title {
   font-size: 3.5rem;
-  margin: 10% 0 8% 12%;
+  margin: 25% 0 8% 12%;
   letter-spacing: -1px;
   font-family: pretendard-bold;
   align-items: center;

src/asset/sass/pages/myPage/noticePage.scss

@@ -8,7 +8,7 @@
 }
 
 .notice-wrapper {
-  margin-top: 3rem;
+  margin-top: 15rem;
   max-height: 70vh;
   overflow-y: scroll;
   scrollbar-width: none;

src/asset/sass/pages/myPage/secessionPage.scss

@@ -6,7 +6,7 @@
 }
 
 .user-nickname-container {
-  margin: 10% 15% 10% 15%;
+  margin: 25% 15% 10% 15%;
 }
 .user-nickname {
   font-size: 3.5rem;
@@ -59,7 +59,7 @@ button.secession-cancel-btn {
   letter-spacing: -1px;
   font-family: Pretendard-Bold;
   cursor: pointer;
-  margin-top: 20px;
+  margin-top: 5px;
   margin-right: 3%;
 }
 
@@ -76,7 +76,7 @@ button.secession-cancel-btn {
   color: white;
   border: none;
   cursor: pointer;
-  margin-top: 20px;
+  margin-top: 5px;
 
   &:hover {
     background-color: #ff8d1d;

src/asset/sass/pages/notificationPage/notificationPage.scss

@@ -9,7 +9,7 @@
   display: flex;
   gap: 5px;
   margin-top: 12%;
-  margin-left: 10%;
+  margin-left: 11%;
 }
 
 .no-read-count {

src/asset/sass/pages/postPage/questionDetailPage.scss

@@ -173,6 +173,7 @@
 
 .job-info {
   margin-left: 5%;
+  margin-top: 3%;
   letter-spacing: -1.5px;
   font-family: pretendard-semibold;
   display: flex;

src/asset/sass/pages/postPage/questionWritePage.scss

@@ -64,7 +64,7 @@
 .question-input {
   color: #000000;
   height: 270px;
-  width: 520px;
+  width: 480px;
   margin: 0% 0% -0.7% 1%;
   font-family: 'Pretendard-Regular';
   font-size: 1.5rem;
@@ -125,7 +125,7 @@ select {
   // width: 100%;
   height: 48px;
   left: 9rem;
-  margin: 4% 0;
+  margin: 6% 0;
   span {
     width: 100%;
     font-weight: 900;

src/components/pages/notificationPage/notificationPage.jsx

@@ -95,7 +95,7 @@ function NotificationPage() {
   return (
     <StyledPage className="main-page-container">
       <StyledHeader>
-        <TitleHeader pageTitle="알림" handleGoBack={handleGoBack} />
+        <TitleHeader pageTitle="알림 페이지" handleGoBack={handleGoBack} />
         {/* <button onClick={() => initializeSSE(queryClient, dispatch)}>
           initializeSSE
         </button> */}

src/components/ui/contactSlider/contactSlider.scss

@@ -1,6 +1,6 @@
 .slider-container {
   width: 100%;
-  margin: 0 auto;
+  margin: 15rem auto;
   height: 100%;
 }
 

src/components/ui/header/titleHeader.tsx

@@ -13,11 +13,10 @@ function TitleHeader({ pageTitle, handleGoBack }: TitleHeaderProps) {
   return (
     <Heading>
       <img
-        className="back"
+        className="back-pointer"
         src={Back}
         onClick={handleGoBack}
         alt="뒤로 가기"
-        style={{ cursor: 'pointer', marginBottom: '5px' }}
       />
       <span className="page-title">{pageTitle}</span>
     </Heading>

src/components/ui/searchInput/searchInput.tsx

@@ -17,7 +17,7 @@ const StyledSearchInput = styled.input`
   border: 2px solid #ffbd7c;
   background-color: #fff;
   border-radius: 3rem;
-  margin: 9% 0% 0% 12.5%;
+  margin:13% 0% 0% 12.5%;
   outline: none;
 
   &:focus {

src/components/ui/tabBar/tabBar.jsx

@@ -44,7 +44,7 @@ const TabBar = () => {
         >
           <div className={activeNav === 2 ? 'nav-item tab-active' : 'nav-item'}>
             <img src={user} alt="user" className="icon" />
-            <div className="text">마이페이지</div>
+            {/* <div className="text">마이페이지</div> */}
           </div>
         </Link>
       </div>
@@ -53,7 +53,7 @@ const TabBar = () => {
         <Link to="/" className="nav-link" onClick={() => setActiveNav(1)}>
           <div className={activeNav === 1 ? 'nav-item tab-active' : 'nav-item'}>
             <img src={home} alt="home" className="icon" />
-            <div className="text">홈</div>
+            {/* <div className="text">홈</div> */}
           </div>
         </Link>
       </div>
@@ -69,7 +69,7 @@ const TabBar = () => {
               <img src={newAlert} alt="new alert" className="icon-overlay" />
             )}
             <img src={alert} alt="alert" className="icon" />
-            <div className="text">알림</div>
+            {/* <div className="text">알림</div> */}
           </div>
         </Link>
       </div>

src/components/ui/tabBar/tabBar.tsx

@@ -52,7 +52,7 @@ const TabBar = () => {
         >
           <div className={activeNav === 2 ? 'nav-item tab-active' : 'nav-item'}>
             <img src={user} alt="user" className="icon" />
-            <div className="text">마이페이지</div>
+            {/* <div className="text">마이페이지</div> */}
           </div>
         </Link>
       </div>
@@ -64,7 +64,7 @@ const TabBar = () => {
         <Link to="/" className="nav-link" onClick={() => setActiveNav(1)}>
           <div className={activeNav === 1 ? 'nav-item tab-active' : 'nav-item'}>
             <img src={home} alt="user" className="icon" />{' '}
-            <div className="text">홈</div>
+            {/* <div className="text">홈</div> */}
           </div>
         </Link>
       </div>
@@ -80,7 +80,7 @@ const TabBar = () => {
               <img src={newAlert} alt="new alert" className="icon-overlay" />
             )}
             <img src={alert} alt="user" className="icon" />
-            <div className="text">알림</div>
+            {/* <div className="text">알림</div> */}
           </div>
         </Link>
       </div>

src/styledComponent.js

@@ -10,16 +10,24 @@ export const StyledPage = styled.div`
   padding: 0.5%;
   overflow: auto;
 `;
-
 export const Heading = styled.div`
   display: flex;
+  position: fixed;
+  width:68rem;
+  height:17rem;
+  top:0;
   justify-content: center;
+  align-items:center;
   font-size: 1rem;
-  margin-top: 7%;
+  margin-left:1rem;
+  padding-right:21rem;
   letter-spacing: -1px;
   font-weight: 600;
+  background-color:white;
+  z-index:55;
 `;
 
+
 export const StyledHeader = styled.div`
   position: relative;
   display: block;

src/styledComponent.ts

@@ -13,14 +13,22 @@ export const StyledPage = styled.div`
 
 export const Heading = styled.div`
   display: flex;
-  position: relative;
+  position: fixed;
+  width:68rem;
+  height:17rem;
+  top:0;
   justify-content: center;
+  align-items:center;
   font-size: 1rem;
-  margin-top: 7%;
+  margin-left:1rem;
+  padding-right:21rem;
   letter-spacing: -1px;
   font-weight: 600;
+  background-color:white;
+  z-index:55;
 `;
 
+
 export const StyledHeader = styled.div`
   position: relative;
   display: block;