From 9b43c1dfc1f9440d06802bae94ad14afe159a4c5 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 17 Apr 2024 15:19:37 +0900
Subject: [PATCH 01/19] =?UTF-8?q?style:=20=EC=9D=BC=EB=9F=AC=EC=8A=A4?=
=?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/img/img_home_01.svg | 103 +++++++++++++++++++++++++++++++++
src/assets/img/img_home_02.svg | 57 ++++++++++++++++++
src/assets/img/img_home_03.svg | 81 ++++++++++++++++++++++++++
src/assets/index.ts | 6 ++
4 files changed, 247 insertions(+)
create mode 100644 src/assets/img/img_home_01.svg
create mode 100644 src/assets/img/img_home_02.svg
create mode 100644 src/assets/img/img_home_03.svg
diff --git a/src/assets/img/img_home_01.svg b/src/assets/img/img_home_01.svg
new file mode 100644
index 00000000..0c37dc8d
--- /dev/null
+++ b/src/assets/img/img_home_01.svg
@@ -0,0 +1,103 @@
+
diff --git a/src/assets/img/img_home_02.svg b/src/assets/img/img_home_02.svg
new file mode 100644
index 00000000..bcb25327
--- /dev/null
+++ b/src/assets/img/img_home_02.svg
@@ -0,0 +1,57 @@
+
diff --git a/src/assets/img/img_home_03.svg b/src/assets/img/img_home_03.svg
new file mode 100644
index 00000000..d3ddd376
--- /dev/null
+++ b/src/assets/img/img_home_03.svg
@@ -0,0 +1,81 @@
+
diff --git a/src/assets/index.ts b/src/assets/index.ts
index 09351371..af6f3e7f 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -37,6 +37,9 @@ import ImgBookOrangeBig from './img/img_book_orange_big.svg?react';
import ImgEmpty from './img/img_empty.svg?react';
import ImgError from './img/img_error.svg?react';
import ImgEvent from './img/img_event.svg?react';
+import ImgHome01 from './img/img_home_01.svg?react';
+import ImgHome02 from './img/img_home_02.svg';
+import ImgHome03 from './img/img_home_03.svg';
import ImgKakao01 from './img/img_kakao_01.svg?react';
import ImgKakao02 from './img/img_kakao_02.svg?react';
import ImgKakao03 from './img/img_kakao_03.svg?react';
@@ -102,6 +105,9 @@ export {
ImgEmpty,
ImgError,
ImgEvent,
+ ImgHome01,
+ ImgHome02,
+ ImgHome03,
ImgKakao01,
ImgKakao02,
ImgKakao03,
From 1441b9ee4a10a6c8799a1c2c22401b030f28c0c0 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Wed, 17 Apr 2024 15:33:57 +0900
Subject: [PATCH 02/19] =?UTF-8?q?chore:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
=?UTF-8?q?=ED=8A=B8=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../HomeMainBanner.style.ts} | 0
.../{NavigateLecueBook => HomeMainBanner}/index.tsx | 2 +-
src/Home/page/index.tsx | 4 ++--
3 files changed, 3 insertions(+), 3 deletions(-)
rename src/Home/components/{NavigateLecueBook/NavigateLecueBook.style.ts => HomeMainBanner/HomeMainBanner.style.ts} (100%)
rename src/Home/components/{NavigateLecueBook => HomeMainBanner}/index.tsx (96%)
diff --git a/src/Home/components/NavigateLecueBook/NavigateLecueBook.style.ts b/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
similarity index 100%
rename from src/Home/components/NavigateLecueBook/NavigateLecueBook.style.ts
rename to src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
diff --git a/src/Home/components/NavigateLecueBook/index.tsx b/src/Home/components/HomeMainBanner/index.tsx
similarity index 96%
rename from src/Home/components/NavigateLecueBook/index.tsx
rename to src/Home/components/HomeMainBanner/index.tsx
index 6215939f..740055be 100644
--- a/src/Home/components/NavigateLecueBook/index.tsx
+++ b/src/Home/components/HomeMainBanner/index.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
import { IcProfile, ImgLogoLecue } from '../../../assets';
import CommonModal from '../../../components/common/Modal/CommonModal';
-import * as S from './NavigateLecueBook.style';
+import * as S from './HomeMainBanner.style';
function NavigateLecueBook() {
const navigate = useNavigate();
diff --git a/src/Home/page/index.tsx b/src/Home/page/index.tsx
index 9d640380..38d1caff 100644
--- a/src/Home/page/index.tsx
+++ b/src/Home/page/index.tsx
@@ -2,8 +2,8 @@ import { useEffect } from 'react';
import LoadingPage from '../../components/common/LoadingPage';
import { StepProps } from '../../Splash/page/SplashPage';
+import HomeMainBanner from '../components/HomeMainBanner';
import LecueBookList from '../components/LecueBookList';
-import NavigateLecueBook from '../components/NavigateLecueBook';
import useGetLecueBook from '../hooks/useGetLecueBook';
import * as S from './Home.style';
@@ -19,7 +19,7 @@ function Home({ handleStep }: StepProps) {
) : (
-
+
{token && }
From 2543dbf5c318a7379851af3a4c92b23cd76b7a3b Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 18 Apr 2024 17:57:20 +0900
Subject: [PATCH 03/19] =?UTF-8?q?fix:=20=EC=97=90=EC=85=8B=20=EA=B2=BD?=
=?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/index.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/assets/index.ts b/src/assets/index.ts
index af6f3e7f..ed6b3d97 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -38,8 +38,8 @@ import ImgEmpty from './img/img_empty.svg?react';
import ImgError from './img/img_error.svg?react';
import ImgEvent from './img/img_event.svg?react';
import ImgHome01 from './img/img_home_01.svg?react';
-import ImgHome02 from './img/img_home_02.svg';
-import ImgHome03 from './img/img_home_03.svg';
+import ImgHome02 from './img/img_home_02.svg?react';
+import ImgHome03 from './img/img_home_03.svg?react';
import ImgKakao01 from './img/img_kakao_01.svg?react';
import ImgKakao02 from './img/img_kakao_02.svg?react';
import ImgKakao03 from './img/img_kakao_03.svg?react';
From f21d5942455ff8020b487e799b761cf5779989f7 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 18 Apr 2024 17:57:56 +0900
Subject: [PATCH 04/19] =?UTF-8?q?feat:=20=ED=99=88=20=ED=99=94=EB=A9=B4=20?=
=?UTF-8?q?=EC=9D=BC=EB=9F=AC=EC=8A=A4=ED=8A=B8=20=EB=AC=B4=ED=95=9C=20?=
=?UTF-8?q?=EB=B0=98=EB=B3=B5=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../HomeMainBanner/HomeMainBanner.style.ts | 9 +---
src/Home/components/HomeMainBanner/index.tsx | 49 +++++++++++++++++--
2 files changed, 47 insertions(+), 11 deletions(-)
diff --git a/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts b/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
index 03fbf33a..16b1b2d7 100644
--- a/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
+++ b/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
@@ -8,8 +8,6 @@ export const MainWrapper = styled.div`
export const IconWrapper = styled.section`
display: flex;
-
- /* 바뀔 수 있을 것 같으니 디자인 나오면 다시 확인해보기 ! */
gap: 16rem;
align-items: baseline;
@@ -17,11 +15,8 @@ export const IconWrapper = styled.section`
margin: 4rem 1.8rem 3.5rem 1.6rem;
`;
-export const DummyGraphic = styled.div`
- width: 37.5rem;
- height: 20rem;
-
- background-color: ${({ theme }) => theme.colors.LG};
+export const IllustrationWrapper = styled.div`
+ width: 100%;
`;
export const Button = styled.button`
diff --git a/src/Home/components/HomeMainBanner/index.tsx b/src/Home/components/HomeMainBanner/index.tsx
index 740055be..a2e91d71 100644
--- a/src/Home/components/HomeMainBanner/index.tsx
+++ b/src/Home/components/HomeMainBanner/index.tsx
@@ -1,7 +1,13 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
-import { IcProfile, ImgLogoLecue } from '../../../assets';
+import {
+ IcProfile,
+ ImgHome01,
+ ImgHome02,
+ ImgHome03,
+ ImgLogoLecue,
+} from '../../../assets';
import CommonModal from '../../../components/common/Modal/CommonModal';
import * as S from './HomeMainBanner.style';
@@ -9,6 +15,38 @@ function NavigateLecueBook() {
const navigate = useNavigate();
const [modalOn, setModalOn] = useState(false);
+ const [curIdx, setCurIdx] = useState(0);
+ const illustrationId = useRef(0);
+
+ const illustrationArr = [
+ {
+ img: ,
+ key: 0,
+ },
+ {
+ img: ,
+ key: 1,
+ },
+ {
+ img: ,
+ key: 2,
+ },
+ ];
+
+ const nextSlide = () => {
+ setCurIdx(
+ curIdx === 2 ? illustrationId.current=0 : illustrationId.current += 1,
+ );
+ };
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ nextSlide();
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, [illustrationId.current]);
+
const handleClickIcProfile = () => {
const token = localStorage.getItem('token');
@@ -31,8 +69,11 @@ function NavigateLecueBook() {
- {/* 임시로 넣은 것! 추후 새로운 그래픽으로 수정 */}
-
+
+ {illustrationArr.map(
+ (illustration) => curIdx === illustration.key && illustration.img,
+ )}
+
레큐북 만들기
From 381fde695977084ee6f61b97e1722a12c971a7b4 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Thu, 18 Apr 2024 18:01:57 +0900
Subject: [PATCH 05/19] =?UTF-8?q?feat:=20=EC=9D=BC=EB=9F=AC=EC=8A=A4?=
=?UTF-8?q?=ED=8A=B8=20=EA=B4=80=EB=A0=A8=20=EC=83=81=EC=88=98=20->=20?=
=?UTF-8?q?=EC=83=81=EC=88=98=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EB=B6=84?=
=?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Home/components/HomeMainBanner/index.tsx | 30 ++++----------------
src/Home/constants/HomeIllustArr.tsx | 16 +++++++++++
2 files changed, 22 insertions(+), 24 deletions(-)
create mode 100644 src/Home/constants/HomeIllustArr.tsx
diff --git a/src/Home/components/HomeMainBanner/index.tsx b/src/Home/components/HomeMainBanner/index.tsx
index a2e91d71..ea9883f2 100644
--- a/src/Home/components/HomeMainBanner/index.tsx
+++ b/src/Home/components/HomeMainBanner/index.tsx
@@ -1,14 +1,9 @@
import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
-import {
- IcProfile,
- ImgHome01,
- ImgHome02,
- ImgHome03,
- ImgLogoLecue,
-} from '../../../assets';
+import { IcProfile, ImgLogoLecue } from '../../../assets';
import CommonModal from '../../../components/common/Modal/CommonModal';
+import { illustrationArr } from '../../constants/HomeIllustArr';
import * as S from './HomeMainBanner.style';
function NavigateLecueBook() {
@@ -18,31 +13,18 @@ function NavigateLecueBook() {
const [curIdx, setCurIdx] = useState(0);
const illustrationId = useRef(0);
- const illustrationArr = [
- {
- img: ,
- key: 0,
- },
- {
- img: ,
- key: 1,
- },
- {
- img: ,
- key: 2,
- },
- ];
-
const nextSlide = () => {
setCurIdx(
- curIdx === 2 ? illustrationId.current=0 : illustrationId.current += 1,
+ curIdx === 2
+ ? (illustrationId.current = 0)
+ : (illustrationId.current += 1),
);
};
useEffect(() => {
const interval = setInterval(() => {
nextSlide();
- }, 1000);
+ }, 1500);
return () => clearInterval(interval);
}, [illustrationId.current]);
diff --git a/src/Home/constants/HomeIllustArr.tsx b/src/Home/constants/HomeIllustArr.tsx
new file mode 100644
index 00000000..a2bdbc19
--- /dev/null
+++ b/src/Home/constants/HomeIllustArr.tsx
@@ -0,0 +1,16 @@
+import { ImgHome01, ImgHome02, ImgHome03 } from '../../assets';
+
+export const illustrationArr = [
+ {
+ img: ,
+ key: 0,
+ },
+ {
+ img: ,
+ key: 1,
+ },
+ {
+ img: ,
+ key: 2,
+ },
+];
From 5c7927ba0d6e4cebd0a03035d91c48891962996a Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 19 Apr 2024 14:22:24 +0900
Subject: [PATCH 06/19] =?UTF-8?q?remove:=20=EB=B6=88=ED=95=84=EC=9A=94?=
=?UTF-8?q?=ED=95=9C=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Home/constants/.gitkeep | 0
1 file changed, 0 insertions(+), 0 deletions(-)
delete mode 100644 src/Home/constants/.gitkeep
diff --git a/src/Home/constants/.gitkeep b/src/Home/constants/.gitkeep
deleted file mode 100644
index e69de29b..00000000
From 751431b656b84c1e63f63037171baaddbb797e9e Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 19 Apr 2024 14:22:55 +0900
Subject: [PATCH 07/19] =?UTF-8?q?feat:=20=ED=99=88=20=EB=AC=B4=ED=95=9C=20?=
=?UTF-8?q?=EB=A1=A4=EB=A7=81=20=EB=B0=B0=EB=84=88=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../HomeMainBanner/HomeMainBanner.style.ts | 34 ++++++++-
src/Home/components/HomeMainBanner/index.tsx | 76 +++++++++++++------
2 files changed, 85 insertions(+), 25 deletions(-)
diff --git a/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts b/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
index 16b1b2d7..0a14ebdd 100644
--- a/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
+++ b/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
@@ -15,8 +15,40 @@ export const IconWrapper = styled.section`
margin: 4rem 1.8rem 3.5rem 1.6rem;
`;
-export const IllustrationWrapper = styled.div`
+export const IllustrationSliderWrapper = styled.div`
width: 100%;
+ overflow-x: hidden;
+`;
+
+export const IllustrationWrapper = styled.div<{
+ width: number;
+ animationDuration: number;
+}>`
+ @keyframes loop {
+ 0% {
+ transform: translateX(0);
+ }
+
+ 100% {
+ transform: translateX(-100%);
+ }
+ }
+
+ display: flex;
+
+ width: ${({ width }) => width}rem;
+ height: 100%;
+ animation: loop;
+ animation-duration: ${({ animationDuration }) => animationDuration}s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+`;
+
+export const IllustList = styled.div<{ width: number }>`
+ display: flex;
+
+ width: ${({ width }) => width}rem;
+ height: 100%;
`;
export const Button = styled.button`
diff --git a/src/Home/components/HomeMainBanner/index.tsx b/src/Home/components/HomeMainBanner/index.tsx
index ea9883f2..31871270 100644
--- a/src/Home/components/HomeMainBanner/index.tsx
+++ b/src/Home/components/HomeMainBanner/index.tsx
@@ -1,7 +1,13 @@
import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
-import { IcProfile, ImgLogoLecue } from '../../../assets';
+import {
+ IcProfile,
+ ImgHome01,
+ ImgHome02,
+ ImgHome03,
+ ImgLogoLecue,
+} from '../../../assets';
import CommonModal from '../../../components/common/Modal/CommonModal';
import { illustrationArr } from '../../constants/HomeIllustArr';
import * as S from './HomeMainBanner.style';
@@ -10,24 +16,10 @@ function NavigateLecueBook() {
const navigate = useNavigate();
const [modalOn, setModalOn] = useState(false);
- const [curIdx, setCurIdx] = useState(0);
- const illustrationId = useRef(0);
-
- const nextSlide = () => {
- setCurIdx(
- curIdx === 2
- ? (illustrationId.current = 0)
- : (illustrationId.current += 1),
- );
- };
-
- useEffect(() => {
- const interval = setInterval(() => {
- nextSlide();
- }, 1500);
-
- return () => clearInterval(interval);
- }, [illustrationId.current]);
+ const illustrationRef = useRef(null);
+ const [illustListWidth, setIllustListWidth] = useState(0);
+ const [animationListWidth, setAnimationListWidth] = useState(0);
+ const [animaionDuration, setAnimationDuration] = useState(5);
const handleClickIcProfile = () => {
const token = localStorage.getItem('token');
@@ -43,6 +35,22 @@ function NavigateLecueBook() {
}
};
+ useEffect(() => {
+ if (illustrationRef.current) {
+ const itemBoxWidth = illustrationRef.current.offsetWidth;
+ const itemListWidth = itemBoxWidth + 6;
+
+ setIllustListWidth(itemListWidth);
+ setAnimationListWidth(itemListWidth * 2);
+
+ const arrLength = illustrationArr.length;
+ const newAnimationDuration = Math.max(1, arrLength * 2);
+ setAnimationDuration(newAnimationDuration);
+ }
+ }, [illustrationRef.current]);
+
+ console.log(illustListWidth, animationListWidth, animaionDuration);
+
return (
@@ -51,11 +59,31 @@ function NavigateLecueBook() {
-
- {illustrationArr.map(
- (illustration) => curIdx === illustration.key && illustration.img,
- )}
-
+
+
+ {/* */}
+ {Array.from({ length: 10 }, (_, idx) => (
+
+
+
+
+
+ ))}
+ {/* {illustrationArr.map((illustration) => (
+
+ {illustration.img}
+
+ ))} */}
+ {/* */}
+
+
레큐북 만들기
From 003b6b7025b6bb2a89f09e188595ae88704f16d6 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 19 Apr 2024 17:46:27 +0900
Subject: [PATCH 08/19] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?=
=?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Home/components/HomeMainBanner/index.tsx | 24 ++++----------------
1 file changed, 5 insertions(+), 19 deletions(-)
diff --git a/src/Home/components/HomeMainBanner/index.tsx b/src/Home/components/HomeMainBanner/index.tsx
index 31871270..fae5575a 100644
--- a/src/Home/components/HomeMainBanner/index.tsx
+++ b/src/Home/components/HomeMainBanner/index.tsx
@@ -1,13 +1,7 @@
import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
-import {
- IcProfile,
- ImgHome01,
- ImgHome02,
- ImgHome03,
- ImgLogoLecue,
-} from '../../../assets';
+import { IcProfile, ImgLogoLecue } from '../../../assets';
import CommonModal from '../../../components/common/Modal/CommonModal';
import { illustrationArr } from '../../constants/HomeIllustArr';
import * as S from './HomeMainBanner.style';
@@ -49,8 +43,6 @@ function NavigateLecueBook() {
}
}, [illustrationRef.current]);
- console.log(illustListWidth, animationListWidth, animaionDuration);
-
return (
@@ -64,24 +56,18 @@ function NavigateLecueBook() {
width={animationListWidth}
animationDuration={animaionDuration}
>
- {/* */}
{Array.from({ length: 10 }, (_, idx) => (
-
+ {/*
-
+ */}
+ {illustrationArr.map((illustration) => illustration.img)}
))}
- {/* {illustrationArr.map((illustration) => (
-
- {illustration.img}
-
- ))} */}
- {/* */}
From aee63aa8e864be6072234a8249a934759c030c9d Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 19 Apr 2024 18:53:55 +0900
Subject: [PATCH 09/19] =?UTF-8?q?chore:=20swiper=20=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/package.json b/package.json
index 7979e031..57592b2b 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"react-draggable": "^4.4.6",
"react-query": "^3.39.3",
"react-router-dom": "^6.21.1",
+ "swiper": "^11.1.1",
"vite-plugin-svgr": "^4.2.0"
},
"devDependencies": {
From 7540dc1aac236cba3e3b5b542473fe22d90288b3 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 19 Apr 2024 18:54:24 +0900
Subject: [PATCH 10/19] =?UTF-8?q?chore:=20swiper=20=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
yarn.lock | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/yarn.lock b/yarn.lock
index 6d262629..2bcd6ae8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3612,6 +3612,11 @@ svg-tags@^1.0.0:
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
+swiper@^11.1.1:
+ version "11.1.1"
+ resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.1.1.tgz#5efaa222d4a47a3ac75090cfc2fda6e53e564982"
+ integrity sha512-jGmEA/fNz1lACIcY4/40ggm1Gcyv+EUivmgV/Jd2WFPsEJhbWXnRAwzZR8OPjkBLtDxmzcoYG/iiAMWfRs0YKQ==
+
table@^6.8.1:
version "6.8.1"
resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
From be05fd0948b18b4ecc705ecbfe6fd01053a3977a Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 19 Apr 2024 18:54:45 +0900
Subject: [PATCH 11/19] =?UTF-8?q?feat:=20=ED=99=88=20=EC=BA=90=EB=9F=AC?=
=?UTF-8?q?=EC=85=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../HomeMainBanner/HomeMainBanner.style.ts | 40 ++++---------
src/Home/components/HomeMainBanner/index.tsx | 59 +++++++------------
2 files changed, 31 insertions(+), 68 deletions(-)
diff --git a/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts b/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
index 0a14ebdd..07c5f492 100644
--- a/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
+++ b/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
@@ -15,40 +15,20 @@ export const IconWrapper = styled.section`
margin: 4rem 1.8rem 3.5rem 1.6rem;
`;
-export const IllustrationSliderWrapper = styled.div`
- width: 100%;
- overflow-x: hidden;
-`;
-
-export const IllustrationWrapper = styled.div<{
- width: number;
- animationDuration: number;
-}>`
- @keyframes loop {
- 0% {
- transform: translateX(0);
- }
-
- 100% {
- transform: translateX(-100%);
- }
- }
-
+export const SwiperWrapper = styled.section`
display: flex;
- width: ${({ width }) => width}rem;
- height: 100%;
- animation: loop;
- animation-duration: ${({ animationDuration }) => animationDuration}s;
- animation-timing-function: linear;
- animation-iteration-count: infinite;
-`;
+ height: 19.4rem;
-export const IllustList = styled.div<{ width: number }>`
- display: flex;
+ .swiper {
+ display: flex;
+ scroll-behavior: smooth;
+ transition-timing-function: linear;
+ }
- width: ${({ width }) => width}rem;
- height: 100%;
+ .swiper-slide {
+ width: 100%;
+ }
`;
export const Button = styled.button`
diff --git a/src/Home/components/HomeMainBanner/index.tsx b/src/Home/components/HomeMainBanner/index.tsx
index fae5575a..11df3718 100644
--- a/src/Home/components/HomeMainBanner/index.tsx
+++ b/src/Home/components/HomeMainBanner/index.tsx
@@ -1,5 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
+import 'swiper/css';
+
+import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
+import { Autoplay, Navigation,Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from 'swiper/react';
import { IcProfile, ImgLogoLecue } from '../../../assets';
import CommonModal from '../../../components/common/Modal/CommonModal';
@@ -10,11 +14,6 @@ function NavigateLecueBook() {
const navigate = useNavigate();
const [modalOn, setModalOn] = useState(false);
- const illustrationRef = useRef(null);
- const [illustListWidth, setIllustListWidth] = useState(0);
- const [animationListWidth, setAnimationListWidth] = useState(0);
- const [animaionDuration, setAnimationDuration] = useState(5);
-
const handleClickIcProfile = () => {
const token = localStorage.getItem('token');
@@ -29,20 +28,6 @@ function NavigateLecueBook() {
}
};
- useEffect(() => {
- if (illustrationRef.current) {
- const itemBoxWidth = illustrationRef.current.offsetWidth;
- const itemListWidth = itemBoxWidth + 6;
-
- setIllustListWidth(itemListWidth);
- setAnimationListWidth(itemListWidth * 2);
-
- const arrLength = illustrationArr.length;
- const newAnimationDuration = Math.max(1, arrLength * 2);
- setAnimationDuration(newAnimationDuration);
- }
- }, [illustrationRef.current]);
-
return (
@@ -51,25 +36,23 @@ function NavigateLecueBook() {
-
-
+
- {Array.from({ length: 10 }, (_, idx) => (
-
- {/*
-
- */}
- {illustrationArr.map((illustration) => illustration.img)}
-
- ))}
-
-
+ {illustrationArr.map((illustration) => {
+ return (
+
+ {illustration.img}
+
+ );
+ })}
+
+
레큐북 만들기
From 1ab177e9ee4fd2aeada2d9bca54a6cbc0adb6b09 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 19 Apr 2024 20:19:42 +0900
Subject: [PATCH 12/19] =?UTF-8?q?feat:=20=ED=99=88=20=EC=9D=BC=EB=9F=AC?=
=?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=ED=9A=A8=EA=B3=BC=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../HomeMainBanner/HomeMainBanner.style.ts | 19 ++++++++++++----
src/Home/components/HomeMainBanner/index.tsx | 22 +++++++++++++++----
2 files changed, 33 insertions(+), 8 deletions(-)
diff --git a/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts b/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
index 07c5f492..ffbe12b9 100644
--- a/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
+++ b/src/Home/components/HomeMainBanner/HomeMainBanner.style.ts
@@ -18,16 +18,27 @@ export const IconWrapper = styled.section`
export const SwiperWrapper = styled.section`
display: flex;
- height: 19.4rem;
-
.swiper {
display: flex;
scroll-behavior: smooth;
transition-timing-function: linear;
}
- .swiper-slide {
- width: 100%;
+ .slide {
+ padding-bottom: 2rem;
+ }
+
+ .swiper-pagination {
+ bottom: 0;
+ }
+
+ .swiper-pagination-bullet {
+ background-color: ${({ theme }) => theme.colors.LG};
+ opacity: 1;
+ }
+
+ .swiper-pagination-bullet-active {
+ background-color: ${({ theme }) => theme.colors.DG};
}
`;
diff --git a/src/Home/components/HomeMainBanner/index.tsx b/src/Home/components/HomeMainBanner/index.tsx
index 11df3718..64d19258 100644
--- a/src/Home/components/HomeMainBanner/index.tsx
+++ b/src/Home/components/HomeMainBanner/index.tsx
@@ -1,8 +1,10 @@
import 'swiper/css';
+import 'swiper/css/effect-fade';
+import 'swiper/css/pagination';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
-import { Autoplay, Navigation,Pagination } from "swiper/modules";
+import { Autoplay, EffectCreative, Pagination } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
import { IcProfile, ImgLogoLecue } from '../../../assets';
@@ -40,14 +42,26 @@ function NavigateLecueBook() {
{illustrationArr.map((illustration) => {
return (
- {illustration.img}
+ {illustration.img}
);
})}
From 221113b33500218ebfda04fc979a6b84f2468ec4 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Fri, 19 Apr 2024 20:26:02 +0900
Subject: [PATCH 13/19] =?UTF-8?q?feat:=20swiper=20=EC=BB=B4=ED=8F=AC?=
=?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Home/components/HomeMainBanner/index.tsx | 38 +---------------
.../components/HomeSwiper/HomeSwiper.style.ts | 28 ++++++++++++
src/Home/components/HomeSwiper/index.tsx | 45 +++++++++++++++++++
3 files changed, 75 insertions(+), 36 deletions(-)
create mode 100644 src/Home/components/HomeSwiper/HomeSwiper.style.ts
create mode 100644 src/Home/components/HomeSwiper/index.tsx
diff --git a/src/Home/components/HomeMainBanner/index.tsx b/src/Home/components/HomeMainBanner/index.tsx
index 64d19258..b51dde96 100644
--- a/src/Home/components/HomeMainBanner/index.tsx
+++ b/src/Home/components/HomeMainBanner/index.tsx
@@ -1,15 +1,9 @@
-import 'swiper/css';
-import 'swiper/css/effect-fade';
-import 'swiper/css/pagination';
-
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
-import { Autoplay, EffectCreative, Pagination } from 'swiper/modules';
-import { Swiper, SwiperSlide } from 'swiper/react';
import { IcProfile, ImgLogoLecue } from '../../../assets';
import CommonModal from '../../../components/common/Modal/CommonModal';
-import { illustrationArr } from '../../constants/HomeIllustArr';
+import HomeSwiper from '../HomeSwiper';
import * as S from './HomeMainBanner.style';
function NavigateLecueBook() {
@@ -38,35 +32,7 @@ function NavigateLecueBook() {
-
-
- {illustrationArr.map((illustration) => {
- return (
-
- {illustration.img}
-
- );
- })}
-
-
+
레큐북 만들기
diff --git a/src/Home/components/HomeSwiper/HomeSwiper.style.ts b/src/Home/components/HomeSwiper/HomeSwiper.style.ts
new file mode 100644
index 00000000..70e6c1ec
--- /dev/null
+++ b/src/Home/components/HomeSwiper/HomeSwiper.style.ts
@@ -0,0 +1,28 @@
+import styled from '@emotion/styled';
+
+export const SwiperWrapper = styled.section`
+ display: flex;
+
+ .swiper {
+ display: flex;
+ scroll-behavior: smooth;
+ transition-timing-function: linear;
+ }
+
+ .slide {
+ padding-bottom: 2rem;
+ }
+
+ .swiper-pagination {
+ bottom: 0;
+ }
+
+ .swiper-pagination-bullet {
+ background-color: ${({ theme }) => theme.colors.LG};
+ opacity: 1;
+ }
+
+ .swiper-pagination-bullet-active {
+ background-color: ${({ theme }) => theme.colors.DG};
+ }
+`;
diff --git a/src/Home/components/HomeSwiper/index.tsx b/src/Home/components/HomeSwiper/index.tsx
new file mode 100644
index 00000000..c3b5f611
--- /dev/null
+++ b/src/Home/components/HomeSwiper/index.tsx
@@ -0,0 +1,45 @@
+import 'swiper/css';
+import 'swiper/css/effect-fade';
+import 'swiper/css/pagination';
+
+import { Autoplay, EffectCreative, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import { illustrationArr } from '../../constants/HomeIllustArr';
+import * as S from './HomeSwiper.style';
+
+const HomeSwiper = () => {
+ return (
+
+
+ {illustrationArr.map((illustration) => {
+ return (
+
+ {illustration.img}
+
+ );
+ })}
+
+
+ );
+};
+
+export default HomeSwiper;
From 23b6641c9a043d489bde23dbbd50d32714fbabe7 Mon Sep 17 00:00:00 2001
From: seoAreum <1971236@hansung.ac.kr>
Date: Sat, 20 Apr 2024 05:20:08 +0900
Subject: [PATCH 14/19] =?UTF-8?q?style:=20asset=20size=20=EB=B3=80?=
=?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/img/img_home_01.svg | 20 ++++++++++----------
src/assets/img/img_home_02.svg | 16 ++++++++--------
src/assets/img/img_home_03.svg | 24 ++++++++++++------------
3 files changed, 30 insertions(+), 30 deletions(-)
diff --git a/src/assets/img/img_home_01.svg b/src/assets/img/img_home_01.svg
index 0c37dc8d..bc537db3 100644
--- a/src/assets/img/img_home_01.svg
+++ b/src/assets/img/img_home_01.svg
@@ -1,10 +1,10 @@
-