refactor: 404 code 추가 및 react-virtual 제거

react-virtual를 사용했을 때 response개수가 홀수이면 문제가 있어서 writers와 동일하게 적용함 404 code가 추가되어 mock api에 적용함 - 화면에서 에러처리 추가 필요 close #56
nolmungshemung · Feb 15, 2022 · 4075ef1 · 4075ef1
1 parent fcdd64c
commit 4075ef1
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 155 deletions.
diff --git a/.yarn/cache/@reach-observe-rect-npm-1.2.0-ae7ce1a341-7dd903eeaa.zip b/.yarn/cache/@reach-observe-rect-npm-1.2.0-ae7ce1a341-7dd903eeaa.zip
diff --git a/.yarn/cache/react-virtual-npm-2.10.4-bc003e5ddf-1bebc741b0.zip b/.yarn/cache/react-virtual-npm-2.10.4-bc003e5ddf-1bebc741b0.zip
diff --git a/mocks/handlers.ts b/mocks/handlers.ts
@@ -13,7 +13,18 @@ export const handlers = [
   rest.get(`${API_URL}/services/main_contents`, (req, res, ctx) => {
     const keyword = req.url.searchParams.get('keyword');
 
-    if (keyword !== 'invalid') {
+    if (keyword === 'notfound') {
+      return res(
+        ctx.status(404),
+        ctx.json({
+          msg: '해당 작품을 찾을 수 없습니다.',
+          data: {},
+        }),
+      );
+    } else if (keyword === 'invalid') {
+      const errorResponse = ErrorResponseFactory.build();
+      return res(ctx.status(422), ctx.json(errorResponse));
+    } else {
       const start = Number(req.url.searchParams.get('start'));
       const count = Number(req.url.searchParams.get('count'));
       const contents = ContentsFactory.buildList(count);
@@ -31,15 +42,23 @@ export const handlers = [
           },
         }),
       );
-    } else {
-      const errorResponse = ErrorResponseFactory.build();
-      return res(ctx.status(422), ctx.json(errorResponse));
     }
   }),
   rest.get(`${API_URL}/services/main_writers`, (req, res, ctx) => {
     const keyword = req.url.searchParams.get('keyword');
 
-    if (keyword !== 'invalid') {
+    if (keyword === 'notfound') {
+      return res(
+        ctx.status(404),
+        ctx.json({
+          msg: '해당 작품을 찾을 수 없습니다.',
+          data: {},
+        }),
+      );
+    } else if (keyword === 'invalid') {
+      const errorResponse = ErrorResponseFactory.build();
+      return res(ctx.status(422), ctx.json(errorResponse));
+    } else {
       const start = Number(req.url.searchParams.get('start'));
       const count = Number(req.url.searchParams.get('count'));
       const writers = WriterFactory.buildList(count);
@@ -57,9 +76,6 @@ export const handlers = [
           },
         }),
       );
-    } else {
-      const errorResponse = ErrorResponseFactory.build();
-      return res(ctx.status(422), ctx.json(errorResponse));
     }
   }),
   rest.get(`${API_URL}/services/reading_contents`, (req, res, ctx) => {

diff --git a/package.json b/package.json
@@ -30,7 +30,6 @@
     "react-loading-skeleton": "^3.0.2",
     "react-query": "^3.29.1",
     "react-quill": "^1.3.5",
-    "react-virtual": "^2.10.4",
     "rosie": "^2.1.0",
     "stitches-reset": "^1.0.0"
   },

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, Fragment } from 'react';
+import { useState, useRef } from 'react';
 import { NextPage } from 'next';
 import { dehydrate, QueryClient } from 'react-query';
 import Router from 'next/router';
@@ -13,11 +13,7 @@ import { useInfinityContents } from '~/data/services/services.hooks';
 import { SuccessResponse } from '~/shared/types';
 import Card from '~/components/Main/Card';
 import { SkeletonCard } from '~/components/Skeleton';
-import {
-  DEFAULT_SEARCH_RANGE,
-  GRID_COLUMN_COUNT,
-} from '~/shared/constants/pagination';
-import { useVirtual } from 'react-virtual';
+import { DEFAULT_SEARCH_RANGE } from '~/shared/constants/pagination';
 import { NextSeo } from 'next-seo';
 
 const StyledMain = styled('div', {
@@ -53,7 +49,6 @@ const initialState: ContentsSearchParams = {
 
 const Main: NextPage = function () {
   const loadMoreRef = useRef<HTMLDivElement>(null);
-  const parentRef = useRef<HTMLDivElement>(null);
 
   const [searchParams, setSearchParams] =
     useState<ContentsSearchParams>(initialState);
@@ -84,23 +79,6 @@ const Main: NextPage = function () {
     .map((page) => page.data.mainContentsList.map((contents) => contents))
     .flat();
 
-  /**
-   * @see https://react-virtual.tanstack.com/docs/overview
-   * @see https://codesandbox.io/s/github/tannerlinsley/react-virtual/tree/main/examples/variable?file=/src/main.jsx:4250-4350
-   */
-  const rowVirtualizer = useVirtual({
-    size: flatMainContents.length / GRID_COLUMN_COUNT,
-    parentRef,
-    overscan: 5,
-  });
-
-  const columnVirtualizer = useVirtual({
-    horizontal: true,
-    size: GRID_COLUMN_COUNT,
-    parentRef,
-    overscan: 5,
-  });
-
   useIntersectionObserver({
     target: loadMoreRef,
     enabled: hasNextPage,
@@ -125,28 +103,14 @@ const Main: NextPage = function () {
     }
 
     if (pages.length > 0) {
-      let cardIndex = 0;
-
       return (
         <>
-          <NextSeo
-            title="WritingHub: 작품 검색"
-            description="라이팅허브 작품 검색 화면"
-          />
-          {rowVirtualizer.virtualItems.map((virtualRow) => (
-            <Fragment key={virtualRow.index}>
-              {columnVirtualizer.virtualItems.map((virtualColumn) => {
-                const contents = flatMainContents[cardIndex++];
-
-                return (
-                  <Card
-                    {...contents}
-                    key={contents.contentsId + virtualColumn.index}
-                    onCardClick={() => onCardClick(contents.contentsId)}
-                  />
-                );
-              })}
-            </Fragment>
+          {flatMainContents.map((contents) => (
+            <Card
+              key={contents.contentsId}
+              {...contents}
+              onCardClick={() => onCardClick(contents.contentsId)}
+            />
           ))}
           {isFetchingNextPage && <SkeletonCard />}
         </>
@@ -157,52 +121,53 @@ const Main: NextPage = function () {
   };
 
   return (
-    <StyledMain>
-      <SytledTopArea>
-        <Box
-          css={{
-            position: 'relative',
-            display: 'flex',
-            marginTop: '$sp-50',
-            justifyContent: 'center',
-            width: '1216px',
-          }}
-        >
-          <Search
-            placeholder="검색어를 입력해주세요."
-            onChange={onChange}
-            onEnter={onEnter}
-            onSearch={onSearch}
-          />
-          <Button
-            color="white"
-            outline="black"
+    <>
+      <NextSeo
+        title="WritingHub: 작품 검색"
+        description="라이팅허브 작품 검색 화면"
+      />
+      <StyledMain>
+        <SytledTopArea>
+          <Box
             css={{
-              position: 'absolute',
-              right: '0',
-              cursor: 'pointer',
+              position: 'relative',
+              display: 'flex',
+              marginTop: '$sp-50',
+              justifyContent: 'center',
+              width: '1216px',
             }}
-            onClick={onWriterSearchButtonClick}
           >
-            작가검색
-          </Button>
-        </Box>
-      </SytledTopArea>
-      <StyledCardList
-        ref={parentRef}
-        css={{
-          height: `${rowVirtualizer.totalSize}px`,
-        }}
-      >
-        {renderCardList()}
-        <Box
-          ref={loadMoreRef}
-          css={{
-            height: '$height-md',
-          }}
-        />
-      </StyledCardList>
-    </StyledMain>
+            <Search
+              placeholder="검색어를 입력해주세요."
+              onChange={onChange}
+              onEnter={onEnter}
+              onSearch={onSearch}
+            />
+            <Button
+              color="white"
+              outline="black"
+              css={{
+                position: 'absolute',
+                right: '0',
+                cursor: 'pointer',
+              }}
+              onClick={onWriterSearchButtonClick}
+            >
+              작가검색
+            </Button>
+          </Box>
+        </SytledTopArea>
+        <StyledCardList>
+          {renderCardList()}
+          <Box
+            ref={loadMoreRef}
+            css={{
+              height: '$height-md',
+            }}
+          />
+        </StyledCardList>
+      </StyledMain>
+    </>
   );
 };
 

diff --git a/pages/writers.tsx b/pages/writers.tsx
@@ -106,9 +106,9 @@ const Main: NextPage = function () {
     if (pages.length > 0) {
       return (
         <>
-          {flatMainWriters.map((writer: Writer, index: number) => (
+          {flatMainWriters.map((writer: Writer) => (
             <StyledCard
-              key={index}
+              key={writer.writerId}
               onClick={() => onCardClick(writer.writerId)}
               css={{
                 display: 'flex',
@@ -128,51 +128,53 @@ const Main: NextPage = function () {
   };
 
   return (
-    <StyledMain>
+    <>
       <NextSeo
         title="WritingHub: 작가 검색"
         description="라이팅허브 작가 검색 화면"
       />
-      <SytledTopArea>
-        <Box
-          css={{
-            position: 'relative',
-            display: 'flex',
-            marginTop: '$sp-50',
-            justifyContent: 'center',
-            width: '1216px',
-          }}
-        >
-          <Search
-            placeholder="검색어를 입력해주세요."
-            onChange={onChange}
-            onEnter={onEnter}
-            onSearch={onSearch}
-          />
-          <Button
-            color="white"
-            outline="black"
+      <StyledMain>
+        <SytledTopArea>
+          <Box
             css={{
-              position: 'absolute',
-              right: '0',
-              cursor: 'pointer',
+              position: 'relative',
+              display: 'flex',
+              marginTop: '$sp-50',
+              justifyContent: 'center',
+              width: '1216px',
             }}
-            onClick={onContentsSearchButtonClick}
           >
-            작품검색
-          </Button>
-        </Box>
-      </SytledTopArea>
-      <StyledCardList>
-        {renderCardList()}
-        <Box
-          ref={loadMoreRef}
-          css={{
-            height: '$height-md',
-          }}
-        />
-      </StyledCardList>
-    </StyledMain>
+            <Search
+              placeholder="검색어를 입력해주세요."
+              onChange={onChange}
+              onEnter={onEnter}
+              onSearch={onSearch}
+            />
+            <Button
+              color="white"
+              outline="black"
+              css={{
+                position: 'absolute',
+                right: '0',
+                cursor: 'pointer',
+              }}
+              onClick={onContentsSearchButtonClick}
+            >
+              작품검색
+            </Button>
+          </Box>
+        </SytledTopArea>
+        <StyledCardList>
+          {renderCardList()}
+          <Box
+            ref={loadMoreRef}
+            css={{
+              height: '$height-md',
+            }}
+          />
+        </StyledCardList>
+      </StyledMain>
+    </>
   );
 };
 

diff --git a/yarn.lock b/yarn.lock
@@ -1829,13 +1829,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reach/observe-rect@npm:^1.1.0":
-  version: 1.2.0
-  resolution: "@reach/observe-rect@npm:1.2.0"
-  checksum: 7dd903eeaad0e22c6d973bd26265d91eadba56ab5134701ceb3e85214db75339fae94aa7e8b88a65e8daa64bc7cf1b915d4ffcdfd324466b561dc6adc3c6e070
-  languageName: node
-  linkType: hard
-
 "@rushstack/eslint-patch@npm:^1.0.6":
   version: 1.0.7
   resolution: "@rushstack/eslint-patch@npm:1.0.7"
@@ -10051,17 +10044,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-virtual@npm:^2.10.4":
-  version: 2.10.4
-  resolution: "react-virtual@npm:2.10.4"
-  dependencies:
-    "@reach/observe-rect": ^1.1.0
-  peerDependencies:
-    react: ^16.6.3 || ^17.0.0
-  checksum: 1bebc741b01057829a7d7f29256114caecf0597d41b187cb41e75af77f24a87c780bc1a81ec11205b78ee2e9c801fc5e36b20a9e1ab7ddc70a18dd95417795f8
-  languageName: node
-  linkType: hard
-
 "react@npm:17.0.2, react@npm:^17.0.2":
   version: 17.0.2
   resolution: "react@npm:17.0.2"
@@ -12345,7 +12327,6 @@ [email protected]:
     react-loading-skeleton: ^3.0.2
     react-query: ^3.29.1
     react-quill: ^1.3.5
-    react-virtual: ^2.10.4
     rosie: ^2.1.0
     serverless: ^2.60.3
     stitches-reset: ^1.0.0