diff --git a/src/components/ui/ImageUpload/ImageUpload.styles.ts b/src/components/ui/ImageUpload/ImageUpload.styles.ts index 7e746d5..c224958 100644 --- a/src/components/ui/ImageUpload/ImageUpload.styles.ts +++ b/src/components/ui/ImageUpload/ImageUpload.styles.ts @@ -16,7 +16,7 @@ export const UploadBox = styled.div<{ hasPreview: boolean }>` width: 100%; height: 16.25rem; border: ${({ hasPreview }) => (hasPreview ? '0.125rem solid' : '0.125rem dashed')}; - ${theme.colors.primary}; + color: ${theme.colors.primary}; border-radius: 1rem; background-color: #efe7de; position: relative; diff --git a/src/mocks/dunmyMyProfile.ts b/src/mocks/dunmyMyProfile.ts new file mode 100644 index 0000000..0a9c989 --- /dev/null +++ b/src/mocks/dunmyMyProfile.ts @@ -0,0 +1,57 @@ +export const dummyProfile = { + name: '정주연', + id: 'juyeon123', + followers: 16, + following: 23, + bio: '숨은 맛집을 찾아다니는 주연씨입니다!', + profileImage: 'https://via.placeholder.com/100', + tags: ['여행', '패션', '맛집'], + answers: [ + { post: '나는 국내 여행으로도 만족이야', src: null }, + { + post: '따끈한 일본 온천으로 놀러가고싶어', + src: 'https://cdn.traveltimes.co.kr/news/photo/202411/410169_35552_1437.jpg', + }, + { + post: '여행은 무슨 집이 최고야야', + src: 'https://i.namu.wiki/i/_VR5WHEDuh8GTDefHS5Q9hRraEwIEwHVMMFNwzr3uDAgXeQ-2ht67CM8tj4KtttckiCj7-VOdzeOQnpSz7ks8w.webp', + }, + { + post: '태국 망고 먹고싶어', + src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrSHVl8viXH3OPR1UyFBqVdeF80pdytyDieQ&s', + }, + { + post: '대만가서 딤섬 먹고싶다', + src: 'https://i.namu.wiki/i/VJ3wVc3XFU2ksCFrU3TFUeG4vpB6SG0MivSNHN3jRM2SuAaM5MD018FNBV3QKQj9mKsvzL3Dnu17M0g_z35Wdg.webp', + }, + { + post: '라스베가스에 가서 잭팟을 노리겠어', + src: 'https://static.hanatour.com/product/2019/02/01/0055e0rtfv/default.jpg', + }, + ], +}; + +export const dummyQuestions = [ + { id: 1, date: '2024.11.15', content: '맛집을 고르는 기준은 무엇인가요?', isPrivate: true }, + { id: 2, date: '2024.11.15', content: '가장 좋아하는 운동은 무엇인가요?', isPrivate: false }, + { id: 3, date: '2024.11.15', content: '가장 기억에 남는 여행지는?', isPrivate: true }, +]; + +export const dummyQSpaces = [ + { + imageUrl: 'https://via.placeholder.com/150', + title: '제주도 맛집 토론방', + description: '제주의 숨은 맛집 이야기해요!', + memberCount: 133, + isRecruiting: true, + lastUpdated: '방금 전 게시', + }, + { + imageUrl: 'https://via.placeholder.com/150', + title: '서울 카페 탐방', + description: '서울의 멋진 카페를 공유해요!', + memberCount: 87, + isRecruiting: false, + lastUpdated: '3일 전 게시', + }, +]; \ No newline at end of file diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx index 5af86bb..a27d500 100644 --- a/src/pages/Main/index.tsx +++ b/src/pages/Main/index.tsx @@ -1,4 +1,5 @@ import { useRef, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import CategoryButton from '@/components/ui/CategoryButtons/CategoryButton'; import Header from '@/components/common/Header'; import { QuestionCard } from '@/pages/Main/components/QuestionCard/QuestionCard'; @@ -22,6 +23,7 @@ import { import AnswerCard from '@/pages/Main/components/AnswerCard/AnswerCard'; const Main = () => { + const navigate = useNavigate(); const [activeCategory, setActiveCategory] = useState(categories[0]); const [isDragging, setIsDragging] = useState(false); const [startX, setStartX] = useState(0); @@ -32,6 +34,7 @@ const Main = () => { if (isSelected) { setActiveCategory(category); console.log('Selected category:', category); + navigate(`/question/${category}`); } }; const handleLikeComment = (commentId: string, isLiked: boolean, count: number) => { diff --git a/src/pages/MyPage/components/MyProfile/MyProfile.styles.tsx b/src/pages/MyPage/components/MyProfile/MyProfile.styles.tsx index e98def5..e2b6ea1 100644 --- a/src/pages/MyPage/components/MyProfile/MyProfile.styles.tsx +++ b/src/pages/MyPage/components/MyProfile/MyProfile.styles.tsx @@ -55,6 +55,7 @@ export const DetailItem = styled.div` display: flex; flex-direction: column; align-items: center; + cursor: pointer; `; export const DetailLabel = styled.span` diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx index 969952e..19b1b15 100644 --- a/src/pages/MyPage/index.tsx +++ b/src/pages/MyPage/index.tsx @@ -1,9 +1,11 @@ import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import Header from '@/pages/MyPage/components/Header/Header'; import QuestionCard from '@/pages/MyPage/components/QuestionCard/QuestionCard'; import Button from '@/pages/MyPage/components/Button/Button'; import MyProfile from '@/pages/MyPage/components/MyProfile/MyProfile'; import QSpaceCard from '@/components/ui/QSpaceCard/QSpaceCard'; +import { dummyProfile, dummyQuestions, dummyQSpaces } from '@/mocks/dunmyMyProfile'; import { ButtonGroup, Container, @@ -14,43 +16,8 @@ import { TabContainer, } from '@/pages/MyPage/styles'; -// 더미 데이터 -const dummyProfile = { - name: '정주연', - id: 'juyeon123', - followers: 16, - following: 23, - bio: '숨은 맛집을 찾아다니는 주연씨입니다!', - profileImage: 'https://via.placeholder.com/100', - tags: ['여행', '패션', '맛집'], -}; - -const dummyQuestions = [ - { id: 1, date: '2024.11.15', content: '맛집을 고르는 기준은 무엇인가요?', isPrivate: true }, - { id: 2, date: '2024.11.15', content: '가장 좋아하는 운동은 무엇인가요?', isPrivate: false }, - { id: 3, date: '2024.11.15', content: '가장 기억에 남는 여행지는?', isPrivate: true }, -]; - -const dummyQSpaces = [ - { - imageUrl: 'https://via.placeholder.com/150', - title: '제주도 맛집 토론방', - description: '제주의 숨은 맛집 이야기해요!', - memberCount: 133, - isRecruiting: true, - lastUpdated: '방금 전 게시', - }, - { - imageUrl: 'https://via.placeholder.com/150', - title: '서울 카페 탐방', - description: '서울의 멋진 카페를 공유해요!', - memberCount: 87, - isRecruiting: false, - lastUpdated: '3일 전 게시', - }, -]; - const MyPage = () => { + const navigate = useNavigate(); const [activeTab, setActiveTab] = useState<'myQuestions' | 'qSpace'>('myQuestions'); const [myQuestions, setMyQuestions] = useState(dummyQuestions); const profile = dummyProfile; @@ -71,8 +38,8 @@ const MyPage = () => { - - + + setActiveTab('myQuestions')} isActive={activeTab === 'myQuestions'}> diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx index a483c10..bc7c2ae 100644 --- a/src/pages/Profile/index.tsx +++ b/src/pages/Profile/index.tsx @@ -1,3 +1,4 @@ +import { useNavigate } from 'react-router-dom'; import theme from '@/styles/theme'; import Header from '@/pages/MyPage/components/Header/Header'; import ProfileImage from '@/components/ui/ProfileImageCon/ProfileImageCon'; @@ -6,6 +7,7 @@ import PopularPostSlider from '@/pages/Main/components/PopularPostSlider/Popular import Tags from '@/pages/MyPage/components/Tags/Tags'; import { IoChatbubbleEllipsesOutline } from 'react-icons/io5'; import { FaShare } from 'react-icons/fa6'; +import { dummyProfile } from '@/mocks/dunmyMyProfile'; import { AnswerCounter, AnswerSection, @@ -25,43 +27,9 @@ import { TitleSection, } from '@/pages/Profile/styles'; -// 더미 데이터 -const dummyProfile = { - name: '정주연', - id: 'Chung Juyeon', - followers: 185, - following: 72, - bio: '안녕하세요, 여러분! 현재 푸드 칼럼리스트로 활동하고 있는 작가, 정주연입니다. 만나서 반가워요 꾸준히 소통해요 :)', - profileImage: 'https://via.placeholder.com/200', - tags: ['여행', '패션', '맛집'], - answers: [ - { post: '나는 국내 여행으로도 만족이야', src: null }, - { - post: '따끈한 일본 온천으로 놀러가고싶어', - src: 'https://cdn.traveltimes.co.kr/news/photo/202411/410169_35552_1437.jpg', - }, - { - post: '여행은 무슨 집이 최고야야', - src: 'https://i.namu.wiki/i/_VR5WHEDuh8GTDefHS5Q9hRraEwIEwHVMMFNwzr3uDAgXeQ-2ht67CM8tj4KtttckiCj7-VOdzeOQnpSz7ks8w.webp', - }, - { - post: '태국 망고 먹고싶어', - src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrSHVl8viXH3OPR1UyFBqVdeF80pdytyDieQ&s', - }, - { - post: '대만가서 딤섬 먹고싶다', - src: 'https://i.namu.wiki/i/VJ3wVc3XFU2ksCFrU3TFUeG4vpB6SG0MivSNHN3jRM2SuAaM5MD018FNBV3QKQj9mKsvzL3Dnu17M0g_z35Wdg.webp', - }, - { - post: '라스베가스에 가서 잭팟을 노리겠어', - src: 'https://static.hanatour.com/product/2019/02/01/0055e0rtfv/default.jpg', - }, - ], -}; - const ProfilePage = () => { + const navigate = useNavigate(); const { name, id, followers, following, bio, profileImage, answers, tags } = dummyProfile; - return ( <>
@@ -76,8 +44,8 @@ const ProfilePage = () => { - {following} following - {followers} followers + navigate('/followers?tab=follower')}>{following} following + navigate('/followers?tab=following')}>{followers} followers