Merge branch 'dev' of https://github.com/Gosrock/DuDoong-Front into r…

…elease/ticket
Gosrock · Jul 13, 2023 · ecf5a2d · ecf5a2d
2 parents 2439fcb + 3370774
commit ecf5a2d
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 9 deletions.
diff --git a/apps/admin/index.html b/apps/admin/index.html
@@ -6,7 +6,13 @@
     <link
       rel="stylesheet preconnect"
       crossorigin
-      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      crossorigin="anonymous"
+      href="https://cdn.jsdelivr.net/gh/leetaewook/gmarket-sans-dynamic-subset/GmarketSans.css"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#F8F8FA" />

diff --git a/apps/ticket/pages/_document.tsx b/apps/ticket/pages/_document.tsx
@@ -17,9 +17,16 @@ export default function Document() {
         ></link> */}
         <link
           rel="stylesheet preconnect"
+          type="text/css"
           crossOrigin="anonymous"
           href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css"
         />
+        <link
+          rel="stylesheet"
+          type="text/css"
+          crossOrigin="anonymous"
+          href="https://cdn.jsdelivr.net/gh/leetaewook/gmarket-sans-dynamic-subset/GmarketSans.css"
+        />
         <script
           type="text/javascript"
           src="//dapi.kakao.com/v2/maps/sdk.js?appkey=9c08b495df2ecbc09bd453fb53701551&libraries=services,clusterer"

diff --git a/apps/ticket/src/components/home/Home.tsx b/apps/ticket/src/components/home/Home.tsx
@@ -9,10 +9,11 @@ import { EventApi } from '@lib/apis/events/EventApi';
 import { css } from '@emotion/react';
 import { useDebouncedCallback } from 'use-debounce';
 import { EventResponse } from '@lib/apis/events/eventType';
+import SkeletonEvent from './blocks/SkeletonEvent';
 
 const Home = () => {
   const [keyword, setKeyword] = useState<string>('');
-  const { infiniteListElement } = useInfiniteQueries<EventResponse>(
+  const { infiniteListElement, isLoading } = useInfiniteQueries<EventResponse>(
     ['events', keyword],
     ({ pageParam = 0 }) =>
       EventApi.GET_EVENTS_SEARCH({ keyword, pageParam, size: 12 }),
@@ -44,7 +45,11 @@ const Home = () => {
             placeholder={'검색어를 입력해주세요'}
             rightIcon={<Search />}
           />
-          <EventList>{infiniteListElement}</EventList>
+          <EventList>
+            {infiniteListElement}
+            {isLoading &&
+              Array.from({ length: 6 }, (_, i) => <SkeletonEvent key={i} />)}
+          </EventList>
         </main>
         <Spacing size={170} />
       </Wrapper>

diff --git a/apps/ticket/src/components/home/blocks/EventLink.tsx b/apps/ticket/src/components/home/blocks/EventLink.tsx
@@ -25,6 +25,7 @@ const EventLink = (props: EventResponse) => {
             alt={`${props.name}`}
             onError={() => setImg(`/no-poster.png`)}
             className="poster"
+            priority
           />
           {props.status === '지난공연' && (
             <Tag size="md" color="mono" text="지난 공연" className="tag" />
@@ -70,7 +71,7 @@ const Poster = styled.div<{ status: EventStatus }>`
   padding-top: 141.4%;
   overflow: hidden;
   img {
-    background: ${({ theme }) => theme.palette.gray_300};
+    background: rgba(165, 165, 165, 0.3);
 
     object-fit: cover;
     ${({ status }) =>

diff --git a/apps/ticket/src/components/home/blocks/SkeletonEvent.tsx b/apps/ticket/src/components/home/blocks/SkeletonEvent.tsx
@@ -0,0 +1,68 @@
+import SkeletonItem from '@components/shared/SkeletonStyle';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import React from 'react';
+
+const SkeletonEvent = () => {
+  return (
+    <Wrapper>
+      <Poster />
+      <SubText />
+      <MainText />
+      {/* <Text
+        typo="P_Text_14_R"
+        color="gray_400"
+        as="p"
+        css={css`
+          padding-top: 10px;
+        `}
+      >
+        {props.startAt}
+      </Text>
+      <Text
+        typo="P_Header_18_SB"
+        color={props.status === '지난공연' ? 'gray_400' : 'black'}
+        as="p"
+        css={css`
+          padding-top: 3px;
+        `}
+      >
+        {props.name}
+      </Text> */}
+    </Wrapper>
+  );
+};
+
+export default React.memo(SkeletonEvent);
+
+const Wrapper = styled.div`
+  transform: translateY(0px);
+  transition: transform 0.15s ease-in 0s;
+  &:hover {
+    transform: translateY(-4px);
+  }
+`;
+
+const Poster = styled(SkeletonItem)`
+  position: relative;
+  padding-top: 141.4%;
+  overflow: hidden;
+  transition: box-shadow 0.15s ease-in 0s;
+  box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px 0px;
+  border-radius: 12px;
+
+  &:hover {
+    box-shadow: rgba(0, 0, 0, 0.08) 0px 12px 20px 0px;
+  }
+`;
+
+const SubText = styled(SkeletonItem)`
+  margin-top: 10px;
+  height: 15.6px;
+  width: 80%;
+`;
+const MainText = styled(SkeletonItem)`
+  margin-top: 3px;
+  height: 27px;
+  width: 100%;
+`;
diff --git a/apps/ticket/src/components/shared/SkeletonStyle.tsx b/apps/ticket/src/components/shared/SkeletonStyle.tsx
@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+
+const SkeletonItem = styled.div<{ width?: string; height?: string }>`
+  width: ${({ width }) => width || 'auto'};
+  height: ${({ width }) => width || 'auto'};
+  background-color: #f2f2f2;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+
+  @keyframes skeleton-gradient {
+    0% {
+      background-color: rgba(165, 165, 165, 0.1);
+    }
+    50% {
+      background-color: rgba(165, 165, 165, 0.3);
+    }
+    100% {
+      background-color: rgba(165, 165, 165, 0.1);
+    }
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    animation: skeleton-gradient 1.5s infinite ease-in-out;
+  }
+`;
+
+export default SkeletonItem;
diff --git a/shared/ui/src/theme/global.ts b/shared/ui/src/theme/global.ts
@@ -85,7 +85,7 @@ export const globalStyle = css`
     font-display: optional;
   } */
 
-  @font-face {
+  /* @font-face {
     font-family: 'Gmarket Sans';
     font-weight: 300;
     font-style: normal;
@@ -115,7 +115,7 @@ export const globalStyle = css`
       url('https://asset.dudoong.com/common/fonts/GmarketSansBold.woff')
         format('woff');
     font-display: swap;
-  }
+  } */
   body {
     font-family: 'Pretendard', Pretendard, -apple-system, BlinkMacSystemFont,
       system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',

diff --git a/shared/utils/src/hooks/useInfiniteQueries.tsx b/shared/utils/src/hooks/useInfiniteQueries.tsx
@@ -20,7 +20,7 @@ export const useInfiniteQueries = <T,>(
   >,
 ) => {
   const [ref, inView] = useInView();
-  const { data, fetchNextPage } = useInfiniteQuery<
+  const { data, fetchNextPage, isLoading } = useInfiniteQuery<
     InfiniteResponse<T>,
     AxiosError
   >(queryKey, apiFunction, {
@@ -36,6 +36,10 @@ export const useInfiniteQueries = <T,>(
     if (hasNext && inView) fetchNextPage();
   }, [inView]);
 
+  useEffect(() => {
+    console.log(isLoading);
+  }, [isLoading]);
+
   const listElement = data?.pages.map(({ content }) =>
     content.map((item, idx) => <ListItem {...item} key={`item-${idx}`} />),
   );
@@ -49,11 +53,12 @@ export const useInfiniteQueries = <T,>(
     infiniteListElement: (
       <>
         {listElement}
-        {observer}
+        {!isLoading && observer}
       </>
     ),
     isEmpty,
-  };
+    isLoading,
+  } as const;
 };
 
 export interface InfiniteResponse<T> {