refactor: page style파일 분리 (mypage qspace제외)

prgrms-web-devcourse-final-project · Dec 1, 2024 · 0731688 · 0731688
1 parent 96d0005
commit 0731688
Show file tree

Hide file tree

Showing 52 changed files with 1,529 additions and 1,382 deletions.
diff --git a/src/pages/Alarm/index.tsx b/src/pages/Alarm/index.tsx
@@ -1,17 +1,32 @@
 /** @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;
   message: string;
   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
@@ -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
@@ -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<ChatItemProps> = ({
-  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<ChatItemProps> = ({
 };
 
 // 채팅 리스트 메인 컴포넌트
-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
@@ -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;
+`;