민심 키워드
@@ -78,7 +78,7 @@ export const SmallStockCard = ({ return ({symbolName}
diff --git a/src/components/Common/Common.Style.ts b/src/components/Common/Common.Style.ts new file mode 100644 index 00000000..d011e57c --- /dev/null +++ b/src/components/Common/Common.Style.ts @@ -0,0 +1,85 @@ +import styled from '@emotion/styled'; +import { theme } from '../../styles/themes'; +import { AbsoluteDivProps, ButtonDivProps, FlexDivProps, ImgDivProps } from './Common.Props'; + +const FlexDiv = styled.div( + ({ + flexDirection = 'row', + alignItems = 'normal', + justifyContent = 'normal', + padding = '0', + width = 'auto', + gap = '0', + }: FlexDivProps) => ({ + display: 'flex', + flexDirection: flexDirection, + alignItems: alignItems, + justifyContent: justifyContent, + padding: padding, + width: width, + gap: gap, + }), +); + +const ButtonDiv = styled.div( + ({ gap = '0', padding = '0', background, width = 'auto', height = 'auto', radius = 'auto' }: ButtonDivProps) => ({ + display: 'flex', + padding: padding, + background: theme.colors[background ?? 'transparent'], + cursor: 'pointer', + gap: gap, + width: width, + height: height, + borderRadius: radius, + }), +); + +const RelativeDiv = styled.div({ + position: 'relative', +}); + +const AbsoluteDiv = styled.div( + { position: 'absolute' }, + ({ + width = 'auto', + height = 'auto', + top = 'auto', + bottom = 'auto', + left = 'auto', + right = 'auto', + }: AbsoluteDivProps) => ({ + width: width, + height: height, + top: top, + bottom: bottom, + left: left, + right: right, + }), +); + +const ImgDiv = styled.img(({ width = 'auto', height = 'auto', objectFit = 'contain' }: ImgDivProps) => ({ + width: width, + height: height, + objectFit: objectFit, +})); + +const Container = styled.div({ + display: 'flex', + flexDirection: 'column', + boxSizing: 'border-box', + width: '100%', + height: '100%', + justifyContent: 'center', + alignItems: 'center', + overflow: 'hidden', + + ['>img']: { + objectFit: 'contain', + objectPosition: 'center', + + width: '100%', + height: '100%', + }, +}); + +export { FlexDiv, ButtonDiv, RelativeDiv, AbsoluteDiv, ImgDiv, Container }; diff --git a/src/components/Common/Common.tsx b/src/components/Common/Common.tsx index 38ca9e2a..81e314b3 100644 --- a/src/components/Common/Common.tsx +++ b/src/components/Common/Common.tsx @@ -1,69 +1,9 @@ import styled from '@emotion/styled'; import { media, theme, themeColor, themeFontSizeBody, themeTextType } from '../../styles/themes'; -import { AbsoluteDivProps, ButtonDivProps, FlexDivProps, ImgDivProps } from './Common.Props'; -const FlexDiv = styled.div( - ({ - flexDirection = 'row', - alignItems = 'normal', - justifyContent = 'normal', - padding = '0', - width = 'auto', - gap = '0', - }: FlexDivProps) => ({ - display: 'flex', - flexDirection: flexDirection, - alignItems: alignItems, - justifyContent: justifyContent, - padding: padding, - width: width, - gap: gap, - }), -); +export { FlexDiv, ButtonDiv, RelativeDiv, AbsoluteDiv, ImgDiv, Container } from './Common.Style'; -const ButtonDiv = styled.div( - ({ gap = '0', padding = '0', background, width = 'auto', height = 'auto', radius = 'auto' }: ButtonDivProps) => ({ - display: 'flex', - padding: padding, - background: theme.colors[background ?? 'transparent'], - cursor: 'pointer', - gap: gap, - width: width, - height: height, - borderRadius: radius, - }), -); - -const RelativeDiv = styled.div({ - position: 'relative', -}); - -const AbsoluteDiv = styled.div( - { position: 'absolute' }, - ({ - width = 'auto', - height = 'auto', - top = 'auto', - bottom = 'auto', - left = 'auto', - right = 'auto', - }: AbsoluteDivProps) => ({ - width: width, - height: height, - top: top, - bottom: bottom, - left: left, - right: right, - }), -); - -const ImgDiv = styled.img(({ width = 'auto', height = 'auto', objectFit = 'contain' }: ImgDivProps) => ({ - width: width, - height: height, - objectFit: objectFit, -})); - -const StyledSVG = ({ +export const StyledSVG = ({ svg, fill, stroke, @@ -94,24 +34,3 @@ const StyledSVG = ({ }); return ; }; - -const Container = styled.div({ - display: 'flex', - flexDirection: 'column', - boxSizing: 'border-box', - width: '100%', - height: '100%', - justifyContent: 'center', - alignItems: 'center', - overflow: 'hidden', - - ['>img']: { - objectFit: 'contain', - objectPosition: 'center', - - width: '100%', - height: '100%', - }, -}); - -export { FlexDiv, ButtonDiv, RelativeDiv, AbsoluteDiv, ImgDiv, StyledSVG, Container }; diff --git a/src/components/Common/ContentsItem.Style.ts b/src/components/Common/ContentsItem.Style.ts deleted file mode 100644 index 5b1fbecf..00000000 --- a/src/components/Common/ContentsItem.Style.ts +++ /dev/null @@ -1,74 +0,0 @@ -import { css } from '@emotion/react'; -import styled from '@emotion/styled'; -import { media, theme, themeColor } from '@styles/themes'; - -const ContentsItemContainer = styled.div({ - display: 'flex', - flexDirection: 'column', - gap: '24px', - - [media[0]]: { - gap: '18px', - }, -}); - -const ContentsItemTitle = styled.div<{ color?: themeColor }>(({ color }) => - css({ - display: 'flex', - flexDirection: 'column', - alignItems: 'flex-start', - gap: '8px', - color: theme.colors.grayscale10, - ...theme.font.title20Semibold, - - ['.btn_info']: { - height: '0.8em', - marginLeft: '4px', - cursor: 'pointer', - }, - - ['svg']: { - width: 'auto', - height: '0.9em', - fill: color ? theme.colors[color] : '', - }, - - [media[0]]: { - gap: '6px', - - ['.btn_info']: { - marginLeft: '0px', - }, - }, - }), -); - -const ContentsItemContent = styled.div({ - display: 'flex', - flexDirection: 'column', - gap: '18px', - margin: '0 32px', - - [media[0]]: { - margin: '0 0px', - }, -}); - -export const DetailText = styled.div({ - ...theme.font.detail12Medium, - color: theme.colors.sub_gray6, -}); - -export const TitleDetailText = styled.div({ - ...theme.font.body14Medium, - color: theme.colors.sub_gray8, -}); - -export const ContentsItemTitleSeparator = styled.div({ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - width: '100%', -}); - -export { ContentsItemContainer, ContentsItemTitle, ContentsItemContent }; diff --git a/src/components/Common/Header.Style.ts b/src/components/Common/Header.Style.ts new file mode 100644 index 00000000..bb90e787 --- /dev/null +++ b/src/components/Common/Header.Style.ts @@ -0,0 +1,38 @@ +import styled from '@emotion/styled'; +import { theme } from '@styles/themes'; + +const HeaderContainer = styled.div({ + paddingBottom: '8px', + borderBottom: `4px solid ${theme.colors.sub_gray11}`, +}); + +const HeaderContents = styled.div({ + position: 'relative', + display: 'flex', + alignItems: 'center', + padding: '8px 20px', + gap: '12px', + + ['>p']: { + position: 'absolute', + left: '50%', + transform: 'translateX(-50%)', + ...theme.font.body18Semibold, + color: theme.colors.sub_white, + margin: '0', + }, + + ['>svg']: { + width: '32px', + height: 'auto', + aspectRatio: '1 / 1', + cursor: 'pointer', + fill: theme.colors.sub_gray5, + }, + + ['>span']: { + flexGrow: 1, + }, +}); + +export { HeaderContainer, HeaderContents }; diff --git a/src/components/Common/Header.tsx b/src/components/Common/Header.tsx index f13b475a..dbaafc09 100644 --- a/src/components/Common/Header.tsx +++ b/src/components/Common/Header.tsx @@ -1,42 +1,7 @@ -import styled from '@emotion/styled'; import { useNavigate } from 'react-router-dom'; -import { theme } from '@styles/themes'; import ArrowLeftSVG from '@assets/arrowLeft.svg?react'; import CloseSVG from '@assets/close.svg?react'; - -const HeaderContainer = styled.div({ - paddingBottom: '8px', - borderBottom: `4px solid ${theme.colors.sub_gray11}`, -}); - -const HeaderContents = styled.div({ - position: 'relative', - display: 'flex', - alignItems: 'center', - padding: '8px 20px', - gap: '12px', - - ['>p']: { - position: 'absolute', - left: '50%', - transform: 'translateX(-50%)', - ...theme.font.body18Semibold, - color: theme.colors.sub_white, - margin: '0', - }, - - ['>svg']: { - width: '32px', - height: 'auto', - aspectRatio: '1 / 1', - cursor: 'pointer', - fill: theme.colors.sub_gray5, - }, - - ['>span']: { - flexGrow: 1, - }, -}); +import { HeaderContainer, HeaderContents } from './Header.Style'; const Header = ({ title, diff --git a/src/components/Common/ScrollTopButton/ScrollTopButton.Style.ts b/src/components/Common/ScrollTopButton/ScrollTopButton.Style.ts new file mode 100644 index 00000000..236998ad --- /dev/null +++ b/src/components/Common/ScrollTopButton/ScrollTopButton.Style.ts @@ -0,0 +1,31 @@ +import styled from '@emotion/styled'; +import { theme } from '@styles/themes'; + +const ScrollTopButtonContainer = styled.div( + ({ isHidden }: { isHidden: boolean }) => ({ + display: isHidden ? 'none' : 'flex', + }), + { + position: 'fixed', + bottom: '96px', + right: '0', + width: '58px', + height: '58px', + margin: '20px', + borderRadius: '50%', + alignItems: 'center', + justifyContent: 'center', + background: 'rgba(52, 58, 64, 0.5)', + boxShadow: '5px 5px 10px rgba(0, 0, 0, 0.7)', + backdropFilter: 'blur(10px)', + + ['>svg']: { + width: '32px', + height: 'auto', + aspectRatio: '1 / 1', + fill: theme.colors.sub_white, + }, + }, +); + +export { ScrollTopButtonContainer }; diff --git a/src/components/Common/ScrollTopButton/ScrollTopButton.tsx b/src/components/Common/ScrollTopButton/ScrollTopButton.tsx index 01c5d41b..d867b742 100644 --- a/src/components/Common/ScrollTopButton/ScrollTopButton.tsx +++ b/src/components/Common/ScrollTopButton/ScrollTopButton.tsx @@ -1,34 +1,6 @@ -import styled from '@emotion/styled'; import { useEffect, useState } from 'react'; -import { theme } from '@styles/themes'; import ArrowUpSVG from '@assets/icons/arrowUp.svg?react'; - -const ScrollTopButtonContainer = styled.div( - ({ isHidden }: { isHidden: boolean }) => ({ - display: isHidden ? 'none' : 'flex', - }), - { - position: 'fixed', - bottom: '96px', - right: '0', - width: '58px', - height: '58px', - margin: '20px', - borderRadius: '50%', - alignItems: 'center', - justifyContent: 'center', - background: 'rgba(52, 58, 64, 0.5)', - boxShadow: '5px 5px 10px rgba(0, 0, 0, 0.7)', - backdropFilter: 'blur(10px)', - - ['>svg']: { - width: '32px', - height: 'auto', - aspectRatio: '1 / 1', - fill: theme.colors.sub_white, - }, - }, -); +import { ScrollTopButtonContainer } from './ScrollTopButton.Style'; const ScrollTopButton = () => { const [isScrolled, setIsScrolled] = useState(false); diff --git a/src/components/Event/Disquiet.Style.ts b/src/components/Event/Disquiet.Style.ts index 43dcfd88..4f496d7a 100644 --- a/src/components/Event/Disquiet.Style.ts +++ b/src/components/Event/Disquiet.Style.ts @@ -23,7 +23,7 @@ const elevator = keyframes({ }, }); -export const DisquietViewStyled = styled.div({ +const DisquietViewStyled = styled.div({ position: 'absolute', top: 0, right: 300, @@ -39,7 +39,7 @@ export const DisquietViewStyled = styled.div({ animation: shiny + ' 12s ease-in-out 1s infinite', }); -export const DisquietViewContainer = styled.div({ +const DisquietViewContainer = styled.div({ position: 'absolute', top: '0', right: '0', @@ -89,7 +89,7 @@ export const DisquietViewContainer = styled.div({ }, }); -export const DisquietViewTitleContainer = styled.div({ +const DisquietViewTitleContainer = styled.div({ display: 'flex', flexDirection: 'column', gap: '12px', @@ -114,3 +114,5 @@ export const DisquietViewTitleContainer = styled.div({ }, }, }); + +export { DisquietViewStyled, DisquietViewContainer, DisquietViewTitleContainer }; diff --git a/src/components/Lab/Common.Style.ts b/src/components/Lab/Common.Style.ts deleted file mode 100644 index de6d2ab7..00000000 --- a/src/components/Lab/Common.Style.ts +++ /dev/null @@ -1,159 +0,0 @@ -import styled from '@emotion/styled'; -import { theme } from '@styles/themes'; - -export const Container = styled.div` - background: black; - color: ${theme.colors.sub_white}; - display: flex; - flex-direction: column; - height: 100vh; -`; - -export const TopBar = styled.div<{ statusRate: number }>` - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 64px; - padding: 24px; - box-sizing: border-box; - border-bottom: 4px solid ${theme.colors.sub_gray11}; - - &::before { - position: absolute; - bottom: -4px; - left: 0; - background: ${theme.colors.sub_gray9}; - width: ${({ statusRate }) => `${statusRate}%`}; - height: 4px; - content: ''; - } -`; - -export const BackIcon = styled.div` - position: absolute; - left: 20px; - top: 50%; - transform: translateY(-50%); - display: flex; - align-items: center; - padding-left: 8px; -`; - -export const TopBarTitle = styled.div` - ${theme.font.body18Semibold}; - color: ${theme.colors.sub_gray5}; -`; - -export const TabContainer = styled.div` - border-bottom: 1px solid ${theme.colors.sub_gray6}; - padding: 0 24px; -`; - -export const InnerContainer = styled.div` - padding: 24px; - padding-bottom: 120px; - overflow-y: auto; - justify-content: space-between; -`; - -export const Title = styled.div` - ${theme.font.title20Semibold} - margin-bottom: 12px; -`; - -export const Description = styled.p` - ${theme.font.body14Medium}; - color: ${theme.colors.sub_gray6}; - margin-bottom: 36px; -`; - -export const NavButtonContainer = styled.div` - display: flex; - justify-content: space-between; - margin-top: 100px; -`; - -export const NavButton = styled.button<{ next?: boolean; active?: boolean }>` - ${theme.font.body18Semibold}; - flex: 1; - padding: 12px; - margin: 0 4px; - border-radius: 8px; - border: none; - background: ${({ next, active }) => - active ? theme.colors.sub_blue6 : next ? theme.colors.sub_gray8 : theme.colors.sub_gray11}; - color: ${({ next, active }) => - active ? theme.colors.sub_white : next ? theme.colors.sub_black : theme.colors.sub_gray5}; -`; - -export const IndustryTag = styled.div<{ selected: boolean }>` - padding: 8px 16px; - background: ${({ selected }) => (selected ? theme.colors.sub_blue6 : theme.colors.sub_gray10)}; - color: ${({ selected }) => (selected ? theme.colors.sub_white : theme.colors.sub_gray6)}; - border-radius: 50px; -`; - -export const SearchInput = styled.input` - background: transparent; - border: none; - outline: none; - flex: 1; - color: white; - - &::placeholder { - ${theme.font.body16Medium} - color: ${theme.colors.sub_gray7}; - } -`; - -export const SearchIconWrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - color: ${theme.colors.sub_gray8}; -`; - -export const SearchBar = styled.div` - background: ${theme.colors.sub_gray11}; - color: white; - border-radius: 8px; - display: flex; - align-items: center; - padding: 10px 12px; -`; - -export const ToastStyle = styled.div` - ${theme.font.detail12Semibold} - color:${theme.colors.sub_gray2}; - position: fixed; - bottom: 100px; - left: 50%; - transform: translateX(-50%); - padding: 12px 16px; - background: rgba(0, 0, 0, 0.8); - border: 1px solid rgba(73, 80, 87, 0.5); - border-radius: 5px; - z-index: 1000; - - max-width: 80vw; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - display: flex; - align-items: center; - justify-content: center; -`; - -export const Divider = styled.div` - background-color: ${theme.colors.sub_gray11}; - width: calc(100% + 48px); - border: none; - height: 4px; - margin: 24px -24px; -`; - -export const StatusTitle = styled.p` - ${theme.font.title20Medium} -`; diff --git a/src/components/Loading/Loading.Style.ts b/src/components/Loading/Loading.Style.ts new file mode 100644 index 00000000..e5d2d48c --- /dev/null +++ b/src/components/Loading/Loading.Style.ts @@ -0,0 +1,67 @@ +import styled from '@emotion/styled'; +import { theme } from '@styles/themes'; + +const LoadingContainer = styled.div( + ({ top, bottom }: { top?: string; bottom?: string }) => ({ + top: top ?? 0, + bottom: bottom ?? 0, + }), + { + position: 'fixed', + bottom: '96px', + left: 0, + right: 0, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + background: 'linear-gradient(180deg, rgba(16, 16, 16, 0.4) 0%, #101010DD 81.02%)', + backdropFilter: 'blur(2.5px)', // Note: backdrop-filter has minimal browser support + zIndex: 9999, + + ['>svg']: { + position: 'absolute', + width: '110%', + height: 'auto', + right: '0', + top: '0', + }, + }, +); + +const LoadingContent = styled.div({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + gap: '16px', + + ['>video']: { + width: '80px', + height: 'auto', + aspectRatio: '1 / 1', + }, + + ['>div']: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + gap: '8px', + + ['>p']: { + margin: '0', + + ['&.title']: { + ...theme.font.title20Semibold, + color: theme.colors.sub_gray4, + }, + + ['&.desc']: { + ...theme.font.body16Regular, + color: theme.colors.sub_gray6, + }, + }, + }, +}); + +export { LoadingContainer, LoadingContent }; diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx index bc4fe750..b4972fe2 100644 --- a/src/components/Loading/Loading.tsx +++ b/src/components/Loading/Loading.tsx @@ -1,70 +1,6 @@ -import styled from '@emotion/styled'; -import { theme } from '@styles/themes'; import LoadingWEBM from '@assets/Loading.webm'; import BackgroundSVG from '@assets/background.svg?react'; - -const LoadingContainer = styled.div( - ({ top, bottom }: { top?: string; bottom?: string }) => ({ - top: top ?? 0, - bottom: bottom ?? 0, - }), - { - position: 'fixed', - bottom: '96px', - left: 0, - right: 0, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - background: 'linear-gradient(180deg, rgba(16, 16, 16, 0.4) 0%, #101010DD 81.02%)', - backdropFilter: 'blur(2.5px)', // Note: backdrop-filter has minimal browser support - zIndex: 9999, - - ['>svg']: { - position: 'absolute', - width: '110%', - height: 'auto', - right: '0', - top: '0', - }, - }, -); - -const LoadingContent = styled.div({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - gap: '16px', - - ['>video']: { - width: '80px', - height: 'auto', - aspectRatio: '1 / 1', - }, - - ['>div']: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - gap: '8px', - - ['>p']: { - margin: '0', - - ['&.title']: { - ...theme.font.title20Semibold, - color: theme.colors.sub_gray4, - }, - - ['&.desc']: { - ...theme.font.body16Regular, - color: theme.colors.sub_gray6, - }, - }, - }, -}); +import { LoadingContainer, LoadingContent } from './Loading.Style'; const Loading = ({ isLoading, title, desc }: { isLoading?: boolean; title: string; desc?: string }) => { if (!isLoading) { diff --git a/src/components/Modal/AboutReportClass/AboutReportClass.Style.ts b/src/components/Modal/AboutReportClass/AboutReportClass.Style.ts new file mode 100644 index 00000000..bcbf9950 --- /dev/null +++ b/src/components/Modal/AboutReportClass/AboutReportClass.Style.ts @@ -0,0 +1,107 @@ +import styled from '@emotion/styled'; +import { theme } from '@styles/themes'; + +const Container = styled.div({ + display: 'flex', + flexDirection: 'column', + gap: '16px', +}); + +const Header = styled.div({ + display: 'flex', + flexDirection: 'column', + gap: '4px', + padding: '14px 10px', + borderBottom: `1px solid ${theme.colors.sub_gray10}`, + margin: '0 20px', + + ['>p']: { + margin: '0', + wordBreak: 'keep-all', + + ['&.title']: { + ...theme.font.body18Semibold, + color: theme.colors.sub_gray1, + + ['>svg']: { + width: '24px', + height: 'auto', + aspectRatio: '1 / 1', + fill: theme.colors.sub_white, + flexShrink: '0', + verticalAlign: 'middle', + }, + }, + + ['&.description']: { + ...theme.font.body14Medium, + color: theme.colors.sub_gray7, + }, + }, +}); + +const TabContainer = styled.div({ + display: 'flex', + gap: '16px', + overflow: 'auto', + padding: '0 20px', + + msOverflowStyle: 'none', + ['&::-webkit-scrollbar']: { + display: 'none', + }, +}); + +const TabItem = styled.span( + ({ isSelected }: { isSelected?: boolean }) => ({ + background: isSelected ? theme.colors.sub_blue6 : theme.colors.sub_gray10, + color: isSelected ? theme.colors.sub_white : theme.colors.sub_gray6, + }), + { + position: 'relative', + ...theme.font.body14Medium, + whiteSpace: 'nowrap', + padding: '8px 16px', + borderRadius: '999px', + }, +); + +const Content = styled.div({ + display: 'flex', + flexDirection: 'column', + padding: '20px 10px 12px', + margin: '0 20px', + background: theme.colors.sub_gray11, + borderRadius: '4px', + gap: '20px', + + ['>span.divider']: { + width: '100%', + height: '1px', + background: theme.colors.sub_gray10, + }, +}); + +const ContentHeader = styled.div({ + display: 'flex', + flexDirection: 'column', + gap: '8px', + padding: '0 8px', + + ['>p']: { + margin: '0', + + ['&.title']: { + ...theme.font.body14Semibold, + color: theme.colors.sub_gray2, + }, + ['&.description']: { + ...theme.font.detail12Medium, + color: theme.colors.sub_gray5, + lineHeight: '175%', + whiteSpace: 'pre-line', + }, + }, +}); + +export { Container, Header, TabContainer, TabItem, Content, ContentHeader }; diff --git a/src/components/Modal/AboutReportClass/AboutReportClass.tsx b/src/components/Modal/AboutReportClass/AboutReportClass.tsx index 1ead78e8..601b0be6 100644 --- a/src/components/Modal/AboutReportClass/AboutReportClass.tsx +++ b/src/components/Modal/AboutReportClass/AboutReportClass.tsx @@ -1,4 +1,3 @@ -import styled from '@emotion/styled'; import { useState } from 'react'; import ReportClassChart from '@components/Lab/ReportClassChart/ReportClassChart'; import { @@ -6,111 +5,8 @@ import { reportClassList, reportClassMap, } from '@components/Lab/ReportClassChart/ReportClassChart.Type'; -import { theme } from '@styles/themes'; import QuestionMarkSVG from '@assets/icons/questionMark.svg?react'; - -const Container = styled.div({ - display: 'flex', - flexDirection: 'column', - gap: '16px', -}); - -const Header = styled.div({ - display: 'flex', - flexDirection: 'column', - gap: '4px', - padding: '14px 10px', - borderBottom: `1px solid ${theme.colors.sub_gray10}`, - margin: '0 20px', - - ['>p']: { - margin: '0', - wordBreak: 'keep-all', - - ['&.title']: { - ...theme.font.body18Semibold, - color: theme.colors.sub_gray1, - - ['>svg']: { - width: '24px', - height: 'auto', - aspectRatio: '1 / 1', - fill: theme.colors.sub_white, - flexShrink: '0', - verticalAlign: 'middle', - }, - }, - - ['&.description']: { - ...theme.font.body14Medium, - color: theme.colors.sub_gray7, - }, - }, -}); - -const TabContainer = styled.div({ - display: 'flex', - gap: '16px', - overflow: 'auto', - padding: '0 20px', - - msOverflowStyle: 'none', - ['&::-webkit-scrollbar']: { - display: 'none', - }, -}); - -const TabItem = styled.span( - ({ isSelected }: { isSelected?: boolean }) => ({ - background: isSelected ? theme.colors.sub_blue6 : theme.colors.sub_gray10, - color: isSelected ? theme.colors.sub_white : theme.colors.sub_gray6, - }), - { - position: 'relative', - ...theme.font.body14Medium, - whiteSpace: 'nowrap', - padding: '8px 16px', - borderRadius: '999px', - }, -); - -const Content = styled.div({ - display: 'flex', - flexDirection: 'column', - padding: '20px 10px 12px', - margin: '0 20px', - background: theme.colors.sub_gray11, - borderRadius: '4px', - gap: '20px', - - ['>span.divider']: { - width: '100%', - height: '1px', - background: theme.colors.sub_gray10, - }, -}); - -const ContentHeader = styled.div({ - display: 'flex', - flexDirection: 'column', - gap: '8px', - padding: '0 8px', - - ['>p']: { - margin: '0', - - ['&.title']: { - ...theme.font.body14Semibold, - color: theme.colors.sub_gray2, - }, - ['&.description']: { - ...theme.font.detail12Medium, - color: theme.colors.sub_gray5, - lineHeight: '175%', - whiteSpace: 'pre-line', - }, - }, -}); +import { Container, Content, ContentHeader, Header, TabContainer, TabItem } from './AboutReportClass.Style'; const AboutReportClass = () => { const [isSelected, setIsSelected] = useState
-
실험이 끝났을 때 수익률이 0이상인 실험을,
diff --git a/src/components/Modal/AboutReportPattern/AboutReportPattern.Style.ts b/src/components/Modal/AboutReportPattern/AboutReportPattern.Style.ts
new file mode 100644
index 00000000..9c9c86d3
--- /dev/null
+++ b/src/components/Modal/AboutReportPattern/AboutReportPattern.Style.ts
@@ -0,0 +1,107 @@
+import styled from '@emotion/styled';
+import { theme } from '@styles/themes';
+
+const Container = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '16px',
+});
+
+const Header = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '16px',
+ padding: '14px 10px',
+ margin: '0 20px',
+
+ ['>p']: {
+ margin: '0',
+ wordBreak: 'keep-all',
+
+ ['&.title']: {
+ ...theme.font.body18Semibold,
+ color: theme.colors.sub_gray1,
+
+ ['>svg']: {
+ width: '24px',
+ height: 'auto',
+ aspectRatio: '1 / 1',
+ fill: theme.colors.sub_white,
+ flexShrink: '0',
+ verticalAlign: 'middle',
+ },
+ },
+ },
+
+ ['>span.divider']: {
+ width: '100%',
+ height: '1px',
+ background: theme.colors.sub_gray10,
+ },
+});
+
+const HeaderContents = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '8px',
+});
+
+const HeaderContentsItem = styled.div({
+ display: 'flex',
+ alignItems: 'center',
+ gap: '16px',
+
+ ['>span']: {
+ width: '72px',
+ padding: '4px',
+ borderRadius: '999px',
+ background: theme.colors.sub_gray11,
+ ...theme.font.body14Semibold,
+ textAlign: 'center',
+
+ ['&.roi']: {
+ color: theme.colors.sub_blue6,
+ },
+ ['&.score']: {
+ color: theme.colors.sub_red,
+ },
+ },
+
+ ['>div']: {
+ display: 'flex',
+ flexDirection: 'column',
+
+ ['>div']: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '10px',
+
+ ['>span']: {
+ ...theme.font.body14Medium,
+ color: theme.colors.sub_gray5,
+ whiteSpace: 'nowrap',
+ ['&.condition']: {
+ width: '72px',
+ },
+ },
+ },
+ },
+});
+
+const Content = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ padding: '8px 10px 12px',
+ margin: '0 20px',
+ background: theme.colors.sub_gray11,
+ borderRadius: '4px',
+ gap: '20px',
+
+ ['>span.divider']: {
+ width: '100%',
+ height: '1px',
+ background: theme.colors.sub_gray10,
+ },
+});
+
+export { Container, Header, HeaderContents, HeaderContentsItem, Content };
diff --git a/src/components/Modal/AboutReportPattern/AboutReportPattern.tsx b/src/components/Modal/AboutReportPattern/AboutReportPattern.tsx
index 6d02c438..4c225c38 100644
--- a/src/components/Modal/AboutReportPattern/AboutReportPattern.tsx
+++ b/src/components/Modal/AboutReportPattern/AboutReportPattern.tsx
@@ -1,110 +1,6 @@
-import styled from '@emotion/styled';
import ReportPatternChart from '@components/Lab/ReportPatternChart/ReportPatternChart';
-import { theme } from '@styles/themes';
import QuestionMarkSVG from '@assets/icons/questionMark.svg?react';
-
-const Container = styled.div({
- display: 'flex',
- flexDirection: 'column',
- gap: '16px',
-});
-
-const Header = styled.div({
- display: 'flex',
- flexDirection: 'column',
- gap: '16px',
- padding: '14px 10px',
- margin: '0 20px',
-
- ['>p']: {
- margin: '0',
- wordBreak: 'keep-all',
-
- ['&.title']: {
- ...theme.font.body18Semibold,
- color: theme.colors.sub_gray1,
-
- ['>svg']: {
- width: '24px',
- height: 'auto',
- aspectRatio: '1 / 1',
- fill: theme.colors.sub_white,
- flexShrink: '0',
- verticalAlign: 'middle',
- },
- },
- },
-
- ['>span.divider']: {
- width: '100%',
- height: '1px',
- background: theme.colors.sub_gray10,
- },
-});
-
-const HeaderContents = styled.div({
- display: 'flex',
- flexDirection: 'column',
- gap: '8px',
-});
-
-const HeaderContentsItem = styled.div({
- display: 'flex',
- alignItems: 'center',
- gap: '16px',
-
- ['>span']: {
- width: '72px',
- padding: '4px',
- borderRadius: '999px',
- background: theme.colors.sub_gray11,
- ...theme.font.body14Semibold,
- textAlign: 'center',
-
- ['&.roi']: {
- color: theme.colors.sub_blue6,
- },
- ['&.score']: {
- color: theme.colors.sub_red,
- },
- },
-
- ['>div']: {
- display: 'flex',
- flexDirection: 'column',
-
- ['>div']: {
- display: 'flex',
- alignItems: 'center',
- gap: '10px',
-
- ['>span']: {
- ...theme.font.body14Medium,
- color: theme.colors.sub_gray5,
- whiteSpace: 'nowrap',
- ['&.condition']: {
- width: '72px',
- },
- },
- },
- },
-});
-
-const Content = styled.div({
- display: 'flex',
- flexDirection: 'column',
- padding: '8px 10px 12px',
- margin: '0 20px',
- background: theme.colors.sub_gray11,
- borderRadius: '4px',
- gap: '20px',
-
- ['>span.divider']: {
- width: '100%',
- height: '1px',
- background: theme.colors.sub_gray10,
- },
-});
+import { Container, Content, Header, HeaderContents, HeaderContentsItem } from './AboutReportPattern.Style';
const patternReads = [
{
diff --git a/src/components/Modal/CenterTutorial/AboutAntVoice/AboutAntVoice.Style.ts b/src/components/Modal/CenterTutorial/AboutAntVoice/AboutAntVoice.Style.ts
new file mode 100644
index 00000000..12baac10
--- /dev/null
+++ b/src/components/Modal/CenterTutorial/AboutAntVoice/AboutAntVoice.Style.ts
@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+import { theme } from '@styles/themes';
+
+const AntVoiceImage = styled.img({
+ width: 'auto',
+ objectFit: 'cover',
+ margin: '0 16px',
+ boxSizing: 'border-box',
+});
+
+const AntVoiceDescription = styled.div({
+ ...theme.font.detail12Semibold,
+ color: theme.colors.sub_gray11,
+ padding: '16px 12px',
+ background: theme.colors.sub_white,
+ borderRadius: '8px',
+ margin: '0 16px',
+ wordBreak: 'keep-all',
+});
+
+export { AntVoiceImage, AntVoiceDescription };
diff --git a/src/components/Modal/CenterTutorial/AboutAntVoice/AboutAntVoice.tsx b/src/components/Modal/CenterTutorial/AboutAntVoice/AboutAntVoice.tsx
index 41af8d7c..350ae44b 100644
--- a/src/components/Modal/CenterTutorial/AboutAntVoice/AboutAntVoice.tsx
+++ b/src/components/Modal/CenterTutorial/AboutAntVoice/AboutAntVoice.tsx
@@ -1,24 +1,6 @@
-import styled from '@emotion/styled';
-import { theme } from '@styles/themes';
import AntVoicePNG from '@assets/design/antVoice.png';
import { ModalContainer, ModalContent, ModalTitleContainer } from '../CenterTutotial.Style';
-
-const AntVoiceImage = styled.img({
- width: 'auto',
- objectFit: 'cover',
- margin: '0 16px',
- boxSizing: 'border-box',
-});
-
-const AntVoiceDescription = styled.div({
- ...theme.font.detail12Semibold,
- color: theme.colors.sub_gray11,
- padding: '16px 12px',
- background: theme.colors.sub_white,
- borderRadius: '8px',
- margin: '0 16px',
- wordBreak: 'keep-all',
-});
+import { AntVoiceDescription, AntVoiceImage } from './AboutAntVoice.Style';
const AboutAntVoice = () => {
return (
diff --git a/src/components/Modal/CenterTutorial/AboutHumanZipyo/AboutHumanZipyo.Style.ts b/src/components/Modal/CenterTutorial/AboutHumanZipyo/AboutHumanZipyo.Style.ts
new file mode 100644
index 00000000..f29d1d0e
--- /dev/null
+++ b/src/components/Modal/CenterTutorial/AboutHumanZipyo/AboutHumanZipyo.Style.ts
@@ -0,0 +1,151 @@
+import styled from '@emotion/styled';
+import { theme } from '@styles/themes';
+
+const HumanZipyoDescription = styled.div({
+ ...theme.font.body14Semibold,
+ color: theme.colors.sub_gray10,
+ margin: '0 16px',
+ wordBreak: 'keep-all',
+});
+
+const HumanZipyoGuageChart = styled.div({
+ gap: '8px',
+ display: 'flex',
+ flexDirection: 'column',
+ boxSizing: 'border-box',
+ justifyContent: 'center',
+ alignItems: 'center',
+ overflow: 'hidden',
+
+ ['>div']: {
+ ['&.guage-chart']: {
+ width: '100%',
+ left: '50%',
+ marginTop: '-5%',
+ },
+
+ ['&.score-text']: {
+ display: 'flex',
+ padding: '0px 28px',
+ width: '100%',
+ boxSizing: 'border-box',
+ },
+
+ ['&.score-range']: {
+ display: 'flex',
+ gap: '4px',
+ padding: '0px 24px',
+ width: '100%',
+ boxSizing: 'border-box',
+ },
+ },
+});
+
+const HumanZipyoScoreText = styled.div(
+ ({ index }: { index: number }) => {
+ const backgroundColor = ['#11193E', '#121C46', '#141F53', '#1F359B', '#304CD1'][index];
+
+ return {
+ background: backgroundColor,
+ };
+ },
+ {
+ ...theme.font.detail10Medium,
+ color: theme.colors.sub_gray2,
+ textAlign: 'center',
+ width: '100%',
+ margin: '0px',
+ whiteSpace: 'nowrap',
+ minWidth: '0',
+
+ ['@media (max-width: 360px)']: {
+ fontSize: '8px',
+ },
+ },
+);
+
+const HumanZipyoScoreRange = styled.span({
+ ...theme.font.detail10Medium,
+ color: theme.colors.sub_gray9,
+ textAlign: 'center',
+ width: '100%',
+ margin: '0px',
+ background: theme.colors.sub_white,
+ borderRadius: '2px',
+ position: 'relative',
+ whiteSpace: 'nowrap',
+
+ ['::before']: {
+ content: '""',
+ position: 'absolute',
+ width: 0,
+ height: 0,
+ bottom: '100%',
+ left: '50%',
+ transform: 'translateX(-50%)',
+
+ borderStyle: 'solid',
+ borderWidth: '0px 4px 6px 4px',
+ borderColor: `transparent transparent ${theme.colors.sub_white} transparent `,
+ },
+});
+
+const HumanZipyoHowToContainer = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '8px',
+ padding: '16px 12px',
+ margin: '0px 16px',
+ background: theme.colors.sub_white,
+ borderRadius: '8px',
+ alignItems: 'flex-start',
+
+ ['>div']: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '4px',
+
+ ['>p']: {
+ margin: '0px',
+
+ ['&.title']: {
+ ...theme.font.detail12Semibold,
+ color: theme.colors.sub_gray11,
+ },
+
+ ['&.description']: {
+ ...theme.font.detail12Medium,
+ color: theme.colors.sub_gray10,
+ },
+ },
+ },
+
+ ['>button']: {
+ background: theme.colors.sub_blue5,
+ padding: '6px 10px',
+ borderRadius: '4px',
+ border: 'none',
+
+ ...theme.font.detail12Semibold,
+ color: theme.colors.sub_gray1,
+ },
+});
+
+const HumanZipyoSubText = styled.p({
+ ...theme.font.detail12Semibold,
+ color: theme.colors.sub_blue7,
+
+ margin: '0 16px',
+ width: '100%',
+ boxSizing: 'border-box',
+ whiteSpace: 'nowrap',
+});
+
+export {
+ HumanZipyoDescription,
+ HumanZipyoGuageChart,
+ HumanZipyoScoreText,
+ HumanZipyoScoreRange,
+ HumanZipyoHowToContainer,
+ HumanZipyoSubText,
+};
diff --git a/src/components/Modal/CenterTutorial/AboutHumanZipyo/AboutHumanZipyo.tsx b/src/components/Modal/CenterTutorial/AboutHumanZipyo/AboutHumanZipyo.tsx
index 341faf59..d0089fa0 100644
--- a/src/components/Modal/CenterTutorial/AboutHumanZipyo/AboutHumanZipyo.tsx
+++ b/src/components/Modal/CenterTutorial/AboutHumanZipyo/AboutHumanZipyo.tsx
@@ -1,150 +1,16 @@
-import styled from '@emotion/styled';
import { useNavigate } from 'react-router-dom';
import { webPath } from '@router/index';
import GuageChart from '@components/Search/GuageChart/GuageChart';
-import { theme } from '@styles/themes';
import LogoSVG from '@assets/logo_blue.svg?react';
import { ModalContainer, ModalContent, ModalTitleContainer } from '../CenterTutotial.Style';
-
-const HumanZipyoDescription = styled.div({
- ...theme.font.body14Semibold,
- color: theme.colors.sub_gray10,
- margin: '0 16px',
- wordBreak: 'keep-all',
-});
-
-const HumanZipyoGuageChart = styled.div({
- gap: '8px',
- display: 'flex',
- flexDirection: 'column',
- boxSizing: 'border-box',
- justifyContent: 'center',
- alignItems: 'center',
- overflow: 'hidden',
-
- ['>div']: {
- ['&.guage-chart']: {
- width: '100%',
- left: '50%',
- marginTop: '-5%',
- },
-
- ['&.score-text']: {
- display: 'flex',
- padding: '0px 28px',
- width: '100%',
- boxSizing: 'border-box',
- },
-
- ['&.score-range']: {
- display: 'flex',
- gap: '4px',
- padding: '0px 24px',
- width: '100%',
- boxSizing: 'border-box',
- },
- },
-});
-
-const HumanZipyoScoreText = styled.div(
- ({ index }: { index: number }) => {
- const backgroundColor = ['#11193E', '#121C46', '#141F53', '#1F359B', '#304CD1'][index];
-
- return {
- background: backgroundColor,
- };
- },
- {
- ...theme.font.detail10Medium,
- color: theme.colors.sub_gray2,
- textAlign: 'center',
- width: '100%',
- margin: '0px',
- whiteSpace: 'nowrap',
- minWidth: '0',
-
- ['@media (max-width: 360px)']: {
- fontSize: '8px',
- },
- },
-);
-
-const HumanZipyoScoreRange = styled.span({
- ...theme.font.detail10Medium,
- color: theme.colors.sub_gray9,
- textAlign: 'center',
- width: '100%',
- margin: '0px',
- background: theme.colors.sub_white,
- borderRadius: '2px',
- position: 'relative',
- whiteSpace: 'nowrap',
-
- ['::before']: {
- content: '""',
- position: 'absolute',
- width: 0,
- height: 0,
- bottom: '100%',
- left: '50%',
- transform: 'translateX(-50%)',
-
- borderStyle: 'solid',
- borderWidth: '0px 4px 6px 4px',
- borderColor: `transparent transparent ${theme.colors.sub_white} transparent `,
- },
-});
-
-const HumanZipyoHowToContainer = styled.div({
- display: 'flex',
- flexDirection: 'column',
- gap: '8px',
- padding: '16px 12px',
- margin: '0px 16px',
- background: theme.colors.sub_white,
- borderRadius: '8px',
- alignItems: 'flex-start',
-
- ['>div']: {
- display: 'flex',
- flexDirection: 'column',
- gap: '4px',
-
- ['>p']: {
- margin: '0px',
-
- ['&.title']: {
- ...theme.font.detail12Semibold,
- color: theme.colors.sub_gray11,
- },
-
- ['&.description']: {
- ...theme.font.detail12Medium,
- color: theme.colors.sub_gray10,
- },
- },
- },
-
- ['>button']: {
- background: theme.colors.sub_blue5,
- padding: '6px 10px',
- borderRadius: '4px',
- border: 'none',
-
- ...theme.font.detail12Semibold,
- color: theme.colors.sub_gray1,
- },
-});
-
-const HumanZipyoSubText = styled.p({
- ...theme.font.detail12Semibold,
- color: theme.colors.sub_blue7,
-
- margin: '0 16px',
- width: '100%',
- boxSizing: 'border-box',
- whiteSpace: 'nowrap',
-});
+import {
+ HumanZipyoDescription,
+ HumanZipyoGuageChart,
+ HumanZipyoHowToContainer,
+ HumanZipyoScoreRange,
+ HumanZipyoScoreText,
+ HumanZipyoSubText,
+} from './AboutHumanZipyo.Style';
const scoreText = ['대곰탕', '곰탕', '어?', '호황', '대호황'];
const scoreRange = [
diff --git a/src/components/Modal/Common.Style.ts b/src/components/Modal/Common.Style.ts
deleted file mode 100644
index 27e086e3..00000000
--- a/src/components/Modal/Common.Style.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import styled from '@emotion/styled';
-import { theme } from '@styles/themes';
-
-export const Modal = styled.div`
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1000;
-`;
-
-export const ModalOverlay = styled.div`
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.5);
-`;
-
-export const ModalContent = styled.div`
- background: ${theme.colors.sub_white};
- border-radius: 20px;
- padding: 24px;
- margin: 20px;
- max-width: 324px;
- width: 100%;
- position: relative;
- z-index: 1001;
-`;
-
-export const ModalTitle = styled.h3`
- ${theme.font.title20Semibold};
- color: ${theme.colors.sub_black};
- margin: 0 0 12px 0;
- text-align: left;
-`;
-
-export const ModalDescription = styled.p`
- ${theme.font.body16Medium};
- color: ${theme.colors.sub_gray7};
- margin: 0 0 24px 0;
- text-align: left;
- line-height: 1.4;
-`;
-
-export const ModalButtons = styled.div`
- display: flex;
- gap: 12px;
-`;
-
-export const ModalButton = styled.button`
- flex: 1;
- background: ${theme.colors.sub_gray2};
- color: ${theme.colors.sub_gray8};
- border: none;
- padding: 12px 0;
- border-radius: 500px;
- font-size: 18px;
- font-weight: 700;
- cursor: pointer;
-`;
-
-export const ModalButtonPrimary = styled(ModalButton)`
- background: ${theme.colors.sub_black};
- color: ${theme.colors.sub_white};
-`;
diff --git a/src/components/Modal/Confirm/ConfirmModal.Style.ts b/src/components/Modal/Confirm/ConfirmModal.Style.ts
new file mode 100644
index 00000000..ce20bd59
--- /dev/null
+++ b/src/components/Modal/Confirm/ConfirmModal.Style.ts
@@ -0,0 +1,78 @@
+import styled from '@emotion/styled';
+import { theme } from '@styles/themes';
+
+const ConfirmModalLayout = styled.div({
+ display: 'flex',
+ position: 'fixed',
+ background: 'rgba(0, 0, 0, 0.7)',
+ width: '100%',
+ height: '100%',
+ zIndex: '100',
+ top: '0',
+ left: '50%',
+ transform: 'translateX(-50%)',
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: '32px',
+ boxSizing: 'border-box',
+ backdropFilter: 'blur(5px)',
+ maxWidth: '1280px',
+});
+
+const ConfirmModalContainer = styled.div({
+ background: 'white',
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+ borderRadius: '20px',
+ padding: '24px 20px 16px',
+ gap: '28px',
+
+ ['>div']: {
+ display: 'flex',
+ gap: '12px',
+
+ ['>button']: {
+ ...theme.font.body18Semibold,
+ width: '100%',
+ height: '48px',
+ padding: '8px 0',
+ border: 'none',
+ borderRadius: '999px',
+
+ [':first-of-type']: {
+ background: '#E9ECEF',
+ color: '#495057',
+ },
+ [':last-of-type']: {
+ background: '#1B1C1E',
+ color: '#E9ECEF',
+ },
+ },
+ },
+});
+
+const ConfirmModalTextContainer = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '8px',
+
+ ['>p']: {
+ margin: '0',
+ wordBreak: 'keep-all',
+
+ ['&.title']: {
+ ...theme.font.title20Semibold,
+ color: theme.colors.sub_gray8,
+ },
+
+ ['&.desc']: {
+ ...theme.font.body16Medium,
+ color: theme.colors.sub_gray7,
+ whiteSpace: 'pre-wrap',
+ wordBreak: 'keep-all',
+ },
+ },
+});
+
+export { ConfirmModalLayout, ConfirmModalContainer, ConfirmModalTextContainer };
diff --git a/src/components/Modal/Confirm/ConfirmModal.tsx b/src/components/Modal/Confirm/ConfirmModal.tsx
index d40a75f2..6236501a 100644
--- a/src/components/Modal/Confirm/ConfirmModal.tsx
+++ b/src/components/Modal/Confirm/ConfirmModal.tsx
@@ -1,80 +1,5 @@
-import styled from '@emotion/styled';
import { useEffect, useRef, useState } from 'react';
-import { theme } from '@styles/themes';
-
-const ConfirmModalLayout = styled.div({
- display: 'flex',
- position: 'fixed',
- background: 'rgba(0, 0, 0, 0.7)',
- width: '100%',
- height: '100%',
- zIndex: '100',
- top: '0',
- left: '50%',
- transform: 'translateX(-50%)',
- alignItems: 'center',
- justifyContent: 'center',
- padding: '32px',
- boxSizing: 'border-box',
- backdropFilter: 'blur(5px)',
- maxWidth: '1280px',
-});
-
-const ConfirmModalContainer = styled.div({
- background: 'white',
- display: 'flex',
- flexDirection: 'column',
- width: '100%',
- borderRadius: '20px',
- padding: '24px 20px 16px',
- gap: '28px',
-
- ['>div']: {
- display: 'flex',
- gap: '12px',
-
- ['>button']: {
- ...theme.font.body18Semibold,
- width: '100%',
- height: '48px',
- padding: '8px 0',
- border: 'none',
- borderRadius: '999px',
-
- [':first-of-type']: {
- background: '#E9ECEF',
- color: '#495057',
- },
- [':last-of-type']: {
- background: '#1B1C1E',
- color: '#E9ECEF',
- },
- },
- },
-});
-
-const ConfirmModalTextContainer = styled.div({
- display: 'flex',
- flexDirection: 'column',
- gap: '8px',
-
- ['>p']: {
- margin: '0',
- wordBreak: 'keep-all',
-
- ['&.title']: {
- ...theme.font.title20Semibold,
- color: theme.colors.sub_gray8,
- },
-
- ['&.desc']: {
- ...theme.font.body16Medium,
- color: theme.colors.sub_gray7,
- whiteSpace: 'pre-wrap',
- wordBreak: 'keep-all',
- },
- },
-});
+import { ConfirmModalContainer, ConfirmModalLayout, ConfirmModalTextContainer } from './ConfirmModal.Style';
const ConfirmModal = ({
title,
diff --git a/src/components/Modal/ExperimentDetail/ExperimentDetail.tsx b/src/components/Modal/ExperimentDetail/ExperimentDetail.tsx
index 2c23aff0..10abf899 100644
--- a/src/components/Modal/ExperimentDetail/ExperimentDetail.tsx
+++ b/src/components/Modal/ExperimentDetail/ExperimentDetail.tsx
@@ -204,7 +204,6 @@ const ExperimentDetailChart = ({
if (loadChartStatusRef.current.time < fullTime + 10 && !noAnimation) {
loadChartStatusRef.current.time++;
loadChartFrameRef.current = requestAnimationFrame(() => drawChart());
- } else {
}
return;
};
diff --git a/src/components/Modal/Layout/BottomUpCancel/BottomUpCancel.Style.ts b/src/components/Modal/Layout/BottomUpCancel/BottomUpCancel.Style.ts
new file mode 100644
index 00000000..84e68ed7
--- /dev/null
+++ b/src/components/Modal/Layout/BottomUpCancel/BottomUpCancel.Style.ts
@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+import { theme } from '@styles/themes';
+
+const ModalLayout = styled.div(
+ ({ isShowModal, showDelay }: { isShowModal: boolean; showDelay: number }) => ({
+ background: isShowModal ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0)',
+ backdropFilter: isShowModal ? 'blur(2px)' : '',
+ transition: `all ${showDelay}ms ease-in-out`,
+
+ ['>div']: {
+ transform: `translateY(${isShowModal ? '0' : '100%'})`,
+ transition: `all ${showDelay}ms ease-in-out`,
+ },
+ }),
+ {
+ position: 'fixed',
+ width: '100%',
+ height: '100%',
+ top: 0,
+ left: '50%',
+ transform: 'translateX(-50%)',
+ right: 0,
+ bottom: 0,
+ zIndex: '100',
+ overflow: 'auto',
+ maxWidth: '1280px',
+
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'flex-end',
+
+ ['>div']: {
+ background: theme.colors.sub_black,
+ width: '100%',
+ border: `1px solid ${theme.colors.sub_gray10}`,
+ borderRadius: '16px 16px 0 0',
+ boxSizing: 'border-box',
+ padding: '30px 0px 60px',
+ gap: '72px',
+ display: 'flex',
+ flexDirection: 'column',
+ overflow: 'auto',
+ overscrollBehavior: 'contain',
+ },
+ },
+);
+
+const ModalCancelButton = styled.button({
+ ...theme.font.body18Semibold,
+ color: theme.colors.sub_white,
+ background: theme.colors.sub_blue6,
+ borderRadius: '8px',
+ border: 'none',
+ padding: '10px 0px',
+ margin: '0px 20px',
+});
+
+export { ModalLayout, ModalCancelButton };
diff --git a/src/components/Modal/Layout/BottomUpCancel/BottomUpCancel.tsx b/src/components/Modal/Layout/BottomUpCancel/BottomUpCancel.tsx
index db45ee48..4612786a 100644
--- a/src/components/Modal/Layout/BottomUpCancel/BottomUpCancel.tsx
+++ b/src/components/Modal/Layout/BottomUpCancel/BottomUpCancel.tsx
@@ -1,60 +1,5 @@
-import styled from '@emotion/styled';
import { ModalLayoutProps } from '@components/Modal/useModal';
-import { theme } from '@styles/themes';
-
-const ModalLayout = styled.div(
- ({ isShowModal, showDelay }: { isShowModal: boolean; showDelay: number }) => ({
- background: isShowModal ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0)',
- backdropFilter: isShowModal ? 'blur(2px)' : '',
- transition: `all ${showDelay}ms ease-in-out`,
-
- ['>div']: {
- transform: `translateY(${isShowModal ? '0' : '100%'})`,
- transition: `all ${showDelay}ms ease-in-out`,
- },
- }),
- {
- position: 'fixed',
- width: '100%',
- height: '100%',
- top: 0,
- left: '50%',
- transform: 'translateX(-50%)',
- right: 0,
- bottom: 0,
- zIndex: '100',
- overflow: 'auto',
- maxWidth: '1280px',
-
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'flex-end',
-
- ['>div']: {
- background: theme.colors.sub_black,
- width: '100%',
- border: `1px solid ${theme.colors.sub_gray10}`,
- borderRadius: '16px 16px 0 0',
- boxSizing: 'border-box',
- padding: '30px 0px 60px',
- gap: '72px',
- display: 'flex',
- flexDirection: 'column',
- overflow: 'auto',
- overscrollBehavior: 'contain',
- },
- },
-);
-
-const ModalCancelButton = styled.button({
- ...theme.font.body18Semibold,
- color: theme.colors.sub_white,
- background: theme.colors.sub_blue6,
- borderRadius: '8px',
- border: 'none',
- padding: '10px 0px',
- margin: '0px 20px',
-});
+import { ModalCancelButton, ModalLayout } from './BottomUpCancel.Style';
const BottomUpCancel = ({
children,
diff --git a/src/components/MyPage/MyPageInput/MyPageInput.Style.ts b/src/components/MyPage/MyPageInput/MyPageInput.Style.ts
new file mode 100644
index 00000000..bb193687
--- /dev/null
+++ b/src/components/MyPage/MyPageInput/MyPageInput.Style.ts
@@ -0,0 +1,67 @@
+import styled from '@emotion/styled';
+import { theme } from '@styles/themes';
+
+const MyPageInputContainer = styled.div(
+ ({ isError }: { isError: boolean }) => ({
+ ['>p']: {
+ color: isError ? theme.colors.sub_red : theme.colors.sub_gray3,
+ },
+
+ ['>input']: {
+ outline: isError ? `1px solid ${theme.colors.sub_red}` : 'none',
+ },
+ }),
+ {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '8px',
+ padding: '0 20px',
+
+ ['>p']: {
+ margin: '0',
+ ...theme.font.body16Medium,
+ },
+
+ ['>input']: {
+ border: 'none',
+ padding: '20px 16px',
+ height: '48px',
+ boxSizing: 'border-box',
+ borderRadius: '5px',
+ background: theme.colors.sub_gray11,
+ color: theme.colors.sub_gray3,
+ ...theme.font.body16Medium,
+
+ ['&::placeholder']: {
+ color: theme.colors.sub_gray8,
+ },
+ },
+ },
+);
+
+const MyPageInputSubContainer = styled.div({
+ display: 'flex',
+ justifyContent: 'space-between',
+ height: '20px',
+
+ ['>p']: {
+ margin: '0',
+
+ ['&.error']: {
+ padding: '0 4px',
+ ...theme.font.body14Medium,
+ color: theme.colors.sub_red,
+ },
+
+ ['&.sub']: {
+ ...theme.font.body14Regular,
+ color: theme.colors.sub_gray3,
+
+ ['>span']: {
+ ...theme.font.body14Semibold,
+ },
+ },
+ },
+});
+
+export { MyPageInputContainer, MyPageInputSubContainer };
diff --git a/src/components/MyPage/MyPageInput/MyPageInput.tsx b/src/components/MyPage/MyPageInput/MyPageInput.tsx
index 110972be..7f144bee 100644
--- a/src/components/MyPage/MyPageInput/MyPageInput.tsx
+++ b/src/components/MyPage/MyPageInput/MyPageInput.tsx
@@ -1,68 +1,4 @@
-import styled from '@emotion/styled';
-import { theme } from '@styles/themes';
-
-const MyPageInputContainer = styled.div(
- ({ isError }: { isError: boolean }) => ({
- ['>p']: {
- color: isError ? theme.colors.sub_red : theme.colors.sub_gray3,
- },
-
- ['>input']: {
- outline: isError ? `1px solid ${theme.colors.sub_red}` : 'none',
- },
- }),
- {
- display: 'flex',
- flexDirection: 'column',
- gap: '8px',
- padding: '0 20px',
-
- ['>p']: {
- margin: '0',
- ...theme.font.body16Medium,
- },
-
- ['>input']: {
- border: 'none',
- padding: '20px 16px',
- height: '48px',
- boxSizing: 'border-box',
- borderRadius: '5px',
- background: theme.colors.sub_gray11,
- color: theme.colors.sub_gray3,
- ...theme.font.body16Medium,
-
- ['&::placeholder']: {
- color: theme.colors.sub_gray8,
- },
- },
- },
-);
-
-const MyPageInputSubContainer = styled.div({
- display: 'flex',
- justifyContent: 'space-between',
- height: '20px',
-
- ['>p']: {
- margin: '0',
-
- ['&.error']: {
- padding: '0 4px',
- ...theme.font.body14Medium,
- color: theme.colors.sub_red,
- },
-
- ['&.sub']: {
- ...theme.font.body14Regular,
- color: theme.colors.sub_gray3,
-
- ['>span']: {
- ...theme.font.body14Semibold,
- },
- },
- },
-});
+import { MyPageInputContainer, MyPageInputSubContainer } from './MyPageInput.Style';
export interface MyPageInputProps {
name: string;
diff --git a/src/components/MyPage/ProfileCircle/ProfileCircle.Style.ts b/src/components/MyPage/ProfileCircle/ProfileCircle.Style.ts
new file mode 100644
index 00000000..4e7d54b9
--- /dev/null
+++ b/src/components/MyPage/ProfileCircle/ProfileCircle.Style.ts
@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+
+const ProfileCircleContainer = styled.label(
+ ({ size }: { size: 'small' | 'medium' | 'large' }) => ({
+ ['>img']: {
+ width: size === 'small' ? '48px' : size === 'medium' ? '64px' : '76px',
+ },
+
+ ['>svg']: {
+ width: size === 'small' ? '16px' : size === 'medium' ? '20px' : '24px',
+ },
+ }),
+ {
+ display: 'flex',
+ position: 'relative',
+
+ ['>img']: {
+ height: 'auto',
+ aspectRatio: '1 / 1',
+ objectFit: 'cover',
+ borderRadius: '999px',
+ flexShrink: '0',
+ },
+
+ ['>svg']: {
+ position: 'absolute',
+ bottom: '0',
+ right: '0',
+ height: 'auto',
+ aspectRatio: '1 / 1',
+ fill: '#ADB5BD',
+ background: '#495057',
+ borderRadius: '999px',
+ },
+
+ ['>input']: {
+ display: 'none',
+ },
+ },
+);
+
+export { ProfileCircleContainer };
diff --git a/src/components/MyPage/ProfileCircle/ProfileCircle.tsx b/src/components/MyPage/ProfileCircle/ProfileCircle.tsx
index 0732259f..b302891c 100644
--- a/src/components/MyPage/ProfileCircle/ProfileCircle.tsx
+++ b/src/components/MyPage/ProfileCircle/ProfileCircle.tsx
@@ -1,45 +1,6 @@
-import styled from '@emotion/styled';
import EditCircleSVG from '@assets/edit_circle.svg?react';
import ProfilePNG from '@assets/profile.png';
-
-const ProfileCircleContainer = styled.label(
- ({ size }: { size: 'small' | 'medium' | 'large' }) => ({
- ['>img']: {
- width: size === 'small' ? '48px' : size === 'medium' ? '64px' : '76px',
- },
-
- ['>svg']: {
- width: size === 'small' ? '16px' : size === 'medium' ? '20px' : '24px',
- },
- }),
- {
- display: 'flex',
- position: 'relative',
-
- ['>img']: {
- height: 'auto',
- aspectRatio: '1 / 1',
- objectFit: 'cover',
- borderRadius: '999px',
- flexShrink: '0',
- },
-
- ['>svg']: {
- position: 'absolute',
- bottom: '0',
- right: '0',
- height: 'auto',
- aspectRatio: '1 / 1',
- fill: '#ADB5BD',
- background: '#495057',
- borderRadius: '999px',
- },
-
- ['>input']: {
- display: 'none',
- },
- },
-);
+import { ProfileCircleContainer } from './ProfileCircle.Style';
const ProfileCircle = ({
profileImage,
diff --git a/src/components/PopUp/PWAinfoPopUp/PWAInfoPopUp.tsx b/src/components/PopUp/PWAinfoPopUp/PWAInfoPopUp.tsx
index 1f76b74e..bf9f2872 100644
--- a/src/components/PopUp/PWAinfoPopUp/PWAInfoPopUp.tsx
+++ b/src/components/PopUp/PWAinfoPopUp/PWAInfoPopUp.tsx
@@ -13,7 +13,7 @@ import {
PWAInfoTextContainer,
} from './PWAinfoPopUp.style';
-const PWAInfoPopUp = ({}: {}) => {
+const PWAInfoPopUp = () => {
const navigate = useNavigate();
const isMobile = useIsMobile();
const [lastVisit, setLastVisit] = useLocalStorageState