Feature/api community

package.json

@@ -11,14 +11,16 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@tanstack/react-query": "^5.83.0",

src/pages/home/_components/ListItem.tsx → src/components/common/ListItem.tsx

@@ -1,11 +1,12 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Heart, MessageCircle } from "lucide-react";
+import { Heart, MessageCircle, Users } from "lucide-react";
 import { useNavigate } from "react-router-dom";
-import type { Post } from "@/types/post.types";
+import type { PostListItem } from "@/types/post.types";
+import { formatPostListDate } from "@/lib/date";
 
 interface ListItemProps {
-  post: Post;
+  post: PostListItem;
 }
 
 export const ListItem = ({ post }: ListItemProps) => {
@@ -15,14 +16,6 @@ export const ListItem = ({ post }: ListItemProps) => {
     navigate(`/community/${post.id}`);
   };
 
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString("ko-KR", {
-      month: "short",
-      day: "numeric",
-    });
-  };
-
   return (
     <Card
       className="bg-brand-surface border-none text-white hover:bg-brand-surface/50 transition-colors cursor-pointer"
@@ -35,17 +28,27 @@ export const ListItem = ({ post }: ListItemProps) => {
       </CardHeader>
       <CardContent className="flex justify-between items-center text-xs text-brand-text">
         <span>
-          {post.author.nickname} · {formatDate(post.createdAt)}
+          {post.author.nickname} · {formatPostListDate(post.createdAt)}
         </span>
         <div className="flex items-center space-x-4">
           <div className="flex items-center space-x-1">
             <Heart className="size-4" aria-label="좋아요" />
             <span className="w-3">{post.nLikes}</span>
           </div>
-          <div className="flex items-center space-x-1">
-            <MessageCircle className="size-4" aria-label="댓글" />
-            <span className="w-3">{post.nComments}</span>
-          </div>
+          {/* 일반 게시판: 댓글 개수 표시 */}
+          {!post.board.isRecruit && (
+            <div className="flex items-center space-x-1">
+              <MessageCircle className="size-4" aria-label="댓글" />
+              <span className="w-3">{post.nComments}</span>
+            </div>
+          )}
+          {/* 모집 게시판: 지원자 개수 표시. api에 관련 필드 없는 관계로 쿼리로 처리 중--개선 필요*/}
+          {post.board.isRecruit && (
+            <div className="flex items-center space-x-1">
+              <Users className="size-4" aria-label="지원자" />
+              <span className="w-3">{post.nApplicants || 0}</span>
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>

src/components/common/PositionSelector.tsx

@@ -12,14 +12,20 @@ import type { Position } from "@/types/tags.types";
 
 interface PositionSelectorProps {
   selectedPosition: number | null;
+  selectedPositionIds?: number[];
   onPositionChange: (positionId: number) => void;
+  onPositionIdsChange?: (positionIds: number[]) => void;
   label?: string;
+  multiple?: boolean;
 }
 
 export const PositionSelector = ({
   selectedPosition,
+  selectedPositionIds = [],
   onPositionChange,
+  onPositionIdsChange,
   label = "포지션",
+  multiple = false,
 }: PositionSelectorProps) => {
   const { data: positionsInterestsData, isLoading } = usePositionsInterests();
 
@@ -59,21 +65,38 @@ export const PositionSelector = ({
             </AccordionTrigger>
             <AccordionContent>
               <div className="flex flex-col gap-2 pt-2">
-                {fieldPositions.map((position) => (
-                  <Button
-                    key={position.id}
-                    variant="outline"
-                    onClick={() => onPositionChange(position.id)}
-                    className={cn(
-                      "h-auto justify-start text-left whitespace-normal border-transparent bg-brand-surface",
-                      selectedPosition === position.id &&
-                        "border-brand-primary text-brand-primary border-1"
-                    )}>
-                    <div className="flex flex-col">
-                      <span className="font-bold">{position.role}</span>
-                    </div>
-                  </Button>
-                ))}
+                {fieldPositions.map((position) => {
+                  const isSelected = multiple
+                    ? selectedPositionIds.includes(position.id)
+                    : selectedPosition === position.id;
+
+                  const handleClick = () => {
+                    if (multiple && onPositionIdsChange) {
+                      const newPositionIds = isSelected
+                        ? selectedPositionIds.filter((id) => id !== position.id)
+                        : [...selectedPositionIds, position.id];
+                      onPositionIdsChange(newPositionIds);
+                    } else {
+                      onPositionChange(position.id);
+                    }
+                  };
+
+                  return (
+                    <Button
+                      key={position.id}
+                      variant="outline"
+                      onClick={handleClick}
+                      className={cn(
+                        "h-auto justify-start text-left whitespace-normal border-transparent bg-brand-surface",
+                        isSelected &&
+                          "border-brand-primary text-brand-primary border-1"
+                      )}>
+                      <div className="flex flex-col">
+                        <span className="font-bold">{position.role}</span>
+                      </div>
+                    </Button>
+                  );
+                })}
               </div>
             </AccordionContent>
           </AccordionItem>

src/components/layout/GlobalLayout.tsx

@@ -9,9 +9,10 @@ interface GlobalLayoutProps {
 function GlobalLayout({ children }: GlobalLayoutProps) {
   const location = useLocation();
 
-  const shouldShowBottomNav = ["/board", "/explore", "/chat", "/my"].some(
-    (path) => location.pathname.startsWith(path)
-  );
+  const shouldShowBottomNav =
+    ["/board", "/explore", "/chat", "/my"].some((path) =>
+      location.pathname.startsWith(path)
+    ) && !location.pathname.startsWith("/my/edit");
 
   return (
     <div className="min-h-screen bg-slate-100 flex justify-center">