Merge branch 'main' of https://github.com/Team-Blitz-Steady/steady-cl…

…ient into style/#291/template
Team-Blitz-Steady · Nov 30, 2023 · e65ffcf · e65ffcf
2 parents 53a38d9 + 5101da9
commit e65ffcf
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 17 deletions.
diff --git a/src/app/(steady)/steady/detail/[id]/page.tsx b/src/app/(steady)/steady/detail/[id]/page.tsx
@@ -123,7 +123,10 @@ const SteadyDetailPage = ({ params }: { params: { id: string } }) => {
   return (
     <div className="max-sm:w-400 sm:w-450 md:w-600 lg:w-800 xl:w-1000">
       <div className="flex flex-col gap-20">
-        <button onClick={() => router.back()}>
+        <button
+          onClick={() => router.back()}
+          className="w-fit"
+        >
           <Icon
             name="arrow-left"
             size={30}
@@ -400,8 +403,9 @@ const SteadyDetailPage = ({ params }: { params: { id: string } }) => {
                       className="whitespace-nowrap"
                     >
                       <Badge
-                        color={"gray"}
+                        color={"indigo"}
                         size={"2"}
+                        radius={"full"}
                       >
                         {position.name}
                       </Badge>

diff --git a/src/app/(steady)/steady/manage/[id]/page.tsx b/src/app/(steady)/steady/manage/[id]/page.tsx
@@ -158,7 +158,7 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
               </Button>
             }
           >
-            <div className={cn("text-center text-18 font-light")}>
+            <div className={cn("text-center text-18 font-bold")}>
               정말 스테디를 종료하겠습니까? <br /> 종료 시 되돌릴 수 없습니다.
             </div>
           </AlertModal>
@@ -182,7 +182,7 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
               </Button>
             }
           >
-            <div className={cn("text-center text-18 font-light")}>
+            <div className={cn("text-center text-18 font-bold")}>
               정말 스테디를 삭제하겠습니까? <br /> 삭제 시 되돌릴 수 없습니다.
             </div>
           </AlertModal>
@@ -351,7 +351,9 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
                               </Button>
                             }
                           >
-                            정말 해당 멤버를 추방하시겠습니까?
+                            <span className="text-18 font-bold">
+                              정말 해당 멤버를 추방하시겠습니까?
+                            </span>
                           </AlertModal>
                         </div>
                       </div>
@@ -393,7 +395,9 @@ const SteadyManagePage = ({ params }: { params: { id: string } }) => {
                             </Button>
                           }
                         >
-                          정말 해당 멤버를 추방하시겠습니까?
+                          <span className="text-18 font-bold">
+                            정말 해당 멤버를 추방하시겠습니까?
+                          </span>
                         </AlertModal>
                       </div>
                     </div>

diff --git a/src/app/(user-menu)/mypage/page.tsx b/src/app/(user-menu)/mypage/page.tsx
@@ -521,7 +521,9 @@ const MyProfilePage = () => {
               </Button>
             }
           >
-            정말 스테디를 탈퇴하시겠습니까?
+            <span className="text-18 font-bold">
+              정말 스테디를 탈퇴하시겠습니까?
+            </span>
           </AlertModal>
         </div>
       </div>

diff --git a/src/app/(user-menu)/mysteady/page.tsx b/src/app/(user-menu)/mysteady/page.tsx
@@ -4,8 +4,10 @@ import { Fragment } from "react";
 import InfiniteScroll from "react-infinite-scroller";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
+import { useToast } from "@/components/ui/use-toast";
 import { cn } from "@/lib/utils";
-import { Separator } from "@radix-ui/themes";
+import { CopyIcon } from "@radix-ui/react-icons";
+import { Badge, Separator } from "@radix-ui/themes";
 import { format } from "date-fns";
 import type { MySteadyContentType } from "@/services/types";
 import Button, { buttonSize } from "@/components/_common/Button";
@@ -38,8 +40,8 @@ const MySteadyPage = () => {
     direction: "desc",
   });
   const ref = useScrollTo<HTMLDivElement>({ top: 0 }, [search]);
+  const { toast } = useToast();
 
-  console.log(mySteadyData);
   const renderIcon = (steady: MySteadyContentType) => {
     if (search === "finished") {
       return <div className="h-20 w-20" />;
@@ -89,7 +91,7 @@ const MySteadyPage = () => {
           }
         >
           <div className="flex items-center justify-center">
-            <div className="text-20 font-bold">정말 탈퇴하시겠습니까?</div>
+            <div className="text-18 font-bold">정말 탈퇴하시겠습니까?</div>
           </div>
         </AlertModal>
       );
@@ -107,6 +109,22 @@ const MySteadyPage = () => {
     }
   };
 
+  const handleCopyClipBoard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast({
+        description: "연락 수단 복사 성공!",
+        variant: "green",
+      });
+    } catch (error) {
+      toast({
+        description: "연락 수단 복사 실패!",
+        variant: "red",
+      });
+      console.error("복사에 실패했습니다.");
+    }
+  };
+
   return (
     <div className="flex flex-col max-sm:w-400 sm:w-500 md:w-600 lg:w-800 xl:w-1000">
       <div className="flex items-center justify-between">
@@ -149,13 +167,25 @@ const MySteadyPage = () => {
                       href={`/steady/detail/${steady.steadyId}`}
                       className="flex h-full w-fit flex-grow"
                     >
-                      <div className="text-black flex items-center justify-center text-center font-bold sm:text-15 md:text-20 lg:text-25">
+                      <div className="text-black flex w-full items-center text-center font-bold sm:text-15 md:text-20 lg:text-25">
                         {steady.isLeader
                           ? `👑 ${steady.name}`
                           : `${steady.name}`}
                       </div>
                     </Link>
                     <div className="flex items-center justify-center gap-20">
+                      <Badge
+                        color={"indigo"}
+                        size={"2"}
+                      >
+                        <button
+                          className="flex items-center gap-10"
+                          onClick={() => handleCopyClipBoard(steady.contact)}
+                        >
+                          <div>연락 수단</div>
+                          <CopyIcon />
+                        </button>
+                      </Badge>
                       <div className="text-bold max-w-fit text-15 text-st-gray-100 max-sm:hidden">
                         {steady.isLeader ? "생성일: " : "참여일: "}
                         {format(new Date(steady.joinedAt), "yyyy.MM.dd")}

diff --git a/src/components/_common/Modal/UserModal/UserItems.tsx b/src/components/_common/Modal/UserModal/UserItems.tsx
@@ -50,7 +50,7 @@ const UserItems = ({ userId }: { userId: number }) => {
           </div>
           <div className="flex w-full flex-col items-center justify-center gap-10">
             <div className="text-15 font-bold">받은카드</div>
-            <div className="flex h-70 w-400 items-center justify-evenly shadow-md">
+            <div className="flex h-70 w-400 items-center justify-evenly shadow-md max-sm:h-50 max-sm:w-300">
               {userProfileData.userCards.map((card) => (
                 <div
                   key={card.cardId}
@@ -59,10 +59,11 @@ const UserItems = ({ userId }: { userId: number }) => {
                   <Image
                     src={card.imageUrl}
                     alt="카드 이미지"
-                    width={35}
-                    height={35}
+                    width={0}
+                    height={0}
+                    className="h-45 w-45 max-sm:h-25 max-sm:w-25"
                   />
-                  <div className="text-18 font-bold">{`(${card.count})`}</div>
+                  <div className="text-18 font-bold max-sm:text-15">{`(${card.count})`}</div>
                 </div>
               ))}
             </div>

diff --git a/src/components/_common/Modal/UserModal/index.tsx b/src/components/_common/Modal/UserModal/index.tsx
@@ -9,8 +9,8 @@ const UserModal = ({
   return (
     <Dialog.Root>
       <Dialog.Trigger>{trigger}</Dialog.Trigger>
-      <Dialog.Content className="max-mobile:h-1/2 max-mobile:w-5/6 max-mobile:p-10 flex h-650 w-500 items-center justify-center rounded-20 bg-st-primary">
-        <div className="max-mobile:h-full max-mobile:w-full flex h-600 w-450 flex-col rounded-20 bg-st-white p-20">
+      <Dialog.Content className="max-mobile:h-1/2 max-mobile:w-5/6 max-mobile:p-10 flex h-650 w-500 items-center justify-center rounded-20 bg-st-primary max-sm:h-600 max-sm:w-400 max-sm:overflow-hidden">
+        <div className="max-mobile:h-full max-mobile:w-full flex h-600 w-450 flex-col rounded-20 bg-st-white p-20 max-sm:h-550 max-sm:w-350">
           <Dialog.Close>
             <div className="flex justify-end">
               <button className="h-fit w-fit">

diff --git a/src/services/types/index.ts b/src/services/types/index.ts
@@ -197,6 +197,7 @@ export interface PositionResponse {
 export interface MySteadyContentType {
   steadyId: number;
   name: string;
+  contact: string;
   isLeader: boolean;
   joinedAt: string;
 }