diff --git a/src/App.tsx b/src/App.tsx index b7e4427..f510eff 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,9 @@ import './App.css' +import { AnnoymousNickNameProvider } from './AuthorData'; import { CommentInput, CommentItem, CommentListContainer, CommentPagination, PostListControls, SubCommentData } from './Comment'; import CommentHeader from './CommentHeader'; import { Footer } from './Footer'; -import { GalleryContent } from './Gallery'; +import { GalleryContent, GalleryContentHeader } from './Gallery'; import { GalleryTitleHeader } from './GalleryTitleHeader'; import { GlobalNavigationBar, Header, VisitHistory } from './Header'; import { LoginBox } from './Sidebar'; @@ -106,7 +107,6 @@ const tableData: TableRowData[] = [ views: "", recommendations: "", isNews: true, - titleLinkUrl: '#', // Add actual URL }, ]; @@ -164,66 +164,105 @@ const comments: SubCommentData[] = [ function App() { return ( -
-
- - -
-
-
- -
- - - - - - - - - - -
-
- - + +
+
+ + +
+
+
+ +
+ + + + + + + + + + + +
+
+ + +
+
+ +
-
- -
-
-
-
-
-
-
+
+
+
+
+ ) } diff --git a/src/AuthorData.tsx b/src/AuthorData.tsx new file mode 100644 index 0000000..8f13fd8 --- /dev/null +++ b/src/AuthorData.tsx @@ -0,0 +1,89 @@ +import { createContext, useContext, useMemo } from "react"; + +export type AuthorData = { + // 운영자 + type: "operator"; +} | { + // 고닉 + // 중복 불가능 닉네임 + type: "nickname"; + nickname: string; + // 파딱, 주딱 구분을 위한 userType + userType?: "manager" | "submanager"; // Optional, if applicable +} | { + // 유동닉 + type: "IP"; + // IP 주소 + ip: string; + + tempNickname?: string; // Optional, if applicable +} | { + // 반유동닉 + // 중복 가능 닉네임 + type: "semi-nickname"; + nickname: string; +}; + +const NicknameImagePath = { + "주딱": "/fix_managernik.gif", + "파딱": "/fix_sub_managernik.gif", + "반유동": "/nik.gif", + "default": "/fix_nik.gif" +} + +const AnnoymousNickName = createContext("ㅇㅇ"); +export const AnnoymousNickNameProvider = AnnoymousNickName.Provider; + +export function NickName({ author } : { + author: AuthorData, +}) { + const defaultNickname = useContext(AnnoymousNickName); + + const nickname = useMemo(() => { + switch (author.type) { + case "nickname": + return author.nickname; + case "semi-nickname": + return author.nickname; + case "IP": + return author.tempNickname ?? defaultNickname; + case "operator": + return "운영자"; + default: + return defaultNickname; + } + }, [author, defaultNickname]) + + return <> + {/* Author Name Span */} + + {/* Inner em/span for potential finer control if needed */} + + {nickname} + + + {/* Author IP */} + {author?.type === "IP" && ( + + ({author.ip}) + + )} + {/* Author Icon Placeholder */} + {author?.type !== "IP" && ( + + {/* Replace with actual icon component or img tag */} + icon + + )} + +} \ No newline at end of file diff --git a/src/Comment.tsx b/src/Comment.tsx index 451deb0..09fa766 100644 --- a/src/Comment.tsx +++ b/src/Comment.tsx @@ -1,5 +1,5 @@ import { Separator } from "./Separator"; -import { AuthorData } from "./table"; +import { AuthorData } from './AuthorData'; import { cn } from "./util/cn"; import React, { useState } from 'react'; diff --git a/src/Gallery.tsx b/src/Gallery.tsx index 1608dff..96dd201 100644 --- a/src/Gallery.tsx +++ b/src/Gallery.tsx @@ -1,15 +1,37 @@ import { Separator } from "./Separator" +import { AuthorData, NickName } from './AuthorData'; -function GalleryContentHeader() { +export interface GalleryContentHeaderProps { + title: string; + kind: string; + author: AuthorData; + date: string; + views?: number; + recommendations?: number; + /** + * Number of comments on the post + */ + commentCount?: number; +} + +export function GalleryContentHeader({ + title, + kind, + author, + date, + views = 0, + recommendations = 0, + commentCount = 0, +}: GalleryContentHeaderProps) { return (
{/* Outer container with margin, padding, and bottom border */}
{/* Post Title */}

- [일반] + [{kind}] - 아 e글 유파들이 고도 왜 안올리는지 알았다 + {title}

@@ -19,16 +41,10 @@ function GalleryContentHeader() { > {/* Left section: Author, IP, Timestamp */}
- - {/* author name */} - 썬갤러 {/* Adjusted em styling for clarity */} - - - (110.15) - + - 2025.02.04 21:32:47 + {date}
@@ -37,11 +53,11 @@ function GalleryContentHeader() { className="pr-[7px]" > - 조회 65 + 조회 {views} - 추천 0 + 추천 {recommendations} @@ -50,7 +66,7 @@ function GalleryContentHeader() { className="inline-block h-5 leading-5 px-2.5 bg-gray-200 text-gray-700 border border-gray-300 rounded-full hover:bg-gray-300 hover:border-gray-400 text-xs"> - 댓글 13 + 댓글 {commentCount}
@@ -76,16 +92,7 @@ function GalleryRecommendation({ pt-[19px] w-fit box-content">
-
+

{recommendCount}

@@ -276,23 +279,18 @@ export function GalleryContent() { return
-
-
+
- + alt
diff --git a/src/GalleryTitleHeader.tsx b/src/GalleryTitleHeader.tsx index efcbab9..3b7dcbe 100644 --- a/src/GalleryTitleHeader.tsx +++ b/src/GalleryTitleHeader.tsx @@ -1,13 +1,24 @@ import { Separator } from "./Separator" -export function GalleryTitleHeader() { +interface GalleryTitleHeaderProps { + title?: string; + relatedGalleriesCount?: { + current: number; + total: number; + }; +} + +export function GalleryTitleHeader({ + title = "워썬더 갤러리", + relatedGalleriesCount = { current: 2, total: 8 }, +}: GalleryTitleHeaderProps = {}) { return (

- 워썬더 갤러리 + {title}
@@ -26,14 +37,20 @@ export function GalleryTitleHeader() {

- diff --git a/src/Header.tsx b/src/Header.tsx index cc73499..bedd4ae 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -375,17 +375,20 @@ export function Header({ } -export function VisitHistory() { +export function VisitHistory({ + recentVisits, +}: { + recentVisits?: { + id: number; + name: string; + isMinor?: boolean; + }[]; +}) { + recentVisits = recentVisits ?? []; // --- State for Interactivity (Example - not fully implemented in static version) --- const [isDropdownOpen, setIsDropdownOpen] = useState(false); // To control the main dropdown visibility const [activeTab, setActiveTab] = useState('recent'); // 'recent' or 'favorites' for the dropdown tabs - // Dummy data matching the HTML snippet - const recentVisits = [ - { id: 1, name: '장르소설', isMinor: true }, - { id: 2, name: '실시간 베스트', isMinor: false }, - // Add more items as needed - ]; return (
{/* Added relative positioning for children */} diff --git a/src/table.tsx b/src/table.tsx index b07ccbf..f95b7ec 100644 --- a/src/table.tsx +++ b/src/table.tsx @@ -1,27 +1,6 @@ +import { AuthorData, NickName } from './AuthorData'; import { cn } from './util/cn'; -export type AuthorData = { - // 운영자 - type: "operator" -} | { - // 고닉 - // 중복 불가능 닉네임 - type: "nickname", - nickname: string, - // 파딱, 주딱 구분을 위한 userType - userType?: "manager" | "submanager" // Optional, if applicable -} | { - // 유동닉 - type: "IP", - // IP 주소 - ip: string, -} | { - // 반유동닉 - // 중복 가능 닉네임 - type: "semi-nickname", - nickname: string, -} - // --- Data Interface (Remains the same) --- export interface TableRowData { id: string | number; @@ -33,19 +12,7 @@ export interface TableRowData { | "icon_ad" | "icon_dctrend"; // e.g., "운영자", "고닉", "반유동", "유동닉" - author?: { - type: "operator" - } | { - type: "nickname", - nickname: string, - userType?: "manager" | "submanager" // Optional, if applicable - } | { - type: "IP", - ip: string, - } | { - type: "semi-nickname", - nickname: string, - } + author?: AuthorData; date: string; @@ -56,7 +23,6 @@ export interface TableRowData { isAdOrSurvey?: boolean; isNews?: boolean; // Handle the last row type specifically if needed titleLinkUrl?: string; // Optional URL for title - authorLinkUrl?: string; // Optional URL for author } // --- Child Component: TableRow --- @@ -64,12 +30,6 @@ interface TableRowProps { rowData: TableRowData; } -const NicknameImagePath = { - "주딱": "/fix_managernik.gif", - "파딱": "/fix_sub_managernik.gif", - "반유동": "/nik.gif", - "default": "/fix_nik.gif" -} export function TableRow({ rowData }: TableRowProps) { const { @@ -85,7 +45,6 @@ export function TableRow({ rowData }: TableRowProps) { isAdOrSurvey, isNews, titleLinkUrl = "#", - authorLinkUrl = "#", author, } = rowData; @@ -139,44 +98,9 @@ export function TableRow({ rowData }: TableRowProps) { - {author?.type === "operator" ? ( - 운영자 - ) : ( - <> - {/* Author Name Span */} - - {/* Inner em/span for potential finer control if needed */} - - {author?.type === "nickname" ? author?.nickname : "ㅇㅇ"} - - - {/* Author IP */} - {author?.type === "IP" && ( - - ({author.ip}) - - )} - {/* Author Icon Placeholder */} - {author?.type !== "IP" && ( - - {/* Replace with actual icon component or img tag */} - icon - - )} - - )} + {author && } + {variant === "icon_dctrend" && "디시트렌드"} {date} {views}