From ef9717d261cd1b55283ce41ba9ba2732b1b865fb Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 20:20:19 +0900 Subject: [PATCH 01/20] =?UTF-8?q?refactor:=20CountingBar=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CountingBar.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- .../common/Modal/CountingBar.styled.ts | 34 ++++++++++++++++++ src/components/common/Modal/CountingBar.tsx | 35 +------------------ 2 files changed, 35 insertions(+), 34 deletions(-) create mode 100644 src/components/common/Modal/CountingBar.styled.ts diff --git a/src/components/common/Modal/CountingBar.styled.ts b/src/components/common/Modal/CountingBar.styled.ts new file mode 100644 index 00000000..4f192ab3 --- /dev/null +++ b/src/components/common/Modal/CountingBar.styled.ts @@ -0,0 +1,34 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const BarContainer = styled.div` + position: fixed; + top: 16px; + left: 0; + right: 0; + display: flex; + justify-content: center; + z-index: 101; + pointer-events: none; +`; + +export const Bar = styled.div` + padding: 8px 16px; + background: ${colors.darkgrey.dark}; + color: ${colors.neongreen}; + border-radius: 16px; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: 20px; + transform: none; + transition: none; + pointer-events: none; + + &[data-leaving='true'] { + transform: translateY(-32px) scale(0.98); + opacity: 0; + transition: + transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1); + } +`; diff --git a/src/components/common/Modal/CountingBar.tsx b/src/components/common/Modal/CountingBar.tsx index 23883551..782c0a36 100644 --- a/src/components/common/Modal/CountingBar.tsx +++ b/src/components/common/Modal/CountingBar.tsx @@ -1,6 +1,5 @@ import { useEffect, useState } from 'react'; -import styled from '@emotion/styled'; -import { colors, typography } from '@/styles/global/global'; +import { Bar, BarContainer } from './CountingBar.styled'; interface Props { message: string; @@ -30,35 +29,3 @@ const CountingBar = ({ message, duration = 5000, onClose }: Props) => { }; export default CountingBar; - -const BarContainer = styled.div` - position: fixed; - top: 16px; - left: 0; - right: 0; - display: flex; - justify-content: center; - z-index: 101; - pointer-events: none; -`; - -const Bar = styled.div` - padding: 8px 16px; - background: ${colors.darkgrey.dark}; - color: ${colors.neongreen}; - border-radius: 16px; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - line-height: 20px; - transform: none; - transition: none; - pointer-events: none; - - &[data-leaving='true'] { - transform: translateY(-32px) scale(0.98); - opacity: 0; - transition: - transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), - opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1); - } -`; From 4401f04b2a76eb1b6e46749c089a30bf2606d7c9 Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 20:32:27 +0900 Subject: [PATCH 02/20] =?UTF-8?q?Revert=20"refactor:=20CountingBar=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EB=B6=84=EB=A6=AC"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit bf9cc68e3d15bf8042dbcb76d3f0f516c15fcd2b. - 담당 task 변경 --- .../common/Modal/CountingBar.styled.ts | 34 ------------------ src/components/common/Modal/CountingBar.tsx | 35 ++++++++++++++++++- 2 files changed, 34 insertions(+), 35 deletions(-) delete mode 100644 src/components/common/Modal/CountingBar.styled.ts diff --git a/src/components/common/Modal/CountingBar.styled.ts b/src/components/common/Modal/CountingBar.styled.ts deleted file mode 100644 index 4f192ab3..00000000 --- a/src/components/common/Modal/CountingBar.styled.ts +++ /dev/null @@ -1,34 +0,0 @@ -import styled from '@emotion/styled'; -import { colors, typography } from '@/styles/global/global'; - -export const BarContainer = styled.div` - position: fixed; - top: 16px; - left: 0; - right: 0; - display: flex; - justify-content: center; - z-index: 101; - pointer-events: none; -`; - -export const Bar = styled.div` - padding: 8px 16px; - background: ${colors.darkgrey.dark}; - color: ${colors.neongreen}; - border-radius: 16px; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - line-height: 20px; - transform: none; - transition: none; - pointer-events: none; - - &[data-leaving='true'] { - transform: translateY(-32px) scale(0.98); - opacity: 0; - transition: - transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), - opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1); - } -`; diff --git a/src/components/common/Modal/CountingBar.tsx b/src/components/common/Modal/CountingBar.tsx index 782c0a36..23883551 100644 --- a/src/components/common/Modal/CountingBar.tsx +++ b/src/components/common/Modal/CountingBar.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react'; -import { Bar, BarContainer } from './CountingBar.styled'; +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; interface Props { message: string; @@ -29,3 +30,35 @@ const CountingBar = ({ message, duration = 5000, onClose }: Props) => { }; export default CountingBar; + +const BarContainer = styled.div` + position: fixed; + top: 16px; + left: 0; + right: 0; + display: flex; + justify-content: center; + z-index: 101; + pointer-events: none; +`; + +const Bar = styled.div` + padding: 8px 16px; + background: ${colors.darkgrey.dark}; + color: ${colors.neongreen}; + border-radius: 16px; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: 20px; + transform: none; + transition: none; + pointer-events: none; + + &[data-leaving='true'] { + transform: translateY(-32px) scale(0.98); + opacity: 0; + transition: + transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1); + } +`; From c7473f9accc8870245b0ef26bc1ed346bde394b0 Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 20:45:40 +0900 Subject: [PATCH 03/20] =?UTF-8?q?refactor:=20AIWrite=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - AIWrite.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/aiwrite/AIWrite.styled.ts | 100 +++++++++++++++++++++++++ src/pages/aiwrite/AIWrite.tsx | 111 +++------------------------- 2 files changed, 111 insertions(+), 100 deletions(-) create mode 100644 src/pages/aiwrite/AIWrite.styled.ts diff --git a/src/pages/aiwrite/AIWrite.styled.ts b/src/pages/aiwrite/AIWrite.styled.ts new file mode 100644 index 00000000..4e084f16 --- /dev/null +++ b/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; +`; diff --git a/src/pages/aiwrite/AIWrite.tsx b/src/pages/aiwrite/AIWrite.tsx index 28d88651..22a1a7ae 100644 --- a/src/pages/aiwrite/AIWrite.tsx +++ b/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; From fdddd94a1576e897a5671e52062ec7b97ef74f8e Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 20:53:22 +0900 Subject: [PATCH 04/20] =?UTF-8?q?refactor:=20Feed=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Feed.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/feed/Feed.styled.ts | 9 +++++++++ src/pages/feed/Feed.tsx | 10 +--------- 2 files changed, 10 insertions(+), 9 deletions(-) create mode 100644 src/pages/feed/Feed.styled.ts diff --git a/src/pages/feed/Feed.styled.ts b/src/pages/feed/Feed.styled.ts new file mode 100644 index 00000000..b4f6a6d1 --- /dev/null +++ b/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; +`; diff --git a/src/pages/feed/Feed.tsx b/src/pages/feed/Feed.tsx index 2e9b935e..f41ab1b5 100644 --- a/src/pages/feed/Feed.tsx +++ b/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; From 77e3088dbedfcfc6cab242b837f57f305776f9df Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:01:17 +0900 Subject: [PATCH 05/20] =?UTF-8?q?refactor:=20FeedDetailPage=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - FeedDetailPage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/feed/FeedDetailPage.styled.ts | 14 ++++++++++++++ src/pages/feed/FeedDetailPage.tsx | 15 +-------------- 2 files changed, 15 insertions(+), 14 deletions(-) create mode 100644 src/pages/feed/FeedDetailPage.styled.ts diff --git a/src/pages/feed/FeedDetailPage.styled.ts b/src/pages/feed/FeedDetailPage.styled.ts new file mode 100644 index 00000000..1b68e916 --- /dev/null +++ b/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; +`; diff --git a/src/pages/feed/FeedDetailPage.tsx b/src/pages/feed/FeedDetailPage.tsx index bb4efefa..b7c48f0b 100644 --- a/src/pages/feed/FeedDetailPage.tsx +++ b/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'; @@ -13,6 +12,7 @@ import { getFeedDetail, type FeedDetailData } from '@/api/feeds/getFeedDetail'; import { getComments, type CommentData } from '@/api/comments/getComments'; import { deleteFeedPost } from '@/api/feeds/deleteFeedPost'; import { useReplyStore } from '@/stores/useReplyStore'; +import { Wrapper } from './FeedDetailPage.styled'; const FeedDetailPage = () => { const navigate = useNavigate(); @@ -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; From e1dce5271a4443f97e7b967736f4d710d7c6d741 Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:03:24 +0900 Subject: [PATCH 06/20] =?UTF-8?q?refactor:=20FollowerListPage=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - FollowerListPage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/feed/FollowerListPage.syled.ts | 37 +++++++++++++++++++++++ src/pages/feed/FollowerListPage.tsx | 38 +----------------------- 2 files changed, 38 insertions(+), 37 deletions(-) create mode 100644 src/pages/feed/FollowerListPage.syled.ts diff --git a/src/pages/feed/FollowerListPage.syled.ts b/src/pages/feed/FollowerListPage.syled.ts new file mode 100644 index 00000000..b9853167 --- /dev/null +++ b/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; +`; diff --git a/src/pages/feed/FollowerListPage.tsx b/src/pages/feed/FollowerListPage.tsx index 8b03b6b9..9aea7a50 100644 --- a/src/pages/feed/FollowerListPage.tsx +++ b/src/pages/feed/FollowerListPage.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 leftArrow from '../../assets/common/leftArrow.svg'; import UserProfileItem from '@/components/feed/UserProfileItem'; @@ -9,6 +8,7 @@ import { getFollowerList } from '@/api/users/getFollowerList'; import { getFollowingList } from '@/api/users/getFollowingList'; import type { FollowData } from '@/types/follow'; import LoadingSpinner from '@/components/common/LoadingSpinner'; +import { TotalBar, UserProfileList, Wrapper } from './FollowerListPage.syled'; const FollowerListPage = () => { const navigate = useNavigate(); @@ -150,40 +150,4 @@ const FollowerListPage = () => { ); }; -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); -`; - -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; -`; - -const UserProfileList = styled.div` - width: 100%; - min-height: 100vh; - background-color: var(--color-black-main); - padding-top: 105px; - padding-bottom: 20px; -`; - export default FollowerListPage; From 43b09d9452264aa8f7c804a9c7d7669f9f7fbfea Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:16:39 +0900 Subject: [PATCH 07/20] =?UTF-8?q?refactor:=20MyFeedPage=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - MyFeedPage.styled.ts 파일 생성 - OtherFeedPage의 중복된 스타일을 재활용 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/feed/MyFeedPage.styled.ts | 7 +++++++ src/pages/feed/MyFeedPage.tsx | 8 +------- src/pages/feed/OtherFeedPage.tsx | 8 +------- 3 files changed, 9 insertions(+), 14 deletions(-) create mode 100644 src/pages/feed/MyFeedPage.styled.ts diff --git a/src/pages/feed/MyFeedPage.styled.ts b/src/pages/feed/MyFeedPage.styled.ts new file mode 100644 index 00000000..a20008f1 --- /dev/null +++ b/src/pages/feed/MyFeedPage.styled.ts @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + min-width: 320px; + max-width: 767px; + margin: 0 auto; +`; diff --git a/src/pages/feed/MyFeedPage.tsx b/src/pages/feed/MyFeedPage.tsx index 39e5f954..72a210a9 100644 --- a/src/pages/feed/MyFeedPage.tsx +++ b/src/pages/feed/MyFeedPage.tsx @@ -1,6 +1,5 @@ import { useNavigate, useParams } from 'react-router-dom'; import { useState, useEffect } from 'react'; -import styled from '@emotion/styled'; import NavBar from '../../components/common/NavBar'; import TitleHeader from '@/components/common/TitleHeader'; import writefab from '../../assets/common/writefab.svg'; @@ -9,12 +8,7 @@ import OtherFeed from '@/components/feed/OtherFeed'; import { getOtherFeed, type OtherFeedItem } from '@/api/feeds/getOtherFeed'; import { getOtherProfile } from '@/api/users/getOtherProfile'; import type { OtherProfileData } from '@/types/profile'; - -const Container = styled.div` - min-width: 320px; - max-width: 767px; - margin: 0 auto; -`; +import { Container } from './MyFeedPage.styled'; const MyFeedPage = () => { const navigate = useNavigate(); diff --git a/src/pages/feed/OtherFeedPage.tsx b/src/pages/feed/OtherFeedPage.tsx index 790e3a90..7b6ce457 100644 --- a/src/pages/feed/OtherFeedPage.tsx +++ b/src/pages/feed/OtherFeedPage.tsx @@ -1,6 +1,5 @@ import { useNavigate, useParams } from 'react-router-dom'; import { useState, useEffect } from 'react'; -import styled from '@emotion/styled'; import NavBar from '../../components/common/NavBar'; import TitleHeader from '@/components/common/TitleHeader'; import writefab from '../../assets/common/writefab.svg'; @@ -9,12 +8,7 @@ import OtherFeed from '@/components/feed/OtherFeed'; import { getOtherFeed, type OtherFeedItem } from '@/api/feeds/getOtherFeed'; import { getOtherProfile } from '@/api/users/getOtherProfile'; import type { OtherProfileData } from '@/types/profile'; - -const Container = styled.div` - min-width: 320px; - max-width: 767px; - margin: 0 auto; -`; +import { Container } from './MyFeedPage.styled'; const OtherFeedPage = () => { const navigate = useNavigate(); From 1b12f911d709e30dc578c64e97139a0e3c706bb8 Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:17:02 +0900 Subject: [PATCH 08/20] =?UTF-8?q?refactor:=20UserSearch=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - UserSearch.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/feed/UserSearch.styled.ts | 27 +++++++++++++ src/pages/feed/UserSearch.tsx | 28 +------------- src/pages/feed/UserSearchResult.styled.ts | 46 ++++++++++++++++++++++ src/pages/feed/UserSearchResult.tsx | 47 +---------------------- 4 files changed, 75 insertions(+), 73 deletions(-) create mode 100644 src/pages/feed/UserSearch.styled.ts create mode 100644 src/pages/feed/UserSearchResult.styled.ts diff --git a/src/pages/feed/UserSearch.styled.ts b/src/pages/feed/UserSearch.styled.ts new file mode 100644 index 00000000..13345ca7 --- /dev/null +++ b/src/pages/feed/UserSearch.styled.ts @@ -0,0 +1,27 @@ +import { colors } from '@/styles/global/global'; +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + display: flex; + position: relative; + flex-direction: column; + min-width: 320px; + max-width: 767px; + height: 100vh; + margin: 0 auto; + background: ${colors.black.main}; +`; + +export const SearchBarContainer = styled.div` + position: fixed; + top: 56px; + left: 0; + right: 0; + max-width: 767px; + margin: 0 auto; + background: ${colors.black.main}; +`; + +export const Content = styled.div` + margin-top: 132px; +`; diff --git a/src/pages/feed/UserSearch.tsx b/src/pages/feed/UserSearch.tsx index fc34c5a0..80d5f3bf 100644 --- a/src/pages/feed/UserSearch.tsx +++ b/src/pages/feed/UserSearch.tsx @@ -2,8 +2,6 @@ import NavBar from '@/components/common/NavBar'; import TitleHeader from '@/components/common/TitleHeader'; import RecentSearchTabs from '@/components/search/RecentSearchTabs'; import SearchBar from '@/components/search/SearchBar'; -import { colors } from '@/styles/global/global'; -import styled from '@emotion/styled'; import { useEffect, useState } from 'react'; import leftArrow from '../../assets/common/leftArrow.svg'; import { UserSearchResult } from './UserSearchResult'; @@ -11,6 +9,7 @@ import { useNavigate } from 'react-router-dom'; import { useUserSearch } from '@/hooks/useUserSearch'; import { getRecentSearch, type RecentSearchData } from '@/api/recentsearch/getRecentSearch'; import { deleteRecentSearch } from '@/api/recentsearch/deleteRecentSearch'; +import { Content, SearchBarContainer, Wrapper } from './UserSearch.styled'; const UserSearch = () => { const navigate = useNavigate(); @@ -135,28 +134,3 @@ const UserSearch = () => { }; export default UserSearch; - -const Wrapper = styled.div` - display: flex; - position: relative; - flex-direction: column; - min-width: 320px; - max-width: 767px; - height: 100vh; - margin: 0 auto; - background: ${colors.black.main}; -`; - -const SearchBarContainer = styled.div` - position: fixed; - top: 56px; - left: 0; - right: 0; - max-width: 767px; - margin: 0 auto; - background: ${colors.black.main}; -`; - -const Content = styled.div` - margin-top: 132px; -`; diff --git a/src/pages/feed/UserSearchResult.styled.ts b/src/pages/feed/UserSearchResult.styled.ts new file mode 100644 index 00000000..72d8fbfd --- /dev/null +++ b/src/pages/feed/UserSearchResult.styled.ts @@ -0,0 +1,46 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const Wrapper = styled.div` + display: flex; + flex-direction: column; + height: 100%; + padding: 0 20px; + margin-bottom: 72px; +`; + +export const List = styled.div` + display: flex; + flex-direction: column; + width: 100%; + margin: 0 auto; + margin-bottom: 72px; +`; + +export const ResultHeader = styled.div` + width: 100%; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.medium}; + color: ${colors.white}; + padding-bottom: 8px; + border-bottom: 1px solid ${colors.darkgrey.dark}; +`; + +export const EmptyWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding-top: 40%; + color: var(--color-text-primary_white, #fefefe); + text-align: center; + font-size: var(--string-size-large01, 18px); + font-weight: var(--string-weight-semibold, 600); + line-height: var(--string-lineheight-height24, 24px); +`; + +export const ObserverDiv = styled.div` + height: 100px; +`; diff --git a/src/pages/feed/UserSearchResult.tsx b/src/pages/feed/UserSearchResult.tsx index d243404f..a6ee90f9 100644 --- a/src/pages/feed/UserSearchResult.tsx +++ b/src/pages/feed/UserSearchResult.tsx @@ -1,8 +1,7 @@ import { useRef, useEffect } from 'react'; -import styled from '@emotion/styled'; -import { colors, typography } from '@/styles/global/global'; import UserProfileItem from '@/components/feed/UserProfileItem'; import type { UserData } from '@/api/users/getUsers'; +import { EmptyWrapper, List, ObserverDiv, ResultHeader, Wrapper } from './UserSearchResult.styled'; interface UserSearchResultProps { type: 'searching' | 'searched'; @@ -67,47 +66,3 @@ export function UserSearchResult({ ); } - -const Wrapper = styled.div` - display: flex; - flex-direction: column; - height: 100%; - padding: 0 20px; - margin-bottom: 72px; -`; - -const List = styled.div` - display: flex; - flex-direction: column; - width: 100%; - margin: 0 auto; - margin-bottom: 72px; -`; - -const ResultHeader = styled.div` - width: 100%; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.medium}; - color: ${colors.white}; - padding-bottom: 8px; - border-bottom: 1px solid ${colors.darkgrey.dark}; -`; - -const EmptyWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - padding-top: 40%; - color: var(--color-text-primary_white, #fefefe); - text-align: center; - font-size: var(--string-size-large01, 18px); - font-weight: var(--string-weight-semibold, 600); - line-height: var(--string-lineheight-height24, 24px); -`; - -const ObserverDiv = styled.div` - height: 100px; -`; From a34f12c9f72e1f6a039d4a94298de30e8c19c5bb Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:20:46 +0900 Subject: [PATCH 09/20] =?UTF-8?q?refactor:=20Group=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Group.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/group/Group.styled.ts | 35 ++++++++++++++++++++++++++++++++ src/pages/group/Group.tsx | 36 +-------------------------------- 2 files changed, 36 insertions(+), 35 deletions(-) create mode 100644 src/pages/group/Group.styled.ts diff --git a/src/pages/group/Group.styled.ts b/src/pages/group/Group.styled.ts new file mode 100644 index 00000000..77e58f35 --- /dev/null +++ b/src/pages/group/Group.styled.ts @@ -0,0 +1,35 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const Wrapper = styled.div` + display: flex; + position: relative; + flex-direction: column; + align-items: center; + justify-content: flex-start; + min-width: 320px; + max-width: 767px; + min-height: 100vh; + margin: 0 auto; + padding-top: 56px; + background-color: ${colors.black.main}; +`; + +export const AllRoomsButton = styled.div` + display: flex; + position: relative; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.medium}; + width: 83%; + border-radius: 12px; + padding: 14px 12px; + margin-bottom: 12px; + color: ${colors.white}; + background-color: ${colors.darkgrey.main}; + cursor: pointer; + > img { + position: absolute; + right: 5%; + top: -2px; + } +`; diff --git a/src/pages/group/Group.tsx b/src/pages/group/Group.tsx index 43c3b4fb..7b640e04 100644 --- a/src/pages/group/Group.tsx +++ b/src/pages/group/Group.tsx @@ -4,7 +4,6 @@ import SearchBar from '@/components/search/SearchBar'; import type { Group as GroupType } from '@/components/group/MyGroupBox'; import { MyGroupBox } from '../../components/group/MyGroupBox'; import Blank from '@/components/common/Blank'; -import styled from '@emotion/styled'; import { RecruitingGroupCarousel, type Section } from '@/components/group/RecruitingGroupCarousel'; import { useState, useEffect } from 'react'; import { MyGroupModal } from '@/components/group/MyGroupModal'; @@ -12,7 +11,7 @@ import { useNavigate } from 'react-router-dom'; import makegroupfab from '../../assets/common/makegroupfab.svg'; import searchChar from '../../assets/common/searchChar.svg'; import { getRoomsByCategory, type RoomItem } from '@/api/rooms/getRoomsByCategory'; -import { colors, typography } from '@/styles/global/global'; +import { AllRoomsButton, Wrapper } from './Group.styled'; const convertRoomItemToGroup = ( room: RoomItem, @@ -118,36 +117,3 @@ const Group = () => { }; export default Group; - -const Wrapper = styled.div` - display: flex; - position: relative; - flex-direction: column; - align-items: center; - justify-content: flex-start; - min-width: 320px; - max-width: 767px; - min-height: 100vh; - margin: 0 auto; - padding-top: 56px; - background-color: ${colors.black.main}; -`; - -const AllRoomsButton = styled.div` - display: flex; - position: relative; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.medium}; - width: 83%; - border-radius: 12px; - padding: 14px 12px; - margin-bottom: 12px; - color: ${colors.white}; - background-color: ${colors.darkgrey.main}; - cursor: pointer; - > img { - position: absolute; - right: 5%; - top: -2px; - } -`; From 5632f7e89a685218082cf9be41a5268cc821ffda Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:22:35 +0900 Subject: [PATCH 10/20] =?UTF-8?q?refactor:=20GroupDetail=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ParticipatedGroupDetail.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- .../ParticipatedGroupDetail.styled.ts | 20 ++++++++++++++++ .../groupDetail/ParticipatedGroupDetail.tsx | 23 ++----------------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/pages/groupDetail/ParticipatedGroupDetail.styled.ts b/src/pages/groupDetail/ParticipatedGroupDetail.styled.ts index d9bea55e..972c9dfb 100644 --- a/src/pages/groupDetail/ParticipatedGroupDetail.styled.ts +++ b/src/pages/groupDetail/ParticipatedGroupDetail.styled.ts @@ -55,3 +55,23 @@ export const Meta = styled.div` gap: 2px; } `; + +export const LoadingContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + height: 200px; + color: var(--color-grey-200); + font-size: var(--string-size-base, 16px); +`; + +export const ErrorContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + height: 200px; + color: var(--color-red); + font-size: var(--string-size-base, 16px); + text-align: center; + padding: 20px; +`; diff --git a/src/pages/groupDetail/ParticipatedGroupDetail.tsx b/src/pages/groupDetail/ParticipatedGroupDetail.tsx index 7f098202..3281b0a0 100644 --- a/src/pages/groupDetail/ParticipatedGroupDetail.tsx +++ b/src/pages/groupDetail/ParticipatedGroupDetail.tsx @@ -21,6 +21,8 @@ import { MetaTopRow, MetaInfo, Meta, + LoadingContainer, + ErrorContainer, } from './ParticipatedGroupDetail.styled'; import RecordSection from '../../components/group/RecordSection'; import CommentSection from '../../components/group/CommentSection'; @@ -42,7 +44,6 @@ import { IconButton } from '@/components/common/IconButton'; import lockIcon from '../../assets/group/lock.svg'; import calendarIcon from '../../assets/group/calendar.svg'; import peopleIcon from '../../assets/common/darkPeople.svg'; -import styled from '@emotion/styled'; import { isRoomCompleted } from '@/utils/roomStatus'; const ParticipatedGroupDetail = () => { @@ -315,24 +316,4 @@ const ParticipatedGroupDetail = () => { ); }; -const LoadingContainer = styled.div` - display: flex; - align-items: center; - justify-content: center; - height: 200px; - color: var(--color-grey-200); - font-size: var(--string-size-base, 16px); -`; - -const ErrorContainer = styled.div` - display: flex; - align-items: center; - justify-content: center; - height: 200px; - color: var(--color-red); - font-size: var(--string-size-base, 16px); - text-align: center; - padding: 20px; -`; - export default ParticipatedGroupDetail; From c3cdf332d1b77f7cab1b6597732c7a612bc1525a Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:25:04 +0900 Subject: [PATCH 11/20] =?UTF-8?q?refactor:=20GroupSearch=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - GroupSearch.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/groupSearch/GroupSearch.styled.ts | 22 ++++++++++++++++++++ src/pages/groupSearch/GroupSearch.tsx | 23 +-------------------- 2 files changed, 23 insertions(+), 22 deletions(-) create mode 100644 src/pages/groupSearch/GroupSearch.styled.ts diff --git a/src/pages/groupSearch/GroupSearch.styled.ts b/src/pages/groupSearch/GroupSearch.styled.ts new file mode 100644 index 00000000..4b6ee229 --- /dev/null +++ b/src/pages/groupSearch/GroupSearch.styled.ts @@ -0,0 +1,22 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const LoadingMessage = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding: 40px 20px; + color: ${colors.white}; + font-size: ${typography.fontSize.base}; +`; + +export const AllRoomsButton = styled.div` + display: flex; + justify-content: space-between; + padding: 30px 20px; + background-color: transparent; + color: ${colors.grey[100]}; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + cursor: pointer; +`; diff --git a/src/pages/groupSearch/GroupSearch.tsx b/src/pages/groupSearch/GroupSearch.tsx index 511c1e11..95eb6d12 100644 --- a/src/pages/groupSearch/GroupSearch.tsx +++ b/src/pages/groupSearch/GroupSearch.tsx @@ -9,9 +9,8 @@ import GroupSearchResult from '@/components/search/GroupSearchResult'; import { getRecentSearch, type RecentSearchData } from '@/api/recentsearch/getRecentSearch'; import { deleteRecentSearch } from '@/api/recentsearch/deleteRecentSearch'; import { getSearchRooms, type SearchRoomItem } from '@/api/rooms/getSearchRooms'; -import styled from '@emotion/styled'; -import { colors, typography } from '@/styles/global/global'; import { useNavigate, useLocation } from 'react-router-dom'; +import { AllRoomsButton, LoadingMessage } from './GroupSearch.styled'; type SortKey = 'deadline' | 'memberCount'; type SearchStatus = 'idle' | 'searching' | 'searched'; @@ -367,23 +366,3 @@ const GroupSearch = () => { }; export default GroupSearch; - -const LoadingMessage = styled.div` - display: flex; - justify-content: center; - align-items: center; - padding: 40px 20px; - color: ${colors.white}; - font-size: ${typography.fontSize.base}; -`; - -const AllRoomsButton = styled.div` - display: flex; - justify-content: space-between; - padding: 30px 20px; - background-color: transparent; - color: ${colors.grey[100]}; - font-size: ${typography.fontSize.lg}; - font-weight: ${typography.fontWeight.semibold}; - cursor: pointer; -`; From 71eb0654f00a44309127b3baaa5891cd9051b5ea Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:25:24 +0900 Subject: [PATCH 12/20] =?UTF-8?q?refactor:=20Login=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Login.styled.ts 파일 생성 - 불필요한 import 제거 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/login/Login.styled.ts | 32 ++++++++++++++++++++++++++++++ src/pages/login/Login.tsx | 35 +-------------------------------- 2 files changed, 33 insertions(+), 34 deletions(-) create mode 100644 src/pages/login/Login.styled.ts diff --git a/src/pages/login/Login.styled.ts b/src/pages/login/Login.styled.ts new file mode 100644 index 00000000..34ff42f3 --- /dev/null +++ b/src/pages/login/Login.styled.ts @@ -0,0 +1,32 @@ +import styled from '@emotion/styled'; + +export const ButtonBox = styled.div` + display: flex; + flex-direction: column; + position: absolute; + bottom: 130px; + align-items: center; + gap: 20px; + width: 100%; + padding: 0 20px; + color: var(--color-black-main); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: 24px; +`; + +export const SocialButton = styled.div<{ bg: string }>` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 10px 12px; + border-radius: 12px; + gap: 8px; + background-color: ${({ bg }) => bg}; + color: var(--color-black-main); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: 24px; + cursor: pointer; +`; diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx index e6c7e5ef..0fadb99b 100644 --- a/src/pages/login/Login.tsx +++ b/src/pages/login/Login.tsx @@ -1,10 +1,8 @@ -// import { useEffect } from 'react'; -// import { useNavigate } from 'react-router-dom'; -import styled from '@emotion/styled'; import logo from '../../assets/login/logo.svg'; import KaKao from '../../assets/login/kakao.svg'; import Google from '../../assets/login/google.svg'; import { Wrapper } from '@/components/common/Wrapper'; +import { ButtonBox, SocialButton } from './Login.styled'; const Login = () => { const handleKakaoLogin = () => { @@ -30,35 +28,4 @@ const Login = () => { ); }; -const ButtonBox = styled.div` - display: flex; - flex-direction: column; - position: absolute; - bottom: 130px; - align-items: center; - gap: 20px; - width: 100%; - padding: 0 20px; - color: var(--color-black-main); - font-size: var(--font-size-base); - font-weight: var(--font-weight-semibold); - line-height: 24px; -`; - -const SocialButton = styled.div<{ bg: string }>` - display: flex; - justify-content: center; - align-items: center; - width: 100%; - padding: 10px 12px; - border-radius: 12px; - gap: 8px; - background-color: ${({ bg }) => bg}; - color: var(--color-black-main); - font-size: var(--font-size-base); - font-weight: var(--font-weight-semibold); - line-height: 24px; - cursor: pointer; -`; - export default Login; From dc1e1388970d54a4851f37b569ad841908739be0 Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:40:00 +0900 Subject: [PATCH 13/20] =?UTF-8?q?refactor:=20Mypage=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Mypage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/mypage/Mypage.styled.ts | 138 ++++++++++++++++++++++++++++ src/pages/mypage/Mypage.tsx | 148 ++---------------------------- 2 files changed, 148 insertions(+), 138 deletions(-) create mode 100644 src/pages/mypage/Mypage.styled.ts diff --git a/src/pages/mypage/Mypage.styled.ts b/src/pages/mypage/Mypage.styled.ts new file mode 100644 index 00000000..ef50220d --- /dev/null +++ b/src/pages/mypage/Mypage.styled.ts @@ -0,0 +1,138 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const Wrapper = styled.div` + display: flex; + position: relative; + flex-direction: column; + align-items: center; + min-width: 320px; + max-width: 767px; + min-height: 100vh; + margin: 0 auto; + background-color: #121212; +`; + +export const Header = styled.div` + background-color: ${colors.black.main}; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + max-width: 767px; + margin: 0 auto; + padding: 16px 20px; + display: flex; + justify-content: space-between; + + color: ${colors.white}; + font-size: ${typography.fontSize['2xl']}; + font-style: normal; + font-weight: ${typography.fontWeight.bold}; + line-height: 24px; +`; + +export const UserProfile = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 20px; + + .userInfo { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + + img { + width: 54px; + height: 54px; + border-radius: 54px; + border: 0.5px solid var(--color-white); + } + + .user { + display: flex; + flex-direction: column; + gap: 4px; + + .username { + color: var(--color-text-primary_white, #fefefe); + font-size: var(--string-size-large01, 18px); + font-weight: var(--string-weight-semibold, 600); + line-height: var(--string-lineheight-height24, 24px); /* 133.333% */ + letter-spacing: 0.018px; + } + + .usertitle { + font-size: var(--string-size-medium01, 14px); + font-weight: var(--string-weight-regular, 400); + line-height: var(--string-lineheight-feedcontent_height20, 20px); /* 142.857% */ + } + } + } + + .edit { + padding: 8px 12px; + border-radius: 20px; + border: 1px solid #888; + + color: var(--color-text-secondary_grey00, #dadada); + font-size: var(--string-size-medium01, 14px); + font-weight: var(--string-weight-medium, 500); + line-height: normal; + cursor: pointer; + } +`; + +export const Container = styled.div` + display: flex; + flex-direction: column; + width: 100%; + min-height: 100vh; + padding-top: 76px; + gap: 40px; +`; + +export const Section = styled.div``; + +export const SectionTitle = styled.div` + width: 100%; + padding: 0 20px; + padding-bottom: 12px; + + color: ${colors.white}; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + line-height: 24px; +`; + +export const MenuGrid = styled.div` + display: grid; + grid-template-columns: 1fr; + gap: 12px; + padding: 0 20px; + + @media (min-width: 612px) { + grid-template-columns: repeat(2, 1fr); + gap: 16px; + } +`; + +export const BottomMenu = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + margin-top: auto; + padding-bottom: 93px; + + color: ${colors.grey[200]}; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: 20px; + cursor: pointer; +`; diff --git a/src/pages/mypage/Mypage.tsx b/src/pages/mypage/Mypage.tsx index 123af3db..9a57c073 100644 --- a/src/pages/mypage/Mypage.tsx +++ b/src/pages/mypage/Mypage.tsx @@ -1,6 +1,4 @@ -import styled from '@emotion/styled'; import { useNavigate } from 'react-router-dom'; -import { colors, typography } from '@/styles/global/global'; import MenuButton from '@/components/Mypage/MenuButton'; import LoadingSpinner from '@/components/common/LoadingSpinner'; import { usePopupActions } from '@/hooks/usePopupActions'; @@ -15,6 +13,16 @@ import terms from '../../assets/mypage/terms.svg'; import NavBar from '@/components/common/NavBar'; import { getMyProfile, type GetMyProfileResponse } from '@/api/users/getMyProfile'; import { useEffect, useState } from 'react'; +import { + Wrapper, + Header, + UserProfile, + Container, + Section, + SectionTitle, + MenuGrid, + BottomMenu, +} from './Mypage.styled'; const Mypage = () => { const [profile, setProfile] = useState(null); @@ -158,140 +166,4 @@ const Mypage = () => { ); }; -const Wrapper = styled.div` - display: flex; - position: relative; - flex-direction: column; - align-items: center; - min-width: 320px; - max-width: 767px; - min-height: 100vh; - margin: 0 auto; - background-color: #121212; -`; - -const Header = styled.div` - background-color: ${colors.black.main}; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 100; - max-width: 767px; - margin: 0 auto; - padding: 16px 20px; - display: flex; - justify-content: space-between; - - color: ${colors.white}; - font-size: ${typography.fontSize['2xl']}; - font-style: normal; - font-weight: ${typography.fontWeight.bold}; - line-height: 24px; -`; - -const UserProfile = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 100%; - padding: 0 20px; - - .userInfo { - display: flex; - flex-direction: row; - align-items: center; - gap: 8px; - - img { - width: 54px; - height: 54px; - border-radius: 54px; - border: 0.5px solid var(--color-white); - } - - .user { - display: flex; - flex-direction: column; - gap: 4px; - - .username { - color: var(--color-text-primary_white, #fefefe); - font-size: var(--string-size-large01, 18px); - font-weight: var(--string-weight-semibold, 600); - line-height: var(--string-lineheight-height24, 24px); /* 133.333% */ - letter-spacing: 0.018px; - } - - .usertitle { - font-size: var(--string-size-medium01, 14px); - font-weight: var(--string-weight-regular, 400); - line-height: var(--string-lineheight-feedcontent_height20, 20px); /* 142.857% */ - } - } - } - - .edit { - padding: 8px 12px; - border-radius: 20px; - border: 1px solid #888; - - color: var(--color-text-secondary_grey00, #dadada); - font-size: var(--string-size-medium01, 14px); - font-weight: var(--string-weight-medium, 500); - line-height: normal; - cursor: pointer; - } -`; - -const Container = styled.div` - display: flex; - flex-direction: column; - width: 100%; - min-height: 100vh; - padding-top: 76px; - gap: 40px; -`; - -const Section = styled.div``; - -const SectionTitle = styled.div` - width: 100%; - padding: 0 20px; - padding-bottom: 12px; - - color: ${colors.white}; - font-size: ${typography.fontSize.lg}; - font-weight: ${typography.fontWeight.semibold}; - line-height: 24px; -`; - -const MenuGrid = styled.div` - display: grid; - grid-template-columns: 1fr; - gap: 12px; - padding: 0 20px; - - @media (min-width: 612px) { - grid-template-columns: repeat(2, 1fr); - gap: 16px; - } -`; - -const BottomMenu = styled.div` - display: flex; - flex-direction: column; - align-items: center; - gap: 24px; - margin-top: auto; - padding-bottom: 93px; - - color: ${colors.grey[200]}; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - line-height: 20px; - cursor: pointer; -`; - export default Mypage; From e0fc485684aadcb71756a66f33837ea75181839c Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:41:17 +0900 Subject: [PATCH 14/20] =?UTF-8?q?refactor:=20Withdraw=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - WithdrawPage.styled.ts 파일 생성 - WithdrawDonePage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/mypage/WithdrawDonePage.styled.ts | 39 ++++++ src/pages/mypage/WithdrawDonePage.tsx | 40 +------ src/pages/mypage/WithdrawPage.styled.ts | 113 ++++++++++++++++++ src/pages/mypage/WithdrawPage.tsx | 125 ++------------------ 4 files changed, 166 insertions(+), 151 deletions(-) create mode 100644 src/pages/mypage/WithdrawDonePage.styled.ts create mode 100644 src/pages/mypage/WithdrawPage.styled.ts diff --git a/src/pages/mypage/WithdrawDonePage.styled.ts b/src/pages/mypage/WithdrawDonePage.styled.ts new file mode 100644 index 00000000..12e4ad13 --- /dev/null +++ b/src/pages/mypage/WithdrawDonePage.styled.ts @@ -0,0 +1,39 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; +`; + +export const Text = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + min-width: 360px; + max-width: 540px; + padding: 40px 20px; + margin: 0 auto; + margin-bottom: 56px; + gap: 20px; + + .title { + color: ${colors.white}; + text-align: center; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + line-height: 24px; + } + + .sub-title { + color: ${colors.grey[100]}; + text-align: center; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: normal; + } +`; diff --git a/src/pages/mypage/WithdrawDonePage.tsx b/src/pages/mypage/WithdrawDonePage.tsx index bcbfe4f1..7f8a6bdd 100644 --- a/src/pages/mypage/WithdrawDonePage.tsx +++ b/src/pages/mypage/WithdrawDonePage.tsx @@ -1,10 +1,9 @@ import TitleHeader from '@/components/common/TitleHeader'; -import styled from '@emotion/styled'; import { Wrapper } from '../../components/common/Wrapper'; import leftArrow from '@/assets/common/leftArrow.svg'; import charactor from '@/assets/mypage/charactor.svg'; import { useNavigate } from 'react-router-dom'; -import { colors, typography } from '@/styles/global/global'; +import { Container, Text } from './WithdrawDonePage.styled'; const WithdrawDonePage = () => { const navigate = useNavigate(); @@ -27,41 +26,4 @@ const WithdrawDonePage = () => { ); }; -const Container = styled.div` - display: flex; - flex-direction: column; - align-items: center; - gap: 40px; -`; - -const Text = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - min-width: 360px; - max-width: 540px; - padding: 40px 20px; - margin: 0 auto; - margin-bottom: 56px; - gap: 20px; - - .title { - color: ${colors.white}; - text-align: center; - font-size: ${typography.fontSize.lg}; - font-weight: ${typography.fontWeight.semibold}; - line-height: 24px; - } - - .sub-title { - color: ${colors.grey[100]}; - text-align: center; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - line-height: normal; - } -`; - export default WithdrawDonePage; diff --git a/src/pages/mypage/WithdrawPage.styled.ts b/src/pages/mypage/WithdrawPage.styled.ts new file mode 100644 index 00000000..e917b4b6 --- /dev/null +++ b/src/pages/mypage/WithdrawPage.styled.ts @@ -0,0 +1,113 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const Wrapper = styled.div` + display: flex; + position: relative; + flex-direction: column; + align-items: center; + min-width: 320px; + max-width: 767px; + height: 100vh; + margin: 0 auto; + padding-top: 76px; + background-color: #121212; +`; + +export const Container = styled.div` + display: flex; + flex-direction: column; + width: 100%; + min-width: 320px; + max-width: 540px; + gap: 30px; + padding: 40px 20px 105px 20px; +`; + +export const Content = styled.div` + display: flex; + flex-direction: column; + gap: 40px; + padding: 16px; + border-radius: 12px; + background-color: ${colors.darkgrey.dark}; +`; + +export const ContentTitle = styled.div` + color: ${colors.white}; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + line-height: 24px; +`; + +export const ContentText = styled.div` + color: ${colors.grey[200]}; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: 20px; + + .danger { + color: #ff9496; + } +`; + +export const CheckSection = styled.div` + display: flex; + flex-direction: column; + gap: 16px; +`; + +export const CheckboxContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + gap: 12px; + cursor: pointer; +`; + +export const Checkbox = styled.div<{ checked: boolean }>` + width: 30px; + height: 30px; + border: 2px solid ${colors.grey[200]}; + border-radius: 8px; + background-color: transparent; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; +`; + +export const CheckLabel = styled.div` + color: ${colors.white}; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: 24px; +`; + +export const WithdrawButton = styled.div<{ isActive: boolean }>` + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 0 auto; + gap: 8px; + width: 100%; + max-width: 767px; + min-width: 320px; + height: 50px; + background-color: ${props => (props.isActive ? colors.purple.main : colors.grey[300])}; + cursor: ${props => (props.isActive ? 'pointer' : 'not-allowed')}; + z-index: 2000; +`; + +export const ButtonText = styled.div` + color: ${colors.white}; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: 24px; +`; diff --git a/src/pages/mypage/WithdrawPage.tsx b/src/pages/mypage/WithdrawPage.tsx index ad8fe06f..88c1353f 100644 --- a/src/pages/mypage/WithdrawPage.tsx +++ b/src/pages/mypage/WithdrawPage.tsx @@ -2,12 +2,23 @@ import TitleHeader from '@/components/common/TitleHeader'; import { useNavigate } from 'react-router-dom'; import { useState } from 'react'; import { usePopupActions } from '@/hooks/usePopupActions'; -import styled from '@emotion/styled'; -import { colors, typography } from '@/styles/global/global'; import leftArrow from '../../assets/common/leftArrow.svg'; import withdraw from '@/assets/mypage/withdraw.svg'; import check from '@/assets/mypage/check.svg'; import { deleteUsers } from '@/api/users/deleteUsers'; +import { + Wrapper, + Container, + Content, + ContentTitle, + ContentText, + CheckSection, + CheckboxContainer, + Checkbox, + CheckLabel, + WithdrawButton, + ButtonText, +} from './WithdrawPage.styled'; const WithdrawPage = () => { const navigate = useNavigate(); @@ -97,114 +108,4 @@ const WithdrawPage = () => { ); }; -const Wrapper = styled.div` - display: flex; - position: relative; - flex-direction: column; - align-items: center; - min-width: 320px; - max-width: 767px; - height: 100vh; - margin: 0 auto; - padding-top: 76px; - background-color: #121212; -`; - -const Container = styled.div` - display: flex; - flex-direction: column; - width: 100%; - min-width: 320px; - max-width: 540px; - gap: 30px; - padding: 40px 20px 105px 20px; -`; - -const Content = styled.div` - display: flex; - flex-direction: column; - gap: 40px; - padding: 16px; - border-radius: 12px; - background-color: ${colors.darkgrey.dark}; -`; - -const ContentTitle = styled.div` - color: ${colors.white}; - font-size: ${typography.fontSize.lg}; - font-weight: ${typography.fontWeight.semibold}; - line-height: 24px; -`; - -const ContentText = styled.div` - color: ${colors.grey[200]}; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - line-height: 20px; - - .danger { - color: #ff9496; - } -`; - -const CheckSection = styled.div` - display: flex; - flex-direction: column; - gap: 16px; -`; - -const CheckboxContainer = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - gap: 12px; - cursor: pointer; -`; - -const Checkbox = styled.div<{ checked: boolean }>` - width: 30px; - height: 30px; - border: 2px solid ${colors.grey[200]}; - border-radius: 8px; - background-color: transparent; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s ease; -`; - -const CheckLabel = styled.div` - color: ${colors.white}; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - line-height: 24px; -`; - -const WithdrawButton = styled.div<{ isActive: boolean }>` - position: fixed; - bottom: 0; - left: 0; - right: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - margin: 0 auto; - gap: 8px; - width: 100%; - max-width: 767px; - min-width: 320px; - height: 50px; - background-color: ${props => (props.isActive ? colors.purple.main : colors.grey[300])}; - cursor: ${props => (props.isActive ? 'pointer' : 'not-allowed')}; - z-index: 2000; -`; - -const ButtonText = styled.div` - color: ${colors.white}; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - line-height: 24px; -`; export default WithdrawPage; From d0008e3139e6b41b90551581087a75b572e5e661 Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:41:39 +0900 Subject: [PATCH 15/20] =?UTF-8?q?refactor:=20AlertPage=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - AlertPage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/mypage/AlertPage.styled.ts | 78 ++++++++++++++++++++++++ src/pages/mypage/AlertPage.tsx | 89 ++++------------------------ 2 files changed, 89 insertions(+), 78 deletions(-) create mode 100644 src/pages/mypage/AlertPage.styled.ts diff --git a/src/pages/mypage/AlertPage.styled.ts b/src/pages/mypage/AlertPage.styled.ts new file mode 100644 index 00000000..9b8afd99 --- /dev/null +++ b/src/pages/mypage/AlertPage.styled.ts @@ -0,0 +1,78 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const Wrapper = styled.div` + display: flex; + position: relative; + flex-direction: column; + align-items: center; + min-width: 320px; + max-width: 767px; + height: 100vh; + margin: 0 auto; + padding-top: 76px; + background-color: #121212; +`; + +export const Content = styled.div` + display: flex; + flex-direction: column; + width: 100%; + padding: 20px; + gap: 24px; +`; + +export const SettingItem = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 0; +`; + +export const SettingInfo = styled.div` + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; +`; + +export const SettingTitle = styled.div` + color: ${colors.white}; + font-size: ${typography.fontSize.base}; + font-weight: ${typography.fontWeight.semibold}; + line-height: 24px; +`; + +export const SubSection = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; +`; + +export const SettingDesc = styled.div` + color: ${colors.grey[200]}; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: 20px; +`; + +export const Toggle = styled.div<{ isActive: boolean }>` + width: 44px; + height: 24px; + border-radius: 12px; + background-color: ${props => (props.isActive ? colors.purple.main : colors.grey[300])}; + position: relative; + cursor: pointer; + transition: background-color 0.3s ease; +`; + +export const ToggleSlider = styled.div<{ isActive: boolean }>` + width: 20px; + height: 20px; + border-radius: 50%; + background-color: ${colors.white}; + position: absolute; + top: 2px; + left: ${props => (props.isActive ? '22px' : '2px')}; + transition: left 0.3s ease; +`; diff --git a/src/pages/mypage/AlertPage.tsx b/src/pages/mypage/AlertPage.tsx index c6525836..dc143bf4 100644 --- a/src/pages/mypage/AlertPage.tsx +++ b/src/pages/mypage/AlertPage.tsx @@ -3,8 +3,17 @@ import { useState } from 'react'; import TitleHeader from '../../components/common/TitleHeader'; import { usePopupActions } from '@/hooks/usePopupActions'; import leftArrow from '../../assets/common/leftArrow.svg'; -import styled from '@emotion/styled'; -import { colors, typography } from '@/styles/global/global'; +import { + Wrapper, + Content, + SettingItem, + SettingInfo, + SettingTitle, + SubSection, + SettingDesc, + Toggle, + ToggleSlider, +} from './AlertPage.styled'; const AlertPage = () => { const navigate = useNavigate(); @@ -65,80 +74,4 @@ const AlertPage = () => { ); }; -export const Wrapper = styled.div` - display: flex; - position: relative; - flex-direction: column; - align-items: center; - min-width: 320px; - max-width: 767px; - height: 100vh; - margin: 0 auto; - padding-top: 76px; - background-color: #121212; -`; - -const Content = styled.div` - display: flex; - flex-direction: column; - width: 100%; - padding: 20px; - gap: 24px; -`; - -const SettingItem = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px 0; -`; - -const SettingInfo = styled.div` - display: flex; - flex-direction: column; - gap: 4px; - flex: 1; -`; - -const SettingTitle = styled.div` - color: ${colors.white}; - font-size: ${typography.fontSize.base}; - font-weight: ${typography.fontWeight.semibold}; - line-height: 24px; -`; - -const SubSection = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; -`; - -const SettingDesc = styled.div` - color: ${colors.grey[200]}; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - line-height: 20px; -`; - -const Toggle = styled.div<{ isActive: boolean }>` - width: 44px; - height: 24px; - border-radius: 12px; - background-color: ${props => (props.isActive ? colors.purple.main : colors.grey[300])}; - position: relative; - cursor: pointer; - transition: background-color 0.3s ease; -`; - -const ToggleSlider = styled.div<{ isActive: boolean }>` - width: 20px; - height: 20px; - border-radius: 50%; - background-color: ${colors.white}; - position: absolute; - top: 2px; - left: ${props => (props.isActive ? '22px' : '2px')}; - transition: left 0.3s ease; -`; - export default AlertPage; From 753f753f483cba4432c8a55ae9f19397eb9fe0c3 Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Thu, 1 Jan 2026 21:41:51 +0900 Subject: [PATCH 16/20] =?UTF-8?q?refactor:=20SavePage=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - SavePage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/mypage/SavePage.styled.ts | 113 +++++++++++++++++++++++++ src/pages/mypage/SavePage.tsx | 127 +++------------------------- 2 files changed, 126 insertions(+), 114 deletions(-) create mode 100644 src/pages/mypage/SavePage.styled.ts diff --git a/src/pages/mypage/SavePage.styled.ts b/src/pages/mypage/SavePage.styled.ts new file mode 100644 index 00000000..fd07cd0a --- /dev/null +++ b/src/pages/mypage/SavePage.styled.ts @@ -0,0 +1,113 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const Wrapper = styled.div` + display: flex; + position: relative; + flex-direction: column; + align-items: center; + padding-top: 130px; + min-width: 320px; + max-width: 767px; + min-height: 100vh; + margin: 0 auto; + background-color: #121212; +`; + +export const FeedContainer = styled.div` + display: flex; + flex-direction: column; + width: 100%; +`; + +export const EmptyState = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + min-width: 320px; + max-width: 540px; + min-height: 100%; + padding: 40px 20px; + margin: 0 auto; + margin-bottom: 20px; + gap: 8px; + flex: 1; + + .title { + color: ${colors.white}; + text-align: center; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + line-height: 24px; + } + + .sub-title { + color: ${colors.grey[100]}; + text-align: center; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: normal; + } +`; + +export const BookList = styled.div` + display: flex; + flex-direction: column; + width: 100%; + min-width: 320px; + max-width: 767px; + padding-top: 32px; + margin: 0 auto; + width: 100%; +`; + +export const BookItem = styled.div` + width: 94.8%; + margin: 0 auto; + display: flex; + border-bottom: 1px solid ${colors.darkgrey.dark}; + padding: 12px; + + &:last-child { + border-bottom: none; + } + justify-content: space-between; +`; + +export const Cover = styled.img` + width: 80px; + height: 107px; + object-fit: cover; +`; + +export const LeftSection = styled.div` + display: flex; + flex-direction: row; + gap: 12px; +`; + +export const BookInfo = styled.div` + display: flex; + flex-direction: column; +`; + +export const Title = styled.h3` + font-size: ${typography.fontSize.base}; + font-weight: ${typography.fontWeight.semibold}; + color: ${colors.white}; +`; + +export const Subtitle = styled.span` + font-size: ${typography.fontSize.xs}; + font-weight: ${typography.fontWeight.medium}; + color: ${colors.grey[200]}; + margin-top: 8px; +`; + +export const SaveIcon = styled.div` + width: 24px; + height: 24px; + cursor: pointer; +`; diff --git a/src/pages/mypage/SavePage.tsx b/src/pages/mypage/SavePage.tsx index 28d6e909..6f9ceeda 100644 --- a/src/pages/mypage/SavePage.tsx +++ b/src/pages/mypage/SavePage.tsx @@ -6,13 +6,23 @@ import FeedPost from '@/components/feed/FeedPost'; import leftArrow from '../../assets/common/leftArrow.svg'; import save from '../../assets/feed/save.svg'; import activeSave from '../../assets/feed/activeSave.svg'; -import styled from '@emotion/styled'; -import { colors, typography } from '@/styles/global/global'; import { getSavedBooksInMy, type SavedBookInMy } from '@/api/books/getSavedBooksInMy'; import { getSavedFeedsInMy, type SavedFeedInMy } from '@/api/feeds/getSavedFeedsInMy'; import { postSaveBook } from '@/api/books/postSaveBook'; - import LoadingSpinner from '@/components/common/LoadingSpinner'; +import { + Wrapper, + FeedContainer, + EmptyState, + BookList, + BookItem, + Cover, + LeftSection, + BookInfo, + Title, + Subtitle, + SaveIcon, +} from './SavePage.styled'; const tabs = ['피드', '책']; @@ -267,115 +277,4 @@ const SavePage = () => { ); }; -export const Wrapper = styled.div` - display: flex; - position: relative; - flex-direction: column; - align-items: center; - padding-top: 130px; - min-width: 320px; - max-width: 767px; - min-height: 100vh; - margin: 0 auto; - background-color: #121212; -`; - -const FeedContainer = styled.div` - display: flex; - flex-direction: column; - width: 100%; -`; - -const EmptyState = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - min-width: 320px; - max-width: 540px; - min-height: 100%; - padding: 40px 20px; - margin: 0 auto; - margin-bottom: 20px; - gap: 8px; - flex: 1; - - .title { - color: ${colors.white}; - text-align: center; - font-size: ${typography.fontSize.lg}; - font-weight: ${typography.fontWeight.semibold}; - line-height: 24px; - } - - .sub-title { - color: ${colors.grey[100]}; - text-align: center; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - line-height: normal; - } -`; - -const BookList = styled.div` - display: flex; - flex-direction: column; - width: 100%; - min-width: 320px; - max-width: 767px; - padding-top: 32px; - margin: 0 auto; - width: 100%; -`; - -const BookItem = styled.div` - width: 94.8%; - margin: 0 auto; - display: flex; - border-bottom: 1px solid ${colors.darkgrey.dark}; - padding: 12px; - - &:last-child { - border-bottom: none; - } - justify-content: space-between; -`; - -const Cover = styled.img` - width: 80px; - height: 107px; - object-fit: cover; -`; - -const LeftSection = styled.div` - display: flex; - flex-direction: row; - gap: 12px; -`; - -const BookInfo = styled.div` - display: flex; - flex-direction: column; -`; - -const Title = styled.h3` - font-size: ${typography.fontSize.base}; - font-weight: ${typography.fontWeight.semibold}; - color: ${colors.white}; -`; - -const Subtitle = styled.span` - font-size: ${typography.fontSize.xs}; - font-weight: ${typography.fontWeight.medium}; - color: ${colors.grey[200]}; - margin-top: 8px; -`; - -const SaveIcon = styled.div` - width: 24px; - height: 24px; - cursor: pointer; -`; - export default SavePage; From 82c39a8447c218224ec1cef455f7d7091794fb32 Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Fri, 2 Jan 2026 00:08:19 +0900 Subject: [PATCH 17/20] =?UTF-8?q?refactor:=20Notice=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Notice.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/notice/Notice.styled.ts | 131 +++++++++++++++++++++++++++ src/pages/notice/Notice.tsx | 146 +++--------------------------- 2 files changed, 146 insertions(+), 131 deletions(-) create mode 100644 src/pages/notice/Notice.styled.ts diff --git a/src/pages/notice/Notice.styled.ts b/src/pages/notice/Notice.styled.ts new file mode 100644 index 00000000..f14cfca0 --- /dev/null +++ b/src/pages/notice/Notice.styled.ts @@ -0,0 +1,131 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const Wrapper = styled.div` + display: flex; + position: relative; + flex-direction: column; + min-width: 320px; + max-width: 767px; + height: 100vh; + margin: 0 auto; + background-color: ${colors.black.main}; + overflow: hidden; +`; + +export const TabContainer = styled.div` + display: flex; + gap: 12px; + padding: 0 20px; + margin: 76px 0 20px 0; +`; + +export const Tab = styled.button<{ selected: boolean }>` + padding: 8px 12px; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + border: none; + border-radius: 16px; + background: ${({ selected }) => (selected ? colors.purple.main : colors.darkgrey.main)}; + color: ${colors.white}; + cursor: pointer; +`; + +export const NotificationList = styled.div` + display: flex; + flex-direction: column; + gap: 12px; + padding: 0 20px 20px 20px; + width: 100%; + overflow-y: auto; + -ms-overflow-style: none; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } +`; + +export const NotificationCard = styled.div<{ read: boolean }>` + display: flex; + flex-direction: column; + background: ${colors.darkgrey.dark}; + border-radius: 12px; + padding: 16px; + color: ${colors.grey[300]}; + position: relative; + width: 100%; + opacity: ${({ read }) => (read ? '0.5' : '1')}; + cursor: pointer; +`; + +export const TitleRow = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + margin-bottom: 6px; +`; + +export const Badge = styled.span` + flex-shrink: 0; + color: ${colors.grey[100]}; + border-radius: 40px; + font-size: ${typography.fontSize.xs}; + font-weight: ${typography.fontWeight.semibold}; + padding: 4px 10px; + border: 1px solid ${colors.grey[200]}; + white-space: nowrap; +`; + +export const Title = styled.div` + color: ${colors.white}; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.medium}; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex-grow: 1; +`; + +export const Time = styled.div` + flex-shrink: 0; + font-size: ${typography.fontSize['2xs']}; + font-weight: ${typography.fontWeight.regular}; + color: ${colors.grey[200]}; + white-space: nowrap; +`; + +export const Description = styled.div` + font-size: ${typography.fontSize.xs}; + font-weight: ${typography.fontWeight.regular}; + color: ${colors.grey[200]}; + margin-top: 4px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +`; + +export const EmptyState = styled.div` + margin-top: 300px; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + line-height: 24px; + padding: 40px 0px; + text-align: center; + color: ${colors.white}; +`; + +export const UnreadDot = styled.div` + position: absolute; + top: 12px; + right: 12px; + width: 6px; + height: 6px; + background-color: #ff9496; + border-radius: 50%; +`; + +export const Sentinel = styled.div` + width: 100%; + height: 1px; +`; diff --git a/src/pages/notice/Notice.tsx b/src/pages/notice/Notice.tsx index 199ee13a..d6c74de7 100644 --- a/src/pages/notice/Notice.tsx +++ b/src/pages/notice/Notice.tsx @@ -1,11 +1,24 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import styled from '@emotion/styled'; import TitleHeader from '@/components/common/TitleHeader'; import leftArrow from '../../assets/common/leftArrow.svg'; -import { colors, typography } from '@/styles/global/global'; import { getNotifications, type NotificationItem } from '@/api/notifications/getNotifications'; import { postNotificationsCheck } from '@/api/notifications/postNotificationsCheck'; +import { + Wrapper, + TabContainer, + Tab, + NotificationList, + NotificationCard, + TitleRow, + Badge, + Title, + Time, + Description, + EmptyState, + UnreadDot, + Sentinel, +} from './Notice.styled'; const Notice = () => { const [selected, setSelected] = useState(''); @@ -192,132 +205,3 @@ const Notice = () => { }; export default Notice; - -const Wrapper = styled.div` - display: flex; - position: relative; - flex-direction: column; - min-width: 320px; - max-width: 767px; - height: 100vh; - margin: 0 auto; - background-color: ${colors.black.main}; - overflow: hidden; -`; - -const TabContainer = styled.div` - display: flex; - gap: 12px; - padding: 0 20px; - margin: 76px 0 20px 0; -`; - -const Tab = styled.button<{ selected: boolean }>` - padding: 8px 12px; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - border: none; - border-radius: 16px; - background: ${({ selected }) => (selected ? colors.purple.main : colors.darkgrey.main)}; - color: ${colors.white}; - cursor: pointer; -`; - -const NotificationList = styled.div` - display: flex; - flex-direction: column; - gap: 12px; - padding: 0 20px 20px 20px; - width: 100%; - overflow-y: auto; - -ms-overflow-style: none; - scrollbar-width: none; - &::-webkit-scrollbar { - display: none; - } -`; - -const NotificationCard = styled.div<{ read: boolean }>` - display: flex; - flex-direction: column; - background: ${colors.darkgrey.dark}; - border-radius: 12px; - padding: 16px; - color: ${colors.grey[300]}; - position: relative; - width: 100%; - opacity: ${({ read }) => (read ? '0.5' : '1')}; - cursor: pointer; -`; - -const TitleRow = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - margin-bottom: 6px; -`; - -const Badge = styled.span` - flex-shrink: 0; - color: ${colors.grey[100]}; - border-radius: 40px; - font-size: ${typography.fontSize.xs}; - font-weight: ${typography.fontWeight.semibold}; - padding: 4px 10px; - border: 1px solid ${colors.grey[200]}; - white-space: nowrap; -`; - -const Title = styled.div` - color: ${colors.white}; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.medium}; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex-grow: 1; -`; - -const Time = styled.div` - flex-shrink: 0; - font-size: ${typography.fontSize['2xs']}; - font-weight: ${typography.fontWeight.regular}; - color: ${colors.grey[200]}; - white-space: nowrap; -`; - -const Description = styled.div` - font-size: ${typography.fontSize.xs}; - font-weight: ${typography.fontWeight.regular}; - color: ${colors.grey[200]}; - margin-top: 4px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -`; - -const EmptyState = styled.div` - margin-top: 300px; - font-size: ${typography.fontSize.lg}; - font-weight: ${typography.fontWeight.semibold}; - line-height: 24px; - padding: 40px 0px; - text-align: center; - color: ${colors.white}; -`; - -const UnreadDot = styled.div` - position: absolute; - top: 12px; - right: 12px; - width: 6px; - height: 6px; - background-color: #ff9496; - border-radius: 50%; -`; - -const Sentinel = styled.div` - width: 100%; - height: 1px; -`; From 0f3de90cb513578d02357634be7782fe72f8fedc Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Fri, 2 Jan 2026 00:10:30 +0900 Subject: [PATCH 18/20] =?UTF-8?q?refactor:=20Search=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Search.styled.ts 파일 생성 - ApplyBook.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/search/ApplyBook.styled.ts | 24 ++++++++++++ src/pages/search/ApplyBook.tsx | 25 +------------ src/pages/search/Search.styled.ts | 55 +++++++++++++++++++++++++++ src/pages/search/Search.tsx | 56 +--------------------------- 4 files changed, 81 insertions(+), 79 deletions(-) create mode 100644 src/pages/search/ApplyBook.styled.ts create mode 100644 src/pages/search/Search.styled.ts diff --git a/src/pages/search/ApplyBook.styled.ts b/src/pages/search/ApplyBook.styled.ts new file mode 100644 index 00000000..2bff67d9 --- /dev/null +++ b/src/pages/search/ApplyBook.styled.ts @@ -0,0 +1,24 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const TextWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 60vh; +`; + +export const MainText = styled.p` + color: ${colors.white}; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + margin-bottom: 12px; +`; + +export const SubText = styled.p` + color: ${colors.grey[100]}; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + margin-bottom: 6px; +`; diff --git a/src/pages/search/ApplyBook.tsx b/src/pages/search/ApplyBook.tsx index 41344c62..0c6d5860 100644 --- a/src/pages/search/ApplyBook.tsx +++ b/src/pages/search/ApplyBook.tsx @@ -1,9 +1,8 @@ import TitleHeader from '@/components/common/TitleHeader'; -import { colors, typography } from '@/styles/global/global'; -import styled from '@emotion/styled'; import leftArrow from '../../assets/common/leftArrow.svg'; import { useNavigate } from 'react-router-dom'; import { Wrapper } from '@/components/common/Wrapper'; +import { TextWrapper, MainText, SubText } from './ApplyBook.styled'; const ApplyBook = () => { const navigate = useNavigate(); @@ -27,25 +26,3 @@ const ApplyBook = () => { }; export default ApplyBook; - -const TextWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 60vh; -`; - -const MainText = styled.p` - color: ${colors.white}; - font-size: ${typography.fontSize.lg}; - font-weight: ${typography.fontWeight.semibold}; - margin-bottom: 12px; -`; - -const SubText = styled.p` - color: ${colors.grey[100]}; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - margin-bottom: 6px; -`; diff --git a/src/pages/search/Search.styled.ts b/src/pages/search/Search.styled.ts new file mode 100644 index 00000000..6d25cd7c --- /dev/null +++ b/src/pages/search/Search.styled.ts @@ -0,0 +1,55 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const Wrapper = styled.div` + display: flex; + position: relative; + flex-direction: column; + min-width: 320px; + max-width: 767px; + height: 100%; + min-height: 100vh; + margin: 0 auto; + background: ${colors.black.main}; +`; + +export const Header = styled.div` + display: flex; + width: 100%; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 56px; + max-width: 767px; + margin: 0 auto; + color: ${colors.white}; + font-size: ${typography.fontSize['2xl']}; + font-weight: ${typography.fontWeight['bold']}; + padding: 16px 20px; + background: ${colors.black.main}; + z-index: 1; +`; + +export const SearchBarContainer = styled.div` + position: fixed; + top: 56px; + left: 0; + right: 0; + max-width: 767px; + margin: 0 auto; + background: ${colors.black.main}; +`; + +export const Content = styled.div` + margin-top: 132px; +`; + +export const LoadingMessage = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding: 40px 20px; + color: ${colors.white}; + font-size: ${typography.fontSize.base}; +`; diff --git a/src/pages/search/Search.tsx b/src/pages/search/Search.tsx index c1e9da0b..5ba24633 100644 --- a/src/pages/search/Search.tsx +++ b/src/pages/search/Search.tsx @@ -4,14 +4,13 @@ import { BookSearchResult } from '@/components/search/BookSearchResult'; import MostSearchedBooks from '@/components/search/MostSearchedBooks'; import RecentSearchTabs from '@/components/search/RecentSearchTabs'; import SearchBar from '@/components/search/SearchBar'; -import { colors, typography } from '@/styles/global/global'; -import styled from '@emotion/styled'; import { useEffect, useState, useCallback, useRef } from 'react'; import { useSearchParams } from 'react-router-dom'; import leftArrow from '../../assets/common/leftArrow.svg'; import { getSearchBooks, convertToSearchedBooks } from '@/api/books/getSearchBooks'; import { getRecentSearch, type RecentSearchData } from '@/api/recentsearch/getRecentSearch'; import { deleteRecentSearch } from '@/api/recentsearch/deleteRecentSearch'; +import { Wrapper, Header, SearchBarContainer, Content, LoadingMessage } from './Search.styled'; export interface SearchedBook { id: number; @@ -310,56 +309,3 @@ const Search = () => { }; export default Search; - -const Wrapper = styled.div` - display: flex; - position: relative; - flex-direction: column; - min-width: 320px; - max-width: 767px; - height: 100%; - min-height: 100vh; - margin: 0 auto; - background: ${colors.black.main}; -`; - -const Header = styled.div` - display: flex; - width: 100%; - position: fixed; - top: 0; - left: 0; - right: 0; - height: 56px; - max-width: 767px; - margin: 0 auto; - color: ${colors.white}; - font-size: ${typography.fontSize['2xl']}; - font-weight: ${typography.fontWeight['bold']}; - padding: 16px 20px; - background: ${colors.black.main}; - z-index: 1; -`; - -const SearchBarContainer = styled.div` - position: fixed; - top: 56px; - left: 0; - right: 0; - max-width: 767px; - margin: 0 auto; - background: ${colors.black.main}; -`; - -const Content = styled.div` - margin-top: 132px; -`; - -const LoadingMessage = styled.div` - display: flex; - justify-content: center; - align-items: center; - padding: 40px 20px; - color: ${colors.white}; - font-size: ${typography.fontSize.base}; -`; From 9eb2a8644fdb4ca01932b0319c3fdd454d092e15 Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Fri, 2 Jan 2026 00:12:11 +0900 Subject: [PATCH 19/20] =?UTF-8?q?refactor:=20SearchBook=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - SearchBook.styled.ts 파일 생성 - SearchBookGroup.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/searchBook/SearchBook.styled.ts | 9 ++ src/pages/searchBook/SearchBook.tsx | 12 +-- .../searchBook/SearchBookGroup.styled.ts | 80 +++++++++++++++++ src/pages/searchBook/SearchBookGroup.tsx | 87 ++----------------- 4 files changed, 99 insertions(+), 89 deletions(-) create mode 100644 src/pages/searchBook/SearchBookGroup.styled.ts diff --git a/src/pages/searchBook/SearchBook.styled.ts b/src/pages/searchBook/SearchBook.styled.ts index 6b273ed1..79392fa9 100644 --- a/src/pages/searchBook/SearchBook.styled.ts +++ b/src/pages/searchBook/SearchBook.styled.ts @@ -218,3 +218,12 @@ export const EmptySubText = styled.p` font-weight: ${typography.fontWeight.regular}; color: ${colors.grey[100]}; `; + +export const LoadingBox = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding: 32px 20px; + color: ${colors.white}; + font-size: ${typography.fontSize.base}; +`; diff --git a/src/pages/searchBook/SearchBook.tsx b/src/pages/searchBook/SearchBook.tsx index 992772c0..d17dba06 100644 --- a/src/pages/searchBook/SearchBook.tsx +++ b/src/pages/searchBook/SearchBook.tsx @@ -21,6 +21,7 @@ import { EmptyTitle, EmptySubText, FeedPostContainer, + LoadingBox, } from './SearchBook.styled'; import { useNavigate, useParams } from 'react-router-dom'; import leftArrow from '../../assets/common/leftArrow.svg'; @@ -36,8 +37,6 @@ import { getRecruitingRooms, type RecruitingRoomsData } from '@/api/books/getRec import { postSaveBook } from '@/api/books/postSaveBook'; import { Filter } from '@/components/common/Filter'; import FeedPost from '@/components/feed/FeedPost'; -import styled from '@emotion/styled'; -import { colors, typography } from '@/styles/global/global'; import { getFeedsByIsbn, type FeedItem, type FeedSort } from '@/api/feeds/getFeedsByIsbn'; import { usePopupStore } from '@/stores/usePopupStore'; import LoadingSpinner from '@/components/common/LoadingSpinner'; @@ -345,12 +344,3 @@ const SearchBook = () => { }; export default SearchBook; - -const LoadingBox = styled.div` - display: flex; - justify-content: center; - align-items: center; - padding: 32px 20px; - color: ${colors.white}; - font-size: ${typography.fontSize.base}; -`; diff --git a/src/pages/searchBook/SearchBookGroup.styled.ts b/src/pages/searchBook/SearchBookGroup.styled.ts new file mode 100644 index 00000000..2edb94dd --- /dev/null +++ b/src/pages/searchBook/SearchBookGroup.styled.ts @@ -0,0 +1,80 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const Wrapper = styled.div` + display: flex; + position: relative; + flex-direction: column; + justify-content: flex-start; + min-width: 320px; + max-width: 767px; + min-height: 100vh; + height: 100%; + margin: 0 auto; + background-color: ${colors.black.main}; + overflow: hidden; +`; + +export const ContentHeader = styled.div` + display: flex; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.medium}; + color: ${colors.grey[100]}; + border-bottom: 1px solid ${colors.darkgrey.dark}; + margin: 76px 20px 20px 20px; + padding-bottom: 8px; +`; + +export const Content = styled.div` + display: flex; + flex-direction: column; + gap: 20px; + overflow-y: auto; + padding: 0 20px; + margin-bottom: 70px; + width: 100%; +`; + +export const EmptyState = styled.div` + flex: 1; + min-height: 78vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 40px 20px; + margin-bottom: 70px; + color: ${colors.grey[100]}; + text-align: center; +`; + +export const EmptyTitle = styled.p` + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + margin-bottom: 8px; + color: ${colors.white}; +`; + +export const EmptySubText = styled.p` + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + color: ${colors.grey[100]}; +`; + +export const BottomButton = styled.button` + position: fixed; + bottom: 0; + left: 0; + right: 0; + width: 100%; + min-width: 320px; + max-width: 767px; + margin: 0 auto; + height: 50px; + background-color: ${colors.purple.main}; + color: ${colors.white}; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + border: none; + z-index: 10; +`; diff --git a/src/pages/searchBook/SearchBookGroup.tsx b/src/pages/searchBook/SearchBookGroup.tsx index 0de441b6..2eb36765 100644 --- a/src/pages/searchBook/SearchBookGroup.tsx +++ b/src/pages/searchBook/SearchBookGroup.tsx @@ -1,10 +1,17 @@ import TitleHeader from '@/components/common/TitleHeader'; -import { colors, typography } from '@/styles/global/global'; -import styled from '@emotion/styled'; import leftArrow from '../../assets/common/leftArrow.svg'; import { useNavigate, useLocation } from 'react-router-dom'; import { GroupCard } from '@/components/group/GroupCard'; import { type RecruitingRoomsData } from '@/api/books/getRecruitingRooms'; +import { + Wrapper, + ContentHeader, + Content, + EmptyState, + EmptyTitle, + EmptySubText, + BottomButton, +} from './SearchBookGroup.styled'; interface LocationState { recruitingRooms: RecruitingRoomsData; @@ -81,79 +88,3 @@ const SearchBookGroup = () => { }; export default SearchBookGroup; - -const Wrapper = styled.div` - display: flex; - position: relative; - flex-direction: column; - justify-content: flex-start; - min-width: 320px; - max-width: 767px; - min-height: 100vh; - height: 100%; - margin: 0 auto; - background-color: ${colors.black.main}; - overflow: hidden; -`; -const ContentHeader = styled.div` - display: flex; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.medium}; - color: ${colors.grey[100]}; - border-bottom: 1px solid ${colors.darkgrey.dark}; - margin: 76px 20px 20px 20px; - padding-bottom: 8px; -`; - -const Content = styled.div` - display: flex; - flex-direction: column; - gap: 20px; - overflow-y: auto; - padding: 0 20px; - margin-bottom: 70px; - width: 100%; -`; - -const EmptyState = styled.div` - flex: 1; - min-height: 78vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 40px 20px; - margin-bottom: 70px; - color: ${colors.grey[100]}; - text-align: center; -`; - -const EmptyTitle = styled.p` - font-size: ${typography.fontSize.lg}; - font-weight: ${typography.fontWeight.semibold}; - margin-bottom: 8px; - color: ${colors.white}; -`; - -const EmptySubText = styled.p` - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.regular}; - color: ${colors.grey[100]}; -`; -const BottomButton = styled.button` - position: fixed; - bottom: 0; - left: 0; - right: 0; - width: 100%; - min-width: 320px; - max-width: 767px; - margin: 0 auto; - height: 50px; - background-color: ${colors.purple.main}; - color: ${colors.white}; - font-size: ${typography.fontSize.lg}; - font-weight: ${typography.fontWeight.semibold}; - border: none; - z-index: 10; -`; From 5c342bf6560f0693a4b0ddfdee67e4eae33e61e7 Mon Sep 17 00:00:00 2001 From: Ji Ho June <129824629+ho0010@users.noreply.github.com> Date: Fri, 2 Jan 2026 00:17:33 +0900 Subject: [PATCH 20/20] =?UTF-8?q?refactor:=20Guide=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= =?UTF-8?q?=EC=99=80=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Guide.styled.ts 파일 생성 - 일관성을 위해 Guide 폴더안으로 위치 이동 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선 --- src/pages/guide/Guide.styled.ts | 123 ++++++++++++++++++++++++++++ src/pages/{ => guide}/Guide.tsx | 137 ++++---------------------------- src/pages/index.tsx | 2 +- 3 files changed, 138 insertions(+), 124 deletions(-) create mode 100644 src/pages/guide/Guide.styled.ts rename src/pages/{ => guide}/Guide.tsx (68%) diff --git a/src/pages/guide/Guide.styled.ts b/src/pages/guide/Guide.styled.ts new file mode 100644 index 00000000..2278d5e9 --- /dev/null +++ b/src/pages/guide/Guide.styled.ts @@ -0,0 +1,123 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; + +export const Container = styled.div<{ isDragging?: boolean }>` + display: flex; + flex-direction: column; + min-width: 320px; + max-width: 767px; + min-height: 100vh; + margin: 0 auto; + align-items: center; + justify-content: center; + background: ${colors.black.main}; + color: ${colors.white}; + user-select: none; + cursor: ${({ isDragging }) => (isDragging ? 'grabbing' : 'grab')}; +`; + +export const Header = styled.div<{ active: boolean }>` + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1100; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + max-width: 767px; + margin: 0 auto; + padding: 16px 20px; + background-color: ${colors.black.main}; + + .next-button { + width: 49px; + height: 28px; + padding: 4px 12px; + border-radius: 20px; + background-color: ${colors.purple.main}; + color: ${colors.white}; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.semibold}; + line-height: 20px; + text-align: center; + margin-left: auto; + cursor: pointer; + } +`; + +export const Content = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 66px 20px 0 20px; + gap: 20px; + flex: 1; + min-height: calc(100vh - 66px); +`; + +export const Title = styled.div` + display: flex; + flex-direction: column; + align-items: center; + height: 135px; + gap: 20px; +`; + +export const TitleText = styled.div` + color: ${colors.white}; + font-size: ${typography.fontSize['xl']}; + font-weight: ${typography.fontWeight.bold}; + line-height: 24px; +`; + +export const Description = styled.div` + color: ${colors.grey[100]}; + font-size: ${typography.fontSize.base}; + font-weight: ${typography.fontWeight.semibold}; + line-height: 24px; + text-align: center; +`; + +export const MockupContainer = styled.div` + img { + width: 220px; + height: 453.052px; + } +`; + +export const BottomSection = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + gap: 20px; + min-width: 320px; + max-width: 767px; + padding: 0 20px; +`; + +export const Indicators = styled.div` + display: flex; + justify-content: center; + left: 50%; +`; + +export const Indicator = styled.div<{ active: boolean }>` + width: 4px; + height: 4px; + background: ${({ active }) => (active ? colors.white : colors.grey[300])}; + border-radius: 50%; + margin: 0 6px; + cursor: pointer; +`; + +export const SkipButton = styled.div` + color: ${colors.grey[200]}; + font-size: ${typography.fontSize.xs}; + font-weight: ${typography.fontWeight.regular}; + line-height: normal; + cursor: pointer; +`; diff --git a/src/pages/Guide.tsx b/src/pages/guide/Guide.tsx similarity index 68% rename from src/pages/Guide.tsx rename to src/pages/guide/Guide.tsx index 96383254..a7a1ff73 100644 --- a/src/pages/Guide.tsx +++ b/src/pages/guide/Guide.tsx @@ -1,7 +1,5 @@ import { useState, useRef, useEffect } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; -import styled from '@emotion/styled'; -import { colors, typography } from '@/styles/global/global'; import guide1 from '@/assets/signup/guide1.svg'; import guide2 from '@/assets/signup/guide2.svg'; @@ -10,6 +8,20 @@ import guide4 from '@/assets/signup/guide4.svg'; import guide5 from '@/assets/signup/guide5.svg'; import guide6 from '@/assets/signup/guide6.svg'; +import { + Container, + Header, + Content, + Title, + TitleText, + Description, + MockupContainer, + BottomSection, + Indicators, + Indicator, + SkipButton, +} from './Guide.styled'; + interface GuideStep { id: number; title: string; @@ -197,124 +209,3 @@ const Guide = () => { }; export default Guide; - -const Container = styled.div<{ isDragging?: boolean }>` - display: flex; - flex-direction: column; - min-width: 320px; - max-width: 767px; - min-height: 100vh; - margin: 0 auto; - align-items: center; - justify-content: center; - background: ${colors.black.main}; - color: ${colors.white}; - user-select: none; - cursor: ${({ isDragging }) => (isDragging ? 'grabbing' : 'grab')}; -`; - -const Header = styled.div<{ active: boolean }>` - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1100; - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; - max-width: 767px; - margin: 0 auto; - padding: 16px 20px; - background-color: ${colors.black.main}; - - .next-button { - width: 49px; - height: 28px; - padding: 4px 12px; - border-radius: 20px; - background-color: ${colors.purple.main}; - color: ${colors.white}; - font-size: ${typography.fontSize.sm}; - font-weight: ${typography.fontWeight.semibold}; - line-height: 20px; - text-align: center; - margin-left: auto; - cursor: pointer; - } -`; - -const Content = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 66px 20px 0 20px; - gap: 20px; - flex: 1; - min-height: calc(100vh - 66px); -`; - -const Title = styled.div` - display: flex; - flex-direction: column; - align-items: center; - height: 135px; - gap: 20px; -`; - -const TitleText = styled.div` - color: ${colors.white}; - font-size: ${typography.fontSize['xl']}; - font-weight: ${typography.fontWeight.bold}; - line-height: 24px; -`; - -const Description = styled.div` - color: ${colors.grey[100]}; - font-size: ${typography.fontSize.base}; - font-weight: ${typography.fontWeight.semibold}; - line-height: 24px; - text-align: center; -`; - -const MockupContainer = styled.div` - img { - width: 220px; - height: 453.052px; - } -`; - -const BottomSection = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: column; - gap: 20px; - min-width: 320px; - max-width: 767px; - padding: 0 20px; -`; - -const Indicators = styled.div` - display: flex; - justify-content: center; - left: 50%; -`; - -const Indicator = styled.div<{ active: boolean }>` - width: 4px; - height: 4px; - background: ${({ active }) => (active ? colors.white : colors.grey[300])}; - border-radius: 50%; - margin: 0 6px; - cursor: pointer; -`; - -const SkipButton = styled.div` - color: ${colors.grey[200]}; - font-size: ${typography.fontSize.xs}; - font-weight: ${typography.fontWeight.regular}; - line-height: normal; - cursor: pointer; -`; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f74607bb..2e74551a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -38,7 +38,7 @@ import EditPage from './mypage/EditPage'; import Notice from './notice/Notice'; import ParticipatedGroupDetail from './groupDetail/ParticipatedGroupDetail'; import GroupMembers from './groupMembers/GroupMembers'; -import Guide from './Guide'; +import Guide from './guide/Guide'; import AIWrite from './aiwrite/AIWrite'; const Router = () => {