Merge pull request #9 from JohnsonMao/feature/group

feature: group page and js alias import config

.babelrc

@@ -10,5 +10,25 @@
         }
       ]
     ],
-    "plugins": ["@emotion/babel-plugin"]
+    "plugins": [
+      [
+        "babel-plugin-import",
+        {
+          "libraryName": "@mui/material",
+          "libraryDirectory": "",
+          "camel2DashComponentName": false
+        },
+        "core"
+      ],
+      [
+        "babel-plugin-import",
+        {
+          "libraryName": "@mui/icons-material",
+          "libraryDirectory": "",
+          "camel2DashComponentName": false
+        },
+        "icons"
+      ],
+      "@emotion/babel-plugin"
+    ]
   }

.eslintrc.js

@@ -14,13 +14,14 @@ module.exports = {
     node: true,
   },
   ignorePatterns: ['.eslintrc.js'],
-  // settings: {
-  //   'import/resolver': {
-  //     node: {
-  //       extensions: ['.js', '.jsx', '.ts', '.tsx'],
-  //     },
-  //   },
-  // },
+  settings: {
+    'import/resolver': {
+      alias: {
+        extensions: ['.js', '.jsx'],
+        map: [['@', '.']],
+      },
+    },
+  },
   rules: {
     'react/no-unescaped-entities': 'off',
     '@next/next/no-page-custom-font': 'off',
@@ -41,6 +42,7 @@ module.exports = {
     'operator-linebreak': 0,
     'function-paren-newline': 0,
     'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/control-has-associated-label': 0,
     'jsx-a11y/no-noninteractive-element-interactions': 0,
     'react/jsx-one-expression-per-line': 0,
     'no-confusing-arrow': 0,

components/Group/AreaChips.jsx

@@ -0,0 +1,47 @@
+import { useCallback, useMemo } from 'react';
+import styled from '@emotion/styled';
+import { AREAS } from '@/constants/areas';
+import useSearchParamsManager from '@/hooks/useSearchParamsManager';
+import Chip from '@/shared/components/Chip';
+
+const StyledAreaChips = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+`;
+
+const AreaChips = () => {
+  const [getSearchParams, pushState] = useSearchParamsManager();
+
+  const currentArea = useMemo(
+    () =>
+      getSearchParams('area').filter((area) =>
+        AREAS.find(({ name }) => name === area),
+      ),
+    [getSearchParams],
+  );
+
+  const handleClickArea = useCallback(
+    (event) => {
+      const targetArea = event.target.parentNode.textContent;
+      const areas = currentArea.filter((area) => area !== targetArea);
+
+      pushState('area', areas.toString());
+    },
+    [pushState, currentArea],
+  );
+
+  return (
+    currentArea.length > 0 && (
+      <StyledAreaChips>
+        {currentArea.map((name) => (
+          <li key={name}>
+            <Chip value={name} onDelete={handleClickArea} />
+          </li>
+        ))}
+      </StyledAreaChips>
+    )
+  );
+};
+
+export default AreaChips;

components/Group/Banner.jsx

@@ -0,0 +1,74 @@
+import { useRouter } from 'next/router';
+import styled from '@emotion/styled';
+import Button from '@/shared/components/Button';
+import groupBannerImg from '@/public/assets/group-banner.png';
+import Image from '@/shared/components/Image';
+
+const StyledBanner = styled.div`
+  position: relative;
+
+  picture {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    height: 398px;
+    img {
+      height: inherit;
+    }
+  }
+
+  h1 {
+    margin-bottom: 8px;
+    font-weight: 700;
+    font-size: 36px;
+    line-height: 140%;
+    color: #536166;
+  }
+
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 140%;
+    color: #536166;
+  }
+
+  > div {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 100px;
+  }
+`;
+
+const Banner = () => {
+  const router = useRouter();
+
+  const handleClick = () => {
+    // TODO: 判斷是否登入決定按鈕導向哪個頁面
+    router.push('/login');
+  };
+
+  return (
+    <StyledBanner>
+      <picture>
+        <Image
+          src={groupBannerImg.src}
+          alt="揪團封面"
+          height="inherit"
+          background="linear-gradient(#fcfefe 10%, #e0f1f2 40%)"
+          borderRadius="0"
+        />
+      </picture>
+      <div>
+        <h1>揪團</h1>
+        <p>想一起組織有趣的活動或學習小組嗎？</p>
+        <p>註冊並加入我們，然後創建你的活動，讓更多人一起參加！</p>
+        <Button onClick={handleClick}>我想揪團</Button>
+      </div>
+    </StyledBanner>
+  );
+};
+
+export default Banner;

components/Group/GroupList/GroupCard.jsx

@@ -0,0 +1,54 @@
+import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
+import Image from '@/shared/components/Image';
+import {
+  StyledAreas,
+  StyledContainer,
+  StyledFooter,
+  StyledGroupCard,
+  StyledInfo,
+  StyledLabel,
+  StyledText,
+  StyledTitle,
+} from './GroupCard.styled';
+
+function GroupCard({
+  photoURL,
+  photoAlt,
+  title = '未定義主題',
+  category = [],
+  partnerEducationStep,
+  description,
+  area,
+}) {
+  return (
+    <StyledGroupCard>
+      <Image alt={photoAlt} src={photoURL} />
+      <StyledContainer>
+        <StyledTitle>{title}</StyledTitle>
+        <StyledInfo>
+          <StyledText>
+            <StyledLabel>學習領域</StyledLabel>
+            <span>{category.join('、')}</span>
+          </StyledText>
+          <StyledText>
+            <StyledLabel>適合階段</StyledLabel>
+            <span>{partnerEducationStep}</span>
+          </StyledText>
+        </StyledInfo>
+        <StyledText lineClamp="2" fontSize="14px">
+          {description}
+        </StyledText>
+        <StyledAreas>
+          <LocationOnOutlinedIcon fontSize="16px" sx={{ color: '#536166' }} />
+          <StyledText color="#92989A">{area}</StyledText>
+        </StyledAreas>
+        <StyledFooter>
+          <time>2天前更新</time>
+          <div>揪團中</div>
+        </StyledFooter>
+      </StyledContainer>
+    </StyledGroupCard>
+  );
+}
+
+export default GroupCard;

components/Group/GroupList/GroupCard.styled.jsx

@@ -0,0 +1,104 @@
+import styled from '@emotion/styled';
+
+export const StyledLabel = styled.span`
+  flex-basis: 50px;
+  color: #293a3d;
+  font-size: 12px;
+  font-weight: bold;
+`;
+
+export const StyledText = styled.div`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: ${(props) => props.lineClamp || '1'};
+  overflow: hidden;
+  color: ${(props) => props.color || '#536166'};
+  font-size: ${(props) => props.fontSize || '12px'};
+`;
+
+export const StyledTitle = styled.h2`
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.4;
+`;
+
+export const StyledInfo = styled.div`
+  ${StyledLabel} {
+    margin-right: 5px;
+    padding-right: 5px;
+    border-right: 1px solid #536166;
+  }
+`;
+
+export const StyledFooter = styled.footer`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  time,
+  div {
+    font-size: 12px;
+  }
+
+  time {
+    font-weight: 300;
+    color: #92989a;
+  }
+
+  div {
+    --bg-color: #def5f5;
+    --color: #16b9b3;
+    display: flex;
+    align-items: center;
+    padding: 4px 10px;
+    background: var(--bg-color);
+    color: var(--color);
+    border-radius: 4px;
+    font-weight: 500;
+    gap: 4px;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 8px;
+      height: 8px;
+      background: var(--color);
+      border-radius: 50%;
+    }
+
+    &.end {
+      --bg-color: #f3f3f3;
+      --color: #92989a;
+    }
+  }
+`;
+
+export const StyledContainer = styled.div`
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const StyledAreas = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const StyledGroupCard = styled.div`
+  position: relative;
+  background: #fff;
+  padding: 0.5rem;
+  transition: transform 0.15s, box-shadow 0.15s;
+  border-radius: 4px;
+
+  &:hover {
+    z-index: 1;
+    transform: scale(1.0125);
+    box-shadow: 0 0 6px 2px #0001;
+  }
+
+  img {
+    vertical-align: middle;
+  }
+`;