Merge pull request #127 from gw-lim/hotfix/event-link

🩹 chore: 행사 상세 페이지 디자인 및 오타 수정
P1Z7 · Feb 20, 2024 · 285467e · 285467e
2 parents b4f904f + 1389361
commit 285467e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/app/(route)/(bottom-nav)/mypage/_components/tab/MyArtistTab.tsx b/app/(route)/(bottom-nav)/mypage/_components/tab/MyArtistTab.tsx
@@ -31,7 +31,7 @@ const MyArtistTab = ({ userId }: Props) => {
       )}
       <div className="flex w-full flex-col items-center">
         <div className="flex w-full flex-wrap justify-center gap-20 pc:justify-start pc:gap-32">
-          {myArtistsData.legnth ? (
+          {myArtistsData.length ? (
             myArtistsData.map((cardList: MyArtistsType) => (
               <ArtistCard
                 key={cardList.artistId}

diff --git a/app/(route)/(bottom-nav)/mypage/_components/tab/MyCalendarTab/ChipButtons.tsx b/app/(route)/(bottom-nav)/mypage/_components/tab/MyCalendarTab/ChipButtons.tsx
@@ -1,16 +1,16 @@
 import ChipButton from "@/components/chip/ChipButton";
 
-type StatueType = "" | "예정" | "종료" | "진행중" | "종료제외";
+type StatusType = "" | "예정" | "종료" | "진행중" | "종료제외";
 
 interface Props {
-  statue: string;
-  setStatus: (statue: StatueType) => void;
+  status: string;
+  setStatus: (status: StatusType) => void;
 }
 
-const ChipButtons = ({ statue, setStatus }: Props) => {
-  const handleChipClick = (label: StatueType) => {
+const ChipButtons = ({ status, setStatus }: Props) => {
+  const handleChipClick = (label: StatusType) => {
     switch (label) {
-      case statue:
+      case status:
         setStatus("");
         break;
       case "예정":
@@ -27,9 +27,9 @@ const ChipButtons = ({ statue, setStatus }: Props) => {
 
   return (
     <div className="flex w-full gap-12">
-      <ChipButton label="예정" onClick={() => handleChipClick("예정")} selected={statue === "예정"} />
-      <ChipButton label="진행중" onClick={() => handleChipClick("진행중")} selected={statue === "진행중"} />
-      <ChipButton label="종료" onClick={() => handleChipClick("종료")} selected={statue === "종료"} />
+      <ChipButton label="예정" onClick={() => handleChipClick("예정")} selected={status === "예정"} />
+      <ChipButton label="진행중" onClick={() => handleChipClick("진행중")} selected={status === "진행중"} />
+      <ChipButton label="종료" onClick={() => handleChipClick("종료")} selected={status === "종료"} />
     </div>
   );
 };

diff --git a/app/(route)/(bottom-nav)/mypage/_components/tab/MyCalendarTab/index.tsx b/app/(route)/(bottom-nav)/mypage/_components/tab/MyCalendarTab/index.tsx
@@ -18,19 +18,19 @@ interface Props {
   userId: string;
 }
 
-type StatueType = "" | "예정" | "종료" | "진행중" | "종료제외";
+type StatusType = "" | "예정" | "종료" | "진행중" | "종료제외";
 
 const MyCalendarTab = ({ userId }: Props) => {
   const [data, setData] = useState<EventCardType[] | []>([]);
   const [isFold, setIsFold] = useState(true);
-  const [statue, setStatus] = useState<StatueType>("");
+  const [status, setStatus] = useState<StatusType>("");
   const [calendarStyle, setCalendarStyle] = useState("");
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   const { data: myEventsData, isSuccess } = useQuery({
-    queryKey: ["events", statue],
+    queryKey: ["events", status],
     queryFn: async () => {
-      return instance.get(`/event/${userId}/like`, { status: statue });
+      return instance.get(`/event/${userId}/like`, { status });
     },
   });
 
@@ -77,7 +77,7 @@ const MyCalendarTab = ({ userId }: Props) => {
         )}
       </div>
       <div className="w-full">
-        <ChipButtons setStatus={setStatus} statue={statue} />
+        <ChipButtons setStatus={setStatus} status={status} />
         <section>
           {data
             .filter(

diff --git a/app/(route)/event/[eventId]/_components/Banner.tsx b/app/(route)/event/[eventId]/_components/Banner.tsx
@@ -175,5 +175,5 @@ interface SubDescriptionProps {
 }
 
 const SubDescription = ({ isVisible = true, children }: SubDescriptionProps) => {
-  return <>{isVisible && <div className="flex gap-12 text-14 pc:gap-16 pc:text-16">{children}</div>}</>;
+  return <>{isVisible && <div className="flex gap-12 break-all text-14 pc:gap-16 pc:text-16">{children}</div>}</>;
 };