feat: 메인페이지 구현

dohy-eon · web-flow · commit ef4a656fcec1 · 2025-02-12T23:15:02.000+09:00
feat: 메인페이지 구현
diff --git a/src/assets/images/activityBar.svg b/src/assets/images/activityBar.svg
@@ -0,0 +1,18 @@
+<svg width="9" height="284" viewBox="0 0 9 284" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 1L4.49999 283" stroke="#00B493" stroke-opacity="0.42" stroke-linecap="round" stroke-dasharray="3 3"/>
+<circle cx="4.49998" cy="4.56321" r="1.52708" fill="#00B493"/>
+<circle cx="4.49996" cy="4.56319" r="2.54513" fill="#00B493" fill-opacity="0.5"/>
+<circle cx="4.49994" cy="4.56318" r="3.56318" fill="#00B493" fill-opacity="0.24"/>
+<circle cx="4.49998" cy="47.3213" r="1.52708" fill="#00B493"/>
+<circle cx="4.49996" cy="47.3213" r="2.54513" fill="#00B493" fill-opacity="0.5"/>
+<circle cx="4.49994" cy="47.3212" r="3.56318" fill="#00B493" fill-opacity="0.24"/>
+<circle cx="4.49998" cy="88.5632" r="1.52708" fill="#00B493"/>
+<circle cx="4.49996" cy="88.5632" r="2.54513" fill="#00B493" fill-opacity="0.5"/>
+<circle cx="4.49994" cy="88.5632" r="3.56318" fill="#00B493" fill-opacity="0.24"/>
+<circle cx="4.49998" cy="130.563" r="1.52708" fill="#00B493"/>
+<circle cx="4.49996" cy="130.563" r="2.54513" fill="#00B493" fill-opacity="0.5"/>
+<circle cx="4.49994" cy="130.563" r="3.56318" fill="#00B493" fill-opacity="0.24"/>
+<circle cx="4.49998" cy="188.563" r="1.52708" fill="#00B493"/>
+<circle cx="4.49996" cy="188.563" r="2.54513" fill="#00B493" fill-opacity="0.5"/>
+<circle cx="4.49994" cy="188.563" r="3.56318" fill="#00B493" fill-opacity="0.24"/>
+</svg>
diff --git a/src/assets/images/pythonCross.svg b/src/assets/images/pythonCross.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 5.19333L8.62667 8.87333L9.37333 8.12667L5.69333 4.5L9.37333 0.873333L8.62667 0.126666L5 3.80667L1.37333 0.126666L0.626667 0.873333L4.30667 4.5L0.626667 8.12667L1.37333 8.87333L5 5.19333Z" fill="#CCCCCC"/>
+</svg>
diff --git a/src/assets/images/pythonDown.svg b/src/assets/images/pythonDown.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 5.08L10.32 0.706666L10.96 1.34667L6.26667 5.98667H5.68L0.986667 1.34667L1.62667 0.706666L6 5.08Z" fill="#CCCCCC"/>
+</svg>
diff --git a/src/assets/images/pythonExtra.svg b/src/assets/images/pythonExtra.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="3" viewBox="0 0 13 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 1.5C2 1.78444 1.89333 2.03333 1.68 2.24667C1.50222 2.42444 1.27111 2.51333 0.986667 2.51333C0.702222 2.51333 0.471111 2.42444 0.293333 2.24667C0.115556 2.03333 0.0266666 1.78444 0.0266666 1.5C0.0266666 1.21556 0.115556 0.984444 0.293333 0.806666C0.471111 0.593333 0.702222 0.486667 0.986667 0.486667C1.27111 0.486667 1.50222 0.593333 1.68 0.806666C1.89333 0.984444 2 1.21556 2 1.5ZM7.01333 1.5C7.01333 1.78444 6.90667 2.03333 6.69333 2.24667C6.51556 2.42444 6.28444 2.51333 6 2.51333C5.71556 2.51333 5.46667 2.42444 5.25333 2.24667C5.07556 2.03333 4.98667 1.78444 4.98667 1.5C4.98667 1.21556 5.07556 0.984444 5.25333 0.806666C5.46667 0.593333 5.71556 0.486667 6 0.486667C6.28444 0.486667 6.51556 0.593333 6.69333 0.806666C6.90667 0.984444 7.01333 1.21556 7.01333 1.5ZM12.0267 1.5C12.0267 1.78444 11.92 2.03333 11.7067 2.24667C11.5289 2.42444 11.2978 2.51333 11.0133 2.51333C10.7289 2.51333 10.48 2.42444 10.2667 2.24667C10.0889 2.03333 10 1.78444 10 1.5C10 1.21556 10.0889 0.984444 10.2667 0.806666C10.48 0.593333 10.7289 0.486667 11.0133 0.486667C11.2978 0.486667 11.5289 0.593333 11.7067 0.806666C11.92 0.984444 12.0267 1.21556 12.0267 1.5Z" fill="#CCCCCC"/>
+</svg>
diff --git a/src/assets/images/pythonFocus.svg b/src/assets/images/pythonFocus.svg
@@ -0,0 +1,3 @@
+<svg width="3" height="146" viewBox="0 0 3 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="3" height="146" rx="1.5" fill="#007ACC"/>
+</svg>
diff --git a/src/assets/images/pythonMain.svg b/src/assets/images/pythonMain.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.02667 1.98667H10.0267V3H6.02667V1.98667ZM6.02667 8.01333H10.0267V8.97333H6.02667V8.01333ZM6.02667 9.98667H10.0267V11H6.02667V9.98667ZM15.1467 15H0.853333L2.13333 9.98667H4V0.973333C4 0.866666 4.01778 0.759999 4.05333 0.653333C4.12444 0.511111 4.19556 0.404444 4.26667 0.333333C4.37333 0.226666 4.48 0.155555 4.58667 0.12C4.72889 0.0488888 4.87111 0.0133333 5.01333 0.0133333H10.9867C11.1289 0.0133333 11.2533 0.0488888 11.36 0.12C11.5022 0.155555 11.6089 0.226666 11.68 0.333333C11.7867 0.404444 11.8578 0.511111 11.8933 0.653333C11.9644 0.759999 12 0.884444 12 1.02667V9.98667H13.8667L15.1467 15ZM5.01333 12.0133H10.9867V0.973333H5.01333V12.0133ZM13.8667 13.9867L13.12 11H12V12.9733H4V11H2.88L2.13333 13.9867H13.8667Z" fill="#CCCCCC"/>
+</svg>
diff --git a/src/assets/images/pythonMeetballs.svg b/src/assets/images/pythonMeetballs.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="4" viewBox="0 0 13 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 2C2 2.28444 1.89333 2.53333 1.68 2.74667C1.50222 2.92444 1.27111 3.01333 0.986667 3.01333C0.702222 3.01333 0.471111 2.92444 0.293333 2.74667C0.115556 2.53333 0.0266666 2.28444 0.0266666 2C0.0266666 1.71556 0.115556 1.48444 0.293333 1.30667C0.471111 1.09333 0.702222 0.986667 0.986667 0.986667C1.27111 0.986667 1.50222 1.09333 1.68 1.30667C1.89333 1.48444 2 1.71556 2 2ZM7.01333 2C7.01333 2.28444 6.90667 2.53333 6.69333 2.74667C6.51556 2.92444 6.28444 3.01333 6 3.01333C5.71556 3.01333 5.46667 2.92444 5.25333 2.74667C5.07556 2.53333 4.98667 2.28444 4.98667 2C4.98667 1.71556 5.07556 1.48444 5.25333 1.30667C5.46667 1.09333 5.71556 0.986667 6 0.986667C6.28444 0.986667 6.51556 1.09333 6.69333 1.30667C6.90667 1.48444 7.01333 1.71556 7.01333 2ZM12.0267 2C12.0267 2.28444 11.92 2.53333 11.7067 2.74667C11.5289 2.92444 11.2978 3.01333 11.0133 3.01333C10.7289 3.01333 10.48 2.92444 10.2667 2.74667C10.0889 2.53333 10 2.28444 10 2C10 1.71556 10.0889 1.48444 10.2667 1.30667C10.48 1.09333 10.7289 0.986667 11.0133 0.986667C11.2978 0.986667 11.5289 1.09333 11.7067 1.30667C11.92 1.48444 12.0267 1.71556 12.0267 2Z" fill="#CCCCCC"/>
+</svg>
diff --git a/src/assets/images/pythonMerge.svg b/src/assets/images/pythonMerge.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.41333 12.5133L6.13333 11.2333L6.77333 10.54L8.90667 12.6733V13.3667L6.77333 15.5L6.08 14.7533L7.36 13.4733H5.49333C4.81778 13.5089 4.23111 13.2778 3.73333 12.78C3.23556 12.2822 2.98667 11.6956 2.98667 11.02V5.47333C2.48889 5.36667 2.06222 5.13556 1.70667 4.78C1.35111 4.42444 1.12 3.99778 1.01333 3.5C0.942222 3.00222 0.995556 2.52222 1.17333 2.06C1.38667 1.59778 1.68889 1.22444 2.08 0.94C2.50667 0.655555 2.98667 0.513333 3.52 0.513333C3.84 0.513333 4.16 0.566667 4.48 0.673333C5.12 0.957777 5.58222 1.42 5.86667 2.06C5.97333 2.38 6.02667 2.7 6.02667 3.02C6.02667 3.62444 5.83111 4.15778 5.44 4.62C5.08444 5.08222 4.62222 5.36667 4.05333 5.47333V10.9667C4.05333 11.3933 4.19556 11.7667 4.48 12.0867C4.76444 12.3711 5.12 12.5133 5.54667 12.5133H7.41333ZM2.72 4.24667C3.00444 4.42444 3.32444 4.49556 3.68 4.46C4.03556 4.42444 4.33778 4.28222 4.58667 4.03333C4.83556 3.78444 4.97778 3.48222 5.01333 3.12667C5.04889 2.77111 4.97778 2.46889 4.8 2.22C4.62222 1.93556 4.39111 1.74 4.10667 1.63333C3.82222 1.49111 3.53778 1.45556 3.25333 1.52667C2.96889 1.56222 2.70222 1.70444 2.45333 1.95333C2.24 2.16667 2.09778 2.41556 2.02667 2.7C1.99111 2.98444 2.02667 3.26889 2.13333 3.55333C2.27556 3.83778 2.47111 4.06889 2.72 4.24667ZM13.0133 10.54C13.5111 10.6467 13.9378 10.8778 14.2933 11.2333C14.72 11.66 14.9511 12.1756 14.9867 12.78C15.0578 13.3489 14.9333 13.8822 14.6133 14.38C14.3289 14.8067 13.9556 15.1267 13.4933 15.34C13.0311 15.5178 12.5511 15.5533 12.0533 15.4467C11.5556 15.34 11.1289 15.1089 10.7733 14.7533C10.4178 14.3978 10.1867 13.9711 10.08 13.4733C9.97333 12.9756 10.0089 12.4956 10.1867 12.0333C10.4 11.5711 10.72 11.1978 11.1467 10.9133C11.4311 10.7356 11.7333 10.6111 12.0533 10.54V4.99333C12.0533 4.56667 11.8933 4.21111 11.5733 3.92667C11.2889 3.64222 10.9511 3.5 10.56 3.5H8.69333L9.97333 4.78L9.22667 5.47333L7.09333 3.34V2.64667L9.22667 0.513333L9.97333 1.20667L8.69333 2.48667H10.56C11.2356 2.48667 11.8222 2.73556 12.32 3.23333C12.8178 3.69556 13.0489 4.28222 13.0133 4.99333V10.54ZM12.6933 14.4867C12.9422 14.4511 13.1733 14.3622 13.3867 14.22C13.6 14.0778 13.76 13.8822 13.8667 13.6333C14.0089 13.3844 14.0622 13.1356 14.0267 12.8867C14.0267 12.6378 13.9378 12.3889 13.76 12.14C13.6178 11.8911 13.4044 11.7133 13.12 11.6067C12.8356 11.5 12.5333 11.4822 12.2133 11.5533C11.9289 11.5889 11.68 11.7133 11.4667 11.9267C11.2533 12.14 11.1111 12.4067 11.04 12.7267C11.0044 13.0111 11.04 13.2956 11.1467 13.58C11.2889 13.8644 11.5022 14.0956 11.7867 14.2733C12.0711 14.4511 12.3733 14.5222 12.6933 14.4867Z" fill="#CCCCCC"/>
+</svg>
diff --git a/src/assets/images/pythonPlus.svg b/src/assets/images/pythonPlus.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0267 5.98667V7H7V12.9733H5.98667V7H0.0133333V5.98667H5.98667V0.0133333H7V5.98667H13.0267Z" fill="#CCCCCC"/>
+</svg>
diff --git a/src/assets/images/pythonRecruit.svg b/src/assets/images/pythonRecruit.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.18 2.88C10.5267 2.88 10.82 3.00667 11.06 3.26C11.3133 3.5 11.44 3.79333 11.44 4.14V12.86C11.44 13.2067 11.3133 13.5067 11.06 13.76C10.82 14 10.5267 14.12 10.18 14.12H4.26C3.91333 14.12 3.61333 14 3.36 13.76C3.12 13.5067 3 13.2067 3 12.86V4.14C3 3.79333 3.12 3.5 3.36 3.26C3.61333 3.00667 3.91333 2.88 4.26 2.88H10.18ZM12 10.18H12.42C12.5267 10.18 12.62 10.22 12.7 10.3C12.78 10.3667 12.8267 10.4533 12.84 10.56V11.46C12.84 11.5667 12.8067 11.66 12.74 11.74C12.6733 11.8067 12.5867 11.8533 12.48 11.88H12V10.18H12.42H12ZM12 7.94H12.42C12.5267 7.94 12.62 7.97333 12.7 8.04C12.78 8.10667 12.8267 8.19333 12.84 8.3V9.2C12.84 9.30667 12.8067 9.4 12.74 9.48C12.6733 9.56 12.5867 9.60667 12.48 9.62H12V7.94H12.42H12ZM12 5.68H12.42C12.5267 5.68 12.62 5.72 12.7 5.8C12.78 5.86667 12.8267 5.95333 12.84 6.06V6.96C12.84 7.06667 12.8067 7.16 12.74 7.24C12.6733 7.30667 12.5867 7.35333 12.48 7.38H12V5.68H12.42H12ZM9.04 4.84H5.4C5.29333 4.84 5.2 4.88 5.12 4.96C5.04 5.02667 4.99333 5.10667 4.98 5.2L4.96 6.12C4.96 6.21333 4.99333 6.3 5.06 6.38C5.14 6.46 5.23333 6.50667 5.34 6.52L9.04 6.54C9.14667 6.54 9.24 6.50667 9.32 6.44C9.4 6.36 9.44667 6.26667 9.46 6.16L9.48 5.26C9.48 5.14 9.43333 5.04 9.34 4.96C9.26 4.88 9.16 4.84 9.04 4.84Z" fill="#519ABA"/>
+</svg>
diff --git a/src/assets/images/pythonRunAll.svg b/src/assets/images/pythonRunAll.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.773333 0.973333L0.0266666 1.4V13.4L0.773333 13.8267L9.78667 7.85333V7L0.773333 0.973333ZM0.986667 12.4933V2.36L8.61333 7.42667L0.986667 12.4933ZM4.02667 13.6667L12.7733 7.85333V7L4.02667 1.13333V2.36L11.6 7.42667L4.02667 12.4933V13.6667Z" fill="#CCCCCC"/>
+</svg>
diff --git a/src/assets/images/pythonSplit.svg b/src/assets/images/pythonSplit.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0267 0.513333H0.986667L0.0266666 1.47333V12.5133L0.986667 13.4733H12.0267L12.9867 12.5133V1.47333L12.0267 0.513333ZM6 12.5133H0.986667V1.47333H6V12.5133ZM12.0267 12.5133H7.01333V1.47333H12.0267V12.5133Z" fill="#CCCCCC"/>
+</svg>
diff --git a/src/assets/images/pythonStart.svg b/src/assets/images/pythonStart.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.78667 0.973333L0.986667 1.4V13.4L1.78667 13.8267L10.8 7.85333V7L1.78667 0.973333ZM2 12.4933V2.36L9.62667 7.42667L2 12.4933Z" fill="#CCCCCC"/>
+</svg>
diff --git a/src/components/UI/ActivityStatus.tsx b/src/components/UI/ActivityStatus.tsx
@@ -0,0 +1,109 @@
+import React from 'react'
+import DasomLogo from '../../assets/images/dasomLogo.svg'
+import ActivityBar from '../../assets/images/activityBar.svg'
+
+type ActivityItem = {
+  title?: string
+  award?: string
+  subtitle?: string
+}
+
+type ActivitySection = {
+  category: string
+  items: ActivityItem[]
+}
+
+const ActivityStatus: React.FC<{ year: string }> = ({ year }) => {
+  const activityData: ActivitySection[] = [
+    {
+      category: '코엑스 한국전자전',
+      items: [
+        {
+          award: '장려상',
+          subtitle: '2024 동양미래 EXPO'
+        }
+      ]
+    },
+    {
+      category: '외부 경진대회 / 전시회',
+      items: [
+        {
+          award: '동상',
+          subtitle: '교육장비 개발 및 아이디어 경진대회',
+        }
+      ]
+    },
+    {
+      category: '교내 경진대회',
+      items: [
+        {
+          award: '최우수상',
+          subtitle: '컴퓨터 공학부 경진대회',
+        }
+      ]
+    },
+    {
+      category: '세미나 실적',
+      items: [
+        { title: '현직 백엔드 개발자 특강 - ', subtitle: '20명 대상' },
+        { title: '웹 개발 세미나 - ', subtitle: '10명 대상' }
+      ]
+    },
+    {
+      category: '기타 활동',
+      items: [
+        { title: '컴퓨터공학부 최초 해커톤 개최' },
+        { title: '전공동아리 내부 팀 프로젝트 발표회 개최' },
+        { title: 'DASOM MAKERS 스터디 및 홈페이지 제작' },
+        { title: '시험기간 간식 행사' },
+        { title: '할로윈 행사' },
+        { title: '동계, 하계 MT' }
+      ]
+    }
+  ]
+
+  return (
+    <div className='max-w-[400px] bg-mainBlack p-4 rounded-xl text-white'>
+      <div className='flex items-center gap-2 mb-3'>
+        <img
+          src={DasomLogo}
+          className='w-7 h-7'
+          alt='Dasom Icon'
+        />
+        <div>
+          <div className='text-[16px] font-pretendardBold'>활동 현황</div>
+          <div className='text-mainColor text-[13px] font-pretendardSemiBold'>{year}</div>
+        </div>
+      </div>
+      <div className="flex items-start gap-3">
+        <img src={ActivityBar} className="w-4 h-[300px] mt-1.5" alt="Activitybar" />
+        <div className="space-y-3">
+          {activityData.map((section, index) => (
+            <div key={index}>
+              <div className='text-white text-[12px] font-pretendardBold'>
+                {section.category}
+              </div>
+              <ul className='space-y-1'>
+                {section.items.map((activity, idx) => (
+                  <li key={idx} className='flex flex-wrap text-[10.5px] leading-tight'>
+                    {activity.title && (
+                      <span className='font-pretendardRegular'>{activity.title}</span>
+                    )}
+                    {activity.award && (
+                      <span className='font-pretendardBold text-mainColor mr-1'>{activity.award}</span>
+                    )}
+                    {activity.subtitle && (
+                      <span className='text-subGrey font-pretendardRegular'>{' '}{activity.subtitle}</span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ActivityStatus
diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
