- - {/* Post Content */} - - - - {post.category} - - - {post.title} - {post.content} - - - - {post.tags.map((tag) => ( - - {tag} - - ))} - - - - - {post.likes} - - - - {post.comments} - - - {post.timestamp} - - {post.author} - - - - - - {/* Post Image (conditionally rendered) */} - {post.imageUrl && ( - - - - )} + return ( + + + {/* Post Content */} + + + + {post.category} + + + {post.title} + {post.content} + + + + {post.tags.map((tag) => ( + + {tag} + + ))} - - ); + + + + {post.likes} + + + + {post.comments} + + + {post.timestamp} + + {post.author} + + + + + {/* Post Image (conditionally rendered) */} + {post.imageUrl && ( + + + + )} + + + ); } - // --- Main Page Component --- -export default async function ComposerTalkPage({ params }: { params: Promise<{ id: string }> }) { - const { id } = await params; - return ( - - {/* Composer Profile도 id에 맞는 정보로 바뀌어야함 */} - +export default function ComposerTalkPage({ params }: { params: { id: string } }) { + const { id } = params; + const [posts, setPosts] = useState([]); + const [loading, setLoading] = useState(true); - {/* Post List */} - - {mockPosts.map((post) => ( - - - - ))} - + // API 연결 전에는 mockPosts를 사용하고, API 연결 시 아래 fetch 부분을 주석 해제하세요. + /* + useEffect(() => { + // 실제 API 엔드포인트로 변경 필요 + fetch(`/api/composer-talk-room/${id}/posts`) + .then((res) => res.json()) + .then((data) => { + setPosts(data.posts); // API 응답 구조에 따라 수정 + setLoading(false); + }) + .catch(() => setLoading(false)); + }, [id]); + */ - - - ); + // mock 데이터로 초기화 (API 연결 전용) + useEffect(() => { + setPosts(mockPosts); + setLoading(false); + }, [id]); + + return ( + + + + {loading ? ( + 불러오는 중... + ) : posts.length === 0 ? ( + 게시글이 없습니다. + ) : ( + posts.map((post) => ( + + + + )) + )} + + + + ); } \ No newline at end of file diff --git a/src/app/curation/[postId]/comment-input.tsx b/src/app/curation/[postId]/comment-input.tsx new file mode 100644 index 0000000..190474e --- /dev/null +++ b/src/app/curation/[postId]/comment-input.tsx @@ -0,0 +1,196 @@ +'use client'; + +import React, { useState } from 'react'; +import Image from 'next/image'; + +interface CommentInputProps { + onSubmitComment: (content: string, isReply?: boolean, replyToId?: number) => void; + replyMode?: { + isReply: boolean; + replyToId: number; + replyToAuthor: string; + }; + onCancelReply?: () => void; +} + +export default function CommentInput({ + onSubmitComment, + replyMode, + onCancelReply +}: CommentInputProps) { + const [content, setContent] = useState(''); + const [isExpanded, setIsExpanded] = useState(false); + const MAX_CHARS = 28; + + const handleSubmit = () => { + if (!content.trim()) return; + + onSubmitComment( + content.trim(), + replyMode?.isReply || false, + replyMode?.replyToId + ); + + setContent(''); + setIsExpanded(false); + if (onCancelReply) { + onCancelReply(); + } + }; + + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + if (content.trim() && content.length <= MAX_CHARS) { + handleSubmit(); + } + } + }; + + const handleInputClick = () => { + setIsExpanded(true); + }; + + const handleInputBlur = () => { + if (!content.trim()) { + setIsExpanded(false); + } + }; + + const isOverLimit = content.length > MAX_CHARS; + const canSubmit = content.trim() && !isOverLimit; + + return ( + + {/* Reply Mode Header */} + {replyMode?.isReply && ( + + + + @{replyMode.replyToAuthor}님에게 답글 + + + ✕ + + + + )} + + {/* Main Comment Input Area */} + + + {/* Profile Image */} + + + + + + + {/* Input Container */} + + {!isExpanded ? ( + /* Collapsed State - Placeholder */ + <> + + 댓글을 남겨주세요 + + + + + + + + ) : ( + /* Expanded State - Textarea */ + + setContent(e.target.value)} + onKeyPress={handleKeyPress} + onBlur={handleInputBlur} + placeholder="댓글을 입력해주세요..." + className={`w-full bg-transparent text-[14px] font-medium + placeholder-[#A6A6A6] resize-none border-none outline-none + min-h-[20px] max-h-[100px] ${ + isOverLimit ? 'text-red-500' : 'text-[#1A1A1A]' + }`} + style={{ + height: 'auto', + minHeight: '20px', + maxHeight: '100px' + }} + onInput={(e) => { + const target = e.target as HTMLTextAreaElement; + target.style.height = 'auto'; + target.style.height = Math.min(target.scrollHeight, 100) + 'px'; + }} + autoFocus + /> + </div> + )} + </div> + </div> + + {/* Expanded Controls */} + {isExpanded && ( + <div className="flex justify-end items-center w-full gap-2 mt-1"> + <span className={`text-xs ${ + isOverLimit ? 'text-red-500' : 'text-[#A6A6A6]' + }`}> + {content.length}/{MAX_CHARS} + </span> + + <button + onClick={handleSubmit} + disabled={!canSubmit} + className={`px-4 py-2 text-sm rounded-lg font-medium transition-colors ${ + canSubmit + ? 'bg-[#293A92] text-white hover:bg-[#1e2a6b]' + : 'bg-[#D9D9D9] text-[#A6A6A6] cursor-not-allowed' + }`} + > + 등록 + </button> + + <button + onClick={() => { + setContent(''); + setIsExpanded(false); + if (onCancelReply) { + onCancelReply(); + } + }} + className="px-3 py-2 text-sm text-[#A6A6A6] hover:text-[#4C4C4C] transition-colors" + > + 취소 + </button> + </div> + )} + </div> + </div> + ); +} \ No newline at end of file diff --git a/src/app/curation/[postId]/comment-item.tsx b/src/app/curation/[postId]/comment-item.tsx new file mode 100644 index 0000000..adf42b3 --- /dev/null +++ b/src/app/curation/[postId]/comment-item.tsx @@ -0,0 +1,101 @@ +'use client'; + +import { useState } from 'react'; +import Image from 'next/image'; +import { ReportModal } from './report-modal'; + +export interface CommentItemProps { + comment: { + id: number; + author: string; + timestamp: string; + content: string; + isHeartSelected?: boolean; + }; + isReply?: boolean; + composerId?: string; + onReply?: (commentId: number, author: string) => void; + onReportOpen?: () => void; + onReportClose?: () => void; +} + +const CommentItem = ({ comment, isReply = false, composerId, onReply, onReportOpen, onReportClose }: CommentItemProps) => { + const [isReportModalOpen, setIsReportModalOpen] = useState(false); + const [isHeartSelected, setIsHeartSelected] = useState(comment.isHeartSelected || false); + + const handleReplyClick = () => { + if (onReply) { + onReply(comment.id, comment.author); + } + }; + + const handleHeartClick = () => { + setIsHeartSelected(!isHeartSelected); + // TODO: 백엔드 API 호출로 하트 상태 업데이트 + }; + + const handleReportClick = () => { + setIsReportModalOpen(true); + // 신고 모달 열렸을 때 댓글 입력창 숨기기 + if (onReportOpen) { + onReportOpen(); + } + }; + + const handleReportModalClose = () => { + setIsReportModalOpen(false); + // 신고 모달 닫혔을 때 댓글 입력창 다시 보이기 + if (onReportClose) { + onReportClose(); + } + }; + + return ( + <> + {isReportModalOpen && ( + <ReportModal + isOpen={isReportModalOpen} + onClose={handleReportModalClose} + postId={`comment-${comment.id}`} + composerId={composerId || ''} + /> + )} + <div className={`bg-white box-border content-stretch flex flex-col gap-2.5 items-center justify-start py-[18px] relative shrink-0 w-full ${isReply ? 'pl-[50px] pr-5' : 'px-5'}`}> + <div className="content-stretch flex gap-2 items-start justify-start relative shrink-0 w-full"> + <div className="bg-[#d9d9d9] rounded-full shrink-0 size-[31px] flex items-center justify-center mt-1"> + <Image src="/icons/profile.svg" alt="profile" width={20} height={20} /> + </div> + <div className="basis-0 content-stretch flex flex-col grow items-start justify-start"> + <p className="text-[#4c4c4c] text-[14px] font-semibold">{comment.author}</p> + <p className="text-[#d9d9d9] text-[12px] font-medium">{comment.timestamp}</p> + </div> + <div className="content-stretch flex gap-0.5 items-center justify-start relative shrink-0"> + <button + onClick={handleHeartClick} + className="overflow-clip relative shrink-0 size-[26px] hover:bg-gray-100 rounded-full transition-colors" + > + <Image src={isHeartSelected ? "/icons/heart_selected.svg" : "/icons/heart.svg"} alt="heart" width={18} height={18} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" /> + </button> + <button + onClick={handleReplyClick} + className="overflow-clip relative shrink-0 size-[26px] hover:bg-gray-100 rounded-full transition-colors" + > + <Image src="/icons/message.svg" alt="reply" width={18} height={18} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" /> + </button> + <button + onClick={handleReportClick} + className="overflow-clip relative shrink-0 size-[26px] hover:bg-gray-100 rounded-full transition-colors" + > + <Image src="/icons/alarm.svg" alt="report" width={18} height={18} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" /> + </button> + </div> + </div> + <div className="flex flex-col justify-center leading-normal not-italic relative shrink-0 text-[#a6a6a6] text-[14px] w-full"> + <p>{comment.content}</p> + </div> + </div> + </> + ); +}; + +export default CommentItem; \ No newline at end of file diff --git a/src/app/curation/[postId]/comment-list.tsx b/src/app/curation/[postId]/comment-list.tsx new file mode 100644 index 0000000..fb1a2a7 --- /dev/null +++ b/src/app/curation/[postId]/comment-list.tsx @@ -0,0 +1,98 @@ +'use client'; + +import React, { useState, useEffect, useRef, useCallback } from 'react'; +import CommentItem from './comment-item'; + +// Comment type definition +type Comment = { + id: number; + author: string; + timestamp: string; + content: string; + isHeartSelected: boolean; + isReply: boolean; +}; + +const COMMENTS_PER_PAGE = 5; + +interface CommentListProps { + composerId?: string; + initialComments: Comment[]; + onAddComment?: (content: string, isReply?: boolean, replyToId?: number) => void; + onReply?: (commentId: number, author: string) => void; + onReportOpen?: () => void; + onReportClose?: () => void; +} + +export default function CommentList({ composerId, initialComments, onAddComment, onReply, onReportOpen, onReportClose }: CommentListProps) { + const [comments, setComments] = useState<Comment[]>(initialComments.slice(0, COMMENTS_PER_PAGE)); + const [page, setPage] = useState(1); + const [hasMore, setHasMore] = useState(initialComments.length > COMMENTS_PER_PAGE); + const loader = useRef(null); + + // initialComments가 변경될 때마다 comments 업데이트 + useEffect(() => { + const currentPageComments = initialComments.slice(0, page * COMMENTS_PER_PAGE); + setComments(currentPageComments); + setHasMore(currentPageComments.length < initialComments.length); + }, [initialComments, page]); + + const loadMoreComments = useCallback(() => { + if (!hasMore) return; + + const nextPage = page + 1; + const newComments = initialComments.slice(0, nextPage * COMMENTS_PER_PAGE); + + setComments(newComments); + setPage(nextPage); + if (newComments.length >= initialComments.length) { + setHasMore(false); + } + }, [hasMore, page, initialComments]); + + useEffect(() => {//무한스크롤의 영역 + const observer = new IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting && hasMore) { + // Simulate network latency + setTimeout(() => { + loadMoreComments(); + }, 500); + } + }, + { threshold: 1.0 } + ); + + const currentLoader = loader.current; + if (currentLoader) { + observer.observe(currentLoader); + } + + return () => { + if (currentLoader) { + observer.unobserve(currentLoader); + } + }; + }, [hasMore, page, loadMoreComments]); // Dependency array updated for correctness + + return ( + <> + {comments.map((comment) => ( + <CommentItem + key={comment.id} + comment={comment} + isReply={comment.isReply} + composerId={composerId} + onReply={onReply} + onReportOpen={onReportOpen} + onReportClose={onReportClose} + /> + ))} + {hasMore && ( + <div ref={loader} className="py-4 text-center text-zinc-500"> + 댓글을 불러오는 중... + </div> + )} + </> + ); +} \ No newline at end of file diff --git a/src/app/curation/[postId]/page.tsx b/src/app/curation/[postId]/page.tsx new file mode 100644 index 0000000..0642212 --- /dev/null +++ b/src/app/curation/[postId]/page.tsx @@ -0,0 +1,243 @@ +'use client'; + +import Image from 'next/image'; +import Link from 'next/link'; +import CommentList from './comment-list'; +import CommentInput from './comment-input'; +import { ReportButton } from './report-button'; +import { useState, useEffect } from 'react'; + +// Mock Data - postId에 따라 다른 데이터를 반환 +const getMockPostData = (postId: string) => { + const posts = { + '1': { + userId: '123', + composer: '큐레이션', + author: 'Username', + timestamp: '25/08/28 14:26', + category: '큐레이션글', + postType: '큐레이션', + title: '제목이 들어갈 자리입니다', + content: '글 내용이 들어갈 자리입니다. 글자수는 아 이게몇개냐\n가나다라마바사아자차카타파하가나다라마바사아자차카타파하\n28자입니다 최대', + tags: ['#태그01', '#태그02', '#태그03'], + images: ['/images/placeholder-1.png', '/images/placeholder-2.png'], + likes: 12, + scraps: 3, + }, + '2': { + userId: '456', + composer: '큐레이션', + author: '음악애호가', + timestamp: '25/08/29 10:15', + category: '큐레이션글', + postType: '큐레이션', + title: '라흐마니노프의 피아노 협주곡 2번', + content: '오늘은 제가 정말 사랑하는 클래식 음악에 대해 이야기해보려고 합니다.\n라흐마니노프의 피아노 협주곡 2번은 정말 감동적인 곡입니다.', + tags: ['#라흐마니노프', '#피아노협주곡', '#클래식'], + images: ['/images/placeholder-3.png'], + likes: 25, + scraps: 8, + }, + '3': { + userId: '789', + composer: '큐레이션', + author: '클래식러버', + timestamp: '25/08/30 16:45', + category: '큐레이션글', + postType: '큐레이션', + title: '베토벤 교향곡 9번 합창 추천', + content: '베토벤의 교향곡 9번 합창은 클래식 음악의 최고 걸작 중 하나입니다.\n특히 4악장의 환희의 송가는 정말 압도적입니다.', + tags: ['#베토벤', '#교향곡', '#합창'], + images: [], + likes: 18, + scraps: 5, + } + }; + + return posts[postId as keyof typeof posts] || posts['1']; +}; + +const mockComments = [ + { id: 1, author: 'Username', timestamp: '25/08/28 14:26', content: '댓글내용을 입력하는 곳입니다. 최대는 마찬가지로 28자 근데 띄어쓰기랑 문장부호는 어떻게 세나요?', isHeartSelected: false, isReply: false }, + { id: 2, author: 'Username', timestamp: '25/08/28 14:26', content: '댓글내용을 입력하는 곳입니다. 최대는 마찬가지로 28자 근데 띄어쓰기랑 문장부호는 어떻게 세나요?', isHeartSelected: true, isReply: true }, + { id: 3, author: 'Username', timestamp: '25/08/28 14:26', content: '댓글내용을 입력하는 곳입니다. 최대는 마찬가지로 28자 근데 띄어쓰기랑 문장부호는 어떻게 세나요?', isHeartSelected: true, isReply: false }, + { id: 4, author: 'Username', timestamp: '25/08/28 14:26', content: '댓글내용을 입력하는 곳입니다. 최대는 마찬가지로 28자 근데 띄어쓰기랑 문장부호는 어떻게 세나요?', isHeartSelected: false, isReply: false }, + { id: 5, author: 'Username', timestamp: '25/08/28 14:26', content: '추가 댓글입니다. 스크롤을 내려 확인해보세요.', isHeartSelected: false, isReply: false }, + { id: 6, author: 'Username', timestamp: '25/08/28 14:27', content: '새로운 댓글이 로드되었습니다.', isHeartSelected: false, isReply: false }, + { id: 7, author: 'Username', timestamp: '25/08/28 14:28', content: '무한 스크롤 테스트 중입니다.', isHeartSelected: false, isReply: true }, + { id: 8, author: 'Username', timestamp: '25/08/28 14:29', content: '여기까지 보인다면 성공입니다.', isHeartSelected: false, isReply: false }, + { id: 9, author: 'Username', timestamp: '25/08/28 14:30', content: '마지막 댓글입니다.', isHeartSelected: false, isReply: false }, +]; + +type Comment = (typeof mockComments)[0]; + +type PostDetailPageProps = { + params: Promise<{ + postId: string; + }>; +}; + +export default function CurationPostDetail({ params }: PostDetailPageProps) { + const [currentComments, setCurrentComments] = useState(mockComments); + const [postId, setPostId] = useState(''); + const [mockPostData, setMockPostData] = useState(getMockPostData('1')); + const [replyMode, setReplyMode] = useState<{ + isReply: boolean; + replyToId: number; + replyToAuthor: string; + } | undefined>(undefined); + const [showCommentInput, setShowCommentInput] = useState(true); + const [isReportModalOpen, setIsReportModalOpen] = useState(false); + + // params 처리 + useEffect(() => { + params.then(({ postId: pId }) => { + setPostId(pId); + setMockPostData(getMockPostData(pId)); + }); + }, [params]); + + const handleAddComment = (content: string, isReply: boolean = false, replyToId?: number) => { + const newComment: Comment = { + id: Math.max(...currentComments.map(c => c.id), 0) + 1, + author: 'Username', + timestamp: new Date().toLocaleDateString('ko-KR', { + year: '2-digit', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit' + }).replace(/\. /g, '/').replace('.', ''), + content, + isHeartSelected: false, + isReply + }; + + if (isReply && replyToId) { + // 답글인 경우, 원댓글 바로 다음에 삽입 + const replyToIndex = currentComments.findIndex(c => c.id === replyToId); + if (replyToIndex !== -1) { + const newComments = [...currentComments]; + newComments.splice(replyToIndex + 1, 0, newComment); + setCurrentComments(newComments); + } else { + // 원댓글을 찾지 못한 경우 맨 위에 추가 + setCurrentComments([newComment, ...currentComments]); + } + } else { + // 일반 댓글인 경우 맨 위에 추가 + setCurrentComments([newComment, ...currentComments]); + } + + // 답글 모드 해제 + if (replyMode) { + setReplyMode(undefined); + } + }; + + const handleReply = (commentId: number, author: string) => { + setReplyMode({ + isReply: true, + replyToId: commentId, + replyToAuthor: author + }); + }; + + const handleCancelReply = () => { + setReplyMode(undefined); + }; + + const handleReportOpen = () => { + // 신고 모달 열렸을 때 댓글 입력창 숨기기 + setIsReportModalOpen(true); + setShowCommentInput(false); + }; + + const handleReportClose = () => { + // 신고 모달 닫혔을 때 댓글 입력창 다시 보이기 + setIsReportModalOpen(false); + setShowCommentInput(true); + }; + + return ( + <div className="bg-[#f4f5f7] min-h-screen"> + <div className="bg-white w-[375px] mx-auto"> + {/* Post Content */} + <div className="px-5 pb-5 pt-4"> + <div className="flex items-start gap-2 mb-4"> + <Link href={`/writer-profile/${mockPostData.userId}`}> + <div className="w-[31px] h-[31px] bg-zinc-300 rounded-md" /> + </Link> + <div className="flex-1"> + <p className="font-semibold text-sm text-zinc-700">{mockPostData.author}</p> + <p className="text-xs text-zinc-400">{mockPostData.timestamp} · {mockPostData.category}</p> + </div> + <div className="flex items-center gap-2"> + <div className="flex items-center gap-1 text-xs text-zinc-500 font-semibold"> + <Image src="/icons/music.svg" alt="" width={12} height={12} /> + <span>{mockPostData.postType}</span> + </div> + <ReportButton postId={postId} composerId="curation" /> + </div> + </div> + + <div className="mb-2"> + <h2 className="text-sm font-semibold text-zinc-900">{mockPostData.title}</h2> + </div> + + <div className="text-sm text-zinc-500 mb-2" style={{ whiteSpace: 'pre-wrap' }}> + {mockPostData.content} + </div> + + <div className="flex gap-1 text-sm text-zinc-400 mb-4"> + {mockPostData.tags.map(tag => <span key={tag}>{tag}</span>)} + </div> + + {mockPostData.images.length > 0 && ( + <div className="flex gap-1.5 mb-4"> + {mockPostData.images.map((src, index) => ( + <div key={index} className="w-[151px] h-[151px] bg-zinc-300 rounded-lg" /> + ))} + </div> + )} + + <div className="flex justify-between items-center"> + <div className="flex gap-3"> + <div className="flex items-center gap-1.5 text-xs text-zinc-500"> + <Image src="/icons/heart.svg" alt="likes" width={24} height={24} /> + <span>좋아요</span> + </div> + <div className="flex items-center gap-1.5 text-xs text-zinc-500"> + <Image src="/icons/logo.svg" alt="scraps" width={24} height={24} /> + <span>스크랩</span> + </div> + </div> + <button> + <Image src="/icons/music.svg" alt="share" width={24} height={24} /> + </button> + </div> + </div> + </div> + + {/* Comments Section */} + <div className={`mt-1.5 flex flex-col gap-1.5 w-[375px] mx-auto ${showCommentInput ? 'pb-32' : 'pb-8'}`}> + <CommentList + composerId="curation" + initialComments={currentComments} + onReply={handleReply} + onReportOpen={handleReportOpen} + onReportClose={handleReportClose} + /> + </div> + + {/* Comment Input - Fixed at bottom */} + {showCommentInput && ( + <CommentInput + onSubmitComment={handleAddComment} + replyMode={replyMode} + onCancelReply={handleCancelReply} + /> + )} + </div> + ); +} \ No newline at end of file diff --git a/src/app/curation/[postId]/report-button.tsx b/src/app/curation/[postId]/report-button.tsx new file mode 100644 index 0000000..051b9a1 --- /dev/null +++ b/src/app/curation/[postId]/report-button.tsx @@ -0,0 +1,39 @@ +'use client'; + +import { useState } from 'react'; +import { ReportModal } from './report-modal'; + +interface ReportButtonProps { + postId: string; + composerId: string; +} + +export function ReportButton({ postId, composerId }: ReportButtonProps) { + const [isModalOpen, setIsModalOpen] = useState(false); + + return ( + <> + <button + onClick={() => setIsModalOpen(true)} + className="p-1 hover:bg-gray-100 rounded-full transition-colors" + aria-label="신고하기" + > + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-zinc-400"> + <path + d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-2h-2v2zm0-4h2V7h-2v6z" + fill="currentColor" + /> + </svg> + </button> + + {isModalOpen && ( + <ReportModal + isOpen={isModalOpen} + onClose={() => setIsModalOpen(false)} + postId={postId} + composerId={composerId} + /> + )} + </> + ); +} \ No newline at end of file diff --git a/src/app/curation/[postId]/report-modal.tsx b/src/app/curation/[postId]/report-modal.tsx new file mode 100644 index 0000000..d2796ed --- /dev/null +++ b/src/app/curation/[postId]/report-modal.tsx @@ -0,0 +1,257 @@ +'use client'; + +import { useState } from 'react'; + +interface ReportModalProps { + isOpen: boolean; + onClose: () => void; + onSubmit?: () => void; + postId: string; + composerId: string; +} + +const REPORT_REASONS = [ + { + id: 1, + title: '1. 스팸/광고', + description: '무관한 상업 광고, 도배성 홍보, 외부 사이트 유도' + }, + { + id: 2, + title: '2.부적절한 언어/욕설', + description: '비속어, 혐오 발언, 음란 표현 등' + }, + { + id: 3, + title: '3.명예훼손/비방', + description: '특정 개인/단체에 대한 악의적 허위사실 유포' + }, + { + id: 4, + title: '4.저작권 침해', + description: '불법 복제 음원/영상/악보/촬영, 무단 이미지 사용' + }, + { + id: 5, + title: '5.주제와 무관한 내용', + description: '카테고리/토크룸 주제와 전혀 상관없는 내용' + }, + { + id: 6, + title: '6.개인정보 유출', + description: '전화번호, 주소, 계좌번호 등 개인정보 노출' + }, + { + id: 7, + title: '7.기타 (내용 입력 필수)', + description: '위 항목에 해당하지 않는 부적절한 콘텐츠' + } +]; + +export function ReportModal({ isOpen, onClose, onSubmit, postId, composerId }: ReportModalProps) { + const [selectedReason, setSelectedReason] = useState<number | null>(null); + const [additionalComment, setAdditionalComment] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleSubmit = async () => { + if (!selectedReason) return; + + setIsSubmitting(true); + + try { + const response = await fetch('/api/report', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + postId, + composerId, + reason: selectedReason, + comment: additionalComment, + }), + }); + + if (response.ok) { + alert('신고가 접수되었습니다.'); + if (onSubmit) { + onSubmit(); + } else { + onClose(); + } + } else { + alert('신고 접수 중 오류가 발생했습니다.'); + } + } catch (error) { + console.error('Report submission error:', error); + alert('신고 접수 중 오류가 발생했습니다.'); + } finally { + setIsSubmitting(false); + } + }; + + const handleReasonSelect = (reasonId: number) => { + setSelectedReason(reasonId); + }; + + if (!isOpen) return null; + + return ( + <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center"> + {/* Main Container - 375px width matching Figma */} + <div + className="bg-white w-[375px] max-h-[90vh] overflow-y-auto" + style={{ fontFamily: 'Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif' }} + > + {/* Header */} + <div className="flex items-center justify-between px-5 py-3 bg-white border-b border-gray-100"> + <div className="flex items-center gap-1"> + <button + onClick={onClose} + className="flex items-center justify-center w-6 h-6" + > + <svg width="7" height="15" viewBox="0 0 7 15" fill="none" className="transform rotate-180"> + <path d="M1 1L6 7.5L1 14" stroke="#1A1A1A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/> + </svg> + </button> + <h2 className="text-base font-semibold text-[#1A1A1A] ml-1">글쓰기</h2> + </div> + + <div className="flex items-center gap-1.5"> + <button className="flex items-center justify-center px-3 py-1.5 bg-white border border-[#D9D9D9] rounded-full"> + <span className="text-[13px] font-semibold text-[#A6A6A6]">등록</span> + <svg width="12" height="11" viewBox="0 0 12 11" className="ml-0.5"> + <path d="M6 0L12 11H0L6 0Z" fill="#BFBFBF"/> + </svg> + </button> + <button + onClick={handleSubmit} + disabled={!selectedReason || isSubmitting} + className="flex items-center justify-center px-3.5 py-1.5 bg-[#293A92] rounded-full disabled:opacity-50" + > + <span className="text-[13px] font-semibold text-white">등록</span> + <svg width="12" height="11" viewBox="0 0 12 11" className="ml-0.5 transform rotate-90"> + <path d="M1 1L6 7.5L1 14" stroke="#BFC4DE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/> + </svg> + </button> + </div> + </div> + + {/* Post Type Section */} + <div className="px-5 py-3.5 bg-[#F4F5F7]"> + <span className="text-[12px] font-medium text-[#4C4C4C]">게시글 유형</span> + </div> + + {/* Selected Post Type */} + <div className="flex items-center px-6 py-4 bg-white"> + <div className="w-3 h-3 mr-2"> + <svg width="12" height="12" viewBox="0 0 12 12"> + <circle cx="6" cy="6" r="6" fill="#293A92"/> + </svg> + </div> + <span className="text-[14px] font-semibold text-[#1A1A1A]">큐레이션</span> + </div> + + {/* Title Section */} + <div className="px-5 py-3.5 bg-[#F4F5F7]"> + <span className="text-[12px] font-medium text-[#4C4C4C]">게시글 제목</span> + </div> + + {/* Report Reasons */} + <div className="px-5 py-5 bg-white"> + <h3 className="text-base font-semibold text-[#1A1A1A] mb-5">신고 사유 선택</h3> + + <div className="space-y-4.5"> + {REPORT_REASONS.map((reason) => ( + <div key={reason.id} className="flex items-center gap-4.5"> + <button + onClick={() => handleReasonSelect(reason.id)} + className={`w-3 h-3 rounded-full border-[1.5px] flex-shrink-0 ${ + selectedReason === reason.id + ? 'bg-[#293A92] border-[#293A92]' + : 'border-[#D9D9D9] bg-white' + }`} + /> + <div className="flex-1"> + <div className="text-[14px] font-semibold text-[#4C4C4C] leading-[17px] tracking-[-0.02em]"> + {reason.title} + </div> + <div className="text-[14px] font-medium text-[#BFBFBF] leading-[17px] tracking-[-0.02em] mt-0.5"> + {reason.description} + </div> + </div> + </div> + ))} + </div> + + {/* Additional Comment for "기타" option */} + {selectedReason === 7 && ( + <div className="mt-4 relative"> + <div className="w-[284px] h-[88px] bg-[#F5F5F5] rounded-[10px] p-3.5"> + <textarea + value={additionalComment} + onChange={(e) => setAdditionalComment(e.target.value)} + placeholder="기타 내용 작성" + className="w-full h-full bg-transparent text-[12px] font-medium text-[#BFBFBF] placeholder-[#BFBFBF] border-none outline-none resize-none tracking-[-0.02em]" + maxLength={200} + /> + </div> + </div> + )} + </div> + + {/* Post Title Input */} + <div className="px-5 py-4 bg-white"> + <input + type="text" + placeholder="큐레이션 제목을 입력하세요!" + className="w-full text-[14px] font-medium text-[#D9D9D9] placeholder-[#D9D9D9] border-none outline-none" + readOnly + /> + </div> + + {/* Content Section Header */} + <div className="px-5 py-3.5 bg-[#F4F5F7]"> + <span className="text-[12px] font-medium text-[#4C4C4C]">게시글 내용</span> + </div> + + {/* Content Input */} + <div className="px-5 py-4 bg-white h-[228px]"> + <textarea + placeholder="좋은 음악과 함께 나누고픈 이야기를 자유롭게 적어보세요!" + className="w-full h-full text-[14px] font-medium text-[#D9D9D9] placeholder-[#D9D9D9] border-none outline-none resize-none leading-[17px]" + readOnly + /> + </div> + + {/* Hashtag Section */} + <div className="px-5 py-3.5 bg-[#F4F5F7]"> + <span className="text-[12px] font-medium text-[#4C4C4C]">해시태그 등록</span> + </div> + + <div className="px-5 py-4 bg-white"> + <input + type="text" + placeholder="해시태그 작성 최대 N개" + className="w-full text-[14px] font-medium text-[#4C4C4C] placeholder-[#4C4C4C] border-none outline-none" + readOnly + /> + </div> + + {/* Content Attachment Section */} + <div className="px-5 py-3.5 bg-[#F4F5F7]"> + <span className="text-[12px] font-medium text-[#4C4C4C]">콘텐츠 첨부</span> + </div> + + <div className="px-5 py-4 bg-white space-y-3"> + <div className="bg-[#F4F5F7] rounded-[10px] px-3.5 py-2.5"> + <span className="text-[14px] font-medium text-[#A6A6A6]">영상 링크 붙여넣기</span> + </div> + <div className="bg-[#F4F5F7] rounded-[10px] px-3.5 py-2.5"> + <span className="text-[14px] font-medium text-[#A6A6A6]">이미지 업로드</span> + </div> + </div> + </div> + </div> + ); +} \ No newline at end of file diff --git a/src/app/curation/components/FloatingButtons.tsx b/src/app/curation/components/FloatingButtons.tsx new file mode 100644 index 0000000..ae4fb72 --- /dev/null +++ b/src/app/curation/components/FloatingButtons.tsx @@ -0,0 +1,36 @@ +'use client'; +import Image from 'next/image'; +import { useRouter } from 'next/navigation'; + +export default function FloatingButtons() { + const router = useRouter(); + + const scrollToTop = () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + + return ( + <> + {/* 글쓰기 버튼 - 중앙 하단 */} + <div className="fixed bottom-10 left-1/2 -translate-x-1/2 z-10"> + <button + onClick={() => router.push('/write')} + className="px-6 py-3 bg-blue-900 rounded-full shadow-lg flex items-center gap-1.5" + > + <Image src="/icons/write-white.svg" alt="글쓰기" width={24} height={24} /> + <span className="text-white text-base font-semibold">글쓰기</span> + </button> + </div> + + {/* 맨 위로 버튼 - 오른쪽 하단 */} + <div className="fixed bottom-10 right-5 z-10"> + <button + onClick={scrollToTop} + className="p-3 bg-white rounded-full shadow-lg" + > + <Image src="/icons/top.svg" alt="맨 위로" width={24} height={24} /> + </button> + </div> + </> + ); +} diff --git a/src/app/curation/components/Header.tsx b/src/app/curation/components/Header.tsx new file mode 100644 index 0000000..7858e56 --- /dev/null +++ b/src/app/curation/components/Header.tsx @@ -0,0 +1,20 @@ +'use client'; +import Image from 'next/image'; +import { useRouter } from 'next/navigation'; + +export default function Header() { + const router = useRouter(); + + return ( + <header className="sticky top-0 z-20 bg-white"> + <div className="flex items-center h-14 px-5 py-3"> + <button onClick={() => router.back()}> + <Image src="/icons/back.svg" alt="뒤로가기" width={24} height={24} /> + </button> + <h1 className="ml-4 text-base font-semibold text-zinc-900"> + 다람쥐의 큐레이션 + </h1> + </div> + </header> + ); +} diff --git a/src/app/curation/components/InfoBanner.tsx b/src/app/curation/components/InfoBanner.tsx new file mode 100644 index 0000000..62d09d2 --- /dev/null +++ b/src/app/curation/components/InfoBanner.tsx @@ -0,0 +1,18 @@ +import Image from 'next/image'; + +export default function InfoBanner() { + return ( + <div className="px-6 py-7 bg-white flex flex-col items-center gap-3.5 overflow-hidden mb-2.5"> + {/* 작곡가 토크룸 소개 */} + <div className="relative mt-1 mb-4 -mx-5 bg-white p-5 flex flex-col justify-between h-48"> + <div> + <Image src="/icons/curation-logo.svg" alt="큐레이션 로고" width={222} height={68} /> + </div> + <div className="text-right"> + <div className="self-stretch text-right justify-center text-neutral-600 text-sm font-semibold font-['Pretendard']">나만의 이야기와 취향을 담아 클래식을 추천하는 공간</div> + <div className="self-stretch text-right justify-center text-zinc-300 text-xs font-medium font-['Pretendard'] mt-1">다람쥐 여러분, 누구나 이곳에서 큐레이터가 될 수 있습니다.<br />자신의 이야기를 담아 곡과 음반, 영상을 추천해보세요.</div> + </div> + </div> + </div> + ); +} diff --git a/src/app/curation/components/PostItem.tsx b/src/app/curation/components/PostItem.tsx new file mode 100644 index 0000000..efeab03 --- /dev/null +++ b/src/app/curation/components/PostItem.tsx @@ -0,0 +1,84 @@ +import Image from 'next/image'; +import Link from 'next/link'; + +interface Post { + id: number; + title: string; + content: string; + tags: string[]; + likes: number; + comments: number; + author: string; + createdAt: string; + imageUrl?: string; +} + +interface PostItemProps { + post: Post; + isFirst?: boolean; +} + +export default function PostItem({ post, isFirst = false }: PostItemProps) { + const containerClasses = `flex justify-center items-center px-3 py-4 bg-white ${ + !isFirst ? 'border-t border-zinc-200' : '' + }`; + + return ( + <Link href={`/curation/${post.id}`} className={`${containerClasses} hover:bg-gray-50 cursor-pointer transition-colors`}> + <div className="w-60 flex flex-col justify-start items-start gap-2"> + <div className="inline-flex justify-start items-center gap-1 text-zinc-400 text-xs font-semibold"> + <Image src="/icons/music.svg" alt="큐레이션" width={12} height={12} /> + <span>큐레이션글</span> + </div> + <div className="self-stretch flex flex-col justify-start items-start gap-1"> + <h3 className="self-stretch text-zinc-900 text-sm font-semibold truncate"> + {post.title} + </h3> + <p className="self-stretch text-neutral-400 text-xs font-semibold truncate"> + {post.content} + </p> + </div> + <div className="self-stretch flex flex-col justify-start items-start gap-1"> + <div className="self-stretch flex items-center gap-1"> + {post.tags.map((tag) => ( + <span key={tag} className="text-zinc-400 text-xs font-medium"> + #{tag} + </span> + ))} + </div> + <div className="self-stretch flex items-center gap-3 text-xs text-zinc-400 font-medium"> + <div className="flex items-center gap-0.5 text-blue-900"> + <Image src="/icons/heart.svg" alt="좋아요" width={12} height={12} /> + <span>{post.likes}</span> + </div> + <div className="flex items-center gap-0.5 text-blue-900"> + <Image src="/icons/message.svg" alt="댓글" width={12} height={12} /> + <span>{post.comments}</span> + </div> + <div className="flex items-center gap-1.5"> + <span>{post.createdAt}</span> + <span className="w-px h-2 bg-zinc-300" /> + <span>{post.author}</span> + </div> + </div> + </div> + </div> + {post.imageUrl ? ( + <div className="w-24 h-24 bg-zinc-300 rounded-lg ml-4 flex items-center justify-center"> + {/* 외부 이미지를 주석 처리합니다. + <Image + src={post.imageUrl} + alt={post.title} + width={96} + height={96} + className="rounded-lg object-cover w-full h-full" + /> + */} + <span className="text-xs text-gray-500">이미지</span> + </div> + ) : ( + <div className="w-24 h-24 ml-4"></div> // 이미지가 없을 때 공간을 차지하도록 빈 div 추가 + )} + </Link> + ); +} diff --git a/src/app/curation/components/PostList.tsx b/src/app/curation/components/PostList.tsx new file mode 100644 index 0000000..3b7c198 --- /dev/null +++ b/src/app/curation/components/PostList.tsx @@ -0,0 +1,46 @@ +import PostItem from './PostItem'; + +const mockPosts = [ + { + id: 1, + title: '제목이 들어갈 자리입니다', + content: '글 내용이 들어갈 자리입니다. 글 내용은 한줄 제한을 할까말까 두줄도 괜찮은 것 같고', + tags: ['태그01', '태그02', '태그03'], + likes: 3, + comments: 5, + author: '글쓴이', + createdAt: '3초전', + imageUrl: 'https://via.placeholder.com/96', + }, + { + id: 2, + title: '두 번째 큐레이션 글 제목', + content: '글 미리보기 내용이 들어갈 자리입니다.', + tags: ['클래식', '피아노', '쇼팽'], + likes: 12, + comments: 8, + author: '다람쥐', + createdAt: '1분전', + imageUrl: 'https://via.placeholder.com/96', + }, + { + id: 3, + title: '세 번째 글입니다', + content: '이 글은 이미지가 없습니다.', + tags: ['바이올린', '협주곡'], + likes: 7, + comments: 2, + author: '큐레이터', + createdAt: '5분전', + }, +]; + +export default function PostList() { + return ( + <div className="flex flex-col bg-white"> + {mockPosts.map((post, index) => ( + <PostItem key={post.id} post={post} isFirst={index === 0} /> + ))} + </div> + ); +} diff --git a/src/app/curation/components/SearchFilterBar.tsx b/src/app/curation/components/SearchFilterBar.tsx new file mode 100644 index 0000000..0aba18d --- /dev/null +++ b/src/app/curation/components/SearchFilterBar.tsx @@ -0,0 +1,23 @@ +import Image from 'next/image'; + +export default function SearchFilterBar() { + return ( + <div className="py-2.5 bg-white flex justify-center"> + <div className="w-80 px-2 py-1 bg-gray-100 rounded-full flex items-center justify-between"> + <input + type="text" + placeholder="검색어를 입력하세요" + className="flex-1 bg-transparent px-3 text-sm focus:outline-none" + /> + <div className="flex"> + <button className="p-1.5"> + <Image src="/icons/search.svg" alt="Search" width={20} height={20} /> + </button> + <button className="p-1.5"> + <Image src="/icons/filter.svg" alt="Filter" width={20} height={20} /> + </button> + </div> + </div> + </div> + ); +} diff --git a/src/app/curation/layout.tsx b/src/app/curation/layout.tsx new file mode 100644 index 0000000..1580a69 --- /dev/null +++ b/src/app/curation/layout.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +export default function CurationLayout({ + children, +}: { + children: React.ReactNode; +}) { + return <div className="bg-gray-100">{children}</div>; +} diff --git a/src/app/curation/page.tsx b/src/app/curation/page.tsx new file mode 100644 index 0000000..a538be3 --- /dev/null +++ b/src/app/curation/page.tsx @@ -0,0 +1,19 @@ +import Header from './components/Header'; +import InfoBanner from './components/InfoBanner'; +import SearchFilterBar from './components/SearchFilterBar'; +import PostList from './components/PostList'; +import FloatingButtons from './components/FloatingButtons'; + +export default function CurationPage() { + return ( + <div className="w-full max-w-md mx-auto bg-gray-100 min-h-screen relative pb-28"> + <Header /> + <main className="flex flex-col mt-px"> + <InfoBanner /> + <SearchFilterBar /> + <PostList /> + </main> + <FloatingButtons /> + </div> + ); +} diff --git a/src/app/free-talk/[postId]/comment-input.tsx b/src/app/free-talk/[postId]/comment-input.tsx new file mode 100644 index 0000000..d59da25 --- /dev/null +++ b/src/app/free-talk/[postId]/comment-input.tsx @@ -0,0 +1,75 @@ +'use client'; + +// 자유 토크룸 댓글 입력 (큐레이션 버전 재사용) +import React, { useState } from 'react'; +import Image from 'next/image'; + +interface CommentInputProps { + onSubmitComment: (content: string, isReply?: boolean, replyToId?: number) => void; + replyMode?: { isReply: boolean; replyToId: number; replyToAuthor: string } | null; + onCancelReply?: () => void; + hidden?: boolean; +} + +export default function CommentInput({ onSubmitComment, replyMode, onCancelReply, hidden }: CommentInputProps) { + const [content, setContent] = useState(''); + const [isExpanded, setIsExpanded] = useState(false); + const MAX_CHARS = 28; + + const handleSubmit = () => { + if (!content.trim()) return; + onSubmitComment(content.trim(), replyMode?.isReply || false, replyMode?.replyToId); + setContent(''); + setIsExpanded(false); + onCancelReply?.(); + }; + + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + if (content.trim() && content.length <= MAX_CHARS) handleSubmit(); + } + }; + + const isOverLimit = content.length > MAX_CHARS; + const canSubmit = content.trim() && !isOverLimit; + + return ( + <div hidden={hidden} style={{ fontFamily: 'Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif' }} className={`bg-white border border-[#F5F5F5] fixed bottom-0 left-1/2 -translate-x-1/2 w-[375px] z-50 ${isExpanded ? 'h-auto' : 'h-[88px]'}`}> + {replyMode?.isReply && ( + <div className="px-5 py-2 bg-blue-50 border-b border-blue-100"> + <div className="flex items-center justify-between"> + <span className="text-sm text-blue-600">@{replyMode.replyToAuthor}님에게 답글</span> + <button onClick={onCancelReply} className="text-blue-400 hover:text-blue-600 text-sm">✕</button> + </div> + </div> + )} + <div className="flex flex-col items-start px-5 pt-3.5 pb-7 gap-2.5"> + <div className="flex justify-center items-center gap-1.5 w-full h-11"> + <div className="w-11 h-11 rounded-full bg-[#D9D9D9] flex items-center justify-center"> + <Image src="/icons/profile.svg" alt="profile" width={20} height={20} /> + </div> + <div className="flex justify-center items-center px-3.5 py-1.5 gap-2.5 w-[286px] h-11 bg-[#F4F5F7] rounded-full relative"> + {!isExpanded ? ( + <> + <button onClick={() => setIsExpanded(true)} className="flex items-center justify-center text-[14px] font-medium leading-[17px] text-[#A6A6A6] flex-1">댓글을 남겨주세요</button> + <div className="w-6 h-6 flex items-center justify-center"><svg width="7" height="15" viewBox="0 0 7 15" fill="none"><path d="M1 1L6 7.5L1 14" stroke="#4C4C4C" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg></div> + </> + ) : ( + <div className="flex-1 relative"> + <textarea value={content} onChange={e => setContent(e.target.value)} onKeyPress={handleKeyPress} placeholder="댓글을 입력해주세요..." className={`w-full bg-transparent text-[14px] font-medium placeholder-[#A6A6A6] resize-none outline-none min-h-[20px] max-h-[100px] ${isOverLimit ? 'text-red-500' : 'text-[#1A1A1A]'}`} style={{ height: 'auto' }} onInput={e => { const t = e.target as HTMLTextAreaElement; t.style.height = 'auto'; t.style.height = Math.min(t.scrollHeight, 100) + 'px'; }} autoFocus/> + </div> + )} + </div> + </div> + {isExpanded && ( + <div className="flex justify-end items-center w-full gap-2 mt-1"> + <span className={`text-xs ${isOverLimit ? 'text-red-500' : 'text-[#A6A6A6]'}`}>{content.length}/{MAX_CHARS}</span> + <button onClick={handleSubmit} disabled={!canSubmit} className={`px-4 py-2 text-sm rounded-lg font-medium transition-colors ${canSubmit ? 'bg-[#293A92] text-white hover:bg-[#1e2a6b]' : 'bg-[#D9D9D9] text-[#A6A6A6] cursor-not-allowed'}`}>등록</button> + <button onClick={() => { setContent(''); setIsExpanded(false); onCancelReply?.(); }} className="px-3 py-2 text-sm text-[#A6A6A6] hover:text-[#4C4C4C]">취소</button> + </div> + )} + </div> + </div> + ); +} diff --git a/src/app/free-talk/[postId]/comment-item.tsx b/src/app/free-talk/[postId]/comment-item.tsx new file mode 100644 index 0000000..1bf3588 --- /dev/null +++ b/src/app/free-talk/[postId]/comment-item.tsx @@ -0,0 +1,65 @@ +'use client'; + +import { useState } from 'react'; +import Image from 'next/image'; +import { ReportModal } from './report-modal'; + +export interface CommentData { + id: number; + author: string; + timestamp: string; + content: string; + isHeartSelected?: boolean; + isReply?: boolean; +} + +interface CommentItemProps { + comment: CommentData; + composerId?: string; + onReply?: (commentId: number, author: string) => void; + onReportOpen?: () => void; + onReportClose?: () => void; +} + +export default function CommentItem({ comment, composerId, onReply, onReportOpen, onReportClose }: CommentItemProps) { + const [isReportModalOpen, setIsReportModalOpen] = useState(false); + const [isHeartSelected, setIsHeartSelected] = useState(comment.isHeartSelected || false); + + const handleReplyClick = () => onReply?.(comment.id, comment.author); + const handleHeartClick = () => setIsHeartSelected(v => !v); // TODO: backend sync + const handleReportClick = () => { setIsReportModalOpen(true); onReportOpen?.(); }; + const handleReportModalClose = () => { setIsReportModalOpen(false); onReportClose?.(); }; + + return ( + <> + {isReportModalOpen && ( + <ReportModal isOpen={isReportModalOpen} onClose={handleReportModalClose} postId={`comment-${comment.id}`} composerId={composerId || ''} /> + )} + <div className={`bg-white flex flex-col gap-2.5 py-[18px] w-full ${comment.isReply ? 'pl-[50px] pr-5' : 'px-5'}`}> + <div className="flex gap-2 items-start w-full"> + <div className="bg-[#d9d9d9] rounded-full size-[31px] flex items-center justify-center mt-1"> + <Image src="/icons/profile.svg" alt="profile" width={20} height={20} /> + </div> + <div className="flex flex-col grow"> + <p className="text-[#4c4c4c] text-[14px] font-semibold">{comment.author}</p> + <p className="text-[#d9d9d9] text-[12px] font-medium">{comment.timestamp}</p> + </div> + <div className="flex gap-0.5 items-center"> + <button onClick={handleHeartClick} className="relative size-[26px] hover:bg-gray-100 rounded-full"> + <Image src={isHeartSelected ? '/icons/heart_selected.svg' : '/icons/heart.svg'} alt="heart" width={18} height={18} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" /> + </button> + <button onClick={handleReplyClick} className="relative size-[26px] hover:bg-gray-100 rounded-full"> + <Image src="/icons/message.svg" alt="reply" width={18} height={18} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" /> + </button> + <button onClick={handleReportClick} className="relative size-[26px] hover:bg-gray-100 rounded-full"> + <Image src="/icons/alarm.svg" alt="report" width={18} height={18} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" /> + </button> + </div> + </div> + <div className="text-[#a6a6a6] text-[14px] leading-normal"> + <p>{comment.content}</p> + </div> + </div> + </> + ); +} diff --git a/src/app/free-talk/[postId]/comment-list.tsx b/src/app/free-talk/[postId]/comment-list.tsx new file mode 100644 index 0000000..b0e10db --- /dev/null +++ b/src/app/free-talk/[postId]/comment-list.tsx @@ -0,0 +1,56 @@ +'use client'; + +import React, { useState, useEffect, useRef, useCallback } from 'react'; +import CommentItem, { CommentData } from './comment-item'; + +const COMMENTS_PER_PAGE = 5; + +interface CommentListProps { + composerId?: string; + initialComments: CommentData[]; + onReply?: (commentId: number, author: string) => void; + onReportOpen?: () => void; + onReportClose?: () => void; +} + +export default function CommentList({ composerId, initialComments, onReply, onReportOpen, onReportClose }: CommentListProps) { + const [comments, setComments] = useState<CommentData[]>(initialComments.slice(0, COMMENTS_PER_PAGE)); + const [page, setPage] = useState(1); + const [hasMore, setHasMore] = useState(initialComments.length > COMMENTS_PER_PAGE); + const loader = useRef<HTMLDivElement | null>(null); + + useEffect(() => { + const currentPageComments = initialComments.slice(0, page * COMMENTS_PER_PAGE); + setComments(currentPageComments); + setHasMore(currentPageComments.length < initialComments.length); + }, [initialComments, page]); + + const loadMoreComments = useCallback(() => { + if (!hasMore) return; + const nextPage = page + 1; + const newComments = initialComments.slice(0, nextPage * COMMENTS_PER_PAGE); + setComments(newComments); + setPage(nextPage); + if (newComments.length >= initialComments.length) setHasMore(false); + }, [hasMore, page, initialComments]); + + useEffect(() => { + const observer = new IntersectionObserver(entries => { + if (entries[0].isIntersecting && hasMore) { + setTimeout(() => loadMoreComments(), 400); + } + }, { threshold: 1.0 }); + const current = loader.current; + if (current) observer.observe(current); + return () => { if (current) observer.unobserve(current); }; + }, [hasMore, loadMoreComments]); + + return ( + <> + {comments.map(c => ( + <CommentItem key={c.id} comment={c} composerId={composerId} onReply={onReply} onReportOpen={onReportOpen} onReportClose={onReportClose} /> + ))} + {hasMore && <div ref={loader} className="py-4 text-center text-zinc-500">댓글을 불러오는 중...</div>} + </> + ); +} diff --git a/src/app/free-talk/[postId]/page.tsx b/src/app/free-talk/[postId]/page.tsx new file mode 100644 index 0000000..8c3ee48 --- /dev/null +++ b/src/app/free-talk/[postId]/page.tsx @@ -0,0 +1,331 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import Image from 'next/image'; +import Link from 'next/link'; +import CommentInput from './comment-input'; +import CommentList from './comment-list'; +import { ReportButton } from './report-button'; + +// 추후 실제 API 연동을 위한 타입 +interface FreeTalkPost { + id: string; + author: string; + userId: string; + title: string; + content: string; + tags: string[]; + createdAt: string; // ISO string + likes: number; + comments: number; + hasImage: boolean; + images?: string[]; +} + +interface CommentData { + id: number; + author: string; + timestamp: string; + content: string; + isHeartSelected?: boolean; + isReply?: boolean; + parentId?: number; +} + +/** + * =============================== + * DATA FETCHING LAYER (SWAPPABLE) + * =============================== + * 1) 현재는 MOCK 데이터를 사용합니다. + * 2) 나중에 실제 백엔드 URL을 전달받으면 REAL fetch 부분의 주석을 해제하고 + * USE_MOCK = false 로 바꾸면 그대로 동작하도록 설계했습니다. + * 3) 에러/로딩/변환(어댑터) 한 곳에서 처리 → 컴포넌트 깔끔 유지. + */ + +// ----- 환경 스위치 ----- +const USE_MOCK = true; // 실제 연동 시 false 로 변경 +const USE_COMMENT_API = true; // 댓글 POST/GET 사용 여부 (USE_MOCK=false 와 함께 실사용 권장) + +// ----- 실제 API 엔드포인트 (나중에 URL 주입) ----- +// const API_BASE = process.env.NEXT_PUBLIC_API_BASE ?? 'https://api.example.com'; +// const ENDPOINT = (postId: string) => `${API_BASE}/free-talk/${postId}`; + +// ----- 공용 어댑터 (백엔드 응답 -> FreeTalkPost) ----- +// interface FreeTalkPostApiResponse { ...백엔드 스키마... } +// function adaptFreeTalkPost(res: FreeTalkPostApiResponse): FreeTalkPost { return { ... } } + +// ----- MOCK 구현 ----- +async function fetchMockPost(postId: string): Promise<FreeTalkPost> { + await new Promise(r => setTimeout(r, 200)); + return { + id: postId, + author: '익명다람쥐', + userId: 'user123', + title: `샘플 자유글 제목 ${postId}`, + content: '이곳은 자유 토크룸 글 내용입니다. 백엔드 연동 후 실제 데이터가 표기됩니다.\n여러 줄도 정상적으로 표현됩니다.', + tags: ['#잡담', '#클래식', '#일상'], + createdAt: new Date().toISOString(), + likes: 5, + comments: 2, + hasImage: true, + images: ['/icons/img.svg'] + }; +} + +// ----- REAL FETCH (나중에 사용) ----- +// async function fetchRealPost(postId: string): Promise<FreeTalkPost> { +// const res = await fetch(ENDPOINT(postId), { +// method: 'GET', +// headers: { +// 'Content-Type': 'application/json', +// // 필요 시 인증 토큰 추가: Authorization: `Bearer ${token}` +// }, +// // 캐시 전략 (SSR/ISR 고려 시 조정): +// // next: { revalidate: 60 } +// }); +// if (!res.ok) throw new Error('게시글 요청 실패'); +// const json = await res.json(); +// // return adaptFreeTalkPost(json); +// // 임시: 백엔드 스키마 확정 전 직렬화 예시 +// return json as FreeTalkPost; // (스키마 확정 후 어댑터 적용 권장) +// } + +// ----- Unified Fetch Wrapper ----- +async function fetchPostDetail(postId: string): Promise<FreeTalkPost> { + if (USE_MOCK) return fetchMockPost(postId); + // return fetchRealPost(postId); + return fetchMockPost(postId); // 안전장치 (실제 전환 시 위 라인 주석 해제) +} + +interface PageProps { + params: Promise<{ postId: string }>; // Next 15 app router async params +} + +export default function FreeTalkPostDetail({ params }: PageProps) { + const [post, setPost] = useState<FreeTalkPost | null>(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState<string | null>(null); + const [postId, setPostId] = useState<string>(''); + const [liked, setLiked] = useState(false); + const [likesCount, setLikesCount] = useState(0); + const [bookmarked, setBookmarked] = useState(false); + + // 댓글 상태 + const [comments, setComments] = useState<CommentData[]>([]); + const [replyMode, setReplyMode] = useState<{ isReply: boolean; replyToId: number; replyToAuthor: string } | null>(null); + const [hideInput, setHideInput] = useState(false); // 신고 모달 열릴 때 입력 숨김 + + useEffect(() => { + let active = true; + params.then(async ({ postId }) => { + setPostId(postId); + try { + const data = await fetchPostDetail(postId); + if (active) { + setPost(data); + } + } catch (e: any) { + if (active) setError(e.message || '게시글을 불러오지 못했습니다.'); + } finally { + if (active) setLoading(false); + } + }); + return () => { active = false; }; + }, [params]); + + // 초기 Mock 댓글 세팅 (포스트 로드 후 1회) + useEffect(() => { + if (post) { + setLikesCount(post.likes); + // 샘플 댓글 8개 (답글 포함) + const mock: CommentData[] = [ + { id: 1, author: '익명1', timestamp: '1분 전', content: '재밌는 글이네요!', isHeartSelected: false }, + { id: 2, author: '익명2', timestamp: '3분 전', content: '동의합니다 ㅎㅎ', isHeartSelected: true }, + { id: 3, author: '익명3', timestamp: '5분 전', content: '클래식은 언제나 옳죠', isHeartSelected: false }, + { id: 4, author: '익명4', timestamp: '10분 전', content: '좋은 하루 되세요', isHeartSelected: false }, + { id: 5, author: '익명5', timestamp: '15분 전', content: '저도 비슷한 경험!', isHeartSelected: false }, + { id: 6, author: '익명6', timestamp: '20분 전', content: '답글 예시', isHeartSelected: false, isReply: true, parentId: 2 }, + { id: 7, author: '익명7', timestamp: '25분 전', content: '또 다른 댓글', isHeartSelected: false }, + { id: 8, author: '익명8', timestamp: '30분 전', content: '또 다른 답글', isHeartSelected: false, isReply: true, parentId: 7 } + ]; + setComments(mock); + } + }, [post]); + + const handleToggleLike = () => { + setLiked(prev => !prev); + setLikesCount(c => (liked ? c - 1 : c + 1)); + // TODO: backend sync + }; + + const handleToggleBookmark = () => { + setBookmarked(prev => !prev); + // TODO: backend sync + }; + + const handleAddComment = async (content: string, isReply?: boolean, replyToId?: number) => { + // 낙관적 UI 반영 + const optimisticId = Date.now(); + const optimistic: CommentData = { + id: optimisticId, + author: '익명다람쥐', + timestamp: '방금', + content, + isReply: !!isReply, + parentId: replyToId + }; + setComments(prev => [...prev, optimistic]); + if (!isReply) setPost(p => p ? { ...p, comments: p.comments + 1 } : p); + setReplyMode(null); + + if (USE_COMMENT_API) { + try { + const res = await fetch(`/api/free-talk/${postId}/comments`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ content, parentId: replyToId }) + }); + if (res.ok) { + const json = await res.json(); + if (json?.comment) { + // 낙관적 항목 교체 + setComments(prev => prev.map(c => c.id === optimisticId ? { ...json.comment, timestamp: '방금' } : c)); + } + } else { + throw new Error('댓글 전송 실패'); + } + } catch (e) { + console.error(e); + // 롤백 + setComments(prev => prev.filter(c => c.id !== optimisticId)); + if (!isReply) setPost(p => p ? { ...p, comments: Math.max(0, p.comments - 1) } : p); + alert('댓글 전송에 실패했습니다. 다시 시도해주세요.'); + } + } + }; + + const handleReply = (commentId: number, author: string) => { + setReplyMode({ isReply: true, replyToId: commentId, replyToAuthor: author }); + }; + + const handleReportOpen = () => setHideInput(true); + const handleReportClose = () => setHideInput(false); + + if (loading) { + return ( + <div className="w-full max-w-md mx-auto min-h-screen flex items-center justify-center text-sm text-zinc-500"> + 로딩 중... + </div> + ); + } + + if (error || !post) { + return ( + <div className="w-full max-w-md mx-auto min-h-screen flex items-center justify-center text-sm text-red-500"> + {error || '게시글을 찾을 수 없습니다.'} + </div> + ); + } + + const formattedDate = new Date(post.createdAt).toLocaleString('ko-KR', { hour12: false }); + + return ( + <div className="bg-gray-100 min-h-screen pb-40" style={{ fontFamily: 'Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif' }}>{/* bottom padding for fixed input */} + <div className="bg-white w-96 mx-auto shadow-[0_0_0_1px_rgba(0,0,0,0.02)]"> + {/* Header */} + <div className="h-14 flex items-center gap-1 px-5 border-b border-neutral-100"> + <Link href="/free-talk" className="w-9 h-9 -ml-2 flex items-center justify-center rounded-full hover:bg-neutral-100 active:bg-neutral-200" aria-label="뒤로가기"> + <svg width="18" height="18" viewBox="0 0 30 30" fill="none" aria-hidden="true"> + <path d="M18 22L11 14.5L18 7" stroke="#1A1A1A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> + </svg> + </Link> + <div className="flex-1 text-zinc-900 text-base font-semibold text-center">자유 토크룸</div> + <div className="w-9 h-9 flex items-center justify-center -mr-2"> + <ReportButton postId={post.id} composerId={post.userId} onOpenChange={(o)=> setHideInput(o)} /> + </div> + </div> + + {/* Writer Info */} + <div className="px-5 pb-5 pt-4 flex flex-col gap-4"> + <div className="w-full flex items-start gap-2"> + <Link href={`/writer-profile/${post.userId}`} className="w-8 h-8 rounded-md bg-zinc-300 flex-shrink-0" /> + <div className="flex-1 flex flex-col"> + <p className="text-neutral-600 text-sm font-semibold leading-none mb-1">{post.author}</p> + <p className="text-zinc-300 text-xs font-medium leading-none">{formattedDate}</p> + </div> + <div className="flex items-center gap-[3px]"> + <div className="w-3 h-3 bg-stone-300 rounded-sm" /> + <span className="text-zinc-300 text-xs font-semibold">자유글</span> + </div> + </div> + + {/* Title */} + <div className="flex flex-col gap-2"> + <h2 className="text-base font-semibold text-zinc-900 leading-snug break-words">{post.title}</h2> + {/* Content */} + <div className="text-neutral-400 text-sm font-medium whitespace-pre-wrap leading-relaxed">{post.content}</div> + </div> + + {/* Tags */} + <div className="flex gap-1 flex-wrap text-zinc-300 text-sm font-medium"> + {post.tags.map(tag => <span key={tag}>{tag}</span>)} + </div> + + {/* Images */} + {post.images && post.images.length > 0 && ( + <div className="flex gap-[5px]"> + {post.images.slice(0,3).map((src, idx) => ( + <div key={idx} className="w-36 h-36 bg-zinc-300 rounded-lg flex items-center justify-center overflow-hidden"> + <Image src={src} alt="이미지" width={60} height={60} className="opacity-30" /> + </div> + ))} + </div> + )} + + {/* Reactions */} + <div className="flex justify-between items-center mt-5"> + <div className="flex items-center gap-2.5"> + <button onClick={handleToggleLike} className="flex items-center gap-1.5 group" aria-pressed={liked}> + <div className="w-6 h-6 flex items-center justify-center"> + <Image src={liked ? '/icons/heart_selected.svg' : '/icons/heart.svg'} alt="좋아요" width={20} height={20} /> + </div> + <span className={`text-xs font-medium ${liked ? 'text-blue-900' : 'text-neutral-400 group-hover:text-neutral-600'}`}>좋아요{likesCount > 0 ? ` ${likesCount}` : ''}</span> + </button> + <button onClick={handleToggleBookmark} className="flex items-center gap-1.5 group" aria-pressed={bookmarked}> + <div className="w-6 h-6 flex items-center justify-center"> + <Image src={bookmarked ? '/icons/bookmark-on.svg' : '/icons/bookmark-off.svg'} alt="스크랩" width={20} height={20} /> + </div> + <span className={`text-xs font-medium ${bookmarked ? 'text-blue-900' : 'text-neutral-400 group-hover:text-neutral-600'}`}>스크랩</span> + </button> + </div> + <button className="w-6 h-6 flex items-center justify-center" aria-label="공유"> + <Image src="/icons/share.svg" alt="공유" width={20} height={20} /> + </button> + </div> + </div> + </div> + {/* 댓글 영역 */} + <div className="w-96 mx-auto mt-2 flex flex-col gap-1.5"> + <div className="bg-white"> + <div className="px-5 pt-5 pb-2 border-b border-neutral-100 flex items-center justify-between"> + <h3 className="text-sm font-semibold text-zinc-900">댓글</h3> + <span className="text-[11px] text-zinc-400">총 {post.comments}개</span> + </div> + <CommentList + composerId={post.userId} + initialComments={comments.sort((a,b) => a.id - b.id)} + onReply={handleReply} + onReportOpen={handleReportOpen} + onReportClose={handleReportClose} + /> + </div> + </div> + <CommentInput + onSubmitComment={handleAddComment} + replyMode={replyMode} + onCancelReply={() => setReplyMode(null)} + hidden={hideInput} + /> + </div> + ); +} diff --git a/src/app/free-talk/[postId]/report-button.tsx b/src/app/free-talk/[postId]/report-button.tsx new file mode 100644 index 0000000..6afed58 --- /dev/null +++ b/src/app/free-talk/[postId]/report-button.tsx @@ -0,0 +1,35 @@ +'use client'; + +import { useState } from 'react'; +import { ReportModal } from './report-modal'; + +interface ReportButtonProps { + postId: string; + composerId: string; + onOpenChange?: (open: boolean) => void; +} + +export function ReportButton({ postId, composerId, onOpenChange }: ReportButtonProps) { + const [isModalOpen, setIsModalOpen] = useState(false); + return ( + <> + <button + onClick={() => { setIsModalOpen(true); onOpenChange?.(true); }} + className="p-1 hover:bg-gray-100 rounded-full transition-colors" + aria-label="신고하기" + > + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-zinc-400"> + <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-2h-2v2zm0-4h2V7h-2v6z" fill="currentColor" /> + </svg> + </button> + {isModalOpen && ( + <ReportModal + isOpen={isModalOpen} + onClose={() => { setIsModalOpen(false); onOpenChange?.(false); }} + postId={postId} + composerId={composerId} + /> + )} + </> + ); +} diff --git a/src/app/free-talk/[postId]/report-modal.tsx b/src/app/free-talk/[postId]/report-modal.tsx new file mode 100644 index 0000000..6d6f097 --- /dev/null +++ b/src/app/free-talk/[postId]/report-modal.tsx @@ -0,0 +1,129 @@ +'use client'; + +import { useState } from 'react'; + +interface ReportModalProps { + isOpen: boolean; + onClose: () => void; + onSubmit?: () => void; + postId: string; + composerId: string; +} + +// 자유 토크룸 전용 신고 사유 목록 +const REPORT_REASONS = [ + { id: 1, title: '1. 스팸/광고', description: '무관한 상업 광고, 도배성 홍보, 외부 사이트 유도' }, + { id: 2, title: '2. 부적절한 언어/욕설', description: '비속어, 혐오 발언, 음란 표현 등' }, + { id: 3, title: '3. 명예훼손/비방', description: '특정 개인/단체에 대한 악의적 허위사실 유포' }, + { id: 4, title: '4. 저작권 침해', description: '불법 복제 음원/영상/악보/촬영, 무단 이미지 사용' }, + { id: 5, title: '5. 주제와 무관한 내용', description: '카테고리/토크룸 주제와 전혀 상관없는 내용' }, + { id: 6, title: '6. 개인정보 유출', description: '전화번호, 주소, 계좌번호 등 개인정보 노출' }, + { id: 7, title: '7. 기타 (내용 입력 필수)', description: '위 항목에 해당하지 않는 부적절한 콘텐츠' } +]; + +export function ReportModal({ isOpen, onClose, onSubmit, postId, composerId }: ReportModalProps) { + const [selectedReason, setSelectedReason] = useState<number | null>(null); + const [additionalComment, setAdditionalComment] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleSubmit = async () => { + if (!selectedReason) return; + setIsSubmitting(true); + try { + const response = await fetch('/api/report', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ postId, composerId, reason: selectedReason, comment: additionalComment }) + }); + if (response.ok) { + alert('신고가 접수되었습니다.'); + onSubmit ? onSubmit() : onClose(); + } else { + alert('신고 접수 중 오류가 발생했습니다.'); + } + } catch (e) { + console.error(e); + alert('신고 접수 중 오류가 발생했습니다.'); + } finally { + setIsSubmitting(false); + } + }; + + if (!isOpen) return null; + + return ( + <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center"> + <div className="bg-white w-[375px] max-h-[90vh] overflow-y-auto" style={{ fontFamily: 'Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif' }}> + {/* Header */} + <div className="flex items-center justify-between px-5 py-3 border-b border-gray-100"> + <div className="flex items-center gap-1"> + <button onClick={onClose} className="flex items-center justify-center w-6 h-6" aria-label="닫기"> + <svg width="7" height="15" viewBox="0 0 7 15" fill="none" className="rotate-180"> + <path d="M1 1L6 7.5L1 14" stroke="#1A1A1A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> + </svg> + </button> + <h2 className="text-base font-semibold text-[#1A1A1A] ml-1">신고하기</h2> + </div> + <div className="flex items-center gap-1.5"> + <button onClick={handleSubmit} disabled={!selectedReason || isSubmitting} className="flex items-center justify-center px-3.5 py-1.5 bg-[#293A92] rounded-full disabled:opacity-50"> + <span className="text-[13px] font-semibold text-white">등록</span> + <svg width="12" height="11" viewBox="0 0 12 11" className="ml-0.5 rotate-90"> + <path d="M1 1L6 7.5L1 14" stroke="#BFC4DE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> + </svg> + </button> + </div> + </div> + + {/* Post Type Section */} + <div className="px-5 py-3.5 bg-[#F4F5F7]"> + <span className="text-[12px] font-medium text-[#4C4C4C]">게시글 유형</span> + </div> + <div className="flex items-center px-6 py-4"> + <div className="w-3 h-3 mr-2"> + <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="#293A92" /></svg> + </div> + <span className="text-[14px] font-semibold text-[#1A1A1A]">자유글</span> + </div> + + {/* Title Section */} + <div className="px-5 py-3.5 bg-[#F4F5F7]"> + <span className="text-[12px] font-medium text-[#4C4C4C]">게시글 제목</span> + </div> + <div className="px-5 py-4"> + <input readOnly type="text" placeholder="자유글 제목" className="w-full text-[14px] font-medium text-[#D9D9D9] placeholder-[#D9D9D9] outline-none" /> + </div> + + {/* Report Reasons */} + <div className="px-5 py-5"> + <h3 className="text-base font-semibold text-[#1A1A1A] mb-5">신고 사유 선택</h3> + <div className="space-y-5"> + {REPORT_REASONS.map(r => ( + <div key={r.id} className="flex items-center gap-4.5"> + <button onClick={() => setSelectedReason(r.id)} className={`w-3 h-3 rounded-full border-[1.5px] ${selectedReason === r.id ? 'bg-[#293A92] border-[#293A92]' : 'border-[#D9D9D9] bg-white'}`} /> + <div className="flex-1"> + <div className="text-[14px] font-semibold text-[#4C4C4C] leading-[17px] tracking-[-0.02em]">{r.title}</div> + <div className="text-[14px] font-medium text-[#BFBFBF] leading-[17px] tracking-[-0.02em] mt-0.5">{r.description}</div> + </div> + </div> + ))} + </div> + {selectedReason === 7 && ( + <div className="mt-4"> + <div className="w-[284px] h-[88px] bg-[#F5F5F5] rounded-[10px] p-3.5"> + <textarea value={additionalComment} onChange={e => setAdditionalComment(e.target.value)} placeholder="기타 내용 작성" className="w-full h-full bg-transparent text-[12px] font-medium text-[#BFBFBF] placeholder-[#BFBFBF] outline-none resize-none" maxLength={200} /> + </div> + </div> + )} + </div> + + {/* Content Section */} + <div className="px-5 py-3.5 bg-[#F4F5F7]"> + <span className="text-[12px] font-medium text-[#4C4C4C]">게시글 내용</span> + </div> + <div className="px-5 py-4 h-[160px]"> + <textarea readOnly placeholder="신고 대상 게시글 내용" className="w-full h-full text-[14px] font-medium text-[#D9D9D9] placeholder-[#D9D9D9] outline-none resize-none" /> + </div> + </div> + </div> + ); +} diff --git a/src/app/free-talk/components/Header.tsx b/src/app/free-talk/components/Header.tsx new file mode 100644 index 0000000..85ae624 --- /dev/null +++ b/src/app/free-talk/components/Header.tsx @@ -0,0 +1,99 @@ +'use client'; + +import { useRouter } from 'next/navigation'; +import { useCallback } from 'react'; + +interface HeaderProps { + title?: string; + /** 기본: history back */ + onBack?: () => void; + /** 신고 아이콘 표시 여부 */ + showReport?: boolean; + /** 신고 클릭 핸들러 (모달 열기 등) */ + onReportClick?: () => void; + /** 추가 클래스 */ + className?: string; + /** 상단 고정 여부 */ + sticky?: boolean; +} + +/** + * 자유 토크룸 헤더 (디자인 시안 반영) + * - 폭 고정 384px (w-96) + * - 좌: 뒤로가기 / 중앙: 타이틀 / 우: 신고 버튼 (옵션) + * - 넓은 터치 영역 (38~44px) 확보 + */ +export default function Header({ + title = '자유 토크룸', + onBack, + showReport = false, + onReportClick, + className, + sticky = false +}: HeaderProps) { + const router = useRouter(); + + const handleBack = useCallback(() => { + if (onBack) return onBack(); + // history stack이 없을 수도 있으니 fallback 홈 + if (typeof window !== 'undefined' && window.history.length > 1) { + router.back(); + } else { + router.push('/free-talk'); + } + }, [onBack, router]); + + const handleReport = useCallback(() => { + onReportClick?.(); + }, [onReportClick]); + + const headerClass = [ + 'w-full flex justify-center bg-white', + sticky ? 'sticky top-0 z-40 shadow-[0_1px_0_0_rgba(0,0,0,0.04)]' : '', + className || '' + ].filter(Boolean).join(' '); + + return ( + <header + className={headerClass} + style={{ fontFamily: 'Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif' }} + > + <div className="w-96 px-5 h-14 flex items-center gap-1 select-none"> + {/* Back Button */} + <button + type="button" + onClick={handleBack} + aria-label="뒤로가기" + className="relative w-9 h-9 -ml-1 flex items-center justify-center rounded-full hover:bg-neutral-100 active:bg-neutral-200 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400" + > + {/* inline svg (left arrow) */} + <svg width="18" height="18" viewBox="0 0 30 30" fill="none" aria-hidden="true"> + <path d="M18 22L11 14.5L18 7" stroke="#1A1A1A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> + </svg> + </button> + + {/* Title */} + <h1 className="flex-1 text-center text-zinc-900 text-base font-semibold tracking-tight leading-none"> + {title} + </h1> + + {/* Report (optional) */} + {showReport ? ( + <button + type="button" + onClick={handleReport} + aria-label="신고" + className="relative w-9 h-9 -mr-1 flex items-center justify-center rounded-full hover:bg-neutral-100 active:bg-neutral-200 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400" + > + <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"> + <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-1 15h2v-2h-2v2Zm0-4h2V7h-2v6Z" fill="#1A1A1A" /> + </svg> + </button> + ) : ( + // 공간 유지 (정렬 균형) - 필요 없으면 빈 div 제거 가능 + <div className="w-9 h-9 -mr-1" /> + )} + </div> + </header> + ); +} diff --git a/src/app/free-talk/components/InfoBanner.tsx b/src/app/free-talk/components/InfoBanner.tsx new file mode 100644 index 0000000..3b2ef0e --- /dev/null +++ b/src/app/free-talk/components/InfoBanner.tsx @@ -0,0 +1,27 @@ +'use client'; + +import Image from 'next/image'; + +export default function InfoBanner() { + return ( + <div className="self-stretch px-6 py-7 bg-white flex flex-col justify-start items-start gap-3.5 overflow-hidden"> + <div className="relative w-full h-16"> + <Image + src="/icons/freetalk-logo.svg" + alt="자유 토크룸 로고" + layout="fill" + objectFit="contain" + objectPosition="left" + /> + </div> + <div className="self-stretch flex flex-col justify-start items-start gap-1"> + <div className="self-stretch text-neutral-600 text-sm font-semibold font-['Pretendard']"> + 클래식부터 일상까지 자유롭게 이야기를 주고받는 공간 + </div> + <div className="self-stretch text-zinc-300 text-xs font-medium font-['Pretendard']"> + 이용수칙을 준수하여 자유롭게 다람쥐들과 대화를 나눠보세요. + </div> + </div> + </div> + ); +} diff --git a/src/app/free-talk/components/PostItem.tsx b/src/app/free-talk/components/PostItem.tsx new file mode 100644 index 0000000..e0249fa --- /dev/null +++ b/src/app/free-talk/components/PostItem.tsx @@ -0,0 +1,93 @@ +'use client'; + +import Image from 'next/image'; +import Link from 'next/link'; + +interface PostItemProps { + id: number; + title: string; + content: string; + tags: string[]; + likes: number; + comments: number; + timeAgo: string; + author: string; + hasImage?: boolean; +} + +export default function PostItem({ + id, + title, + content, + tags, + likes, + comments, + timeAgo, + author, + hasImage = true +}: PostItemProps) { + return ( + <div className="self-stretch px-3 py-4 bg-white border-b border-gray-100"> + <Link href={`/free-talk/${id}`} className="inline-flex justify-center items-center w-full hover:bg-gray-50 transition-colors rounded-lg p-2"> + <div className="flex-1 flex flex-col justify-start items-start gap-2"> + <div className="inline-flex justify-start items-center gap-[3px]"> + <div className="w-3 h-3 relative"> + <Image + src="/icons/talkIcon.svg" + alt="자유글" + layout="fill" + className="opacity-70" + /> + </div> + <div className="text-zinc-400 text-xs font-semibold font-['Pretendard']">자유글</div> + </div> + + <div className="self-stretch flex flex-col justify-start items-start gap-1"> + <div className="self-stretch text-zinc-900 text-sm font-semibold font-['Pretendard'] line-clamp-1"> + {title} + </div> + <div className="self-stretch text-neutral-400 text-xs font-['Pretendard'] line-clamp-2"> + {content} + </div> + </div> + + <div className="self-stretch flex flex-col justify-start items-start gap-1"> + <div className="self-stretch inline-flex justify-start items-center gap-1 overflow-hidden"> + {tags.slice(0, 3).map((tag, index) => ( + <div key={index} className="text-zinc-400 text-xs font-medium font-['Pretendard'] whitespace-nowrap"> + #{tag} + </div> + ))} + </div> + + <div className="self-stretch inline-flex justify-start items-center gap-2 text-xs text-zinc-400 font-medium"> + <div className="flex items-center gap-0.5"> + <Image src="/icons/heart.svg" alt="좋아요" width={12} height={12} /> + <span className="text-blue-900">{likes}</span> + </div> + <div className="flex items-center gap-0.5"> + <Image src="/icons/message.svg" alt="댓글" width={12} height={12} /> + <span className="text-blue-900">{comments}</span> + </div> + <span>{timeAgo}</span> + <span className="w-px h-2 bg-gray-300" /> + <span>{author}</span> + </div> + </div> + </div> + + {hasImage && ( + <div className="w-24 h-24 bg-gray-200 rounded-lg flex items-center justify-center overflow-hidden ml-4 shrink-0"> + <Image + src="/icons/img.svg" + alt="게시글 이미지" + width={32} + height={32} + className="opacity-40" + /> + </div> + )} + </Link> + </div> + ); +} diff --git a/src/app/free-talk/components/PostList.tsx b/src/app/free-talk/components/PostList.tsx new file mode 100644 index 0000000..3d92b73 --- /dev/null +++ b/src/app/free-talk/components/PostList.tsx @@ -0,0 +1,76 @@ +'use client'; + +import PostItem from './PostItem'; + +const samplePosts = [ + { + id: 1, + title: "베토벤 교향곡 9번 '합창' 후기", + content: "오늘 처음으로 베토벤 9번 교향곡을 끝까지 들어봤는데, 마지막 합창 부분에서 소름이 돋았어요. 클래식 초보인데도 이런 감동을 느낄 수 있다니...", + tags: ["베토벤", "교향곡9번", "클래식입문"], + likes: 15, + comments: 4, + timeAgo: "10분 전", + author: "클래식새내기", + hasImage: true + }, + { + id: 2, + title: "요즘 자주 듣는 쇼팽 녹턴 추천합니다.", + content: "밤에 일기 쓰거나 책 읽을 때 쇼팽 녹턴을 자주 들어요. 특히 2번이랑 20번은 마음이 편안해지는 느낌이라 좋아요. 다른 분들은 어떤 곡 좋아하세요?", + tags: ["쇼팽", "녹턴", "피아노"], + likes: 22, + comments: 8, + timeAgo: "1시간 전", + author: "감성다람쥐", + hasImage: true + }, + { + id: 3, + title: "클래식 공연 같이 갈 친구 구해요!", + content: "이번 주말에 예술의전당에서 하는 오케스트라 공연 예매했는데 같이 갈 친구가 갑자기 약속을 취소했네요. 클래식 좋아하는 분 중에 같이 가실 분 있을까요?", + tags: ["공연", "예술의전당", "친구구함"], + likes: 5, + comments: 12, + timeAgo: "3시간 전", + author: "공연메이트", + hasImage: false + }, + { + id: 4, + title: "다들 클래식 입문 어떤 곡으로 하셨나요?", + content: "저는 비발디의 '사계'로 클래식에 처음 입문했어요. 각 계절을 음악으로 표현한 게 너무 신기하고 재미있더라고요. 다른 분들의 입문곡도 궁금해요!", + tags: ["입문곡", "비발디", "사계"], + likes: 31, + comments: 15, + timeAgo: "5시간 전", + author: "궁금한도토리", + hasImage: true + } +]; + +export default function PostList({ searchTerm }: { searchTerm?: string }) { + const filteredPosts = samplePosts.filter(post => + post.title.toLowerCase().includes(searchTerm?.toLowerCase() || '') || + post.content.toLowerCase().includes(searchTerm?.toLowerCase() || '') + ); + + return ( + <div className="self-stretch bg-white flex flex-col justify-start items-center"> + {filteredPosts.map((post) => ( + <PostItem + key={post.id} + id={post.id} + title={post.title} + content={post.content} + tags={post.tags} + likes={post.likes} + comments={post.comments} + timeAgo={post.timeAgo} + author={post.author} + hasImage={post.hasImage} + /> + ))} + </div> + ); +} diff --git a/src/app/free-talk/components/SearchFilterBar.tsx b/src/app/free-talk/components/SearchFilterBar.tsx new file mode 100644 index 0000000..0fe7d83 --- /dev/null +++ b/src/app/free-talk/components/SearchFilterBar.tsx @@ -0,0 +1,60 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import Image from 'next/image'; +import { useRouter, useSearchParams } from 'next/navigation'; + +export default function SearchFilterBar() { + const router = useRouter(); + const searchParams = useSearchParams(); + const [searchTerm, setSearchTerm] = useState(''); + + useEffect(() => { + setSearchTerm(searchParams.get('search') || ''); + }, [searchParams]); + + const handleSearch = (e: React.FormEvent) => { + e.preventDefault(); + router.push(`/free-talk?search=${searchTerm}`); + }; + + const handleRulesClick = () => { + // TODO: 규칙 모달 열기 / 페이지 이동 등 원하는 동작 연결 + console.log('이용수칙 버튼 클릭'); + }; + + return ( + <div className="self-stretch py-2.5 bg-white flex justify-center items-center"> + <div className="w-full px-5 inline-flex justify-center items-start gap-1.5"> + <form onSubmit={handleSearch} className="flex-1"> + <div className="px-2.5 py-[5px] bg-gray-100 rounded-[100px] flex justify-start items-center gap-2 overflow-hidden hover:bg-gray-200 transition-colors"> + <input + type="text" + placeholder="자유 토크 검색..." + value={searchTerm} + onChange={(e) => setSearchTerm(e.target.value)} + className="flex-1 bg-transparent text-sm font-medium font-['Pretendard'] text-gray-700 placeholder-gray-400 focus:outline-none" + /> + <button type="submit" className="w-7 h-7 relative flex items-center justify-center hover:opacity-70 transition-opacity"> + <Image src="/icons/search.svg" alt="검색" width={24} height={24} priority /> + </button> + </div> + </form> + <button + type="button" + onClick={handleRulesClick} + aria-label="이용수칙 보기" + className="w-10 h-10 rounded-full flex justify-center items-center bg-gray-100 hover:bg-gray-200 active:bg-gray-300 transition-colors" + > + <Image + src="/icons/rules_icon.svg" + alt="이용수칙" + width={27} + height={27} + priority + /> + </button> + </div> + </div> + ); +} diff --git a/src/app/free-talk/page.tsx b/src/app/free-talk/page.tsx new file mode 100644 index 0000000..c339b20 --- /dev/null +++ b/src/app/free-talk/page.tsx @@ -0,0 +1,31 @@ +'use client'; + +import Header from './components/Header'; +import InfoBanner from './components/InfoBanner'; +import SearchFilterBar from './components/SearchFilterBar'; +import PostList from './components/PostList'; +import WriteButton from '@/components/WriteButton'; + +export default function FreeTalkPage({ + searchParams, +}: { + searchParams?: { + search?: string; + }; +}) { + const searchTerm = searchParams?.search || ''; + + return ( + <div className="relative w-full max-w-md mx-auto bg-gray-100 min-h-screen overflow-hidden"> + <div className="w-full inline-flex flex-col justify-start items-center gap-2.5"> + <div className="w-full flex flex-col justify-start items-start"> + <Header /> + </div> + <InfoBanner /> + <SearchFilterBar /> + <PostList searchTerm={searchTerm} /> + </div> + <WriteButton board="free-talk" /> + </div> + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9098302..d7075b3 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -11,7 +11,6 @@ export default function RootLayout({ children }: { children: React.ReactNode }) <div className="w-full max-w-[375px] min-h-screen flex flex-col bg-white shadow-lg"> {/* 헤더 */} - {/* 페이지 콘텐츠 (children) */} <main className="w-full flex-1"> {children} diff --git a/src/app/loginpage/page.tsx b/src/app/loginpage/page.tsx index 22bbb3a..df8b9e5 100644 --- a/src/app/loginpage/page.tsx +++ b/src/app/loginpage/page.tsx @@ -1,9 +1,11 @@ 'use client'; import React, { useState } from 'react'; +import { useRouter } from 'next/navigation'; import Image from 'next/image'; import Link from 'next/link'; import ToastNotification from '../../components/ToastNotification'; +import { useUserProfileStore } from '../../store/userProfileStore'; const loginpage = () => { const [email, setEmail] = useState(''); @@ -11,6 +13,8 @@ const loginpage = () => { const [showPassword, setShowPassword] = useState(false); const [toast, setToast] = useState({ show: false, message: '' }); const [isLoading, setIsLoading] = useState(false); + const router = useRouter(); + const setProfile = useUserProfileStore((state) => state.setProfile); const handleLogin = async () => { // 입력 검증 @@ -24,6 +28,51 @@ const loginpage = () => { return; } + // 관리자 임시 로그인 우회 + //보안위험************** + if (email.trim() === 'admin@gmail.com' && password === 'admin1234!') { + setToast({ show: true, message: '관리자 계정으로 로그인되었습니다.' }); + // 임시 JWT (exp: 24시간 후) + const exp = Math.floor(Date.now() / 1000) + 60 * 60 * 24; + // 유니코드 안전 base64 인코딩 함수 + function base64EncodeUnicode(str: string) { + return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) => + String.fromCharCode(parseInt(p1, 16)) + )); + } + + const adminJwt = [ + base64EncodeUnicode(JSON.stringify({ alg: 'HS256', typ: 'JWT' })), + base64EncodeUnicode(JSON.stringify({ + email: 'admin@gmail.com', + name: '관리자', + nickname: 'admin', + })), + 'signature' + ].join('.') + localStorage.setItem('authToken', adminJwt); + setProfile({ + name: '관리자', + nickname: 'admin', + email: 'admin@gmail.com', + bio: '관리자 계정', + profileImage: '/icons/profile.svg', + birthDate: '', + }); + // 상태 확인용 콘솔 출력 + // setTimeout(() => { + // const profileState = useUserProfileStore.getState().profile; + // console.log('localStorage user-profile-storage:', localStorage.getItem('user-profile-storage')); + // console.log('profile 상태:', profileState); + // console.log('isLoggedIn (profile !== null):', profileState !== null); + // }, 100); + setIsLoading(false); + setTimeout(() => { + router.push('/'); + }, 500); + return; + } + //*********보안 위험*********// setIsLoading(true); try { @@ -50,9 +99,13 @@ const loginpage = () => { localStorage.setItem('authToken', data.token); } - // 메인 페이지로 이동 또는 리다이렉트 - // router.push('/') 등으로 페이지 이동 - + setTimeout(() => { + const profileState = useUserProfileStore.getState().profile; + console.log('localStorage user-profile-storage:', localStorage.getItem('user-profile-storage')); + console.log('profile 상태:', profileState); + console.log('isLoggedIn (profile !== null):', profileState !== null); + router.push('/'); + }, 500); } else { // 로그인 실패 switch (response.status) { diff --git a/src/app/loginpage/register/page.tsx b/src/app/loginpage/register/page.tsx index 4921ddc..16a6c5e 100644 --- a/src/app/loginpage/register/page.tsx +++ b/src/app/loginpage/register/page.tsx @@ -24,19 +24,24 @@ const SignupPage = () => { const [isCodeSent, setIsCodeSent] = useState(false); const [tempSelectedDate, setTempSelectedDate] = useState<Date>(new Date(2002, 3, 18)); const [passwordError, setPasswordError] = useState(''); + const [passwordCheckResult, setPasswordCheckResult] = useState<'valid' | 'invalid' | ''>(''); + const [confirmPasswordChecked, setConfirmPasswordChecked] = useState<'valid' | 'invalid' | ''>(''); const [ageError, setAgeError] = useState(''); - // 모든 필드가 유효한지 검증 + // 모든 필드가 유효한지 검증 (비밀번호 규약, 일치, 인증 포함) const isFormValid = () => { + const passwordRuleValid = validatePasswordRule(formData.password); + const passwordMatch = formData.password === formData.confirmPassword && formData.password.trim() !== ''; return ( formData.name.trim() !== '' && formData.birthDate !== '' && ageError === '' && formData.email.trim() !== '' && isEmailVerified && - formData.password.trim() !== '' && - formData.confirmPassword.trim() !== '' && - passwordError === '' + passwordRuleValid && + passwordMatch && + passwordCheckResult === 'valid' && + confirmPasswordChecked === 'valid' ); }; @@ -53,6 +58,7 @@ const SignupPage = () => { } else { setPasswordError(''); } + setConfirmPasswordChecked(''); // 입력 시 결과 초기화 } if (field === 'password') { @@ -61,15 +67,52 @@ const SignupPage = () => { } else { setPasswordError(''); } + setPasswordCheckResult(''); // 비밀번호 입력 시 결과 초기화 + setConfirmPasswordChecked(''); // 입력 시 결과 초기화 + } + }; + // 비밀번호 규약 체크 함수 (예시: 8~20자, 영문/숫자/특수문자 포함) + function validatePasswordRule(password: string): boolean { + // 8~20자, 영문/숫자/특수문자 모두 포함 + const lengthValid = password.length >= 8 && password.length <= 20; + const hasLetter = /[a-zA-Z]/.test(password); + const hasNumber = /[0-9]/.test(password); + const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password); + return lengthValid && hasLetter && hasNumber && hasSpecial; + } + + // 비밀번호 확인 버튼 클릭 + const handlePasswordCheck = () => { + if (validatePasswordRule(formData.password)) { + setPasswordCheckResult('valid'); + } else { + setPasswordCheckResult('invalid'); + } + }; + + // 비밀번호 확인 버튼 (확인 비밀번호) + const handleConfirmPasswordCheck = () => { + if ( + formData.password === formData.confirmPassword && + formData.password.trim() !== '' && + validatePasswordRule(formData.password) + ) { + setConfirmPasswordChecked('valid'); + } else { + setConfirmPasswordChecked('invalid'); } }; const handleSendVerificationCode = () => { - setIsCodeSent(true); + if (formData.email.trim() !== '') { + setIsCodeSent(true); + } }; const handleVerifyCode = () => { - setIsEmailVerified(true); + if (formData.verificationCode.trim() !== '') { + setIsEmailVerified(true); + } }; const handleTempDateChange = useCallback((selectedDate: Date) => { @@ -290,9 +333,14 @@ const SignupPage = () => { </div> <button onClick={handleSendVerificationCode} - className="flex flex-row justify-center items-center px-[14px] py-[10px] gap-[10px] w-[94px] h-[42px] bg-[#F4F5F7] rounded-md hover:bg-[#293A92] cursor-pointer" + disabled={formData.email.trim() === ''} + className={`flex flex-row justify-center items-center px-[14px] py-[10px] gap-[10px] w-[94px] h-[42px] rounded-md transition-colors duration-200 + ${formData.email.trim() !== '' ? 'bg-[#293A92] cursor-pointer hover:bg-[#1e2c73]' : 'bg-[#F4F5F7] cursor-not-allowed'} + `} > - <span className="whitespace-nowrap h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center text-[#A6A6A6] hover:text-[#FFFFFF]"> + <span className={`whitespace-nowrap h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center + ${formData.email.trim() !== '' ? 'text-[#FFFFFF]' : 'text-[#A6A6A6]'} + `}> 인증코드 전송 </span> </button> @@ -312,10 +360,14 @@ const SignupPage = () => { </div> <button onClick={handleVerifyCode} - disabled={!isCodeSent} - className="flex flex-row justify-center items-center px-[14px] py-[10px] gap-[10px] w-[94px] h-[42px] bg-[#F4F5F7] rounded-md hover:bg-[#293A92] cursor-pointer" + disabled={!isCodeSent || formData.verificationCode.trim() === ''} + className={`flex flex-row justify-center items-center px-[14px] py-[10px] gap-[10px] w-[94px] h-[42px] rounded-md transition-colors duration-200 + ${isCodeSent && formData.verificationCode.trim() !== '' ? 'bg-[#293A92] cursor-pointer hover:bg-[#1e2c73]' : 'bg-[#F4F5F7] cursor-not-allowed'} + `} > - <span className="whitespace-nowrap h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center text-[#A6A6A6] hover:text-[#FFFFFF]"> + <span className={`whitespace-nowrap h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center + ${isCodeSent && formData.verificationCode.trim() !== '' ? 'text-[#FFFFFF]' : 'text-[#A6A6A6]'} + `}> 인증코드 확인 </span> </button> @@ -343,19 +395,35 @@ const SignupPage = () => { className="w-[231px] h-[18px] font-pretendard font-medium text-[15px] leading-[18px] flex items-center text-[#BFBFBF] bg-transparent outline-none" /> <div className="w-[231px] h-0 border-t border-[#D9D9D9]"></div> + {passwordCheckResult === 'valid' && ( + <div className="w-[231px] h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center text-[#293A92] mt-1 mb-[5px]"> + 사용가능한 비밀번호입니다 + </div> + )} + {passwordCheckResult === 'invalid' && ( + <div className="w-[231px] h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center text-red-500 mt-1"> + 사용할 수 없는 비밀번호입니다 + </div> + )} </div> <button - disabled - className="flex flex-row justify-center items-center px-[14px] py-[10px] gap-[10px] w-[94px] h-[42px] bg-[#F4F5F7] rounded-md hover:bg-[#293A92] cursor-pointer" + type="button" + onClick={handlePasswordCheck} + disabled={formData.password.trim() === ''} + className={`flex flex-row justify-center items-center px-[14px] py-[10px] gap-[10px] w-[94px] h-[42px] rounded-md transition-colors duration-200 + ${formData.password.trim() !== '' ? 'bg-[#293A92] cursor-pointer hover:bg-[#1e2c73]' : 'bg-[#F4F5F7] cursor-not-allowed'} + `} > - <span className="whitespace-nowrap h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center text-[#A6A6A6] hover:text-[#FFFFFF]"> + <span className={`whitespace-nowrap h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center + ${formData.password.trim() !== '' ? 'text-[#FFFFFF]' : 'text-[#A6A6A6]'} + `}> 비밀번호 확인 </span> </button> </div> {/* Confirm Password Input */} - <div className="flex flex-row items-end gap-[11px] w-[335px] h-[42px]"> + <div className="flex flex-row items-end gap-[11px] w-[335px] h-[42px] mt-[16px]"> <div className="flex flex-col items-start gap-3 w-[231px] h-[30px]"> <input type="password" @@ -370,12 +438,32 @@ const SignupPage = () => { {passwordError} </div> )} + {confirmPasswordChecked === 'valid' && ( + <div className="w-[231px] h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center text-[#293A92] mt-1 mb-[5px]"> + 비밀번호가 일치합니다 + </div> + )} + {confirmPasswordChecked === 'invalid' && ( + <div className="w-[231px] h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center text-red-500 mt-1"> + 비밀번호가 일치하지 않습니다 + </div> + )} </div> <button - disabled - className="flex flex-row justify-center items-center px-[14px] py-[10px] gap-[10px] w-[94px] h-[42px] bg-[#F4F5F7] rounded-md hover:bg-[#293A92] cursor-pointer" + type="button" + onClick={handleConfirmPasswordCheck} + disabled={ + formData.password.trim() === '' || + formData.confirmPassword.trim() === '' || + formData.password !== formData.confirmPassword + } + className={`flex flex-row justify-center items-center px-[14px] py-[10px] gap-[10px] w-[94px] h-[42px] rounded-md transition-colors duration-200 + ${formData.password.trim() !== '' && formData.confirmPassword.trim() !== '' && formData.password === formData.confirmPassword ? 'bg-[#293A92] cursor-pointer hover:bg-[#1e2c73]' : 'bg-[#F4F5F7] cursor-not-allowed'} + `} > - <span className="whitespace-nowrap h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center text-[#A6A6A6] hover:text-[#FFFFFF]"> + <span className={`whitespace-nowrap h-[14px] font-pretendard font-medium text-xs leading-[14px] flex items-center + ${formData.password.trim() !== '' && formData.confirmPassword.trim() !== '' && formData.password === formData.confirmPassword ? 'text-[#FFFFFF]' : 'text-[#A6A6A6]'} + `}> 비밀번호 확인 </span> </button> diff --git a/src/app/loginpage/register/profile/page.tsx b/src/app/loginpage/register/profile/page.tsx index c47632b..481d112 100644 --- a/src/app/loginpage/register/profile/page.tsx +++ b/src/app/loginpage/register/profile/page.tsx @@ -16,6 +16,9 @@ const ProfileSetupPage = () => { const [profileImage, setProfileImage] = useState<string | null>(defaultProfileImage); // store에서 기본 이미지 가져오기 const [isLoading, setIsLoading] = useState(false); const [showSuccessPopup, setShowSuccessPopup] = useState(false); + const [isNicknameChecked, setIsNicknameChecked] = useState(false); + const [nicknameCheckLoading, setNicknameCheckLoading] = useState(false); + const [nicknameCheckError, setNicknameCheckError] = useState(''); const fileInputRef = useRef<HTMLInputElement>(null); @@ -53,8 +56,8 @@ const ProfileSetupPage = () => { const isDefaultImage = profileImage === defaultProfileImage; const isNicknameValid = nickname.length > 0 && nickname.length <= 8; - const isBioValid = bio.length <= 12; - const isFormValid = isNicknameValid && isBioValid && profileImage; + const isBioValid = bio.length > 0 && bio.length <= 12; + const isFormValid = isNicknameValid && isNicknameChecked && isBioValid && profileImage; const handleNext = async () => { if (!isFormValid) return; @@ -152,6 +155,31 @@ const ProfileSetupPage = () => { router.push('/loginpage'); }; + // 닉네임 중복 체크 API 호출 + const handleNicknameCheck = async () => { + if (!isNicknameValid) return; + setNicknameCheckLoading(true); + setNicknameCheckError(''); + setIsNicknameChecked(false); + try { + // 실제 API 엔드포인트로 변경 필요 + const response = await fetch(`/api/check-nickname?nickname=${encodeURIComponent(nickname)}`); + const data = await response.json(); + if (response.ok && data.available) { + setIsNicknameChecked(true); + setNicknameCheckError(''); + } else { + setIsNicknameChecked(false); + setNicknameCheckError('이미 사용 중인 닉네임입니다.'); + } + } catch (error) { + setIsNicknameChecked(false); + setNicknameCheckError('닉네임 중복 확인 중 오류가 발생했습니다.'); + } finally { + setNicknameCheckLoading(false); + } + }; + return ( <div className="relative w-full max-w-[375px] mx-auto h-screen bg-white flex flex-col"> {/* Header */} @@ -242,19 +270,31 @@ const ProfileSetupPage = () => { type="text" placeholder="최대 8글자 입력 가능합니다" value={nickname} - onChange={(e) => setNickname(e.target.value.slice(0, 8))} + onChange={(e) => { + setNickname(e.target.value.slice(0, 8)); + setIsNicknameChecked(false); + setNicknameCheckError(''); + }} className="w-full text-[15px] font-medium text-[#1A1A1A] placeholder:text-[#BFBFBF] border-b border-[#D9D9D9] pb-3 outline-none focus:border-[#1A1A1A] transition-colors" /> </div> <button - className={`px-3.5 py-2.5 rounded-md text-xs font-medium text-white whitespace-nowrap ${ - isNicknameValid ? 'bg-[#293A92]' : 'bg-[#D9D9D9]' + type="button" + onClick={handleNicknameCheck} + className={`px-3.5 py-2.5 rounded-md text-xs font-medium text-white whitespace-nowrap transition-colors duration-200 ${ + isNicknameValid && !nicknameCheckLoading ? 'bg-[#293A92] cursor-pointer hover:bg-[#1e2c73]' : 'bg-[#D9D9D9] cursor-not-allowed' }`} - disabled={!isNicknameValid} + disabled={!isNicknameValid || nicknameCheckLoading} > - 중복 인증 + {nicknameCheckLoading ? '확인 중...' : '중복 인증'} </button> </div> + {isNicknameChecked && ( + <div className="text-xs text-[#293A92] mt-1">사용 가능한 닉네임입니다.</div> + )} + {nicknameCheckError && ( + <div className="text-xs text-red-500 mt-1">{nicknameCheckError}</div> + )} </div> </div> @@ -304,6 +344,7 @@ const ProfileSetupPage = () => { )} </div> ); -}; +} -export default ProfileSetupPage; \ No newline at end of file +export default ProfileSetupPage; +// 완료버튼만 누르면 회원가입 완료에 api로 회원가입을 post 하기 \ No newline at end of file diff --git a/src/app/my-page/(about-post)/drafts/page.tsx b/src/app/my-page/(about-post)/drafts/page.tsx new file mode 100644 index 0000000..444c631 --- /dev/null +++ b/src/app/my-page/(about-post)/drafts/page.tsx @@ -0,0 +1,85 @@ +"use client"; +import React from "react"; + +// Local SVG assets +const backIcon = "/icons/back.svg"; +const curationIcon = "/icons/write-blue.svg"; + +export default function Drafts() { + // 샘플 데이터 (디자인용) + const drafts = [ + { + id: 1, + title: "제목이 들어갈 자리입니다", + content: "글 내용이 들어갈 자리입니다. 글 내용은 한줄 제한을 할까말까 두줄도 괜찮은 것 같고", + tags: ["#태그01", "#태그02", "#태그03"], + savedAt: "25/08/28 14:26", + }, + { + id: 2, + title: "제목이 들어갈 자리입니다", + content: "글 내용이 들어갈 자리입니다. 글 내용은 한줄 제한을 할까말까 두줄도 괜찮은 것 같고", + tags: ["#태그01", "#태그02", "#태그03"], + savedAt: "25/08/28 14:26", + }, + { + id: 3, + title: "제목이 들어갈 자리입니다", + content: "글 내용이 들어갈 자리입니다. 글 내용은 한줄 제한을 할까말까 두줄도 괜찮은 것 같고", + tags: ["#태그01", "#태그02", "#태그03"], + savedAt: "25/08/28 14:26", + }, + ]; + + return ( + <div className="bg-[#f4f5f7] min-h-screen w-full flex flex-col items-center relative"> + {/* Status Bar */} + <div className="absolute bg-white h-[54px] w-[375px] left-1/2 top-0 -translate-x-1/2" /> + {/* Header */} + <div className="absolute bg-white flex flex-col gap-[16px] items-start left-0 pt-0 pb-[12px] px-[20px] top-[calc(50%-352px)] w-[375px]"> + <div className="flex gap-[4px] items-center w-full"> + <div className="relative w-6 h-6 flex items-center justify-center"> + <img src={backIcon} alt="back" className="w-[20px] h-[20px]" /> + </div> + <div className="flex flex-col grow justify-center text-[#1a1a1a] text-[16px] font-semibold"> + <p>임시저장한 글</p> + </div> + </div> + </div> + {/* Card List */} + <div className="absolute bg-white flex flex-col items-start left-0 top-[calc(50%-306px)] w-[375px]"> + {drafts.map((draft, idx) => ( + <div key={draft.id} className="box-border flex flex-col gap-[10px] items-center overflow-clip px-[12px] py-[18px] w-full border-b border-[#f4f5f7]"> + <div className="flex items-center justify-center w-[335px]"> + <div className="flex flex-col gap-[8px] grow items-start w-0 min-w-0"> + {/* Label */} + <div className="flex gap-[3px] items-center"> + <img src={curationIcon} alt="큐레이션글" className="w-4 h-4" /> + <span className="text-[#293A92] text-[11px] font-semibold">큐레이션글</span> + </div> + {/* Title/Content */} + <div className="flex flex-col gap-[4px] w-full"> + <div className="text-[#1a1a1a] text-[14px] font-semibold w-full truncate">{draft.title}</div> + <div className="text-[#a6a6a6] text-[12px] w-full truncate">{draft.content}</div> + </div> + {/* Tags/Date */} + <div className="flex flex-col gap-[4px] w-full"> + <div className="flex gap-[4px] text-[#d9d9d9] text-[12px] font-medium"> + {draft.tags.map(tag => ( + <span key={tag}>{tag}</span> + ))} + </div> + <div className="flex gap-[6px] items-center w-full"> + <span className="text-[#d9d9d9] text-[12px] font-medium">{draft.savedAt}</span> + </div> + </div> + </div> + {/* Thumbnail */} + <div className="bg-[#d9d9d9] rounded-[8px] w-[96px] h-[96px] ml-4" /> + </div> + </div> + ))} + </div> + </div> + ); +} diff --git a/src/app/my-page/(about-post)/my-posts/page.tsx b/src/app/my-page/(about-post)/my-posts/page.tsx new file mode 100644 index 0000000..ef44b0f --- /dev/null +++ b/src/app/my-page/(about-post)/my-posts/page.tsx @@ -0,0 +1,49 @@ +"use client"; +import React, { useEffect, useState } from 'react'; + +type Post = { + id: string; + title: string; + content: string; + createdAt: string; +}; + +export default function MyPosts() { + const [posts, setPosts] = useState<Post[]>([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState<string | null>(null); + + useEffect(() => { + // 실제 서버 주소로 교체 필요 + fetch('/api/my-posts') + .then(res => { + if (!res.ok) throw new Error('서버 오류'); + return res.json(); + }) + .then(data => setPosts(data)) + .catch(e => setError(e.message)) + .finally(() => setLoading(false)); + }, []); + + return ( + <div className="bg-white min-h-screen flex flex-col items-center"> + <header className="w-full max-w-[375px] flex items-center px-5 pt-[21px] pb-[12px] bg-white sticky top-0 z-10 border-b border-[#f4f5f7]"> + <h1 className="flex-1 text-center text-[#1a1a1a] text-[16px] font-semibold">내가 작성한 글</h1> + </header> + <main className="w-full max-w-[375px] px-5 py-4 flex flex-col gap-4"> + {loading && <div className="text-center text-[#a6a6a6]">불러오는 중...</div>} + {error && <div className="text-center text-red-500">{error}</div>} + {!loading && !error && posts.length === 0 && ( + <div className="text-center text-[#bfbfbf]">작성한 글이 없습니다.</div> + )} + {posts.map(post => ( + <div key={post.id} className="bg-[#f4f5f7] rounded-lg p-4 flex flex-col gap-2 shadow-sm"> + <div className="text-[#1a1a1a] text-base font-semibold truncate">{post.title}</div> + <div className="text-[#4c4c4c] text-sm line-clamp-2">{post.content}</div> + <div className="text-xs text-[#bfbfbf] text-right">{new Date(post.createdAt).toLocaleDateString()}</div> + </div> + ))} + </main> + </div> + ); +} diff --git a/src/app/my-page/(about-post)/scraps/page.tsx b/src/app/my-page/(about-post)/scraps/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/my-page/(account)/change-email/page.tsx b/src/app/my-page/(account)/change-email/page.tsx new file mode 100644 index 0000000..cf3f56e --- /dev/null +++ b/src/app/my-page/(account)/change-email/page.tsx @@ -0,0 +1,142 @@ +"use client"; +import React, { useState } from 'react'; +import Image from 'next/image'; + +function Popup({ message, onClose }: { message: string; onClose: () => void }) { + return ( + <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"> + <div className="bg-white rounded-lg shadow-lg p-6 min-w-[240px] flex flex-col items-center"> + <span className="mb-4 text-base text-[#1a1a1a]">{message}</span> + <button className="mt-2 px-4 py-2 bg-[#a6a6a6] text-white rounded font-semibold" onClick={onClose}>확인</button> + </div> + </div> + ); +} + +export default function ChangeEmail() { + // 상태 관리 + const [currentEmail, setCurrentEmail] = useState('ad***@g****.com'); + const [inputCurrentEmail, setInputCurrentEmail] = useState(''); + const [inputNewEmail, setInputNewEmail] = useState(''); + const [inputCode, setInputCode] = useState(''); + const [sentCode, setSentCode] = useState(''); + const [step, setStep] = useState<'init'|'current-checked'|'code-sent'|'verified'>('init'); + const [popup, setPopup] = useState<{message: string}|null>(null); + + // 버튼 활성화 조건 + const isCurrentEmailValid = inputCurrentEmail.length > 0; + const isNewEmailValid = inputNewEmail.length > 0; + const isCodeValid = inputCode.length > 0; + + // 가상 서버 통신 함수 (실제 서버 연동시 fetch로 대체) + const fakeServerCheckCurrentEmail = async (email: string) => { + // 실제로는 서버에서 현재 이메일이 맞는지 확인 + return email === 'admin@gmail.com'; + }; + const fakeServerSendCode = async (email: string) => { + // 실제로는 서버에서 인증코드 생성 후 이메일로 발송 + const code = Math.floor(100000 + Math.random() * 900000).toString(); + setSentCode(code); + return code; + }; + const fakeServerVerifyCode = async (code: string) => { + return code === sentCode; + }; + const fakeServerChangeEmail = async (newEmail: string) => { + setCurrentEmail(newEmail.replace(/(.{2}).*(@.*)/, '$1***$2')); + return true; + }; + + // 이벤트 핸들러 + const handleCheckCurrentEmail = async () => { + if (await fakeServerCheckCurrentEmail(inputCurrentEmail)) { + setStep('current-checked'); + setPopup({ message: '기존 이메일이 확인되었습니다.' }); + } else { + setPopup({ message: '기존 이메일이 일치하지 않습니다.' }); + } + }; + const handleSendCode = async () => { + if (!inputNewEmail.includes('@')) { + setPopup({ message: '올바른 이메일 형식을 입력하세요.' }); + return; + } + await fakeServerSendCode(inputNewEmail); + setStep('code-sent'); + setPopup({ message: '인증코드가 전송되었습니다.' }); + }; + const handleVerifyCode = async () => { + if (await fakeServerVerifyCode(inputCode)) { + await fakeServerChangeEmail(inputNewEmail); + setStep('verified'); + setPopup({ message: '이메일이 성공적으로 변경되었습니다.' }); + } else { + setPopup({ message: '인증번호가 일치하지 않습니다.' }); + } + }; + + return ( + <div className="bg-white min-h-screen flex flex-col items-center"> + <header className="w-full max-w-[375px] flex items-center px-5 pt-[21px] pb-[12px] bg-white sticky top-0 z-10"> + <button className="bg-none border-none p-0 mr-1 cursor-pointer w-[30px] h-[30px] flex items-center justify-center" aria-label="뒤로가기"> + <Image src="/icons/back.svg" alt="뒤로가기" width={30} height={30} /> + </button> + <h1 className="flex-1 text-center text-[#1a1a1a] text-[16px] font-semibold">이메일 변경</h1> + </header> + <main className="w-full max-w-[375px] px-5 flex flex-col gap-[30px]"> + <section className="w-full flex flex-col gap-[11px] mt-2"> + <label className="text-[#4c4c4c] text-[14px] font-semibold">기존 등록된 이메일</label> + <div className="bg-[#f4f5f7] rounded-[6px] p-[14px] text-[#4c4c4c] text-[15px] font-medium">{currentEmail}</div> + </section> + <section className="w-full flex flex-col gap-[11px]"> + <label className="text-[#4c4c4c] text-[14px] font-semibold">이메일 재설정</label> + <div className="text-[#bfbfbf] text-[12px] mb-1">아이디로 사용할 새 이메일을 설정해주세요</div> + <div className="flex gap-[10px] items-end mb-[6px]"> + <input + className="flex-1 border-0 border-b border-[#e0e0e0] bg-transparent text-[15px] text-[#1a1a1a] py-2 outline-none" + placeholder="기존 이메일을 입력해주세요" + value={inputCurrentEmail} + onChange={e => setInputCurrentEmail(e.target.value)} + disabled={step !== 'init'} + /> + <button + className={`rounded-[6px] px-[14px] py-[10px] text-[12px] font-medium min-w-[94px] border-none cursor-pointer ${isCurrentEmailValid && step === 'init' ? 'bg-blue-900 text-white' : 'bg-[#f4f5f7] text-[#a6a6a6]'}`} + onClick={handleCheckCurrentEmail} + disabled={!isCurrentEmailValid || step !== 'init'} + >확인</button> + </div> + <div className="flex gap-[10px] items-end mb-[6px]"> + <input + className="flex-1 border-0 border-b border-[#e0e0e0] bg-transparent text-[15px] text-[#1a1a1a] py-2 outline-none" + placeholder="새로운 이메일을 입력해주세요" + value={inputNewEmail} + onChange={e => setInputNewEmail(e.target.value)} + disabled={step !== 'current-checked' && step !== 'code-sent'} + /> + <button + className={`rounded-[6px] px-[14px] py-[10px] text-[12px] font-medium min-w-[94px] border-none cursor-pointer ${isNewEmailValid && (step === 'current-checked' || step === 'code-sent') ? 'bg-blue-900 text-white' : 'bg-[#f4f5f7] text-[#a6a6a6]'}`} + onClick={handleSendCode} + disabled={!isNewEmailValid || (step !== 'current-checked' && step !== 'code-sent')} + >인증코드 전송</button> + </div> + <div className="flex gap-[10px] items-end mb-[6px]"> + <input + className="flex-1 border-0 border-b border-[#e0e0e0] bg-transparent text-[15px] text-[#1a1a1a] py-2 outline-none" + placeholder="전송된 인증코드를 입력해주세요" + value={inputCode} + onChange={e => setInputCode(e.target.value)} + disabled={step !== 'code-sent' && step !== 'verified'} + /> + <button + className={`rounded-[6px] px-[14px] py-[10px] text-[12px] font-medium min-w-[94px] border-none cursor-pointer ${isCodeValid && (step === 'code-sent' || step === 'verified') ? 'bg-blue-900 text-white' : 'bg-[#f4f5f7] text-[#a6a6a6]'}`} + onClick={handleVerifyCode} + disabled={!isCodeValid || (step !== 'code-sent' && step !== 'verified')} + >인증코드 확인</button> + </div> + </section> + <button className="w-full bg-[#a6a6a6] text-white border-none rounded-[6px] py-[14px] text-[16px] font-semibold mt-10 mb-5 cursor-pointer" disabled>완료</button> + </main> + {popup && <Popup message={popup.message} onClose={() => setPopup(null)} />} + </div> + ); +} diff --git a/src/app/my-page/(account)/change-password/page.tsx b/src/app/my-page/(account)/change-password/page.tsx new file mode 100644 index 0000000..bc99a0c --- /dev/null +++ b/src/app/my-page/(account)/change-password/page.tsx @@ -0,0 +1,143 @@ +"use client"; +import React, { useState } from 'react'; +import Image from 'next/image'; + +function Popup({ message, onClose }: { message: string; onClose: () => void }) { + return ( + <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"> + <div className="bg-white rounded-lg shadow-lg p-6 min-w-[240px] flex flex-col items-center"> + <span className="mb-4 text-base text-[#1a1a1a]">{message}</span> + <button className="mt-2 px-4 py-2 bg-[#a6a6a6] text-white rounded font-semibold" onClick={onClose}>확인</button> + </div> + </div> + ); +} + +export default function ChangePassword() { + // 상태 관리 + const [step, setStep] = useState<'current'|'new'|'confirm'|'done'>('current'); + const [currentPw, setCurrentPw] = useState(''); + const [newPw, setNewPw] = useState(''); + const [confirmPw, setConfirmPw] = useState(''); + const [message, setMessage] = useState(''); + const [popup, setPopup] = useState<string|null>(null); + + // 임시 백엔드 함수 + const fakeServerCheckCurrentPw = async (pw: string) => { + // 실제로는 서버에서 현재 비밀번호 확인 + return pw === 'QWER1234'; + }; + const fakeServerCheckNewPw = async (pw: string) => { + // 비밀번호 규칙: 8자 이상, 영문+숫자 + if (!/^.*(?=.{8,})(?=.*\d)(?=.*[a-zA-Z]).*$/.test(pw)) return false; + // 예시: 사용할 수 없는 비밀번호 + if (pw === 'abcdefg') return false; + return true; + }; + const fakeServerChangePw = async (pw: string) => { + // 실제로는 서버에 비밀번호 변경 요청 + return true; + }; + + // 이벤트 핸들러 + const handleCheckCurrentPw = async () => { + if (await fakeServerCheckCurrentPw(currentPw)) { + setMessage('기존 비밀번호와 일치합니다'); + setStep('new'); + } else { + setMessage('기존 비밀번호와 일치하지 않습니다'); + } + }; + const handleCheckNewPw = async () => { + if (await fakeServerCheckNewPw(newPw)) { + setMessage('사용 가능한 비밀번호입니다'); + setStep('confirm'); + } else { + setMessage('사용할 수 없는 비밀번호입니다'); + } + }; + const handleCheckConfirmPw = async () => { + if (newPw === confirmPw) { + await fakeServerChangePw(newPw); + setMessage('입력한 비밀번호가 일치합니다'); + setStep('done'); + setPopup('비밀번호가 성공적으로 변경되었습니다.'); + } else { + setMessage('입력한 비밀번호가 일치하지 않습니다'); + } + }; + + // 버튼 활성화 조건 + const isCurrentPwValid = currentPw.length > 0; + const isNewPwValid = newPw.length > 0; + const isConfirmPwValid = confirmPw.length > 0; + + return ( + <div className="bg-white min-h-screen flex flex-col items-center"> + <header className="w-full max-w-[375px] flex items-center px-5 pt-[21px] pb-[12px] bg-white sticky top-0 z-10"> + <button className="bg-none border-none p-0 mr-1 cursor-pointer w-[30px] h-[30px] flex items-center justify-center" aria-label="뒤로가기"> + <Image src="/icons/back.svg" alt="뒤로가기" width={30} height={30} /> + </button> + <h1 className="flex-1 text-center text-[#1a1a1a] text-[16px] font-semibold">비밀번호 변경</h1> + </header> + <main className="w-full max-w-[375px] px-5 flex flex-col gap-[30px]"> + <section className="w-full flex flex-col gap-[11px] mt-2"> + <label className="text-[#4c4c4c] text-[14px] font-semibold">비밀번호 재설정</label> + <div className="text-[#bfbfbf] text-[12px] mb-1">비밀번호 규약 여기에 설명하기</div> + {/* 기존 비밀번호 입력 */} + <div className="flex gap-[10px] items-end mb-[6px]"> + <input + type="password" + className="flex-1 border-0 border-b border-[#e0e0e0] bg-transparent text-[15px] text-[#1a1a1a] py-2 outline-none" + placeholder="기존 비밀번호를 입력해주세요" + value={currentPw} + onChange={e => setCurrentPw(e.target.value)} + disabled={step !== 'current'} + /> + <button + className={`rounded-[6px] px-[14px] py-[10px] text-[12px] font-medium min-w-[94px] border-none cursor-pointer ${isCurrentPwValid && step === 'current' ? 'bg-blue-900 text-white' : 'bg-[#f4f5f7] text-[#a6a6a6]'}`} + onClick={handleCheckCurrentPw} + disabled={!isCurrentPwValid || step !== 'current'} + >확인</button> + </div> + {/* 새 비밀번호 입력 */} + <div className="flex gap-[10px] items-end mb-[6px]"> + <input + type="password" + className="flex-1 border-0 border-b border-[#e0e0e0] bg-transparent text-[15px] text-[#1a1a1a] py-2 outline-none" + placeholder="새로운 비밀번호를 입력해주세요" + value={newPw} + onChange={e => setNewPw(e.target.value)} + disabled={step !== 'new'} + /> + <button + className={`rounded-[6px] px-[14px] py-[10px] text-[12px] font-medium min-w-[94px] border-none cursor-pointer ${isNewPwValid && step === 'new' ? 'bg-blue-900 text-white' : 'bg-[#f4f5f7] text-[#a6a6a6]'}`} + onClick={handleCheckNewPw} + disabled={!isNewPwValid || step !== 'new'} + >확인</button> + </div> + {/* 새 비밀번호 재입력 */} + <div className="flex gap-[10px] items-end mb-[6px]"> + <input + type="password" + className="flex-1 border-0 border-b border-[#e0e0e0] bg-transparent text-[15px] text-[#1a1a1a] py-2 outline-none" + placeholder="비밀번호를 한번 더 입력해주세요" + value={confirmPw} + onChange={e => setConfirmPw(e.target.value)} + disabled={step !== 'confirm'} + /> + <button + className={`rounded-[6px] px-[14px] py-[10px] text-[12px] font-medium min-w-[94px] border-none cursor-pointer ${isConfirmPwValid && step === 'confirm' ? 'bg-blue-900 text-white' : 'bg-[#f4f5f7] text-[#a6a6a6]'}`} + onClick={handleCheckConfirmPw} + disabled={!isConfirmPwValid || step !== 'confirm'} + >확인</button> + </div> + {/* 메시지 */} + {message && <div className="text-xs text-blue-900 mt-2 min-h-[18px]">{message}</div>} + </section> + <button className="w-full bg-[#a6a6a6] text-white border-none rounded-[6px] py-[14px] text-[16px] font-semibold mt-10 mb-5 cursor-pointer" disabled>완료</button> + </main> + {popup && <Popup message={popup} onClose={() => setPopup(null)} />} + </div> + ); +} diff --git a/src/app/my-page/(etc)/delete-account/page.tsx b/src/app/my-page/(etc)/delete-account/page.tsx new file mode 100644 index 0000000..158e869 --- /dev/null +++ b/src/app/my-page/(etc)/delete-account/page.tsx @@ -0,0 +1,232 @@ +'use client'; + +import React, { useState } from 'react'; +import { useRouter } from 'next/navigation'; +import Link from 'next/link'; +import { useUserProfileStore } from '@/store/userProfileStore'; +import ToastNotification from '@/components/ToastNotification'; + +export default function DeleteAccountPage() { + const router = useRouter(); + const clearProfile = useUserProfileStore((state) => state.clearProfile); + const [password, setPassword] = useState(''); + const [showPassword, setShowPassword] = useState(false); + const [showPopup, setShowPopup] = useState(false); + const [toast, setToast] = useState({ show: false, message: '' }); + const [isLoading, setIsLoading] = useState(false); + + // 비밀번호 확인 및 팝업 표시 + const handlePasswordConfirm = async () => { + if (!password.trim()) { + setToast({ show: true, message: '비밀번호를 입력해주세요.' }); + return; + } + + setIsLoading(true); + + // 임시 테스트: 항상 비밀번호를 올바르다고 판단 + setTimeout(() => { + setShowPopup(true); + setIsLoading(false); + }, 500); + + /* 실제 API 호출 코드 (테스트 후 주석 해제) + try { + const response = await fetch('/api/auth/verify-password', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${localStorage.getItem('authToken')}`, + }, + body: JSON.stringify({ password }), + }); + + if (response.ok) { + setShowPopup(true); + } else { + setToast({ show: true, message: '비밀번호가 일치하지 않습니다.' }); + } + } catch (error) { + console.error('비밀번호 확인 오류:', error); + setToast({ show: true, message: '네트워크 오류가 발생했습니다.' }); + } finally { + setIsLoading(false); + } + */ + }; + + // 회원 탈퇴 처리 + const handleDeleteAccount = async () => { + setIsLoading(true); + + // 임시 테스트: 로그아웃 후 로그인 페이지로 이동 + setTimeout(() => { + localStorage.removeItem('authToken'); + clearProfile(); + setToast({ show: true, message: '회원 탈퇴가 완료되었습니다.' }); + setTimeout(() => { + router.push('/loginpage'); + }, 1000); + }, 500); + + /* 실제 API 호출 코드 (테스트 후 주석 해제) + try { + const response = await fetch('/api/auth/delete-account', { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${localStorage.getItem('authToken')}`, + }, + }); + + if (response.ok) { + localStorage.removeItem('authToken'); + clearProfile(); + setToast({ show: true, message: '회원 탈퇴가 완료되었습니다.' }); + + setTimeout(() => { + router.push('/loginpage'); + }, 1500); + } else { + setToast({ show: true, message: '탈퇴 처리에 실패했습니다.' }); + } + } catch (error) { + console.error('회원 탈퇴 오류:', error); + setToast({ show: true, message: '네트워크 오류가 발생했습니다.' }); + } finally { + setIsLoading(false); + } + */ + }; + + return ( + <div className="relative w-[375px] h-[812px] bg-white mx-auto"> + {/* Status Bar */} + <div className="flex flex-col items-start pt-[21px] w-full h-[54px] bg-white" /> + + {/* Header */} + <div className="flex flex-col items-start px-5 pb-3 gap-4 w-full h-[36px] bg-white"> + <div className="flex flex-row items-center gap-1 w-full h-[24px]"> + <Link href="/my-page"> + <button className="w-6 h-6 flex items-center justify-center"> + <svg width="7" height="15" viewBox="0 0 7 15" fill="none" className="rotate-180"> + <path d="M1 1L6 7.5L1 14" stroke="#1A1A1A" strokeWidth="2" /> + </svg> + </button> + </Link> + <div className="flex-1 font-pretendard font-semibold text-base text-[#1A1A1A]"> + 회원탈퇴 + </div> + </div> + </div> + + {/* Content */} + <div className="flex flex-col w-full"> + {/* 안내 메시지 */} + <div className="bg-[#F4F5F7] px-5 py-[14px] w-full"> + <p className="font-pretendard font-medium text-xs text-[#4C4C4C]"> + 회원 탈퇴 시 탈퇴일로부터 31일 이후부터 재가입이 가능합니다. + </p> + </div> + + {/* 비밀번호 입력 섹션 */} + <div className="bg-white px-5 py-[18px] w-full"> + <div className="flex flex-col gap-[11px] w-full"> + <div className="font-pretendard font-semibold text-sm text-[#4C4C4C]"> + 비밀번호 입력 + </div> + <div className="relative w-full"> + <input + type={showPassword ? 'text' : 'password'} + value={password} + onChange={(e) => setPassword(e.target.value)} + placeholder="비밀번호를 입력해주세요" + className="w-full h-[42px] bg-[#F4F5F7] rounded-md px-[14px] font-pretendard font-medium text-sm text-[#4C4C4C] placeholder:text-[#A6A6A6] outline-none" + /> + <button + onClick={() => setShowPassword(!showPassword)} + className="absolute right-[14px] top-1/2 transform -translate-y-1/2 w-[14px] h-[14px] flex items-center justify-center" + > + {showPassword ? ( + <svg width="14" height="8" viewBox="0 0 14 8" fill="none"> + <path + d="M7 0C4.06 0 1.56 1.66 0.5 4C1.56 6.34 4.06 8 7 8C9.94 8 12.44 6.34 13.5 4C12.44 1.66 9.94 0 7 0ZM7 6.67C5.53 6.67 4.33 5.47 4.33 4C4.33 2.53 5.53 1.33 7 1.33C8.47 1.33 9.67 2.53 9.67 4C9.67 5.47 8.47 6.67 7 6.67ZM7 2.4C6.12 2.4 5.4 3.12 5.4 4C5.4 4.88 6.12 5.6 7 5.6C7.88 5.6 8.6 4.88 8.6 4C8.6 3.12 7.88 2.4 7 2.4Z" + fill="#BFBFBF" + /> + </svg> + ) : ( + <svg width="14" height="8" viewBox="0 0 14 8" fill="none"> + <path + d="M7 0C4.06 0 1.56 1.66 0.5 4C1.56 6.34 4.06 8 7 8C9.94 8 12.44 6.34 13.5 4C12.44 1.66 9.94 0 7 0ZM7 6.67C5.53 6.67 4.33 5.47 4.33 4C4.33 2.53 5.53 1.33 7 1.33C8.47 1.33 9.67 2.53 9.67 4C9.67 5.47 8.47 6.67 7 6.67ZM7 2.4C6.12 2.4 5.4 3.12 5.4 4C5.4 4.88 6.12 5.6 7 5.6C7.88 5.6 8.6 4.88 8.6 4C8.6 3.12 7.88 2.4 7 2.4Z" + fill="#BFBFBF" + /> + <line x1="1" y1="1" x2="13" y2="7" stroke="#BFBFBF" strokeWidth="1.5" /> + </svg> + )} + </button> + </div> + </div> + </div> + </div> + + {/* 탈퇴하기 버튼 */} + <button + onClick={handlePasswordConfirm} + disabled={isLoading || !password.trim()} + className={`absolute bottom-[27px] left-1/2 transform -translate-x-1/2 w-[335px] h-[48px] rounded-md flex items-center justify-center transition-colors ${isLoading || !password.trim() + ? 'bg-[#A6A6A6] cursor-not-allowed' + : 'bg-[#293A92] cursor-pointer hover:bg-[#1e2c73]' + }`} + > + <span className="font-pretendard font-semibold text-base text-white"> + {isLoading ? '처리 중...' : '탈퇴하기'} + </span> + </button> + + {/* 확인 팝업 */} + {showPopup && ( + <div className="absolute inset-0 bg-transparent flex items-center justify-center z-50"> + <div className="bg-white w-[272px] rounded-[20px] shadow-lg p-[28px_28px_16px_28px] flex flex-col gap-[10px]"> + <div className="py-[6px] text-center"> + <p className="font-pretendard font-semibold text-base text-[#4C4C4C] leading-normal"> + 클래식 듣는 다람쥐를 + <br /> + 정말 탈퇴하시겠습니까? + </p> + </div> + <div className="flex gap-[6px] w-full"> + <button + onClick={() => setShowPopup(false)} + className="flex-1 border border-[#D9D9D9] rounded-full px-[14px] py-[6px] bg-white" + > + <span className="font-pretendard font-semibold text-xs text-[#4C4C4C]"> + 취소 + </span> + </button> + <button + onClick={handleDeleteAccount} + disabled={isLoading} + className={`flex-1 rounded-full px-[14px] py-[6px] ${isLoading + ? 'bg-[#A6A6A6] cursor-not-allowed' + : 'bg-[#293A92] hover:bg-[#1e2c73]' + }`} + > + <span className="font-pretendard font-semibold text-xs text-white"> + {isLoading ? '처리 중...' : '탈퇴하기'} + </span> + </button> + </div> + </div> + </div> + )} + + {/* Toast Notification */} + <ToastNotification + message={toast.message} + isVisible={toast.show} + onClose={() => setToast({ show: false, message: '' })} + duration={3000} + /> + </div> + ); +} \ No newline at end of file diff --git a/src/app/my-page/(etc)/notification/page.tsx b/src/app/my-page/(etc)/notification/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/my-page/(guide-use)/faq/page.tsx b/src/app/my-page/(guide-use)/faq/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/my-page/(guide-use)/notices/page.tsx b/src/app/my-page/(guide-use)/notices/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/my-page/(guide-use)/privacy/page.tsx b/src/app/my-page/(guide-use)/privacy/page.tsx new file mode 100644 index 0000000..dc61d00 --- /dev/null +++ b/src/app/my-page/(guide-use)/privacy/page.tsx @@ -0,0 +1,49 @@ +'use client'; + +import React from 'react'; +import Image from 'next/image'; +import Link from 'next/link'; + +export default function PrivacyPage() { + return ( + <div className="w-full max-w-md mx-auto bg-white min-h-screen"> + {/* Header */} + <header className="bg-white"> + <div className="h-[21px]" /> {/* Status bar space */} + <div className="px-5 pb-3 flex items-center gap-1"> + <Link href="/my-page" className="w-5 h-5 flex items-center justify-center"> + <Image src="/icons/back.svg" alt="뒤로가기" width={20} height={20} /> + </Link> + <h1 className="flex-1 text-[#1a1a1a] text-base font-semibold"> + 개인정보처리방침 + </h1> + </div> + </header> + + {/* Divider */} + <div className="h-2.5 bg-[#f4f5f7]" /> + + {/* Content */} + <div className="px-5 pt-[15px]"> + <div className="flex flex-col gap-2.5"> + {/* Title */} + <h2 className="text-[#4c4c4c] text-sm font-semibold"> + 개인정보처리방침 + </h2> + + {/* Content Box */} + <div className="bg-[#f4f5f7] rounded-md p-3.5"> + <p className="text-[#a6a6a6] text-xs font-medium leading-normal whitespace-pre-line"> + {`이용약관 전문 + 나대지 말것 + 까불지 말것 + 적당히 글만 쓸것 이상 + +-- 전문 내용 작성`} + </p> + </div> + </div> + </div> + </div> + ); +} diff --git a/src/app/my-page/(guide-use)/restrictions/page.tsx b/src/app/my-page/(guide-use)/restrictions/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/my-page/(guide-use)/terms/page.tsx b/src/app/my-page/(guide-use)/terms/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/my-page/edit-profile/page.tsx b/src/app/my-page/edit-profile/page.tsx new file mode 100644 index 0000000..ed47a0f --- /dev/null +++ b/src/app/my-page/edit-profile/page.tsx @@ -0,0 +1,181 @@ + +"use client"; +import React, { useState, useRef } from "react"; +import { useUserProfileStore } from "@/store/userProfileStore"; +import Image from "next/image"; + +export default function EditProfilePage() { + const { profile, updateProfile, setProfileImage, resetToDefaultImage, getProfileImage } = useUserProfileStore(); + const [nickname, setNickname] = useState(profile?.nickname || ""); + const [bio, setBio] = useState(profile?.bio || ""); + + const [saving, setSaving] = useState(false); + const [showPhotoPopup, setShowPhotoPopup] = useState(false); + const fileInputRef = useRef<HTMLInputElement>(null); + + // 색상 팔레트: DefaultImage.svg의 연한 회색(#F4F5F7), 진한 파랑(#293A92), 흰색, 연회색(#E5E7EB) + const mainBg = "#F4F5F7"; + const cardBg = "#fff"; + const blue = "#293A92"; + const borderGray = "#E5E7EB"; + + + const handleImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => { + if (e.target.files && e.target.files[0]) { + const file = e.target.files[0]; + // 미리보기용으로 상태에 저장 + const reader = new FileReader(); + reader.onload = (ev) => { + if (ev.target?.result) setProfileImage(ev.target.result as string); + }; + reader.readAsDataURL(file); + + // 백엔드로 업로드 + try { + const formData = new FormData(); + formData.append("profileImage", file); + // 실제 서버 주소로 변경 필요 + const res = await fetch("/api/upload-profile-image", { + method: "POST", + body: formData, + }); + if (!res.ok) { + // 오류 처리 + console.error("이미지 업로드 실패"); + } else { + // 필요시 서버에서 받은 URL 등 처리 + // const data = await res.json(); + } + } catch (err) { + console.error("이미지 업로드 중 오류", err); + } + } + setShowPhotoPopup(false); + }; + + const handlePhotoEditClick = () => { + setShowPhotoPopup(true); + }; + + const handleSelectFromAlbum = () => { + setShowPhotoPopup(false); + setTimeout(() => fileInputRef.current?.click(), 100); // allow popup to close before file dialog + }; + + const handleSetDefaultImage = () => { + resetToDefaultImage(); + setShowPhotoPopup(false); + }; + + const handleSave = () => { + setSaving(true); + updateProfile({ nickname, bio }); + setTimeout(() => setSaving(false), 800); + }; + + return ( + <div className="min-h-screen w-full flex flex-col items-center justify-center" style={{ background: mainBg }}> + {/* Card */} + <div className="w-full max-w-[375px] min-h-screen flex flex-col items-center pt-[54px] pb-8 px-0 relative" style={{ background: mainBg }}> + {/* Status Bar */} + <div className="absolute bg-white h-[54px] w-full left-0 top-0 z-10" /> + {/* Header */} + <div className="absolute bg-white flex items-center left-0 top-[54px] w-full h-[42px] px-5 z-20 border-b" style={{ borderColor: borderGray }}> + <span className="text-[#1a1a1a] text-[16px] font-semibold mx-auto">프로필 편집</span> + </div> + {/* Main Card */} + <div className="flex flex-col items-center w-full px-0 pt-[120px]"> + <div className="w-full flex flex-col items-center"> + {/* Profile Image */} + <div className="relative w-[130px] h-[130px] mb-6 flex items-center justify-center"> + <div className="rounded-full border-4" style={{ borderColor: blue, background: cardBg, width: 130, height: 130, display: 'flex', alignItems: 'center', justifyContent: 'center' }}> + <Image + src={getProfileImage() || "/icons/DefaultImage.svg"} + alt="프로필 이미지" + width={120} + height={120} + className="rounded-full object-cover bg-[#f4f5f7]" + priority + /> + </div> + <input + id="profile-upload" + type="file" + accept="image/*" + className="hidden" + ref={fileInputRef} + onChange={handleImageChange} + /> + <button + type="button" + className="absolute left-1/2 -translate-x-1/2 bottom-[-28px] text-xs text-[#293A92] underline font-medium" + onClick={handlePhotoEditClick} + > + 프로필 사진 편집 + </button> + {/* 프로필 사진 편집 팝업 */} + {showPhotoPopup && ( + <div className="fixed inset-0 z-50 flex items-end justify-center" style={{ background: 'transparent' }} onClick={() => setShowPhotoPopup(false)}> + <div className="w-full max-w-[375px] bg-white rounded-t-2xl shadow-lg p-0 pb-4 animate-slideup" style={{ minHeight: 160 }} onClick={e => e.stopPropagation()}> + <div className="flex flex-col divide-y divide-[#F4F5F7]"> + <button + className="w-full py-4 text-base text-[#293A92] font-semibold hover:bg-[#F4F5F7] transition-colors" + onClick={handleSelectFromAlbum} + > + 앨범에서 선택 + </button> + <button + className="w-full py-4 text-base text-[#4C4C4C] font-semibold hover:bg-[#F4F5F7] transition-colors" + onClick={handleSetDefaultImage} + > + 기본 이미지로 변경 + </button> + </div> + <button + className="w-full py-3 text-[#A6A6A6] text-base font-medium hover:bg-[#F4F5F7] rounded-b-2xl mt-2" + onClick={() => setShowPhotoPopup(false)} + > + 취소 + </button> + </div> + </div> + )} + </div> + {/* Nickname */} + <div className="w-full max-w-[320px] mb-4"> + <label className="block text-[#1a1a1a] text-sm font-semibold mb-1">닉네임</label> + <input + type="text" + value={nickname} + onChange={e => setNickname(e.target.value)} + maxLength={12} + className="w-full px-4 py-2 border border-[#E5E7EB] rounded-lg bg-white text-[#1a1a1a] focus:outline-none focus:ring-2 focus:ring-[#293A92]/20" + placeholder="닉네임을 입력하세요" + /> + </div> + {/* Bio */} + <div className="w-full max-w-[320px] mb-8"> + <label className="block text-[#1a1a1a] text-sm font-semibold mb-1">한 줄 소개 (최대 20자)</label> + <input + type="text" + value={bio} + onChange={e => setBio(e.target.value)} + maxLength={20} + className="w-full px-4 py-2 border border-[#E5E7EB] rounded-lg bg-white text-[#1a1a1a] focus:outline-none focus:ring-2 focus:ring-[#293A92]/20" + placeholder="한 줄 소개를 입력하세요" + /> + </div> + {/* Save Button */} + <button + onClick={handleSave} + disabled={saving} + className="w-full max-w-[320px] py-3 bg-[#293A92] text-white rounded-lg font-semibold text-base shadow-md hover:bg-[#1f2d6f] transition-colors disabled:opacity-60" + > + {saving ? "저장 중..." : "저장"} + </button> + </div> + </div> + </div> + </div> + ); +} diff --git a/src/app/my-page/page.tsx b/src/app/my-page/page.tsx new file mode 100644 index 0000000..fff1dfc --- /dev/null +++ b/src/app/my-page/page.tsx @@ -0,0 +1,186 @@ +'use client'; + +import React, { useState } from 'react'; +import Image from 'next/image'; +import Link from 'next/link'; +import { useRouter } from 'next/navigation'; +import { useUserProfileStore } from '@/store/userProfileStore'; + +// --- Reusable Components for the New Design --- + +// Header Component +const Header = () => ( + <header className="bg-white"> + {/* This div is for the top safe area, can be adjusted */} + <div className="h-5" /> + <div className="px-5 pb-3 flex items-center gap-1"> + <Link href="/" className="w-5 h-5 flex items-center justify-center"> + <Image src="/icons/back.svg" alt="뒤로가기" width={20} height={20} /> + </Link> + <h1 className="flex-1 text-center text-zinc-900 text-base font-semibold"> + 마이 페이지 + </h1> + <div className="w-5 h-5" /> {/* Spacer to keep title centered */} + </div> + </header> +); + +// User Profile Section +const UserProfileSection = () => ( + <div className="px-5 pt-5 pb-8 bg-white shadow-[0px_0px_7px_-3px_rgba(0,0,0,0.15)] flex items-center gap-3.5"> + <div className="flex flex-col items-center gap-2"> + <Image + className="w-24 h-24 rounded-full" + src="/icons/DefaultImage.svg" + alt="프로필 이미지" + width={96} + height={96} + /> + <Link href="/my-page/edit-profile" className="text-neutral-400 text-xs font-semibold flex items-center gap-1"> + 프로필 편집 + <Image src="/icons/write.svg" alt="편집" width={12} height={12} /> + </Link> + </div> + <div className="flex-1 flex flex-col gap-4"> + <div> + <h2 className="text-zinc-900 text-xl font-semibold">사용자닉네임</h2> + <p className="text-neutral-400 text-xs font-medium">프로필 한줄소개가 들어갈 자리</p> + </div> + <div className="flex flex-col gap-0.5"> + <button className="w-full h-7 px-3 py-1.5 bg-blue-900 rounded-[50px] inline-flex justify-center items-center gap-1 text-gray-100 text-xs font-semibold"> + 도토리 친구 목록 + <Image src="/icons/back.svg" alt="" width={8} height={8} className="transform rotate-180 filter-white" /> + </button> + <button className="w-full h-7 px-3 py-1.5 bg-white rounded-[50px] border border-zinc-300 inline-flex justify-center items-center gap-1 text-neutral-600 text-xs font-semibold"> + 칭호 목록 + <Image src="/icons/back.svg" alt="" width={8} height={8} className="transform rotate-180" /> + </button> + </div> + </div> + </div> +); + +// Section Header for the List +const SectionHeader = ({ title }: { title: string }) => ( + <div className="px-5 py-3.5 bg-gray-100 text-neutral-600 text-xs font-medium"> + {title} + </div> +); + +// List Item for Settings +const ListItem = ({ title, href, onClick }: { title: string; href?: string; onClick?: () => void }) => ( + <> + {href ? ( + <Link href={href} className="px-5 py-4 bg-white flex items-center"> + <span className="flex-1 text-neutral-600 text-sm font-semibold">{title}</span> + </Link> + ) : ( + <button onClick={onClick} className="px-5 py-4 bg-white flex items-center w-full text-left"> + <span className="flex-1 text-neutral-600 text-sm font-semibold">{title}</span> + </button> + )} + <div className="h-px bg-neutral-100" /> + </> +); + +// Logout Confirmation Popup +const LogoutPopup = ({ onCancel, onConfirm }: { onCancel: () => void; onConfirm: () => void }) => ( + <div className="fixed inset-0 z-50 flex items-center justify-center bg-transparent"> + <div className="bg-white flex flex-col gap-2.5 items-center justify-center pb-4 pt-5 px-7 rounded-[20px] shadow-[0px_0px_10px_2px_rgba(0,0,0,0.05)]"> + <div className="flex flex-col items-center justify-center px-0 py-5 w-full"> + <p className="text-[#4c4c4c] text-base font-semibold text-center w-[216px]"> + 로그아웃 하시겠습니까? + </p> + </div> + <div className="flex gap-1.5 w-full"> + <button + onClick={onCancel} + className="flex-1 bg-white border border-[#d9d9d9] flex items-center justify-center px-3.5 py-1.5 rounded-[50px]" + > + <span className="text-[#4c4c4c] text-xs font-semibold">취소</span> + </button> + <button + onClick={onConfirm} + className="flex-1 bg-[#293a92] flex items-center justify-center px-3.5 py-1.5 rounded-[50px]" + > + <span className="text-white text-xs font-semibold">로그아웃</span> + </button> + </div> + </div> + </div> +); + + +// --- Main MyPage Component --- +export default function MyPage() { + const [showLogoutPopup, setShowLogoutPopup] = useState(false); + const router = useRouter(); + const clearProfile = useUserProfileStore((state) => state.clearProfile); + + const handleLogout = async () => { + try { + // TODO: 백엔드 API가 준비되면 주석 해제 + // const response = await fetch('/api/auth/logout', { + // method: 'POST', + // headers: { + // 'Content-Type': 'application/json', + // 'Authorization': `Bearer ${localStorage.getItem('authToken')}` + // } + // }); + + // if (!response.ok) { + // throw new Error('로그아웃 실패'); + // } + + // 임시: API 호출 없이 바로 로그아웃 처리 + localStorage.removeItem('authToken'); + clearProfile(); + router.push('/loginpage'); + } catch (error) { + console.error('로그아웃 에러:', error); + // 에러가 발생해도 로컬 상태는 초기화 + localStorage.removeItem('authToken'); + clearProfile(); + router.push('/loginpage'); + } + }; + + return ( + <div className="w-full max-w-md mx-auto bg-gray-100 min-h-screen"> + <Header /> + <UserProfileSection /> + + {/* Settings List */} + <div className="flex flex-col"> + <SectionHeader title="계정 관련" /> + <ListItem title="이메일 변경" href="/my-page/change-email" /> + <ListItem title="비밀번호 변경" href="/my-page/change-password" /> + + <SectionHeader title="게시글 관련" /> + <ListItem title="작성한 글" href="/my-page/my-posts" /> + <ListItem title="임시저장한 글" href="/my-page/drafts" /> + <ListItem title="스크랩한 글" href="/my-page/scraps" /> + + <SectionHeader title="이용안내" /> + <ListItem title="이용 제한 내역" href="/my-page/restrictions" /> + <ListItem title="FAQ 및 문의하기" href="/my-page/faq" /> + <ListItem title="공지사항" href="/my-page/notices" /> + <ListItem title="서비스 이용약관" href="/my-page/terms" /> + <ListItem title="개인정보 처리방침" href="/my-page/privacy" /> + + <SectionHeader title="기타" /> + <ListItem title="알림설정" href="/my-page/notifications" /> + <ListItem title="회원탈퇴" href="/my-page/delete-account" /> + <ListItem title="로그아웃" onClick={() => setShowLogoutPopup(true)} /> + </div> + + {/* Logout Popup */} + {showLogoutPopup && ( + <LogoutPopup + onCancel={() => setShowLogoutPopup(false)} + onConfirm={handleLogout} + /> + )} + </div> + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 482ec00..77bbc39 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,9 @@ -import Image from 'next/image'; + +"use client"; +import React, { useState, useEffect } from 'react'; +import { useUserProfileStore } from '../store/userProfileStore'; import Link from 'next/link'; -import './globals.css'; -import UserProfileCard from '../components/UserProfileCard'; +import Image from 'next/image'; const menuItems = [ { @@ -22,20 +24,41 @@ const menuItems = [ ]; export default function HomePage() { + const profile = useUserProfileStore((state) => state.profile); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + // hydration이 끝난 후에만 isLoggedIn을 계산 + const isLoggedIn = mounted && profile !== null; + + if (!mounted) { + // hydration 전에는 아무것도 렌더링하지 않음 (또는 로딩 스피너 등) + return null; + } + return ( <> <header className="w-full flex justify-between items-center p-4 border-b"> <Link href="/" className="flex items-center"> - <Image src="/icons/logo.svg" alt="다람쥐 로고" width={120} height={40} /> + <Image src="/icons/logo.svg" alt="다람쥐 로고" width={120} height={40} /> </Link> <div className="flex items-center space-x-4"> - <Link href="/notification"> - <Image src="/icons/alarm.svg" alt="알림" width={24} height={24} /> - </Link> - <Link href="/loginpage"> - <Image src="/icons/profile.svg" alt="프로필" width={24} height={24} /> - </Link> + <Link href="/notification"> + <Image src="/icons/alarm.svg" alt="알림" width={24} height={24} /> + </Link> + <Link href={isLoggedIn ? "/my-page" : "/loginpage"}> + <Image + src="/icons/profile.svg" + alt="프로필" + width={24} + height={24} + className={isLoggedIn ? "ring-2 ring-blue-500 rounded-full" : ""} + /> + </Link> </div> </header> <div className="p-4"> @@ -68,7 +91,7 @@ export default function HomePage() { </Link> </div> <div> - <Link href="/talk-room"> + <Link href="/free-talk"> <div className="flex items-center p-5 bg-gray-50 rounded-2xl cursor-pointer transition-all duration-200 hover:shadow-lg hover:-translate-y-1"> <Image src={menuItems[2].icon} alt={menuItems[2].title} width={40} height={40} /> <div className="ml-4 flex-grow"> @@ -79,13 +102,9 @@ export default function HomePage() { </div> </Link> </div> - </div> - </div> - - {/* 사용자 프로필 카드 (테스트용) */} - <div className="px-4 py-6"> - <UserProfileCard /> + </div> </div> + {/* // ...existing code... */} </> ); } \ No newline at end of file diff --git a/src/app/write/components/SectionHeader.tsx b/src/app/write/components/SectionHeader.tsx new file mode 100644 index 0000000..27ca15f --- /dev/null +++ b/src/app/write/components/SectionHeader.tsx @@ -0,0 +1,6 @@ +// src/app/write/components/SectionHeader.tsx +export const SectionHeader = ({ title }: { title: string }) => ( + <div className="self-stretch px-5 py-3.5 bg-gray-100"> + <p className="text-neutral-600 text-xs font-medium font-['Pretendard']">{title}</p> + </div> +); diff --git a/src/app/write/components/WriteForm.tsx b/src/app/write/components/WriteForm.tsx new file mode 100644 index 0000000..f3c76a1 --- /dev/null +++ b/src/app/write/components/WriteForm.tsx @@ -0,0 +1,165 @@ +// src/app/write/components/WriteForm.tsx +'use client'; + +import { useRef, useState } from 'react'; +import Image from 'next/image'; +import ComposerSearch from '../composer-search'; +import { SectionHeader } from './SectionHeader'; + +interface WriteFormProps { + title: string; + setTitle: (title: string) => void; + content: string; + setContent: (content: string) => void; + hashtags: string; + setHashtags: (hashtags: string) => void; + link: string; + setLink: (link: string) => void; + imageFile: File | null; + setImageFile: (file: File | null) => void; + selectedType: string; + setSelectedType: (type: string) => void; + selectedComposer: string | null; + setSelectedComposer: (composer: string | null) => void; +} + +export default function WriteForm({ + title, setTitle, content, setContent, hashtags, setHashtags, link, setLink, + imageFile, setImageFile, selectedType, setSelectedType, selectedComposer, setSelectedComposer +}: WriteFormProps) { + const fileInputRef = useRef<HTMLInputElement>(null); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const postTypes = ['큐레이션 글', '라흐마니노프 이야기']; + const [showComposerSearch, setShowComposerSearch] = useState(true); + + const handleSelectComposer = (composerName: string) => { + setSelectedComposer(composerName); + setShowComposerSearch(false); + }; + + const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => { + if (event.target.files && event.target.files[0]) { + setImageFile(event.target.files[0]); + } + }; + + const handleImageUploadClick = () => { + fileInputRef.current?.click(); + }; + + return ( + <main> + <SectionHeader title="게시글 유형" /> + <div className="relative"> + <button + onClick={() => setIsDropdownOpen(!isDropdownOpen)} + className="w-full self-stretch px-6 py-4 bg-white flex justify-between items-center gap-2 text-left" + > + <div className="flex items-center gap-2"> + <div className="relative flex items-center justify-center"> + <Image src="/icons/write-blue.svg" alt="post type" width={16} height={16} /> + </div> + <p className="text-zinc-900 text-sm font-semibold">{selectedType}</p> + </div> + <Image src="/icons/back.svg" alt="dropdown" width={16} height={16} className={`transform transition-transform ${isDropdownOpen ? 'rotate-90' : '-rotate-90'}`} /> + </button> + {isDropdownOpen && ( + <div className="absolute top-full left-0 right-0 bg-white border-x border-b rounded-b-lg shadow-lg z-20"> + {postTypes.map((type) => ( + <div + key={type} + onClick={() => { + setSelectedType(type); + setIsDropdownOpen(false); + }} + className="px-6 py-3 hover:bg-gray-100 cursor-pointer text-sm font-medium" + > + {type} + </div> + ))} + </div> + )} + </div> + + {selectedType === '큐레이션 글' && ( + <> + <SectionHeader title="작곡가 선택" /> + {showComposerSearch ? ( + <ComposerSearch onSelectComposer={handleSelectComposer} /> + ) : ( + <div className="p-5 bg-white flex justify-between items-center"> + <p className="font-semibold">{selectedComposer}</p> + <button + onClick={() => { + setShowComposerSearch(true); + setSelectedComposer(null); + }} + className="text-sm text-gray-500" + > + 변경 + </button> + </div> + )} + </> + )} + + <SectionHeader title="게시글 제목" /> + <div className="self-stretch px-5 py-2 bg-white"> + <input + type="text" + placeholder="제목을 입력하세요" + value={title} + onChange={(e) => setTitle(e.target.value)} + className="w-full py-2 text-sm font-medium focus:outline-none placeholder-zinc-300" + /> + </div> + + <SectionHeader title="게시글 내용" /> + <div className="self-stretch px-5 py-4 bg-white"> + <textarea + placeholder="작곡가에 대해 같은 음악 취향을 가진 사람들과 나누고픈 이야기를 자유롭게 적어보세요!" + value={content} + onChange={(e) => setContent(e.target.value)} + className="w-full h-48 resize-none text-sm font-medium focus:outline-none placeholder-zinc-300" + /> + </div> + + <SectionHeader title="해시태그 등록" /> + <div className="self-stretch px-5 py-2 bg-white"> + <input + type="text" + placeholder="해시태그 작성 최대 N개" + value={hashtags} + onChange={(e) => setHashtags(e.target.value)} + className="w-full py-2 text-sm font-medium focus:outline-none placeholder-neutral-600" + /> + </div> + + <SectionHeader title="콘텐츠 첨부" /> + <div className="w-full px-5 py-4 bg-white flex justify-between items-center gap-3"> + <input + type="text" + placeholder="링크 붙여넣기" + value={link} + onChange={(e) => setLink(e.target.value)} + className="flex-1 px-3.5 py-2.5 bg-gray-100 rounded-[10px] text-sm font-medium focus:outline-none placeholder-neutral-400" + /> + <input + type="file" + ref={fileInputRef} + onChange={handleImageChange} + className="hidden" + accept="image/*" + /> + <button onClick={handleImageUploadClick} className="w-11 h-11 bg-gray-100 rounded-[10px] flex justify-center items-center"> + <Image src="/icons/img.svg" alt="이미지 첨부" width={24} height={24} /> + </button> + </div> + {imageFile && ( + <div className="px-5 pb-4 bg-white"> + <p className="text-sm text-gray-600">첨부된 이미지: {imageFile.name}</p> + </div> + )} + </main> + ); +} diff --git a/src/app/write/components/WriteHeader.tsx b/src/app/write/components/WriteHeader.tsx new file mode 100644 index 0000000..fc772c0 --- /dev/null +++ b/src/app/write/components/WriteHeader.tsx @@ -0,0 +1,32 @@ +// src/app/write/components/WriteHeader.tsx +'use client'; + +import Image from 'next/image'; +import { useRouter } from 'next/navigation'; + +interface WriteHeaderProps { + onSaveDraft: () => void; + onRegister: () => void; + isRegisterEnabled: boolean; +} + +export default function WriteHeader({ onSaveDraft, onRegister, isRegisterEnabled }: WriteHeaderProps) { + const router = useRouter(); + + return ( + <header className="bg-white py-2 px-4 flex justify-between items-center border-b sticky top-0 z-10 h-14"> + <button onClick={() => router.back()}> + <Image src="/icons/back.svg" alt="뒤로가기" width={24} height={24} /> + </button> + <h1 className="text-zinc-900 text-base font-semibold absolute left-1/2 -translate-x-1/2">글쓰기</h1> + <div className="flex items-center gap-1.5"> + <button onClick={onSaveDraft} className="px-3 py-1.5 bg-white rounded-full border border-zinc-300 flex justify-center items-center gap-0.5"> + <span className="text-neutral-400 text-xs font-semibold">임시저장</span> + </button> + <button onClick={onRegister} disabled={!isRegisterEnabled} className={`pl-3.5 pr-3 py-1.5 rounded-full flex justify-center items-center gap-0.5 ${isRegisterEnabled ? 'bg-blue-900' : 'bg-gray-300'}`}> + <span className="text-white text-xs font-semibold">등록</span> + </button> + </div> + </header> + ); +} diff --git a/src/app/write/composer-search.tsx b/src/app/write/composer-search.tsx new file mode 100644 index 0000000..bfcc5d8 --- /dev/null +++ b/src/app/write/composer-search.tsx @@ -0,0 +1,60 @@ +'use client'; + +import { useState } from 'react'; +import Image from 'next/image'; + +const composers = [ + { id: 1, name: 'L.V. Beethoven', era: '고전주의' }, + { id: 2, name: 'W.A. Mozart', era: '고전주의' }, + { id: 3, name: 'J.S. Bach', era: '바로크' }, + { id: 4, name: 'F. Chopin', era: '낭만주의' }, + { id: 5, name: 'S. Rachmaninoff', era: '낭만주의' }, +]; + +interface ComposerSearchProps { + onSelectComposer: (composerName: string) => void; +} + +export default function ComposerSearch({ onSelectComposer }: ComposerSearchProps) { + const [searchTerm, setSearchTerm] = useState(''); + + const filteredComposers = composers.filter(composer => + composer.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + return ( + <div className="p-5 bg-white"> + <div className="relative"> + <input + type="text" + placeholder="작곡가 검색" + value={searchTerm} + onChange={(e) => setSearchTerm(e.target.value)} + className="w-full pl-10 pr-4 py-2.5 bg-gray-100 rounded-lg focus:outline-none placeholder-gray-400 text-sm" + /> + <div className="absolute left-3 top-1/2 -translate-y-1/2"> + <Image src="/icons/search.svg" alt="search" width={20} height={20} /> + </div> + </div> + <div className="mt-4 space-y-2 max-h-48 overflow-y-auto"> + {filteredComposers.map(composer => ( + <button + key={composer.id} + onClick={() => onSelectComposer(composer.name)} + className="w-full p-3 text-left rounded-lg flex justify-between items-center transition-colors bg-white hover:bg-gray-50" + > + <div className="flex items-center gap-3"> + <div className="w-10 h-10 rounded-full flex items-center justify-center bg-gray-100"> + {/* Placeholder for composer image */} + </div> + <div> + <p className="font-semibold text-sm">{composer.name}</p> + <p className="text-xs text-gray-500">{composer.era}</p> + </div> + </div> + </button> + ))} + </div> + </div> + ); +} diff --git a/src/app/write/page.tsx b/src/app/write/page.tsx index 9a0a128..77fd951 100644 --- a/src/app/write/page.tsx +++ b/src/app/write/page.tsx @@ -1,8 +1,9 @@ 'use client'; -import { useState } from 'react'; +import { useState, useRef, useEffect } from 'react'; import Image from 'next/image'; import { useRouter } from 'next/navigation'; +import ComposerSearch from './composer-search'; // Reusable component for section headers const SectionHeader = ({ title }: { title: string }) => ( @@ -17,17 +18,90 @@ export default function WritePage() { const [content, setContent] = useState(''); const [hashtags, setHashtags] = useState(''); const [link, setLink] = useState(''); + const [imageFile, setImageFile] = useState<File | null>(null); + const fileInputRef = useRef<HTMLInputElement>(null); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [selectedType, setSelectedType] = useState('라흐마니노프 이야기'); const postTypes = ['큐레이션 글', '라흐마니노프 이야기']; + const [selectedComposer, setSelectedComposer] = useState<string | null>(null); + const [showComposerSearch, setShowComposerSearch] = useState(true); + + // draft-edit 데이터가 있으면 제목/내용에 자동 입력 + useEffect(() => { + if (typeof window !== 'undefined') { + const draftStr = localStorage.getItem('draft-edit'); + if (draftStr) { + try { + const draft = JSON.parse(draftStr); + if (draft.title) setTitle(draft.title); + if (draft.content) setContent(draft.content); + } catch {} + } + } + }, []); + + const handleSelectComposer = (composerName: string) => { + setSelectedComposer(composerName); + setShowComposerSearch(false); + }; + + const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => { + if (event.target.files && event.target.files[0]) { + setImageFile(event.target.files[0]); + } + }; + + const handleImageUploadClick = () => { + fileInputRef.current?.click(); + }; const isButtonEnabled = title.trim() !== '' && content.trim() !== ''; - const handleRegister = () => { + const handleRegister = async () => { if (!isButtonEnabled) return; - // Logic to submit the post - console.log({ title, content, hashtags, link }); - // Example: router.push('/success-page'); + + const formData = new FormData(); + formData.append('postType', selectedType); + if (selectedType === '큐레이션 글' && selectedComposer) { + formData.append('composer', selectedComposer); + } + formData.append('title', title); + formData.append('content', content); + formData.append('hashtags', hashtags); + formData.append('link', link); + if (imageFile) { + formData.append('image', imageFile); + } + + // For demonstration: log FormData entries + console.log('--- Form Data to be Sent ---'); + for (let [key, value] of formData.entries()) { + console.log(`${key}:`, value); + } + console.log('--------------------------'); + + try { + // Replace with your actual backend API endpoint + const response = await fetch('/api/posts', { + method: 'POST', + body: formData, + // Headers might be set automatically by the browser for FormData, + // but if you need to add an Authorization token, do it here. + // headers: { 'Authorization': 'Bearer your_token' } + }); + + if (response.ok) { + const result = await response.json(); + console.log('Post created successfully:', result); + alert('등록되었습니다.'); + // Redirect to the new post or another page + // router.push(`/composer-talk-room/${result.postId}`); + } else { + console.error('Failed to create post:', response.statusText); + } + } catch (error) { + console.error('An error occurred while creating the post:', error); + } }; const handleSaveDraft = () => { @@ -90,6 +164,28 @@ export default function WritePage() { )} </div> + {selectedType === '큐레이션 글' && ( + <> + <SectionHeader title="작곡가 선택" /> + {showComposerSearch ? ( + <ComposerSearch onSelectComposer={handleSelectComposer} /> + ) : ( + <div className="p-5 bg-white flex justify-between items-center"> + <p className="font-semibold">{selectedComposer}</p> + <button + onClick={() => { + setShowComposerSearch(true); + setSelectedComposer(null); + }} + className="text-sm text-gray-500" + > + 변경 + </button> + </div> + )} + </> + )} + <SectionHeader title="게시글 제목" /> <div className="self-stretch px-5 py-2 bg-white"> <input @@ -131,10 +227,22 @@ export default function WritePage() { onChange={(e) => setLink(e.target.value)} className="flex-1 px-3.5 py-2.5 bg-gray-100 rounded-[10px] text-sm font-medium focus:outline-none placeholder-neutral-400" /> - <button className="w-11 h-11 bg-gray-100 rounded-[10px] flex justify-center items-center"> + <input + type="file" + ref={fileInputRef} + onChange={handleImageChange} + className="hidden" + accept="image/*" + /> + <button onClick={handleImageUploadClick} className="w-11 h-11 bg-gray-100 rounded-[10px] flex justify-center items-center"> <Image src="/icons/img.svg" alt="이미지 첨부" width={24} height={24} /> </button> </div> + {imageFile && ( + <div className="px-5 pb-4 bg-white"> + <p className="text-sm text-gray-600">첨부된 이미지: {imageFile.name}</p> + </div> + )} </main> </div> ); diff --git a/src/app/writer-profile/[id]/page.tsx b/src/app/writer-profile/[id]/page.tsx new file mode 100644 index 0000000..fb2d9d3 --- /dev/null +++ b/src/app/writer-profile/[id]/page.tsx @@ -0,0 +1,172 @@ +// 'use client'; + +// import Image from 'next/image'; +// import { useState } from 'react'; + +// // --- Mock Data: 실제 데이터로 교체될 임시 데이터 --- + +// // 작성자 정보 +// const mockWriterData = { +// id: 'writer789', +// name: '사용자닉네임', +// bio: 'BIO는 최대 20자로 합시다', +// profileImage: '/images/writer-profile-placeholder.png', // 실제 이미지 경로로 교체 필요 +// followingCount: 3, +// followerCount: 24, +// isFollowing: false, // 현재 사용자가 이 작성자를 팔로우하는지 여부 +// }; + +// // 작성자의 게시물 목록 (일부 게시물에 thumbnail이 없음) +// const mockPosts = [ +// { +// id: 1, +// type: '큐레이션글', +// title: '제목이 들어갈 자리입니다', +// content: '글 내용이 들어갈 자리입니다. 글 내용은 한줄 제한을 할까말까 두줄도 괜찮은 것 같고', +// tags: ['#태그01', '#태그02', '#태그03'], +// likes: 3, +// comments: 5, +// timestamp: '25/08/28 14:26', +// thumbnail: '/images/post-thumb-1.png', // 이미지가 있는 경우 +// }, +// { +// id: 2, +// type: '자유글', +// title: '이미지가 없는 게시물 제목입니다', +// content: '이 게시물은 썸네일 이미지가 없으므로, 텍스트만 표시됩니다. 내용이 길면 잘립니다.', +// tags: ['#테스트', '#샘플'], +// likes: 10, +// comments: 2, +// timestamp: '25/08/27 11:50', +// // thumbnail 속성 없음 (이미지가 없는 경우) +// }, +// { +// id: 3, +// type: '큐레이션글', +// title: '세 번째 게시물', +// content: '이것도 이미지가 있는 게시물입니다.', +// tags: ['#추가', '#데이터'], +// likes: 7, +// comments: 1, +// timestamp: '25/08/26 09:10', +// thumbnail: '/images/post-thumb-3.png', +// }, +// ]; + +// // --- Components: 페이지를 구성하는 작은 단위들 --- + +// // 게시물 하나를 표시하는 컴포넌트 +// function PostItem({ post }: { post: (typeof mockPosts)[0] }) { +// const displayContent = post.content.length > 24 +// ? `${post.content.substring(0, 24)}...` +// : post.content; + +// return ( +// <div className="px-3 py-4 border-t border-gray-200 flex justify-between items-center gap-4"> +// <div className="flex flex-col gap-2 flex-1"> +// {/* Post Type */} +// <div className="flex items-center gap-1"> +// <Image src="/icons/talkIcon.svg" alt="post type" width={12} height={12} /> +// <span className="text-xs font-semibold text-gray-500">{post.type}</span> +// </div> +// {/* Title & Content */} +// <div className="flex flex-col gap-1"> +// <h3 className="text-sm font-semibold text-zinc-900 truncate">{post.title}</h3> +// <p className="text-xs text-neutral-400">{displayContent}</p> +// </div> +// {/* Tags & Stats */} +// <div className="flex flex-col gap-1.5"> +// <div className="flex items-center gap-1 text-xs text-zinc-400"> +// {post.tags.map(tag => <span key={tag}>{tag}</span>)} +// </div> +// <div className="flex items-center gap-3 text-xs text-zinc-400"> +// <div className="flex items-center gap-0.5 text-blue-900"> +// <Image src="/icons/heart.svg" alt="likes" width={12} height={12} /> +// <span>{post.likes}</span> +// </div> +// <div className="flex items-center gap-0.5 text-blue-900"> +// <Image src="/icons/message.svg" alt="comments" width={12} height={12} /> +// <span>{post.comments}</span> +// </div> +// <span>{post.timestamp}</span> +// </div> +// </div> +// </div> +// {/* 썸네일 이미지가 있을 때만 렌더링 */} +// {post.thumbnail && ( +// <div className="w-24 h-24 bg-gray-200 rounded-lg flex-shrink-0 relative"> +// <Image src={post.thumbnail} alt={post.title} layout="fill" objectFit="cover" className="rounded-lg" /> +// </div> +// )} +// </div> +// ); +// } + + +// // --- Main Page Component --- + +// export default function WriterProfilePage({ params }: { params: { id: string } }) { +// // 나중에는 params.id를 사용해 실제 작성자 데이터를 가져옵니다. +// const writer = mockWriterData; +// const [isFollowing, setIsFollowing] = useState(writer.isFollowing); + +// const handleFollowToggle = () => { +// setIsFollowing(!isFollowing); +// // 여기에 실제 팔로우/언팔로우 API 호출 로직 추가 +// }; + +// return ( +// <div className="w-[375px] mx-auto bg-gray-100 min-h-screen"> +// {/* Header */} +// <header className="sticky top-0 z-10 flex items-center justify-between px-5 py-3 bg-white h-14"> +// <button> +// <Image src="/icons/back.svg" alt="Back" width={24} height={24} /> +// </button> +// <h1 className="flex-1 text-base font-semibold text-center text-zinc-900"> +// 큐레이션 프로필 +// </h1> +// <div className="w-6 h-6" /> {/* 오른쪽 공간 확보용 더미 div */} +// </header> + +// {/* Profile Section */} +// <div className="flex flex-col gap-2.5"> +// <section className="px-5 pt-5 pb-8 bg-white shadow-sm"> +// <div className="flex items-center gap-3.5"> +// <div className="relative flex-shrink-0 w-16 h-16"> +// <Image src={writer.profileImage} alt="Profile" layout="fill" className="rounded-full bg-gray-200" /> +// </div> +// <div className="flex-1"> +// <h2 className="text-xl font-semibold text-zinc-900">{writer.name}</h2> +// <p className="text-xs text-neutral-400">{writer.bio}</p> +// <div className="flex items-center gap-1 mt-1.5 text-xs font-semibold text-blue-900"> +// <span>팔로잉</span> +// <span>{writer.followingCount}</span> +// <span className="font-medium">·</span> +// <span>팔로워</span> +// <span>{writer.followerCount + (isFollowing && !writer.isFollowing ? 1 : 0) - (!isFollowing && writer.isFollowing ? 1 : 0)}</span> +// </div> +// </div> +// <div className="flex flex-col gap-2 text-xs font-semibold"> +// <button +// onClick={handleFollowToggle} +// className={`px-3 py-1.5 rounded-full ${isFollowing ? 'bg-gray-200 text-gray-800' : 'bg-blue-900 text-white'}`} +// > +// {isFollowing ? '팔로잉' : '친구맺기'} +// </button> +// <button className="px-3 py-1.5 bg-white border border-stone-300 rounded-full text-zinc-900"> +// 칭호 목록 +// </button> +// </div> +// </div> +// </section> + +// {/* Posts List */} +// <section className="bg-white"> +// {mockPosts.map(post => ( +// <PostItem key={post.id} post={post} /> +// ))} +// </section> +// </div> +// </div> +// ); +// } \ No newline at end of file diff --git a/src/components/LikeButton.tsx b/src/components/LikeButton.tsx new file mode 100644 index 0000000..9531740 --- /dev/null +++ b/src/components/LikeButton.tsx @@ -0,0 +1,39 @@ +import { useState } from 'react'; +import Image from 'next/image'; + +export interface LikeButtonProps { + defaultSelected: boolean; // API에서 받아온 디폴트 값 + onToggle?: (selected: boolean) => void; + className?: string; + size?: number; // 아이콘 크기 (px) +} + +const LikeButton = ({ defaultSelected, onToggle, className = '', size = 26 }: LikeButtonProps) => { + const [selected, setSelected] = useState(defaultSelected); + const handleClick = () => { + setSelected((prev) => { + const next = !prev; + if (onToggle) onToggle(next); + return next; + }); + // TODO: 백엔드 API 호출로 하트 상태 업데이트 + }; + return ( + <button + onClick={handleClick} + className={`overflow-clip relative shrink-0 rounded-full transition-colors hover:bg-gray-100 ${className}`} + aria-label="좋아요" + style={{ width: size, height: size }} + > + <Image + src={selected ? "/icons/heart_selected.svg" : "/icons/heart.svg"} + alt="heart" + width={size - 8} + height={size - 8} + className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" + /> + </button> + ); +}; + +export default LikeButton; diff --git a/src/components/ScrapButton.tsx b/src/components/ScrapButton.tsx new file mode 100644 index 0000000..0fc020d --- /dev/null +++ b/src/components/ScrapButton.tsx @@ -0,0 +1,39 @@ +import { useState } from 'react'; +import Image from 'next/image'; + +export interface ScrapButtonProps { + defaultSelected: boolean; // API에서 받아온 디폴트 값 + onToggle?: (selected: boolean) => void; + className?: string; + size?: number; // 아이콘 크기 (px) +} + +const ScrapButton = ({ defaultSelected, onToggle, className = '', size = 24 }: ScrapButtonProps) => { + const [selected, setSelected] = useState(defaultSelected); + const handleClick = () => { + setSelected((prev) => { + const next = !prev; + if (onToggle) onToggle(next); + return next; + }); + // TODO: 백엔드 API 호출로 스크랩 상태 업데이트 + }; + return ( + <button + onClick={handleClick} + className={`overflow-clip relative shrink-0 rounded-full transition-colors hover:bg-gray-100 ${className}`} + aria-label="스크랩" + style={{ width: size, height: size }} + > + <Image + src={selected ? "/icons/bookmark-on.svg" : "/icons/bookmark-off.svg"} + alt="scrap" + width={size - 4} + height={size - 4} + className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" + /> + </button> + ); +}; + +export default ScrapButton; diff --git a/src/components/WriteButton.tsx b/src/components/WriteButton.tsx new file mode 100644 index 0000000..9437ccb --- /dev/null +++ b/src/components/WriteButton.tsx @@ -0,0 +1,29 @@ +'use client'; + +import Image from 'next/image'; +import Link from 'next/link'; + +interface WriteButtonProps { + board: string; +} + +export default function WriteButton({ board }: WriteButtonProps) { + return ( + <div className="fixed bottom-5 left-1/2 -translate-x-1/2 z-50"> + <Link + href={`/write?board=${board}`} + className="px-6 py-3 bg-[#293A92] hover:bg-[#1f2d7a] rounded-[100px] shadow-lg inline-flex justify-center items-center gap-1.5 transition-all duration-300 group" + > + <div className="w-6 h-6 relative"> + <Image + src="/icons/write-white.svg" + alt="글쓰기" + layout="fill" + className="group-hover:scale-110 transition-transform" + /> + </div> + <div className="text-white text-base font-semibold font-['Pretendard']">글쓰기</div> + </Link> + </div> + ); +} diff --git a/src/docs/# Code Citations.md b/src/docs/# Code Citations.md new file mode 100644 index 0000000..74006a5 --- /dev/null +++ b/src/docs/# Code Citations.md @@ -0,0 +1,125 @@ +# Code Citations + +## License: GPL-3.0 +https://github.com/italia/design-comuni-plone-theme/blob/051b973025ce68aceecc85cfc1d237ffa4121298/src/components/ItaliaTheme/ScrollToTop/ScrollToTop.jsx + +``` +{ + const [isVisible, setIsVisible] = useState(false +``` + + +## License: MIT +https://github.com/kamiy2j/kamranshahid/blob/86d325044f07ad6a3e2bcc54dc10fe658fe551ad/src/components/scrolltotop.js + +``` +{ + const [isVisible, setIsVisible] = useState(false +``` + + +## License: GPL-3.0 +https://github.com/italia/design-comuni-plone-theme/blob/051b973025ce68aceecc85cfc1d237ffa4121298/src/components/ItaliaTheme/ScrollToTop/ScrollToTop.jsx + +``` +{ + const [isVisible, setIsVisible] = useState(false); + + const toggleVisibility = () => { + if (window.pageYOffset > 300) { + setIsVisible(true); + } else { + setIsVisible(false); + } + }; + + const scrollToTop = () => { + window.scrollTo({ +``` + + +## License: MIT +https://github.com/kamiy2j/kamranshahid/blob/86d325044f07ad6a3e2bcc54dc10fe658fe551ad/src/components/scrolltotop.js + +``` +{ + const [isVisible, setIsVisible] = useState(false); + + const toggleVisibility = () => { + if (window.pageYOffset > 300) { + setIsVisible(true); + } else { + setIsVisible(false); + } + }; + + const scrollToTop = () => { + window.scrollTo({ +``` + + +## License: GPL-3.0 +https://github.com/italia/design-comuni-plone-theme/blob/051b973025ce68aceecc85cfc1d237ffa4121298/src/components/ItaliaTheme/ScrollToTop/ScrollToTop.jsx + +``` +{ + const [isVisible, setIsVisible] = useState(false); + + const toggleVisibility = () => { + if (window.pageYOffset > 300) { + setIsVisible(true); + } else { + setIsVisible(false); + } + }; + + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }; + + useEffect(() => { + window.addEventListener('scroll', toggleVisibility); + return () => { + window.removeEventListener('scroll', toggleVisibility); + }; + }, []); + + return ( +``` + + +## License: MIT +https://github.com/kamiy2j/kamranshahid/blob/86d325044f07ad6a3e2bcc54dc10fe658fe551ad/src/components/scrolltotop.js + +``` +{ + const [isVisible, setIsVisible] = useState(false); + + const toggleVisibility = () => { + if (window.pageYOffset > 300) { + setIsVisible(true); + } else { + setIsVisible(false); + } + }; + + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }; + + useEffect(() => { + window.addEventListener('scroll', toggleVisibility); + return () => { + window.removeEventListener('scroll', toggleVisibility); + }; + }, []); + + return ( +``` + diff --git a/src/docs/feature-curation.md b/src/docs/feature-curation.md new file mode 100644 index 0000000..a1cd976 --- /dev/null +++ b/src/docs/feature-curation.md @@ -0,0 +1,12 @@ +##큐레이션 페이지 +이 페이지는 사용자가 글쓰기 버튼을 눌러 글을 쓰고 다른 사용자가 쓴 글을 읽을 수 있는 페이지이다. + +#보여지는 글 +C:\Users\kwonc\OneDrive\바탕 화면\classic-squirrels\src\app\composer-talk-room\[id]\[postId] +와는 다르게 큐레이션 목록에 해당하는 글만 보여지는 페이지이다. + +#글쓰기 버튼 +글쓰기 버튼을 누르면 write page로 이동하고 큐레이션에 대한 글을 쓸수 있다. + +#글 +보여진 글을 클릭하면 postId에 해당하는 글 page로 이동하는 Link를 달아줘. \ No newline at end of file diff --git a/src/docs/feature-free-talk.md b/src/docs/feature-free-talk.md new file mode 100644 index 0000000..e55745c --- /dev/null +++ b/src/docs/feature-free-talk.md @@ -0,0 +1,12 @@ +## 페이지 기능 +자유 토크룸은 백엔드가 보내주는 글 데이터를 받은 다음 해당 데이터를 스크롤 다운을 통해 사용자가 볼수있게 보여주는 기능을 가졌어. + +# 검색 기능 +상단의 검색창을 통해 글의 내용을 검색할수 있어. + +# 보여지는 글 +C:\Users\kwonc\OneDrive\바탕 화면\classic-squirrels\src\app\free-talk\[postId] +와는 다르게 큐레이션 목록에 해당하는 글만 보여지는 페이지이다. + +# 글쓰기 버튼 +글쓰기 버튼을 누르면 write page로 이동하고 큐레이션에 대한 글을 쓸수 있다. \ No newline at end of file diff --git a/src/docs/feature-login-logic.md b/src/docs/feature-login-logic.md new file mode 100644 index 0000000..847ae9b --- /dev/null +++ b/src/docs/feature-login-logic.md @@ -0,0 +1,3 @@ +## 로그인 상태 구현 +너는 지금부터 로그인 사용자를 구분하는 코드를 작성해줘. +jwt token을 이용해서 로그인을 구현할거야. diff --git a/src/docs/feature-writer-profile.md b/src/docs/feature-writer-profile.md new file mode 100644 index 0000000..e69de29
+ + {/* Post Content */} + + + + {post.category} + + + {post.title} + {post.content} + + + + {post.tags.map((tag) => ( + + {tag} + + ))} - - ); + + + + {post.likes} + + + + {post.comments} + + + {post.timestamp} + + {post.author} + + + + + {/* Post Image (conditionally rendered) */} + {post.imageUrl && ( + + + + )} + +