chore: Merge branch 'feat/26-feature-page' into feat/#25 및 충돌해결

src/components/features/HowToUse/HowToUse.tsx

@@ -0,0 +1,94 @@
+import styled from "@emotion/styled";
+
+import step1SVG from "../../../assets/step1.svg";
+import step2SVG from "../../../assets/step2.svg";
+import step3SVG from "../../../assets/step3.svg";
+
+const HowToUseContainer = styled.div`
+  width: 100%;
+  height: auto;
+  text-align: center;
+  left: 0;
+  right: 0
+  margin: 0 auto;
+  margin-top: 120px;
+  position: absolute;
+
+`;
+
+const TextWrapper = styled.div`
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); // 중앙으로 보정
+  margin-bottom: -60px;
+  margin-top: 120px;
+`;
+
+const HowToUseTitle = styled.p`
+  font-size: 36px;
+  font-weight: bold;
+  color: #39a7f7;
+  margin-bottom: -30px;
+`;
+
+const HowToUseDescription = styled.p`
+  font-size: 45px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: -30px;
+`;
+const HighlightText = styled.p`
+  color: #39a7f7;
+  display: inline;
+`;
+const AddtionalDescription = styled.p`
+  font-size: 32px;
+  font-weight: bold;
+`;
+const StepContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 30px;
+`;
+const Step = styled.div`
+  flex: 1;
+  flex-direction: column;
+`;
+const StepImage = styled.img`
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  display: block;
+`;
+
+const HowToUse: React.FC = () => {
+  return (
+    <HowToUseContainer>
+      <TextWrapper>
+        <HowToUseTitle>어떻게 사용하나요?</HowToUseTitle>
+        <HowToUseDescription>
+          <HighlightText>말만 하세요,</HighlightText>당신의 플랜을
+          책임져드립니다.
+        </HowToUseDescription>
+        <AddtionalDescription>
+          빠르게 일정을 만들고, 쉽게 관리해보세요.
+        </AddtionalDescription>
+      </TextWrapper>
+      <StepContainer>
+        <Step>
+          <StepImage src={step1SVG} alt="1단계 이미지" />
+        </Step>
+        <Step>
+          <StepImage src={step2SVG} alt="2단계 이미지" />
+        </Step>
+        <Step>
+          <StepImage src={step3SVG} alt="3단계 이미지" />
+        </Step>
+      </StepContainer>
+    </HowToUseContainer>
+  );
+};
+
+export default HowToUse;

src/pages/Landing/LandingPage.tsx

@@ -2,83 +2,134 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "@emotion/styled";
 import circleSVG from "@/assets/circle (1).svg"; // 원형 이미지
-import mockSVG from "@/assets/mock.svg"; // 목업 이미지
+import mockSVG from "@/assets/mock2.svg"; // 목업 이미지
+import effectSVG from "@/assets/effect.svg";
+import logoSVG from "@/assets/logo.svg";
+import HowToUse from "@/components/features/HowToUse/HowToUse";
+import Button from "@/components/common/Button/Button";
 
 // 스타일 정의
-const LandingContainer = styled.div`
-  position: relative;
+const NavBar = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
+  height: 120px;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  z-index: 100;
+`;
+
+const Logo = styled.img`
+  height: 70px;
+`;
+const NaviBarLink = styled.div`
+  display: flex;
+  gap: 20px;
+`;
+const NavLink = styled.a`
+  text-decoration: none;
+  color: #333;
+  font-size: 15px;
+  cursor: pointer;
+  font-weight: 600;
+  &:hover {
+    color: #39a7f7;
+  }
+`;
+
+const LandingContainer = styled.div`
   height: 100vh;
   display: flex;
-  justify-content: flex-start; /* 콘텐츠를 가운데 정렬 */
+  justify-content: center;
   align-items: center;
-  background-color: #f9f9f9;
+  margin-top: 120px;
 `;
 
 const ContentWrapper = styled.div`
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  max-width: 1280px;
-  width: 100%;
-  padding-left: 0px;
   z-index: 1;
   position: relative;
+  margin: 0 auto;
 `;
 
 const BackgroundCircle = styled.img`
   position: absolute;
-  left: -350px; /* 화면 가장자리와 붙음 */
-  bottom: 0px; /* 하단 가장자리와 붙음 */
-  width: 400px; /* 원의 크기 조정 */
-  height: 800px;
-  z-index: 0; /* 텍스트 뒤로 보내기 */
+  left: -360px;
+  bottom: -100px;
+  width: 400px;
+  height: auto;
+  z-index: 0;
   opacity: 0.5;
 `;
 
 const TextWrapper = styled.div`
   max-width: 600px;
   margin-right: 20px;
   margin-left: -150px;
+  margin-top: -200px;
+`;
+
+const TitleWithImage = styled.div`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  margin-left: -100px;
+  margin-top: -60px;
 `;
 
 const Title = styled.h1`
-  font-size: 48px;
+  font-size: 50px;
   font-weight: bold;
-  color: #333;
-  margin-bottom: 20px;
+  color: #39a7f7;
+  margin-bottom: 0px;
 `;
 
 const SubTitle = styled.p`
-  font-size: 24px;
-  color: #666;
-  margin-bottom: 40px;
+  font-size: 66px;
+  font-weight: bold;
+  color: #39a7f7;
+  margin-top: -20px;
+  margin-bottom: 0px;
+  margin-left: -70px;
 `;
 
-const ButtonContainer = styled.div`
-  display: flex;
-  gap: 20px;
+const AdditionalText = styled.p`
+  font-size: 40px;
+  font-weight: bold;
+  color: #3f3f3f;
+  margin-top: 20px;
+  margin-bottom: 40px;
+  margin-left: -80px;
 `;
 
-const Button = styled.button`
-  padding: 15px 30px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 18px;
-  color: #fff;
+const HighlightText = styled.p`
+  color: #39a7f7;
+  display: inline;
 `;
 
-const LoginButton = styled(Button)`
-  background-color: #39a7f7;
+const EffectImage = styled.img`
+width: 50px,
+height: 63px;
+margin-left: 10px
 `;
 
-const StartButton = styled(Button)`
-  background-color: #007aff;
+const ButtonContainer = styled.div`
+  display: flex;
+  gap: 20px;
 `;
 
 const MockupImage = styled.img`
-  width: 500px;
+  width: 700px;
+  margin-top: 50px;
+  margin-left: -50px;
 `;
 
 const LandingPage: React.FC = () => {
@@ -93,20 +144,40 @@ const LandingPage: React.FC = () => {
   };
 
   return (
-    <LandingContainer>
-      <ContentWrapper>
-        <TextWrapper>
-          <Title>간편하고 빠른 플랜 생성</Title>
-          <SubTitle>내 목소리로 일정을 만들고, 쉽게 관리하세요.</SubTitle>
-          <ButtonContainer>
-            <LoginButton onClick={handleLoginClick}>로그인</LoginButton>
-            <StartButton onClick={handleStartClick}>시작하기</StartButton>
-          </ButtonContainer>
-        </TextWrapper>
-        <MockupImage src={mockSVG} alt="목업 이미지" />
-      </ContentWrapper>
-      <BackgroundCircle src={circleSVG} alt="배경 원" />
-    </LandingContainer>
+    <>
+      <NavBar>
+        <Logo src={logoSVG} alt="로고" />
+        <NaviBarLink>
+          <NavLink href="#introduce">소개</NavLink>
+          <NavLink href="#pricing">사용 방법</NavLink>
+          <NavLink href="#subscribe">구독하기</NavLink>
+          <NavLink href="#free-trial">무료 체험</NavLink>
+        </NaviBarLink>
+      </NavBar>
+
+      <LandingContainer>
+        <ContentWrapper>
+          <TextWrapper>
+            <TitleWithImage>
+              <Title>간편하고 빠른 플랜 생성</Title>
+              <EffectImage src={effectSVG} alt="효과 이미지" />
+            </TitleWithImage>
+            <SubTitle>Speak, and Plan it!</SubTitle>
+            <AdditionalText>
+              <HighlightText>내 목소리</HighlightText>로 일정을 만들고, <br />
+              쉽게 관리해보세요!
+            </AdditionalText>
+            <ButtonContainer>
+              <Button onClick={handleLoginClick}>로그인</Button>
+              <Button onClick={handleStartClick}>시작하기</Button>
+            </ButtonContainer>
+          </TextWrapper>
+          <MockupImage src={mockSVG} alt="목업 이미지" />
+          <BackgroundCircle src={circleSVG} alt="배경 원" />
+        </ContentWrapper>
+      </LandingContainer>
+      <HowToUse />
+    </>
   );
 };
 

src/router/Router.tsx

@@ -10,7 +10,8 @@ import FriendPage from "@/pages/Friend/FriendPage";
 import MyPage from "@/pages/Mypage/Mypage";
 import Layout from "@/components/features/Layout/Layout";
 import MainPage from "@/pages/Main/MainPage";
-import PrivateRoute from "./PrivateRoute/PrivateRoute";
+import PrivateRoute from "./PrivateRoute";
+
 import CheckAuth from "./CheckAuth";
 
 function Router() {

src/variants/variants.ts

@@ -3,5 +3,6 @@ const breakpoints = {
   desktop: "@media (min-width: 1280px)",
   sm: 768,
   lg: 1280,
+
 };
 export default breakpoints;