THIP-402: PAGES 스타일 코드 분리

src/pages/aiwrite/AIWrite.styled.ts

@@ -0,0 +1,100 @@
+import styled from '@emotion/styled';
+import { colors, typography } from '@/styles/global/global';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 320px;
+  max-width: 767px;
+  min-height: 100vh;
+  margin: 0 auto;
+  background-color: ${colors.black.main};
+  padding-top: 56px;
+`;
+
+export const LoadingContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 20px;
+`;
+
+export const MessageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const Message = styled.div`
+  color: ${colors.white};
+  font-size: ${typography.fontSize.lg};
+  font-weight: ${typography.fontWeight.semibold};
+  line-height: 24px;
+  text-align: center;
+`;
+
+export const SubMessage = styled.div`
+  color: ${colors.grey[100]};
+  font-size: ${typography.fontSize.sm};
+  font-weight: ${typography.fontWeight.regular};
+  line-height: 20px;
+  text-align: center;
+`;
+
+export const ResultContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100vh - 56px);
+  overflow-y: auto;
+`;
+
+export const InfoBanner = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 13px 26px;
+
+  img {
+    width: 20px;
+    height: 20px;
+  }
+
+  span {
+    color: ${colors.grey[200]};
+    font-size: ${typography.fontSize.xs};
+    font-weight: ${typography.fontWeight.regular};
+    line-height: auto;
+  }
+`;
+
+export const ContentText = styled.div`
+  flex: 1;
+  padding: 0 26px 74px;
+  color: ${colors.white};
+  font-size: ${typography.fontSize.sm};
+  font-weight: ${typography.fontWeight.regular};
+  line-height: 20px;
+  white-space: pre-wrap;
+`;
+
+export const CopyButton = styled.button`
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 767px;
+  height: 50px;
+  background-color: ${colors.purple.main};
+  color: ${colors.white};
+  font-size: ${typography.fontSize.lg};
+  font-weight: ${typography.fontWeight.semibold};
+  border: none;
+  cursor: pointer;
+  text-align: center;
+  line-height: 50px;
+`;

src/pages/aiwrite/AIWrite.tsx

@@ -1,13 +1,22 @@
 import { useState, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import styled from '@emotion/styled';
-import { colors, typography } from '@/styles/global/global';
 import LoadingSpinner from '@/components/common/LoadingSpinner';
 import TitleHeader from '@/components/common/TitleHeader';
 import { usePopupActions } from '@/hooks/usePopupActions';
 import leftArrow from '@/assets/common/leftArrow.svg';
 import infoIcon from '@/assets/common/infoIcon_white.svg';
 import { createAiReview } from '@/api/record';
+import {
+  Container,
+  LoadingContent,
+  MessageContainer,
+  Message,
+  SubMessage,
+  ResultContent,
+  InfoBanner,
+  ContentText,
+  CopyButton,
+} from './AIWrite.styled';
 
 const AIWrite = () => {
   const navigate = useNavigate();
@@ -129,102 +138,4 @@ const AIWrite = () => {
   );
 };
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-width: 320px;
-  max-width: 767px;
-  min-height: 100vh;
-  margin: 0 auto;
-  background-color: ${colors.black.main};
-  padding-top: 56px;
-`;
-
-const LoadingContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  gap: 20px;
-`;
-
-const MessageContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-`;
-
-const Message = styled.div`
-  color: ${colors.white};
-  font-size: ${typography.fontSize.lg};
-  font-weight: ${typography.fontWeight.semibold};
-  line-height: 24px;
-  text-align: center;
-`;
-
-const SubMessage = styled.div`
-  color: ${colors.grey[100]};
-  font-size: ${typography.fontSize.sm};
-  font-weight: ${typography.fontWeight.regular};
-  line-height: 20px;
-  text-align: center;
-`;
-
-const ResultContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: calc(100vh - 56px);
-  overflow-y: auto;
-`;
-
-const InfoBanner = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 13px 26px;
-
-  img {
-    width: 20px;
-    height: 20px;
-  }
-
-  span {
-    color: ${colors.grey[200]};
-    font-size: ${typography.fontSize.xs};
-    font-weight: ${typography.fontWeight.regular};
-    line-height: auto;
-  }
-`;
-
-const ContentText = styled.div`
-  flex: 1;
-  padding: 0 26px 74px;
-  color: ${colors.white};
-  font-size: ${typography.fontSize.sm};
-  font-weight: ${typography.fontWeight.regular};
-  line-height: 20px;
-  white-space: pre-wrap;
-`;
-
-const CopyButton = styled.button`
-  position: fixed;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100%;
-  max-width: 767px;
-  height: 50px;
-  background-color: ${colors.purple.main};
-  color: ${colors.white};
-  font-size: ${typography.fontSize.lg};
-  font-weight: ${typography.fontWeight.semibold};
-  border: none;
-  cursor: pointer;
-  text-align: center;
-  line-height: 50px;
-`;
-
 export default AIWrite;

src/pages/feed/Feed.styled.ts

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  min-width: 320px;
+  max-width: 767px;
+  height: 100vh;
+  background-color: var(--color-black-main);
+  margin: 0 auto;
+`;

src/pages/feed/Feed.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback } from 'react';
-import styled from '@emotion/styled';
 import NavBar from '../../components/common/NavBar';
 import TabBar from '../../components/feed/TabBar';
 import MyFeed from '../../components/feed/MyFeed';
@@ -11,6 +10,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { getTotalFeeds } from '@/api/feeds/getTotalFeed';
 import { getMyFeeds } from '@/api/feeds/getMyFeed';
 import { useSocialLoginToken } from '@/hooks/useSocialLoginToken';
+import { Container } from './Feed.styled';
 import type { PostData } from '@/types/post';
 
 const tabs = ['피드', '내 피드'];
@@ -190,12 +190,4 @@ const Feed = () => {
   );
 };
 
-const Container = styled.div`
-  min-width: 320px;
-  max-width: 767px;
-  height: 100vh;
-  background-color: var(--color-black-main);
-  margin: 0 auto;
-`;
-
 export default Feed;

src/pages/feed/FeedDetailPage.styled.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  min-width: 320px;
+  max-width: 767px;
+  min-height: 100vh;
+  padding-top: 56px;
+  margin: 0 auto;
+  background-color: #121212;
+`;

src/pages/feed/FeedDetailPage.tsx

@@ -1,6 +1,5 @@
 import { useNavigate, useParams } from 'react-router-dom';
 import { useState, useEffect, useCallback } from 'react';
-import styled from '@emotion/styled';
 import TitleHeader from '@/components/common/TitleHeader';
 import FeedDetailPost from '@/components/feed/FeedDetailPost';
 import leftArrow from '../../assets/common/leftArrow.svg';
@@ -12,6 +11,7 @@ import { useReplyActions } from '@/hooks/useReplyActions';
 import { getFeedDetail, type FeedDetailData } from '@/api/feeds/getFeedDetail';
 import { getComments, type CommentData } from '@/api/comments/getComments';
 import { deleteFeedPost } from '@/api/feeds/deleteFeedPost';
+import { Wrapper } from './FeedDetailPage.styled';
 import { useReplyStore } from '@/stores/replyStore';
 
 const FeedDetailPage = () => {
@@ -204,17 +204,4 @@ const FeedDetailPage = () => {
   );
 };
 
-const Wrapper = styled.div`
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  align-items: center;
-  min-width: 320px;
-  max-width: 767px;
-  min-height: 100vh;
-  padding-top: 56px;
-  margin: 0 auto;
-  background-color: #121212;
-`;
-
 export default FeedDetailPage;

src/pages/feed/FollowerListPage.syled.ts

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 320px;
+  max-width: 767px;
+  min-height: 100vh;
+  padding: 0 20px;
+  margin: 0 auto;
+  background-color: var(--color-black-main);
+`;
+
+export const TotalBar = styled.div`
+  position: fixed;
+  top: 0;
+  width: 94.8%;
+  max-width: 727px;
+  min-width: 320px;
+  padding: 76px 0px 4px 0px;
+  border-bottom: 1px solid var(--color-darkgrey-dark);
+  background-color: var(--color-black-main);
+
+  color: var(--color-grey-100);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 24px;
+`;
+
+export const UserProfileList = styled.div`
+  width: 100%;
+  min-height: 100vh;
+  background-color: var(--color-black-main);
+  padding-top: 105px;
+  padding-bottom: 20px;
+`;