Merge pull request #39 from Read-bird/feature/yj

코드 리팩토링, 정리

README.md

@@ -19,10 +19,11 @@
 - react-modal : 모달 open, close
 - sweet-alert : alert, confirm 인터렉션
 - dayjs : 날짜 format
-- react-dropdown : 드롭다운 기능
 - react-icons/all-file : icons 생성
 - react-calendar: 캘린더 생성
 - react-window : 가상스크롤 적용
+- react-slick : 슬라이더 적용
+- slick-carousel : 슬라이더 스타일 적용
 - styled-components : 스타일링
 - craco : cra config 설정 (path alias 등)
 - tsconfig-paths-webpack-plugin: craco 설정에 적용할 plugin
@@ -37,6 +38,7 @@
 ├─assets      // 이미지 or 폰트
 ├─components  // 컴포넌트
   ├─common      // 공통 컴포넌트
+  ├─connection  // 첫 로딩시 서버 통신을 통해 처리할 항목 정리
   ├─templates   // page별 template
 ├─constants   // 공통으로 사용되는 상수
 ├─hooks       // 커스텀 훅

package.json

@@ -17,7 +17,6 @@
     "react": "^18.2.0",
     "react-calendar": "^4.6.1",
     "react-dom": "^18.2.0",
-    "react-dropdown": "^1.11.0",
     "react-hook-form": "^7.48.2",
     "react-modal": "^3.16.1",
     "react-redux": "^9.0.2",

src/api/axios.ts

@@ -15,8 +15,8 @@ type TAxiosFetch<T extends unknown> = {
 };
 
 // authFetch 일괄적으로 사용하기 위해 생성한 fetch 함수
-// 제네릭 타입 T는 options에 있는 data의 타입을 말함
-// 해당 함수에서 바로 에러를 리턴하고 함수를 호출하는 곳에서 에러핸들링을 하는 것이 좋을 것으로 판단..
+// 제네릭 타입 REQ_DATA는 options에 있는 data의 타입
+// RES_DATA는 response data 타입
 export const axiosFetch = async <REQ_DATA = any, RES_DATA = any>({
   method,
   url,

src/components/templates/MyPageTemplate/MyEncyclopediaTemplate/MyEncyclopediaTemplate.tsx

@@ -1,5 +1,132 @@
-import { EncyclopediaList } from '@components/templates/MyPageTemplate/MyEncyclopediaTemplate/EncyclopediaList';
+import { TCollection, setCollections, setSelectCollections } from '@/store/reducers';
+import { TRootState } from '@/store/state';
+import { axiosFetch } from '@api/axios';
+import { TResponseCollection } from '@api/types/collection';
+import { IconEmptyBird } from '@assets/icons';
+import { Images } from '@assets/images';
+import { Spacing } from '@components/common/Spacing';
+import { PlanModalTemplate } from '@components/templates/PlanModalTemplate';
+import { Alert } from '@utils/Alert';
+import { convertError } from '@utils/errors';
+import { AxiosError } from 'axios';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
 
 export const MyEncyclopediaTemplate = () => {
-  return <EncyclopediaList />;
+  const { collections } = useSelector((state: TRootState) => state.collectionStore);
+  const dispatch = useDispatch();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const getEncyList = async () => {
+    try {
+      const res = await axiosFetch<any, TResponseCollection[]>({
+        url: '/api/collection',
+        method: 'get'
+      });
+
+      if (res.status === 200) {
+        dispatch(setCollections(res.data));
+      }
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        Alert.error({ title: convertError(err.response?.data.message) });
+      }
+    }
+  };
+
+  const handleClick = (collection: TCollection | TResponseCollection) => () => {
+    if (collection.characterId === null) {
+      Alert.warning({ title: '아직 획득하지 못한 캐릭터입니다.' });
+      return;
+    }
+
+    dispatch(setSelectCollections([collection] as TResponseCollection[]));
+    setIsOpen(true);
+  };
+
+  useEffect(() => {
+    getEncyList();
+  }, []);
+
+  return (
+    <Wrap>
+      <Spacing height={30} />
+      <StyledUl>
+        {collections?.map((collection, index) => (
+          <li key={index} onClick={handleClick(collection)}>
+            {collection.characterId === null ? (
+              <div className="wrap icon-wrap">
+                <IconEmptyBird />
+              </div>
+            ) : (
+              <div className="wrap image-wrap">
+                <Images imgUrl={collection.imageUrl} imgAlt={collection.name} imgWidth={65} />
+              </div>
+            )}
+            <Spacing height={10} />
+            <span>{collection.name}</span>
+          </li>
+        ))}
+        <PlanModalTemplate isOpen={isOpen} setIsOpen={setIsOpen} modalIndex={4} />
+      </StyledUl>
+    </Wrap>
+  );
 };
+
+const Wrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-height: calc(100vh - 165px);
+  padding: 0 13px;
+`;
+
+const StyledUl = styled.ul`
+  width: 100%;
+  flex: 1;
+  max-height: calc(100vh - 195px);
+
+  display: flex;
+  justify-content: center;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  overflow: auto;
+  gap: 0 20px;
+
+  li {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 0 0 96px;
+    height: 150px;
+    cursor: pointer;
+
+    div.wrap {
+      width: 96px;
+      height: 96px;
+      border-radius: 50%;
+      border: 2px solid ${({ theme }) => theme.colors.darkGray};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .icon-wrap {
+      background-color: ${({ theme }) => theme.colors.subBlue};
+    }
+
+    .image-wrap {
+      background-color: ${({ theme }) => theme.colors.basic};
+    }
+
+    span {
+      display: inline-block;
+      max-width: 60px;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 400;
+    }
+  }
+`;

src/components/templates/MyPageTemplate/MyLibraryTemplate/Book/Book.tsx → src/components/templates/MyPageTemplate/MyLibraryTemplate/Book.tsx

@@ -1,10 +1,10 @@
 import { Images } from '@assets/images';
 import { Spacing } from '@components/common/Spacing';
+import { TResponseLibrary } from '@components/templates/MyPageTemplate/MyLibraryTemplate/MyLibraryTemplate';
 import dayjs from 'dayjs';
 import { memo, useEffect, useRef } from 'react';
 import { areEqual } from 'react-window';
 import styled, { CSSObject, CSSProperties } from 'styled-components';
-import { TResponseLibrary } from '../LibraryList';
 
 type TProps = {
   data: {