Design 공모전 대외활동 UI 추가

src/components/atoms/Divider/index.tsx

@@ -0,0 +1,34 @@
+import { ComponentProps } from 'react';
+
+interface Props extends ComponentProps<'div'> {
+  space?: number;
+  size?: 'sm' | 'md' | 'lg';
+  color?: string;
+  type?: 'vertical' | 'horizontal';
+}
+
+const Divider = ({
+  space = 22,
+  size = 'md',
+  color = '#ccc',
+  type = 'horizontal',
+  ...props
+}: Props) => {
+  const horizontalStyle = {
+    marginTop: space,
+    marginBottom: space,
+    background: color,
+    height: size === 'md' ? '2px' : size === 'lg' ? '3px' : '1px',
+  };
+
+  const verticalStyle = {
+    marginLeft: space,
+    marginRight: space,
+    background: color,
+    width: size === 'md' ? '2px' : size === 'lg' ? '3px' : '1px',
+  };
+
+  return <div style={type === 'vertical' ? verticalStyle : horizontalStyle} {...props} />;
+};
+
+export default Divider;

src/components/layout/header/index.tsx

@@ -8,7 +8,7 @@ import { MENU_ITEMS } from '@/constants/menus';
 import toast from 'react-hot-toast';
 import { signOut } from '@/components/signIn/utils/logout';
 
-type MenuType = 'community' | 'study' | 'project' | 'portfolio' | 'review';
+type MenuType = 'community' | 'study' | 'project' | 'portfolio' | 'review' | 'activity';
 
 const Header = () => {
   const [selectedMenu, setSelectedMenu] = useState<MenuType | null>(null);
@@ -45,7 +45,7 @@ const Header = () => {
     if (liElement) {
       const menuItem = liElement.getAttribute('data-menu') as MenuType;
       if (menuItem) {
-        if (menuItem !== 'community' && menuItem !== 'review') {
+        if (menuItem !== 'community' && menuItem !== 'review' && menuItem !== 'activity') {
           alert('준비중입니다.');
           navigate(`/community`);
         }

src/constants/menus.ts

@@ -1,6 +1,7 @@
 export const MENU_ITEMS = [
   { name: '소근소근', path: 'community' },
   { name: '스터디', path: 'study' },
+  { name: '활동', path: 'activity' },
   { name: '프로젝트', path: 'project' },
   { name: '포트폴리오', path: 'portfolio' },
   { name: '리뷰', path: 'review' },

src/pages/activity/components/Item.module.scss

@@ -0,0 +1,79 @@
+@use '@/styles/abstracts/variables' as v;
+@use '@/styles/abstracts/mixins' as m;
+
+.list {
+  width: 33.333%;
+
+  @include m.mobile {
+    width: 50%;
+  }
+
+  margin-bottom: 3rem;
+
+  & > button {
+    display: flex;
+    flex-flow: column;
+
+    box-shadow: rgba(120, 120, 120, 0.2) 0px 1px 8px 0px;
+    border-radius: 10px;
+
+    padding: 0.5rem;
+
+    width: 220px;
+
+    border: 2px solid v.$extra-light-gray;
+
+    background-color: transparent;
+
+    &:hover {
+      box-shadow: v.$red-100 0px 2px 8px 0px;
+    }
+    // 2 5 8 11
+
+    & > div:first-of-type {
+      border-radius: 10px;
+      overflow: hidden;
+
+      height: 200px;
+
+      & > img {
+        display: block;
+        width: 100%;
+        height: 100%;
+
+        object-fit: cover;
+      }
+    }
+    & > div:nth-of-type(2) {
+      font-size: 1.2rem;
+      width: 90%;
+
+      text-align: left;
+
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      padding: 0.7rem 0;
+    }
+    & > div:last-of-type {
+      display: flex;
+      justify-content: space-between;
+
+      color: v.$gray;
+      font-size: 0.9rem;
+
+      width: 100%;
+
+      & > span:first-of-type {
+        width: 80%;
+
+        text-align: left;
+
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}

src/pages/activity/components/Item.tsx

@@ -0,0 +1,38 @@
+import { ComponentProps } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styles from './Item.module.scss';
+
+interface Props extends ComponentProps<'li'> {
+  title: string;
+  organization: string;
+  imageUrl: string;
+  dDay: number;
+  itemId: number;
+  type?: 'activities' | 'competitions';
+}
+
+const Item = ({ title, organization, imageUrl, dDay, itemId, type }: Props) => {
+  const navigate = useNavigate();
+
+  return (
+    <li className={styles.list}>
+      <button
+        onClick={() => {
+          if (!type) return;
+          navigate(`/activity/${itemId}?t=${type}`);
+        }}
+      >
+        <div>
+          <img src={imageUrl} alt={title} />
+        </div>
+        <div>{title}</div>
+        <div>
+          <span>{organization}</span>
+          <span>D-{dDay}</span>
+        </div>
+      </button>
+    </li>
+  );
+};
+
+export default Item;

src/pages/activity/components/StatusBadge.module.scss

@@ -0,0 +1,33 @@
+@use '@/styles/abstracts/variables' as v;
+
+.status {
+  position: relative;
+  background-color: transparent;
+
+  margin-right: 1rem;
+  padding: 0.2rem 0.6rem;
+
+  border: 1px solid v.$light-gray;
+  border-radius: 1rem;
+
+  &.active {
+    border: 1px solid v.$red-300;
+  }
+
+  & > span:first-of-type {
+    display: inline-block;
+
+    margin-right: 0.5rem;
+
+    width: 10px;
+    height: 10px;
+
+    background-color: v.$light-gray;
+
+    border-radius: 50%;
+  }
+
+  & > span.active:first-of-type {
+    background-color: v.$red-300;
+  }
+}

src/pages/activity/components/StatusBadge.tsx

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+import styles from './StatusBadge.module.scss';
+
+interface Props extends ComponentProps<'button'> {
+  text: string;
+  active?: boolean;
+}
+
+const StatusBadge = ({ text, active = false, ...props }: Props) => {
+  const className = `${styles.status} ${active ? styles.active : ''}`;
+
+  return (
+    <button className={className} {...props}>
+      <span className={active ? styles.active : ''} />
+      <span>{text}</span>
+    </button>
+  );
+};
+
+export default StatusBadge;

src/pages/activity/components/TabTitle.module.scss

@@ -0,0 +1,38 @@
+@use '@/styles/abstracts/variables' as v;
+
+.title {
+  position: relative;
+
+  margin: 0 1rem 0.5rem 0;
+
+  font-size: v.$text-xl;
+  font-weight: v.$font-medium;
+
+  background-color: transparent;
+
+  &::before {
+    position: absolute;
+    content: '';
+    bottom: 0;
+    left: 0;
+    height: 1rem;
+    width: 0;
+    z-index: -1;
+    background-color: v.$red-200;
+    opacity: 0.5;
+
+    transition: all 0.2s;
+  }
+
+  &.active::before {
+    position: absolute;
+    content: '';
+    bottom: 0;
+    left: 0;
+    height: 1rem;
+    width: 100%;
+    z-index: -1;
+    background-color: v.$red-200;
+    opacity: 0.5;
+  }
+}

src/pages/activity/components/TabTitle.tsx

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+import styles from './TabTitle.module.scss';
+
+interface Props extends ComponentProps<'button'> {
+  text: string;
+  active?: boolean;
+}
+
+const TabTitle = ({ text, active = false, ...props }: Props) => {
+  const className = `${styles.title} ${active ? styles.active : ''}`;
+
+  return (
+    <button className={className} {...props}>
+      {text}
+    </button>
+  );
+};
+
+export default TabTitle;