From 3e4e33b7a107aad6241f41676070b6d81aa38aba Mon Sep 17 00:00:00 2001 From: EunBean Kwon <65286685+eunbeann@users.noreply.github.com> Date: Sat, 31 Aug 2024 05:00:27 +0900 Subject: [PATCH] =?UTF-8?q?QA=20=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0=20?= =?UTF-8?q?/=20=EA=B3=B5=EA=B3=A0,=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC?= =?UTF-8?q?=EB=B3=84=20=ED=83=9C=EA=B7=B8=20API=20=EC=B6=94=EA=B0=80=20(#6?= =?UTF-8?q?3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * comment: delete Console. * feat: ready tab * style: add hover case * feat: selected tags * comment: delete comment * feat: console err fix * feat: ready tab * fix: QA fix * fix(qa) QA에서 발견된 오류 수정 (#58) * fix: 이미지 리소스 파일들 교체 (#64) * fix (#65) * feat(landing): 이미지 수정 (#67) * feat: 사이드바 기능 구현 및 애니메이션 구현 (#66) * feat: ready tab * style: add hover case * feat: ready tab * style: add hover case * feat: ready tab * fix: fixing build err * fix :build err * feat: 카드반영수정 --- .../(my-info)/apis/useGetOnboadaStatus.ts | 1 + .../Onboarding/OnboardingDialog.tsx | 20 +-- src/app/(sidebar)/(my-info)/page.tsx | 6 + .../my-recruit/[id]/api/useGetCategoryTags.ts | 24 +++ .../my-recruit/[id]/api/usePatchStatus.ts | 2 - .../[id]/components/DetailContent.tsx | 137 ++++++++++-------- .../my-recruit/[id]/components/TagList.tsx | 114 ++++++++++----- .../my-recruit/[id]/components/TextBubble.tsx | 1 - src/app/(sidebar)/my-recruit/[id]/page.tsx | 122 +++++++++------- .../my-recruit/api/usePostCardToRecruit.ts | 2 + .../(sidebar)/write/[id]/api/usePostMemo.ts | 7 +- src/app/layout.tsx | 6 +- src/app/login/page.tsx | 4 +- src/container/Sidebar/Sidebar.tsx | 29 ++-- src/system/components/Dialog/Dialog.tsx | 12 +- src/system/components/Dialog/ShadcnDialog.tsx | 9 +- src/system/components/Icon/Icon.tsx | 12 +- src/system/components/Icon/SVG/Warning.tsx | 14 ++ 18 files changed, 336 insertions(+), 186 deletions(-) create mode 100644 src/app/(sidebar)/(my-info)/apis/useGetOnboadaStatus.ts create mode 100644 src/app/(sidebar)/my-recruit/[id]/api/useGetCategoryTags.ts create mode 100644 src/system/components/Icon/SVG/Warning.tsx diff --git a/src/app/(sidebar)/(my-info)/apis/useGetOnboadaStatus.ts b/src/app/(sidebar)/(my-info)/apis/useGetOnboadaStatus.ts new file mode 100644 index 0000000..4bd4d9f --- /dev/null +++ b/src/app/(sidebar)/(my-info)/apis/useGetOnboadaStatus.ts @@ -0,0 +1 @@ +const getOnboardStatus = () => {}; diff --git a/src/app/(sidebar)/(my-info)/containers/Onboarding/OnboardingDialog.tsx b/src/app/(sidebar)/(my-info)/containers/Onboarding/OnboardingDialog.tsx index 729fa55..4b4ed0a 100644 --- a/src/app/(sidebar)/(my-info)/containers/Onboarding/OnboardingDialog.tsx +++ b/src/app/(sidebar)/(my-info)/containers/Onboarding/OnboardingDialog.tsx @@ -1,18 +1,18 @@ +import { TouchButton } from '@/components/TouchButton'; +import { Icon } from '@/system/components'; import { Dialog, DialogContent } from '@/system/components/Dialog/Dialog'; -import { Logo } from './Logo'; -import { Spacing } from '@/system/utils/Spacing'; +import { color } from '@/system/token/color'; import { AnimateSlide } from '@/system/utils/AnimateSlide/AnimateSlide'; -import { TouchButton } from '@/components/TouchButton'; -import { useEffect, useState } from 'react'; import { If } from '@/system/utils/If'; +import { Spacing } from '@/system/utils/Spacing'; +import { SwitchCase } from '@/system/utils/SwitchCase'; import { cn } from '@/utils'; -import { motion, useAnimationControls } from 'framer-motion'; -import { color } from '@/system/token/color'; -import { LogoLeaf } from './LogoLeaf'; +import { motion } from 'framer-motion'; import Image from 'next/image'; -import { Icon } from '@/system/components'; -import { SwitchCase } from '@/system/utils/SwitchCase'; +import { useEffect, useState } from 'react'; import { usePutOnboardStatus } from '../../apis/usePutOnboardStatus'; +import { Logo } from './Logo'; +import { LogoLeaf } from './LogoLeaf'; const MAX_INDEX = 3; @@ -58,7 +58,7 @@ export function OnboardingDialog({}: OnboardingDialogProps) { if (step !== 'finish') { return; } - console.log('!!!'); + setOpen(false); putOnboardStatus(); }}> diff --git a/src/app/(sidebar)/(my-info)/page.tsx b/src/app/(sidebar)/(my-info)/page.tsx index 200d5a9..f3c1fa3 100644 --- a/src/app/(sidebar)/(my-info)/page.tsx +++ b/src/app/(sidebar)/(my-info)/page.tsx @@ -17,6 +17,7 @@ import { Onboarding } from './containers/Onboarding/Onboarding'; import { useRouter, useSearchParams } from 'next/navigation'; import { useGetOnboardStatus } from './apis/useGetOnboadStatus'; + const getType = (typeParam: string | null) => { if (typeParam && INFO_TYPES.includes(typeParam as InfoType)) { return typeParam as InfoType; @@ -32,8 +33,10 @@ export default function MyInfo() { const [showHeader, setShowHeader] = useState(false); const headerRef = useRef(null); + const { isOnboardComplete } = useGetOnboardStatus().data; + const typeParam = searchParams.get('type'); const currentCardType = getType(typeParam); @@ -45,6 +48,8 @@ export default function MyInfo() { useScroll(headerRef, (y) => setShowHeader(y > 192)); + const params = useSearchParams(); + return (
@@ -133,6 +138,7 @@ export default function MyInfo() { pendingFallback={}> + diff --git a/src/app/(sidebar)/my-recruit/[id]/api/useGetCategoryTags.ts b/src/app/(sidebar)/my-recruit/[id]/api/useGetCategoryTags.ts new file mode 100644 index 0000000..1055fcd --- /dev/null +++ b/src/app/(sidebar)/my-recruit/[id]/api/useGetCategoryTags.ts @@ -0,0 +1,24 @@ +import { http } from '@/apis/http'; +import { TagType } from '@/types'; +import { useSuspenseQuery } from '@tanstack/react-query'; + +export const GET_CATEGORY_TAGS = 'get-category-tags'; + +const getCategoryTags = ({ recruitId, type }: { recruitId: string; type: string }) => { + return http.get({ + url: `recruits/${recruitId}/tags`, + params: { type }, + }); +}; + +export function useGetCategoryTags({ recruitId, type }: { recruitId: string; type: string }) { + const result = useSuspenseQuery({ + queryKey: [GET_CATEGORY_TAGS, recruitId, type], + queryFn: async () => { + const res = await getCategoryTags({ recruitId, type }); + return res.data; + }, + }); + + return result; +} diff --git a/src/app/(sidebar)/my-recruit/[id]/api/usePatchStatus.ts b/src/app/(sidebar)/my-recruit/[id]/api/usePatchStatus.ts index d552318..c6e6983 100644 --- a/src/app/(sidebar)/my-recruit/[id]/api/usePatchStatus.ts +++ b/src/app/(sidebar)/my-recruit/[id]/api/usePatchStatus.ts @@ -27,8 +27,6 @@ export const usePatchStatus = () => { mutationFn: async ({ newStatus, id }: PatchStatusProps) => { const res = await patchStatus({ newStatus, id }); - console.log(res); - return res.data; }, onSuccess: () => { diff --git a/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx b/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx index b21467d..75b4fd2 100644 --- a/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx +++ b/src/app/(sidebar)/my-recruit/[id]/components/DetailContent.tsx @@ -3,7 +3,8 @@ import { InfoCard } from '@/components/InfoCard'; import { TouchButton } from '@/components/TouchButton'; import { Droppable } from '@/lib/dnd-kit/Droppable'; -import { Icon } from '@/system/components'; +import { Icon, Text } from '@/system/components'; +import { If } from '@/system/utils/If'; import { InfoCardType } from '@/types'; import { RECRUIT_TYPES, RecruitType } from '@/types/recruit'; import { cn } from '@/utils/tailwind-util'; @@ -11,6 +12,7 @@ import { useDndContext } from '@dnd-kit/core'; import { motion } from 'framer-motion'; import { useEffect, useRef, useState } from 'react'; import { useGetRecruitCardCount } from '../api/useGetCardCount'; +import { useGetCategoryTags } from '../api/useGetCategoryTags'; import { useGetRecruitCards } from '../api/useGetRecruitCards'; import { AddRecruitCardDialog } from './AddRecruitCardDialog'; import TagList from './TagList'; @@ -25,6 +27,7 @@ export function DetailContent({ recruitId }: { recruitId: string }) { const { data: cardCount } = useGetRecruitCardCount(recruitId); const { data: cardList } = useGetRecruitCards({ id: recruitId, type: currentOption, tagIds: selectedTags }); + const { data: tagsData } = useGetCategoryTags({ recruitId, type: currentOption }); const filteredCardList = selectedTags.length > 0 @@ -64,32 +67,31 @@ export function DetailContent({ recruitId }: { recruitId: string }) { const copyCardSelected = option === '내_정보_복사' && active; return ( - - setCurrentOption(option)}> +
setCurrentOption(option)}> -
- {option.replace(/_/g, ' ')} -
-
- {cardCount?.[option] || 0} -
- - + 'text-[18px] font-semibold ', + isActive ? 'text-neutral-80' : 'text-neutral-10', + copyCardSelected && 'text-mint-40', + )}> + {option.replace(/_/g, ' ')} +
+
+ {cardCount?.[option] || 0} +
+ ); })}
@@ -107,42 +109,55 @@ export function DetailContent({ recruitId }: { recruitId: string }) {
- + 0}> + + -
- {filteredCardList && filteredCardList.length > 0 ? ( -
    - {filteredCardList.map((info: InfoCardType) => ( -
  • - -
    • - ))} - {scrollPosition > 0 && ( - - - - TOP - - - )} -
- ) : ( -
- -

아직 생성된 정보 카드가 없어요!

-
- )} -
+ +
+ {filteredCardList && filteredCardList.length > 0 ? ( +
    + {filteredCardList.map((info: InfoCardType) => ( +
  • + +
    • + ))} + {scrollPosition > 0 && ( + + + + TOP + + + + 내 정보 가져오기 + + + + )} +
+ ) : ( +
+ +

아직 생성된 정보 카드가 없어요!

+
+ )} +
+ ); } diff --git a/src/app/(sidebar)/my-recruit/[id]/components/TagList.tsx b/src/app/(sidebar)/my-recruit/[id]/components/TagList.tsx index e30030f..1bbc18a 100644 --- a/src/app/(sidebar)/my-recruit/[id]/components/TagList.tsx +++ b/src/app/(sidebar)/my-recruit/[id]/components/TagList.tsx @@ -1,41 +1,45 @@ import { TagSelector } from '@/app/(sidebar)/write/[id]/components/TagSelector/TagSelector'; import { TouchButton } from '@/components/TouchButton'; -import { Button, ButtonProps, Icon } from '@/system/components'; +import { Button, ButtonProps, Icon, Text } from '@/system/components'; import { color } from '@/system/token/color'; import { If } from '@/system/utils/If'; import { StrictPropsWithChildren, TagType } from '@/types'; import { cn } from '@/utils'; import { motion } from 'framer-motion'; -import { useRef, useState } from 'react'; -import { useGetAllTags } from '../api/useGetAllTag'; +import { useEffect, useRef, useState } from 'react'; import { TAG_TYPE_COLOR, colorStyle } from '../mocks'; interface TagListProps { + tagsData: TagType[]; selectedTags: number[]; setSelectedTags: (tags: number[]) => void; } -export default function TagList({ selectedTags, setSelectedTags }: TagListProps) { - const { data: tagsData } = useGetAllTags(); - +export default function TagList({ selectedTags, setSelectedTags, tagsData }: TagListProps) { const tagContainerRef = useRef(null); const [tags, setTags] = useState(tagsData || []); const [viewAllTags, setViewAllTags] = useState(false); const [isOverflowing, setIsOverflowing] = useState(true); - const handleTagClick = (id: number) => { const clickedTag = tags.find((tag) => tag.id === id); if (clickedTag) { - const updatedTags = [clickedTag, ...tags.filter((tag) => tag.id !== id)]; - setTags(updatedTags); + let updatedTags; if (selectedTags.includes(id)) { setSelectedTags(selectedTags.filter((selectedId) => selectedId !== id)); + + updatedTags = [ + ...tags.filter((tag) => selectedTags.includes(tag.id) && tag.id !== id), + ...tags.filter((tag) => !selectedTags.includes(tag.id) || tag.id === id), + ]; } else { setSelectedTags([...selectedTags, id]); + updatedTags = [clickedTag, ...tags.filter((tag) => tag.id !== id)]; } + + setTags(updatedTags); } }; @@ -44,11 +48,16 @@ export default function TagList({ selectedTags, setSelectedTags }: TagListProps) setViewAllTags(false); }; + useEffect(() => { + setTags(tagsData || []); + }, [tagsData]); + return ( -
+
+ {viewAllTags ? (

원하는 태그로 필터링 해보세요

- + + + 태그 필터 초기화 + + +
@@ -82,30 +103,47 @@ export default function TagList({ selectedTags, setSelectedTags }: TagListProps) ) : ( -
+ <> {selectedTags.length > 0 && ( - + + + + 태그 필터 초기화 + + )} - {tags && - tags.map((tag) => ( - handleTagClick(tag.id)}> - {tag.name} - - ))} - - - -
+ +
+ {tags && + tags.map((tag) => ( + handleTagClick(tag.id)}> + {tag.name} + + ))} + + + +
+ )} @@ -113,14 +151,24 @@ export default function TagList({ selectedTags, setSelectedTags }: TagListProps) setViewAllTags((prev) => !prev)} - className="p-[10px] rounded-full bg-white border-[1px] border-neutral-10"> + className="relative p-[10px] mr-14 rounded-full bg-white border-[1px] border-neutral-10 max-h-[42px]"> + + + + 모든 태그 보기 + +
diff --git a/src/app/(sidebar)/my-recruit/[id]/components/TextBubble.tsx b/src/app/(sidebar)/my-recruit/[id]/components/TextBubble.tsx index 28c5b6c..7c581fd 100644 --- a/src/app/(sidebar)/my-recruit/[id]/components/TextBubble.tsx +++ b/src/app/(sidebar)/my-recruit/[id]/components/TextBubble.tsx @@ -28,7 +28,6 @@ export default function TextBubble({ setLink(''); setIsLinked(false); } - console.log('siteUrl', Boolean(siteUrl)); }, [siteUrl]); const handleLinkConfirm = () => { diff --git a/src/app/(sidebar)/my-recruit/[id]/page.tsx b/src/app/(sidebar)/my-recruit/[id]/page.tsx index e968c9b..3d768fd 100644 --- a/src/app/(sidebar)/my-recruit/[id]/page.tsx +++ b/src/app/(sidebar)/my-recruit/[id]/page.tsx @@ -1,15 +1,15 @@ 'use client'; import { InfoCard } from '@/components/InfoCard'; -import { AsyncBoundaryWithQuery } from '@/lib'; +import { TouchButton } from '@/components/TouchButton'; import { DndContextWithOverlay } from '@/lib/dnd-kit/DndContextWithOverlay'; -import { Dropdown, Icon } from '@/system/components'; +import { Dropdown, Icon, Text } from '@/system/components'; import { color } from '@/system/token/color'; import { cn } from '@/utils'; import { DragEndEvent } from '@dnd-kit/core'; -import { AnimatePresence } from 'framer-motion'; +import { AnimatePresence, motion } from 'framer-motion'; import { useRouter } from 'next/navigation'; -import { useState } from 'react'; +import { Suspense, useState } from 'react'; import { useDeleteRecruit } from '../api/useDeleteRecruit'; import { usePostCardToRecruit } from '../api/usePostCardToRecruit'; import { RightSidebar } from '../containers/RightSidebar/RightSidebar'; @@ -40,58 +40,82 @@ export default function CompanyDetail({ params: { id: recruitId } }: { params: { }; return ( - - -
-
-
+ +
+
+
+ + -
- - -
- -
- - - - - - +
+ + + + + + + 공고 일정 등록 + + + + + + + + + + setSidebarOpened(!sidebarOpened)} + className="relative p-[12px] rounded-[6px] hover:bg-neutral-3 border border-neutral-10 bg-white max-h-[42px]" + aria-label="copy button"> + + + + 내 정보 가져오기 + + + - - -
- + + +
+ +
+ + + +
+ +
삭제하기
- - - -
- -
삭제하기
-
- - - -
+ + +
-
- - {sidebarOpened ? setSidebarOpened(false)} /> : null} - + + + +
- - + + {sidebarOpened ? setSidebarOpened(false)} /> : null} + +
+ ); } diff --git a/src/app/(sidebar)/my-recruit/api/usePostCardToRecruit.ts b/src/app/(sidebar)/my-recruit/api/usePostCardToRecruit.ts index d7b36ad..532e07a 100644 --- a/src/app/(sidebar)/my-recruit/api/usePostCardToRecruit.ts +++ b/src/app/(sidebar)/my-recruit/api/usePostCardToRecruit.ts @@ -2,6 +2,7 @@ import { http } from '@/apis/http'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { GET_RECRUIT_CARD_COUNT } from '../[id]/api/useGetCardCount'; import { GET_RECRUIT_BY_ID } from '../[id]/api/useGetRecruitById'; +import { GET_RECRUIT_CARD_ID } from '../[id]/api/useGetRecruitCards'; interface Request { recruitId: number; @@ -23,6 +24,7 @@ export function usePostCardToRecruit() { onSuccess: () => { queryClient.invalidateQueries({ queryKey: [GET_RECRUIT_CARD_COUNT] }); queryClient.invalidateQueries({ queryKey: [GET_RECRUIT_BY_ID] }); + queryClient.invalidateQueries({ queryKey: [GET_RECRUIT_CARD_ID] }); }, }); diff --git a/src/app/(sidebar)/write/[id]/api/usePostMemo.ts b/src/app/(sidebar)/write/[id]/api/usePostMemo.ts index f3ec46c..a66c3cf 100644 --- a/src/app/(sidebar)/write/[id]/api/usePostMemo.ts +++ b/src/app/(sidebar)/write/[id]/api/usePostMemo.ts @@ -1,5 +1,5 @@ import { http } from '@/apis/http'; -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; export const postMemo = (cardId: number, content: string) => http.post({ @@ -8,8 +8,13 @@ export const postMemo = (cardId: number, content: string) => }); export const usePostMemo = (cardId: number) => { + const queryClient = useQueryClient(); + return useMutation({ mutationKey: ['post-memo', cardId], mutationFn: (content: string) => postMemo(cardId, content), + onSuccess: async () => { + await queryClient.invalidateQueries({ queryKey: ['get-memos'] }); + }, }); }; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c49761a..d247586 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,11 +1,11 @@ -import type { Metadata } from 'next'; import { QueryProvider } from '@/lib'; +import { GoogleProvider } from '@/lib/GoogleProvider'; import '@/styles/globals.css'; import '@/styles/memo.css'; import { cn } from '@/utils'; -import { Suspense } from 'react'; -import { GoogleProvider } from '@/lib/GoogleProvider'; +import type { Metadata } from 'next'; import localFont from 'next/font/local'; +import { Suspense } from 'react'; const Pretendard = localFont({ src: './fonts/PretendardVariable.woff2', diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 3dae992..52a3693 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,10 +1,10 @@ 'use client'; +import { Redirect } from '@/components/Redirect'; import { useFunnel } from '@/system/components/Funnel/useFunnel'; +import { getCookie } from 'cookies-next'; import { Login } from './components/Login'; -import { Redirect } from '@/components/Redirect'; import Select from './components/Select'; -import { getCookie } from 'cookies-next'; import { ACCESS_TOKEN, JOB_SELECTION, SELECT } from './constants/token'; export default function Page() { diff --git a/src/container/Sidebar/Sidebar.tsx b/src/container/Sidebar/Sidebar.tsx index ae7ac9c..efc172b 100644 --- a/src/container/Sidebar/Sidebar.tsx +++ b/src/container/Sidebar/Sidebar.tsx @@ -1,21 +1,22 @@ 'use client'; +import { useGetCardTypeCount } from '@/app/(sidebar)/(my-info)/apis/useGetCardTypeCount'; +import { useGetRecruitTitles } from '@/app/(sidebar)/my-recruit/api/useGetRecruitTitles'; import { Logo } from '@/components/Logo'; +import { TouchButton } from '@/components/TouchButton'; import { SidebarButton } from '@/container/Sidebar/SidebarButton'; import { MY_INFO_PATH, MY_RECRUIT_PATH } from '@/route'; import { Icon } from '@/system/components'; +import { Dialog } from '@/system/components/Dialog/ShadcnDialog'; +import { If } from '@/system/utils/If'; +import { Spacing } from '@/system/utils/Spacing'; +import { INFO_TYPES, InfoType } from '@/types'; import { cn } from '@/utils'; +import { deleteCookie } from 'cookies-next'; +import { motion } from 'framer-motion'; import { usePathname, useRouter } from 'next/navigation'; import { PropsWithChildren, useState } from 'react'; import { Collapsible } from './Collapsible/Collapsible'; -import { deleteCookie } from 'cookies-next'; -import { INFO_TYPES, InfoType } from '@/types'; -import { TouchButton } from '@/components/TouchButton'; -import { Spacing } from '@/system/utils/Spacing'; -import { useGetCardTypeCount } from '@/app/(sidebar)/(my-info)/apis/useGetCardTypeCount'; -import { useGetRecruitTitles } from '@/app/(sidebar)/my-recruit/api/useGetRecruitTitles'; -import { If } from '@/system/utils/If'; -import { motion } from 'framer-motion'; export function Sidebar() { const router = useRouter(); @@ -69,7 +70,17 @@ export function Sidebar() {
- + + + + + +
+ +

아직 준비 중이에요!

+
+ + {/* */}
diff --git a/src/system/components/Dialog/Dialog.tsx b/src/system/components/Dialog/Dialog.tsx index a95fee7..a8effcd 100644 --- a/src/system/components/Dialog/Dialog.tsx +++ b/src/system/components/Dialog/Dialog.tsx @@ -1,7 +1,7 @@ 'use client'; -import * as React from 'react'; import * as DialogPrimitive from '@radix-ui/react-dialog'; +import * as React from 'react'; import { cn } from '@/utils'; import { Icon } from '..'; @@ -87,13 +87,13 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName; export { Dialog, - DialogPortal, - DialogOverlay, DialogClose, - DialogTrigger, DialogContent, - DialogHeader, + DialogDescription, DialogFooter, + DialogHeader, + DialogOverlay, + DialogPortal, DialogTitle, - DialogDescription, + DialogTrigger, }; diff --git a/src/system/components/Dialog/ShadcnDialog.tsx b/src/system/components/Dialog/ShadcnDialog.tsx index 1ba3b53..c5b9613 100644 --- a/src/system/components/Dialog/ShadcnDialog.tsx +++ b/src/system/components/Dialog/ShadcnDialog.tsx @@ -1,10 +1,11 @@ 'use client'; -import * as React from 'react'; import * as DialogPrimitive from '@radix-ui/react-dialog'; -import { X } from 'lucide-react'; +// import { X } from 'lucide-react'; +import * as React from 'react'; import { cn } from '@/utils/tailwind-util'; +import { Icon } from '..'; const DialogTrigger = DialogPrimitive.Trigger; @@ -41,8 +42,8 @@ const DialogContent = React.forwardRef< )} {...props}> {children} - - + + Close diff --git a/src/system/components/Icon/Icon.tsx b/src/system/components/Icon/Icon.tsx index a923486..ad52fd5 100644 --- a/src/system/components/Icon/Icon.tsx +++ b/src/system/components/Icon/Icon.tsx @@ -3,6 +3,7 @@ import { RemoveMemo } from '@/system/components/Icon/SVG/RemoveMemo'; import { SubmitArrow } from '@/system/components/Icon/SVG/SubmitArrow'; import type { IconBaseType } from '@/system/components/Icon/SVG/type'; import { Add } from './SVG/Add'; +import { AnnouncementFolder } from './SVG/AnnouncementFolder'; import { ArrowUp } from './SVG/ArrowUp'; import { Bell } from './SVG/Bell'; import { Calendar } from './SVG/Calendar'; @@ -10,11 +11,14 @@ import { CalendarFill } from './SVG/CalendarFill'; import { Check } from './SVG/Check'; import { Close } from './SVG/Close'; import { Clover } from './SVG/Clover'; +import { CodingSignUp } from './SVG/CodingSignUp'; import { Copy } from './SVG/Copy'; import { Delete } from './SVG/Delete'; +import { DesignSignUp } from './SVG/DesignSignUp'; import { Division } from './SVG/Division'; import { Down } from './SVG/Down'; import { DownChevron } from './SVG/DownChevron'; +import { Downloads } from './SVG/Downloads'; import { Empty } from './SVG/Empty'; import { FilledMemo } from './SVG/FilledMemo'; import { Folder } from './SVG/Folder'; @@ -25,6 +29,7 @@ import { Link } from './SVG/Link'; import { LogoOnly } from './SVG/LogoOnly'; import { Logout } from './SVG/Logout'; import { Memo } from './SVG/Memo'; +import { MemoColored } from './SVG/MemoColored'; import { More } from './SVG/More'; import { Pip } from './SVG/Pip'; import { Profile } from './SVG/Profile'; @@ -41,13 +46,9 @@ import { ToLeft } from './SVG/ToLeft'; import { Trash } from './SVG/Trash'; import { Unlink } from './SVG/Unlink'; import { Up } from './SVG/Up'; +import Warning from './SVG/Warning'; import { WorkFill } from './SVG/WorkFill'; -import { DesignSignUp } from './SVG/DesignSignUp'; -import { CodingSignUp } from './SVG/CodingSignUp'; -import { MemoColored } from './SVG/MemoColored'; -import { Downloads } from './SVG/Downloads'; import { X } from './SVG/X'; -import { AnnouncementFolder } from './SVG/AnnouncementFolder'; const iconMap = { bell: Bell, @@ -99,6 +100,7 @@ const iconMap = { profileFill: ProfileFill, folder: Folder, announcementFolder: AnnouncementFolder, + warning: Warning, } as const; export interface IconProps extends IconBaseType { diff --git a/src/system/components/Icon/SVG/Warning.tsx b/src/system/components/Icon/SVG/Warning.tsx new file mode 100644 index 0000000..74a5542 --- /dev/null +++ b/src/system/components/Icon/SVG/Warning.tsx @@ -0,0 +1,14 @@ +import { IconBaseType } from './type'; + +export default function Warning({ size, color }: IconBaseType) { + return ( + + + + ); +}