From 269adbc33729737a29b46ec4adcfeba7d7c6a4cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <157036488+Hain-tain@users.noreply.github.com> Date: Tue, 22 Oct 2024 06:40:04 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat(src):=20Carousel,=20HotTopicCarousel,?= =?UTF-8?q?=20useHotTopic=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20TemplateExplo?= =?UTF-8?q?rePage=EC=97=90=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/templates.ts | 5 + .../TemplateExplorePage.tsx | 25 ++++- .../TemplateExplorePage/components/.gitkeep | 0 .../components/Carousel/Carousel.style.ts | 62 +++++++++++ .../components/Carousel/Carousel.tsx | 101 ++++++++++++++++++ .../HotTopicCarousel.style.ts | 16 +++ .../HotTopicCarousel/HotTopicCarousel.tsx | 47 ++++++++ .../TemplateExplorePage/components/index.ts | 2 + .../pages/TemplateExplorePage/hooks/.gitkeep | 0 .../pages/TemplateExplorePage/hooks/index.ts | 1 + .../TemplateExplorePage/hooks/useHotTopic.ts | 24 +++++ .../templates/useTemplateExploreQuery.ts | 6 +- frontend/src/style/styleConstants.ts | 4 + 13 files changed, 286 insertions(+), 7 deletions(-) delete mode 100644 frontend/src/pages/TemplateExplorePage/components/.gitkeep create mode 100644 frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.style.ts create mode 100644 frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.tsx create mode 100644 frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.style.ts create mode 100644 frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.tsx create mode 100644 frontend/src/pages/TemplateExplorePage/components/index.ts delete mode 100644 frontend/src/pages/TemplateExplorePage/hooks/.gitkeep create mode 100644 frontend/src/pages/TemplateExplorePage/hooks/index.ts create mode 100644 frontend/src/pages/TemplateExplorePage/hooks/useHotTopic.ts diff --git a/frontend/src/api/templates.ts b/frontend/src/api/templates.ts index c138dcf74..3a8b003b0 100644 --- a/frontend/src/api/templates.ts +++ b/frontend/src/api/templates.ts @@ -84,6 +84,7 @@ export const getTemplateExplore = async ({ page = 1, size = PAGE_SIZE, keyword, + tagIds, }: TemplateListRequest): Promise => { const queryParams = new URLSearchParams({ sort, @@ -95,6 +96,10 @@ export const getTemplateExplore = async ({ queryParams.append('keyword', keyword); } + if (tagIds?.length !== 0 && tagIds !== undefined) { + queryParams.append('tagIds', tagIds.toString()); + } + const response = await apiClient.get(`${END_POINTS.TEMPLATES_EXPLORE}?${queryParams.toString()}`); const data = response.json(); diff --git a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx index 35c103f9b..15cb1f1b1 100644 --- a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx +++ b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx @@ -4,7 +4,7 @@ import { ErrorBoundary } from 'react-error-boundary'; import { Link } from 'react-router-dom'; import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS } from '@/api'; -import { ArrowUpIcon, SearchIcon, ZapzapLogo } from '@/assets/images'; +import { ArrowUpIcon, SearchIcon } from '@/assets/images'; import { Dropdown, Flex, @@ -21,6 +21,8 @@ import { useTemplateExploreQuery } from '@/queries/templates'; import { SortingOption } from '@/types'; import { scroll } from '@/utils'; +import { HotTopicCarousel } from './components'; +import { useHotTopic } from './hooks'; import * as S from './TemplateExplorePage.style'; const getGridCols = (windowWidth: number) => (windowWidth <= 1024 ? 1 : 2); @@ -29,6 +31,8 @@ const TemplateExplorePage = () => { const [page, setPage] = useState(1); const [keyword, handleKeywordChange] = useInput(''); + const { selectedTagIds, selectedHotTopic, selectTopic } = useHotTopic(); + const { currentValue: sortingOption, ...dropdownProps } = useDropdown(DEFAULT_SORTING_OPTION); const handleSearchSubmit = (e: React.KeyboardEvent) => { @@ -39,9 +43,11 @@ const TemplateExplorePage = () => { return ( - - - 여러 템플릿을 구경해보세요:) + + + 🔥 지금 인기있는 토픽 {selectedHotTopic && `- ${selectedHotTopic} 보는 중`} + + @@ -70,7 +76,13 @@ const TemplateExplorePage = () => { onReset={reset} resetKeys={[keyword]} > - + )} @@ -93,11 +105,13 @@ const TemplateList = ({ setPage, sortingOption, keyword, + tagIds, }: { page: number; setPage: (page: number) => void; sortingOption: SortingOption; keyword: string; + tagIds: number[]; }) => { const debouncedKeyword = useDebounce(keyword, 300); @@ -105,6 +119,7 @@ const TemplateList = ({ sort: sortingOption.key, page, keyword: debouncedKeyword, + tagIds, }); const templateList = templateData?.templates || []; const totalPages = templateData?.totalPages || 0; diff --git a/frontend/src/pages/TemplateExplorePage/components/.gitkeep b/frontend/src/pages/TemplateExplorePage/components/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.style.ts b/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.style.ts new file mode 100644 index 000000000..bc708b1da --- /dev/null +++ b/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.style.ts @@ -0,0 +1,62 @@ +import styled from '@emotion/styled'; + +import { ChevronIcon } from '@/assets/images'; +import { theme } from '@/style/theme'; + +export const CarouselContainer = styled.div` + display: flex; + gap: 1rem; + align-items: center; + + width: 100%; + padding: 1rem; +`; + +export const CarouselViewport = styled.div` + position: relative; + overflow: hidden; + width: 100%; +`; + +export const CarouselList = styled.ul<{ translateX: number; transitioning: boolean }>` + transform: translateX(${(props) => props.translateX}px); + display: flex; + gap: 1rem; + transition: ${(props) => (props.transitioning ? 'transform 0.3s ease-in-out' : 'none')}; +`; + +export const CarouselItem = styled.li` + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 18rem; + height: 9rem; + + @media (max-width: 768px) { + width: 9rem; + } +`; + +export const CarouselButton = styled.button` + cursor: pointer; + + padding: 1rem; + + background-color: white; + border: 1px solid ${theme.color.light.secondary_300}; + border-radius: 8px; + + &:hover { + background-color: ${theme.color.light.secondary_50}; + } +`; + +export const PrevIcon = styled(ChevronIcon)` + transform: rotate(90deg); +`; + +export const NextIcon = styled(ChevronIcon)` + transform: rotate(270deg); +`; diff --git a/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.tsx b/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.tsx new file mode 100644 index 000000000..e0990f5d2 --- /dev/null +++ b/frontend/src/pages/TemplateExplorePage/components/Carousel/Carousel.tsx @@ -0,0 +1,101 @@ +import { useState, useCallback, useEffect, useRef } from 'react'; + +import { useWindowWidth } from '@/hooks'; +import { BREAKING_POINT } from '@/style/styleConstants'; + +import * as S from './Carousel.style'; + +interface CarouselItem { + id: number; + content: React.ReactNode; +} + +interface Props { + items: CarouselItem[]; +} + +const Carousel = ({ items }: Props) => { + const windowWidth = useWindowWidth(); + const [currentIndex, setCurrentIndex] = useState(0); + const [isTransitioning, setIsTransitioning] = useState(false); + const transitionTimer = useRef(null); + + const displayItems = [...items, ...items, ...items]; + + const ITEM_WIDTH = windowWidth < BREAKING_POINT.MOBILE ? 144 : 288; // CarouselItem 넓이 + const ITEM_GAP = 16; // 1rem + const MOVE_DISTANCE = ITEM_WIDTH + ITEM_GAP; + const originalLength = items.length; + + const translateX = -(currentIndex * MOVE_DISTANCE + originalLength * MOVE_DISTANCE); + + const moveCarousel = useCallback( + (direction: 'prev' | 'next') => { + const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1; + + setIsTransitioning(true); + setCurrentIndex(newIndex); + }, + [currentIndex], + ); + + const needsReposition = useCallback( + (index: number) => { + const threshold = originalLength; + + return index <= -threshold || index >= threshold; + }, + [originalLength], + ); + + const resetPosition = useCallback(() => { + setIsTransitioning(false); + + setCurrentIndex(currentIndex % originalLength); + + requestAnimationFrame(() => { + requestAnimationFrame(() => { + setIsTransitioning(true); + }); + }); + }, [currentIndex, originalLength]); + + useEffect(() => { + if (needsReposition(currentIndex)) { + if (transitionTimer.current) { + clearTimeout(transitionTimer.current); + } + + transitionTimer.current = setTimeout(() => { + resetPosition(); + setIsTransitioning(false); + }, 300); // transition: transform 0.3s 이기 때문 + } + + return () => { + if (transitionTimer.current) { + clearTimeout(transitionTimer.current); + } + }; + }, [currentIndex, needsReposition, resetPosition]); + + return ( + + moveCarousel('prev')}> + + + + + {displayItems.map((item) => ( + {item.content} + ))} + + + moveCarousel('next')}> + + + + ); +}; + +export default Carousel; diff --git a/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.style.ts b/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.style.ts new file mode 100644 index 000000000..8f79fde54 --- /dev/null +++ b/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.style.ts @@ -0,0 +1,16 @@ +import styled from '@emotion/styled'; + +export const Topic = styled.button<{ background: string; border: string; isSelected: boolean }>` + cursor: pointer; /* 커서 스타일 추가 */ + + width: 100%; + height: 100%; + + background-color: ${({ background }) => background}; + border: ${({ isSelected, border }) => (isSelected ? `2px solid ${border}` : 'none')}; + border-radius: 12px; + + &:hover { + border: 2px solid ${({ border }) => border}; + } +`; diff --git a/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.tsx b/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.tsx new file mode 100644 index 000000000..bb29a5788 --- /dev/null +++ b/frontend/src/pages/TemplateExplorePage/components/HotTopicCarousel/HotTopicCarousel.tsx @@ -0,0 +1,47 @@ +import { Text } from '@/components'; +import { TAG_COLORS } from '@/style/tagColors'; +import { theme } from '@/style/theme'; + +import { Carousel } from '../'; +import * as S from './HotTopicCarousel.style'; + +const HOT_TOPIC = [ + { key: 1, content: '우테코', tagIds: [359], color: TAG_COLORS[3] }, + { key: 2, content: '프리코스', tagIds: [364], color: TAG_COLORS[4] }, + { key: 4, content: '자바스크립트', tagIds: [41, 211, 329, 351, 249, 360], color: TAG_COLORS[0] }, + { key: 3, content: '자바', tagIds: [73, 358, 197], color: TAG_COLORS[1] }, + { key: 5, content: '코틀린', tagIds: [361, 363], color: TAG_COLORS[2] }, + { key: 8, content: '스프링', tagIds: [14, 198], color: TAG_COLORS[7] }, + { key: 7, content: '리액트', tagIds: [50, 289, 318], color: TAG_COLORS[6] }, + { key: 8, content: '안드로이드', tagIds: [362], color: TAG_COLORS[8] }, + { key: 9, content: '알고리즘', tagIds: [261, 316, 253, 144, 143], color: TAG_COLORS[5] }, +]; + +interface Props { + selectTopic: ({ tagIds, content }: { tagIds: number[]; content: string }) => void; + selectedHotTopic: string; +} + +const HotTopicCarousel = ({ selectTopic, selectedHotTopic }: Props) => ( + ({ + id: key, + content: ( + { + selectTopic({ tagIds, content }); + }} + > + + {content} + + + ), + }))} + /> +); + +export default HotTopicCarousel; diff --git a/frontend/src/pages/TemplateExplorePage/components/index.ts b/frontend/src/pages/TemplateExplorePage/components/index.ts new file mode 100644 index 000000000..23f3dc1b3 --- /dev/null +++ b/frontend/src/pages/TemplateExplorePage/components/index.ts @@ -0,0 +1,2 @@ +export { default as Carousel } from './Carousel/Carousel'; +export { default as HotTopicCarousel } from './HotTopicCarousel/HotTopicCarousel'; diff --git a/frontend/src/pages/TemplateExplorePage/hooks/.gitkeep b/frontend/src/pages/TemplateExplorePage/hooks/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/frontend/src/pages/TemplateExplorePage/hooks/index.ts b/frontend/src/pages/TemplateExplorePage/hooks/index.ts new file mode 100644 index 000000000..a0b915d8e --- /dev/null +++ b/frontend/src/pages/TemplateExplorePage/hooks/index.ts @@ -0,0 +1 @@ +export { useHotTopic } from './useHotTopic'; diff --git a/frontend/src/pages/TemplateExplorePage/hooks/useHotTopic.ts b/frontend/src/pages/TemplateExplorePage/hooks/useHotTopic.ts new file mode 100644 index 000000000..05405c677 --- /dev/null +++ b/frontend/src/pages/TemplateExplorePage/hooks/useHotTopic.ts @@ -0,0 +1,24 @@ +import { useState } from 'react'; + +export const useHotTopic = () => { + const [selectedTagIds, setSelectedTagIds] = useState([]); + const [selectedHotTopic, setSelectedHotTopic] = useState(''); + + const selectTopic = ({ tagIds, content }: { tagIds: number[]; content: string }) => { + if (content === selectedHotTopic) { + resetSelectedTopic(); + + return; + } + + setSelectedTagIds([...tagIds]); + setSelectedHotTopic(content); + }; + + const resetSelectedTopic = () => { + setSelectedTagIds([]); + setSelectedHotTopic(''); + }; + + return { selectedTagIds, selectedHotTopic, selectTopic }; +}; diff --git a/frontend/src/queries/templates/useTemplateExploreQuery.ts b/frontend/src/queries/templates/useTemplateExploreQuery.ts index 299079c7b..ee753e7ec 100644 --- a/frontend/src/queries/templates/useTemplateExploreQuery.ts +++ b/frontend/src/queries/templates/useTemplateExploreQuery.ts @@ -9,6 +9,7 @@ interface Props { page?: number; size?: number; keyword?: string; + tagIds?: number[]; } export const useTemplateExploreQuery = ({ @@ -16,10 +17,11 @@ export const useTemplateExploreQuery = ({ page = 1, size = PAGE_SIZE, keyword, + tagIds, }: Props) => useQuery({ - queryKey: [QUERY_KEY.TEMPLATE_LIST, sort, page, size, keyword], - queryFn: () => getTemplateExplore({ sort, page, size, keyword }), + queryKey: [QUERY_KEY.TEMPLATE_LIST, sort, page, size, keyword, tagIds], + queryFn: () => getTemplateExplore({ sort, page, size, keyword, tagIds }), throwOnError: true, placeholderData: keepPreviousData, diff --git a/frontend/src/style/styleConstants.ts b/frontend/src/style/styleConstants.ts index 9db33e096..87bc9c964 100644 --- a/frontend/src/style/styleConstants.ts +++ b/frontend/src/style/styleConstants.ts @@ -6,3 +6,7 @@ export const ICON_SIZE = { LARGE: 24, X_LARGE: 32, } as const; + +export const BREAKING_POINT = { + MOBILE: 768, +}; From 6dc3ba877910cb941328c1e47aaa1cdedb74ba3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <157036488+Hain-tain@users.noreply.github.com> Date: Tue, 22 Oct 2024 06:42:33 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat(Footer):=20=EB=AC=B8=EC=9D=98=20?= =?UTF-8?q?=EC=9D=B4=EB=A9=94=EC=9D=BC=20=EC=A7=81=EC=A0=91=20=ED=91=9C?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Footer/Footer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx index d6959bcd9..bd07764ec 100644 --- a/frontend/src/components/Footer/Footer.tsx +++ b/frontend/src/components/Footer/Footer.tsx @@ -1,4 +1,4 @@ -import { ContactUs, Text } from '@/components'; +import { Text } from '@/components'; import { useAuth } from '@/hooks/authentication'; import * as S from './Footer.style'; @@ -20,7 +20,7 @@ const Footer = () => { © All rights reserved. - + 문의: codezap2024@gmail.com ); From 8668aa030045feea926a23417ee430a93de5c138 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <157036488+Hain-tain@users.noreply.github.com> Date: Tue, 22 Oct 2024 06:52:43 +0900 Subject: [PATCH 3/5] =?UTF-8?q?refactor(src):=20=ED=85=9C=ED=94=8C?= =?UTF-8?q?=EB=A6=BF=20=EC=B9=B4=EB=93=9C,=20=ED=85=9C=ED=94=8C=EB=A6=BF?= =?UTF-8?q?=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=9E=91=EC=84=B1=EC=9E=90,=20=EC=8B=9C=EA=B0=84?= =?UTF-8?q?=20=EC=83=89=EC=83=81=20primary=20=3D>=20secondary=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/images/clock.svg | 2 +- frontend/src/assets/images/person.svg | 2 +- .../src/components/TemplateCard/TemplateCard.tsx | 14 +++++--------- frontend/src/pages/TemplatePage/TemplatePage.tsx | 14 ++++---------- 4 files changed, 11 insertions(+), 21 deletions(-) diff --git a/frontend/src/assets/images/clock.svg b/frontend/src/assets/images/clock.svg index e3f90b6cd..773696ce8 100644 --- a/frontend/src/assets/images/clock.svg +++ b/frontend/src/assets/images/clock.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/assets/images/person.svg b/frontend/src/assets/images/person.svg index 4eecc66c6..bb54b6b3c 100644 --- a/frontend/src/assets/images/person.svg +++ b/frontend/src/assets/images/person.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/src/components/TemplateCard/TemplateCard.tsx b/frontend/src/components/TemplateCard/TemplateCard.tsx index a46fbdeb6..991a7d0e4 100644 --- a/frontend/src/components/TemplateCard/TemplateCard.tsx +++ b/frontend/src/components/TemplateCard/TemplateCard.tsx @@ -37,21 +37,17 @@ const TemplateCard = ({ template }: Props) => { - {isPrivate && } + {isPrivate && } - + - - {member.name} - + {member.name} - + - {formatRelativeTime(modifiedAt)} + {formatRelativeTime(modifiedAt)} diff --git a/frontend/src/pages/TemplatePage/TemplatePage.tsx b/frontend/src/pages/TemplatePage/TemplatePage.tsx index 619d960e8..2cbdcce2a 100644 --- a/frontend/src/pages/TemplatePage/TemplatePage.tsx +++ b/frontend/src/pages/TemplatePage/TemplatePage.tsx @@ -126,7 +126,7 @@ const TemplatePage = () => { - +
{ flex: 1, }} > - - {template.member.name} - + {template.member.name}
- - + + {formatRelativeTime(template.modifiedAt)} Date: Tue, 22 Oct 2024 15:57:22 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat(TemplateExplorePage):=20=EA=B5=AC?= =?UTF-8?q?=EA=B2=BD=EA=B0=80=EA=B8=B0=20=ED=85=9C=ED=94=8C=EB=A6=BF=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=A1=9C=EB=94=A9=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TemplateExplorePage.style.ts | 5 ++++ .../TemplateExplorePage.tsx | 27 +++++++++++++------ 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.style.ts b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.style.ts index 5bb750b85..e171c752a 100644 --- a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.style.ts +++ b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.style.ts @@ -28,6 +28,11 @@ export const SearchInput = styled(Input)` box-shadow: inset 1px 2px 8px #00000030; `; +export const TemplateListSectionWrapper = styled.div` + position: relative; + width: 100%; +`; + export const ScrollTopButton = styled.button` cursor: pointer; diff --git a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx index 15cb1f1b1..59b99186a 100644 --- a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx +++ b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx @@ -23,6 +23,7 @@ import { scroll } from '@/utils'; import { HotTopicCarousel } from './components'; import { useHotTopic } from './hooks'; +import { TemplateListSectionLoading } from '../MyTemplatesPage/components'; import * as S from './TemplateExplorePage.style'; const getGridCols = (windowWidth: number) => (windowWidth <= 1024 ? 1 : 2); @@ -115,7 +116,12 @@ const TemplateList = ({ }) => { const debouncedKeyword = useDebounce(keyword, 300); - const { data: templateData, isPending } = useTemplateExploreQuery({ + const { + data: templateData, + isPending, + isFetching, + isLoading, + } = useTemplateExploreQuery({ sort: sortingOption.key, page, keyword: debouncedKeyword, @@ -140,13 +146,18 @@ const TemplateList = ({ ) ) : ( - - {templateList.map((template) => ( - - - - ))} - + + {isFetching && } + {!isLoading && ( + + {templateList.map((template) => ( + + + + ))} + + )} + )} {templateList.length !== 0 && ( From c2b7c8a387f665c4d9690967b2e17854ae4f6336 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?= <157036488+Hain-tain@users.noreply.github.com> Date: Tue, 22 Oct 2024 16:18:08 +0900 Subject: [PATCH 5/5] =?UTF-8?q?design(TemplateCard):=20=EC=9E=91=EC=84=B1?= =?UTF-8?q?=EC=9E=90=20=EC=9D=B4=EB=A6=84=20=EC=83=89=EC=83=81=20primary?= =?UTF-8?q?=20=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TemplateCard/TemplateCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/TemplateCard/TemplateCard.tsx b/frontend/src/components/TemplateCard/TemplateCard.tsx index 991a7d0e4..aa0dfdaf0 100644 --- a/frontend/src/components/TemplateCard/TemplateCard.tsx +++ b/frontend/src/components/TemplateCard/TemplateCard.tsx @@ -39,9 +39,9 @@ const TemplateCard = ({ template }: Props) => { {isPrivate && } - + - {member.name} + {member.name}