✨ feat: 로그인 및 회원가입 화면 업데이트

src/components/sign-in/SocialLoginModal/SocialLoginModal.styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+`;
+
+export const Title = styled.h2`
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 16px;
+  color: #333;
+`;

src/components/sign-in/SocialLoginModal/SocialLoginModal.tsx

@@ -0,0 +1,21 @@
+import CustomModal from "../../global/CustomModal";
+import { SocialLoginButton } from "../../global/SocialLoginButton";
+import { ModalContent, Title } from "./SocialLoginModal.styles";
+
+
+
+interface SocialLoginModalProps {
+  onClose: () => void;
+}
+
+export default function SocialLoginModal({ onClose }: SocialLoginModalProps) {
+  return (
+    <CustomModal onClose={onClose}>
+      <ModalContent>
+        <SocialLoginButton type="kakao" />
+        <SocialLoginButton type="naver" />
+        <SocialLoginButton type="google" />
+      </ModalContent>
+    </CustomModal>
+  );
+}

src/components/sign-in/SocialLoginModal/index.ts

@@ -0,0 +1 @@
+export { default } from './SocialLoginModal';

src/page/intro/index.styles.ts

@@ -0,0 +1,42 @@
+import { styled } from "styled-components";
+
+export const PageWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding-top: 70px;
+    height: 100vh; // 전체 높이 사용
+`;
+
+export const ContentWrapper = styled.div`
+    flex: 1; // 남은 공간 모두 사용
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 24px; // 좌우 패딩
+`;
+
+export const ButtonWrapper = styled.div`
+    padding: 24px;
+    background: white;
+`;
+
+export const TitleWrapper = styled.div`
+  margin-bottom: 16px;  
+`
+
+export const Title = styled.h1`
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+`;
+
+export const HighlightedText = styled.span`
+  color: #007bff; /* 강조 색상 */
+`;
+
+export const Logo = styled.img`
+  width: 120px;
+  height: auto;
+  margin: 20px 0;
+`;

src/page/intro/index.tsx

@@ -0,0 +1,27 @@
+import symbol from '../../assets/images/symbol.png'
+import { CustomButton } from '../../components/global/CustomButton';
+import { ButtonWrapper, ContentWrapper, HighlightedText, Logo, PageWrapper, Title } from './index.styles';
+
+
+const Intro = () => {
+  return (
+    <PageWrapper>
+        <ContentWrapper>
+            <Title>
+                당신의 
+                <HighlightedText> 반려견</HighlightedText>
+                의 모든 날들이
+            </Title>
+            <Title>
+                <HighlightedText>아름답도록</HighlightedText>
+            </Title>
+            <Logo src={symbol} alt="Logo" />
+        </ContentWrapper>
+        <ButtonWrapper>
+            <CustomButton>시작하기</CustomButton>
+        </ButtonWrapper>
+    </PageWrapper>
+  );
+};
+
+export default Intro;

src/page/sign-in/index.styles.ts

@@ -0,0 +1,32 @@
+import { styled } from "styled-components";
+
+export const PageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: 70px;
+  height: 100vh;
+`;
+
+export const ContentWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 24px;
+`;
+
+const Title = styled.h1`
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+`;
+
+const HighlightedText = styled.span`
+  color: #007bff;
+`;
+
+export const ButtonWrapper = styled.div`
+  padding: 24px;
+  background: white;
+`;

src/page/sign-in/index.tsx

@@ -0,0 +1,42 @@
+import { CustomButton } from "../../components/global/CustomButton";
+import SocialLoginModal from "../../components/sign-in/SocialLoginModal/SocialLoginModal";
+import { useState } from "react";
+import { ButtonWrapper, ContentWrapper, PageWrapper } from "./index.styles";
+import { HighlightedText, Title } from "../intro/index.styles";
+
+export default function SignIn() {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const handleGeneralSignUp = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalVisible(false);
+  };
+
+  return (
+    <PageWrapper>
+      <ContentWrapper>
+        <Title>
+          <HighlightedText>퓨티</HighlightedText>
+          에 오신 것을 환영해요
+        </Title>
+        <div>
+          퓨티는 반려견에게 <HighlightedText>딱!</HighlightedText> 맞는 관리를 위한 서비스예요
+        </div>
+      </ContentWrapper>
+      <ButtonWrapper>
+        <CustomButton size="large" variant="secondary" fullwidth={true} onClick={handleGeneralSignUp}>
+          일반 회원 가입
+        </CustomButton>
+        <CustomButton size="large" variant="outline" fullwidth={true}>
+          미용사 회원 가입
+        </CustomButton>
+      </ButtonWrapper>
+      {isModalVisible && (
+        <SocialLoginModal onClose={handleCloseModal} />
+      )}
+    </PageWrapper>
+  );
+}

src/router.tsx

@@ -1,5 +1,7 @@
 import { createBrowserRouter } from "react-router-dom";
 import App from "./App";
+import Intro from "./page/intro";
+import SignIn from "./page/sign-in";
 import SignUp from "./page/sign-up";
 
 export const router = createBrowserRouter([
@@ -8,9 +10,17 @@ export const router = createBrowserRouter([
     element: <App />,
     children: [
         {
-          path: "signup",
+          path: "sign-in",
+          element: <SignIn/>
+        },
+        {
+          path: "sign-up",
           element: <SignUp />,
         },
+        {
+          path: "intro",
+          element: <Intro/>
+        }
     ],
   },
 ]);