CommentInput
This commit is contained in:
parent
5a248f442e
commit
76007a46c7
3 changed files with 218 additions and 2 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
import './App.css'
|
import './App.css'
|
||||||
import { CommentItem, CommentListContainer, CommentPagination, SubCommentData } from './Comment';
|
import { CommentInput, CommentItem, CommentListContainer, CommentPagination, SubCommentData } from './Comment';
|
||||||
import CommentHeader from './CommentHeader';
|
import CommentHeader from './CommentHeader';
|
||||||
import { Footer } from './Footer';
|
import { Footer } from './Footer';
|
||||||
import { GalleryContent } from './Gallery';
|
import { GalleryContent } from './Gallery';
|
||||||
|
|
@ -163,6 +163,7 @@ const comments: SubCommentData[] = [
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<div className='relative w-[1450px] mx-auto'>
|
||||||
<main
|
<main
|
||||||
className='w-[1160px] m-[20px_auto_0]'
|
className='w-[1160px] m-[20px_auto_0]'
|
||||||
>
|
>
|
||||||
|
|
@ -198,6 +199,7 @@ function App() {
|
||||||
}} />
|
}} />
|
||||||
</CommentListContainer>
|
</CommentListContainer>
|
||||||
<CommentPagination currentPage={1} maxPage={2} />
|
<CommentPagination currentPage={1} maxPage={2} />
|
||||||
|
<CommentInput />
|
||||||
<div style={{
|
<div style={{
|
||||||
width: "840px",
|
width: "840px",
|
||||||
}}>
|
}}>
|
||||||
|
|
@ -205,6 +207,7 @@ function App() {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
208
src/Comment.tsx
208
src/Comment.tsx
|
|
@ -1,6 +1,7 @@
|
||||||
import { Separator } from "./Separator";
|
import { Separator } from "./Separator";
|
||||||
import { AuthorData } from "./table";
|
import { AuthorData } from "./table";
|
||||||
import { cn } from "./util/cn";
|
import { cn } from "./util/cn";
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
interface CommentDataBase {
|
interface CommentDataBase {
|
||||||
id: number;
|
id: number;
|
||||||
|
|
@ -261,4 +262,209 @@ export const CommentPagination: React.FC<CommentPaginationProps> = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export function CommentInput() {
|
||||||
|
const [isNicknameTooltipVisible, setIsNicknameTooltipVisible] = useState(true); // Show initially based on HTML
|
||||||
|
const [isDcConInfoVisible, setIsDcConInfoVisible] = useState(false); // Hidden initially
|
||||||
|
|
||||||
|
// TODO: Implement state for input values
|
||||||
|
// const [nickname, setNickname] = useState('');
|
||||||
|
// const [password, setPassword] = useState('');
|
||||||
|
// const [comment, setComment] = useState('');
|
||||||
|
|
||||||
|
const toggleDcConInfo = () => setIsDcConInfoVisible(!isDcConInfoVisible);
|
||||||
|
const hideNicknameTooltip = () => setIsNicknameTooltipVisible(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-custom-gray-very-light p-3 border-t-2 border-b-2 border-solid border-custom-blue-hover font-apple-dotum text-xs">
|
||||||
|
{/* Use flexbox for layout instead of floats */}
|
||||||
|
<div className="flex justify-between">
|
||||||
|
|
||||||
|
{/* Left Column: Nickname/Password */}
|
||||||
|
<div className="flex flex-col space-y-[5px]">
|
||||||
|
{/* Nickname Input */}
|
||||||
|
<div className="relative w-[140px] h-[30px] bg-white border border-custom-border-input">
|
||||||
|
<label htmlFor="nickname" className="sr-only">닉네임</label>
|
||||||
|
|
||||||
|
{/* Nickname Tooltip */}
|
||||||
|
{isNicknameTooltipVisible && (
|
||||||
|
<div className="absolute right-auto top-[-57px] left-[-14px] bg-custom-green-light rounded-[5px] shadow-tooltip z-[99]">
|
||||||
|
<div className="relative py-[7px] pr-[28px] pl-[11px]">
|
||||||
|
<p className="text-white text-xs leading-4 whitespace-nowrap tracking-normal">
|
||||||
|
ㅇㅇ는 갤러리에서 권장하는 비회원 전용<br />
|
||||||
|
갤닉네임입니다. (삭제 시 닉네임 등록 가능)
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={hideNicknameTooltip}
|
||||||
|
className="absolute top-[10px] right-[10px] w-3 h-3 bg-sp-img bg-[-267px_-818px] cursor-pointer align-[-2px]"
|
||||||
|
aria-label="닫기"
|
||||||
|
>
|
||||||
|
<em className="sr-only">닫기</em>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
borderWidth: "9px 6px 0px 6px",
|
||||||
|
borderColor: "#98ca33 transparent",
|
||||||
|
top: "auto",
|
||||||
|
bottom: "-8px",
|
||||||
|
left: "33px",
|
||||||
|
right: "auto",
|
||||||
|
marginTop: "-6px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
position: "absolute",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actual Input */}
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="nickname"
|
||||||
|
// value={nickname}
|
||||||
|
// onChange={(e) => setNickname(e.target.value)}
|
||||||
|
className="align-top text-xs font-apple w-[126px] h-[28px] leading-tight-29 py-[1px] px-[7px] text-custom-blue-dark border-none outline-none"
|
||||||
|
placeholder="닉네임" // Use placeholder attribute
|
||||||
|
/>
|
||||||
|
{/* Delete Button (Implement functionality if needed) */}
|
||||||
|
<button type="button" className="absolute right-[7px] top-[7px] w-4 h-4 cursor-pointer align-middle">
|
||||||
|
{/* Add icon here if needed, original HTML has no visible icon */}
|
||||||
|
<span className="sr-only">삭제</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Hidden 'Use Gallery Nickname' Button */}
|
||||||
|
<button type="button" className="hidden absolute right-0 top-0 h-[30px] pr-2 text-xs font-apple-dotum underline text-custom-blue-dark cursor-pointer align-middle">
|
||||||
|
갤닉네임 사용
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Password Input */}
|
||||||
|
<div className="relative w-[140px] h-[30px] bg-white border border-custom-border-input">
|
||||||
|
<label htmlFor="password" className="sr-only">비밀번호</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
// value={password}
|
||||||
|
// onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className="align-top text-xs font-apple w-[126px] h-[28px] leading-tight-29 py-[1px] px-[7px] border-none outline-none"
|
||||||
|
placeholder="비밀번호" // Use placeholder attribute
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column: Textarea and Buttons */}
|
||||||
|
{/* Calculate width: 100% - left column width - gap. Or use flex-grow */}
|
||||||
|
<div className="flex-grow ml-3"> {/* Adjust margin as needed */}
|
||||||
|
{/* Textarea */}
|
||||||
|
<div className="relative">
|
||||||
|
<label
|
||||||
|
htmlFor="comment"
|
||||||
|
className="absolute left-0 top-0 p-[13px] text-xs text-custom-gray-medium leading-[18px] pointer-events-none" // Prevent label from blocking textarea
|
||||||
|
>
|
||||||
|
타인의 권리를 침해하거나 명예를 훼손하는 댓글은 운영원칙 및 관련 법률에 제재를 받을 수 있습니다.<br />
|
||||||
|
Shift+Enter 키를 동시에 누르면 줄바꿈이 됩니다.
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="comment"
|
||||||
|
// value={comment}
|
||||||
|
// onChange={(e) => setComment(e.target.value)}
|
||||||
|
className="align-middle text-[13px] font-apple w-full h-[78px] p-[13px] border border-custom-border-input bg-white text-custom-gray-dark leading-[18px] resize-none outline-none focus:bg-white" // Ensure bg is white on focus to hide label
|
||||||
|
// Add logic to hide placeholder label when typing starts if needed
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Buttons Row */}
|
||||||
|
<div className="mt-2 flex justify-between items-center">
|
||||||
|
{/* Left Buttons (DCCon) */}
|
||||||
|
<div className="relative flex items-center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="bg-white border border-custom-blue-dark text-custom-blue-dark font-bold text-xs w-[82px] h-[31px] px-[2px] leading-tight-29 rounded-2 flex items-center justify-center cursor-pointer ml-[3px]"
|
||||||
|
>
|
||||||
|
<em className="bg-sp-img inline-block w-6 h-[19px] mr-[5px] ml-[2px] bg-[-229px_0px] align-[-5px]"></em>
|
||||||
|
디시콘
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={toggleDcConInfo}
|
||||||
|
className="ml-1 mt-px cursor-pointer"
|
||||||
|
aria-label="디시콘이란"
|
||||||
|
aria-expanded={isDcConInfoVisible}
|
||||||
|
>
|
||||||
|
<em className="bg-sp-img inline-block w-[17px] h-[16px] bg-[-220px_-29px]"></em>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* DCCon/NFT Info Popup */}
|
||||||
|
{isDcConInfoVisible && (
|
||||||
|
<div className="absolute z-[4001] text-left border-t-2 border-custom-blue-hover border-r border-b border-l bg-white left-0 bottom-full mb-2 w-[518px]"> {/* Positioned above button */}
|
||||||
|
<div className="relative overflow-hidden text-custom-gray-dark leading-normal">
|
||||||
|
<div className="bg-custom-dropdown-title-bg relative w-full pt-[30px] pb-[27px]">
|
||||||
|
<span className="absolute top-[14px] left-[18px] text-xs text-custom-gray-dark font-bold">NFT 이벤트</span>
|
||||||
|
<div className="w-[320px] mx-auto">
|
||||||
|
{/* Placeholder for Image */}
|
||||||
|
<div className="bg-gray-300 w-[200px] h-[50px] mx-auto"> (Image Placeholder) </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-5 mx-[18px]">
|
||||||
|
<p className="text-xs text-custom-gray-dark font-bold">획득법</p>
|
||||||
|
<div className="mt-[6px]">
|
||||||
|
<h4 className="text-custom-blue-hover text-sm font-normal">① NFT 발행</h4>
|
||||||
|
<p className="ml-[18px] mt-1 text-xs">작성한 게시물을 NFT로 발행하면 <b className="font-bold text-custom-blue-hover">일주일</b> 동안 사용할 수 있습니다. (최초 1회)</p>
|
||||||
|
<div className="bg-custom-dropdown-bg ml-[18px] rounded-5 p-[6px_8px] mt-[10px] text-xs">
|
||||||
|
<b className="text-custom-red-text mr-[6px]">꿀팁!</b>
|
||||||
|
<span>발행 후 NFT를 구매할 수 있는 클레이를 받을 수 있어요.<a href="#" className="text-custom-dropdown-link underline ml-1">받으러 가기</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-[14px]">
|
||||||
|
<h4 className="text-custom-blue-hover text-sm font-normal">② NFT 구매</h4>
|
||||||
|
<p className="ml-[18px] mt-1 text-xs">다른 이용자의 NFT를 구매하면 <b className="font-bold text-custom-blue-hover">한 달</b> 동안 사용할 수 있습니다. (구매 시마다 갱신)</p>
|
||||||
|
<div className="bg-custom-dropdown-bg ml-[18px] rounded-5 p-[6px_8px] mt-[10px] text-xs">
|
||||||
|
<b className="text-custom-red-text mr-[6px]">꿀팁!</b>
|
||||||
|
<span>구매 후 클레이를 한 번 더 받을 수 있어요.<a href="#" className="text-custom-dropdown-link underline ml-1">받으러 가기</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-[22px] mx-[18px] border-t border-dashed border-custom-border-gray pt-4 mb-6">
|
||||||
|
<p className="text-xs text-custom-gray-dark font-bold">사용법</p>
|
||||||
|
<p className="mt-1 text-xs">디시콘에서
|
||||||
|
<span className="bg-custom-dropdown-link tracking-tighter inline-block px-[8px] h-[23px] leading-tight-23 text-white font-bold rounded-50 shadow-sm mx-1 align-middle">지갑연결</span>
|
||||||
|
시 바로 사용 가능합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={toggleDcConInfo}
|
||||||
|
className="absolute top-0 right-0 p-2 cursor-pointer" // Added padding for easier clicking
|
||||||
|
aria-label="닫기"
|
||||||
|
>
|
||||||
|
<em className="bg-sp-img bg-no-repeat inline-block w-5 h-5 bg-[-195px_-818px]"></em>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Buttons (Register) */}
|
||||||
|
<div className="flex">
|
||||||
|
<button
|
||||||
|
type="button" // Should be type="submit" if part of a form
|
||||||
|
className="bg-custom-blue-hover border border-custom-blue-dark text-white font-bold text-xs w-[82px] h-[31px] px-[2px] leading-tight-29 rounded-2 cursor-pointer ml-[3px] shadow-register-button"
|
||||||
|
>
|
||||||
|
등록
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button" // Should be type="submit" if part of a form
|
||||||
|
className="bg-custom-blue-register-hover border border-custom-blue-dark text-white font-bold text-xs w-[85px] h-[31px] px-[2px] leading-tight-29 rounded-2 cursor-pointer ml-[3px] shadow-register-recommend-button"
|
||||||
|
>
|
||||||
|
등록+추천
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,13 +3,20 @@
|
||||||
|
|
||||||
/* --- Extend Tailwind Theme using @theme --- */
|
/* --- Extend Tailwind Theme using @theme --- */
|
||||||
@theme {
|
@theme {
|
||||||
|
|
||||||
--color-custom-blue-dark: rgb(41 54 124);
|
--color-custom-blue-dark: rgb(41 54 124);
|
||||||
|
--color-custom-blue-hover: rgb(59 72 144);
|
||||||
|
--color-custom-blue-register-hover: rgb(98 109 166);
|
||||||
--color-custom-gray-dark: rgb(51 51 51);
|
--color-custom-gray-dark: rgb(51 51 51);
|
||||||
--color-custom-gray-medium: rgb(153 153 153);
|
--color-custom-gray-medium: rgb(153 153 153);
|
||||||
--color-custom-gray-light: rgb(238 238 238);
|
--color-custom-gray-light: rgb(238 238 238);
|
||||||
|
--color-custom-gray-very-light: rgb(250 250 250);
|
||||||
--color-custom-green: rgb(0 153 51);
|
--color-custom-green: rgb(0 153 51);
|
||||||
|
--color-custom-green-light: rgb(152 202 51);
|
||||||
--color-custom-red-text: rgb(211 25 0);
|
--color-custom-red-text: rgb(211 25 0);
|
||||||
--color-custom-border-gray: rgb(204 204 204);
|
--color-custom-border-gray: rgb(204 204 204);
|
||||||
|
--color-custom-border-input: rgb(206 205 206);
|
||||||
|
--color-custom-dropdown-title-bg: rgb(243 247 255);
|
||||||
--color-custom-dropdown-bg: rgb(243 243 243);
|
--color-custom-dropdown-bg: rgb(243 243 243);
|
||||||
--color-custom-dropdown-text: rgb(85 85 85);
|
--color-custom-dropdown-text: rgb(85 85 85);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue