Merge pull request #5 from cmg8431/feature/4-common

feat: 공통 layouts 및 components 추가

.eslintrc.js

@@ -29,7 +29,7 @@ module.exports = {
     'prettier/prettier': ['error', { endOfLine: 'auto' }],
     'import/no-unresolved': 'error',
     'import/order': [
-      'error',
+      'warn',
       {
         groups: [
           'builtin',

next.config.js

@@ -1,7 +1,16 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  pageExtensions: ['tsx'],
-};
 
-module.exports = nextConfig;
+const withMDX = require('@next/mdx')({
+  extension: /\.mdx?$/,
+});
+
+module.exports = withMDX({
+  pageExtensions: ['tsx', 'md', 'mdx'],
+  experimental: {
+    scrollRestoration: true,
+  },
+  webpack: (config, { isServer }) => {
+    if (!isServer) config.resolve.fallback.fs = false;
+    return config;
+  },
+});

package.json

@@ -10,8 +10,17 @@
     "postinstall": "husky install"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@next/mdx": "^13.3.0",
     "@stitches/react": "^1.2.8",
+    "framer-motion": "^8.4.2",
     "next": "^13.1.1",
+    "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/assets/gif/index.ts

@@ -0,0 +1 @@
+export { default as GiphyGIF } from './giphy.gif';

src/assets/index.ts

@@ -0,0 +1,2 @@
+export * from './gif';
+export * from './png';

src/assets/png/index.ts

@@ -0,0 +1 @@
+export { default as ProfilePNG } from './profile.png';

src/components/common/Button/index.tsx

@@ -0,0 +1,64 @@
+import Image from 'next/image';
+
+import { Variants } from 'framer-motion';
+
+import * as S from './styled';
+
+type ButtonThemeType = 'default';
+
+interface ButtonProps extends React.ComponentProps<typeof S.ButtonElement> {
+  icon?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  interval?: boolean;
+  theme?: ButtonThemeType;
+  size?: 'sm' | 'md' | 'lg';
+  children?: React.ReactNode;
+}
+
+export const Button = ({
+  icon,
+  loading = false,
+  disabled = false,
+  fullWidth = false,
+  theme = 'default',
+  size = 'lg',
+  ...props
+}: ButtonProps) => {
+  const getButtonVariants = (disabled: boolean): Variants => {
+    if (disabled) return {};
+    return {
+      hover: {
+        scale: 1.03,
+        transition: {
+          duration: 0.15,
+        },
+      },
+      tap: {
+        scale: 0.97,
+        opacity: 0.65,
+        transition: {
+          duration: 0.15,
+        },
+      },
+    };
+  };
+
+  return (
+    <S.ButtonElement
+      type="button"
+      size={size}
+      fw={fullWidth}
+      theme={theme}
+      disabled={disabled}
+      whileHover="hover"
+      whileTap="tap"
+      variants={getButtonVariants(disabled)}
+      {...props}
+    >
+      {icon && <Image src={icon} alt={''} />}
+      <p>{loading ? '로딩 중' : props.children}</p>
+    </S.ButtonElement>
+  );
+};

src/components/common/Button/styled.ts

@@ -0,0 +1,53 @@
+import { styled } from '@/stitches.config';
+import { motion } from 'framer-motion';
+
+export const ButtonElement = styled(motion.button, {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+  border: 'none',
+  borderRadius: '12px',
+  variants: {
+    theme: {
+      default: {
+        backgroundColor: '$background',
+        color: '$color',
+        border: '1px solid $gray-200',
+      },
+    },
+    fw: {
+      true: {
+        width: '100%',
+      },
+    },
+    disabled: {
+      true: {
+        opacity: '0.7',
+        cursor: 'not-allowed',
+      },
+    },
+    interval: {
+      true: {
+        gap: '10px',
+      },
+    },
+    size: {
+      sm: {
+        height: '38px',
+        padding: '0 12px',
+        fontSize: '$x3',
+      },
+      md: {
+        height: '46px',
+        padding: '0 20px',
+        fontSize: '14px',
+      },
+      lg: {
+        height: '62px',
+        padding: '0 24px',
+        fontSize: '16px',
+      },
+    },
+  },
+});

src/components/common/Footer/index.tsx

@@ -0,0 +1,54 @@
+import { Typo } from '../Typography';
+import * as S from './styled';
+
+const SITE_FOOTER_CONTENT = [
+  {
+    title: '사이트맵',
+    contents: [
+      {
+        text: '홈',
+        href: '/home',
+      },
+      {
+        text: '프로필',
+        href: '/home',
+      },
+      {
+        text: '블로그',
+        href: '/home',
+      },
+    ],
+  },
+];
+
+export const Footer = () => {
+  return (
+    <S.FooterWrapper>
+      <S.FooterContainer>
+        <div>
+          {SITE_FOOTER_CONTENT.map((v) => {
+            return (
+              <div>
+                <div>{v.title}</div>
+                {v.contents.map((content) => {
+                  return <div>{content.text}</div>;
+                })}
+              </div>
+            );
+          })}
+        </div>
+        <Typo.Detail
+          style={{
+            color: 'var(--colors-gray600)',
+            fontSize: '0.7rem',
+            textAlign: 'center',
+          }}
+        >
+          Copyright ⓒ 2023 <strong>mingi</strong> All rights reserved.
+          <br /> Created by <strong>@cmg8431.</strong>Powered By{' '}
+          <strong>@cmg8431</strong>
+        </Typo.Detail>
+      </S.FooterContainer>
+    </S.FooterWrapper>
+  );
+};

src/components/common/Footer/styled.ts

@@ -0,0 +1,17 @@
+import { styled } from '@/stitches.config';
+
+export const FooterWrapper = styled('footer', {
+  width: '100%',
+  bottom: '0',
+  left: '0',
+  borderTop: '1px solid $gray100',
+  marginTop: '2rem',
+});
+
+export const FooterContainer = styled('div', {
+  display: 'flex',
+  maxWidth: '700px',
+  padding: '2rem 0rem',
+  margin: '0 auto',
+  flexDirection: 'column',
+});

src/components/common/GlobalNavigationBar/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { useRouter } from 'next/router';
+
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import * as S from './styled';
+
+export type GlobalNavigationBarMenuType = {
+  to: string;
+  icon: IconDefinition;
+  text: string;
+};
+
+export interface GlobalNavigationBarProps {
+  menu: GlobalNavigationBarMenuType[];
+}
+
+export const GlobalNavigationBar: React.FC<GlobalNavigationBarProps> = ({
+  menu,
+}) => {
+  const router = useRouter();
+
+  const menuItems = menu.map(({ to, icon: Icon, text }) => ({
+    to,
+    Icon,
+    text,
+    active: to === router.pathname,
+  }));
+
+  return (
+    <S.GlobalNavigationBarContainer>
+      <S.GlobalNavigationBarItemListContainer>
+        {menuItems.map(({ to, Icon, text, active }) => (
+          <S.GlobalNavigationItemContainer key={to} href={to}>
+            <FontAwesomeIcon
+              icon={Icon}
+              size="lg"
+              color={active ? 'var(--colors-gray900)' : 'var(--colors-gray300)'}
+            />
+            <S.ItemText active={active}>{text}</S.ItemText>
+          </S.GlobalNavigationItemContainer>
+        ))}
+      </S.GlobalNavigationBarItemListContainer>
+    </S.GlobalNavigationBarContainer>
+  );
+};

src/components/common/GlobalNavigationBar/styled.ts

@@ -0,0 +1,55 @@
+import Link from 'next/link';
+
+import { styled } from '@/stitches.config';
+
+export const GlobalNavigationBarContainer = styled('nav', {
+  width: '100%',
+  position: 'fixed',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  maxWidth: '750px',
+  margin: '0 auto',
+  borderTop: '1px solid $gray100',
+  borderRadius: '1.2rem 1.2rem 0 0',
+  backgroundColor: '$background',
+  background: 'rgba(255, 255, 255, 0.045)',
+  backdropFilter: 'blur(5px)',
+});
+
+export const GlobalNavigationBarItemListContainer = styled('div', {
+  width: '100%',
+  display: 'flex',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  padding: '0.7rem 2rem',
+  maxWidth: '600px',
+  margin: '0 auto',
+});
+
+export const GlobalNavigationItemContainer = styled(Link, {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textDecoration: 'none',
+});
+
+export const ItemText = styled('p', {
+  fontSize: '0.9rem',
+  fontWeight: 700,
+  textAlign: 'center',
+  color: '$color',
+  marginTop: '0.4rem',
+
+  variants: {
+    active: {
+      true: {
+        color: '$gray900',
+      },
+      false: {
+        color: '$gray300',
+      },
+    },
+  },
+});