diff --git a/src/pages/MyPage/components/Button.tsx b/src/pages/MyPage/components/Button.tsx index 2d88bb6..815b78a 100644 --- a/src/pages/MyPage/components/Button.tsx +++ b/src/pages/MyPage/components/Button.tsx @@ -4,7 +4,6 @@ import theme from '@/styles/theme'; interface ButtonProps { children: React.ReactNode; onClick?: () => void; // 클릭 이벤트 핸들러 - variant?: 'primary' | 'secondary'; // 버튼 스타일 타입 } const Button: React.FC = ({ children, onClick }) => { diff --git a/src/pages/Profile/components/Button.tsx b/src/pages/Profile/components/Button.tsx new file mode 100644 index 0000000..62d2cba --- /dev/null +++ b/src/pages/Profile/components/Button.tsx @@ -0,0 +1,47 @@ +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; + +interface ButtonProps { + children: React.ReactNode; + onClick?: () => void; + backgroundColor?: string; + textColor?: string; +} + +const Button: React.FC = ({ + children, + onClick, + backgroundColor = theme.colors.white, + textColor = theme.colors.gray[400], +}) => { + return ( + + {children} + + ); +}; + +const StyledButton = styled.button<{ backgroundColor: string; textColor: string }>` + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem 3rem; + background-color: ${({ backgroundColor }) => backgroundColor}; + color: ${({ textColor }) => textColor}; + border: none; + border-radius: 1.875rem; + font-family: ${theme.typography.fontFamily.english}; + font-size: 1rem; + cursor: pointer; + transition: all 0.2s ease-in-out; + + &:hover { + scale: 1.05; + } +`; + +export default Button; diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx new file mode 100644 index 0000000..436a57f --- /dev/null +++ b/src/pages/Profile/index.tsx @@ -0,0 +1,218 @@ +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; +import Header from '@/pages/MyPage/components/Header'; +import ProfileImage from '@/components/ui/ProfileImageCon/ProfileImageCon'; +import Button from '@/pages/Profile/components/Button'; +import PopularPostSlider from '@/pages/Main/components/PopularPostSlider/PopularPostSlider'; +import Tags from '@/pages/MyPage/components/Tags'; +import { IoChatbubbleEllipsesOutline } from "react-icons/io5"; +import { FaShare } from "react-icons/fa6"; + +// 더미 데이터 +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 { name, id, followers, following, bio, profileImage, answers, tags } = dummyProfile; + + return ( + <> +
+ + + + {name} + ({id}) + + + + + + + + {following} following + + + {followers} followers + + + + + + + + + + 한 줄 소개 + {bio} + + + + 나의 답변 + ({answers.length}) + + + + + + ); +}; + +export default ProfilePage; + +const Container = styled.div` + padding: 2.5rem 1rem; + background-color: ${theme.colors.background}; + min-height: calc(100vh - 3rem); + margin-bottom: 5.25rem; + overflow: hidden; +`; + +const ProfileSection = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + margin-bottom: 2.625rem; +`; + +const ProfileImageWrapper = styled.div` + flex-shrink: 0; +`; + +const NameSection = styled.div` + text-align: center; +`; + +const Name = styled.h1` + font-size: 2.25rem; + font-weight: bold; + color: ${theme.colors.primary}; + font-family: ${theme.typography.fontFamily.korean}; +`; + +const Id = styled.span` + font-size: 1rem; + color: ${theme.colors.primary}; + font-family: ${theme.typography.fontFamily.english}; +`; + +const FollowInfo = styled.div` + width: 100%; + display: flex; + justify-content: space-around; +`; + +const InfoItem = styled.div` + font-family: ${theme.typography.fontFamily.english}; + font-size: 1rem; + gap: 0.5rem; + color: ${theme.colors.gray[300]}; +`; + +const ButtonGroup = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + gap: 0.5rem; +`; + + +const BioSection = styled.div` + margin-bottom: 2.625rem; +`; + +const BioLabel = styled.h2` + font-size: 1.25rem; + font-weight: bold; + color: ${theme.colors.gray[600]}; + font-family: ${theme.typography.header1.fontFamily}; +`; + +const BioText = styled.p` + font-size: 1rem; + padding: 1rem; + color: ${theme.colors.gray[600]}; + font-family: ${theme.typography.fontFamily.korean}; +`; + +const AnswerSection = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 1rem; +`; + +const TitleSection = styled.div` + width: 100%; + display: flex; + justify-content: start; + align-items: center; +`; + +const Title = styled.h1` + font-family: ${theme.typography.header1.fontFamily}; + color: ${theme.colors.primary}; + font-size: 20px; + font-weight: bold; + text-align: left; +`; + +const AnswerCounter = styled.span` + font-family: ${theme.typography.fontFamily.english}; + color: ${theme.colors.gray[400]}; + font-size: 0.75rem; + text-align: left; + margin-left: 0.3rem; +`; + diff --git a/src/pages/Select/index.tsx b/src/pages/Select/index.tsx index f7cb988..7e22791 100644 --- a/src/pages/Select/index.tsx +++ b/src/pages/Select/index.tsx @@ -27,10 +27,13 @@ const SelectPage = () => { const Container = styled.div` width: 100%; padding: 2rem 1rem; - background-color: #FFF9F4; + background-color: ${theme.colors.background}; min-height: calc(100vh - 5.25rem); margin-bottom: 5.25rem; - overflow: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; `; const LogoWrapper = styled.div` @@ -38,11 +41,11 @@ const LogoWrapper = styled.div` display: flex; justify-content: center; align-items: center; - margin-top: 8.75rem; - margin-bottom: 2.358rem; + margin-bottom: 2.312rem; `; const Title = styled.h1` + width: 100%; font-size: 1.125rem; font-weight: bold; color: ${theme.colors.primary}; diff --git a/src/router/index.tsx b/src/router/index.tsx index ce03ee8..a64b0ad 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -13,6 +13,7 @@ import ChatRoom from '@/pages/ChatRoom'; import QSpaceDetailPage from '@/pages/QSpaceDetail'; import QuestionPage from '@/pages/Question'; import SelectPage from '@/pages/Select'; +import ProfilePage from '@/pages/Profile'; const router = createBrowserRouter([ { @@ -71,6 +72,10 @@ const router = createBrowserRouter([ path: '/select', element: , }, + { + path: '/profile/:id', + element: , + }, ], }, ]);