자동 PR: fix → dev

src/app/(user)/users/[id]/groups/created/page.tsx

@@ -20,12 +20,12 @@ type CreatedGroupsPageWrapperProps = {
 }
 
 type CreatedGroupsPageProps = {
-  params: Promise<{ id: string }>;
-  searchParams: Promise<{
+  params: { id: string };
+  searchParams: {
     search: string;
     type: string;
     order: string;
-  }>;
+  };
 };
 
 /**
@@ -37,11 +37,13 @@ export default async function CreatedGroupsPageWrapper({
   params,
   searchParams,
 }: CreatedGroupsPageWrapperProps) {
+  const awaitedSearchParams = await searchParams;
+  const awaitedParams = await params;
   return (
-    <Suspense fallback={<GroupListLoading />} key={JSON.stringify(searchParams)}>
+    <Suspense fallback={<GroupListLoading />} key={JSON.stringify(awaitedSearchParams)}>
       <CreatedGroupsPage
-        params={params}
-        searchParams={searchParams}
+        params={awaitedParams}
+        searchParams={awaitedSearchParams}
       />
     </Suspense>
   )
@@ -51,9 +53,9 @@ const CreatedGroupsPage = async ({
   params,
   searchParams,
 }: CreatedGroupsPageProps) => {
-  const { search, type, order } = await searchParams;
+  const { search, type, order } = searchParams;
 
-  const { id } = await params;
+  const { id } = params;
 
   const cookieHeaderValue = await getAuthCookieHeader();
 

src/app/(user)/users/[id]/groups/ended/page.tsx

@@ -20,23 +20,25 @@ type EndedGroupsPageWrapperProps = {
 };
 
 type EndedGroupsPageProps = {
-  params: Promise<{ id: string }>;
-  searchParams: Promise<{
+  params: { id: string };
+  searchParams: {
     search: string;
     type: string;
-  }>;
+  };
 };
 
 export default async function EndedGroupsPageWrapper({
   params,
   searchParams,
 }: EndedGroupsPageWrapperProps) {
+  const awaitedSearchParams = await searchParams;
+  const awaitedParams = await params;
   return (
     <Suspense
       fallback={<GroupListLoading />}
-      key={JSON.stringify(searchParams)}
+      key={JSON.stringify(awaitedSearchParams)}
     >
-      <EndedGroupsPage params={params} searchParams={searchParams} />
+      <EndedGroupsPage params={awaitedParams} searchParams={awaitedSearchParams} />
     </Suspense>
   );
 }
@@ -45,9 +47,9 @@ const EndedGroupsPage = async ({
   params,
   searchParams,
 }: EndedGroupsPageProps) => {
-  const { id } = await params;
+  const { id } = params;
 
-  const { search, type } = await searchParams;
+  const { search, type } = searchParams;
 
   const queryClient = new QueryClient();
 

src/app/bookmark/BookmarkPageClient.tsx

@@ -73,7 +73,7 @@ export function BookmarkPageClient() {
   });
 
   const items = flattenPages(data.pages);
-  const bookmarkItems = items.filter((item) => !item.isBookmark);
+  const bookmarkItems = items.filter((item) => item.isBookmark);
 
   // 탭 변경 핸들러
   const handleValueChange = (value: GroupType) => {
@@ -117,7 +117,7 @@ export function BookmarkPageClient() {
             ) : (
               <>
                 <ul className="grid mt-8 gap-4 md:grid-cols-2 xl:grid-cols-4">
-                  {items.map((group) => (
+                  {bookmarkItems.map((group) => (
                     <li key={group.id}>
                       <GroupCard item={group} />
                     </li>

src/app/write/page.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { WriteForm } from '@/components/organisms/write-form';
+import useIsClient from '@/hooks/useIsClient';
 import useAuthStore from '@/stores/useAuthStore';
 import { routes } from '@/utils/routes';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
-import useIsClient from '@/hooks/useIsClient';
 
 export default function Page() {
   const user = useAuthStore((state) => state.user);
@@ -34,7 +34,7 @@ export default function Page() {
 
   return (
     <div className="relative w-[300px] sm:w-[370px] md:w-[740px] m-auto mb-10">
-      <WriteForm userId={user.userId} />
+      <WriteForm />
     </div>
   );
 }

src/components/atoms/share-button/index.tsx

@@ -4,11 +4,11 @@ import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 
 export const ShareButton = () => {
-  const currentUrl = window.location.href;
-
   const shareButtonClickHandler = async () => {
+    const currentUrl = window.location.href;
+
     try {
-      await navigator.clipboard.writeText(currentUrl);
+      await navigator.clipboard.writeText(`${currentUrl}`);
       toast.success('링크가 복사되었습니다.');
     } catch {
       toast.error('링크 복사에 실패하였습니다.');

src/components/atoms/write-form/form-label.tsx

@@ -11,13 +11,15 @@ type WriteFormLabelProps = {
   text: string;
   className?: string;
   info?: string;
+  isTooltipOpen?: boolean;
 };
 
 export const WriteFormLabel = ({
   htmlFor,
   text,
   className,
   info,
+  isTooltipOpen,
 }: WriteFormLabelProps) => {
   return (
     <div className="flex gap-1">
@@ -28,7 +30,7 @@ export const WriteFormLabel = ({
         {text}
       </FormLabel>
       {info && (
-        <Tooltip>
+        <Tooltip {...(isTooltipOpen ? { open: true } : {})}>
           <TooltipTrigger>
             <CircleInfo />
           </TooltipTrigger>

src/components/error-boundary/error-handler.tsx

@@ -26,7 +26,7 @@ export const handleError = ({
     }
 
     // 인증 에러
-    if (error.message.includes('401') || error.message.toLowerCase().includes('unauthorized')) {
+    if (error.message.includes('401') || error.message.toLowerCase().includes('unauthorized') || error.message.includes('refresh 만료')) {
       return (
         <ErrorFallback error={error} resetErrorBoundary={resetErrorBoundary}>
           로그인이 필요합니다

src/components/error-fallback/index.tsx

@@ -30,7 +30,8 @@ export const ErrorFallback = ({
   const handleClick = () => {
     if (
       error?.message.includes('401') ||
-      error?.message.toLowerCase().includes('unauthorized')
+      error?.message.toLowerCase().includes('unauthorized') ||
+      error?.message.toLowerCase().includes('refresh 만료')
     ) {
       clearUser();
       console.log('401 에러 발생');
@@ -54,7 +55,8 @@ export const ErrorFallback = ({
         className="mt-2 text-white text-sm cursor-pointer bg-green-600"
       >
         {error?.message.includes('401') ||
-        error?.message.toLowerCase().includes('unauthorized')
+        error?.message.toLowerCase().includes('unauthorized') ||
+        error?.message.toLowerCase().includes('refresh 만료')
           ? '로그인하기'
           : '다시 시도'}
       </Button>

src/components/molecules/group-create-button/index.tsx

@@ -21,7 +21,7 @@ export const WriteGroupButton = () => {
   };
 
   return (
-    <div className="fixed md:absolute bottom-0 md:top-0 right-0 my-6 z-10">
+    <div className="fixed md:absolute bottom-0 md:top-0 md:bottom-auto right-0 my-6 z-10">
       <Button
         onClick={writeButtonClickHandler}
         className="cursor-pointer rounded-[50%] md:hidden"

src/components/molecules/group/filter.tsx

@@ -88,7 +88,7 @@ export const Filter = ({ updateQueryParams }: FilterProps) => {
             기술 스택
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="flex gap-1 mt-1 p-3 bg-white ring-1 ring-gray-200 rounded-md">
+        <PopoverContent className="flex gap-1 mt-1 p-3 bg-white ring-1 ring-gray-200 rounded-md z-10">
           <Button
             variant="outline"
             onClick={() => skillSelectHandler('')}
@@ -123,7 +123,7 @@ export const Filter = ({ updateQueryParams }: FilterProps) => {
             포지션
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="flex gap-1 mt-2 p-2  bg-white ring-1 ring-gray-200 rounded-md">
+        <PopoverContent className="flex gap-1 mt-2 p-2  bg-white ring-1 ring-gray-200 rounded-md z-10">
           <Button
             variant="outline"
             onClick={() => positionSelectHandler('')}

src/components/molecules/group/group-card.tsx

@@ -19,7 +19,9 @@ type GroupCardProps = {
 
 // TODO : 섹션별로 component 나누기
 export const GroupCard = ({ item }: GroupCardProps) => {
-  const isClosed = isBeforeToday(item.deadline);
+  const isClosed =
+    isBeforeToday(item.deadline) ||
+    item.participants.length >= item.maxParticipants;
 
   return (
     <div className="relative p-5 h-[280px] lg:h-[316px] bg-white shadow-sm ring-2 ring-gray-300/30 rounded-xl">

src/components/molecules/position-badge/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Badge } from '@/components/atoms/badge';
 import {
   Tooltip,
@@ -37,13 +39,20 @@ allPositionlKeys.forEach((position) => {
 
 type PositionBadgeProps = {
   name: string;
+  positionClickHandler?: (name: string) => void;
 };
 
-export const PositionBadge = ({ name }: PositionBadgeProps) => {
+export const PositionBadge = ({
+  name,
+  positionClickHandler,
+}: PositionBadgeProps) => {
   return (
     <Tooltip>
       <div className="position-badge flex flex-row cursor-pointer">
-        <TooltipTrigger type="button">
+        <TooltipTrigger
+          type="button"
+          onClick={() => positionClickHandler?.(name)}
+        >
           <Badge
             text={name}
             className="text-sm font-medium bg-gray-100 text-gray-600 px-1"

src/components/molecules/skill-badge/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Tooltip,
   TooltipContent,
@@ -21,13 +23,18 @@ allSkillKeys.forEach((skill) => {
 type SkillBadgeProps = {
   name: SkillName;
   isDefault?: boolean;
+  skillClickHandler?: (name: SkillName) => void;
 };
 
-export const SkillBadge = ({ name, isDefault = true }: SkillBadgeProps) => {
+export const SkillBadge = ({
+  name,
+  isDefault = true,
+  skillClickHandler,
+}: SkillBadgeProps) => {
   return (
     <Tooltip>
       <div className="skill-badge flex w-full h-full flex-row border p-1 items-center justify-center rounded-full cursor-pointer">
-        <TooltipTrigger type="button">
+        <TooltipTrigger type="button" onClick={() => skillClickHandler?.(name)}>
           {isDefault && (
             <Image src={skillLogoMap[name]} alt="logo" width={20} height={20} />
           )}

src/components/molecules/write-form/maxParticipants.tsx

@@ -7,30 +7,47 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { WriteForm } from '@/types';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 
 type TitleProps = {
   form: UseFormReturn<WriteForm>;
 };
 
 export const MaxParticipants = ({ form }: TitleProps) => {
-  const [maxParticipants, setMaxParticipants] = useState(2);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
 
-  const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const inputBlurHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = Number(e.target.value);
-    if (value > 30) {
-      setMaxParticipants(30);
-      return;
-    }
-    if (value < 2) {
-      setMaxParticipants(2);
+
+    if (value === 0) {
+      // 입력값이 없거나 0이면 2로 세팅
+      form.setValue('maxParticipants', 2);
       return;
     }
 
-    setMaxParticipants(value);
+    if (value < 2 || value > 30) {
+      const settedValue = Math.max(2, Math.min(30, value));
+      form.setValue('maxParticipants', settedValue);
+
+      setIsTooltipOpen(true);
+    }
   };
 
+  /**
+   * 정원 보정 후 툴팁이 3초뒤에 사라지게 하기
+   */
+
+  useEffect(() => {
+    if (isTooltipOpen) {
+      const timer = setTimeout(() => {
+        setIsTooltipOpen(false);
+      }, 3000); // 3초
+
+      return () => clearTimeout(timer);
+    }
+  }, [isTooltipOpen]);
+
   return (
     <>
       <FormField
@@ -42,6 +59,7 @@ export const MaxParticipants = ({ form }: TitleProps) => {
               htmlFor="maxParticipants"
               text="정원"
               info="최소 2명 ~ 최대 30명까지 가능합니다"
+              isTooltipOpen={isTooltipOpen}
             />
             <FormControl>
               <Input
@@ -51,8 +69,10 @@ export const MaxParticipants = ({ form }: TitleProps) => {
                 placeholder="정원을 입력해주세요"
                 {...field}
                 type="number"
-                onChange={inputChangeHandler}
-                value={maxParticipants}
+                onBlur={(e) => {
+                  inputBlurHandler(e);
+                  field.onBlur();
+                }}
               />
             </FormControl>
             <FormMessage />