Merge pull request #225 from Here-You/feature/#224

[Fix] : 이슈 해결

src/components/banner/Banner.style.js

@@ -8,7 +8,7 @@ const BannerContainer = styled.div`
   justify-content: center;
   padding: 5%;
   width: 100%;
-  height: 160px;
+  height: 130px;
   background: rgba(27, 156, 133, 0.16);
 `;
 

src/components/bottomSheet/BottomScrollPage.style.js

@@ -12,11 +12,11 @@ const Button = styled.button`
   background-color: ${theme.COLOR.MAIN.GREEN};
   border: none;
   width: 200px;
-  height: 50px;
+  height: 70px;
   color: ${theme.COLOR.MAIN.WHITE};
   border-radius: 20px;
   margin: auto;
-  margin-top: 10px;
+  margin-top: 15px;
   cursor: pointer;
   font-size: ${FONT_SIZE.XL};
 

src/components/calendar/TravelCalendar.jsx

@@ -178,6 +178,26 @@ const TravelCalendar = ({
           <S.HomeContentContainer>
             <S.CalendarContainer>
               <Calendar
+                formatShortWeekday={(locale, date) => {
+                  switch (date.getDay()) {
+                    case 0:
+                      return 'S';
+                    case 1:
+                      return 'M';
+                    case 2:
+                      return 'T';
+                    case 3:
+                      return 'W';
+                    case 4:
+                      return 'T';
+                    case 5:
+                      return 'F';
+                    case 6:
+                      return 'S';
+                    default:
+                      return '';
+                  }
+                }}
                 locale="en"
                 tileClassName={tileClassName}
                 onChange={changeDate}

src/components/calendar/TravelCalendar.style.js

@@ -19,12 +19,11 @@ const Wrapper = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin: 20px 0;
 `;
 
 const ButtonContainer = styled.div`
   ${theme.ALIGN.ROW_CENTER};
-  margin-top: 40px;
+  margin-top: 10px;
   border: 1px solid ${theme.COLOR.MAIN.GREEN};
   border-radius: 40px;
 
@@ -36,13 +35,13 @@ const ButtonContainer = styled.div`
 const Button = styled.button`
   width: 200px;
   background-color: #ffffff;
-  padding: 20px;
+  padding: 10px;
   border: ${props =>
     props.$clicked ? `2px solid ${theme.COLOR.MAIN.GREEN}` : 'none'};
   color: ${props =>
     props.$clicked ? `${theme.COLOR.MAIN.GREEN}` : `${theme.COLOR.MAIN.GRAY}`};
   font-size: ${FONT_SIZE.SM};
-  font-weight: ${props => (props.$clicked ? 'bold' : 'none')};
+
   border-radius: 40px;
   cursor: pointer;
 
@@ -59,7 +58,8 @@ const HeaderWrapper = styled.div`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  height: 200px;
+  height: 60px;
+  margin-top: 20px;
   gap: 120px;
   margin-bottom: 20px;
 
@@ -73,7 +73,7 @@ const HeaderWrapper = styled.div`
   }
 
   @media (max-width: 600px) {
-    gap: 80px;
+    gap: 120px;
     h1 {
       font-size: 50px;
     }
@@ -89,16 +89,20 @@ const FontWrapper = styled.div`
   -webkit-transform: rotate(90deg); // Chrome Safari Opera
 
   color: #1c1c1c;
-  font-size: 25px;
+  font-size: 15px;
   font-weight: bold;
 `;
 const CircleWrapper = styled.div`
   display: flex;
+  font-family: 'Pretenard-bold';
+  h1 {
+    font-size: 30px;
+  }
 `;
 
 const Circle = styled.div`
-  width: 120px;
-  height: 120px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   background-color: black;
 `;
@@ -110,6 +114,7 @@ const HomeContentContainer = styled.div`
 
 const SchedulesContainer = styled.div`
   max-height: 400px;
+
   padding: 0 30px;
 
   &::-webkit-scrollbar {
@@ -126,9 +131,8 @@ const SchedulesContainer = styled.div`
 const IntroductionContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 20px;
-
-  width: 90%;
+  gap: 10px;
+  width: 100%;
   padding: 20px;
   background-color: ${theme.COLOR.MAIN.LIGHT_GREEN};
   border-radius: 10px;
@@ -178,6 +182,7 @@ const Image = styled.img`
 
 const CalendarContainer = styled.div`
   position: relative;
+  color: black;
 `;
 
 const PrevBtn = styled.button`

src/components/comment/mate/commentInput/MateCommentInput.style.js

@@ -36,7 +36,7 @@ const SubmitButton = styled.button`
   border-radius: 10px;
   background-color: ${theme.COLOR.MAIN.MEDIUM_GREEN};
   color: ${theme.COLOR.MAIN.WHITE};
-  padding: 5px;
+  padding: 5px 11px;
   outline: none;
   cursor: pointer;
 `;

src/components/mate/Search.jsx

@@ -5,7 +5,7 @@ const Search = ({ setSearchTerm }) => {
     <S.SearchContainer>
       <S.InputContainer>
         <S.InputText
-          placeholder="닉네임으로 친구를 추가해보세요!"
+          placeholder="닉네임으로 메이트를 추가해보세요."
           onChange={e => setSearchTerm(e.target.value)}
         />
       </S.InputContainer>

src/components/mate/TeamContainer.style.js

@@ -89,11 +89,11 @@ const TeamTitle = styled.span`
   margin-right: auto;
   color: #000;
   text-align: center;
-  font-size: 22px;
+  font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
-
+  font-family: 'Pretendard-semibold';
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

src/components/navbar/Navbar.jsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 import * as S from './Navbar.style';
 import Bell from '/images/Bell.svg';
 import User from '/images/User.svg';
@@ -6,9 +8,9 @@ import { useUnReadNotification } from '@/hooks/notification/useGetNotification';
 import useAuth from '@/store/useAuth';
 
 const Navbar = () => {
-  const { isAuth } = useAuth();
   const { data: unReadCount, isPending, isError } = useUnReadNotification();
   const unReadCounter = unReadCount?.data?.data?.unreadCount;
+
   return (
     <S.NavWrapper>
       <S.LinkTo to="/mypage">
@@ -20,7 +22,8 @@ const Navbar = () => {
       <S.LinkTo to="/notification">
         <S.ImageContainer>
           <S.ImageIcon src={Bell} />
-          {unReadCounter === 0 ? null : <p>{unReadCounter}</p>}
+
+          {!unReadCounter ? null : <p>{unReadCounter}</p>}
         </S.ImageContainer>
       </S.LinkTo>
     </S.NavWrapper>

src/index.css

@@ -98,21 +98,23 @@
 /* REACT_CALENDAR */
 
 .react-calendar {
-  width: 300px;
+  width: 290px;
+
   max-width: 100%;
   border: none;
-  line-height: 1.125em;
 
   @media (min-width: 640px) {
-    width: 500px;
+    width: 400px;
   }
 }
 
 .react-calendar__month-view__weekdays {
   display: flex;
   justify-content: center;
   align-items: center;
-  justify-content: center;
+
+  margin-left: 5%;
+  width: 100%;
 }
 
 .react-calendar__navigation__label > span {
@@ -145,9 +147,9 @@
     border-radius: 50%;
 
     @media (min-width: 640px) {
-      font-size: 22px;
-      width: 60px;
-      height: 60px;
+      font-size: 20px;
+      width: 50px;
+      height: 50px;
     }
   }
 }
@@ -156,17 +158,18 @@
   position: absolute;
   bottom: 0px;
   content: 'TODAY';
-  font-family: 900;
   background-color: gold;
   border-radius: 10px;
   padding: 2px 8px;
+  font-size: 10px;
 }
 
 /* 일자 */
 .react-calendar__tile {
   text-align: center;
   position: relative;
-  height: 80px;
+  height: 50px;
+  color: black;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -183,13 +186,13 @@
 
   abbr {
     text-decoration: none;
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 50%;
+    border-radius: 100%;
     border: 2px solid black !important;
 
     @media (max-width: 600px) {

src/pages/home/Home.style.js

@@ -41,7 +41,6 @@ const Button = styled.button`
   color: ${props =>
     props.clicked ? `${theme.COLOR.MAIN.GREEN}` : `${theme.COLOR.MAIN.GRAY}`};
   font-size: ${FONT_SIZE.SM};
-  font-weight: ${props => (props.clicked ? 'bold' : 'none')};
   border-radius: 40px;
   cursor: pointer;
 
@@ -58,6 +57,7 @@ const CalendarContainer = styled.div`
 
 const JourneyButtonContainer = styled.div`
   position: relative;
+
   display: flex;
   flex-direction: row;
 

src/pages/map/Map.style.js

@@ -24,29 +24,28 @@ const AddButton = styled.button`
   position: sticky;
   bottom: 20px;
   margin-right: -80px;
-
   cursor: pointer;
   z-index: 1;
   align-self: flex-end;
 `;
 
 const ButtonContainer = styled.div`
   ${theme.ALIGN.ROW_CENTER};
-  margin-top: 40px;
+  margin-top: 10px;
   border: 1px solid ${theme.COLOR.MAIN.GREEN};
   border-radius: 40px;
 `;
 
 const Button = styled.button`
   width: 200px;
   background-color: #ffffff;
-  padding: 20px;
+  padding: 10px;
   border: ${props =>
     props.$clicked ? `2px solid ${theme.COLOR.MAIN.GREEN}` : 'none'};
   color: ${props =>
     props.$clicked ? `${theme.COLOR.MAIN.GREEN}` : `${theme.COLOR.MAIN.GRAY}`};
   font-size: ${FONT_SIZE.SM};
-  font-weight: ${props => (props.$clicked ? 'bold' : 'none')};
+
   border-radius: 40px;
   cursor: pointer;
 
@@ -57,7 +56,7 @@ const Button = styled.button`
   }
 
   @media ${theme.WINDOW_SIZE.MOBILE} {
-    width: 150px;
+    width: 140px;
   }
 `;
 
@@ -68,7 +67,10 @@ const CalendarContainer = styled.div`
 const JourneyWrapper = styled.div``;
 
 const MapContainer = styled.div`
-  width: 90%;
+  width: 80%;
+  display: flex;
+  flex-direction: Column;
+  height: 65vh;
   margin-top: 40px;
 `;
 

src/pages/mate/main/MateMain.jsx

@@ -51,8 +51,7 @@ const MateMainPage = () => {
   return (
     <S.Maincontainer>
       <S.SpanWrapper>
-        <span>여행의 이유를 함께 찾아줄 친구를</span>
-        <span>ID로 추가해보세요!</span>
+        <span>여행의 이유를 함께 찾아볼 친구를 추가해보세요!</span>
       </S.SpanWrapper>
 
       <S.MenuContainer>

src/pages/mate/ruleCheck/MateRuleCheck.style.js

@@ -23,7 +23,7 @@ const StyledTitle = styled.span`
   margin-bottom: 35px;
 
   @media ${theme.WINDOW_SIZE.MOBILE} {
-    font-size: 12px;
+    font-size: 18px;
   }
 `;