style: update style details

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@hookstate/core": "^4.0.1",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.5.5",

src/components/JobList/JobFilter.tsx

@@ -1,9 +1,10 @@
 import { breakpoints, uiConfigs } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+import { calculateTotalJobCount } from '../../../utils/jobs'
 import { FilterTitle } from '../Filter'
 import { Job } from './JobItem' // adjust path accordingly
 
-interface BoardJobs {
+export interface BoardJobs {
   [key: string]: Job[]
 }
 
@@ -28,10 +29,6 @@ const JobFilter = ({ data, activeBUs, setActiveBUs }: Props) => {
     }
   }
 
-  const calculateTotalJobCount = (units: BoardJobs): number => {
-    return Object.keys(units).reduce((sum, unit) => sum + units[unit].length, 0)
-  }
-
   return (
     <Container>
       <FilterTitle

src/components/Mission/Mission.tsx

@@ -33,9 +33,8 @@ const Container = styled.div`
 
   h2 {
     font-size: 36px;
-    font-style: normal;
     font-weight: 400;
-    line-height: normal;
+    line-height: 42px;
     margin-top: 24px;
   }
 

src/components/Portfolio/PortfolioItem.tsx

@@ -128,11 +128,15 @@ const Title = styled.div`
   gap: 16px;
   align-items: center;
   width: 100%;
+
+  @media (max-width: ${breakpoints.md}px) {
+    gap: 12px;
+  }
 `
 
 const TitleText = styled.h3`
-  font-size: 26px;
-  line-height: 130%;
+  font-size: 22px;
+  line-height: 26px;
 
   @media (max-width: ${breakpoints.md}px) {
     font-size: 16px;
@@ -148,14 +152,15 @@ const Tag = styled.div`
   font-size: 12px;
   line-height: 16px;
   height: 24px;
-  border-radius: 12px;
-  padding: 4px 9px;
+  padding: 4px 10px;
   box-sizing: border-box;
   cursor: pointer;
-  border: 1px solid black;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.18);
 
   @media (max-width: ${breakpoints.md}px) {
-    font-size: 11px;
+    font-size: 12px;
+    padding: 4px 8px;
   }
 `
 

src/components/Team/Member.tsx

@@ -42,7 +42,7 @@ const ImageContainer = styled.div`
   position: relative;
   width: 100%;
   margin-bottom: 16px;
-  aspect-ratio: 4/3;
+  aspect-ratio: 1;
 `
 
 const MemberImage = styled(Image)`

utils/jobs.ts

@@ -0,0 +1,8 @@
+import { BoardJobs } from '@/components/JobList/JobFilter'
+
+export const calculateTotalJobCount = (units: BoardJobs): number => {
+  if (!units) {
+    return 0
+  }
+  return Object.keys(units).reduce((sum, unit) => sum + units[unit].length, 0)
+}

yarn.lock

@@ -196,6 +196,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.51.0.tgz#6d419c240cfb2b66da37df230f7e7eef801c32fa"
   integrity sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg==
 
+"@hookstate/core@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@hookstate/core/-/core-4.0.1.tgz#6744380e96ce13fe3488c926c1cbae93bbea0ff6"
+  integrity sha512-Uh2D8Z0z/pqOJ7t+SfC+2sj13JQcB4yFhtL+T1choCaBxTSlgOS/CKRBohgJ4cjTKoxOmTT8uSQysu3gUjX+Gw==
+
 "@humanwhocodes/config-array@^0.11.11":
   version "0.11.11"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"