Merge pull request #54 from dormitoryFamilies/refactor/button-component

[#53] 버튼 컴포넌트 대규모 리팩토링

Author: rusia9217

dorm-front/src/app/(main)/board/[id]/page.tsx

@@ -23,9 +23,9 @@ import PostDetailContent from "@/components/board/PostDetailContent";
 import Profile from "@/components/board/Profile";
 import RecruitmentStatusChangeModal from "@/components/board/RecruitmentStatusChangeModal";
 import ReplyCommentDeleteMenu from "@/components/board/ReplyCommentDeleteMenu";
-import Button from "@/components/common/Button";
 import Header from "@/components/common/Header";
 import ProfileModal from "@/components/common/ProfileModal";
+import Tag from "@/components/common/Tag";
 import useGetArticleDetail from "@/lib/hooks/useGetArticleDetail";
 import useGetArticleDetailComments from "@/lib/hooks/useGetArticleDetailComments";
 import { selectedDormitory, selectedMemberIdAtom } from "@/recoil/atom";
@@ -159,14 +159,14 @@ const BoardDetail = () => {
           <div className="flex flex-col m-5 gap-y-4">
             {/*태그*/}
             <div className="flex gap-x-2">
-              <div className={"flex items-center gap-x-1 board-type-tag py-1 px-3 rounded-full text-h5"}>
+              <Tag className={"bg-secondary-tag"}>
                 {renderBoardTypeIcon(articleDetail?.data.boardType)}
                 {articleDetail?.data.boardType}
-              </div>
+              </Tag>
               {articleDetail?.data.status == "모집중" ? (
-                <Button className={"recruiting-tag"}>모집중</Button>
+                <Tag className={"bg-blue-tag"}>모집중</Tag>
               ) : (
-                <Button className={"recruitment-completed-tag"}>모집완료</Button>
+                <Tag className={"bg-gray0-tag"}>모집완료</Tag>
               )}
             </div>
 
@@ -236,7 +236,7 @@ const BoardDetail = () => {
               );
             })}
           </div>
-          <div className={"h-[110px]"} />
+          <div className={"h-[130px]"} />
           {/* 댓글 작성, 찜하기 */}
           {isArticleFavoritesListClicked ? null : (
             <div>

dorm-front/src/app/(main)/board/page.tsx

@@ -12,7 +12,6 @@ import ArticleSortFilter from "@/components/board/ArticleSortFilter";
 import ArticleStatusFilter from "@/components/board/ArticleStatusFilter";
 import FilterMenu from "@/components/board/FilterMenu";
 import Post from "@/components/board/Post";
-import WriteButton from "@/components/board/WriteButton";
 import Button from "@/components/common/Button";
 import Header from "@/components/common/Header";
 import NavBar from "@/components/common/NavBar";
@@ -79,6 +78,10 @@ const Board = () => {
     }
   };
 
+  const onMove = () => {
+    router.push("/board/write");
+  };
+
   return (
     <div className="relative">
       <Header
@@ -94,9 +97,9 @@ const Board = () => {
       {/* filter */}
       <div className="relative flex gap-x-2 mx-5 my-3">
         <Button
-          className={"not-click-filter"}
+          className={"border-gray1-button"}
           onClick={() => setIsSortingFilterClick(!isSortingFilterClick)}
-          Icon={isSortingFilterClick ? DropUpIcon : DropDownIcon}>
+          RightIcon={isSortingFilterClick ? DropUpIcon : DropDownIcon}>
           {formatSortContent()}
         </Button>
         {isSortingFilterClick ? (
@@ -107,9 +110,9 @@ const Board = () => {
           />
         ) : null}
         <Button
-          className={"not-click-filter"}
+          className={"border-gray1-button"}
           onClick={() => setIsStatusFilterClick(!isStatusFilterClick)}
-          Icon={isStatusFilterClick ? DropUpIcon : DropDownIcon}>
+          RightIcon={isStatusFilterClick ? DropUpIcon : DropDownIcon}>
           {selectedStatusType}
         </Button>
         {isStatusFilterClick ? (
@@ -166,22 +169,38 @@ const Board = () => {
                         status={article.status}
                         wishCount={article.wishCount}
                         viewCount={article.viewCount}
-                        thumbnailUrl={"/unnimm.jpg"}></Post>
+                        thumbnailUrl={article.thumbnailUrl}></Post>
                     </div>
                   );
                 });
               })
             : null}
         </div>
       </div>
-      <WriteButton />
+      <Button
+        className={"bg-primary-button"}
+        secondClassName={"fixed bottom-[84px] right-5 z-10 text-h4 gap-x-2"}
+        LeftIcon={WriteButtonIcon}>
+        글쓰기
+      </Button>
       <div className={"h-[90px]"} />
-      <NavBar></NavBar>
+      <NavBar />
     </div>
   );
 };
 export default Board;
 
+const WriteButtonIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={16} height={16} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.81 15.864a.82.82 0 01-.813-.813V8.857H.814A.82.82 0 010 8.043a.82.82 0 01.814-.813h6.183V.95A.82.82 0 017.81.134a.82.82 0 01.814.814v6.28h3.037a.82.82 0 01.814.814.82.82 0 01-.814.814H8.624v6.194a.82.82 0 01-.814.813zM16 8.044a1.085 1.085 0 11-2.17 0 1.085 1.085 0 012.17 0z"
+      fill="#fff"
+    />
+  </svg>
+);
+
 const DropDownIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={10} height={6} fill="none" {...props}>
     <path

dorm-front/src/app/(main)/chat/[roomId]/page.tsx

@@ -16,6 +16,7 @@ import useChatMessages from "@/lib/hooks/useChatMessages";
 import useMyMemberId from "@/lib/hooks/useMyMemberId";
 import useUserProfile from "@/lib/hooks/useUserProfile";
 import { chatRoomUUIDAtom, memberIdAtom, messageAtom } from "@/recoil/chat/atom";
+import Button from "@/components/common/Button";
 
 const ChatRoom = () => {
   const router = useRouter();
@@ -229,11 +230,11 @@ const ChatRoom = () => {
               setMessage(e.target.value);
             }}
             placeholder={"메시지 보내기"}
-            className={"ml-3 bg-gray0 placeholder:text-gray4 placeholder:text-h5 outline-none"}
+            className={"ml-3 bg-gray0 placeholder:text-gray4 placeholder:text-h5 outline-none w-[75%]"}
           />
-          <button type={"submit"} className={"py-2 px-4 text-white bg-primary rounded-full"}>
+          <Button type={"submit"} className={"bg-primary-button"}>
             전송
-          </button>
+          </Button>
         </div>
       </div>
     </form>

dorm-front/src/app/(main)/chat/page.tsx

@@ -12,6 +12,7 @@ import ProfileModal from "@/components/common/ProfileModal";
 import useChatRooms from "@/lib/hooks/useChatRooms";
 import useMyFollowings from "@/lib/hooks/useMyFollowings";
 import { chatRoomUUIDAtom, memberIdAtom } from "@/recoil/chat/atom";
+import Button from "@/components/common/Button";
 const Chat = () => {
   const router = useRouter();
   const { chatRooms, setChatRoomsSize } = useChatRooms();
@@ -54,6 +55,10 @@ const Chat = () => {
     return `${period} ${hours}:${formattedMinutes}`;
   };
 
+  const navigateToMypageFollow = () => {
+    router.push("/mypage/follow");
+  };
+
   return (
     <>
       {isProfileOpen ? <ProfileModal memberId={memberIdState} setIsOpenProfileModal={setIsProfileOpen} /> : null}
@@ -73,14 +78,9 @@ const Chat = () => {
         <section className={"py-3 px-5 border-b-[1px] border-gray1"}>
           <div className={"flex justify-between"}>
             <div className={"text-h3 font-semibold"}>팔로잉</div>
-            <button
-              onClick={() => {
-                router.push("/mypage/follow");
-              }}
-              className={"flex items-center gap-x-1 home-button"}>
+            <Button onClick={navigateToMypageFollow} className={"border-primaryMid-button"} RightIcon={MoveIcon}>
               전체보기
-              <MoveIcon />
-            </button>
+            </Button>
           </div>
 
           {/*팔로우*/}

dorm-front/src/app/(main)/chat/search/page.tsx

@@ -7,6 +7,7 @@ import { useRecoilState } from "recoil";
 
 import SearchInput from "@/components/chat/SearchInput";
 import SearchMenu from "@/components/chat/SearchMenu";
+import Button from "@/components/common/Button";
 import ProfileModal from "@/components/common/ProfileModal";
 import useDebounce from "@/hooks/useDebounce";
 import { getSearchChatMessage, getSearchChatRoom } from "@/lib/api/chat";
@@ -79,6 +80,18 @@ const ChatSearch = () => {
     return `${period} ${hours}:${formattedMinutes}`;
   };
 
+  const ChangeTypeFollowing = () => {
+    setType("팔로잉");
+  };
+
+  const ChangeTypeChatRoom = () => {
+    setType("채팅방");
+  };
+
+  const ChangeTypeMessage = () => {
+    setType("메시지");
+  };
+
   const renderSearchResults = (type: "전체" | "팔로잉" | "채팅방" | "메시지") => {
     switch (type) {
       case "전체":
@@ -87,16 +100,9 @@ const ChatSearch = () => {
             <section>
               <div className={"flex justify-between"}>
                 <div className={"text-h3 font-semibold"}>팔로잉</div>
-                <button
-                  className={
-                    "flex gap-x-1 text-h5 text-primaryMid rounded-full border border-primaryMid py-1 px-3 items-center"
-                  }
-                  onClick={() => {
-                    setType("팔로잉");
-                  }}>
+                <Button className={"border-primaryMid-button"} onClick={ChangeTypeFollowing} RightIcon={ArrowIcon}>
                   더보기
-                  <ArrowIcon />
-                </button>
+                </Button>
               </div>
               <div className={"overflow-x-scroll pt-[12px] flex flex-col gap-y-3"}>
                 <div className={"flex gap-x-3"}>
@@ -129,16 +135,9 @@ const ChatSearch = () => {
             <section>
               <div className={"flex justify-between"}>
                 <div className={"text-h3 font-semibold"}>채팅방</div>
-                <button
-                  className={
-                    "flex gap-x-1 text-h5 text-primaryMid rounded-full border border-primaryMid py-1 px-3 items-center"
-                  }
-                  onClick={() => {
-                    setType("채팅방");
-                  }}>
+                <Button className={"border-primaryMid-button"} RightIcon={ArrowIcon} onClick={ChangeTypeChatRoom}>
                   더보기
-                  <ArrowIcon />
-                </button>
+                </Button>
               </div>
               <div className={"mt-3"}>
                 {searchChatRoomResults?.map((searchChatRoomResult) => {
@@ -178,16 +177,9 @@ const ChatSearch = () => {
             <section>
               <div className={"flex justify-between"}>
                 <div className={"text-h3 font-semibold"}>메시지</div>
-                <button
-                  className={
-                    "flex gap-x-1 text-h5 text-primaryMid rounded-full border border-primaryMid py-1 px-3 items-center"
-                  }
-                  onClick={() => {
-                    setType("메시지");
-                  }}>
+                <Button RightIcon={ArrowIcon} className={"border-primaryMid-button"} onClick={ChangeTypeMessage}>
                   더보기
-                  <ArrowIcon />
-                </button>
+                </Button>
               </div>
               <div className={"mt-3"}>
                 {searchChatMessageResults.map((searchChatMessageResult) => {
@@ -227,16 +219,6 @@ const ChatSearch = () => {
             <section>
               <div className={"flex justify-between"}>
                 <div className={"text-h3 font-semibold"}>팔로잉</div>
-                <button
-                  className={
-                    "flex gap-x-1 text-h5 text-primaryMid rounded-full border border-primaryMid py-1 px-3 items-center"
-                  }
-                  onClick={() => {
-                    setType("팔로잉");
-                  }}>
-                  더보기
-                  <ArrowIcon />
-                </button>
               </div>
               <div className={"overflow-x-scroll pt-[12px] flex flex-col gap-y-3"}>
                 <div className={"flex gap-x-3"}>
@@ -318,16 +300,6 @@ const ChatSearch = () => {
             <section>
               <div className={"flex justify-between"}>
                 <div className={"text-h3 font-semibold"}>메시지</div>
-                <button
-                  className={
-                    "flex gap-x-1 text-h5 text-primaryMid rounded-full border border-primaryMid py-1 px-3 items-center"
-                  }
-                  onClick={() => {
-                    setType("메시지");
-                  }}>
-                  더보기
-                  <ArrowIcon />
-                </button>
               </div>
               <div className={"mt-3"}>
                 {searchChatMessageResults.map((searchChatMessageResult) => {