#37 chore: merge develop

.eslintrc.cjs

@@ -64,6 +64,9 @@ module.exports = {
     'react/prop-types': 0, // prop-type 지정
   },
   settings: {
+    react: {
+      version: 'detect', // 사용자가 설치한 버전을 자동으로 선택
+    },
     'import/parsers': {
       '@typescript-eslint/parser': ['.ts', '.tsx'],
     },

.github/workflows/chromatic.yml

@@ -0,0 +1,25 @@
+name: 'Chromatic Deployment'
+
+on: push
+
+jobs:
+  test:
+    name: Storybook Chromatic Deployment
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 .env
-*storybook.log
+*storybook.log
+storybook-static/*

package.json

@@ -9,7 +9,8 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_f4088febbfb82b7"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -41,6 +42,7 @@
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "chromatic": "^11.5.4",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",

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

@@ -40,7 +40,7 @@ export const variantStyle = (variant: Required<ButtonProps>['variant']) => {
     }),
     action: css({
       color: theme.colors.white,
-      backgroundColor: theme.colors.blue_100,
+      backgroundColor: theme.colors.blue_900,
     }),
   };
   return style[variant];

src/common/component/Header/Header.style.ts

@@ -2,11 +2,10 @@ import { css } from '@emotion/react';
 
 export const headerStyle = css({
   display: 'flex',
-
-  height: '8.8rem',
-
-  padding: '0 16rem',
-
   alignItems: 'center',
   justifyContent: 'space-between',
+
+  width: '100%',
+
+  padding: '2.4rem 16rem',
 });

src/common/component/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { SmallLogo } from '@/common/asset/svg';
+import SmallLogo from '@/common/asset/svg/logo_tiki_md.svg?react';
 
 import Button from '../Button/Button';
 import { headerStyle } from './Header.style';
@@ -18,16 +18,18 @@ export const DefaultHeader = () => {
 export const UserHeader = ({ isLogin = false }: HeaderProps) => {
   return (
     <header css={headerStyle}>
-      <SmallLogo />
-      {isLogin ? (
-        <Button variant="secondary" size="xxSmall">
-          로그아웃
-        </Button>
-      ) : (
-        <Button variant="secondary" size="xxSmall">
-          로그인
-        </Button>
-      )}
+      <SmallLogo width={100} height={40} />
+      <div>
+        {isLogin ? (
+          <Button variant="secondary" size="small">
+            로그아웃
+          </Button>
+        ) : (
+          <Button variant="secondary" size="small">
+            로그인
+          </Button>
+        )}
+      </div>
     </header>
   );
 };

src/common/component/Modal/Modal.style.ts

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 
+import { fadeIn } from '@/common/style/animation';
 import { theme } from '@/common/style/theme/theme';
 
 export const backgroundStyle = css({
@@ -17,19 +18,21 @@ export const backgroundStyle = css({
   height: '100vh',
 
   backgroundColor: 'rgba(0, 0, 0, 0.5)',
+
+  animation: `${fadeIn} 0.2s ease-in`,
 });
 
 export const dialogStyle = css({
   display: 'block',
 
   position: 'fixed',
-  paddingTop: '4.8rem',
-  paddingBottom: '4.8rem',
   top: '50%',
   left: '50%',
 
   zIndex: theme.zIndex.overlayTop,
 
+  padding: '4.8rem 5rem',
+
   borderRadius: '16px',
   border: 'none',
   outline: 'none',

src/common/component/Modal/Modal.tsx

@@ -1,39 +1,45 @@
-import { ReactElement, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { ReactElement, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 
 import { backgroundStyle, dialogStyle } from '@/common/component/Modal/Modal.style';
-import { useOutsideClick } from '@/common/hook';
 
 interface ModalProps {
   isOpen: boolean;
   children?: ReactElement;
-  onClose: () => void;
+  onClose?: () => void;
 }
 
 const Modal = ({ isOpen, children, onClose }: ModalProps) => {
-  const ref = useOutsideClick<HTMLDialogElement>(onClose);
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose?.();
+      }
+    },
+    [onClose]
+  );
 
-  // 모달이 열렸을 때 스크롤을 막기
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'auto';
+      window.addEventListener('keypress', handleKeyDown);
     }
 
     return () => {
       document.body.style.overflow = 'auto';
+      window.removeEventListener('keypress', handleKeyDown);
     };
-  }, [isOpen]);
+  }, [isOpen, handleKeyDown]);
 
   return (
     isOpen &&
-    ReactDOM.createPortal(
+    createPortal(
       <>
-        <article css={backgroundStyle} />
-        <dialog css={dialogStyle} ref={ref}>
-          {children}
-        </dialog>
+        <div onClick={() => onClose?.()} css={backgroundStyle} />
+        <dialog css={dialogStyle}>{children}</dialog>
       </>,
       document.body
     )

src/common/hook/index.ts

@@ -1,2 +1,4 @@
+export * from './useModal';
 export * from './useOutsideClick';
 export * from './useOverlay';
+export * from './usePreventGoBack';

src/common/hook/Modal/useModal.tsx → src/common/hook/useModal.tsx

@@ -1,8 +1,8 @@
 import { ReactElement, useCallback, useState } from 'react';
 
-import usePreventGoBack from '@/common/hook/usePreventGoBack';
+import { usePreventGoBack } from '@/common/hook/usePreventGoBack';
 
-const useModal = () => {
+export const useModal = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [currentContent, setCurrentContent] = useState<ReactElement | undefined>(undefined);
 
@@ -30,5 +30,3 @@ const useModal = () => {
     closeModal,
   };
 };
-
-export default useModal;

src/common/hook/usePreventGoBack.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-const usePreventGoBack = (isOpen: boolean, onClose: () => void) => {
+export const usePreventGoBack = (isOpen: boolean, onClose: () => void) => {
   useEffect(() => {
     const preventGoBack = () => {
       history.go(1);
@@ -15,5 +15,3 @@ const usePreventGoBack = (isOpen: boolean, onClose: () => void) => {
     return () => window.removeEventListener('popstate', preventGoBack);
   }, [isOpen, onClose]);
 };
-
-export default usePreventGoBack;

src/common/style/animation.ts

@@ -0,0 +1,10 @@
+import { keyframes } from '@emotion/react';
+
+export const fadeIn = keyframes`
+    0%{
+        opacity: 0;
+    }
+    100%{
+        opacity: 1;
+    }
+`;

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

@@ -0,0 +1,21 @@
+import { theme } from '@/common/style/theme/theme';
+
+export const dayStyle = {
+  padding: '0.8rem 2.6rem',
+
+  border: 'none',
+
+  backgroundColor: theme.colors.white,
+  ...theme.text.body04,
+
+  cursor: 'pointer',
+};
+
+export const bodyStyle = {
+  width: '6rem',
+  height: '48.4rem',
+
+  overflow: 'scroll',
+
+  backgroundColor: theme.colors.white,
+};

src/page/temp/component/MonthHeader/MonthHeader.style.ts → 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

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

src/page/temp/component/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/page/landing/LandingPage.style.ts

@@ -0,0 +1,35 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/common/style/theme/theme';
+
+export const landingStyle = css({
+  position: 'relative',
+
+  height: '100vh',
+
+  overflowY: 'auto',
+  scrollSnapType: 'y mandatory',
+
+  '& > section': {
+    height: '100vh',
+  },
+});
+
+export const sectionStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '2.4rem',
+
+  scrollSnapAlign: 'start',
+});
+
+export const startedButtonStyle = css({
+  width: '32rem',
+
+  marginTop: '0.8rem',
+
+  fontSize: theme.text.body01.fontSize,
+  lineHeight: theme.text.body01.lineHeight,
+});

src/page/landing/LandingPage.tsx

@@ -0,0 +1,31 @@
+import { landingStyle, sectionStyle, startedButtonStyle } from '@/page/landing/LandingPage.style';
+import LandingFeatureSection from '@/page/landing/component/FeatureSection/FeatureSection';
+
+import Button from '@/common/component/Button/Button';
+import Heading from '@/common/component/Heading/Heading';
+
+const LandingPage = () => {
+  return (
+    <main css={landingStyle}>
+      <section css={sectionStyle}>
+        <Heading tag="H1">동아리의 모든 순간을 쉽고 즐겁게</Heading>
+        <Heading tag="H2" css={{ fontWeight: 500 }}>
+          티키로 더 쉽고 편리한 동아리 활동을 경험하세요
+        </Heading>
+        <Button css={startedButtonStyle} variant="action">
+          시작하기
+        </Button>
+      </section>
+      <LandingFeatureSection
+        title="동아리의 모든 순간을 쉽고 즐겁게"
+        description="기능 설명입니다 기능 설명입니다 기능 설명입니다"
+      />
+      <LandingFeatureSection
+        title="교내 동아리 탐색하기"
+        description="기능 설명입니다 기능 설명입니다 기능 설명입니다"
+      />
+    </main>
+  );
+};
+
+export default LandingPage;