chore: quill-divider 제거

README.md

@@ -367,10 +367,4 @@ function checkIsUser({userName, userBirth}:userDataPropsTypes){
 <br/>
 <hr>
 
-### 📪 우리들의 고민 아카이빙
-
-| 🪄 짜미들의 아티클 | 💥 짜미들의 트러블 슈팅 |
-| ---------------------- | ---------------------- |
-| <ul><li>[재훈이의 React Query 아티클](https://lapis-margin-2db.notion.site/92858409a2b64432821dad4ac58cd630?pvs=4)</li> <li>[다은이의 Context API 아티클](https://velog.io/@namdaeun/React-Context-API-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0)</li> <li>[다은이의 초기세팅(eslint & prettier) 아티클](https://velog.io/@namdaeun/eslint-prettier-초기세팅)</li> <li>[다현이의 ReactQuery 아티클](https://velog.io/@moondda/React-Query-%EB%BF%8C%EC%88%98%EA%B8%B0)</li> <li>[서진이의 StoryBook 아티클](https://www.notion.so/Storybook-c60797fa06104848ac9e5f4e143bed15)</li><li>[재훈 Typescript 아티클](https://lapis-margin-2db.notion.site/Typescript-3814d266b2094c12a7a9b241e983d0d9?pvs=4)</li><li>[재훈이의 Emotion 아티클](https://lapis-margin-2db.notion.site/Emotion-518a0b3b11054afebf41e729e77712b2?pvs=4)</li></ul> | <ul><li>[git pr 실수로 merge했을 때!](https://unnamedwritings.notion.site/git-pr-merge-682b85d88d6e43d08787cd4d3a53a2e3?pvs=4)</li> <li>[stylelint 몇가지 에러](https://unnamedwritings.notion.site/stylelint-231ec23fd0194163ae293e720aaaaeb7?pvs=4)</li> <li>[Pretendard 설정 안먹어? Variable은 뭐야?](https://unnamedwritings.notion.site/Pretendard-Variable-89309bc1f1c542179aa47a0175f5b4f7?pvs=4)</li> <li>[emotion style 변수 prop+hover적용하기](https://unnamedwritings.notion.site/emotion-style-prop-hover-2e135c5cdad54326a3af4b88f605f891?pvs=4)</li> <li>[\2022 이거 뭐게 ㅋ ?](https://unnamedwritings.notion.site/2022-93485ad8d0174ccabe1505e003f45ae9?pvs=4)</li> <li>[css의 has 속성에 대해 아시나요 ?](https://unnamedwritings.notion.site/css-has-9a8abb20eefb41a784cc6f88a7da478e?pvs=4)</li> <li>[image 값 null인지 확인](https://unnamedwritings.notion.site/image-null-679decbddbb143258375dac29e1ad195?pvs=4)</li> <li>[Quilljs 에디터의 모든 것](https://unnamedwritings.notion.site/Quilljs-02595395a67946c484ded69d09770210?pvs=4)</li> <li>[svg 리액트 컴포넌트화](https://unnamedwritings.notion.site/svg-3236297adf1940edbc9692b194d45103?pvs=4)</li> <li>[경우에 따라 컴포넌트 띄우기](https://unnamedwritings.notion.site/323ace14b26643a6a379ee3d48c6d1b4?pvs=4)</li> <li>[emotion styelint 초기세팅](https://unnamedwritings.notion.site/emotion-styelint-eca968031dac484bbf2db56a5bad25f5?pvs=4)</li> <li>[react-slick 사용기](https://unnamedwritings.notion.site/react-slick-096080a35b924241999b6012ce28a585?pvs=4)</li> <li>[캐러셀 마지막 슬라이드 이미지 크기 줄이기](https://unnamedwritings.notion.site/76185b44e0f74d83b99f49845e16ba10?pvs=4)</li> <li>[spacing component 만들기](https://unnamedwritings.notion.site/spacing-component-747b2d8bda3a49059fe4ec9210e0f18b?pvs=4)</li> <li>[hover 했더니 요소가 움직이면 ?](https://unnamedwritings.notion.site/hover-7903e6ae25f042f0b0343c945d6c6d32?pvs=4)</li> <li>[스크롤바에 여백 주고 싶은데요 ..](https://unnamedwritings.notion.site/5afdaf5a12864fdcb4aaf8a686fa09a1?pvs=4)</li> <li>[eslint import order ./ ../ 경로 순서 충돌](https://unnamedwritings.notion.site/eslint-import-order-cf70fdcebf184dc390d98dd9158c34c0?pvs=4)</li> <li>[React Query 쿼리키 사용방법 + 예시코드](https://unnamedwritings.notion.site/React-Query-0b3ef41c6eae4066b9464bf1ae520b64?pvs=4)</li> <li>[이중 객체에서 값 빼내오기](https://unnamedwritings.notion.site/5cd46f41f9b8410eb743791e53a13918?pvs=4)</li> <li>[배열의 마지막 인덱스 설정](https://unnamedwritings.notion.site/370032e0886f4ad9b8fef0b2fe4c706d?pvs=4)</li> <li>[map 반환값은 순서가 보장되지 않는다](https://unnamedwritings.notion.site/map-36fc178f96684b11b00d3f7ca8ea02d5?pvs=4)</li> <li>[이미지 태그에 border가 안 없어져요](https://unnamedwritings.notion.site/border-d1620da4e2f74313b211aecb81b09084?pvs=4)</li> <li>[CORS policy에러날 때](https://unnamedwritings.notion.site/CORS-policy-7914ce3a812c4e3aad1619a246febc9a?pvs=4)</li> <li>[React-Query useQuery값 새로 불러오기](https://unnamedwritings.notion.site/React-Query-useQuery-225117e3e91e4fd6beb90ea26eb3a8d1?pvs=4)</li> <li>[svg가 배포하니까 안 보여요](https://unnamedwritings.notion.site/svg-2acc7d727b924c63b89e9ee54813e69d?pvs=4)</li> <li>[로그인 환경변수 적용](https://unnamedwritings.notion.site/1a0f0c710d5640ef9b47840a845b2059?pvs=4)</li> 
-
 

package.json

@@ -34,7 +34,7 @@
     "axios": "^1.6.5",
     "emotion-reset": "^3.0.1",
     "history": "^5.3.0",
-    "lottie-react": "^2.4.0",
+    "lottie-web": "^5.12.2",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -61,6 +61,7 @@
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "3.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
+    "source-map-explorer": "^2.5.3",
     "stylelint": "^16.1.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",

src/pages/admin/components/EachTopic.tsx

@@ -120,7 +120,7 @@ const TopicWrapper = styled.div`
 const TopicData = styled.div`
   display: flex;
   gap: 4rem;
-  align-items: center;
+  align-items: flex-start;
   width: 64.9rem;
   height: 5.2rem;
 `;
@@ -145,6 +145,7 @@ const TopicDate = styled.p`
 
 const TopicTag = styled.p`
   width: 7rem;
+  padding: 0.6rem 0;
 
   color: ${({ theme }) => theme.colors.black};
   ${({ theme }) => theme.fonts.body1};
@@ -154,6 +155,7 @@ const TopicTag = styled.p`
 const TopicDescription = styled.p`
   display: -webkit-box;
   width: 29rem;
+  padding-top: 0.2rem;
   overflow: hidden;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

src/pages/groupFeed/carousel/Carousel.tsx

@@ -114,6 +114,5 @@ const TopicDescription = styled.div`
   width: 63.1rem;
 
   color: ${({ theme }) => theme.colors.gray70};
-
   ${({ theme }) => theme.fonts.body3};
 `;

src/pages/groupFeed/carousel/EachArticle.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import Lottie from 'lottie-react';
 import { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import LoadingLottie from '../../../assets/gifs/loading.json';
+import Loading from '../../loading/Loading';
 import {
   GroupChatIc,
   GroupCuriousIc,
@@ -112,7 +111,7 @@ const EachArticle = (props: EachProfilePropTypes) => {
                 </div>
               )),
           )}
-          {isFetchingNextPage && <Lottie animationData={LoadingLottie} />}
+          {isFetchingNextPage && <Loading />}
         </>
       )}
     </ArticlePostWrapper>
@@ -188,8 +187,8 @@ const ArticleContent = styled.div`
   overflow: hidden;
 
   color: ${({ theme }) => theme.colors.gray70};
-
   ${({ theme }) => theme.fonts.body3};
+  word-break: break-all;
 `;
 
 const ArticleInfo = styled.div`

src/pages/loading/Loading.tsx

@@ -1,11 +1,29 @@
+import { useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
-import Lottie from 'lottie-react';
+
+import * as lottie from 'lottie-web/build/player/lottie_light';
+type LettiePlayer = typeof lottie.default;
+const lottiePlayer = lottie as any as LettiePlayer;
 import LoadingLottie from '../../assets/gifs/loading.json';
 
 const Loading = () => {
+  const spinnerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const animation = lottiePlayer.loadAnimation({
+      container: spinnerRef.current as Element,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: LoadingLottie,
+    });
+
+    return () => animation.destroy();
+  }, []);
+
   return (
     <SpinnerWrapper>
-      <Lottie animationData={LoadingLottie} />
+      <Spinner ref={spinnerRef} />
     </SpinnerWrapper>
   );
 };
@@ -19,3 +37,11 @@ const SpinnerWrapper = styled.div`
   width: 100%;
   height: 100vh;
 `;
+
+const Spinner = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 8.4rem;
+  height: 8.4rem;
+`;

src/pages/postDetail/PostDetail.tsx

@@ -254,6 +254,7 @@ const DetailBox = styled.div`
 const TitleText = styled.h1`
   color: ${({ theme }) => theme.colors.grayBlack};
   ${({ theme }) => theme.fonts.title1};
+  word-break: break-all;
 `;
 
 const DateText = styled.p`
@@ -326,7 +327,7 @@ const PostContainer = styled.div`
   min-height: 6rem;
   padding: 3.6rem;
 
-  word-break: keep-all;
+  word-break: break-all;
 
   background-color: ${({ theme }) => theme.colors.white};
   border-radius: 10px;

vite.config.ts

@@ -1,6 +1,7 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { defineConfig, type PluginOption } from 'vite';
 import svgr from 'vite-plugin-svgr';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -20,5 +21,16 @@ export default defineConfig({
       },
     }),
     svgr(),
+    visualizer() as PluginOption,
   ],
+  build: {
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom', 'react-router-dom'],
+        },
+      },
+    },
+  },
 });