[REFACTOR] Button에서 Icon 관련 props 분리 (#211)

dnd-side-project · Apr 3, 2024 · c83b205 · c83b205
1 parent 4933630
commit c83b205
Show file tree

Hide file tree

Showing 19 changed files with 231 additions and 85 deletions.
diff --git a/src/app/mypage/_components/MyVote.tsx b/src/app/mypage/_components/MyVote.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { useRef } from 'react';
 
 import { Button } from '@/components/common/button';
+import { Icon } from '@/components/common/icon';
 import { Typography } from '@/components/common/typography';
 import { VoteCard } from '@/components/features/vote';
 import { ConfirmBottomSheet, EmptyVote, OptionBottomSheet } from '@/components/shared';
@@ -44,8 +45,7 @@ const MyVote = () => {
                 <Button
                   variant="empty"
                   iconOnly
-                  icon="more"
-                  iconSize={16}
+                  Icon={<Icon icon="more" size={16} color="gray-300" />}
                   className="!p-0"
                   onClick={() => {
                     onOpenSheet('selectOption');

diff --git a/src/app/test/result/[id]/_components/ShareBox.tsx b/src/app/test/result/[id]/_components/ShareBox.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from '@/components/common/button';
+import { Icon } from '@/components/common/icon';
 import { Typography } from '@/components/common/typography';
 import { KakaoShareButton } from '@/components/shared';
 import { shareLink } from '@/utils/share';
@@ -19,10 +20,9 @@ const ShareBox = () => {
         <KakaoShareButton />
         <Button
           width="fit"
-          icon="link"
+          Icon={<Icon icon="link" color="white" />}
           iconOnly
           className="rounded-[100%] bg-gray-600"
-          iconColor="white"
           onClick={handleCopyClipboard}
         />
       </div>

diff --git a/src/app/vote/[slug]/_component/VoteDetail.tsx b/src/app/vote/[slug]/_component/VoteDetail.tsx
@@ -3,6 +3,7 @@
 import { notFound } from 'next/navigation';
 
 import { Button } from '@/components/common/button';
+import { Icon } from '@/components/common/icon';
 import { Spinner } from '@/components/common/spinner';
 import { Typography } from '@/components/common/typography';
 import { VoteCard } from '@/components/features/vote';
@@ -60,7 +61,12 @@ const VoteDetail = ({ voteId }: Props) => {
               likeCount={data.likes}
               onClick={() => toggleLike({ voteId })}
             />
-            <Button iconOnly icon="share" variant="empty" className="!p-0" />
+            <Button
+              iconOnly
+              Icon={<Icon icon="share" color="gray-300" />}
+              variant="empty"
+              className="!p-0"
+            />
           </div>
         </>
       )}

diff --git a/src/app/vote/[slug]/_component/VoteExtraDetail.tsx b/src/app/vote/[slug]/_component/VoteExtraDetail.tsx
@@ -3,6 +3,7 @@
 import { useRouter } from 'next/navigation';
 
 import { Button } from '@/components/common/button';
+import { Icon } from '@/components/common/icon';
 import { Typography } from '@/components/common/typography';
 import { ConfirmBottomSheet, OptionBottomSheet } from '@/components/shared';
 import Profile from '@/components/shared/profile/Profile';
@@ -41,7 +42,7 @@ const VoteExtraDetail = ({ author, views, category, voteId }: Props) => {
               <Button
                 variant="empty"
                 iconOnly
-                icon="more"
+                Icon={<Icon icon="more" color="gray-300" />}
                 className="!p-0"
                 onClick={() => onOpenSheet('replyOption')}
                 disabled={isPending}

diff --git a/src/app/vote/_component/VoteContents.tsx b/src/app/vote/_component/VoteContents.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 
 import { Button } from '@/components/common/button';
+import { Icon } from '@/components/common/icon';
 import { Spinner } from '@/components/common/spinner';
 import { VoteCard, VoteItem } from '@/components/features/vote';
 import { EmptyVote, EndObserverList } from '@/components/shared';
@@ -163,10 +164,9 @@ const VoteContents = () => {
           <Link href={'/vote/create'}>
             <Button
               variant="accent"
-              icon="pencil"
+              Icon={<Icon icon="pencil" color="white" />}
               iconOnly
               className=" h-[56px] w-xl rounded-[100%] bg-primary-800"
-              iconColor="white"
             />
           </Link>
         </>

diff --git a/src/app/vote/create/_components/CreateVoteForm.tsx b/src/app/vote/create/_components/CreateVoteForm.tsx
@@ -8,6 +8,7 @@ import { z } from 'zod';
 
 import { Button } from '@/components/common/button';
 import { Divider } from '@/components/common/divider';
+import { Icon } from '@/components/common/icon';
 import { Textarea as ContentInput } from '@/components/common/textarea';
 import { Typography } from '@/components/common/typography';
 import { Header } from '@/components/layout/header';
@@ -61,11 +62,9 @@ const CreateVoteForm = () => {
     <FormProvider {...methods}>
       <Header className="z-auto bg-white">
         <Button
-          icon="x"
           iconOnly
+          Icon={<Icon icon="x" color="gray-1000" size={15} />}
           variant="empty"
-          iconColor="gray-1000"
-          iconSize={15}
           className="!p-0"
           onClick={() => router.back()}
         />

diff --git a/src/app/vote/create/_components/VoteDateForm.tsx b/src/app/vote/create/_components/VoteDateForm.tsx
@@ -1,6 +1,7 @@
 import dayjs from 'dayjs';
 
 import { Button } from '@/components/common/button';
+import { Icon } from '@/components/common/icon';
 import { Range } from '@/types/util';
 import { convertNumToDay } from '@/utils/dates';
 
@@ -15,7 +16,12 @@ const VoteDateForm = () => {
 
   return (
     <section>
-      <Button icon="clock" iconSize={18} variant="empty" width="full" className="px-0">
+      <Button
+        Icon={<Icon icon="clock" size={18} color="gray-300" />}
+        variant="empty"
+        width="full"
+        className="px-0"
+      >
         <div className="flex grow items-center justify-between font-normal">
           {/* FIXME: 모달 디자인 나오면 날짜 선택 기능 추가하기 (현재는 기본 7일, 변경 불가)  */}
           <span className="text-sm text-gray-300">종료일</span>

diff --git a/src/app/vote/create/_components/VoteItemForm.tsx b/src/app/vote/create/_components/VoteItemForm.tsx
@@ -31,8 +31,12 @@ const VoteItemForm = () => {
             <Button
               variant="empty"
               iconOnly
-              icon="remove"
-              iconColor={fields.length <= MIN_VOTE_COUNT ? 'gray-100' : 'gray-300'}
+              Icon={
+                <Icon
+                  icon="remove"
+                  color={fields.length <= MIN_VOTE_COUNT ? 'gray-100' : 'gray-300'}
+                />
+              }
               className="!p-0"
               disabled={fields.length <= MIN_VOTE_COUNT}
               onClick={() => remove(index)}
@@ -50,11 +54,15 @@ const VoteItemForm = () => {
         ))}
       </div>
       <Button
-        icon="add"
+        Icon={
+          <Icon
+            icon="add"
+            size={14}
+            color={fields.length >= MAX_VOTE_COUNT ? 'gray-400' : 'gray-1000'}
+          />
+        }
         width="full"
         variant="secondary"
-        iconColor={fields.length >= MAX_VOTE_COUNT ? 'gray-400' : 'gray-1000'}
-        iconSize={14}
         className="text-sm"
         onClick={() => append({ content: '', img: '' })}
         disabled={fields.length >= MAX_VOTE_COUNT}