Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ Feature - Header #39

Merged
merged 4 commits into from
May 4, 2024
Merged

✨ Feature - Header #39

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2dba070
💄 Style - aboutGDSC image map
shimseohyun Apr 20, 2024
30504af
✨ Feat - header
shimseohyun Apr 21, 2024
ba29257
✨ Feat - add Swiper
shimseohyun Apr 21, 2024
c7ea997
Merge branch 'dev' into feature/28
seochan99 May 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"next": "14.1.3",
"react": "^18",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1"
"react-icons": "^5.0.1",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://heroicons.com/

다음번엔 Tailwind 아이콘으로 써드파트 추가해보는건 어떨지 ㅎㅅㅎ

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

정말좋습니다

"swiper": "^11.1.1"
},
"devDependencies": {
"@svgr/webpack": "^8.1.0",
Expand Down
Binary file added public/images/main/aboutGDSC_map.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function RootLayout({
return (
<html
lang="ko"
className="flex w-screen justify-center bg-[#000] tablet:text-[16px] text-[14px]"
className="flex w-screen justify-center bg-[#000] tablet:text-[16px] text-[14px] "
>
<body
className={clsx(
Expand All @@ -34,7 +34,7 @@ export default function RootLayout({
)}
>
<Navigation />
<div className="flex justify-center">{children}</div>
<div className="pt-[5rem] flex justify-center">{children}</div>
</body>
</html>
);
Expand Down
10 changes: 8 additions & 2 deletions src/components/home/aboutGDSC/AboutGDSC.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const NumberAbout: React.FC<{ label: string; number: string }> = ({
const AboutGDSC = () => {
return (
<div className="w-full flex justify-center items-center">
<section className="w-full max-w-[1200px] tablet:px-10 px-4 py-40 flex flex-wrap flex-col gap-6 desktop:flex-row">
<section className="w-full max-w-[1200px] tablet:px-10 px-4 py-40 flex flex-wrap flex-col gap-6 tablet:flex-row">
{/* 텍스트 */}
<div className="flex flex-col mr-8 ">
<p className="H3 pb-6">
Expand Down Expand Up @@ -44,7 +44,13 @@ const AboutGDSC = () => {
</div>

{/* 이미지 */}
<div className="flex-grow bg-red-900 h-[378px]"> </div>
<div className="desktop:flex-grow desktop:h-[378px] bg-red-100 desktop:w-auto w-full">
<div className="desktop:block hidden bg-cover h-full w-full bg-[url('/images/main/aboutGDSC_map.png')]" />
<img
className="desktop:hidden block object-contain w-full"
src="/images/main/aboutGDSC_map.png"
/>
</div>
</section>
</div>
);
Expand Down
25 changes: 23 additions & 2 deletions src/components/home/activity/Activity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
'use client';
import HomeTitle from '../title/HomeTitle';

import { Navigation, Autoplay } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/navigation';

import { Swiper, SwiperSlide } from 'swiper/react';

const ActivityCard: React.FC<Activity> = ({ icon, title, description }) => {
return (
<div className="flex-grow">
Expand Down Expand Up @@ -89,10 +97,23 @@ const Activity = () => {
<img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
<img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
</div>

{/* 스크롤되는 부분 */}

{/* 스크롤되는 부분 */}
<Swiper
// navigation={true}
autoplay={{ delay: 2000 }}
modules={[Navigation, Autoplay]}
className="tablet:hidden flex w-full"
loop
>
{[1, 2, 3].map((item, index) => {
return (
<SwiperSlide key={index}>
<img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
</SwiperSlide>
);
})}
</Swiper>
</div>
{/* 내용 */}
</section>
Expand Down
48 changes: 41 additions & 7 deletions src/components/home/storiesFrom/StoriesFrom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,32 @@
const ImageBox: React.FC<{ label: string; img: string }> = ({ label, img }) => {
'use client';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/navigation';

import { Navigation, Autoplay } from 'swiper/modules';

interface Story {
label: string;
img: string;
}

const ImageBox: React.FC<Story> = ({ label, img }) => {
return (
<div className="flex flex-col gap-6">
<img className="w-full bg-red-900 " src="/images/main/story_ex.png" />
<div className="H6">사진에 대한 제목이 들어갑니다.</div>
<div className="flex flex-col gap-6 w-full">
<img className="w-full bg-red-900 " src="/images/main/story_ex.png" />
<div className="H6">{label}</div>
</div>
);
};

const StoryList: Story[] = [
{ label: '일번', img: '22' },
{ label: '이번', img: '22' },
{ label: '삼번', img: '22' },
{ label: '사번', img: '22' },
];

const StoriesFrom = () => {
return (
<div className="w-full flex justify-center items-center bg-white ">
Expand Down Expand Up @@ -35,9 +56,22 @@ const StoriesFrom = () => {
</div>
</div>

<div className="tablet:hidden flex">
<ImageBox label="1" img="" />
</div>
<Swiper
// navigation={true}
autoplay={{ delay: 3000 }}
modules={[Navigation, Autoplay]}
className="tablet:hidden flex w-full"
loop
>
{StoryList.map((item, index) => {
return (
<SwiperSlide key={index}>
<ImageBox label={item.label} img={item.img} />
</SwiperSlide>
);
})}
</Swiper>

{/* content */}
</section>
</div>
Expand Down
Loading
Loading