Feat(#38): Container 컴포넌트 분리

What-s-Your-Plan · Dec 7, 2024 · 0a6d8cb · 0a6d8cb
1 parent 0603775
commit 0a6d8cb
Show file tree

Hide file tree

Showing 37 changed files with 317 additions and 141 deletions.
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
@@ -6,7 +6,8 @@ import DatePicker from '@/components/Calendar/DatePicker/DatePicker.tsx';
 import MonthlyCalender from '@/components/Calendar/MonthlyCalendar/MonthlyCalendar';
 import WeeklyCalendar from '@/components/Calendar/WeeklyCalendar/WeeklyCalendar';
 import Button from '@/components/Common/Button/Button.tsx';
-import * as Containers from '@/components/Common/Container';
+import Container from '@/components/Common/Container/Container';
+import Flex from '@/components/Common/Flex/Flex';
 import ScheduleDetailModal from '@/components/schedule/ScheduleDetailModal.tsx';
 import ScheduleModal from '@/components/schedule/ScheduleModal';
 import Todo from '@/components/Todo/Todo.tsx';
@@ -100,24 +101,26 @@ function Calendar({ category, groupId }: CalendarProps) {
   };
 
   return (
-    <Containers.Container className="flex" $width="right">
-      <Containers.WhiteContainer $width="1200" $height="max">
-        <div className="flex p-3 h-full gap-4">
-          <div className="grow min-w-[640px]">{renderCalendar()}</div>
-          <div className="flex flex-col min-w-[240px]">
-            <Button
-              styles={{ $size: 'medium', $variant: 'outline' }}
-              onClick={handleOpenCreate}
-              children={<span className={'font-extrabold'}>일정 등록</span>}
-              className="py-2 mb-5"
-            />
-            <div className="p-3 mb-4 shadow-md rounded-xl bg-default-white h-[30vh] min-h-[300px]">
-              <DatePicker />
+    <Container $width="right">
+      <Flex>
+        <Container $variant="white" $width="1200" $height="max">
+          <div className="flex p-3 h-full gap-4">
+            <div className="grow min-w-[640px]">{renderCalendar()}</div>
+            <div className="flex flex-col min-w-[240px]">
+              <Button
+                styles={{ $size: 'medium', $variant: 'outline' }}
+                onClick={handleOpenCreate}
+                children={<span className={'font-extrabold'}>일정 등록</span>}
+                className="py-2 mb-5"
+              />
+              <div className="p-3 mb-4 shadow-md rounded-xl bg-default-white h-[30vh] min-h-[300px]">
+                <DatePicker />
+              </div>
+              <Todo />
             </div>
-            <Todo />
           </div>
-        </div>
-      </Containers.WhiteContainer>
+        </Container>
+      </Flex>
       <CalendarIndex
         calendarType={calendarType}
         setCalendarType={setCalendarType}
@@ -134,7 +137,7 @@ function Calendar({ category, groupId }: CalendarProps) {
         handleClose={handleCloseDetail}
         setUpdateTrue={() => setNeedUpdate(true)}
       />
-    </Containers.Container>
+    </Container>
   );
 }
 

diff --git a/src/components/Common/Container/Container.styled.ts b/src/components/Common/Container/Container.styled.ts
@@ -0,0 +1,31 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme';
+
+export const getContainerStyling = {
+  container: css`
+    padding: 16px;
+    margin-left: 28px;
+    border-radius: ${Theme.borderRadius.medium};
+    background-color: ${Theme.color.white};
+    box-shadow: ${Theme.container.shadows.md};
+    overflow: hidden;
+  `,
+  whiteContainer: css`
+    padding: 12px;
+    margin-bottom: 16px;
+    border-radius: ${Theme.borderRadius.medium};
+    background-color: ${Theme.color.white};
+    box-shadow: ${Theme.container.shadows.md};
+  `,
+};
+
+export const getWidthStyling = (
+  widthKey: keyof typeof Theme.container.width,
+) => css`
+  ${Theme.container.width[widthKey]}
+`;
+
+export const getHeightStyling = (
+  heightKey?: keyof typeof Theme.container.height,
+) => (heightKey ? css`${Theme.container.height[heightKey]}` : '');
diff --git a/src/components/Common/Container/Container.tsx b/src/components/Common/Container/Container.tsx
@@ -0,0 +1,55 @@
+import { css } from '@emotion/react';
+import { Theme } from '@/styles/Theme';
+
+import {
+  getContainerStyling,
+  getWidthStyling,
+  getHeightStyling,
+} from './Container.styled';
+
+export interface ContainerProps {
+  /**
+   * 컨테이너의 너비를 설정합니다.
+   */
+  $width: keyof typeof Theme.container.width;
+
+  /**
+   * 컨테이너의 높이를 설정합니다.
+   */
+  $height?: keyof typeof Theme.container.height;
+
+  /**
+   * 컨테이너의 스타일 변형(variant)을 지정합니다.
+   * @default: 'default'
+   */
+  $variant?: 'default' | 'white';
+
+  children?: React.ReactNode;
+}
+
+function Container({
+  $width,
+  $height,
+  $variant: variant = 'default',
+  children,
+  ...attributes
+}: ContainerProps) {
+  return (
+    <div
+      css={css`
+        ${
+          variant === 'white'
+            ? getContainerStyling.whiteContainer
+            : getContainerStyling.container
+        };
+        ${getWidthStyling($width)};
+        ${$height ? getHeightStyling($height) : ''};
+      `}
+      {...attributes}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Container;
diff --git a/src/components/Common/InputText.ts b/src/components/Common/InputText.ts
@@ -30,28 +30,6 @@ const InputDefault = styled.input<InputTextProps>`
   ${(props) => (props.$width ? `width:${props.$width};` : tw`grow`)}
 `;
 
-const InputTitle = styled.input<InputTextProps>`
-  ${tw`
-      h-8
-      px-2
-      transition
-
-      placeholder:text-gray-300
-      hover:border-gray-400
-      focus:!outline-none
-      
-      font-bold
-      bg-transparent
-      focus:border-main
-  `}
-  ${(props) => (props.$void ? '' : tw`border-b-2`)}
-  ${(props) =>
-    props.$isValid === false
-      ? tw`border-label-red text-label-red`
-      : tw`border-gray-300`}
-  ${(props) => (props.$width ? `width:${props.$width};` : tw`grow`)}
-`;
-
 const InputTextArea = styled.textarea<InputTextProps>`
   ${tw`
     rounded-md
@@ -73,4 +51,4 @@ const InputTextArea = styled.textarea<InputTextProps>`
   ${(props) => (props.$resize === false ? tw`resize-none` : '')}
 `;
 
-export { InputDefault, InputTitle, InputTextArea };
+export { InputDefault, InputTextArea };
diff --git a/src/components/Common/Container.ts → src/components/Common/PrevContainer.ts b/src/components/Common/Container.ts → src/components/Common/PrevContainer.ts
@@ -47,4 +47,4 @@ const containerTheme = {
   },
 };
 
-export { Container, WhiteContainer };
+export { Container as PrevContainer, WhiteContainer as PrevWhiteContainer };
diff --git a/src/components/Todo/Todo.tsx b/src/components/Todo/Todo.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import { WhiteContainer } from '@/components/Common/Container.ts';
+import { PrevWhiteContainer } from '@/components/Common/PrevContainer';
 
 import { checkTodo } from '@/api/todo/checkTodo.ts';
 import { deleteTodo } from '@/api/todo/deleteTodo.ts';
@@ -116,7 +116,7 @@ function Todo({ initTodos }: TodoProps) {
   }, []);
 
   return (
-    <WhiteContainer $width="1300">
+    <PrevWhiteContainer $width="1300">
       <S.Header>
         <div className="font-bold">Todo</div>
         <S.IconButton onClick={clickPlusButton}>
@@ -178,7 +178,7 @@ function Todo({ initTodos }: TodoProps) {
           </S.SubmitDiv>
         )}
       </div>
-    </WhiteContainer>
+    </PrevWhiteContainer>
   );
 }
 

diff --git a/src/components/group/GroupCalendar.tsx b/src/components/group/GroupCalendar.tsx
@@ -1,12 +1,12 @@
-import { Container } from '@/components/Common/Container';
+import { PrevContainer } from '@/components/Common/PrevContainer';
 
 type GroupCalendarProps = {
   groupId?: number;
 };
 
 function GroupCalendar({ groupId }: GroupCalendarProps) {
   console.log(groupId);
-  return <Container $width="right">GroupCalendar</Container>;
+  return <PrevContainer $width="right">GroupCalendar</PrevContainer>;
 }
 
 export default GroupCalendar;
diff --git a/src/components/group/GroupList.tsx b/src/components/group/GroupList.tsx
@@ -21,7 +21,7 @@ import Envelope from '@/assets/icons/envelope.svg';
 import Plus from '@/assets/icons/plus.svg';
 import Users from '@/assets/icons/users.svg';
 import Button from '@/components/Common/Button/Button.tsx';
-import { Container } from '@/components/Common/Container';
+import { PrevContainer } from '@/components/Common/PrevContainer';
 import Divider from '@/components/Common/Divider/Divider';
 import Tooltip from '@/components/Tooltip/Tooltip';
 import { BROWSER_PATH } from '@/constants/Path';
@@ -188,7 +188,7 @@ function GroupList() {
 
   return (
     <>
-      <Container $width="left" className="scrollBar flex flex-col gap-4">
+      <PrevContainer $width="left" className="scrollBar flex flex-col gap-4">
         <Disclosure>
           {({ open }) => (
             <>
@@ -241,7 +241,7 @@ function GroupList() {
           </div>
           {renderGroupList()}
         </div>
-      </Container>
+      </PrevContainer>
       <GroupCreateModal
         isOpen={isModalOpen}
         init={groupCreateInit}

diff --git a/src/components/group/create/GroupCreateModal.tsx b/src/components/group/create/GroupCreateModal.tsx
@@ -5,7 +5,7 @@ import {
   postGroupRegister,
   GroupResponse as CreateGroup,
 } from '@/api/group/postGroupRegister';
-import Modal from '@/components/Common/Modal';
+import Modal from '@/components/Common/Modal/Modal';
 import * as S from '@/components/group/create/GroupCreateModal.styled';
 import GroupCreatePanel from '@/components/group/create/GroupCreatePanel';
 import useForm from '@/hooks/useForm';

diff --git a/src/components/group/update/GroupUpdateModal.tsx b/src/components/group/update/GroupUpdateModal.tsx
@@ -6,7 +6,7 @@ import GroupUpdatePanel from './GroupUpdatePanel';
 import { GroupUpdateInfo } from '@/@types/Group';
 import { deleteGroup, DeleteGroupParams } from '@/api/group/deleteGroup';
 import Button from '@/components/Common/Button/Button.tsx';
-import Modal from '@/components/Common/Modal';
+import Modal from '@/components/Common/Modal/Modal';
 import useToastStore from '@/stores/ToastStore';
 import { LabelColorType } from '@/styles/Theme';
 

diff --git a/src/components/review/view/ReviewView.tsx b/src/components/review/view/ReviewView.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { WhiteContainer } from '@/components/Common/Container';
+import { PrevWhiteContainer } from '@/components/Common/PrevContainer';
 
 type ReviewBlockProps = {
   icon: string;
@@ -17,13 +17,13 @@ function ReviewView({ icon, blockType, title, content }: ReviewBlockProps) {
         e.dataTransfer.setData('blockType', blockType)
       }
     >
-      <WhiteContainer $width="1300" className="flex flex-col">
+      <PrevWhiteContainer $width="1300" className="flex flex-col">
         <div className="flex">
           <img src={icon} className="w-5 mr-2" />
           <span>{title}</span>
         </div>
         <div className="text-sm my-1">{content}</div>
-      </WhiteContainer>
+      </PrevWhiteContainer>
     </div>
   );
 }

diff --git a/src/components/review/view/V4F.tsx b/src/components/review/view/V4F.tsx
@@ -1,4 +1,4 @@
-import { WhiteContainer } from '@/components/Common/Container';
+import { PrevWhiteContainer } from '@/components/Common/PrevContainer';
 import Divider from '@/components/Common/Divider/Divider';
 import Text from '@/components/Common/Text/Text';
 import { FourFContent } from '@/objects/ReviewContent.ts';
@@ -9,7 +9,7 @@ type V4FProps = {
 
 function V4F({ content }: V4FProps) {
   return (
-    <WhiteContainer $width="900" className="flex justify-around gap-4">
+    <PrevWhiteContainer $width="900" className="flex justify-around gap-4">
       <div className="w-500 flex flex-col gap-4 justify-between">
         <div>
           <div className="font-semibold">사실(Facts)</div>
@@ -45,7 +45,7 @@ function V4F({ content }: V4FProps) {
           </div>
         </div>
       </div>
-    </WhiteContainer>
+    </PrevWhiteContainer>
   );
 }
 

diff --git a/src/components/review/view/VEmotion.tsx b/src/components/review/view/VEmotion.tsx
@@ -1,4 +1,3 @@
-
 import Bad from '@/assets/icons/emoji/bad.svg';
 import Congrats from '@/assets/icons/emoji/congrats.svg';
 import Cry from '@/assets/icons/emoji/cry.svg';
@@ -10,8 +9,8 @@ import Sick from '@/assets/icons/emoji/sick.svg';
 import Smile from '@/assets/icons/emoji/smile.svg';
 import Stareyes from '@/assets/icons/emoji/stareyes.svg';
 import Tired from '@/assets/icons/emoji/tired.svg';
-import Smiley             from '@/assets/icons/smiley.svg';
-import { WhiteContainer } from '@/components/Common/Container';
+import Smiley from '@/assets/icons/smiley.svg';
+import { PrevWhiteContainer } from '@/components/Common/PrevContainer';
 import { EmotionContent } from '@/objects/ReviewContent.ts';
 
 type VEmotionProps = {
@@ -47,14 +46,14 @@ function VEmotion({ content }: VEmotionProps) {
   };
 
   return (
-    <WhiteContainer $width="900">
+    <PrevWhiteContainer $width="900">
       <div className="flex flex-row">
         <img src={Smiley} alt="기분" className="w-5 mr-2" />
         <span>오늘의 기분</span>
       </div>
       {renderEmoji(content.emoji)}
       {content.description}
-    </WhiteContainer>
+    </PrevWhiteContainer>
   );
 }
 

diff --git a/src/components/review/view/VKpt.tsx b/src/components/review/view/VKpt.tsx
@@ -1,4 +1,4 @@
-import { WhiteContainer } from '@/components/Common/Container';
+import { PrevWhiteContainer } from '@/components/Common/PrevContainer';
 import Divider from '@/components/Common/Divider/Divider';
 import Text from '@/components/Common/Text/Text';
 import { KPTContent } from '@/objects/ReviewContent.ts';
@@ -9,7 +9,7 @@ type VKptProps = {
 
 function V4F({ content }: VKptProps) {
   return (
-    <WhiteContainer $width="900" className="flex justify-between gap-4">
+    <PrevWhiteContainer $width="900" className="flex justify-between gap-4">
       <div className="w-500 flex flex-col gap-4 justify-between">
         <div>
           <div className="font-semibold">Keep</div>
@@ -32,7 +32,7 @@ function V4F({ content }: VKptProps) {
           <Text content={content.tryStr} />
         </div>
       </div>
-    </WhiteContainer>
+    </PrevWhiteContainer>
   );
 }
 

diff --git a/src/components/review/view/VPicture.tsx b/src/components/review/view/VPicture.tsx
@@ -1,4 +1,4 @@
-import { WhiteContainer } from '@/components/Common/Container';
+import { PrevWhiteContainer } from '@/components/Common/PrevContainer';
 import { PictureContent } from '@/objects/ReviewContent.ts';
 
 type VPictureProps = {
@@ -7,9 +7,9 @@ type VPictureProps = {
 
 function VPicture({ content }: VPictureProps) {
   return (
-    <WhiteContainer $width="900" className="flex justify-center">
+    <PrevWhiteContainer $width="900" className="flex justify-center">
       <img src={content.path} alt="사진" />
-    </WhiteContainer>
+    </PrevWhiteContainer>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,4 +47,4 @@ const containerTheme = { @@
       },
     };
-    export { Container, WhiteContainer };
+    export { Container as PrevContainer, WhiteContainer as PrevWhiteContainer };