Update button to reveal comprehensive user information

Add `IdCard` icon and change button text from "Profile" to "소개" (Introduction) to intuitively convey that clicking it will display all information about the user, not just a basic profile. Modified button variant to "outline" and adjusted styling for better visual integration.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/cEkjo93
This commit is contained in:
kimjaehyeon0101
2025-10-15 04:16:19 +00:00
parent 4d4f7b1c76
commit 93f002c54e
3 changed files with 18 additions and 15 deletions

View File

@ -9,7 +9,7 @@ import { Card } from "@/components/ui/card";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Eye, MessageCircle, ThumbsUp, Pin, Search, Info, Settings, User, LogOut } from "lucide-react"; import { Eye, MessageCircle, ThumbsUp, Pin, Search, Info, Settings, User, LogOut, IdCard } from "lucide-react";
import type { MediaOutlet, CommunityPost } from "@shared/schema"; import type { MediaOutlet, CommunityPost } from "@shared/schema";
import { queryClient, apiRequest } from "@/lib/queryClient"; import { queryClient, apiRequest } from "@/lib/queryClient";
import SearchModal from "@/components/SearchModal"; import SearchModal from "@/components/SearchModal";
@ -148,17 +148,18 @@ export default function Community() {
{outlet.name} {outlet.name}
</span> </span>
<Button <Button
variant="ghost" variant="outline"
size="sm" size="sm"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setLocation(`/media/${outlet.slug}/report`); setLocation(`/media/${outlet.slug}/report`);
}} }}
className="h-auto p-1" className="h-7 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
aria-label="View profile" aria-label="View complete profile"
data-testid="button-profile" data-testid="button-profile"
> >
Profile <IdCard className="h-3.5 w-3.5" />
<span></span>
</Button> </Button>
</div> </div>
</div> </div>

View File

@ -6,7 +6,7 @@ import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Dialog, DialogContent } from "@/components/ui/dialog"; import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Search, Settings, User, LogOut, Grid, List, Info, MessageCircle } from "lucide-react"; import { Search, Settings, User, LogOut, Grid, List, Info, MessageCircle, IdCard } from "lucide-react";
import { useAuth } from "@/hooks/useAuth"; import { useAuth } from "@/hooks/useAuth";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import { queryClient } from "@/lib/queryClient"; import { queryClient } from "@/lib/queryClient";
@ -219,17 +219,18 @@ export default function MediaOutlet() {
{outlet.name} {outlet.name}
</span> </span>
<Button <Button
variant="ghost" variant="outline"
size="sm" size="sm"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setLocation(`/media/${outlet.slug}/report`); setLocation(`/media/${outlet.slug}/report`);
}} }}
className="h-auto p-1" className="h-7 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
aria-label="View profile" aria-label="View complete profile"
data-testid="button-profile" data-testid="button-profile"
> >
Profile <IdCard className="h-3.5 w-3.5" />
<span></span>
</Button> </Button>
</div> </div>
</div> </div>

View File

@ -1,5 +1,5 @@
import { useRoute, useLocation } from "wouter"; import { useRoute, useLocation } from "wouter";
import { FileText, Presentation, Info, Search, Settings, User, LogOut } from "lucide-react"; import { FileText, Presentation, Info, Search, Settings, User, LogOut, IdCard } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -485,17 +485,18 @@ export default function Report() {
{outlet.name} {outlet.name}
</span> </span>
<Button <Button
variant="ghost" variant="outline"
size="sm" size="sm"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setLocation(`/media/${outlet.slug}/report`); setLocation(`/media/${outlet.slug}/report`);
}} }}
className="h-auto p-1" className="h-7 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
aria-label="View profile" aria-label="View complete profile"
data-testid="button-profile" data-testid="button-profile"
> >
Profile <IdCard className="h-3.5 w-3.5" />
<span></span>
</Button> </Button>
</div> </div>
</div> </div>