-
🧑💻민상연 (Team Lead): BE/Infra 개발
-
👩💻이현주 (FE Dev): FE 개발, 배포
-
👩🎨이시은 (Designer): 웹 버전 디자인
-
👩🎨장연우 (Designer): 모바일 버전 디자인
+ return (
+
+
+
+
언제볼까?에서
+
이렇게 해결해드립니다!
+
+ );
+};
+
+
+const Section3Card = ({ title, description, imgURL }) => {
+ return(
+
+
+
{title}
+
+
+ {description[0]}
+
+ {description[1] && (
+
+ {description[1]}
+
+ )}
+
+
+
-
-
저희의 목표는 약속 상황의 불편함을 해결하고
-
더 많은 만남과 추억을 만들 수 있도록 돕는 것!
-
-);
+ );
+}
+
+//팀 소개
+const Section4 = () => {
+ const positions = [
+ { x: 100, y: -38, name: "민상연", role: "Developer", profileURL: "@judemin", flag: "dev" },
+ { x: 220, y: 80, name: "강찬욱", role: "Developer", profileURL: "@chanwookK", flag: "dev" },
+ { x: 170, y: 200, name: "장연우", role: "Designer", profileURL: "@hyunju1112", flag: "design" },
+ { x: -50, y: 170, name: "이시은", role: "Designer", profileURL: "@hyunju1112", flag: "design" },
+ { x: -55, y: 40, name: "이현주", role: "Developer", profileURL: "@hyun1211", flag: "dev" },
+ ];
+ // 중심점 계산 (원의 중심을 (0,0)으로 가정)
+ const centerX = 40;
+ const centerY = 140;
+
+ // 각 위치에서 중심을 향해 이동하는 거리 계산
+ const calculateMovement = (x, y, index) => {
+ // 현재 위치에서 중심까지의 벡터 계산
+ const vectorX = centerX - x;
+ const vectorY = centerY - y;
+
+ // 벡터의 크기 계산
+ const magnitude = Math.sqrt(vectorX * vectorX + vectorY * vectorY);
+
+ // 이동할 거리 (예: 전체 거리의 20%)
+ const moveDistance = magnitude * 0.15;
+
+ // 정규화된 벡터에 이동 거리를 곱해 최종 이동량 계산
+ const moveX = (vectorX / magnitude) * moveDistance;
+ const moveY = (vectorY / magnitude) * moveDistance;
+
+ return {
+ x: x + moveX,
+ y: y + moveY
+ };
+ };
+
+ return(
+
+
+
+
+
팀 소개
+
+
+
저희는 이런 문제들 속에 있는 대학생입니다.
+
회의, 팀플, 동아리 활동... 매번 약속 잡기가 힘들었죠.
+
그 경험을 바탕으로 ‘언제볼까?’가 탄생하게 되었습니다.
+
+
+
+
+ {positions.map((item, index) => {
+ const targetPosition = calculateMovement(item.x, item.y, index);
+ return(
+
+
+
+
+
+ );
+ })}
+
+
+
+ );
+};
+
+const Section4Card = ({ name, role, profileURL, flag }) => {
+ const userId = profileURL.replace("@", "");
+ const url =
+ flag === "dev"
+ ? `https://github.com/${userId}` // GitHub
+ : `https://www.instagram.com/${userId}`; // 디자인 포트폴리오 사이트?
+
+ return (
+
+ );
+ };
+
+//함께해요! 그래서 우리, 언제 볼까요?
+const Section5 = ({handleScrollToTop, animationData}) => {
+ const messages = [
+ "저희 팀의 목표는",
+ "약속 상황의 소소한 불편함을 해결하고,",
+ "더 많은 만남과 추억을 만들 수 있도록 돕는 것!"
+ ];
+ return(
+
+
+ {messages.map((message, index) => (
+
+ {message}
+
+ ))}
+
+
+
+
함께해요!
+
그래서 우리, 언제 볼까요?
+
+ {animationData ? (
+
+ ):(
+
Loadding...
+ )}
+
+
+ );
+};
+//연락처 탭
const Footer = () => (
-
-);
+
);
-export default LandingPage;
\ No newline at end of file
+const LandingPage = () => {
+ const [animationData, setAnimationData] = useState(null);
+
+ useEffect(() => {
+ fetch("/upArrow.json")
+ .then((response) => response.json())
+ .then((data) => setAnimationData(data));
+ }, []);
+
+ const navigate = useNavigate();
+
+ const handleScrollToTop = useCallback(() => {
+ let currentPosition = window.scrollY;
+ let start = null;
+
+ const easeOutExpo = (t) => 1 - Math.pow(2, -10 * t); // 점점 빠르게
+
+ const scrollAnimation = (timestamp) => {
+ if (!start) start = timestamp;
+ let progress = (timestamp - start) / 1000; // 초 단위 변환
+ let easing = easeOutExpo(progress);
+
+ let newPosition = currentPosition * (1 - easing); // 점점 적게 스크롤 남기기
+ window.scrollTo(0, newPosition);
+
+ if (newPosition > 1) {
+ requestAnimationFrame(scrollAnimation);
+ } else {
+ window.scrollTo(0, 0);
+
+ }
+ };
+
+ requestAnimationFrame(scrollAnimation);
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default LandingPage;
diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js
deleted file mode 100644
index e525650..0000000
--- a/src/pages/LandingPage.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import LandingPage from '../components/LandingPage';
-
-const LandingPageWrapper = () => {
- return
;
-};
-
-export default LandingPageWrapper;
\ No newline at end of file
diff --git a/src/styles/color.ts b/src/styles/color.ts
index 9e4eab3..9cf1e04 100644
--- a/src/styles/color.ts
+++ b/src/styles/color.ts
@@ -39,7 +39,7 @@ export const colors = {
export const colorVariants = cva('', {
variants: {
color: {
- 'white': 'bg-[var(--white)]',
+ 'white': 'text-[var(--white)]',
'gray-50': 'text-[var(--gray-50)]',
'gray-100': 'text-[var(--gray-100)]',
'gray-200': 'text-[var(--gray-200)]',
- 
+