Merge pull request #50 from Team-Tiki/feature/archiving/#37-timeblock

[Feat] 타임 블록 구현

src/common/component/Button/Button.style.ts

@@ -36,7 +36,7 @@ export const variantStyle = (variant: Required<ButtonProps>['variant']) => {
     }),
     text: css({
       backgroundColor: 'transparent',
-      ...theme.label.label01,
+      ...theme.text.body04,
     }),
     action: css({
       color: theme.colors.white,
@@ -49,13 +49,13 @@ export const variantStyle = (variant: Required<ButtonProps>['variant']) => {
 export const sizeStyle = (size: Required<ButtonProps>['size']) => {
   const style = {
     large: css({
-      ...theme.text.body02,
+      ...theme.text.body03,
     }),
     medium: css({
-      ...theme.text.body04,
+      ...theme.text.body05,
     }),
     small: css({
-      ...theme.text.body05,
+      ...theme.text.body06,
     }),
   };
   return style[size];

src/common/component/Heading/Heading.tsx

@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef } from 'react';
 
 import { headingStyle } from './heading.style';
 
-type HeadingType = 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6' | 'H7';
+type HeadingType = 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6';
 
 interface HeadingProps extends ComponentPropsWithoutRef<'h3'> {
   tag?: HeadingType;
@@ -15,7 +15,6 @@ const HeadingTag = {
   H4: 'h4',
   H5: 'h5',
   H6: 'h6',
-  H7: 'h6',
 } as const;
 
 const Heading = ({ tag = 'H3', ...props }: HeadingProps) => {

src/common/component/Heading/heading.style.ts

@@ -9,5 +9,4 @@ export const headingStyle = {
   H4: css(theme.heading.heading04),
   H5: css(theme.heading.heading05),
   H6: css(theme.heading.heading06),
-  H7: css(theme.heading.heading07),
 };

src/common/component/Input/Input.style.ts

@@ -46,7 +46,7 @@ export const inputStyle = css({
   },
 });
 
-export const variantStyle = ({ variant, isError }: { variant: Required<InputProps>['variant']; isError: boolean }) => {
+export const variantStyle = (variant: Required<InputProps>['variant'], isError: boolean) => {
   const borderColor = isError ? `${theme.colors.red}` : `${theme.colors.gray_400}`;
 
   const style = {

src/common/component/Input/Input.tsx

@@ -3,7 +3,6 @@ import React, { ForwardedRef, InputHTMLAttributes, forwardRef } from 'react';
 import {
   containerStyle,
   inputStyle,
-  inputSupportStyle,
   sizeStyle,
   variantStyle,
   warpperStyle,
@@ -40,7 +39,7 @@ const Input = (
   return (
     <article css={containerStyle}>
       {label && <Label id={label}>{label}</Label>}
-      <div css={[warpperStyle, variantStyle({ variant, isError }), sizeStyle(size)]}>
+      <div css={[warpperStyle, variantStyle(variant, isError), sizeStyle(size)]}>
         {LeftIcon && <LeftIcon />}
         <input ref={ref} css={inputStyle} {...props} />
       </div>

src/common/component/Label/Label.style.ts

@@ -3,8 +3,8 @@ import { css } from '@emotion/react';
 import { theme } from '@/common/style/theme/theme';
 
 export const textStyle = css({
-  fontSize: theme.label.label01.fontSize,
-  lineHeight: theme.label.label01.lineHeight,
+  fontSize: theme.text.body04.fontSize,
+  lineHeight: theme.text.body04.lineHeight,
 
   fontWeight: 600,
 });

src/common/component/Select/Select.style.ts

@@ -16,8 +16,8 @@ export const itemStyle = css({
   margin: '0.4rem 1.2rem',
   borderRadius: '8px',
 
-  fontSize: theme.text.body04.fontSize,
-  lineHeight: theme.text.body04.lineHeight,
+  fontSize: theme.text.body05.fontSize,
+  lineHeight: theme.text.body05.lineHeight,
 
   '&:hover, &:focus': {
     backgroundColor: theme.colors.blue_100,

src/common/component/Text/Text.style.ts

@@ -30,6 +30,14 @@ export const textStyle = (tag: Required<TextProps>['tag']) => {
       fontSize: theme.text.body06.fontSize,
       lineHeight: theme.text.body06.lineHeight,
     }),
+    body7: css({
+      fontSize: theme.text.body07.fontSize,
+      lineHeight: theme.text.body07.lineHeight,
+    }),
+    body8: css({
+      fontSize: theme.text.body08.fontSize,
+      lineHeight: theme.text.body08.lineHeight,
+    }),
   };
   return style[tag];
 };

src/common/style/theme/theme.ts

@@ -1,5 +1,7 @@
 const colors = {
   black: '#2C3030',
+  black_shade: 'linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.70) 100%))',
+  dimmed: 'rgba(0, 0, 0, 0.40)',
   gray_800: '#56585D',
   gray_700: '#6B6B6B',
   gray_600: '#909090',
@@ -38,10 +40,6 @@ const heading = {
     lineHeight: '2rem',
   },
   heading06: {
-    fontSize: '1.8rem',
-    lineHeight: '1.8rem',
-  },
-  heading07: {
     fontSize: '1.6rem',
     lineHeight: '1.6rem',
   },
@@ -54,56 +52,34 @@ const text = {
   },
   body02: {
     fontSize: '2rem',
-    lineHeight: '2rem',
+    lineHeight: '3.36rem',
   },
   body03: {
-    fontSize: '1.6rem',
-    lineHeight: '1.6rem',
+    fontSize: '2rem',
+    lineHeight: '2rem',
   },
   body04: {
     fontSize: '1.6rem',
-    lineHeight: '2.24rem',
+    lineHeight: '1.6rem',
   },
   body05: {
     fontSize: '1.4rem',
-    lineHeight: '1.4rem',
+    lineHeight: '2.24rem',
   },
   body06: {
     fontSize: '1.4rem',
-    lineHeight: '1.96rem',
+    lineHeight: '1.4rem',
   },
   body07: {
     fontSize: '1.4rem',
     lineHeight: '1.68rem',
   },
-} as const;
-
-const label = {
-  label01: {
-    fontSize: '1.6rem',
-    lineHeight: '1.6rem',
-  },
-  label02: {
-    fontSize: '1.4rem',
-    lineHeight: '1.4rem',
-  },
-  label03: {
+  body08: {
     fontSize: '1.2rem',
     lineHeight: '1.2rem',
   },
 } as const;
 
-const button = {
-  button01: {
-    fontsize: '1.6rem',
-    lineHeight: '1.6rem',
-  },
-  button02: {
-    fontSize: '1.4rem',
-    lineHeight: '1.4rem',
-  },
-} as const;
-
 const zIndex = {
   overlayTop: 4,
   overlayHigh: 3,
@@ -115,7 +91,5 @@ export const theme = {
   colors,
   heading,
   text,
-  label,
-  button,
   zIndex,
 };

src/page/archiving/component/DaySection/DaySection.style.ts

@@ -1,15 +1,16 @@
-import { theme } from '@/common/style/theme/theme';
-
-export const dayStyle = {
-  padding: '0.8rem 2.6rem',
-
-  border: 'none',
+import { css } from '@emotion/react';
 
-  backgroundColor: theme.colors.white,
-  ...theme.text.body04,
+import { theme } from '@/common/style/theme/theme';
 
-  cursor: 'pointer',
-};
+export const dayStyle = (isClicked: boolean) =>
+  css({
+    color: isClicked ? theme.colors.blue_900 : theme.colors.black,
+    padding: '0.8rem 2.6rem',
+    border: 'none',
+    backgroundColor: theme.colors.white,
+    ...theme.text.body04,
+    cursor: 'pointer',
+  });
 
 export const bodyStyle = {
   width: '6rem',

src/page/archiving/component/DaySection/DaySection.tsx

@@ -0,0 +1,17 @@
+import { bodyStyle, dayStyle } from './DaySection.style';
+
+interface DaySectionProps {
+  day: number;
+  isClicked: boolean;
+}
+
+const DaySection = ({ day, isClicked }: DaySectionProps) => {
+  return (
+    <>
+      <button css={dayStyle(isClicked)}>{day}</button>
+      <div css={bodyStyle} />
+    </>
+  );
+};
+
+export default DaySection;

src/page/archiving/component/MonthHeader/MonthHeader.style.ts

@@ -15,6 +15,7 @@ export const monthBtnStyle = {
   transition: 'all 0.2s ease-in-out',
 
   ...theme.text.body06,
+
   '&:hover': {
     color: theme.colors.blue_900,
     backgroundColor: theme.colors.blue_100,

src/page/archiving/component/MonthHeader/MonthHeader.tsx

@@ -1,7 +1,8 @@
-import Button from '@/common/component/Button/Button';
+import { monthBtnStyle } from '@/page/archiving/component/MonthHeader/MonthHeader.style';
+import { MONTHS } from '@/page/archiving/constant/month';
 
-import { months } from '../../constant/date';
-import { headerStyle, monthBtnStyle } from './MonthHeader.style';
+import Button from '@/common/component/Button/Button';
+import { headerStyle } from '@/common/component/Header/Header.style';
 
 interface MonthHeaderProps {
   onMonthClick: (month: string) => void;
@@ -10,7 +11,7 @@ interface MonthHeaderProps {
 const MonthHeader = ({ onMonthClick }: MonthHeaderProps) => {
   return (
     <section css={headerStyle}>
-      {months.map((month) => (
+      {MONTHS.map((month) => (
         <Button key={month} variant="primary" css={monthBtnStyle} onClick={() => onMonthClick(month)}>
           {month}
         </Button>

src/page/archiving/component/TimeBlock/TimeBlock.style.ts

@@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/common/style/theme/theme';
+
+export const blockStyle = (width: number) =>
+  css({
+    display: 'flex',
+
+    width: `${width}rem`,
+    height: '5.6rem',
+    padding: '0.5rem',
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    borderRadius: '100px',
+
+    backgroundColor: theme.colors.blue_100,
+    ...theme.text.body03,
+
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  });
+
+export const spanStyle = {
+  padding: '2rem 0.8rem',
+  marginRight: 'auto',
+
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+};

src/page/archiving/component/TimeBlock/TimeBlock.tsx

@@ -0,0 +1,23 @@
+import { blockStyle, spanStyle } from '@/page/archiving/component/TimeBlock/TimeBlock.style';
+
+import { ReactNode } from 'react';
+
+import Eclipse from '@/common/asset/svg/eclipse.svg?react';
+
+interface TimeBlockProps {
+  children: ReactNode;
+  width: number;
+}
+
+const TimeBlock = ({ children, width }: TimeBlockProps) => {
+  return (
+    <>
+      <div css={blockStyle(width)}>
+        <Eclipse width={47} height={47} css={{ flexShrink: 0 }} />
+        <span css={spanStyle}>{children}</span>
+      </div>
+    </>
+  );
+};
+
+export default TimeBlock;

src/page/archiving/constant/date.ts → src/page/archiving/constant/month.ts

@@ -1 +1 @@
-export const months = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] as const;
+export const MONTHS = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] as const;

src/story/page/archiving/DaySection.stories.tsx

@@ -1,4 +1,4 @@
-import DaySection from '@/page/archiving/component/DaySection';
+import DaySection from '@/page/archiving/component/DaySection/DaySection';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {

src/story/page/archiving/MonthHeader.stories.tsx

@@ -1,4 +1,4 @@
-import MonthHeader from '@/page/Archiving/component/MonthHeader';
+import MonthHeader from '@/page/archiving/component/MonthHeader/MonthHeader';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta = {

src/story/page/archiving/TimeBlock.stories.tsx

@@ -0,0 +1,33 @@
+import TimeBlock from '@/page/archiving/component/TimeBlock/TimeBlock';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Page/Archiving/TimeBlock',
+  component: TimeBlock,
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    children: ['타임 블록'],
+    width: 10,
+  },
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+    width: {
+      control: {
+        type: 'number',
+      },
+    },
+  },
+} satisfies Meta<typeof TimeBlock>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};