Skip to content

Commit b6b4cba

Browse files
dohy-eondohy-eon
authored
design: Main 애니메이션 완료
design: Main 애니메이션 완료
1 parent 4e70179 commit b6b4cba

File tree

4 files changed

+107
-58
lines changed

4 files changed

+107
-58
lines changed

‎src/assets/images/github.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/images/instagram.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/UI/ActivityStatus.tsx‎

Lines changed: 52 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
import { motion } from 'framer-motion'
23
import DasomLogo from '../../assets/images/dasomLogo.svg'
34
import ActivityBar from '../../assets/images/activityBar.svg'
45

@@ -13,6 +14,20 @@ type ActivitySection = {
1314
items: ActivityItem[]
1415
}
1516

17+
// Fade In & Move up
18+
const FadeInSection: React.FC<{ children: React.ReactNode }> = ({ children }) => {
19+
return (
20+
<motion.div
21+
initial={{ opacity: 0, y: 20 }}
22+
whileInView={{ opacity: 1, y: 0 }}
23+
transition={{ duration: 0.8, ease: 'easeOut' }}
24+
viewport={{ once: false }}
25+
>
26+
{children}
27+
</motion.div>
28+
)
29+
}
30+
1631
const ActivityStatus: React.FC<{ year: string }> = ({ year }) => {
1732
const activityData: ActivitySection[] = [
1833
{
@@ -63,46 +78,46 @@ const ActivityStatus: React.FC<{ year: string }> = ({ year }) => {
6378
]
6479

6580
return (
66-
<div className='max-w-[400px] bg-mainBlack p-4 rounded-xl text-white'>
67-
<div className='flex items-center gap-2 mb-3'>
68-
<img
69-
src={DasomLogo}
70-
className='w-7 h-7'
71-
alt='Dasom Icon'
72-
/>
73-
<div>
74-
<div className='text-[16px] font-pretendardBold'>활동 현황</div>
75-
<div className='text-mainColor text-[13px] font-pretendardSemiBold'>{year}</div>
81+
<FadeInSection>
82+
<div className='max-w-[400px] bg-mainBlack p-4 rounded-xl text-white'>
83+
<div className='flex items-center gap-2 mb-3'>
84+
<img src={DasomLogo} className='w-7 h-7' alt='Dasom Icon' />
85+
<div>
86+
<div className='text-[16px] font-pretendardBold'>활동 현황</div>
87+
<div className='text-mainColor text-[13px] font-pretendardSemiBold'>{year}</div>
88+
</div>
7689
</div>
77-
</div>
78-
<div className="flex items-start gap-3">
79-
<img src={ActivityBar} className="w-4 h-[300px] mt-1.5" alt="Activitybar" />
80-
<div className="space-y-3">
81-
{activityData.map((section, index) => (
82-
<div key={index}>
83-
<div className='text-white text-[12px] font-pretendardBold'>
84-
{section.category}
85-
</div>
86-
<ul className='space-y-1'>
87-
{section.items.map((activity, idx) => (
88-
<li key={idx} className='flex flex-wrap text-[10.5px] leading-tight'>
89-
{activity.title && (
90-
<span className='font-pretendardRegular'>{activity.title}</span>
91-
)}
92-
{activity.award && (
93-
<span className='font-pretendardBold text-mainColor mr-1'>{activity.award}</span>
94-
)}
95-
{activity.subtitle && (
96-
<span className='text-subGrey font-pretendardRegular'>{' '}{activity.subtitle}</span>
97-
)}
98-
</li>
99-
))}
100-
</ul>
101-
</div>
102-
))}
90+
<div className="flex items-start gap-3">
91+
<img src={ActivityBar} className="w-4 h-[300px] mt-1.5" alt="Activitybar" />
92+
<div className="space-y-3">
93+
{activityData.map((section, index) => (
94+
<FadeInSection key={index}>
95+
<div>
96+
<div className='text-white text-[12px] font-pretendardBold'>
97+
{section.category}
98+
</div>
99+
<ul className='space-y-1'>
100+
{section.items.map((activity, idx) => (
101+
<li key={idx} className='flex flex-wrap text-[10.5px] leading-tight'>
102+
{activity.title && (
103+
<span className='font-pretendardRegular'>{activity.title}</span>
104+
)}
105+
{activity.award && (
106+
<span className='font-pretendardBold text-mainColor mr-1'>{activity.award}</span>
107+
)}
108+
{activity.subtitle && (
109+
<span className='text-subGrey font-pretendardRegular'>{' '}{activity.subtitle}</span>
110+
)}
111+
</li>
112+
))}
113+
</ul>
114+
</div>
115+
</FadeInSection>
116+
))}
117+
</div>
103118
</div>
104119
</div>
105-
</div>
120+
</FadeInSection>
106121
)
107122
}
108123

‎src/pages/Main.tsx‎

Lines changed: 48 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react'
1+
import React, { useState, useEffect } from 'react'
22
import { Header } from '../components/UI/Header'
33
import { Cover } from '../components/UI/cover'
44
import MobileLayout from '../components/layout/MobileLayout'
@@ -11,9 +11,11 @@ import pythonPlus from '../assets/images/pythonPlus.svg'
1111
import pythonRunAll from '../assets/images/pythonRunAll.svg'
1212
import pythonMain from '../assets/images/pythonMain.svg'
1313
import pythonDown from '../assets/images/pythonDown.svg'
14-
import pythonStart from '../assets/images/pythonStart.svg'
1514
import pythonFocus from '../assets/images/pythonFocus.svg'
1615
import ActivityStatus from '../components/UI/ActivityStatus'
16+
import dasomInstagram from '../assets/images/instagram.svg'
17+
import dasomGithub from '../assets/images/github.svg'
18+
import Recruit from './Recruit'
1719

1820
const TypingEffect = ({ text }: { text: string }) => {
1921
const [displayText, setDisplayText] = useState('')
@@ -51,6 +53,13 @@ const TypingEffect = ({ text }: { text: string }) => {
5153
}
5254

5355
const Main: React.FC = () => {
56+
//코드블럭 클릭이벤트용
57+
const [selectedCode, setSelectedCode] = useState<number | null>(null)
58+
59+
const handleCodeClick = (index: number) => {
60+
setSelectedCode(selectedCode === index ? null : index)
61+
}
62+
5463
return (
5564
<MobileLayout>
5665
<Header />
@@ -103,31 +112,34 @@ const Main: React.FC = () => {
103112
<div className='text-2xl font-semibold text-white flex items-center'>
104113
<img src={pythonDown} className='h-4 w-4 mr-2.5' alt='Python Scroll Down Icon' />
105114
DASOM 34기 부원 모집
106-
</div>
107-
<div className='text-xl font-semibold text-stone-300 flex items-center'>
108-
<img src={pythonDown} className='h-4 w-4 mr-2.5' alt='Python Scroll Down Icon' />
109-
WHY NOT?!
110-
</div>
111-
<div className='flex items-stretch w-full'>
112-
<img src={pythonFocus} className='h-40 flex-none object-contain' alt='Python Focus Icon' />
113-
<div className='w-full flex-1'>
114-
<pre className='relative flex-1 flex flex-col h-full text-xs bg-neutral-800 border border-neutral-700 p-3 text-zinc-300 rounded overflow-auto min-h-[10rem]'>
115-
<code>
116-
<span className='text-[#C586C0]'>import</span> pandas <span className='text-[#C586C0]'>as</span> pd{'\n'}
117-
<span className='text-[#C586C0]'>import</span> numpy <span className='text-[#C586C0]'>as</span> np{'\n'}
118-
<span className='text-[#C586C0]'>import</span> seaborn <span className='text-[#C586C0]'>as</span> sns{'\n'}
119-
<span className='text-[#C586C0]'>import</span> matplotlib.pyplot <span className='text-[#C586C0]'>as</span> plt{'\n\n'}
120-
sns.set(<span className='text-[#9CDCF2]'>style</span>=<span className='text-[#D69D85]'> 'darkgrid' </span>)
121-
</code>
122-
<div className='absolute bottom-1 left-2 text-xs font-medium text-emerald-300'>✔ 0.3s</div>
115+
</div>
116+
<div className='text-xl font-semibold text-stone-300 flex items-center'>
117+
<img src={pythonDown} className='h-4 w-4 mr-2.5' alt='Python Scroll Down Icon' />
118+
WHY NOT?!
119+
</div>
120+
<div className='flex items-stretch w-full'>
121+
<img src={pythonFocus} className='h-40 flex-none object-contain' alt='Python Focus Icon' />
122+
<div className='w-full flex-1'>
123+
<pre className='relative flex-1 flex flex-col h-full text-xs bg-neutral-800 border border-neutral-700 p-3 text-zinc-300 rounded overflow-auto min-h-[10rem]'>
124+
<code>
125+
<span className='text-[#C586C0]'>import</span> pandas <span className='text-[#C586C0]'>as</span> pd{'\n'}
126+
<span className='text-[#C586C0]'>import</span> numpy <span className='text-[#C586C0]'>as</span> np{'\n'}
127+
<span className='text-[#C586C0]'>import</span> seaborn <span className='text-[#C586C0]'>as</span> sns{'\n'}
128+
<span className='text-[#C586C0]'>import</span> matplotlib.pyplot <span className='text-[#C586C0]'>as</span> plt{'\n\n'}
129+
sns.set(<span className='text-[#9CDCF2]'>style</span>=<span className='text-[#D69D85]'> 'darkgrid' </span>)
130+
</code>
131+
<div className='absolute bottom-1 left-2 text-xs font-medium text-emerald-300'>✔ 0.3s</div>
123132
<div className='absolute bottom-1 right-2 text-xs font-medium text-gray-500'>Python</div>
124133
</pre>
125134
</div>
126135
</div>
127136
</div>
128137
<div>
129-
<pre className='text-xs bg-neutral-800 border border-neutral-700 p-3 text-zinc-300 rounded'>
130-
<code>print(<span className='text-[#D69D85]'><TypingEffect text='"Join DASOM"' /></span>)</code>
138+
<pre
139+
className={`text-xs p-3 rounded ${selectedCode === 0 ? 'border-[#007ACC]' : 'border-neutral-700'} border-2`}
140+
onClick={() => handleCodeClick(0)}
141+
>
142+
<code className='text-zinc-300'>print(<span className='text-[#D69D85]'><TypingEffect text='"Join DASOM"' /></span>)</code>
131143
</pre>
132144
<div className='text-xs font-medium text-zinc-500'>Ctrl + Enter to run</div>
133145
</div>
@@ -143,6 +155,21 @@ const Main: React.FC = () => {
143155
<div className='flex items-center justify-center w-full text-[12px] font-pretendardRegular text-white text-center'>
144156
© 2025 DASOM. ALL RIGHTS RESERVED.
145157
</div>
158+
{/* 바텀마진용 */}
159+
<div className='flex w-full bg-mainBlack min-h-[20px] mb-50' />
160+
161+
{/* 인스타&깃헙 */}
162+
<div className='flex w-full justify-center items-center gap-4 mb-20'>
163+
<a href='https://www.instagram.com/dasom___official/' target='_blank' rel="noopener noreferrer">
164+
<img src={dasomInstagram} className='w-6 h-6'/>
165+
</a>
166+
<a href='https://github.com/DASOM-GitHub' target='_blank' rel="noopener noreferrer">
167+
<img src={dasomGithub} className='w-6 h-6'/>
168+
</a>
169+
</div>
170+
171+
{/* 바텀마진용용 */}
172+
<div className='flex w-full bg-mainBlack min-h-[2px]' />
146173
</div>
147174
</MobileLayout>
148175
)

0 commit comments

Comments
 (0)