From 0731688e27fbd778b70a0d9760edc08328977d10 Mon Sep 17 00:00:00 2001 From: MinSeok Kim Date: Sun, 1 Dec 2024 20:39:17 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20page=20style=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=20(mypage=20qspace=EC=A0=9C=EC=99=B8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Alarm/index.tsx | 115 ++---------- src/pages/Alarm/styles.ts | 95 ++++++++++ src/pages/ChatList/index.tsx | 82 ++------- src/pages/ChatList/styles.ts | 59 +++++++ .../ChatRoom/component/InputBar.styles.ts | 49 ++++++ src/pages/ChatRoom/component/InputBar.tsx | 60 ++----- src/pages/ChatRoom/index.tsx | 100 ++--------- src/pages/ChatRoom/styles.ts | 80 +++++++++ src/pages/HobbySelect/index.tsx | 26 +++ src/pages/HobbySelect/styles.ts | 35 ++++ src/pages/Landing/Constants/style.ts | 13 ++ src/pages/Landing/index.tsx | 55 +----- src/pages/Landing/styles.ts | 33 ++++ src/pages/Login/Constants/styles.ts | 43 +++++ .../Login/InputForm/InputForm.stories.tsx | 2 +- src/pages/Login/InputForm/InputForm.styles.ts | 30 ++++ src/pages/Login/InputForm/InputForm.tsx | 32 +--- .../KakaoLoginButton.stories.tsx | 2 +- .../KakaoLoginButton.styles.ts | 18 ++ .../KakaoLoginButton/KakaoLoginButton.tsx | 30 +--- .../Login/LoginButton/LoginButton.stories.tsx | 2 +- .../Login/LoginButton/LoginButton.styles.ts | 17 ++ src/pages/Login/LoginButton/LoginButton.tsx | 30 +--- src/pages/Login/LoginForm/LoginForm.styles.ts | 43 +++++ src/pages/Login/LoginForm/LoginForm.tsx | 72 ++------ src/pages/Login/index.tsx | 89 ++-------- src/pages/Login/styles.ts | 54 ++++++ .../AnswerCard/AnswerCard.stories.tsx | 2 +- .../AnswerCard/AnswerCard.styles.ts | 49 ++++++ .../Main/components/AnswerCard/AnswerCard.tsx | 57 +----- .../PopularPostCard/PopularPostCard.styles.ts | 52 ++++++ .../PopularPostCard/PopularPostCard.tsx | 55 +----- .../PopularPostSlider.styles.ts | 18 ++ .../PopularPostSlider/PopularPostSlider.tsx | 23 +-- .../ProfileCard/ProfileCard.styles.ts | 72 ++++++++ .../components/ProfileCard/ProfileCard.tsx | 79 +-------- .../QuestionCard/QuestionCard.styles.ts | 44 +++++ .../components/QuestionCard/QuestionCard.tsx | 49 +----- src/pages/Main/index.tsx | 90 ++-------- src/pages/Main/styles.ts | 74 ++++++++ src/pages/MyPage/index.tsx | 65 +------ src/pages/MyPage/styles.ts | 56 ++++++ src/pages/Profile/components/Button.styles.ts | 21 +++ src/pages/Profile/components/Button.tsx | 31 +--- src/pages/Profile/index.tsx | 150 +++------------- src/pages/Profile/styles.ts | 107 ++++++++++++ src/pages/Question/index.tsx | 165 ++---------------- src/pages/Question/styles.ts | 139 +++++++++++++++ src/pages/Select/index.tsx | 60 ------- src/pages/follower/index.tsx | 99 ++--------- src/pages/follower/styles.ts | 80 +++++++++ src/router/index.tsx | 8 +- 52 files changed, 1529 insertions(+), 1382 deletions(-) create mode 100644 src/pages/Alarm/styles.ts create mode 100644 src/pages/ChatList/styles.ts create mode 100644 src/pages/ChatRoom/component/InputBar.styles.ts create mode 100644 src/pages/ChatRoom/styles.ts create mode 100644 src/pages/HobbySelect/index.tsx create mode 100644 src/pages/HobbySelect/styles.ts create mode 100644 src/pages/Landing/Constants/style.ts create mode 100644 src/pages/Landing/styles.ts create mode 100644 src/pages/Login/Constants/styles.ts create mode 100644 src/pages/Login/InputForm/InputForm.styles.ts create mode 100644 src/pages/Login/KakaoLoginButton/KakaoLoginButton.styles.ts create mode 100644 src/pages/Login/LoginButton/LoginButton.styles.ts create mode 100644 src/pages/Login/LoginForm/LoginForm.styles.ts create mode 100644 src/pages/Login/styles.ts create mode 100644 src/pages/Main/components/AnswerCard/AnswerCard.styles.ts create mode 100644 src/pages/Main/components/PopularPostCard/PopularPostCard.styles.ts create mode 100644 src/pages/Main/components/PopularPostSlider/PopularPostSlider.styles.ts create mode 100644 src/pages/Main/components/ProfileCard/ProfileCard.styles.ts create mode 100644 src/pages/Main/components/QuestionCard/QuestionCard.styles.ts create mode 100644 src/pages/Main/styles.ts create mode 100644 src/pages/MyPage/styles.ts create mode 100644 src/pages/Profile/components/Button.styles.ts create mode 100644 src/pages/Profile/styles.ts create mode 100644 src/pages/Question/styles.ts delete mode 100644 src/pages/Select/index.tsx create mode 100644 src/pages/follower/styles.ts diff --git a/src/pages/Alarm/index.tsx b/src/pages/Alarm/index.tsx index 97d33d2..9d5cab3 100644 --- a/src/pages/Alarm/index.tsx +++ b/src/pages/Alarm/index.tsx @@ -1,9 +1,24 @@ /** @jsxImportSource @emotion/react */ -import { css } from '@emotion/react'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { IoChevronBack } from 'react-icons/io5'; import ProfileImage from '@/components/ui/ProfileImageCon/ProfileImageCon'; +import { + backIconStyle, + containerStyle, + headerStyle, + headerTitleStyle, + listCon, + listConRead, + listStyle, + markAllAsReadStyle, + notificationContentStyle, + notificationMessageStyle, + notificationTypeStyle, + readWrap, + timeStyle, + unreadCountStyle, +} from '@/pages/Alarm/styles'; interface NotificationItem { id: number; type: string; @@ -11,7 +26,7 @@ interface NotificationItem { time: string; } -const NotificationPage: React.FC = () => { +const NotificationPage = () => { const navigate = useNavigate(); const notifications: NotificationItem[] = [ { @@ -103,97 +118,3 @@ const NotificationPage: React.FC = () => { }; export default NotificationPage; - -// 스타일 정의 -const containerStyle = css` - display: flex; - flex-direction: column; - height: 100vh; - background-color: #f9f4ef; -`; - -const headerStyle = css` - display: flex; - align-items: center; - justify-content: center; - position: relative; - padding: 10px 15px; - background-color: #ffffff; - border-bottom: 1px solid #ccc; -`; -const readWrap = css` - display: flex; - text-align: center; - align-items: center; - justify-content: space-between; - padding-right: 12px; -`; - -const backIconStyle = css` - position: absolute; - left: 15px; - font-size: 24px; - cursor: pointer; -`; - -const headerTitleStyle = css` - font-size: 18px; - font-weight: bold; -`; - -const markAllAsReadStyle = css` - font-size: 14px; - border-radius: 16px; - padding: 6px; - color: #b9a298; - background-color: #f3ebe1; - cursor: pointer; -`; - -const unreadCountStyle = css` - padding: 10px 15px; - font-size: 14px; - color: #666; -`; - -const listStyle = css` - flex: 1; - overflow-y: auto; - background-color: #f9f3ec; -`; - -const listCon = css` - background-color: #f3ebe1; - padding: 8px; - height: 80px; - border-bottom: 1px solid #ccc; - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; -`; - -const listConRead = css` - background-color: #f9f4ef; /* 읽음 처리된 배경 색 */ -`; - -const notificationContentStyle = css` - flex: 1; - margin-left: 8px; -`; - -const notificationTypeStyle = css` - font-size: 12px; - color: #999; -`; - -const notificationMessageStyle = css` - margin-top: 4px; - font-size: 14px; - color: #333; -`; - -const timeStyle = css` - font-size: 12px; - color: #999; -`; diff --git a/src/pages/Alarm/styles.ts b/src/pages/Alarm/styles.ts new file mode 100644 index 0000000..e0e1d19 --- /dev/null +++ b/src/pages/Alarm/styles.ts @@ -0,0 +1,95 @@ +import { css } from '@emotion/react'; + +// 스타일 정의 +export const containerStyle = css` + display: flex; + flex-direction: column; + height: 100vh; + background-color: #f9f4ef; +`; + +export const headerStyle = css` + display: flex; + align-items: center; + justify-content: center; + position: relative; + padding: 10px 15px; + background-color: #ffffff; + border-bottom: 1px solid #ccc; +`; +export const readWrap = css` + display: flex; + text-align: center; + align-items: center; + justify-content: space-between; + padding-right: 12px; +`; + +export const backIconStyle = css` + position: absolute; + left: 15px; + font-size: 24px; + cursor: pointer; +`; + +export const headerTitleStyle = css` + font-size: 18px; + font-weight: bold; +`; + +export const markAllAsReadStyle = css` + font-size: 14px; + border-radius: 16px; + padding: 6px; + color: #b9a298; + background-color: #f3ebe1; + cursor: pointer; +`; + +export const unreadCountStyle = css` + padding: 10px 15px; + font-size: 14px; + color: #666; +`; + +export const listStyle = css` + flex: 1; + overflow-y: auto; + background-color: #f9f3ec; +`; + +export const listCon = css` + background-color: #f3ebe1; + padding: 8px; + height: 80px; + border-bottom: 1px solid #ccc; + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; +`; + +export const listConRead = css` + background-color: #f9f4ef; /* 읽음 처리된 배경 색 */ +`; + +export const notificationContentStyle = css` + flex: 1; + margin-left: 8px; +`; + +export const notificationTypeStyle = css` + font-size: 12px; + color: #999; +`; + +export const notificationMessageStyle = css` + margin-top: 4px; + font-size: 14px; + color: #333; +`; + +export const timeStyle = css` + font-size: 12px; + color: #999; +`; diff --git a/src/pages/ChatList/index.tsx b/src/pages/ChatList/index.tsx index 9d7b094..f38af45 100644 --- a/src/pages/ChatList/index.tsx +++ b/src/pages/ChatList/index.tsx @@ -1,10 +1,19 @@ /** @jsxImportSource @emotion/react */ -import { css } from '@emotion/react'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import ProfileImageCon from '../../components/ui/ProfileImageCon/ProfileImageCon'; import InputBar from '../../components/ui/InputBar/InputBar'; import Header from '@/components/common/Header'; +import { + chatContentStyle, + chatItemStyle, + chatListContainerStyle, + chatListStyle, + lastMessageStyle, + timeStyle, + unreadCountStyle, + userNameStyle, +} from '@/pages/ChatList/styles'; interface ChatItemProps { id: string; // 채팅방 ID profileImg?: string; // 프로필 이미지 URL @@ -15,14 +24,7 @@ interface ChatItemProps { } // 채팅 리스트 아이템 컴포넌트 -const ChatItem: React.FC = ({ - id, - profileImg, - userName, - lastMessage, - time, - unreadCount, -}) => { +const ChatItem = ({ id, profileImg, userName, lastMessage, time, unreadCount }: ChatItemProps) => { const navigate = useNavigate(); const handleClick = () => { @@ -47,7 +49,7 @@ const ChatItem: React.FC = ({ }; // 채팅 리스트 메인 컴포넌트 -const ChatList: React.FC = () => { +const ChatList = () => { const [searchTerm, setSearchTerm] = useState(''); // 검색어 상태 const [chatData] = useState([ { @@ -99,61 +101,3 @@ const ChatList: React.FC = () => { }; export default ChatList; - -// 스타일 정의 -const chatListContainerStyle = css` - padding: 0; - height: 773px; -`; -const chatListStyle = css` - height: 100vh; - background-color: #f9f3ec; - - border-bottom: 1px solid #ccc; -`; - -const chatItemStyle = css` - display: flex; - align-items: center; - padding: 10px; - border-bottom: 0.5px solid #ccc; - cursor: pointer; - - &:hover { - background-color: #f0e8dc; - } -`; - -const chatContentStyle = css` - flex: 1; - margin-left: 10px; -`; - -const userNameStyle = css` - display: flex; - justify-content: space-between; - font-size: 14px; - font-weight: bold; -`; - -const timeStyle = css` - color: #999; - font-size: 12px; -`; - -const lastMessageStyle = css` - display: flex; - justify-content: space-between; - font-size: 12px; - color: #666; - margin-top: 4px; -`; - -const unreadCountStyle = css` - background-color: #ff4d4f; - color: #fff; - font-size: 10px; - padding: 2px 6px; - border-radius: 12px; - margin-left: 5px; -`; diff --git a/src/pages/ChatList/styles.ts b/src/pages/ChatList/styles.ts new file mode 100644 index 0000000..d61af13 --- /dev/null +++ b/src/pages/ChatList/styles.ts @@ -0,0 +1,59 @@ +// 스타일 정의 +import { css } from '@emotion/react'; + +export const chatListContainerStyle = css` + padding: 0; + height: 773px; +`; +export const chatListStyle = css` + height: 100vh; + background-color: #f9f3ec; + + border-bottom: 1px solid #ccc; +`; + +export const chatItemStyle = css` + display: flex; + align-items: center; + padding: 10px; + border-bottom: 0.5px solid #ccc; + cursor: pointer; + + &:hover { + background-color: #f0e8dc; + } +`; + +export const chatContentStyle = css` + flex: 1; + margin-left: 10px; +`; + +export const userNameStyle = css` + display: flex; + justify-content: space-between; + font-size: 14px; + font-weight: bold; +`; + +export const timeStyle = css` + color: #999; + font-size: 12px; +`; + +export const lastMessageStyle = css` + display: flex; + justify-content: space-between; + font-size: 12px; + color: #666; + margin-top: 4px; +`; + +export const unreadCountStyle = css` + background-color: #ff4d4f; + color: #fff; + font-size: 10px; + padding: 2px 6px; + border-radius: 12px; + margin-left: 5px; +`; diff --git a/src/pages/ChatRoom/component/InputBar.styles.ts b/src/pages/ChatRoom/component/InputBar.styles.ts new file mode 100644 index 0000000..b76cb2a --- /dev/null +++ b/src/pages/ChatRoom/component/InputBar.styles.ts @@ -0,0 +1,49 @@ +import { css } from '@emotion/react'; + +export const inputWrap = css` + display: flex; + gap: 8px; +`; + +export const inputContainerStyle = css` + display: flex; + align-items: center; + padding: 10px; + border: 1px solid #ccc; + border-radius: 24px; + background-color: #fff; + gap: 8px; + flex: 1; +`; + +export const iconButtonStyle = css` + background: none; + border: none; + cursor: pointer; +`; + +export const iconStyle = css` + font-size: 20px; + color: #b3b3b3; +`; + +export const inputStyle = css` + flex: 1; + border: none; + outline: none; + font-size: 14px; + padding: 8px; + color: #333; +`; + +export const sendButtonStyle = css` + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +`; + +export const sendIconStyle = css` + width: 48px; + height: 48px; +`; diff --git a/src/pages/ChatRoom/component/InputBar.tsx b/src/pages/ChatRoom/component/InputBar.tsx index 15051b2..7d2f9e4 100644 --- a/src/pages/ChatRoom/component/InputBar.tsx +++ b/src/pages/ChatRoom/component/InputBar.tsx @@ -1,6 +1,14 @@ /** @jsxImportSource @emotion/react */ -import { css } from '@emotion/react'; -import React, { useState } from 'react'; +import { + iconButtonStyle, + iconStyle, + inputContainerStyle, + inputStyle, + inputWrap, + sendButtonStyle, + sendIconStyle, +} from '@/pages/ChatRoom/component/InputBar.styles'; +import { useState } from 'react'; import { MdOutlineAddAPhoto } from 'react-icons/md'; interface InputBarProps { @@ -59,51 +67,3 @@ const ChatInputBar: React.FC = ({ }; export default ChatInputBar; - -const inputWrap = css` - display: flex; - gap: 8px; -`; - -const inputContainerStyle = css` - display: flex; - align-items: center; - padding: 10px; - border: 1px solid #ccc; - border-radius: 24px; - background-color: #fff; - gap: 8px; - flex: 1; -`; - -const iconButtonStyle = css` - background: none; - border: none; - cursor: pointer; -`; - -const iconStyle = css` - font-size: 20px; - color: #b3b3b3; -`; - -const inputStyle = css` - flex: 1; - border: none; - outline: none; - font-size: 14px; - padding: 8px; - color: #333; -`; - -const sendButtonStyle = css` - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; -`; - -const sendIconStyle = css` - width: 48px; - height: 48px; -`; diff --git a/src/pages/ChatRoom/index.tsx b/src/pages/ChatRoom/index.tsx index 1e328fc..61c08b8 100644 --- a/src/pages/ChatRoom/index.tsx +++ b/src/pages/ChatRoom/index.tsx @@ -1,6 +1,5 @@ /** @jsxImportSource @emotion/react */ -import { css } from '@emotion/react'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useParams } from 'react-router-dom'; import { useNavigate } from 'react-router-dom'; import ProfileImageCon from '../../components/ui/ProfileImageCon/ProfileImageCon'; @@ -8,8 +7,22 @@ import { HiOutlineBell } from 'react-icons/hi2'; import { HiOutlineBellSlash } from 'react-icons/hi2'; import { IoChevronBack } from 'react-icons/io5'; import ChatInputBar from '@/pages/ChatRoom/component/InputBar'; - -const ChatRoom: React.FC = () => { +import { + backIconStyle, + chatRoomContainer, + headerStyle, + headerTitle, + iconButtonStyle, + iconStyle, + messageContentStyle, + messageListStyle, + myMessageStyle, + otherMessageStyle, + timeStyleLeft, + timeStyleRight, +} from '@/pages/ChatRoom/styles'; + +const ChatRoom = () => { const { id } = useParams<{ id: string }>(); const navigate = useNavigate(); const [messages, setMessages] = useState([ @@ -105,82 +118,3 @@ const ChatRoom: React.FC = () => { }; export default ChatRoom; - -// 스타일 정의 -const iconButtonStyle = css` - background: none; - border: none; - cursor: pointer; -`; - -const iconStyle = css` - font-size: 24px; -`; -const chatRoomContainer = css` - display: flex; - flex-direction: column; - height: 100vh; -`; - -const headerStyle = css` - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 15px; - background-color: #ffffff; - border-bottom: 1px solid #e0e0e0; -`; - -const headerTitle = css` - margin-left: 10px; - font-size: 18px; - font-weight: bold; -`; -const backIconStyle = css` - font-size: 24px; - cursor: pointer; -`; - -const messageListStyle = css` - flex: 1; - padding: 10px; - overflow-y: auto; - background-color: #f9f3ec; -`; - -const otherMessageStyle = css` - display: flex; - align-items: flex-start; - margin-bottom: 10px; - gap: 10px; /* 프로필 이미지와 메시지 사이 간격 */ -`; - -const myMessageStyle = css` - display: flex; - justify-content: flex-end; - margin-bottom: 10px; - gap: 10px; /* 메시지와 시간 간 간격 */ -`; - -const messageContentStyle = css` - max-width: 70%; - background-color: #ffffff; - border-radius: 10px; - padding: 10px; - font-size: 14px; - box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -`; - -const timeStyleLeft = css` - font-size: 12px; - color: #999999; - align-self: flex-end; - margin-left: 10px; /* 메시지와 시간 간 간격 */ -`; - -const timeStyleRight = css` - font-size: 12px; - color: #999999; - align-self: flex-end; - margin-right: 10px; /* 메시지와 시간 간 간격 */ -`; diff --git a/src/pages/ChatRoom/styles.ts b/src/pages/ChatRoom/styles.ts new file mode 100644 index 0000000..ef58fde --- /dev/null +++ b/src/pages/ChatRoom/styles.ts @@ -0,0 +1,80 @@ +import { css } from '@emotion/react'; + +// 스타일 정의 +export const iconButtonStyle = css` + background: none; + border: none; + cursor: pointer; +`; + +export const iconStyle = css` + font-size: 24px; +`; +export const chatRoomContainer = css` + display: flex; + flex-direction: column; + height: 100vh; +`; + +export const headerStyle = css` + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 15px; + background-color: #ffffff; + border-bottom: 1px solid #e0e0e0; +`; + +export const headerTitle = css` + margin-left: 10px; + font-size: 18px; + font-weight: bold; +`; +export const backIconStyle = css` + font-size: 24px; + cursor: pointer; +`; + +export const messageListStyle = css` + flex: 1; + padding: 10px; + overflow-y: auto; + background-color: #f9f3ec; +`; + +export const otherMessageStyle = css` + display: flex; + align-items: flex-start; + margin-bottom: 10px; + gap: 10px; /* 프로필 이미지와 메시지 사이 간격 */ +`; + +export const myMessageStyle = css` + display: flex; + justify-content: flex-end; + margin-bottom: 10px; + gap: 10px; /* 메시지와 시간 간 간격 */ +`; + +export const messageContentStyle = css` + max-width: 70%; + background-color: #ffffff; + border-radius: 10px; + padding: 10px; + font-size: 14px; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); +`; + +export const timeStyleLeft = css` + font-size: 12px; + color: #999999; + align-self: flex-end; + margin-left: 10px; /* 메시지와 시간 간 간격 */ +`; + +export const timeStyleRight = css` + font-size: 12px; + color: #999999; + align-self: flex-end; + margin-right: 10px; /* 메시지와 시간 간 간격 */ +`; diff --git a/src/pages/HobbySelect/index.tsx b/src/pages/HobbySelect/index.tsx new file mode 100644 index 0000000..396d420 --- /dev/null +++ b/src/pages/HobbySelect/index.tsx @@ -0,0 +1,26 @@ +import { useNavigate } from 'react-router-dom'; +import { Logo } from '@/components/ui/Logo/Logo'; +import CategorySelectContainer from '@/components/ui/CategorySelectContainer/CategorySelectContainer'; +import { CategoryContainer, Container, LogoWrapper, Title } from '@/pages/HobbySelect/styles'; + +const HobbySelectPage = () => { + const navigate = useNavigate(); + const handleCategorySelect = (categoryId: string) => { + //질문에 답했는데 확인 로직 추가 + navigate(`/question/${categoryId}`); + }; + + return ( + + + + + 당신의 취향을 골라주세요! + + + + + ); +}; + +export default HobbySelectPage; diff --git a/src/pages/HobbySelect/styles.ts b/src/pages/HobbySelect/styles.ts new file mode 100644 index 0000000..900cc1a --- /dev/null +++ b/src/pages/HobbySelect/styles.ts @@ -0,0 +1,35 @@ +import theme from '@/styles/theme'; +import styled from '@emotion/styled'; + +export const Container = styled.div` + width: 100%; + padding: 2rem 1rem; + background-color: ${theme.colors.background}; + min-height: calc(100vh - 5.25rem); + margin-bottom: 5.25rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + +export const LogoWrapper = styled.div` + width: 100%; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 2.312rem; +`; + +export const Title = styled.h1` + width: 100%; + font-size: 1.125rem; + font-weight: bold; + color: ${theme.colors.primary}; + text-align: center; + margin-bottom: 4.875rem; +`; + +export const CategoryContainer = styled.div` + width: 100%; +`; diff --git a/src/pages/Landing/Constants/style.ts b/src/pages/Landing/Constants/style.ts new file mode 100644 index 0000000..b1ced19 --- /dev/null +++ b/src/pages/Landing/Constants/style.ts @@ -0,0 +1,13 @@ +export const STYLE = { + LOGO: { + WIDTH: '7rem', // 112px + HEIGHT: '5.8125rem', // 93px + MARGIN_TOP: '12.5rem', // 200px + }, + TITLE: { + MARGIN_TOP: '2.5rem', //40px + }, + SUBTITLE: { + MARGIN_TOP: '17.5rem', //280px + }, +}; diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx index 73c3ad9..e9afed6 100644 --- a/src/pages/Landing/index.tsx +++ b/src/pages/Landing/index.tsx @@ -1,59 +1,18 @@ +import { LogoWrapper } from '@/components/common/Header.styles'; import { Logo } from '@/components/ui/Logo/Logo'; -import theme from '@/styles/theme'; -import styled from '@emotion/styled'; +import { STYLE } from '@/pages/Landing/Constants/style'; +import { Container, SubTitle, Title } from '@/pages/Landing/styles'; -const STYLE = { - LOGO: { - WIDTH: '7rem', // 112px - HEIGHT: '5.8125rem', // 93px - MARGIN_TOP: '12.5rem', // 200px - }, - TITLE: { - MARGIN_TOP: '2.5rem', //40px - }, - SUBTITLE: { - MARGIN_TOP: '17.5rem', //280px - }, -}; - -export const LandingPage = () => { +const LandingPage = () => { return ( - + 나의 취향 메이트 찾기 Q-feed - + ); }; -const Container = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100vh; - background-color: ${theme.colors.background}; - background-image: ${theme.colors.background}; -`; - -const LogoWraper = styled.div` - margin-top: ${STYLE.LOGO.MARGIN_TOP}; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -`; - -const Title = styled.h1` - font-family: ${theme.typography.fontFamily.korean}; -`; - -const SubTitle = styled.h2` - font: ${theme.typography.header2.fontFamily}; - font-size: ${theme.typography.header2.size}; - font-weight: bold; - color: ${theme.colors.primary}; - margin-top: ${STYLE.SUBTITLE.MARGIN_TOP}; -`; +export default LandingPage; diff --git a/src/pages/Landing/styles.ts b/src/pages/Landing/styles.ts new file mode 100644 index 0000000..01420f4 --- /dev/null +++ b/src/pages/Landing/styles.ts @@ -0,0 +1,33 @@ +import { STYLE } from '@/pages/Landing/Constants/style'; +import theme from '@/styles/theme'; +import styled from '@emotion/styled'; + +export const Container = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; + background-color: ${theme.colors.background}; + background-image: ${theme.colors.background}; +`; + +export const LogoWraper = styled.div` + margin-top: ${STYLE.LOGO.MARGIN_TOP}; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +`; + +export const Title = styled.h1` + font-family: ${theme.typography.fontFamily.korean}; +`; + +export const SubTitle = styled.h2` + font: ${theme.typography.header2.fontFamily}; + font-size: ${theme.typography.header2.size}; + font-weight: bold; + color: ${theme.colors.primary}; + margin-top: ${STYLE.SUBTITLE.MARGIN_TOP}; +`; diff --git a/src/pages/Login/Constants/styles.ts b/src/pages/Login/Constants/styles.ts new file mode 100644 index 0000000..5eb7025 --- /dev/null +++ b/src/pages/Login/Constants/styles.ts @@ -0,0 +1,43 @@ +export const STYLES = { + LAYOUT: { + HEADER_HEIGHT: '0.9375rem', //15px + MIN_HEIGHT: '48.3125rem', //773px + PADDING: '1.5rem', //24px + GAP: '1rem', + }, + LOGO: { + WIDTH: '5.375rem', //86px + HEIGHT: '4.5625rem', //73px + }, + BUTTON: { + MAX_WIDTH: '23.5625rem', //377px + HEIGHT: '2.875rem', //46px + FONT_SIZE: '1rem', + BORDER_RADIUS: '0.9375rem', //15px + }, + LOGINBUTTON: { + HEIGHT: '2.875rem', //46px + FONT_SIZE: '1rem', //16px + BORDER_RADIUS: '0.9375rem', //15px + MARGIN_BOTTOM: '1rem', + MARGIN_TOP: '1rem', + }, + FORM: { + MAX_WIDTH: '26.5625rem', // 425px + MIN_HEIGHT: '11.625rem', // 170px + CONTROL_HEIGHT: '6.5rem', // 72px ===> 6.5rem(104px)으로 바꾸면 가능 + MARGIN_BOTTOM: '1rem', // 16px + }, + BUTTONLOGINFORM: { + HEIGHT: '2.875rem', // 46px + BORDER_RADIUS: '0.9375rem', // 15px + }, + INPUT: { + MAX_WIDTH: '23.5625rem', // 377px + MIN_HEIGHT: '3rem', // 48px + PADDING: '1rem', + }, + LOGINBUTTONLOGINFORM: { + MARGIN_TOP: '1rem', //16px + }, +} as const; diff --git a/src/pages/Login/InputForm/InputForm.stories.tsx b/src/pages/Login/InputForm/InputForm.stories.tsx index 22b1d9a..a238474 100644 --- a/src/pages/Login/InputForm/InputForm.stories.tsx +++ b/src/pages/Login/InputForm/InputForm.stories.tsx @@ -1,9 +1,9 @@ // InputForm.stories.tsx import type { Meta } from '@storybook/react'; -import { InputForm } from './InputForm'; import { ChakraProvider } from '@chakra-ui/react'; import theme from '@/styles/theme'; import { useState } from 'react'; +import InputForm from '@/pages/Login/InputForm/InputForm'; const meta = { title: 'Pages/Login/InputForm', diff --git a/src/pages/Login/InputForm/InputForm.styles.ts b/src/pages/Login/InputForm/InputForm.styles.ts new file mode 100644 index 0000000..50b91fc --- /dev/null +++ b/src/pages/Login/InputForm/InputForm.styles.ts @@ -0,0 +1,30 @@ +import styled from '@emotion/styled'; +import { Input } from '@chakra-ui/react'; +import theme from '@/styles/theme'; + +export const Container = styled.div``; + +export const Title = styled.h1` + font-size: ${theme.typography.body1.size}; + line-height: ${theme.typography.body1.lineHeight}; + font-weight: ${theme.typography.body1.weight}; + text-align: left; + margin-bottom: 15px; +`; + +export const StyledInput = styled(Input)` + width: 100%; + min-width: 377px; + height: 56px; + color: ${theme.colors.gray[300]}; + font-size: 1rem; + border-radius: 15px; + padding: 0 1rem; + border: 1px solid ${(props) => (props.isInvalid ? theme.colors.notice : theme.colors.gray[300])}; + + &:focus { + border-color: ${(props) => (props.isInvalid ? theme.colors.notice : theme.colors.primary)}; + box-shadow: 0 0 0 1px + ${(props) => (props.isInvalid ? theme.colors.notice : theme.colors.primary)}; + } +`; diff --git a/src/pages/Login/InputForm/InputForm.tsx b/src/pages/Login/InputForm/InputForm.tsx index 59cb46d..805e555 100644 --- a/src/pages/Login/InputForm/InputForm.tsx +++ b/src/pages/Login/InputForm/InputForm.tsx @@ -1,7 +1,6 @@ import { type ReactNode } from 'react'; -import styled from '@emotion/styled'; -import { Input } from '@chakra-ui/react'; import theme from '@/styles/theme'; +import { Container, StyledInput, Title } from '@/pages/Login/InputForm/InputForm.styles'; type InputFormProps = { title: string; @@ -14,7 +13,7 @@ type InputFormProps = { children?: ReactNode; }; -export const InputForm = ({ +const InputForm = ({ title, placeholder, value, @@ -42,29 +41,4 @@ export const InputForm = ({ ); }; -const Container = styled.div``; - -const Title = styled.h1` - font-size: ${theme.typography.body1.size}; - line-height: ${theme.typography.body1.lineHeight}; - font-weight: ${theme.typography.body1.weight}; - text-align: left; - margin-bottom: 15px; -`; - -const StyledInput = styled(Input)` - width: 100%; - min-width: 377px; - height: 56px; - color: ${theme.colors.gray[300]}; - font-size: 1rem; - border-radius: 15px; - padding: 0 1rem; - border: 1px solid ${(props) => (props.isInvalid ? theme.colors.notice : theme.colors.gray[300])}; - - &:focus { - border-color: ${(props) => (props.isInvalid ? theme.colors.notice : theme.colors.primary)}; - box-shadow: 0 0 0 1px - ${(props) => (props.isInvalid ? theme.colors.notice : theme.colors.primary)}; - } -`; +export default InputForm; diff --git a/src/pages/Login/KakaoLoginButton/KakaoLoginButton.stories.tsx b/src/pages/Login/KakaoLoginButton/KakaoLoginButton.stories.tsx index be37389..68796e2 100644 --- a/src/pages/Login/KakaoLoginButton/KakaoLoginButton.stories.tsx +++ b/src/pages/Login/KakaoLoginButton/KakaoLoginButton.stories.tsx @@ -1,6 +1,6 @@ // KakaoLoginButton.stories.tsx +import KakaoLoginButton from '@/pages/Login/KakaoLoginButton/KakaoLoginButton'; import type { Meta, StoryObj } from '@storybook/react'; -import { KakaoLoginButton } from './KakaoLoginButton'; const meta = { title: 'Pages/Login/KakaoLoginButton', diff --git a/src/pages/Login/KakaoLoginButton/KakaoLoginButton.styles.ts b/src/pages/Login/KakaoLoginButton/KakaoLoginButton.styles.ts new file mode 100644 index 0000000..cebe080 --- /dev/null +++ b/src/pages/Login/KakaoLoginButton/KakaoLoginButton.styles.ts @@ -0,0 +1,18 @@ +import { STYLES } from '@/pages/Login/Constants/styles'; +import theme from '@/styles/theme'; +import { Button } from '@chakra-ui/react'; +import styled from '@emotion/styled'; + +export const StyledButton = styled(Button)` + width: 100%; + max-width: ${STYLES.BUTTON.MAX_WIDTH}; + height: ${STYLES.BUTTON.HEIGHT}; + font: ${theme.typography.fontFamily}; + border: none; + font-size: ${STYLES.BUTTON.FONT_SIZE}; + font-weight: normal; + border-radius: ${STYLES.BUTTON.BORDER_RADIUS}; + display: flex; + justify-content: center; + align-items: center; +`; diff --git a/src/pages/Login/KakaoLoginButton/KakaoLoginButton.tsx b/src/pages/Login/KakaoLoginButton/KakaoLoginButton.tsx index 0222d9b..e30ebf7 100644 --- a/src/pages/Login/KakaoLoginButton/KakaoLoginButton.tsx +++ b/src/pages/Login/KakaoLoginButton/KakaoLoginButton.tsx @@ -1,37 +1,13 @@ +import { StyledButton } from '@/pages/Login/KakaoLoginButton/KakaoLoginButton.styles'; import theme from '@/styles/theme'; -import { Button } from '@chakra-ui/react'; -import styled from '@emotion/styled'; import { RiKakaoTalkFill } from 'react-icons/ri'; -const STYLES = { - BUTTON: { - MAX_WIDTH: '23.5625rem', //377px - HEIGHT: '2.875rem', //46px - FONT_SIZE: '1rem', - BORDER_RADIUS: '0.9375rem', //15px - }, -} as const; - -const StyledButton = styled(Button)` - width: 100%; - max-width: ${STYLES.BUTTON.MAX_WIDTH}; - height: ${STYLES.BUTTON.HEIGHT}; - font: ${theme.typography.fontFamily}; - border: none; - font-size: ${STYLES.BUTTON.FONT_SIZE}; - font-weight: normal; - border-radius: ${STYLES.BUTTON.BORDER_RADIUS}; - display: flex; - justify-content: center; - align-items: center; -`; - type KakaoLoginButtonProps = { text?: string; onClick?: () => void; }; -export const KakaoLoginButton = ({ text = '카카오 로그인', onClick }: KakaoLoginButtonProps) => { +const KakaoLoginButton = ({ text = '카카오 로그인', onClick }: KakaoLoginButtonProps) => { return ( } @@ -53,3 +29,5 @@ export const KakaoLoginButton = ({ text = '카카오 로그인', onClick }: Kaka ); }; + +export default KakaoLoginButton; diff --git a/src/pages/Login/LoginButton/LoginButton.stories.tsx b/src/pages/Login/LoginButton/LoginButton.stories.tsx index 37942a6..4b838f0 100644 --- a/src/pages/Login/LoginButton/LoginButton.stories.tsx +++ b/src/pages/Login/LoginButton/LoginButton.stories.tsx @@ -1,6 +1,6 @@ // LoginButton.stories.tsx +import LoginButton from '@/pages/Login/LoginButton/LoginButton'; import type { Meta, StoryObj } from '@storybook/react'; -import { LoginButton } from './LoginButton'; const meta = { title: 'Pages/Login/LoginButton', component: LoginButton, diff --git a/src/pages/Login/LoginButton/LoginButton.styles.ts b/src/pages/Login/LoginButton/LoginButton.styles.ts new file mode 100644 index 0000000..81a4e90 --- /dev/null +++ b/src/pages/Login/LoginButton/LoginButton.styles.ts @@ -0,0 +1,17 @@ +import styled from '@emotion/styled'; +import { Button } from '@chakra-ui/react'; +import theme from '@/styles/theme'; +import { STYLES } from '@/pages/Login/Constants/styles'; + +export const StyledButton = styled(Button)<{ width: string }>` + width: ${(props) => props.width}; + height: ${STYLES.LOGINBUTTON.HEIGHT}; + font: ${theme.typography.fontFamily}; + font-size: ${STYLES.LOGINBUTTON.FONT_SIZE}; + font-weight: normal; + color: ${theme.colors.white}; + background: ${theme.colors.primary}; + border-radius: ${STYLES.LOGINBUTTON.BORDER_RADIUS}; + margin-bottom: ${STYLES.LOGINBUTTON.MARGIN_BOTTOM}; + margin-top: ${STYLES.LOGINBUTTON.MARGIN_TOP}; +`; diff --git a/src/pages/Login/LoginButton/LoginButton.tsx b/src/pages/Login/LoginButton/LoginButton.tsx index 879fb09..fd94ebb 100644 --- a/src/pages/Login/LoginButton/LoginButton.tsx +++ b/src/pages/Login/LoginButton/LoginButton.tsx @@ -1,37 +1,13 @@ -import styled from '@emotion/styled'; -import { Button } from '@chakra-ui/react'; +import { StyledButton } from '@/pages/Login/LoginButton/LoginButton.styles'; import theme from '@/styles/theme'; -const STYLES = { - BUTTON: { - HEIGHT: '2.875rem', //46px - FONT_SIZE: '1rem', //16px - BORDER_RADIUS: '0.9375rem', //15px - MARGIN_BOTTOM: '1rem', - MARGIN_TOP: '1rem', - }, -}; - -const StyledButton = styled(Button)<{ width: string }>` - width: ${(props) => props.width}; - height: ${STYLES.BUTTON.HEIGHT}; - font: ${theme.typography.fontFamily}; - font-size: ${STYLES.BUTTON.FONT_SIZE}; - font-weight: normal; - color: ${theme.colors.white}; - background: ${theme.colors.primary}; - border-radius: ${STYLES.BUTTON.BORDER_RADIUS}; - margin-bottom: ${STYLES.BUTTON.MARGIN_BOTTOM}; - margin-top: ${STYLES.BUTTON.MARGIN_TOP}; -`; - type LoginButtonProps = { text: string; width?: string; onClick?: () => void; }; -export const LoginButton = ({ text, width = '100%', onClick }: LoginButtonProps) => { +const LoginButton = ({ text, width = '100%', onClick }: LoginButtonProps) => { return ( ); }; + +export default LoginButton; diff --git a/src/pages/Login/LoginForm/LoginForm.styles.ts b/src/pages/Login/LoginForm/LoginForm.styles.ts new file mode 100644 index 0000000..79d67d9 --- /dev/null +++ b/src/pages/Login/LoginForm/LoginForm.styles.ts @@ -0,0 +1,43 @@ +import { STYLES } from '@/pages/Login/Constants/styles'; +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; + +import { FormControl, FormErrorMessage, Input, Stack } from '@chakra-ui/react'; + +export const FormWrapper = styled.form` + width: 100%; + max-width: ${STYLES.FORM.MAX_WIDTH}; + min-height: ${STYLES.FORM.MIN_HEIGHT}; + object-fit: fill; +`; + +export const StyledInput = styled(Input)` + width: 100%; + max-width: ${STYLES.INPUT.MAX_WIDTH}; + min-height: ${STYLES.INPUT.MIN_HEIGHT}; + border-radius: ${STYLES.BUTTONLOGINFORM.BORDER_RADIUS}; + color: ${theme.colors.gray[300]}; + background: ${theme.colors.white}; + padding: 0 ${STYLES.INPUT.PADDING}; +`; + +export const StyledStack = styled(Stack)` + align: flex-start; + width: 100%; + max-width: ${STYLES.FORM.MAX_WIDTH}; +`; + +export const StyledFormControl = styled(FormControl)` + height: ${STYLES.FORM.CONTROL_HEIGHT}; + position: relative; + margin-bottom: ${STYLES.FORM.MARGIN_BOTTOM}; +`; + +export const StyledFormErrorMessage = styled(FormErrorMessage)` + position: absolute; + bottom: 0; +`; + +export const StyledLoginButtonDiv = styled.div` + margin-top: ${STYLES.LOGINBUTTONLOGINFORM.MARGIN_TOP}; +`; diff --git a/src/pages/Login/LoginForm/LoginForm.tsx b/src/pages/Login/LoginForm/LoginForm.tsx index 9d2a71a..38b4252 100644 --- a/src/pages/Login/LoginForm/LoginForm.tsx +++ b/src/pages/Login/LoginForm/LoginForm.tsx @@ -1,68 +1,16 @@ -import { LoginButton } from '@/pages/Login/LoginButton/LoginButton'; +import LoginButton from '@/pages/Login/LoginButton/LoginButton'; +import { + FormWrapper, + StyledFormControl, + StyledFormErrorMessage, + StyledInput, + StyledLoginButtonDiv, + StyledStack, +} from '@/pages/Login/LoginForm/LoginForm.styles'; import theme from '@/styles/theme'; -import { FormControl, FormErrorMessage, FormLabel, Input, Stack } from '@chakra-ui/react'; -import styled from '@emotion/styled'; +import { FormLabel } from '@chakra-ui/react'; import { useForm, SubmitHandler } from 'react-hook-form'; -const STYLES = { - FORM: { - MAX_WIDTH: '26.5625rem', // 425px - MIN_HEIGHT: '11.625rem', // 170px - CONTROL_HEIGHT: '6.5rem', // 72px ===> 6.5rem(104px)으로 바꾸면 가능 - MARGIN_BOTTOM: '1rem', // 16px - }, - BUTTON: { - HEIGHT: '2.875rem', // 46px - BORDER_RADIUS: '0.9375rem', // 15px - }, - IPUT: { - MAX_WIDTH: '23.5625rem', // 377px - MIN_HEIGHT: '3rem', // 48px - PADDING: '1rem', - }, - LOGINBUTTON: { - MARGIN_TOP: '1rem', //16px - }, -} as const; - -const FormWrapper = styled.form` - width: 100%; - max-width: ${STYLES.FORM.MAX_WIDTH}; - min-height: ${STYLES.FORM.MIN_HEIGHT}; - object-fit: fill; -`; - -const StyledInput = styled(Input)` - width: 100%; - max-width: ${STYLES.IPUT.MAX_WIDTH}; - min-height: ${STYLES.IPUT.MIN_HEIGHT}; - border-radius: ${STYLES.BUTTON.BORDER_RADIUS}; - color: ${theme.colors.gray[300]}; - background: ${theme.colors.white}; - padding: 0 ${STYLES.IPUT.PADDING}; -`; - -const StyledStack = styled(Stack)` - align: flex-start; - width: 100%; - max-width: ${STYLES.FORM.MAX_WIDTH}; -`; - -const StyledFormControl = styled(FormControl)` - height: ${STYLES.FORM.CONTROL_HEIGHT}; - position: relative; - margin-bottom: ${STYLES.FORM.MARGIN_BOTTOM}; -`; - -const StyledFormErrorMessage = styled(FormErrorMessage)` - position: absolute; - bottom: 0; -`; - -const StyledLoginButtonDiv = styled.div` - margin-top: ${STYLES.LOGINBUTTON.MARGIN_TOP}; -`; - export interface LoginFormValues { email: string; password: string; diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index a1884de..b3d8814 100644 --- a/src/pages/Login/index.tsx +++ b/src/pages/Login/index.tsx @@ -1,83 +1,15 @@ -import styled from '@emotion/styled'; -import { HStack } from '@chakra-ui/react'; -import { Logo } from "@/components/ui/Logo/Logo"; -import theme from '@/styles/theme'; +import { Logo } from '@/components/ui/Logo/Logo'; import { LoginForm } from '@/pages/Login/LoginForm/LoginForm'; -import { KakaoLoginButton } from '@/pages/Login/KakaoLoginButton/KakaoLoginButton'; - - -const STYLES = { - LAYOUT : { - HEADER_HEIGHT: '0.9375rem', //15px - MIN_HEIGHT: '48.3125rem', //773px - PADDING: '1.5rem', //24px - GAP: '1rem', - }, - LOGO : { - WIDTH: '5.375rem', //86px - HEIGHT: '4.5625rem' //73px - }, - -} as const; - - - -const LogoContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; -`; - -const Container = styled.div` - height: calc(100vh - ${STYLES.LAYOUT.HEADER_HEIGHT}); - min-height: ${STYLES.LAYOUT.MIN_HEIGHT}; - display: flex; - flex-direction: column; - align-items: center; - padding: ${STYLES.LAYOUT.PADDING}; - gap: ${STYLES.LAYOUT.GAP}; - background: ${theme.colors.background}; -`; - -const StyledStack = styled.div` - display: flex; - flex-direction: column; - align-items: center; - width: 100%; -`; - -const StyledHStack = styled(HStack)` - align-items: center; - justify-content: center; - width: 100%; -`; - -const Title = styled.h1` - font-size: ${theme.typography.title1.size}; - line-height: ${theme.typography.title1.lineHeight}; - font-weight: ${theme.typography.title1.weight}; - text-align: center; - color: ${theme.colors.primary}; - margin-top : 40px; -`; - -const TextButton = styled.button` - color: ${theme.colors.gray[300]}; - background: none; - border: none; - cursor: pointer; - - &:hover { - text-decoration: underline; - } -`; +import { STYLES } from '@/pages/Login/Constants/styles'; +import { Container, LogoContainer, StyledHStack, TextButton, Title } from '@/pages/Login/styles'; +import KakaoLoginButton from '@/pages/Login/KakaoLoginButton/KakaoLoginButton'; export const Login = () => { const handleLoginSubmit = () => { alert('로그인 클릭'); }; - const handleKakaoLogin = () =>{ + const handleKakaoLogin = () => { alert('카카오 로그인 클릭'); }; @@ -91,18 +23,17 @@ export const Login = () => { return ( - 나의 취향 메이트 찾기 - + - - + + - + 이메일/비밀번호 찾기 회원가입 @@ -110,4 +41,4 @@ export const Login = () => { ); }; -export default Login; \ No newline at end of file +export default Login; diff --git a/src/pages/Login/styles.ts b/src/pages/Login/styles.ts new file mode 100644 index 0000000..182beab --- /dev/null +++ b/src/pages/Login/styles.ts @@ -0,0 +1,54 @@ +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; +import { STYLES } from '@/pages/Login/Constants/styles'; +import { HStack } from '@chakra-ui/react'; + +export const LogoContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +export const Container = styled.div` + height: calc(100vh - ${STYLES.LAYOUT.HEADER_HEIGHT}); + min-height: ${STYLES.LAYOUT.MIN_HEIGHT}; + display: flex; + flex-direction: column; + align-items: center; + padding: ${STYLES.LAYOUT.PADDING}; + gap: ${STYLES.LAYOUT.GAP}; + background: ${theme.colors.background}; +`; + +export const StyledStack = styled.div` + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +`; + +export const StyledHStack = styled(HStack)` + align-items: center; + justify-content: center; + width: 100%; +`; + +export const Title = styled.h1` + font-size: ${theme.typography.title1.size}; + line-height: ${theme.typography.title1.lineHeight}; + font-weight: ${theme.typography.title1.weight}; + text-align: center; + color: ${theme.colors.primary}; + margin-top: 40px; +`; + +export const TextButton = styled.button` + color: ${theme.colors.gray[300]}; + background: none; + border: none; + cursor: pointer; + + &:hover { + text-decoration: underline; + } +`; diff --git a/src/pages/Main/components/AnswerCard/AnswerCard.stories.tsx b/src/pages/Main/components/AnswerCard/AnswerCard.stories.tsx index 87d6e4b..99b3abe 100644 --- a/src/pages/Main/components/AnswerCard/AnswerCard.stories.tsx +++ b/src/pages/Main/components/AnswerCard/AnswerCard.stories.tsx @@ -1,5 +1,5 @@ +import AnswerCard from '@/pages/Main/components/AnswerCard/AnswerCard'; import type { Meta, StoryObj } from '@storybook/react'; -import { AnswerCard } from './AnswerCard'; const meta: Meta = { title: 'Pages/Main/Components/AnswerCard', diff --git a/src/pages/Main/components/AnswerCard/AnswerCard.styles.ts b/src/pages/Main/components/AnswerCard/AnswerCard.styles.ts new file mode 100644 index 0000000..ddb14e2 --- /dev/null +++ b/src/pages/Main/components/AnswerCard/AnswerCard.styles.ts @@ -0,0 +1,49 @@ +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; + +export const TextTitle = styled.h1` + width: 100%; + font-family: 'Noto Sans KR'; + font-size: 16px; + font-weight: normal; + color: ${theme.colors.gray[300]}; + text-align: center; +`; +export const TextAnswer = styled.h2` + width: 100%; + font-family: 'Noto Sans KR'; + font-size: 16px; + font-weight: normal; + color: ${theme.colors.gray[600]}; + text-align: center; + word-wrap: break-word; + overflow-wrap: break-word; + white-space: pre-wrap; + margin-top: 15px; +`; + +export const DateText = styled.p` + font-size: 0.875rem; + color: #666; + margin-bottom: 0.5rem; +`; + +export const Container = styled.div` + width: 100%; + min-height: 88px; + height: auto; + max-width: 377px; + background: white; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 15px; + box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2); + padding: 20px 40px; + transition: transform 0.3s ease; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.15); + } +`; diff --git a/src/pages/Main/components/AnswerCard/AnswerCard.tsx b/src/pages/Main/components/AnswerCard/AnswerCard.tsx index f894557..813f738 100644 --- a/src/pages/Main/components/AnswerCard/AnswerCard.tsx +++ b/src/pages/Main/components/AnswerCard/AnswerCard.tsx @@ -1,12 +1,16 @@ -import styled from '@emotion/styled'; -import theme from '@/styles/theme'; +import { + Container, + DateText, + TextAnswer, + TextTitle, +} from '@/pages/Main/components/AnswerCard/AnswerCard.styles'; type AnswerCardProps = { answer: string; date: string; }; -export const AnswerCard = ({ answer, date }: AnswerCardProps) => { +const AnswerCard = ({ answer, date }: AnswerCardProps) => { return ( {date} @@ -16,49 +20,4 @@ export const AnswerCard = ({ answer, date }: AnswerCardProps) => { ); }; -const TextTitle = styled.h1` - width: 100%; - font-family: 'Noto Sans KR'; - font-size: 16px; - font-weight: normal; - color: ${theme.colors.gray[300]}; - text-align: center; -`; -const TextAnswer = styled.h2` - width: 100%; - font-family: 'Noto Sans KR'; - font-size: 16px; - font-weight: normal; - color: ${theme.colors.gray[600]}; - text-align: center; - word-wrap: break-word; - overflow-wrap: break-word; - white-space: pre-wrap; - margin-top: 15px; -`; - -const DateText = styled.p` - font-size: 0.875rem; - color: #666; - margin-bottom: 0.5rem; -`; - -const Container = styled.div` - width: 100%; - min-height: 88px; - height: auto; - max-width: 377px; - background: white; - display: flex; - flex-direction: column; - align-items: center; - border-radius: 15px; - box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2); - padding: 20px 40px; - transition: transform 0.3s ease; - - &:hover { - transform: translateY(-5px); - box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.15); - } -`; +export default AnswerCard; diff --git a/src/pages/Main/components/PopularPostCard/PopularPostCard.styles.ts b/src/pages/Main/components/PopularPostCard/PopularPostCard.styles.ts new file mode 100644 index 0000000..7545fe7 --- /dev/null +++ b/src/pages/Main/components/PopularPostCard/PopularPostCard.styles.ts @@ -0,0 +1,52 @@ +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; + +type ContainerProps = { + src: string; +}; + +export const PostText = styled.h1` + font-family: ${theme.typography.fontFamily.korean}; + font-size: 12px; + color: ${theme.colors.white}; + text-align: center; + position: relative; + z-index: 1; +`; + +export const Container = styled.div` + width: 208px; + height: 152px; + border-radius: 15px; + position: relative; + background-image: url(${({ src }) => src}); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 15px; + background-color: rgba(0, 0, 0, 0.4); + } + + &:hover { + &::after { + background-color: rgba(255, 255, 255, 0.1); + } + + ${PostText} { + transition: color 0.3s ease; + font-weight: bold; + } + } +`; diff --git a/src/pages/Main/components/PopularPostCard/PopularPostCard.tsx b/src/pages/Main/components/PopularPostCard/PopularPostCard.tsx index 8e36b74..3bdae63 100644 --- a/src/pages/Main/components/PopularPostCard/PopularPostCard.tsx +++ b/src/pages/Main/components/PopularPostCard/PopularPostCard.tsx @@ -1,5 +1,7 @@ -import theme from '@/styles/theme'; -import styled from '@emotion/styled'; +import { + Container, + PostText, +} from '@/pages/Main/components/PopularPostCard/PopularPostCard.styles'; type PopularPostCardProps = { post: string; @@ -16,52 +18,3 @@ export const PopularPostCard = ({ post, src }: PopularPostCardProps) => { ); }; - -type ContainerProps = { - src: string; -}; - -const PostText = styled.h1` - font-family: ${theme.typography.fontFamily.korean}; - font-size: 12px; - color: ${theme.colors.white}; - text-align: center; - position: relative; - z-index: 1; -`; - -const Container = styled.div` - width: 208px; - height: 152px; - border-radius: 15px; - position: relative; // 추가 - background-image: url(${({ src }) => src}); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - - &::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 15px; - background-color: rgba(0, 0, 0, 0.4); - } - &:hover { - &::after { - background-color: rgba(255, 255, 255, 0.1); - } - - ${PostText} { - transition: color 0.3s ease; - font-weight: bold; - } - } -`; diff --git a/src/pages/Main/components/PopularPostSlider/PopularPostSlider.styles.ts b/src/pages/Main/components/PopularPostSlider/PopularPostSlider.styles.ts new file mode 100644 index 0000000..9d21dab --- /dev/null +++ b/src/pages/Main/components/PopularPostSlider/PopularPostSlider.styles.ts @@ -0,0 +1,18 @@ +import styled from '@emotion/styled'; +import { Swiper } from 'swiper/react'; + +export const Container = styled.div` + width: 100%; +`; + +export const StyledSwiper = styled(Swiper)` + width: 100%; + height: 100%; + .swiper-slide { + width: auto !important; + } + + .swiper-pagination { + display: none; + } +`; diff --git a/src/pages/Main/components/PopularPostSlider/PopularPostSlider.tsx b/src/pages/Main/components/PopularPostSlider/PopularPostSlider.tsx index 8b48721..64503b4 100644 --- a/src/pages/Main/components/PopularPostSlider/PopularPostSlider.tsx +++ b/src/pages/Main/components/PopularPostSlider/PopularPostSlider.tsx @@ -1,11 +1,14 @@ -import styled from '@emotion/styled'; -import { Swiper, SwiperSlide } from 'swiper/react'; +import { SwiperSlide } from 'swiper/react'; import { Autoplay, Pagination } from 'swiper/modules'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; import { PopularPostCard } from '@/pages/Main/components/PopularPostCard/PopularPostCard'; import { PopularPost } from '@/pages/Main/type/popularPosts'; +import { + Container, + StyledSwiper, +} from '@/pages/Main/components/PopularPostSlider/PopularPostSlider.styles'; interface PopularPostSliderProps { popularPosts: PopularPost[]; @@ -38,19 +41,3 @@ export const PopularPostSlider = ({ popularPosts }: PopularPostSliderProps) => { }; export default PopularPostSlider; - -const Container = styled.div` - width: 100%; -`; - -const StyledSwiper = styled(Swiper)` - width: 100%; - height: 100%; - .swiper-slide { - width: auto !important; - } - - .swiper-pagination { - display: none; - } -`; diff --git a/src/pages/Main/components/ProfileCard/ProfileCard.styles.ts b/src/pages/Main/components/ProfileCard/ProfileCard.styles.ts new file mode 100644 index 0000000..20a71aa --- /dev/null +++ b/src/pages/Main/components/ProfileCard/ProfileCard.styles.ts @@ -0,0 +1,72 @@ +import styled from '@emotion/styled'; +import { Button, CloseButton } from '@chakra-ui/react'; +import theme from '@/styles/theme'; + +export const Container = styled.div` + width: 180px; + height: 235px; + background-color: ${theme.colors.sub}; + border-radius: 15px; + display: flex; + flex-direction: column; + transition: transform 0.3s ease; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.15); + } +`; + +export const ProfileWrapper = styled.div` + padding: 0 25px; + display: flex; + flex-direction: column; + align-items: center; +`; + +export const StyledCloseButton = styled(CloseButton)` + align-self: flex-end; + color: ${theme.colors.primary}; + + &:hover { + background-color: transparent; + color: ${theme.colors.gray[300]}; + } +`; + +export const Name = styled.h1` + width: 100%; + margin-top: 10px; + text-align: center; + font-family: ${theme.typography.fontFamily.korean}; // Noto Sans KR + font-size: 1.125rem; //18px + color: ${theme.colors.black}; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +`; + +export const Description = styled.h2` + text-align: center; + font-family: ${theme.typography.fontFamily.korean}; // Noto Sans KR + font-size: 0.75rem; //12px + color: ${theme.colors.gray[400]}; + font-weight: 400; +`; + +export const StyledButton = styled(Button)` + width: 100%; + max-width: 96px; + height: 36px; + background: ${theme.colors.primary}; + color: ${theme.colors.white}; + font-family: ${theme.typography.fontFamily.english.header}; // open Sans + font-weight: 600; + border-radius: 30px; + margin: 10px 0; + + &:hover { + background: ${theme.colors.gray[300]}; + } +`; diff --git a/src/pages/Main/components/ProfileCard/ProfileCard.tsx b/src/pages/Main/components/ProfileCard/ProfileCard.tsx index ea96e4a..36bbbf7 100644 --- a/src/pages/Main/components/ProfileCard/ProfileCard.tsx +++ b/src/pages/Main/components/ProfileCard/ProfileCard.tsx @@ -1,7 +1,13 @@ -import styled from '@emotion/styled'; import theme from '@/styles/theme'; import ProfileImage from '@/components/ui/ProfileImageCon/ProfileImageCon'; -import { Button, CloseButton } from '@chakra-ui/react'; +import { + Container, + Description, + Name, + ProfileWrapper, + StyledButton, + StyledCloseButton, +} from '@/pages/Main/components/ProfileCard/ProfileCard.styles'; type ProfileCardProps = { name: string; @@ -34,72 +40,3 @@ export const ProfileCard = ({ ); }; - -const Container = styled.div` - width: 180px; - height: 235px; - background-color: ${theme.colors.sub}; - border-radius: 15px; - display: flex; - flex-direction: column; - transition: transform 0.3s ease; - - &:hover { - transform: translateY(-5px); - box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.15); - } -`; - -const ProfileWrapper = styled.div` - padding: 0 25px; - display: flex; - flex-direction: column; - align-items: center; -`; - -const StyledCloseButton = styled(CloseButton)` - align-self: flex-end; - color: ${theme.colors.primary}; - - &:hover { - background-color: transparent; - color: ${theme.colors.gray[300]}; - } -`; - -const Name = styled.h1` - width: 100%; - margin-top: 10px; - text-align: center; - font-family: ${theme.typography.fontFamily.korean}; // Noto Sans KR - font-size: 1.125rem; //18px - color: ${theme.colors.black}; - font-weight: 500; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -`; - -const Description = styled.h2` - text-align: center; - font-family: ${theme.typography.fontFamily.korean}; // Noto Sans KR - font-size: 0.75rem; //12px - color: ${theme.colors.gray[400]}; - font-weight: 400; -`; - -const StyledButton = styled(Button)` - width: 100%; - max-width: 96px; - height: 36px; - background: ${theme.colors.primary}; - color: ${theme.colors.white}; - font-family: ${theme.typography.fontFamily.english.header}; // open Sans - font-weight: 600; - border-radius: 30px; - margin: 10px 0; - - &:hover { - background: ${theme.colors.gray[300]}; - } -`; diff --git a/src/pages/Main/components/QuestionCard/QuestionCard.styles.ts b/src/pages/Main/components/QuestionCard/QuestionCard.styles.ts new file mode 100644 index 0000000..d2f4d5a --- /dev/null +++ b/src/pages/Main/components/QuestionCard/QuestionCard.styles.ts @@ -0,0 +1,44 @@ +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; + +export const TextDate = styled.h1` + width: 100%; + font-family: 'Open Sans'; + font-size: ${theme.typography.body1.size}; + font-weight: semibold; + color: ${theme.colors.primary}; + text-align: center; +`; + +export const TextQuestion = styled.h2` + width: 100%; + font-family: 'GyeonggiBatang'; + font-size: ${theme.typography.title1.size}; + font-weight: bold; + color: ${theme.colors.primary}; + text-align: center; + word-wrap: break-word; + overflow-wrap: break-word; + white-space: pre-wrap; + margin-top: 15px; +`; + +export const Container = styled.div` + width: 100%; + min-height: 88px; + height: auto; + max-width: 377px; + background: white; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 15px; + box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2); + padding: 20px 40px; + transition: transform 0.3s ease; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.15); + } +`; diff --git a/src/pages/Main/components/QuestionCard/QuestionCard.tsx b/src/pages/Main/components/QuestionCard/QuestionCard.tsx index 8d5d7e9..27d5b47 100644 --- a/src/pages/Main/components/QuestionCard/QuestionCard.tsx +++ b/src/pages/Main/components/QuestionCard/QuestionCard.tsx @@ -1,5 +1,8 @@ -import styled from '@emotion/styled'; -import theme from '@/styles/theme'; +import { + Container, + TextDate, + TextQuestion, +} from '@/pages/Main/components/QuestionCard/QuestionCard.styles'; type QuestionCardProps = { date: string; @@ -14,45 +17,3 @@ export const QuestionCard = ({ date, question }: QuestionCardProps) => { ); }; - -const TextDate = styled.h1` - width: 100%; - font-family: 'Open Sans'; - font-size: ${theme.typography.body1.size}; - font-weight: semibold; - color: ${theme.colors.primary}; - text-align: center; -`; - -const TextQuestion = styled.h2` - width: 100%; - font-family: 'GyeonggiBatang'; - font-size: ${theme.typography.title1.size}; - font-weight: bold; - color: ${theme.colors.primary}; - text-align: center; - word-wrap: break-word; - overflow-wrap: break-word; - white-space: pre-wrap; - margin-top: 15px; -`; - -const Container = styled.div` - width: 100%; - min-height: 88px; - height: auto; - max-width: 377px; - background: white; - display: flex; - flex-direction: column; - align-items: center; - border-radius: 15px; - box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2); - padding: 20px 40px; - transition: transform 0.3s ease; - - &:hover { - transform: translateY(-5px); - box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.15); - } -`; diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx index ab9af52..5af86bb 100644 --- a/src/pages/Main/index.tsx +++ b/src/pages/Main/index.tsx @@ -1,10 +1,7 @@ import { useRef, useState } from 'react'; -import styled from '@emotion/styled'; -import theme from '@/styles/theme'; import CategoryButton from '@/components/ui/CategoryButtons/CategoryButton'; import Header from '@/components/common/Header'; import { QuestionCard } from '@/pages/Main/components/QuestionCard/QuestionCard'; -import { AnswerCard } from '@/pages/Main/components/AnswerCard/AnswerCard'; import { PopularPostSlider } from '@/pages/Main/components/PopularPostSlider/PopularPostSlider'; import { ProfileSlider } from '@/pages/Main/components/ProfileSlider/ProfileSlider'; import { CommentList } from '@/components/ui/CommentList/CommentList'; @@ -12,8 +9,19 @@ import { dummyComments } from '@/mocks/dummyComments'; import { categories } from '@/pages/Main/type/category'; import { dummyData } from '@/mocks/dummyPosts'; import { userProfileData } from '@/mocks/dummyUserProfiles'; - -export const Main = () => { +import { + Body, + CategoryList, + CategorySection, + CommentListWrapper, + Container, + PostWrapper, + ProfileSlideWrapper, + Title, +} from '@/pages/Main/styles'; +import AnswerCard from '@/pages/Main/components/AnswerCard/AnswerCard'; + +const Main = () => { const [activeCategory, setActiveCategory] = useState(categories[0]); const [isDragging, setIsDragging] = useState(false); const [startX, setStartX] = useState(0); @@ -115,75 +123,3 @@ export const Main = () => { }; export default Main; - -const Container = styled.div` - background: ${theme.colors.background}; - padding-bottom: 5.25rem; //footer-height - min-height: 100vh; - position: relative; -`; - -const CategorySection = styled.div` - padding: 1rem 0; - overflow-x: auto; - white-space: nowrap; - cursor: grab; - user-select: none; - - &:active { - cursor: grabbing; - } - - &::-webkit-scrollbar { - display: none; - } - -ms-overflow-style: none; - scrollbar-width: none; -`; - -const CategoryList = styled.div` - display: flex; - gap: 0.5rem; - padding: 0 1rem; -`; - -const Body = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 1.25rem; - margin-top: 1.25rem; - width: 100%; - overflow-x: hidden; -`; - -const PostWrapper = styled.div` - width: 100%; - margin-left: 40px; - display: flex; - flex-direction: column; - gap: 20px; -`; - -const ProfileSlideWrapper = styled.div` - width: 100%; - padding: 0 25px; -`; - -const Title = styled.h1` - width: 100%; - font-family: ${theme.typography.header1.fontFamily}; - color: ${theme.colors.primary}; - font-size: 20px; - font-weight: bold; - text-align: left; -`; - -const CommentListWrapper = styled.div` - width: 100%; - padding: 0 25px; - display: flex; - flex-direction: column; - gap: 20px; -`; diff --git a/src/pages/Main/styles.ts b/src/pages/Main/styles.ts new file mode 100644 index 0000000..f5575ad --- /dev/null +++ b/src/pages/Main/styles.ts @@ -0,0 +1,74 @@ +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; + +export const Container = styled.div` + background: ${theme.colors.background}; + padding-bottom: 5.25rem; //footer-height + min-height: 100vh; + position: relative; +`; + +export const CategorySection = styled.div` + padding: 1rem 0; + overflow-x: auto; + white-space: nowrap; + cursor: grab; + user-select: none; + + &:active { + cursor: grabbing; + } + + &::-webkit-scrollbar { + display: none; + } + -ms-overflow-style: none; + scrollbar-width: none; +`; + +export const CategoryList = styled.div` + display: flex; + gap: 0.5rem; + padding: 0 1rem; +`; + +export const Body = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1.25rem; + margin-top: 1.25rem; + width: 100%; + overflow-x: hidden; +`; + +export const PostWrapper = styled.div` + width: 100%; + margin-left: 40px; + display: flex; + flex-direction: column; + gap: 20px; +`; + +export const ProfileSlideWrapper = styled.div` + width: 100%; + padding: 0 25px; +`; + +export const Title = styled.h1` + width: 100%; + font-family: ${theme.typography.header1.fontFamily}; + color: ${theme.colors.primary}; + font-size: 20px; + font-weight: bold; + text-align: left; +`; + +export const CommentListWrapper = styled.div` + width: 100%; + padding: 0 25px; + display: flex; + flex-direction: column; + gap: 20px; +`; diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx index 35eae6f..109c926 100644 --- a/src/pages/MyPage/index.tsx +++ b/src/pages/MyPage/index.tsx @@ -1,11 +1,18 @@ import { useState } from 'react'; -import styled from '@emotion/styled'; import Header from '@/pages/MyPage/components/Header'; import QuestionCard from '@/pages/MyPage/components/QuestionCard'; -import theme from '@/styles/theme'; import Button from '@/pages/MyPage/components/Button'; import MyProfile from '@/pages/MyPage/components/MyProfile'; import QSpaceCard from '@/components/ui/QSpaceCard/QSpaceCard'; +import { + ButtonGroup, + Container, + Content, + QSpaceList, + QuestionList, + Tab, + TabContainer, +} from '@/pages/MyPage/styles'; // 더미 데이터 const dummyProfile = { @@ -103,58 +110,4 @@ const MyPage = () => { ); }; -const Container = styled.div` - padding: 1.5rem 1rem; - background-color: ${theme.colors.background}; - min-height: calc(100vh - 8rem); - margin-bottom: 5.25rem; -`; - -const ButtonGroup = styled.div` - display: flex; - gap: 0.5rem; - margin-top: 1.25rem; - margin-bottom: 1.25rem; -`; - -const TabContainer = styled.div` - display: flex; - justify-content: space-between; - margin-bottom: 1rem; - border-bottom: 1px solid #ddd; -`; - -const Tab = styled.button<{ isActive: boolean }>` - flex: 1; - padding: 0.75rem; - font-size: 1.125rem; - font-weight: bold; - background: none; - border: none; - border-bottom: ${({ isActive }) => (isActive ? `2px solid ${theme.colors.primary}` : 'none')}; - color: ${({ isActive }) => (isActive ? theme.colors.primary : theme.colors.gray[300])}; - font-family: ${theme.typography.fontFamily.korean}; - cursor: pointer; - - &:hover { - color: #b07d87; - } -`; - -const Content = styled.div` - padding: 1rem 0; -`; - -const QuestionList = styled.div` - display: flex; - flex-direction: column; - gap: 1rem; -`; - -const QSpaceList = styled.div` - display: flex; - flex-direction: column; - gap: 1rem; -`; - export default MyPage; diff --git a/src/pages/MyPage/styles.ts b/src/pages/MyPage/styles.ts new file mode 100644 index 0000000..f2042cf --- /dev/null +++ b/src/pages/MyPage/styles.ts @@ -0,0 +1,56 @@ +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; + +export const Container = styled.div` + padding: 1.5rem 1rem; + background-color: ${theme.colors.background}; + min-height: calc(100vh - 8rem); + margin-bottom: 5.25rem; +`; + +export const ButtonGroup = styled.div` + display: flex; + gap: 0.5rem; + margin-top: 1.25rem; + margin-bottom: 1.25rem; +`; + +export const TabContainer = styled.div` + display: flex; + justify-content: space-between; + margin-bottom: 1rem; + border-bottom: 1px solid #ddd; +`; + +export const Tab = styled.button<{ isActive: boolean }>` + flex: 1; + padding: 0.75rem; + font-size: 1.125rem; + font-weight: bold; + background: none; + border: none; + border-bottom: ${({ isActive }) => (isActive ? `2px solid ${theme.colors.primary}` : 'none')}; + color: ${({ isActive }) => (isActive ? theme.colors.primary : theme.colors.gray[300])}; + font-family: ${theme.typography.fontFamily.korean}; + cursor: pointer; + + &:hover { + color: #b07d87; + } +`; + +export const Content = styled.div` + padding: 1rem 0; +`; + +export const QuestionList = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; +`; + +export const QSpaceList = styled.div` + display: flex; + flex-direction: column; + gap: 1rem; +`; diff --git a/src/pages/Profile/components/Button.styles.ts b/src/pages/Profile/components/Button.styles.ts new file mode 100644 index 0000000..666264e --- /dev/null +++ b/src/pages/Profile/components/Button.styles.ts @@ -0,0 +1,21 @@ +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; + +export 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; + } +`; diff --git a/src/pages/Profile/components/Button.tsx b/src/pages/Profile/components/Button.tsx index 62d2cba..a7ea071 100644 --- a/src/pages/Profile/components/Button.tsx +++ b/src/pages/Profile/components/Button.tsx @@ -1,5 +1,5 @@ -import styled from '@emotion/styled'; import theme from '@/styles/theme'; +import { StyledButton } from '@/pages/Profile/components/Button.styles'; interface ButtonProps { children: React.ReactNode; @@ -8,40 +8,17 @@ interface ButtonProps { textColor?: string; } -const Button: React.FC = ({ +const Button = ({ children, onClick, backgroundColor = theme.colors.white, textColor = theme.colors.gray[400], -}) => { +}: ButtonProps) => { 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 index 436a57f..664743b 100644 --- a/src/pages/Profile/index.tsx +++ b/src/pages/Profile/index.tsx @@ -1,12 +1,29 @@ -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"; +import { IoChatbubbleEllipsesOutline } from 'react-icons/io5'; +import { FaShare } from 'react-icons/fa6'; +import { + AnswerCounter, + AnswerSection, + BioLabel, + BioSection, + BioText, + ButtonGroup, + Container, + FollowInfo, + Id, + InfoItem, + Name, + NameSection, + ProfileImageWrapper, + ProfileSection, + Title, + TitleSection, +} from '@/pages/Profile/styles'; // 더미 데이터 const dummyProfile = { @@ -55,20 +72,12 @@ const ProfilePage = () => { ({id}) - + - - {following} following - - - {followers} followers - + {following} following + {followers} followers + + + + @@ -109,110 +120,3 @@ const ProfilePage = () => { }; 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/Profile/styles.ts b/src/pages/Profile/styles.ts new file mode 100644 index 0000000..a1a6fd8 --- /dev/null +++ b/src/pages/Profile/styles.ts @@ -0,0 +1,107 @@ +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; + +export const Container = styled.div` + padding: 2.5rem 1rem; + background-color: ${theme.colors.background}; + min-height: calc(100vh - 3rem); + margin-bottom: 5.25rem; + overflow: hidden; +`; + +export const ProfileSection = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + margin-bottom: 2.625rem; +`; + +export const ProfileImageWrapper = styled.div` + flex-shrink: 0; +`; + +export const NameSection = styled.div` + text-align: center; +`; + +export const Name = styled.h1` + font-size: 2.25rem; + font-weight: bold; + color: ${theme.colors.primary}; + font-family: ${theme.typography.fontFamily.korean}; +`; + +export const Id = styled.span` + font-size: 1rem; + color: ${theme.colors.primary}; + font-family: ${theme.typography.fontFamily.english}; +`; + +export const FollowInfo = styled.div` + width: 100%; + display: flex; + justify-content: space-around; +`; + +export const InfoItem = styled.div` + font-family: ${theme.typography.fontFamily.english}; + font-size: 1rem; + gap: 0.5rem; + color: ${theme.colors.gray[300]}; +`; + +export const ButtonGroup = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + gap: 0.5rem; +`; + +export const BioSection = styled.div` + margin-bottom: 2.625rem; +`; + +export const BioLabel = styled.h2` + font-size: 1.25rem; + font-weight: bold; + color: ${theme.colors.gray[600]}; + font-family: ${theme.typography.header1.fontFamily}; +`; + +export const BioText = styled.p` + font-size: 1rem; + padding: 1rem; + color: ${theme.colors.gray[600]}; + font-family: ${theme.typography.fontFamily.korean}; +`; + +export const AnswerSection = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 1rem; +`; + +export const TitleSection = styled.div` + width: 100%; + display: flex; + justify-content: start; + align-items: center; +`; + +export const Title = styled.h1` + font-family: ${theme.typography.header1.fontFamily}; + color: ${theme.colors.primary}; + font-size: 20px; + font-weight: bold; + text-align: left; +`; + +export 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/Question/index.tsx b/src/pages/Question/index.tsx index 245f893..012b776 100644 --- a/src/pages/Question/index.tsx +++ b/src/pages/Question/index.tsx @@ -1,9 +1,21 @@ import { useState } from 'react'; -import styled from '@emotion/styled'; -import { IoLockClosed, IoLockOpen } from "react-icons/io5"; +import { IoLockClosed, IoLockOpen } from 'react-icons/io5'; import { ImageUpload } from '@/components/ui/ImageUpload/ImageUpload'; -import theme from '@/styles/theme'; import Header from '@/components/common/Header'; +import { + AnswerContainer, + CharacterCount, + Container, + ImageUploadContainer, + Input, + InputLabel, + LabelText, + LockButton, + Question, + SubmitButton, + Title, + TitleContainer, +} from '@/pages/Question/styles'; const QuestionPage = () => { const [answer, setAnswer] = useState(''); @@ -19,7 +31,9 @@ const QuestionPage = () => { }; const handleSubmit = () => { - alert(`답변: ${answer}\n공개 여부: ${isPrivate ? '비공개' : '공개'}\n이미지: ${uploadedImage ? uploadedImage.name : '없음'}`); + alert( + `답변: ${answer}\n공개 여부: ${isPrivate ? '비공개' : '공개'}\n이미지: ${uploadedImage ? uploadedImage.name : '없음'}` + ); }; return ( @@ -41,11 +55,7 @@ const QuestionPage = () => { {isPrivate ? : } - setAnswer(e.target.value)} - maxLength={100} - /> + setAnswer(e.target.value)} maxLength={100} /> {`${answer.length}/100`} 등록하기 @@ -54,141 +64,4 @@ const QuestionPage = () => { ); }; -const Container = styled.div` - display: flex; - flex-direction: column; - align-items: center; - padding: 1.5rem; - background-color: ${theme.colors.background}; - width: 100%; - min-height: calc(100vh - 8.25rem); - margin-bottom: 5.25rem; -`; - -const TitleContainer = styled.div` - text-align: center; - margin-bottom: 2.5rem; -`; - -const Title = styled.h1` - font-size: 1.125rem; - font-weight: bold; - margin-bottom: 0.125rem; - font-family: ${theme.typography.fontFamily.korean}; - color: ${theme.colors.gray[600]}; -`; - -const Date = styled.p` - font-size: 1rem; - font-family: ${theme.typography.fontFamily.english}; - color: ${theme.colors.gray[600]}; -`; - -const Question = styled.p` - font-family: ${theme.typography.header1.fontFamily.korean}; - font-weight: bold; - font-size: 1.25rem; - color: ${theme.colors.primary}; - text-align: center; - margin-bottom: 1.875rem; -`; - -const ImageUploadContainer = styled.div` - width: 100%; - margin-bottom: 1rem; -`; - -const AnswerContainer = styled.div` - width: 100%; -`; - -const InputLabel = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.5rem; -`; - -const LabelText = styled.span` - font-size: 1rem; - color: ${theme.colors.gray[300]}; -`; - -const LockButton = styled.button<{ isPrivate: boolean }>` - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - background: transparent; - border: 1px solid ${({ isPrivate }) => (isPrivate ? '#FF480E' : '#00796B')}; - color: ${theme.colors.black}; - border-radius: 0.875rem; - padding: 0.25rem 0.75rem; - font-size: 0.875rem; - cursor: pointer; - transition: all 0.2s ease-in-out; - - &:hover { - scale: 1.05; - } -`; - -const Input = styled.textarea` - width: 100%; - height: 7rem; - border: 1px solid ${theme.colors.gray[300]}; - padding: 0.875rem; - resize: none; - border-radius: 0.5rem; - font-size: 0.875rem; - outline: none; - font-family: ${theme.typography.fontFamily.korean}; - color: ${theme.colors.primary}; - - &:focus { - border-color: ${theme.colors.primary}; - } - - &::-webkit-scrollbar { - width: 0.5rem; - } - - &::-webkit-scrollbar-thumb { - background-color: ${theme.colors.primary}; - border-radius: 0.25rem; - } - - &::-webkit-scrollbar-thumb:hover { - background-color: ${theme.colors.gray[500]}; - } - - &::-webkit-scrollbar-track { - background-color: ${theme.colors.gray[100]}; - border-radius: 0.25rem; - } -`; - -const CharacterCount = styled.p` - font-size: 0.75rem; - color: ${theme.colors.gray[300]}; - margin-bottom: 1rem; - align-self: flex-end; -`; - -const SubmitButton = styled.button` - width: 100%; - padding: 0.75rem; - background-color: ${theme.colors.primary}; - color: ${theme.colors.white}; - border: none; - border-radius: 1rem; - font-size: 1rem; - cursor: pointer; - transition: all 0.2s ease-in-out; - - &:hover { - scale: 1.02; - } -`; - export default QuestionPage; diff --git a/src/pages/Question/styles.ts b/src/pages/Question/styles.ts new file mode 100644 index 0000000..8ab1b95 --- /dev/null +++ b/src/pages/Question/styles.ts @@ -0,0 +1,139 @@ +import styled from '@emotion/styled'; +import theme from '@/styles/theme'; + +export const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + padding: 1.5rem; + background-color: ${theme.colors.background}; + width: 100%; + min-height: calc(100vh - 8.25rem); + margin-bottom: 5.25rem; +`; + +export const TitleContainer = styled.div` + text-align: center; + margin-bottom: 2.5rem; +`; + +export const Title = styled.h1` + font-size: 1.125rem; + font-weight: bold; + margin-bottom: 0.125rem; + font-family: ${theme.typography.fontFamily.korean}; + color: ${theme.colors.gray[600]}; +`; + +export const Date = styled.p` + font-size: 1rem; + font-family: ${theme.typography.fontFamily.english}; + color: ${theme.colors.gray[600]}; +`; + +export const Question = styled.p` + font-family: ${theme.typography.header1.fontFamily.korean}; + font-weight: bold; + font-size: 1.25rem; + color: ${theme.colors.primary}; + text-align: center; + margin-bottom: 1.875rem; +`; + +export const ImageUploadContainer = styled.div` + width: 100%; + margin-bottom: 1rem; +`; + +export const AnswerContainer = styled.div` + width: 100%; +`; + +export const InputLabel = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; +`; + +export const LabelText = styled.span` + font-size: 1rem; + color: ${theme.colors.gray[300]}; +`; + +export const LockButton = styled.button<{ isPrivate: boolean }>` + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + background: transparent; + border: 1px solid ${({ isPrivate }) => (isPrivate ? '#FF480E' : '#00796B')}; + color: ${theme.colors.black}; + border-radius: 0.875rem; + padding: 0.25rem 0.75rem; + font-size: 0.875rem; + cursor: pointer; + transition: all 0.2s ease-in-out; + + &:hover { + scale: 1.05; + } +`; + +export const Input = styled.textarea` + width: 100%; + height: 7rem; + border: 1px solid ${theme.colors.gray[300]}; + padding: 0.875rem; + resize: none; + border-radius: 0.5rem; + font-size: 0.875rem; + outline: none; + font-family: ${theme.typography.fontFamily.korean}; + color: ${theme.colors.primary}; + + &:focus { + border-color: ${theme.colors.primary}; + } + + &::-webkit-scrollbar { + width: 0.5rem; + } + + &::-webkit-scrollbar-thumb { + background-color: ${theme.colors.primary}; + border-radius: 0.25rem; + } + + &::-webkit-scrollbar-thumb:hover { + background-color: ${theme.colors.gray[500]}; + } + + &::-webkit-scrollbar-track { + background-color: ${theme.colors.gray[100]}; + border-radius: 0.25rem; + } +`; + +export const CharacterCount = styled.p` + font-size: 0.75rem; + color: ${theme.colors.gray[300]}; + margin-bottom: 1rem; + align-self: flex-end; +`; + +export const SubmitButton = styled.button` + width: 100%; + padding: 0.75rem; + background-color: ${theme.colors.primary}; + color: ${theme.colors.white}; + border: none; + border-radius: 1rem; + font-size: 1rem; + cursor: pointer; + transition: all 0.2s ease-in-out; + + &:hover { + scale: 1.02; + } +`; diff --git a/src/pages/Select/index.tsx b/src/pages/Select/index.tsx deleted file mode 100644 index 7e22791..0000000 --- a/src/pages/Select/index.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import styled from '@emotion/styled'; -import { useNavigate } from 'react-router-dom'; -import { Logo } from '@/components/ui/Logo/Logo'; -import CategorySelectContainer from '@/components/ui/CategorySelectContainer/CategorySelectContainer'; -import theme from '@/styles/theme'; - -const SelectPage = () => { - const navigate = useNavigate(); - const handleCategorySelect = (categoryId: string) => { - //질문에 답했는데 확인 로직 추가 - navigate(`/question/${categoryId}`); - }; - - return ( - - - - - 당신의 취향을 골라주세요! - - - - - ); -}; - -const Container = styled.div` - width: 100%; - padding: 2rem 1rem; - background-color: ${theme.colors.background}; - min-height: calc(100vh - 5.25rem); - margin-bottom: 5.25rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -`; - -const LogoWrapper = styled.div` - width: 100%; - display: flex; - justify-content: center; - align-items: center; - margin-bottom: 2.312rem; -`; - -const Title = styled.h1` - width: 100%; - font-size: 1.125rem; - font-weight: bold; - color: ${theme.colors.primary}; - text-align: center; - margin-bottom: 4.875rem; -`; - -const CategoryContainer = styled.div` - width: 100%; -`; - -export default SelectPage; diff --git a/src/pages/follower/index.tsx b/src/pages/follower/index.tsx index 89f0edb..e8e2c9d 100644 --- a/src/pages/follower/index.tsx +++ b/src/pages/follower/index.tsx @@ -1,11 +1,23 @@ /** @jsxImportSource @emotion/react */ -import { css } from '@emotion/react'; -import React, { useState } from 'react'; +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { IoChevronBack } from 'react-icons/io5'; import ProfileImageCon from '@/components/ui/ProfileImageCon/ProfileImageCon'; - -const FollowerFollowingPage: React.FC = () => { +import { + activeTabStyle, + backIconStyle, + buttonGroupStyle, + ButtonStyle, + containerStyle, + headerStyle, + listContainerStyle, + listItemStyle, + nameStyle, + tabContainerStyle, + tabStyle, +} from '@/pages/Follower/styles'; + +const FollowerFollowingPage = () => { const [activeTab, setActiveTab] = useState('follower'); // "follower" or "following" const navigate = useNavigate(); const [followers, setFollowers] = useState([ @@ -107,82 +119,3 @@ const FollowerFollowingPage: React.FC = () => { }; export default FollowerFollowingPage; - -// 스타일 정의 -const containerStyle = css` - display: flex; - flex-direction: column; - height: 100vh; - background-color: #f9f4ef; -`; - -const headerStyle = css` - position: relative; - display: flex; - align-items: center; - padding: 16px 8px; - background-color: #ffffff; - border-bottom: 1px solid #ccc; -`; - -const backIconStyle = css` - font-size: 24px; - cursor: pointer; - position: absolute; -`; - -const tabContainerStyle = css` - display: flex; - border-bottom: 1px solid #e0e0e0; -`; - -const tabStyle = css` - flex: 1; - padding: 10px; - text-align: center; - font-size: 16px; - cursor: pointer; - background-color: #f9f4ef; - border: none; - border-bottom: 2px solid transparent; -`; - -const activeTabStyle = css` - font-weight: bold; - border-bottom: 2px solid #b9a298; -`; - -const listContainerStyle = css` - flex: 1; - padding: 10px; - overflow-y: auto; -`; - -const listItemStyle = css` - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 0; - border-bottom: 1px solid #e0e0e0; -`; - -const nameStyle = css` - margin-left: 10px; - font-size: 16px; - flex: 1; -`; - -const buttonGroupStyle = css` - display: flex; - gap: 8px; -`; - -const ButtonStyle = css` - background-color: #ffffff; - color: #9d6f70; - border: none; - border-radius: 16px; - padding: 6px 12px; - font-size: 14px; - cursor: pointer; -`; diff --git a/src/pages/follower/styles.ts b/src/pages/follower/styles.ts new file mode 100644 index 0000000..a1cdb3b --- /dev/null +++ b/src/pages/follower/styles.ts @@ -0,0 +1,80 @@ +import { css } from '@emotion/react'; + +// 스타일 정의 +export const containerStyle = css` + display: flex; + flex-direction: column; + height: 100vh; + background-color: #f9f4ef; +`; + +export const headerStyle = css` + position: relative; + display: flex; + align-items: center; + padding: 16px 8px; + background-color: #ffffff; + border-bottom: 1px solid #ccc; +`; + +export const backIconStyle = css` + font-size: 24px; + cursor: pointer; + position: absolute; +`; + +export const tabContainerStyle = css` + display: flex; + border-bottom: 1px solid #e0e0e0; +`; + +export const tabStyle = css` + flex: 1; + padding: 10px; + text-align: center; + font-size: 16px; + cursor: pointer; + background-color: #f9f4ef; + border: none; + border-bottom: 2px solid transparent; +`; + +export const activeTabStyle = css` + font-weight: bold; + border-bottom: 2px solid #b9a298; +`; + +export const listContainerStyle = css` + flex: 1; + padding: 10px; + overflow-y: auto; +`; + +export const listItemStyle = css` + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 0; + border-bottom: 1px solid #e0e0e0; +`; + +export const nameStyle = css` + margin-left: 10px; + font-size: 16px; + flex: 1; +`; + +export const buttonGroupStyle = css` + display: flex; + gap: 8px; +`; + +export const ButtonStyle = css` + background-color: #ffffff; + color: #9d6f70; + border: none; + border-radius: 16px; + padding: 6px 12px; + font-size: 14px; + cursor: pointer; +`; diff --git a/src/router/index.tsx b/src/router/index.tsx index a64b0ad..a57c6ad 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -8,12 +8,12 @@ import CategorySelectPage from '@/pages/QSpacePost/CategorySelectPage'; import NotificationPage from '@/pages/Alarm'; import PostGroupPage from '@/pages/QSpacePost/PostGroupPage'; import { createBrowserRouter } from 'react-router-dom'; -import { LandingPage } from '@/pages/Landing'; 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'; +import LandingPage from '@/pages/Landing'; +import HobbySelectPage from '@/pages/HobbySelect'; const router = createBrowserRouter([ { @@ -70,7 +70,7 @@ const router = createBrowserRouter([ }, { path: '/select', - element: , + element: , }, { path: '/profile/:id', @@ -80,4 +80,4 @@ const router = createBrowserRouter([ }, ]); -export default router; \ No newline at end of file +export default router;