🐛 Fix: QA 버그 수정 진행 (1) & iOS 스타일링

- style: iOS safe height 적용 & 하단 바 가려지는 현상 해결 - fix: 매거진 페이지 url preview - fix: 매거진 추가한 페이지 저장 후 EdiePage 초기화 - fix: 콘텐츠 여러번 클릭 시 중복돼서 페이지 추가되는 현상
Kusitms-26th-Ohttention · Nov 25, 2022 · 46a67f6 · 46a67f6
1 parent 24c5c8b
commit 46a67f6
Show file tree

Hide file tree

Showing 18 changed files with 94 additions and 66 deletions.
diff --git a/src/application/utils/helper.ts b/src/application/utils/helper.ts
@@ -7,3 +7,11 @@ export const getSrcByType = (content: Scrap | Category) => {
       return content.file_url;
   }
 };
+
+export const getValidURL = (url: string) => {
+  try {
+    return new URL(url);
+  } catch (err) {
+    return '';
+  }
+};
diff --git a/src/application/utils/mock.ts b/src/application/utils/mock.ts
@@ -6,11 +6,11 @@ export const MAGAZINE_THUMBNAILS = [0, 0, 0, 0].map(() => ({
 }));
 
 export const PROFILE = {
-  src: '/picture/mock.png',
+  src: '',
   name: '익명',
   date: '2022.11.26',
   description: '진정한 나의 모습을 담은 나만의 바이블',
-  hashtags: ['#포폴용도', '#자료모음', '#패션피플'],
+  hashtags: ['#뉴비', '#자료모음', '#패션피플'],
 };
 
 export const MEMO = `사람에게는 저마다의 바다가  있고 사람에게는 저마다의 파도가 있기 마련이지. 우리는 한낱 사람이라서 일렁였고 고작 사람이기 때문에 글썽일 수밖에는 없었던 거야. 우리는 서로 모든 이들에게 타인이기 때문에 내리는 비에 옷깃을 젖어야 했으며 그마저도 사람이기 때문에 그 빗속을 외로이 걸을 수 밖에 없었던 거야.

diff --git a/src/components/category/List/CategoryContentListMultiSelect.tsx b/src/components/category/List/CategoryContentListMultiSelect.tsx
@@ -17,15 +17,23 @@ interface Props extends Partial<Category> {
 const CategoryContentListMultiSelect = ({ name, id = 0, onSubmit }: Props) => {
   const { categories: scraps, fetchNextPage } = useGetContentByCategory({ id });
 
-  const pickSet = useRef(new Set<EditPage>());
+  const pickSet = useRef(new Set<number>());
   const ref = useIntersectionObserver({ callback: fetchNextPage });
   const { replace } = useToast();
 
   return (
     <form
       onSubmit={(e) => {
         e.preventDefault();
-        pickSet.current.size && onSubmit?.(Array.from(pickSet.current));
+        pickSet.current.size &&
+          onSubmit?.(
+            Array.from(pickSet.current).map((id) => ({
+              scrap_id: scraps[id].id,
+              text: '',
+              src: getSrcByType(scraps[id]),
+              placeholder: scraps[id].content,
+            })),
+          );
       }}
     >
       <span
@@ -62,30 +70,26 @@ const CategoryContentListMultiSelect = ({ name, id = 0, onSubmit }: Props) => {
             padding-bottom: 10px;
           `}
         >
-          {scraps.map((scrap) => (
+          {scraps.map((scrap, idx) => (
             <Photo
               custom={css`
                 aspect-ratio: 1/1;
               `}
-              onClick={() =>
-                pickSet.current.add({
-                  scrap_id: scrap.id,
-                  src: getSrcByType(scrap),
-                  text: '',
-                  placeholder: scrap.content,
-                })
-              }
+              onClick={() => {
+                pickSet.current.has(idx) ? pickSet.current.delete(idx) : pickSet.current.add(idx);
+              }}
               key={scrap.id}
               blur={<PhotoSelect enabled />}
               src={getSrcByType(scrap)}
               text={scrap.content}
             />
           ))}
+          중
           <span ref={ref} />
         </div>
       </div>
 
-      <ActiveButton active>다음 </ActiveButton>
+      <ActiveButton active>다음</ActiveButton>
     </form>
   );
 };

diff --git a/src/components/common/Navigation/BottomNavigationBase.tsx b/src/components/common/Navigation/BottomNavigationBase.tsx
@@ -19,9 +19,6 @@ const BottomNavigationBase = ({ children }: BottomNavigationBaseProps) => {
         max-width: 440px;
         padding-top: 12px;
         box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.03);
-        @supports (padding-bottom: env(safe-area-inset-bottom)) {
-          padding-bottom: env(safe-area-inset-bottom);
-        }
       `}
     >
       {children(({ ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) => (

diff --git a/src/components/common/Photo/RoundPhoto.tsx b/src/components/common/Photo/RoundPhoto.tsx
@@ -12,12 +12,13 @@ const RoundPhoto = ({ src, width, height, custom }: RoundPhotoProps) => {
   return (
     <span
       css={[
-        css`
+        (theme) => css`
           position: relative;
           overflow: hidden;
           border-radius: 50%;
           width: ${width};
           height: ${height};
+          background: ${theme.color.gray10};
         `,
         custom,
       ]}

diff --git a/src/components/magazine/MagazineList/MainMagazine.tsx b/src/components/magazine/MagazineList/MainMagazine.tsx
@@ -16,7 +16,7 @@ const MainMagazine = ({ magazines }: MainMagazineProps) => {
         overflow-x: scroll;
         width: 100%;
         gap: 10px;
-        margin-bottom: 48px;
+        margin-bottom: 5vh;
       `}
     >
       {magazines.map((magazine) => (

diff --git a/src/components/magazine/NoMagazine/index.tsx b/src/components/magazine/NoMagazine/index.tsx
@@ -6,22 +6,25 @@ const NoMagazine = () => {
     <div
       css={(theme) => css`
         display: flex;
+        padding-top: 2vh;
         flex-direction: column;
         flex: 1;
         justify-content: center;
         align-items: center;
-        height: 155px;
         gap: 20px;
         ${theme.font.M_POINT_14};
         color: ${theme.color.gray06};
       `}
     >
       <span
         css={css`
+          position: relative;
           transform: translateX(-4px);
+          height: 10vh;
+          width: 155px;
         `}
       >
-        <Image src={'/picture/warn.svg'} width={63} height={85} />
+        <Image src={'/picture/warn.svg'} layout="fill" objectFit={'contain'} />
       </span>
       <span>저장된 매거진이 없습니다</span>
     </div>

diff --git a/src/components/scrap/UploadButton/index.tsx b/src/components/scrap/UploadButton/index.tsx
@@ -14,6 +14,7 @@ const UploadButton = () => {
         padding: 12px 18px;
         justify-content: space-between;
         align-items: center;
+        color: ${theme.color.black02};
         ${theme.font.R_BODY_13};
         line-height: 1;
       `}

diff --git a/src/containers/AppLayout/index.tsx b/src/containers/AppLayout/index.tsx
@@ -35,6 +35,11 @@ const CSSWrapper = css`
   min-height: 100vh;
   display: flex;
   justify-content: center;
+
+  @supports (-webkit-touch-callout: none) {
+    //noinspection CssInvalidPropertyValue
+    min-height: -webkit-fill-available;
+  }
 `;
 
 const CSSAppLayout = (isBlack: boolean) => (theme: Theme) =>
@@ -62,10 +67,10 @@ const CSSSideBanner = css`
     left: 5%;
   }
   @media screen and (max-width: 1150px) {
-    left: 0%;
+    left: 0;
   }
   @media screen and (max-width: 1000px) {
-    width: 0%;
+    width: 0;
   }
 
   position: fixed;

diff --git a/src/containers/ErrorBoundary/ErrorPage.tsx b/src/containers/ErrorBoundary/ErrorPage.tsx
@@ -15,8 +15,7 @@ const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 24px 16px;
-  height: 100vh;
+  height: 100%;
 `;
 
 const StyledTitle = styled.b`

diff --git a/src/containers/magazine/PageViewContainer.tsx b/src/containers/magazine/PageViewContainer.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
 
+import { getValidURL } from '@/application/utils/helper';
 import { PAGES } from '@/application/utils/mock';
 import Photo from '@/components/common/Photo';
 
@@ -23,7 +24,11 @@ const PageViewContainer = ({ pages = PAGES }: Props) => {
         <ol css={CSSCarouselContainer}>
           {pages.map((page, idx) => (
             <li key={page.page_id} id={`${idx}`} css={CSSCarouselItem}>
-              <Photo src={page.file_url || page.contents} height={'45vh'} />
+              <Photo
+                src={page.file_url || getValidURL(page.contents).toString()}
+                text={page.contents}
+                height={'45vh'}
+              />
               <p css={CSSPageContent}>{page.text}</p>
               <div css={CSSSnapper} />
               <div css={CSSCarouselHandle}>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -31,18 +31,21 @@ const App = ({ Component, pageProps }: AppProps<PageProps>) => {
     <>
       <Head>
         <title>피크랩 | pickRAP</title>
-        <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=0,viewport-fit=cover"
+        />
       </Head>
       <QueryClientProvider hydrateState={pageProps.hydrateState}>
         <RecoilRoot initializeState={recoilInitializer}>
           <ToastProvider>
             <ThemeProvider theme={theme}>
               <GlobalStyle />
-              <ErrorBoundary fallback={ErrorPage}>
-                <AppLayout blackBackground={['/']}>
+              <AppLayout blackBackground={['/']}>
+                <ErrorBoundary fallback={ErrorPage}>
                   <Component {...pageProps} />
-                </AppLayout>
-              </ErrorBoundary>
+                </ErrorBoundary>
+              </AppLayout>
               <ToastPortal />
             </ThemeProvider>
           </ToastProvider>

diff --git a/src/pages/auth/signin.tsx b/src/pages/auth/signin.tsx
@@ -35,27 +35,31 @@ const SignIn: NextPage = () => {
     }
   };
   return (
-    <>
+    <div
+      css={css`
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        justify-content: center;
+      `}
+    >
       <div
         css={css`
           width: 100%;
           display: flex;
           flex-direction: column;
           position: relative;
-          height: 60%;
+          //padding-top: 6vh;
         `}
       >
-        <div
+        <span
           css={css`
-            height: 119px;
+            text-align: center;
+            margin-bottom: 40px;
           `}
-        />
-        <Image src={'/logo/black_pickrap.svg'} width={164} height={39} priority />
-        <div
-          css={css`
-            height: 50px;
-          `}
-        />
+        >
+          <Image src={'/logo/black_pickrap.svg'} width={164} height={39} priority />
+        </span>
 
         <AuthForm onSubmit={handleSubmit} errFormMsg={errMsg}>
           <AuthForm.Input name={'email'} placeholder={'아이디 또는 이메일'} value={email} handleChange={handleEmail} />
@@ -66,11 +70,7 @@ const SignIn: NextPage = () => {
             value={password}
             handleChange={handlePassword}
           />
-          <span
-            css={css`
-              height: 8px;
-            `}
-          />
+
           <CheckBox checked>자동 로그인</CheckBox>
           <span
             css={css`
@@ -112,16 +112,16 @@ const SignIn: NextPage = () => {
         css={css`
           width: 100%;
           display: flex;
-          height: 33%;
           flex-direction: column-reverse;
           position: relative;
           gap: 12px;
+          margin-top: 8vh;
         `}
       >
         <NaverButton />
         <KakaoButton />
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/src/pages/auth/signup.tsx b/src/pages/auth/signup.tsx
@@ -46,21 +46,23 @@ const SignUp: NextPage = () => {
     }
   };
   return (
-    <>
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+      `}
+    >
       <div
         css={css`
-          height: 55%;
           width: 100%;
           display: flex;
           flex-direction: column;
           position: relative;
+          padding-bottom: 10vh;
         `}
       >
-        <div
-          css={css`
-            margin-top: 63px;
-          `}
-        ></div>
         <div>
           <AuthForm errInput={errInput} onSubmit={handleSubmit} errFormMsg={errForm}>
             <AuthForm.Input
@@ -108,7 +110,6 @@ const SignUp: NextPage = () => {
       <div
         css={css`
           width: 100%;
-          height: 30%;
           display: flex;
           flex-direction: column-reverse;
           position: relative;
@@ -118,7 +119,7 @@ const SignUp: NextPage = () => {
         <NaverButton />
         <KakaoButton />
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/src/pages/magazine/[id].tsx b/src/pages/magazine/[id].tsx
@@ -22,8 +22,7 @@ const ShowMagazine: NextPage = () => {
       setMagazineInfo({
         ...magazine,
         start_number: (magazine?.page_list.length || 0) + 2,
-        page_list:
-          magazine?.page_list.map((m) => ({ src: m.file_url || m.contents, text: m.text, scrap_id: m.page_id })) || [],
+        page_list: magazine?.page_list.map((m) => ({ src: m.file_url, text: m.text, scrap_id: m.page_id })) || [],
       });
       router.push(`/magazine/edit/${id}`);
     },

diff --git a/src/pages/magazine/upload/index.tsx b/src/pages/magazine/upload/index.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import type { NextPage } from 'next';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 
 import { useSaveMagazine } from '@/application/hooks/api/magazine';
 import useToast from '@/application/hooks/common/useToast';
@@ -36,9 +36,10 @@ const UploadMagazine: NextPage = () => {
   const resetEditPage = useEditPageReset();
 
   const handleBack = () => {
-    router.replace('/magazine');
-    resetMagazineInfo();
-    resetEditPage();
+    router.replace('/magazine').then(() => {
+      resetMagazineInfo();
+      resetEditPage();
+    });
   };
 
   const handleComplete = () => {