Merge pull request #232 from Neogasogaeseo/feat/#225

Neogasogaeseo · Mar 13, 2022 · 1cac972 · 1cac972
2 parents df47e5e + 67e4b58
commit 1cac972
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 38 deletions.
diff --git a/src/presentation/components/NeogaCreateCard/Item/index.tsx b/src/presentation/components/NeogaCreateCard/Item/index.tsx
@@ -2,6 +2,7 @@ import { IcArrowRight } from '@assets/icons';
 import { StNeogaCreateCardItem } from './style';
 
 interface NeogaCreateCardItemProps {
+  idx: number;
   title: string;
   content: string;
   src: string;
@@ -10,9 +11,9 @@ interface NeogaCreateCardItemProps {
 }
 
 function NeogaCreateCardItem(props: NeogaCreateCardItemProps) {
-  const { title, content, src, backgroundColor, onClick } = props;
+  const { title, content, src, onClick, idx } = props;
   return (
-    <StNeogaCreateCardItem color={backgroundColor} onClick={onClick}>
+    <StNeogaCreateCardItem onClick={onClick} idx={idx}>
       <img src={src} alt={content} />
       <div>
         <div>{title}</div>

diff --git a/src/presentation/components/NeogaCreateCard/Item/style.ts b/src/presentation/components/NeogaCreateCard/Item/style.ts
@@ -2,31 +2,41 @@ import { COLOR } from '@styles/common/color';
 import { FONT_STYLES } from '@styles/common/font-style';
 import styled from 'styled-components';
 
-export const StNeogaCreateCardItem = styled.div`
-  background-color: ${(props) => props.color};
+export const StNeogaCreateCardItem = styled.div<{ idx: number }>`
   position: relative;
-  border-radius: 18px;
-  padding: 19px;
-  color: ${COLOR.WHITE};
+  height: 104px;
+  border-radius: 20px;
+  padding: 0 22px;
   white-space: pre-line;
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
+  box-shadow: 0px 2px 20px rgba(88, 99, 109, 0.05);
+  z-index: ${({ idx }) => idx};
 
   & div {
     & > div:nth-child(1) {
-      margin-bottom: 6px;
+      margin-bottom: 9px;
+      color: ${COLOR.GRAY_8};
       ${FONT_STYLES.SB_16_TITLE}
     }
     & > div:nth-child(2) {
+      color: ${COLOR.GRAY_5};
       ${FONT_STYLES.R_14_TITLE}
       opacity: 0.8;
     }
   }
 
   & img {
-    width: 60px;
-    height: 60px;
+    width: 52px;
+    height: 52px;
+    border-radius: 26px;
+  }
+
+  & svg {
+    & path {
+      stroke: ${COLOR.GRAY_4};
+    }
   }
 `;
diff --git a/src/presentation/components/NeogaCreateCard/List/index.tsx b/src/presentation/components/NeogaCreateCard/List/index.tsx
@@ -20,13 +20,14 @@ function NeogaCreateCardList(props: NeogaCreateCardListProps) {
   const { cards, onItemClick } = props;
   return (
     <StNeogaCreateCardList>
-      {cards.map((card) => (
+      {cards.map((card, idx) => (
         <NeogaCreateCardItem
           key={card.id}
           {...card}
           onClick={() => {
             onItemClick(card.id, card.isCreated);
           }}
+          idx={idx}
         />
       ))}
     </StNeogaCreateCardList>

diff --git a/src/presentation/components/NeogaCreateCard/List/style.ts b/src/presentation/components/NeogaCreateCard/List/style.ts
@@ -4,5 +4,5 @@ export const StNeogaCreateCardList = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: 10px;
+  gap: 8px;
 `;
diff --git a/src/presentation/pages/Neoga/Create/index.tsx b/src/presentation/pages/Neoga/Create/index.tsx
@@ -1,22 +1,19 @@
+import { useState } from 'react';
+import { useQuery } from 'react-query';
+import { Link, useNavigate } from 'react-router-dom';
+
 import { api } from '@api/index';
-import { NeogaCardItem } from '@api/types/neoga';
 import { imgLogo } from '@assets/images';
 import NeogaCreateCardList from '@components/NeogaCreateCard/List';
-import { useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
 import { StNeogaCreate, StWhiteWrapper, StViewModeSelector } from './style';
 
 function NeogaCreate() {
-  const [allTemplateList, setallTemplateList] = useState<NeogaCardItem[]>([]);
-  const [viewMode, setViewMode] = useState<'recent' | 'popular'>('recent');
+  const [viewMode, setViewMode] = useState<'recent' | 'popular'>('popular');
   const navigate = useNavigate();
 
-  useEffect(() => {
-    (async () => {
-      const data = await api.neogaService.getAllTemplates(viewMode);
-      setallTemplateList(data);
-    })();
-  }, [viewMode]);
+  const { data: allTemplateList } = useQuery(['neososeoTemplates', viewMode], () =>
+    api.neogaService.getAllTemplates(viewMode),
+  );
 
   return (
     <StNeogaCreate>
@@ -27,25 +24,27 @@ function NeogaCreate() {
         <div>너가소개서 설문 만들기</div>
         <div>원하는 설문의 링크를 생성하고 공유해보세요</div>
         <div>
-          <StViewModeSelector
-            selected={viewMode === 'recent'}
-            onClick={() => setViewMode('recent')}
-          >
-            최신순
-          </StViewModeSelector>
           <StViewModeSelector
             selected={viewMode === 'popular'}
             onClick={() => setViewMode('popular')}
           >
             인기순
           </StViewModeSelector>
+          <StViewModeSelector
+            selected={viewMode === 'recent'}
+            onClick={() => setViewMode('recent')}
+          >
+            최신순
+          </StViewModeSelector>
         </div>
-        <NeogaCreateCardList
-          cards={allTemplateList}
-          onItemClick={(id, isCreated) => {
-            navigate(isCreated ? `/neoga/create/${id}/created` : `/neoga/create/${id}`);
-          }}
-        />
+        {allTemplateList && (
+          <NeogaCreateCardList
+            cards={allTemplateList}
+            onItemClick={(id, isCreated) => {
+              navigate(isCreated ? `/neoga/create/${id}/created` : `/neoga/create/${id}`);
+            }}
+          />
+        )}
       </StWhiteWrapper>
     </StNeogaCreate>
   );

diff --git a/src/presentation/pages/Neoga/Create/style.ts b/src/presentation/pages/Neoga/Create/style.ts
@@ -28,12 +28,13 @@ export const StWhiteWrapper = styled(StWrapper)`
     font-size: 15px;
     color: ${COLOR.GRAY_5};
     line-height: 144%;
-    margin-bottom: 48px;
+    margin-top: 12px;
+    margin-bottom: 32px;
   }
   & > div:nth-child(4) {
     display: flex;
     gap: 8px;
-    margin-bottom: 12px;
+    margin-bottom: 20px;
   }
 `;
 
@@ -43,5 +44,5 @@ export const StViewModeSelector = styled.div<{ selected: boolean }>`
   padding: 8px 20px;
   color: ${({ selected }) => (selected ? COLOR.WHITE : COLOR.GRAY_5)};
   background-color: ${({ selected }) => (selected ? COLOR.GRAY_7 : COLOR.GRAY_1)};
-  ${FONT_STYLES.R_13_TITLE}
+  ${FONT_STYLES.M_13_TITLE}
 `;