Merge pull request prgrms-web-devcourse-final-project#46 from prgrms-…

…web-devcourse-final-project/feature/QFEED-85 [Feat] QFEED-85 네비게이션 추가
se0kcess · Dec 2, 2024 · 35b62ed · 35b62ed
2 parents 964482c + 6124dc6
commit 35b62ed
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 80 deletions.
diff --git 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
@@ -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일 전 게시',
+  },
+];
diff --git 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
@@ -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
@@ -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 = () => {
       <Container>
         <MyProfile profile={profile} />
         <ButtonGroup>
-          <Button onClick={() => alert('프로필 수정 클릭')}>프로필 수정</Button>
-          <Button onClick={() => alert('프로필 공유 클릭')}>프로필 공유</Button>
+          <Button onClick={() => navigate('/profile/edit')}>프로필 수정</Button>
+          <Button onClick={() => alert('프로필 링크 복사')}>프로필 공유</Button>
         </ButtonGroup>
         <TabContainer>
           <Tab onClick={() => setActiveTab('myQuestions')} isActive={activeTab === 'myQuestions'}>

diff --git 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 (
     <>
       <Header title="프로필" />
@@ -76,8 +44,8 @@ const ProfilePage = () => {
           </ProfileImageWrapper>
           <Tags tags={tags} />
           <FollowInfo>
-            <InfoItem>{following} following</InfoItem>
-            <InfoItem>{followers} followers</InfoItem>
+            <InfoItem onClick={() => navigate('/followers?tab=follower')}>{following} following</InfoItem>
+            <InfoItem onClick={() => navigate('/followers?tab=following')}>{followers} followers</InfoItem>
           </FollowInfo>
           <ButtonGroup>
             <Button

diff --git a/src/pages/Profile/styles.ts b/src/pages/Profile/styles.ts
@@ -49,6 +49,7 @@ export const InfoItem = styled.div`
   font-size: 1rem;
   gap: 0.5rem;
   color: ${theme.colors.gray[300]};
+  cursor: pointer;
 `;
 
 export const ButtonGroup = styled.div`

diff --git a/src/pages/ProfileEdit/index.tsx b/src/pages/ProfileEdit/index.tsx
@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { AiFillEdit } from 'react-icons/ai';
 import ProfileImage from '@/components/ui/ProfileImageCon/ProfileImageCon';
 import SelectableHobbyTags from '@/components/ui/HobbyTag/SelectableHobbyTags';
 import Header from '@/pages/MyPage/components/Header/Header';
+import { dummyProfile } from '@/mocks/dunmyMyProfile';
 import {
   Container,
   ProfileSection,
@@ -20,9 +22,10 @@ import {
 } from '@/pages/ProfileEdit/styles';
 
 const ProfileEditPage: React.FC = () => {
-  const [name, setName] = useState('정주연');
-  const [bio, setBio] = useState('안녕하세요, 여러분! 현재 푸드 칼럼리스트로 활동하고 있는 작가, 정주연입니다. 만나서 반가워요 꾸준히 소통해요 :)');
-  const [hobbyTags, setHobbyTags] = useState<string[]>(['여행', '맛집']);
+  const navigate = useNavigate();
+  const [name, setName] = useState(dummyProfile.name);
+  const [bio, setBio] = useState(dummyProfile.bio);
+  const [hobbyTags, setHobbyTags] = useState<string[]>(dummyProfile.tags);
   const availableTags = ['여행', '스포츠', '패션', '문화', '맛집', '기타'];
 
   const handleTagSelectionChange = (selectedTags: string[]) => {
@@ -31,6 +34,7 @@ const ProfileEditPage: React.FC = () => {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    navigate('/mypage');
   };
 
   return (

diff --git a/src/pages/Question/index.tsx b/src/pages/Question/index.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { IoLockClosed, IoLockOpen } from 'react-icons/io5';
 import { ImageUpload } from '@/components/ui/ImageUpload/ImageUpload';
 import Header from '@/components/common/Header';
@@ -14,10 +15,12 @@ import {
   Question,
   SubmitButton,
   Title,
+  Date,
   TitleContainer,
 } from '@/pages/Question/styles';
 
 const QuestionPage = () => {
+  const navigate = useNavigate();
   const [answer, setAnswer] = useState('');
   const [isPrivate, setIsPrivate] = useState(true);
   const [uploadedImage, setUploadedImage] = useState<File | null>(null);
@@ -31,9 +34,10 @@ const QuestionPage = () => {
   };
 
   const handleSubmit = () => {
-    alert(
+    console.log(
       `답변: ${answer}\n공개 여부: ${isPrivate ? '비공개' : '공개'}\n이미지: ${uploadedImage ? uploadedImage.name : '없음'}`
     );
+    navigate('/');
   };
 
   return (