[FIX] 서비스 배경색 조절을 위한 페이지간 높이 조절 (#266)

* feat: add bottomButton in common folder * fix: update component's height * chore: add safe code in taglist * fix: add linkCount in queryKey
linkarchive · Aug 21, 2023 · 56fcadc · 56fcadc
1 parent 4051144
commit 56fcadc
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 96 deletions.
diff --git a/src/components/BottomNav/BottomLine.tsx b/src/components/BottomNav/BottomLine.tsx
@@ -3,21 +3,24 @@ import styled from 'styled-components';
 
 const BottomLine = () => {
   return (
-    <Container>
-      <svg
-        width='376'
-        height='92'
-        viewBox='0 0 376 92'
-        fill='none'
-        xmlns='http://www.w3.org/2000/svg'
-      >
-        <path
-          d='M299.057 15.1218L299.057 15.1222C301.002 18.8309 302.207 21.803 303.273 24.433C303.763 25.6398 304.223 26.7745 304.712 27.8754C306.265 31.3721 308.07 34.4156 311.927 38.0441C319.64 45.3003 328.963 47.4999 335.89 47.4999C339.388 47.4999 345.273 46.3846 351.036 43.4363C356.807 40.4844 362.496 35.6738 365.523 28.2589C369.324 18.9408 372.676 13.6534 375 11.0337V91.4999H1V1.18994H272.56C275.541 1.18994 280.791 2.01331 285.995 4.1827C291.2 6.35253 296.292 9.8401 299.057 15.1218Z'
-          fill='white'
-          stroke='#F5F5F5'
-        />
-      </svg>
-    </Container>
+    <>
+      <Container>
+        <svg
+          width='376'
+          height='92'
+          viewBox='0 0 376 92'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path
+            d='M299.057 15.1218L299.057 15.1222C301.002 18.8309 302.207 21.803 303.273 24.433C303.763 25.6398 304.223 26.7745 304.712 27.8754C306.265 31.3721 308.07 34.4156 311.927 38.0441C319.64 45.3003 328.963 47.4999 335.89 47.4999C339.388 47.4999 345.273 46.3846 351.036 43.4363C356.807 40.4844 362.496 35.6738 365.523 28.2589C369.324 18.9408 372.676 13.6534 375 11.0337V91.4999H1V1.18994H272.56C275.541 1.18994 280.791 2.01331 285.995 4.1827C291.2 6.35253 296.292 9.8401 299.057 15.1218Z'
+            fill='white'
+            stroke='#F5F5F5'
+          />
+        </svg>
+      </Container>
+      <Block />
+    </>
   );
 };
 
@@ -27,4 +30,8 @@ const Container = styled.div`
   transform: translateX(-1px);
 `;
 
+const Block = styled.div`
+  height: 91px;
+`;
+
 export default BottomLine;
diff --git a/src/components/Common/Bottom/BottomButton.tsx b/src/components/Common/Bottom/BottomButton.tsx
@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+interface BottomButtonProps {
+  text: string;
+  isAbled: boolean;
+}
+
+const BottomButton = ({ text, isAbled }: BottomButtonProps) => {
+  return (
+    <Container>
+      <Wrapper disabled={!isAbled}>{text}</Wrapper>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: absolute;
+  bottom: -52px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+`;
+
+const Wrapper = styled.button`
+  width: 343px;
+  height: 56px;
+
+  background: ${({ theme }) => theme.primary.main};
+  border: none;
+  border-radius: 10px;
+  gap: 8px;
+
+  color: ${({ theme }) => theme.common.white};
+  cursor: pointer;
+
+  &:disabled {
+    background: ${({ theme }) => theme.warning.dark};
+    cursor: not-allowed;
+  }
+`;
+
+export default BottomButton;
diff --git a/src/components/Common/InfinityScroll.tsx b/src/components/Common/InfinityScroll.tsx
@@ -3,7 +3,6 @@ import useInfinityScroll, { IuseInfinityScroll } from '@/hooks/useInfinityScroll
 
 const Wrapper = styled.div`
   position: relative;
-  height: 100%;
 `;
 
 interface InfinityScrollProps extends IuseInfinityScroll {

diff --git a/src/components/Common/Tag/HashTagList.tsx b/src/components/Common/Tag/HashTagList.tsx
@@ -35,7 +35,7 @@ const HashTagList = ({
           handleClick={() => dispatch(onClickHashTag({ tagId: 0, tagName: 'All' }))}
         />
       )}
-      {tagList.map((tag) => {
+      {tagList?.map((tag) => {
         let isTagHighLight = defaultHighlight || false;
 
         if (highlightList) {

diff --git a/src/components/Home/Suggestion/Suggestion.tsx b/src/components/Home/Suggestion/Suggestion.tsx
@@ -47,26 +47,30 @@ const Suggestion = () => {
 
 const Container = styled.div`
   display: flex;
-  height: 100%;
   flex-direction: column;
   justify-content: center;
+  height: calc(100vh - 91px - 60px - 91px);
 `;
+
 const Wrapper = styled.div`
   position: relative;
   display: flex;
   height: 400px;
   flex-direction: column;
   align-items: center;
 `;
+
 const Content = styled.div`
   position: absolute;
   bottom: 0;
   right: 0;
-  transform: translate(-155px, -70px);
+  transform: translate(-155px, -30px);
 `;
+
 const IconBox = styled.div`
   margin-bottom: 20px;
 `;
+
 const TextBox = styled.p`
   margin-bottom: 20px;
 

diff --git a/src/layouts/LinkItemLayout.tsx b/src/layouts/LinkItemLayout.tsx
@@ -24,6 +24,7 @@ const LinkItemListLayout = ({ children }: LinkItemListLayoutProps) => {
   const { myLink, userLink } = useSelector((state: RootState) => state.nav);
   const { myId } = useSelector((state: RootState) => state.user);
   const { current } = useSelector((state: RootState) => state.router);
+  const { linkCount } = useSelector((state: RootState) => state.count);
   const [isButtonClicked, setIsButtonClicked] = useState(false);
 
   const userId = Number(router.query.userId) || myId;
@@ -32,7 +33,7 @@ const LinkItemListLayout = ({ children }: LinkItemListLayoutProps) => {
   const USER_LINK = HOME_PAGE ? myLink : userLink;
 
   const { data: tagList } = useQuery({
-    queryKey: ['tagList', myLink, userLink, current, ARCHIVE_PAGE],
+    queryKey: ['tagList', myLink, userLink, current, ARCHIVE_PAGE, linkCount],
     queryFn: () => fetchFn(userId),
   });
 
@@ -61,9 +62,7 @@ const LinkItemListLayout = ({ children }: LinkItemListLayoutProps) => {
   };
 
   useEffect(() => {
-    if (tagList) {
-      setHashTagList(tagList);
-    }
+    setHashTagList(tagList);
 
     return () => setHashTagList([]);
   }, [tagList, myLink, userLink]);
@@ -94,7 +93,6 @@ const LinkItemListLayout = ({ children }: LinkItemListLayoutProps) => {
 
 const Container = styled.div`
   position: relative;
-  height: 100%;
 `;
 const Wrapper = styled.div`
   position: relative;

diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
@@ -27,9 +27,7 @@ export default MainLayout;
 
 const Main = styled.main`
   position: relative;
-
-  /* 100 viewPoint - headerHeight - footerHeight */
-  height: calc(100vh - 60px - 91px);
+  min-height: calc(100vh - 91px - 60px);
 `;
 
 const WaterMark = () => {

diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
@@ -18,6 +18,7 @@ import { Tag } from '@/components/Common/Tag/BaseTag';
 import HashTag from '@/components/Common/Tag/HashTag';
 import AddTag from '@/components/Common/Tag/AddTag';
 import useToastBar from '@/hooks/useToastBar';
+import BottomButton from '@/components/Common/Bottom/BottomButton';
 
 const defaultErrorMessages = {
   url: '',
@@ -251,12 +252,7 @@ const Create = ({ userId, accessToken }: withAuthProps) => {
           isHighLight
         />
       </InputBlock>
-
-      <ButtonBlock>
-        <Button type='submit' disabled={!isValid}>
-          추가하기
-        </Button>
-      </ButtonBlock>
+      <BottomButton text='추가하기' isAbled={isValid} />
     </Form>
   );
 };
@@ -288,34 +284,6 @@ const Bottom = styled.div`
   }
 `;
 
-const ButtonBlock = styled.div`
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  bottom: 70px;
-
-  width: '40px';
-  padding-bottom: 29px;
-`;
-
-const Button = styled.button`
-  width: 343px;
-  height: 53px;
-  border-radius: 4px;
-
-  background: ${({ theme }) => theme.primary.main};
-
-  color: ${({ theme }) => theme.common.white};
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 21px;
-  text-align: center;
-
-  &:disabled {
-    opacity: 0.3;
-  }
-`;
-
 const ERROR_MESSAGE = {
   URL: {
     INVALID: 'URL을 다시 확인해주세요',

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -75,7 +75,6 @@ Home.getLayout = function getLayout(page: ReactElement) {
 
 export const MainLayoutWrapper = styled.div`
   position: relative;
-  height: 100%;
 `;
 
 export default Home;
diff --git a/src/pages/settings/profile/index.tsx b/src/pages/settings/profile/index.tsx
@@ -15,6 +15,7 @@ import { cancelSource } from '@/utils/cancelToken';
 import { PhotoSvgIcon } from '@/components/svg/Svg';
 import MessageToaster from '../../../components/Settings/MessageToaster';
 import useToastBar from '@/hooks/useToastBar';
+import BottomButton from '@/components/Common/Bottom/BottomButton';
 
 export interface ErrorMessage {
   message: string;
@@ -244,16 +245,13 @@ const Profile = ({ accessToken }: { accessToken: string }) => {
         />
         {isIntroduceChanged && <MessageToaster isValid={isIntroduceValid} message={message2} />}
       </ProfileInputWrapper>
-      <BottomButton type='submit' disabled={!isFormValid}>
-        수정하기
-      </BottomButton>
+      <BottomButton text='수정하기' isAbled={isFormValid} />
     </FormWrapper>
   );
 };
 
 const FormWrapper = styled.form`
   padding: 0 16px;
-  height: 100%;
 `;
 
 export const StyledH3 = styled.h3`
@@ -367,24 +365,24 @@ const SvgIcon = styled.span`
   }
 `;
 
-export const BottomButton = styled.button`
-  position: absolute;
-  bottom: 22px;
-  width: 343px;
-  height: 56px;
-
-  background: ${({ theme }) => theme.primary.main};
-  border: none;
-  border-radius: 10px;
-  gap: 8px;
-
-  color: ${({ theme }) => theme.common.white};
-  cursor: pointer;
-
-  &:disabled {
-    background: ${({ theme }) => theme.warning.dark};
-    cursor: not-allowed;
-  }
-`;
+// export const BottomButton = styled.button`
+//   position: absolute;
+//   bottom: 22px;
+//   width: 343px;
+//   height: 56px;
+
+//   background: ${({ theme }) => theme.primary.main};
+//   border: none;
+//   border-radius: 10px;
+//   gap: 8px;
+
+//   color: ${({ theme }) => theme.common.white};
+//   cursor: pointer;
+
+//   &:disabled {
+//     background: ${({ theme }) => theme.warning.dark};
+//     cursor: not-allowed;
+//   }
+// `;
 
 export default Profile;
diff --git a/src/pages/settings/profile/nickname/index.tsx b/src/pages/settings/profile/nickname/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { BottomButton, InputWrapper, ProfileInputWrapper, StyledH3, StyledSpan } from '..';
+import { InputWrapper, ProfileInputWrapper, StyledH3, StyledSpan } from '..';
 import MessageToaster from '../../../../components/Settings/MessageToaster';
 import styled from 'styled-components';
 import { useMutation } from '@tanstack/react-query';
@@ -10,6 +10,7 @@ import { withAuth, withAuthProps } from '@/lib/withAuth';
 import { setAccessToken } from '@/api/customAPI';
 import { useAppDispatch } from '@/store';
 import { routerSlice } from '@/store/slices/routerSlice';
+import BottomButton from '@/components/Common/Bottom/BottomButton';
 
 export interface MessageWrapperProps {
   isEmpty: boolean;
@@ -115,9 +116,7 @@ const SetNickname = ({ accessToken, userId }: withAuthProps) => {
           />
         </ProfileInputWrapper>
 
-        <BottomButton type='submit' disabled={!isValid}>
-          수정하기
-        </BottomButton>
+        <BottomButton text='수정하기' isAbled={isValid} />
       </FormWrapper>
     </Container>
   );
@@ -127,7 +126,6 @@ const Container = styled.div`
   display: flex;
   justify-content: center;
   padding: 0 16px;
-  height: 100vh;
 `;
 
 const FormWrapper = styled.form`

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -7,14 +7,13 @@
 }
 
 html {
-  height: 100%;
   background-color: #f5f5f5;
 }
 
 body {
   margin: 0 auto;
   width: 375px;
-  min-height: 100%;
+  min-height: 100vh;
 
   font-family: 'Pretendard';
   font-weight: 400;
@@ -48,7 +47,3 @@ a {
 [class]::after {
   box-sizing: border-box;
 }
-
-#__next {
-  height: 100vh;
-}