refactor: q-space style 파일 분리

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

Hide file tree

Showing 20 changed files with 552 additions and 480 deletions.
diff --git a/src/pages/QSpaceDetail/components/DetailsHeader/DetailsHead.styles.ts b/src/pages/QSpaceDetail/components/DetailsHeader/DetailsHead.styles.ts
@@ -0,0 +1,30 @@
+import theme from '@/styles/theme';
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+`;
+
+export const TextContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+
+export const Title = styled.h2`
+  font-family: ${theme.typography.fontFamily.korean};
+  font-size: ${theme.typography.body1.size};
+  font-weight: ${theme.typography.weights.semiBold};
+  color: ${theme.colors.black};
+  margin: 0;
+`;
+
+export const CreatorInfo = styled.p`
+  font-family: ${theme.typography.fontFamily.korean};
+  font-size: ${theme.typography.body3.size};
+  color: ${theme.colors.gray[400]};
+  margin: 0;
+`;
diff --git a/src/pages/QSpaceDetail/components/DetailsHeader/DetailsHeader.tsx b/src/pages/QSpaceDetail/components/DetailsHeader/DetailsHeader.tsx
@@ -1,6 +1,11 @@
-import styled from '@emotion/styled';
 import theme from '@/styles/theme';
 import ProfileImage from '@/components/ui/ProfileImageCon/ProfileImageCon';
+import {
+  Container,
+  CreatorInfo,
+  TextContent,
+  Title,
+} from '@/pages/QSpaceDetail/components/DetailsHeader/DetailsHead.styles';
 
 interface DetailsHeaderProps {
   title: string;
@@ -11,7 +16,12 @@ interface DetailsHeaderProps {
 const DetailsHeader = ({ title, creator, profileImage }: DetailsHeaderProps) => {
   return (
     <Container>
-      <ProfileImage src={profileImage} size={40} bgColor={theme.colors.gray[200]} alt='프로필 이미지' />
+      <ProfileImage
+        src={profileImage}
+        size={40}
+        bgColor={theme.colors.gray[200]}
+        alt="프로필 이미지"
+      />
       <TextContent>
         <Title>{title}</Title>
         <CreatorInfo>{creator}</CreatorInfo>
@@ -20,32 +30,4 @@ const DetailsHeader = ({ title, creator, profileImage }: DetailsHeaderProps) =>
   );
 };
 
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1rem;
-`;
-
-const TextContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-`;
-
-const Title = styled.h2`
-  font-family: ${theme.typography.fontFamily.korean};
-  font-size: ${theme.typography.body1.size};
-  font-weight: ${theme.typography.weights.semiBold};
-  color: ${theme.colors.black};
-  margin: 0;
-`;
-
-const CreatorInfo = styled.p`
-  font-family: ${theme.typography.fontFamily.korean};
-  font-size: ${theme.typography.body3.size};
-  color: ${theme.colors.gray[400]};
-  margin: 0;
-`;
-
 export default DetailsHeader;
diff --git a/src/pages/QSpaceDetail/components/KebabMenu/KebabMenu.styles.ts b/src/pages/QSpaceDetail/components/KebabMenu/KebabMenu.styles.ts
@@ -0,0 +1,56 @@
+import theme from '@/styles/theme';
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+export const IconButton = styled.button`
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  cursor: pointer;
+  color: ${theme.colors.gray[400]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s ease-in-out;
+
+  &:hover {
+    color: ${theme.colors.gray[600]};
+  }
+`;
+
+export const MenuPopup = styled.div`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  min-width: 160px;
+  background-color: ${theme.colors.white};
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  z-index: 1000;
+`;
+
+export const MenuItem = styled.button`
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: none;
+  background: none;
+  text-align: left;
+  font-family: ${theme.typography.fontFamily.korean};
+  font-size: ${theme.typography.body2.size};
+  color: ${theme.colors.gray[600]};
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: ${theme.colors.sub};
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid ${theme.colors.gray[100]};
+  }
+`;
diff --git a/src/pages/QSpaceDetail/components/KebabMenu/KebabMenu.tsx b/src/pages/QSpaceDetail/components/KebabMenu/KebabMenu.tsx
@@ -1,8 +1,11 @@
+import {
+  Container,
+  IconButton,
+  MenuItem,
+  MenuPopup,
+} from '@/pages/QSpaceDetail/components/KebabMenu/KebabMenu.styles';
 import { useState, useRef, useEffect } from 'react';
-import styled from '@emotion/styled';
 import { VscKebabVertical } from 'react-icons/vsc';
-import theme from '@/styles/theme';
-
 interface KebabMenuProps {
   onEditClick?: () => void;
   onDeleteClick?: () => void;
@@ -63,58 +66,4 @@ const KebabMenu = ({
   );
 };
 
-const Container = styled.div`
-  position: relative;
-  display: inline-block;
-`;
-
-const IconButton = styled.button`
-  background: none;
-  border: none;
-  padding: 0.5rem;
-  cursor: pointer;
-  color: ${theme.colors.gray[400]};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: color 0.2s ease-in-out;
-
-  &:hover {
-    color: ${theme.colors.gray[600]};
-  }
-`;
-
-const MenuPopup = styled.div`
-  position: absolute;
-  top: 100%;
-  right: 0;
-  min-width: 160px;
-  background-color: ${theme.colors.white};
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  z-index: 1000;
-`;
-
-const MenuItem = styled.button`
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border: none;
-  background: none;
-  text-align: left;
-  font-family: ${theme.typography.fontFamily.korean};
-  font-size: ${theme.typography.body2.size};
-  color: ${theme.colors.gray[600]};
-  cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-
-  &:hover {
-    background-color: ${theme.colors.sub};
-  }
-
-  &:not(:last-child) {
-    border-bottom: 1px solid ${theme.colors.gray[100]};
-  }
-`;
-
 export default KebabMenu;
diff --git a/src/pages/QSpaceDetail/components/MemberContainer/MemberContainer.styles.ts b/src/pages/QSpaceDetail/components/MemberContainer/MemberContainer.styles.ts
@@ -0,0 +1,59 @@
+import styled from '@emotion/styled';
+import theme from '@/styles/theme';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  width: 100%;
+  gap: 1rem;
+  border-top: 1px solid ${theme.colors.gray[200]};
+  background-color: ${theme.colors.background};
+`;
+
+export const TopSection = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const BottomSection = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const IconContainer = styled.div<{ size: number; isStacked: boolean }>`
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  background-color: ${theme.colors.gray[200]};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${(props) => (props.isStacked ? '-8px' : '0')};
+  border: 2px solid ${theme.colors.white};
+  color: ${theme.colors.gray[100]};
+`;
+
+export const Count = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: ${theme.colors.gray[400]};
+  font-family: ${theme.typography.fontFamily.korean};
+  font-size: ${theme.typography.body2.size};
+
+  svg {
+    color: ${theme.colors.gray[400]};
+  }
+`;
+
+export const LastChatTime = styled.span`
+  color: ${theme.colors.blue};
+  font-size: ${theme.typography.body3.size};
+  font-family: ${theme.typography.fontFamily.korean};
+`;
diff --git a/src/pages/QSpaceDetail/components/MemberContainer/MemberContainer.tsx b/src/pages/QSpaceDetail/components/MemberContainer/MemberContainer.tsx
@@ -1,6 +1,13 @@
-import styled from '@emotion/styled';
 import { IoPerson } from 'react-icons/io5';
-import theme from '@/styles/theme';
+import {
+  BottomSection,
+  Container,
+  Count,
+  IconContainer,
+  IconsWrapper,
+  LastChatTime,
+  TopSection,
+} from '@/pages/QSpaceDetail/components/MemberContainer/MemberContainer.styles';
 import MemberListButton from '@/pages/QSpaceDetail/components/MemberListButton/MemberListButton';
 
 interface MemberContainerProps {
@@ -57,61 +64,4 @@ const MemberContainer = ({
   );
 };
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  width: 100%;
-  gap: 1rem;
-  border-top: 1px solid ${theme.colors.gray[200]};
-  background-color: ${theme.colors.background};
-`;
-
-const TopSection = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-const BottomSection = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-const IconsWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const IconContainer = styled.div<{ size: number; isStacked: boolean }>`
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-  background-color: ${theme.colors.gray[200]};
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: ${(props) => (props.isStacked ? '-8px' : '0')};
-  border: 2px solid ${theme.colors.white};
-  color: ${theme.colors.gray[100]};
-`;
-
-const Count = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  color: ${theme.colors.gray[400]};
-  font-family: ${theme.typography.fontFamily.korean};
-  font-size: ${theme.typography.body2.size};
-
-  svg {
-    color: ${theme.colors.gray[400]};
-  }
-`;
-
-const LastChatTime = styled.span`
-  color: ${theme.colors.blue};
-  font-size: ${theme.typography.body3.size};
-  font-family: ${theme.typography.fontFamily.korean};
-`;
-
 export default MemberContainer;
diff --git a/src/pages/QSpaceDetail/components/MemberListButton/MemberListButton.styles.ts b/src/pages/QSpaceDetail/components/MemberListButton/MemberListButton.styles.ts
@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+import theme from '@/styles/theme';
+
+export const Button = styled.button`
+  background-color: ${theme.colors.sub};
+  color: ${theme.colors.gray[500]};
+  border: none;
+  border-radius: 6rem;
+  padding: 0.5rem 0.75rem;
+  font-family: ${theme.typography.fontFamily.korean};
+  font-size: ${theme.typography.body2.size};
+  font-weight: ${theme.typography.weights.medium};
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background-color: ${theme.colors.gray[100]};
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+`;