#4 [Fix] Style

EFUB-TEAM4 · Aug 6, 2022 · add1c86 · add1c86
1 parent f8773e0
commit add1c86
Show file tree

Hide file tree

Showing 11 changed files with 136 additions and 31 deletions.
diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
@@ -1,5 +1,5 @@
 # 메인 브랜치에 푸시 발생 시 실행됨
-name: S3 Deploy
+name: Publish
 on:
   push:
     branches:
@@ -48,7 +48,7 @@ jobs:
       - name: Build
         run: npm run build
 
-       # AWS S3 버킷 내 빌드 파일 업로드
+        # AWS S3 버킷 내 빌드 파일 업로드
       - name: Deploy
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}

diff --git a/src/components/Common/HeaderIcon/index.js b/src/components/Common/HeaderIcon/index.js
@@ -12,6 +12,7 @@ import {
   StyledLink,
   Line,
   LogoutButton,
+  LoginButton,
 } from './style';
 
 function HeaderIcon() {
@@ -33,22 +34,22 @@ function HeaderIcon() {
   useClickOutside(Ref);
   return (
     <StyledRoot ref={Ref}>
-      <IconButton type="button" onClick={() => setIsClicked(prev => !prev)}>
-        <Image src={User} alt="HeaderIcon" />
-      </IconButton>
+      {localStorage.getItem('token') ? (
+        <IconButton type="button" onClick={() => setIsClicked(prev => !prev)}>
+          <Image src={User} alt="HeaderIcon" />
+        </IconButton>
+      ) : (
+        <NavLink to="/login">
+          <LoginButton>로그인</LoginButton>
+        </NavLink>
+      )}
       {isClicked ? (
         <div>
           <ToolTipArrow />
           <ToolTip>
             <StyledLink to="/MyPage">마이페이지</StyledLink>
             <Line />
-            {localStorage.getItem('token') ? (
-              <LogoutButton onClick={logout}>로그아웃</LogoutButton>
-            ) : (
-              <NavLink to="/login">
-                <LogoutButton>로그인</LogoutButton>
-              </NavLink>
-            )}
+            <LogoutButton onClick={logout}>로그아웃</LogoutButton>
           </ToolTip>
         </div>
       ) : null}

diff --git a/src/components/Common/HeaderIcon/style.js b/src/components/Common/HeaderIcon/style.js
@@ -77,6 +77,17 @@ const LogoutButton = styled.button`
   font-weight: ${({ theme: { font } }) => font.weight.bold};
 `;
 
+const LoginButton = styled.button`
+  width: 9rem;
+  height: 3rem;
+  border-radius: 2rem;
+  background-color: ${({ theme: { color } }) => color.white};
+  color: #3b3829;
+  font-family: 'Cafe24Ssurround';
+  font-size: ${({ theme: { font } }) => font.size.micro};
+  font-weight: ${({ theme: { font } }) => font.weight.bold};
+`;
+
 export {
   StyledRoot,
   ToolTipArrow,
@@ -86,4 +97,5 @@ export {
   StyledLink,
   Line,
   LogoutButton,
+  LoginButton,
 };
diff --git a/src/components/CustomCalendar/style.js b/src/components/CustomCalendar/style.js
@@ -64,6 +64,10 @@ const CalendarContainer = styled.div`
     line-height: 2rem;
     text-align: center;
   }
+  .react-calendar__tile {
+    margin: 0;
+    border: 0;
+  }
   button {
     background-color: ${({ theme: { color } }) => color.white};
     height: 7rem;

diff --git a/src/pages/Login/style.js b/src/pages/Login/style.js
@@ -4,7 +4,7 @@ import { applyMediaQuery } from 'styles/mediaQuery';
 
 const StyledRoot = styled.div`
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;

diff --git a/src/pages/MyPage/index.jsx b/src/pages/MyPage/index.jsx
@@ -40,7 +40,7 @@ function MyPage() {
         <button
           type="button"
           onClick={() => {
-            navigate(-1);
+            navigate('/');
           }}
         >
           <BackButton src={WhiteLeft} alt="BackButton" />

diff --git a/src/pages/MyPage/style.js b/src/pages/MyPage/style.js
@@ -44,6 +44,9 @@ const MobileHeader = styled.div`
   ${applyMediaQuery('desktop')} {
     display: none;
   }
+  ${applyMediaQuery('tablet')} {
+    display: none;
+  }
 `;
 
 const BackButton = styled.img`
@@ -119,6 +122,9 @@ const MobileFooter = styled.div`
   ${applyMediaQuery('desktop')} {
     display: none;
   }
+  ${applyMediaQuery('tablet')} {
+    display: none;
+  }
   justify-content: center;
 `;
 

diff --git a/src/pages/Save/index.js b/src/pages/Save/index.js
@@ -23,7 +23,8 @@ import {
   MobileWeatherBox,
   ContentBox,
   RecordBox,
-  ButtonBox,
+  DeskTopButtonBox,
+  MobileButtonBox,
   TemBox,
   Temperature,
   VerticalLine,
@@ -63,7 +64,7 @@ function Save() {
           className="backbutton"
           type="button"
           onClick={() => {
-            navigate(-1);
+            navigate('/');
           }}
         >
           <BackButton src={WhiteLeft} alt="BackButton" />
@@ -135,7 +136,7 @@ function Save() {
         ) : (
           <ContentBox />
         )}
-        <ButtonBox>
+        <DeskTopButtonBox>
           <PublicButton
             onClick={() => {
               PostCalendars(privateAxios, AvaterState, CurrentWeather, text);
@@ -144,8 +145,18 @@ function Save() {
             text="저장하기"
             isDisabled={text.length > 0 ? 0 : 1}
           />
-        </ButtonBox>
+        </DeskTopButtonBox>
       </MainBox>
+      <MobileButtonBox>
+        <PublicButton
+          onClick={() => {
+            PostCalendars(privateAxios, AvaterState, CurrentWeather, text);
+            navigate('/savecomplete');
+          }}
+          text="저장하기"
+          isDisabled={text.length > 0 ? 0 : 1}
+        />
+      </MobileButtonBox>
     </StyledRoot>
   );
 }

diff --git a/src/pages/Save/style.js b/src/pages/Save/style.js
@@ -25,6 +25,11 @@ const StyledRoot = styled.div`
       height: 90%;
     }
   }
+  ${applyMediaQuery('tablet')} {
+    .mainbox {
+      width: 95vw;
+    }
+  }
 `;
 
 const HeaderIconBox = styled.div`
@@ -88,7 +93,7 @@ const MainBox = styled.div`
   background-color: ${({ theme: { color } }) => color.white};
   border-radius: 1.4rem;
   ${applyMediaQuery('mobile')} {
-    margin-top: 4rem;
+    margin-top: 5rem;
   }
 `;
 
@@ -98,7 +103,7 @@ const DateText = styled.p`
   font-size: ${({ theme: { font } }) => font.size.semiMedium};
   color: ${({ theme: { color } }) => color.greenDarker};
   ${applyMediaQuery('mobile')} {
-    font-family: 'Noto';
+    font-family: 'Noto', [monospace];
     font-size: ${({ theme: { font } }) => font.size.regular};
     font-weight: ${({ theme: { font } }) => font.weight.semiBold};
     padding: 2.6rem 0rem 2rem 2rem;
@@ -176,7 +181,7 @@ const RecordBox = styled.div`
   }
 
   textarea::placeholder {
-    font-family: 'Noto';
+    font-family: 'Noto', [monospace];
     font-weight: ${({ theme: font }) => font.light};
     color: ${({ theme: { color } }) => color.grey};
   }
@@ -257,13 +262,27 @@ const VerticalLine = styled.hr`
   background: ${({ theme: { color } }) => color.greenLighter};
 `;
 
-const ButtonBox = styled.div`
+const DeskTopButtonBox = styled.div`
   width: 100rem;
   display: flex;
   justify-content: center;
   margin-bottom: 4rem;
   ${applyMediaQuery('mobile')} {
-    width: 80vw;
+    display: none;
+  }
+  ${applyMediaQuery('tablet')} {
+    width: 95vw;
+  }
+`;
+const MobileButtonBox = styled.div`
+  width: 80vw;
+  display: flex;
+  justify-content: center;
+  ${applyMediaQuery('desktop')} {
+    display: none;
+  }
+  ${applyMediaQuery('tablet')} {
+    display: none;
   }
 `;
 
@@ -290,7 +309,8 @@ export {
   MobileWeatherBox,
   ContentBox,
   RecordBox,
-  ButtonBox,
+  DeskTopButtonBox,
+  MobileButtonBox,
   TemBox,
   Temperature,
   VerticalLine,

diff --git a/src/pages/SaveRecord/index.js b/src/pages/SaveRecord/index.js
@@ -31,7 +31,8 @@ import {
   MobileWeatherBox,
   ContentBox,
   RecordBox,
-  ButtonBox,
+  DeskTopButtonBox,
+  MobileButtonBox,
   TemBox,
   Temperature,
   VerticalLine,
@@ -168,7 +169,7 @@ function SaveRecord() {
             <HorizonLineBottom width="100%" />
           </RecordBox>
         </ContentBox>
-        <ButtonBox>
+        <DeskTopButtonBox>
           {isEditMode ? (
             <PublicButton
               text="저장하기"
@@ -179,8 +180,20 @@ function SaveRecord() {
               }}
             />
           ) : null}
-        </ButtonBox>
+        </DeskTopButtonBox>
       </MainBox>
+      <MobileButtonBox>
+        {isEditMode ? (
+          <PublicButton
+            text="저장하기"
+            isDisabled={0}
+            onClick={() => {
+              EditCalendars(privateAxios, data.id, input);
+              setIsEditMode(0);
+            }}
+          />
+        ) : null}
+      </MobileButtonBox>
       {isSaveVisible ? (
         <EditModal
           ctext1="아직 기록이 저장되지 않았어요."