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 { CommentItem, CommentListContainer, CommentPagination, SubCommentData } from './Comment';
|
||||
import { CommentInput, CommentItem, CommentListContainer, CommentPagination, SubCommentData } from './Comment';
|
||||
import CommentHeader from './CommentHeader';
|
||||
import { Footer } from './Footer';
|
||||
import { GalleryContent } from './Gallery';
|
||||
|
|
@ -163,6 +163,7 @@ const comments: SubCommentData[] = [
|
|||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<div className='relative w-[1450px] mx-auto'>
|
||||
<main
|
||||
className='w-[1160px] m-[20px_auto_0]'
|
||||
>
|
||||
|
|
@ -198,6 +199,7 @@ function App() {
|
|||
}} />
|
||||
</CommentListContainer>
|
||||
<CommentPagination currentPage={1} maxPage={2} />
|
||||
<CommentInput />
|
||||
<div style={{
|
||||
width: "840px",
|
||||
}}>
|
||||
|
|
@ -205,6 +207,7 @@ function App() {
|
|||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
208
src/Comment.tsx
208
src/Comment.tsx
|
|
@ -1,6 +1,7 @@
|
|||
import { Separator } from "./Separator";
|
||||
import { AuthorData } from "./table";
|
||||
import { cn } from "./util/cn";
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface CommentDataBase {
|
||||
id: number;
|
||||
|
|
@ -261,4 +262,209 @@ export const CommentPagination: React.FC<CommentPaginationProps> = ({
|
|||
</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 --- */
|
||||
@theme {
|
||||
|
||||
--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-medium: rgb(153 153 153);
|
||||
--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-light: rgb(152 202 51);
|
||||
--color-custom-red-text: rgb(211 25 0);
|
||||
--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-text: rgb(85 85 85);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue