diff --git a/src/assets/feed/activeLike.svg b/src/assets/feed/activeLike.svg index 2d5e6607..b9a76ce3 100644 --- a/src/assets/feed/activeLike.svg +++ b/src/assets/feed/activeLike.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/feed/like.svg b/src/assets/feed/like.svg index fc38f0c0..0562cd42 100644 --- a/src/assets/feed/like.svg +++ b/src/assets/feed/like.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/feed/replyIcon.svg b/src/assets/feed/replyIcon.svg new file mode 100644 index 00000000..26bdeff3 --- /dev/null +++ b/src/assets/feed/replyIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/feed/PostBody.tsx b/src/components/common/Post/PostBody.tsx similarity index 92% rename from src/components/feed/PostBody.tsx rename to src/components/common/Post/PostBody.tsx index b7a3da11..c754f53b 100644 --- a/src/components/feed/PostBody.tsx +++ b/src/components/common/Post/PostBody.tsx @@ -1,13 +1,13 @@ import styled from '@emotion/styled'; import { useNavigate } from 'react-router-dom'; -import BookInfoCard from './BookInfoCard'; +import BookInfoCard from '../../feed/BookInfoCard'; +import type { PostBodyProps } from '@/types/post'; const Container = styled.div` display: flex; flex-direction: column; width: 100%; gap: 16px; - cursor: pointer; `; const PostContent = styled.div<{ hasImage: boolean }>` @@ -76,17 +76,9 @@ const TagContainer = styled.div` } `; -interface PostBodyProps { - bookTitle: string; - bookAuthor: string; - postContent: string; - postId: string; - images?: string[]; - tags?: string[]; -} - const PostBody = ({ bookTitle, + isbn, bookAuthor, postContent, postId, @@ -98,13 +90,14 @@ const PostBody = ({ const hasTag = tags.length > 0; const handlePostContent = () => { + // if (!isClickable) return; navigate(`/feed/${postId}`); // API 연동시 경로 수정 필요 }; return ( - +
{postContent}
{hasImage && ( diff --git a/src/components/feed/PostFooter.tsx b/src/components/common/Post/PostFooter.tsx similarity index 86% rename from src/components/feed/PostFooter.tsx rename to src/components/common/Post/PostFooter.tsx index 4d30709b..37612a2e 100644 --- a/src/components/feed/PostFooter.tsx +++ b/src/components/common/Post/PostFooter.tsx @@ -1,12 +1,12 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; -import like from '../../assets/feed/like.svg'; -import activeLike from '../../assets/feed/activeLike.svg'; -import comment from '../../assets/feed/comment.svg'; -import save from '../../assets/feed/save.svg'; -import activeSave from '../../assets/feed/activeSave.svg'; -import lockIcon from '../../assets/feed/lockIcon.svg'; +import like from '../../../assets/feed/like.svg'; +import activeLike from '../../../assets/feed/activeLike.svg'; +import comment from '../../../assets/feed/comment.svg'; +import save from '../../../assets/feed/save.svg'; +import activeSave from '../../../assets/feed/activeSave.svg'; +import lockIcon from '../../../assets/feed/lockIcon.svg'; const Container = styled.div` width: 100%; diff --git a/src/components/feed/PostHeader.tsx b/src/components/common/Post/PostHeader.tsx similarity index 61% rename from src/components/feed/PostHeader.tsx rename to src/components/common/Post/PostHeader.tsx index 1fe5ad58..25875a1c 100644 --- a/src/components/feed/PostHeader.tsx +++ b/src/components/common/Post/PostHeader.tsx @@ -1,8 +1,49 @@ +import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; -const Container = styled.div` +interface PostHeaderProps { + profileImgUrl: string; + userName: string; + userTitle: string; + titleColor: string; + createdAt: string; + userId: number; + type?: 'post' | 'reply'; +} + +const PostHeader = ({ + profileImgUrl, + userName, + userTitle, + titleColor, + createdAt, + userId, + type = 'post', +}: PostHeaderProps) => { + const navigate = useNavigate(); + + const handleClick = () => { + navigate(`/otherfeed/${userId}`); + }; + return ( + +
+ 칭호 이미지 +
+
{userName}
+
+ {userTitle} +
+
+
+
{createdAt}
+ + ); +}; + +const Container = styled.div<{ type?: 'post' | 'reply' }>` width: 100%; - height: 36px; + height: ${({ type }) => (type === 'reply' ? '29px' : '36px')}; display: flex; flex-direction: row; align-items: center; @@ -12,12 +53,12 @@ const Container = styled.div` .headerInfo { display: flex; flex-direction: row; - gap: 8px; - + align-items: center; + gap: ${({ type }) => (type === 'reply' ? '4px' : '8px')}; img { - width: 36px; - height: 36px; - border-radius: 36px; + width: ${({ type }) => (type === 'reply' ? '24px' : '36px')}; + height: ${({ type }) => (type === 'reply' ? '24px' : '36px')}; + border-radius: ${({ type }) => (type === 'reply' ? '24px' : '36px')}; border: 0.5px solid var(--color-grey-300); } @@ -28,13 +69,13 @@ const Container = styled.div` gap: 4px; .username { color: var(--color-white); - font-size: var(--font-size-sm); - font-weight: 500; + font-size: ${({ type }) => (type === 'reply' ? '12px' : 'var(--font-size-sm)')}; + font-weight: var(--font-weight-medium); line-height: normal; } .usertitle { color: var(--color-character-pink); - font-size: var(--font-size-xs); + font-size: ${({ type }) => (type === 'reply' ? '11px' : 'var(--font-size-xs)')}; font-weight: var(--font-weight-regular); line-height: normal; } @@ -49,35 +90,4 @@ const Container = styled.div` } `; -interface PostHeaderProps { - profileImgUrl: string; - userName: string; - userTitle: string; - titleColor: string; - createdAt: string; -} - -const PostHeader = ({ - profileImgUrl, - userName, - userTitle, - titleColor, - createdAt, -}: PostHeaderProps) => { - return ( - -
- 칭호 이미지 -
-
{userName}
-
- {userTitle} -
-
-
-
{createdAt}
- - ); -}; - export default PostHeader; diff --git a/src/components/common/Post/Reply.tsx b/src/components/common/Post/Reply.tsx new file mode 100644 index 00000000..2b40d7d8 --- /dev/null +++ b/src/components/common/Post/Reply.tsx @@ -0,0 +1,99 @@ +import { useState } from 'react'; +import styled from '@emotion/styled'; +import { typography, colors } from '@/styles/global/global'; +import PostHeader from './PostHeader'; +import type { ReplyDataProps } from '@/types/post'; +import like from '../../../assets/feed/like.svg'; +import activeLike from '../../../assets/feed/activeLike.svg'; + +const Reply = ({ + profileImgUrl, + userName, + userId, + userTitle, + titleColor, + createdAt, + initialLikeCount, + replyContent, +}: ReplyDataProps) => { + const [liked, setLiked] = useState(false); + const [likeCount, setLikeCount] = useState(initialLikeCount); + const handleLike = () => { + setLiked(!liked); + setLikeCount(prev => (liked ? prev - 1 : prev + 1)); + }; + + return ( + + + +
+
{replyContent}
+
답글작성
+
+
+ +
{likeCount}
+
+ + + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 100%; + gap: 12px; +`; + +const ReplySection = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 20px; + + .left { + display: flex; + flex-direction: column; + gap: 12px; + + .reply { + color: ${colors.grey[100]}; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: 20px; + } + .sub-reply { + color: ${colors.grey[300]}; + font-size: ${typography.fontSize.xs}; + font-weight: ${typography.fontWeight.semibold}; + line-height: normal; + cursor: pointer; + } + } + + .right { + display: flex; + flex-direction: column; + cursor: pointer; + + .count { + text-align: center; + color: ${colors.grey[100]}; + font-size: 10px; + font-weight: ${typography.fontWeight.medium}; + line-height: normal; + } + } +`; + +export default Reply; diff --git a/src/components/common/Post/ReplyList.tsx b/src/components/common/Post/ReplyList.tsx new file mode 100644 index 00000000..0b4b7532 --- /dev/null +++ b/src/components/common/Post/ReplyList.tsx @@ -0,0 +1,81 @@ +import styled from '@emotion/styled'; +import { typography, colors } from '@/styles/global/global'; +import Reply from './Reply'; +import SubReply from './SubReply'; +import type { ReplyListProps } from '@/types/post'; + +const ReplyList = ({ commentList }: ReplyListProps) => { + const hasComments = commentList.length > 0; + + return ( + + {hasComments ? ( + commentList.map(comment => ( +
+ + {comment.replyCommentList.map(sub => ( + + ))} +
+ )) + ) : ( + +
아직 댓글이 없어요
+
첫번째 댓글을 남겨보세요
+ + )} + + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 100%; + min-width: 360px; + max-width: 540px; + padding: 40px 20px; + margin: 0 auto; + margin-bottom: 56px; + gap: 24px; + flex: 1; + + .comment-group { + display: flex; + flex-direction: column; + gap: 24px; + } +`; + +const EmptyState = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + min-width: 360px; + max-width: 540px; + padding: 40px 20px; + margin: 0 auto; + margin-bottom: 56px; + gap: 8px; + flex: 1; + + .title { + color: ${colors.white}; + text-align: center; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + line-height: 24px; + } + + .sub-title { + color: ${colors.grey[100]}; + text-align: center; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: normal; + } +`; + +export default ReplyList; diff --git a/src/components/common/Post/SubReply.tsx b/src/components/common/Post/SubReply.tsx new file mode 100644 index 00000000..84a0e939 --- /dev/null +++ b/src/components/common/Post/SubReply.tsx @@ -0,0 +1,119 @@ +import { useState } from 'react'; +import styled from '@emotion/styled'; +import { typography, colors } from '@/styles/global/global'; +import PostHeader from './PostHeader'; +import type { SubReplyDataProps } from '@/types/post'; +import like from '../../../assets/feed/like.svg'; +import activeLike from '../../../assets/feed/activeLike.svg'; +import replyIcon from '../../../assets/feed/replyIcon.svg'; + +const SubReply = ({ + profileImgUrl, + userName, + userId, + userTitle, + titleColor, + createdAt, + initialLikeCount, + subreplyContent, +}: SubReplyDataProps) => { + const [liked, setLiked] = useState(false); + const [likeCount, setLikeCount] = useState(initialLikeCount); + const handleLike = () => { + setLiked(!liked); + setLikeCount(prev => (liked ? prev - 1 : prev + 1)); + }; + + return ( + + + 대댓글 + + + + +
+
{subreplyContent}
+
답글작성
+
+
+ +
{likeCount}
+
+ + + + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: row; + width: 100%; + gap: 8px; +`; + +const ReplyIcon = styled.div` + img { + width: 24px; + height: 24px; + } +`; + +const Content = styled.div` + display: flex; + flex-direction: column; + width: 100%; + gap: 12px; +`; + +const ReplySection = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 20px; + + .left { + display: flex; + flex-direction: column; + gap: 12px; + + .reply { + color: ${colors.grey[100]}; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: 20px; + } + .sub-reply { + color: ${colors.grey[300]}; + font-size: ${typography.fontSize.xs}; + font-weight: ${typography.fontWeight.semibold}; + line-height: normal; + cursor: pointer; + } + } + + .right { + display: flex; + flex-direction: column; + cursor: pointer; + + .count { + text-align: center; + color: ${colors.grey[100]}; + font-size: 10px; + font-weight: ${typography.fontWeight.medium}; + line-height: normal; + } + } +`; + +export default SubReply; diff --git a/src/components/common/ScrollToTop.tsx b/src/components/common/ScrollToTop.tsx new file mode 100644 index 00000000..714e9eab --- /dev/null +++ b/src/components/common/ScrollToTop.tsx @@ -0,0 +1,15 @@ +import { useEffect } from 'react'; + +const ScrollToTop = () => { + useEffect(() => { + window.scrollTo({ + top: 0, + // left: 0, + // behavior: 'smooth', + }); + }, []); + + return null; +}; + +export default ScrollToTop; diff --git a/src/components/common/TitleHeader.tsx b/src/components/common/TitleHeader.tsx index 255cf953..3fe75717 100644 --- a/src/components/common/TitleHeader.tsx +++ b/src/components/common/TitleHeader.tsx @@ -50,6 +50,7 @@ const InnerHeader = styled.div` type HeaderProps = { title?: string; leftIcon?: React.ReactNode; + rightIcon?: React.ReactNode; rightButton?: React.ReactNode; isNextActive?: boolean; onLeftClick?: (e: React.MouseEvent) => void; @@ -58,6 +59,7 @@ type HeaderProps = { const TitleHeader = ({ leftIcon, + rightIcon, title, rightButton, isNextActive = false, @@ -70,7 +72,11 @@ const TitleHeader = ({ {leftIcon}
{title}
- {rightButton ? ( + {rightIcon ? ( +
+ {rightIcon} +
+ ) : rightButton ? ( {rightButton} diff --git a/src/components/feed/BookInfoCard.tsx b/src/components/feed/BookInfoCard.tsx index 12742802..8c850c92 100644 --- a/src/components/feed/BookInfoCard.tsx +++ b/src/components/feed/BookInfoCard.tsx @@ -1,3 +1,4 @@ +import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; import rightArrow from '../../assets/common/rightArrow.svg'; @@ -48,11 +49,18 @@ const BookContainer = styled.div` interface BookInfoCardProps { bookTitle: string; bookAuthor: string; + isbn: number; } -const BookInfoCard = ({ bookTitle, bookAuthor }: BookInfoCardProps) => { +const BookInfoCard = ({ bookTitle, bookAuthor, isbn }: BookInfoCardProps) => { + const navigate = useNavigate(); + + const handleClick = () => { + navigate(`/book/${isbn}`); + }; + return ( - +
{bookTitle}
{bookAuthor}
diff --git a/src/components/feed/FeedPost.tsx b/src/components/feed/FeedPost.tsx index 22e8a717..a1d61689 100644 --- a/src/components/feed/FeedPost.tsx +++ b/src/components/feed/FeedPost.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; -import PostBody from './PostBody'; -import PostFooter from './PostFooter'; -import PostHeader from './PostHeader'; +import PostBody from '../common/Post/PostBody'; +import PostFooter from '../common/Post/PostFooter'; +import PostHeader from '../common/Post/PostHeader'; import type { FeedPostProps } from '../../types/post'; const Container = styled.div` @@ -28,7 +28,7 @@ const FeedPost = ({ showHeader, isMyFeed, ...postData }: FeedPostProps) => { {showHeader && } - + {/* 페이징 처리에서 마지막 게시글인 경우 BorderBottom 안보이게 처리해야함 */} diff --git a/src/components/feed/FollowList.tsx b/src/components/feed/FollowList.tsx index d0cb57df..3415af90 100644 --- a/src/components/feed/FollowList.tsx +++ b/src/components/feed/FollowList.tsx @@ -106,6 +106,13 @@ const FollowContainer = styled.div` overflow-y: hidden; gap: 12px; + /* ✅ 스크롤바 숨기기 */ + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE, Edge */ + .followerList::-webkit-scrollbar { + display: none; /* Chrome, Safari */ + } + .followers { display: flex; flex-direction: column; diff --git a/src/components/feed/Profile.tsx b/src/components/feed/Profile.tsx index 2530d30f..92aa0e13 100644 --- a/src/components/feed/Profile.tsx +++ b/src/components/feed/Profile.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import styled from '@emotion/styled'; import MyFollower from './MyFollower'; @@ -15,6 +16,17 @@ export interface ProfileProps { const Profile = ({ showFollowButton, isFollowed }: ProfileProps) => { const { profileImgUrl, userName, userTitle, titleColor } = mockProfile; + const [followed, setFollowed] = useState(isFollowed); + + const toggleFollow = () => { + if (followed) { + // await axios.delete(`/api/unfollow/${userName}`); + } else { + // await axios.post(`/api/follow/${userName}`); + } + setFollowed(prev => !prev); + console.log(`${userName} - ${followed ? '띱 취소' : '띱 요청'}`); + }; return ( @@ -29,7 +41,9 @@ const Profile = ({ showFollowButton, isFollowed }: ProfileProps) => {
{showFollowButton && ( -
{isFollowed ? '구독 취소' : '구독'}
+
+ {followed ? '띱 취소' : '띱 하기'} +
)} @@ -98,6 +112,7 @@ const UserProfile = styled.div` font-size: var(--string-size-medium01, 14px); font-weight: var(--string-weight-medium, 500); line-height: normal; + cursor: pointer; } `; diff --git a/src/components/feed/TotalBar.tsx b/src/components/feed/TotalBar.tsx index e1638f0e..ff25f77c 100644 --- a/src/components/feed/TotalBar.tsx +++ b/src/components/feed/TotalBar.tsx @@ -1,22 +1,22 @@ import styled from '@emotion/styled'; const Container = styled.div` - display: flex; - flex-direction: row; width: 100%; - min-width: 280px; - max-width: 500px; - padding-bottom: 4px; - border-bottom: 1px solid #282828; + min-width: 320px; + max-width: 540px; + padding: 0 20px; margin: 0 auto; +`; + +const Inner = styled.div` + display: flex; + flex-direction: row; gap: 2px; color: var(--color-grey-100); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 24px; - - .total { - } + border-bottom: 1px solid #282828; .count { text-align: right; @@ -30,9 +30,10 @@ interface TotalBarProps { const TotalBar = ({ count }: TotalBarProps) => { return ( -
전체
-
{count}
- {/* 피드 글 개수에 맞춰서 count 세야할듯 */} + +
전체
+
{count}
+ ); }; diff --git a/src/components/today-words/MessageInput.tsx b/src/components/today-words/MessageInput.tsx index e9af4968..c8a505b2 100644 --- a/src/components/today-words/MessageInput.tsx +++ b/src/components/today-words/MessageInput.tsx @@ -11,9 +11,10 @@ interface MessageInputProps { value: string; onChange: (value: string) => void; onSend: () => void; + placeholder: string; } -const MessageInput = ({ value, onChange, onSend }: MessageInputProps) => { +const MessageInput = ({ value, onChange, onSend, placeholder }: MessageInputProps) => { const inputRef = useRef(null); const [isComposing, setIsComposing] = useState(false); // IME 조합 상태 @@ -43,14 +44,23 @@ const MessageInput = ({ value, onChange, onSend }: MessageInputProps) => { if (isComposing) { return; } - + if (value.trim() === '') return; // 공백 메세지 전송 방지 e.preventDefault(); onSend(); + // 전송 후 채팅창 높이 초기화 + if (inputRef.current) { + inputRef.current.style.height = 'auto'; + } } }; const handleSendClick = () => { + if (value.trim() === '') return; // 공백 메세지 전송 방지 onSend(); + // 전송 후 채팅창 높이 초기화 + if (inputRef.current) { + inputRef.current.style.height = 'auto'; + } }; return ( @@ -58,7 +68,7 @@ const MessageInput = ({ value, onChange, onSend }: MessageInputProps) => { { diff --git a/src/pages/feed/FeedDetailPage.tsx b/src/pages/feed/FeedDetailPage.tsx new file mode 100644 index 00000000..0dbef68a --- /dev/null +++ b/src/pages/feed/FeedDetailPage.tsx @@ -0,0 +1,60 @@ +import { useNavigate } from 'react-router-dom'; +import { useState } from 'react'; +import styled from '@emotion/styled'; +import TitleHeader from '@/components/common/TitleHeader'; +import FeedPost from '@/components/feed/FeedPost'; +import leftArrow from '../../assets/common/leftArrow.svg'; +import moreIcon from '../../assets/common/more.svg'; +import ReplyList from '@/components/common/Post/ReplyList'; +import { mockFeedPost, mockCommentList } from '@/data/postData'; +import MessageInput from '@/components/today-words/MessageInput'; + +const FeedDetailPage = () => { + const [message, setMessage] = useState(''); + const navigate = useNavigate(); + const handleBackClick = () => { + navigate(-1); + }; + const handleMoreClick = () => {}; + + const handleSend = () => { + if (!message.trim()) return; + console.log('작성한 댓글 내용:', message); + // 댓글 등록 API 호출 추가 + setMessage(''); + }; + + return ( + + } + onLeftClick={handleBackClick} + rightIcon={더보기} + onRightClick={handleMoreClick} + /> + + + + + ); +}; + +const Wrapper = styled.div` + display: flex; + position: relative; + flex-direction: column; + align-items: center; + min-width: 320px; + max-width: 767px; + min-height: 100vh; + padding-top: 56px; + margin: 0 auto; + background-color: #121212; +`; + +export default FeedDetailPage; diff --git a/src/pages/feed/OtherFeedPage.tsx b/src/pages/feed/OtherFeedPage.tsx index 8dfb6006..1b4c4088 100644 --- a/src/pages/feed/OtherFeedPage.tsx +++ b/src/pages/feed/OtherFeedPage.tsx @@ -1,11 +1,11 @@ import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; import NavBar from '../../components/common/NavBar'; -import type { PostData } from '../../types/post'; import TitleHeader from '@/components/common/TitleHeader'; import writefab from '../../assets/common/writefab.svg'; import leftArrow from '../../assets/common/leftArrow.svg'; import OtherFeed from '@/components/feed/OtherFeed'; +import { mockPosts } from '@/data/postData'; const Container = styled.div` min-width: 320px; @@ -13,40 +13,6 @@ const Container = styled.div` margin: 0 auto; `; -const mockPosts: PostData[] = [ - { - profileImgUrl: 'https://placehold.co/24x24', - userName: 'userName', - userTitle: 'userTitle', - titleColor: '#FF8BAC', - createdAt: '12시간 전', - bookTitle: '제목입니다', - bookAuthor: '작가입니다', - postContent: '내용입니다…', - postId: '55', - initialLikeCount: 125, - commentCount: 125, - images: ['https://placehold.co/100x100', 'https://placehold.co/100x100'], - isPublic: true, - }, - { - profileImgUrl: 'https://placehold.co/24x24', - userName: 'userName', - userTitle: 'userTitle', - titleColor: '#FF8BAC', - createdAt: '12시간 전', - bookTitle: '제목입니다제목입니다제목입니다', - bookAuthor: '작가입니다', - postContent: - '내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다', - postId: '56', - initialLikeCount: 125, - commentCount: 125, - isPublic: false, - }, - // …다른 포스트들… -]; - const OtherFeedPage = () => { const navigate = useNavigate(); const handleBackClick = () => { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1c8d11b7..25584018 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -18,6 +18,8 @@ import ApplyBook from './search/ApplyBook'; import OtherFeedPage from './feed/OtherFeedPage'; import FollowerListPage from './feed/FollowerListPage'; import TodayWords from './today-words/TodayWords'; +import FeedDetailPage from './feed/FeedDetailPage'; +import ScrollToTop from '@/components/common/ScrollToTop'; const Router = () => { const router = createBrowserRouter( @@ -33,15 +35,21 @@ const Router = () => { } /> } /> } /> + } /> } /> } /> } /> - } /> + } /> } /> , ), ); - return ; + return ( + <> + + + + ); }; export default Router; diff --git a/src/pages/today-words/TodayWords.tsx b/src/pages/today-words/TodayWords.tsx index 05907844..86c91761 100644 --- a/src/pages/today-words/TodayWords.tsx +++ b/src/pages/today-words/TodayWords.tsx @@ -94,7 +94,12 @@ const TodayWords = () => { )} - + {/* 개발용 토글 버튼 */}