[김수영] sprint11

components/_styled/mainStyled.tsx

@@ -1,11 +1,183 @@
 import styled from "styled-components";
+import Image from 'next/image';
 
 export const MainWrapper = styled.div`
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
 `;
+
 export const MainContainer = styled.div`
+  max-width: 1200px;
+  margin-top: 138px;
+`;
+
+export const SectionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 138px;
+  @media (max-width: 1199px){
+    max-width:696px;
+  }
+`;
+
+export const Banner = styled.section`
+  display: flex;
+  width: 100%;
+  height: 540px;
+  background: #cfe5ff;
+  align-items: flex-end;
+  justify-content: center;
+  flex-shrink: 0;
+
+  @media (max-width: 1199px) {
+    height: 771px;
+  }
+`;
+
+export const BannerWrap = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+
+  @media (max-width: 1199px) {
+    flex-direction: column;
+    gap: 100px;
+    width: 744px;
+    height: 100%;
+  }
+`;
+
+export const BannerImg = styled(Image)`
+  width: 746px;
+  height: 340px;
+
+  @media (max-width: 1199px) {
+    width: 100%;
+    height: 340px;
+  }
+`;
+
+export const BannerTextBox = styled.div`
+  height: 100%;
+  display: flex;
+  padding-bottom: 60px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 32px;
+
+  @media (max-width: 1199px) {
+    align-items: center;
+    text-align: center;
+    padding-bottom: 40px;
+  }
+`;
+
+export const BannerText = styled.h1`
+  color: #374151;
+  margin: 0;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 140%;
+
+  @media (max-width: 767px) {
+    font-size: 32px;
+  }
+`;
+
+export const ItemsButton = styled.a`
+  display: flex;
+  height: 56px;
+  padding: 16px 124px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 40px;
+  background: #3692ff;
+  color: #f9fafb;
+  font-size: 20px;
+  font-weight: 600;
+  text-decoration: none;
+
+  @media (max-width: 767px) {
+    padding: 12px 71px;
+    font-size: 18px;
+  }
+`;
+
+export const Section = styled.section`
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const SectionWrap = styled.div`
+  max-width: 1200px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 64px;
+
+  @media (max-width: 1199px) {
+    max-width: 696px;
+    flex-direction: column;
+    gap: 24px;
+  }
 `;
+
+export const SectionTextBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  justify-content: center;
+  align-items: flex-start;
+
+  @media (max-width: 1199px) {
+    align-items: center;
+    margin: 0;
+    text-align: center;
+  }
+`;
+
+export const SectionText = styled.h3`
+  color: #374151;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 140%;
+
+  @media (max-width: 767px) {
+    font-size: 24px;
+  }
+`;
+
+export const SectionTextDetail = styled.p`
+  color: #374151;
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+
+  @media (max-width: 1199px) {
+    font-size: 19px;
+    line-height: 26px;
+  }
+
+  @media (max-width: 767px) {
+    font-size: 16px;
+  }
+`;
+
+export const Tag = styled.p`
+  color: #3692ff;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+
+  @media (max-width: 767px) {
+    font-size: 16px;
+  }
+`;

components/_styled/signStyled.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const AuthContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+
+export const HomeButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const PandaLogo = styled.img`
+  width: 396px;
+`;

components/api/api.tsx

@@ -2,6 +2,8 @@ import axios from 'axios';
 import { ItemList } from '@/components/boards/PostList';
 import { Article } from '@/components/board/Article';
 import { CommentList } from '@/components/board/Comment';
+import { SignUpFormInputs } from '../sign/SignUpForm';
+import { SignInFormInputs } from '../sign/SignInForm';
 const BASE_URL = 'https://panda-market-api.vercel.app';
 
 export async function getArticles(params = {}) {
@@ -48,3 +50,31 @@ export async function getArticleComment(articleId: number, params = { limit: 10,
         throw error;
     }
 }
+export async function postSignUp(signUpData : SignUpFormInputs) {
+    try {
+        const response = await axios.post(`${BASE_URL}/auth/signUp`, {
+            email:signUpData.email,
+            nickname:signUpData.nickname,
+            password:signUpData.password,
+            passwordConfirmation:signUpData.passwordConfirm,
+        });
+        console.log(signUpData);
+        return response.data; 
+    } catch (error) {
+        console.error("Failed to sign up:", error);
+        throw error;
+    }
+}
+export async function postSignIn(signInData : SignInFormInputs) {
+    try {
+        const response = await axios.post(`${BASE_URL}/auth/signIn`, {
+            email:signInData.email,
+            password:signInData.password,
+        });
+        console.log(signInData);
+        return response.data; 
+    } catch (error) {
+        console.error("Failed to sign in:", error);
+        throw error;
+    }
+}

components/boards/BestPostCard.tsx

@@ -18,7 +18,6 @@ const BestPostCard:React.FC<ItemCardProps> = ({ item }) => {
     };
     return (
         <BS.BestCardContainer onClick={handleCardClick}>
-
             <BS.BestBadgeContainer>
                 <BS.MedalIcon src={MedalIcon} alt="메달아이콘" />
                 <BS.BestText>Best</BS.BestText>

components/layout/Footer.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import * as S from './Styled';
+import Link from 'next/link';
+import FacebookIcon from '@/components/common/images/ic_facebook.png';
+import TwitterIcon from '@/components/common/images/ic_twitter.png';
+import InstagramIcon from '@/components/common/images/ic_instagram.png';
+import YoutubeIcon from '@/components/common/images/ic_youtube.png';
+export default function Footer() {
+    return (
+        <S.Footer>
+        <S.FooterWrap>
+          <span>©codeit - 2024</span>
+          <S.FooterCenter>
+            <S.FooterLink href="/privacy">Privacy Policy</S.FooterLink>
+            <S.FooterLink href="/faq">FAQ</S.FooterLink>
+          </S.FooterCenter>
+          <S.SnsWrap>
+            <Link href="https://www.facebook.com/">
+              <S.SnsIcon src={FacebookIcon} alt="Facebook" width={18}/>
+            </Link>
+            <Link href="https://x.com/">
+              <S.SnsIcon src={TwitterIcon} alt="Twitter" width={18}/>
+            </Link>
+            <Link href="https://youtube.com">
+              <S.SnsIcon src={YoutubeIcon} alt="YouTube" width={18}/>
+            </Link>
+            <Link href="https://instagram.com">
+              <S.SnsIcon src={InstagramIcon} alt="Instagram" width={18}/>
+            </Link>
+          </S.SnsWrap>
+        </S.FooterWrap>
+      </S.Footer>
+    );
+}
+

components/layout/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React , { useEffect, useState }from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import PandaLogo from '../common/images/pandalogo.png';
@@ -7,8 +7,18 @@ import * as HS from './Styled';
 
 
 export default function Header() {
+    const [isLogin, setIsLogin] = useState(false);
     const router = useRouter();
 
+    const handleOnClick = () => {
+        router.push('/sign/in')
+    }
+    useEffect(()=>{
+        const accessToken = localStorage.getItem('accessToken')
+        setIsLogin(!accessToken);
+    })
+
+
     return (
         <HS.Header>
             <HS.HeaderContainer>
@@ -29,7 +39,8 @@ export default function Header() {
                         </Link>
                     </HS.NavContainer>
                 </HS.HeaderWrap>
-                <HS.ProfileImg src={ProfileImg} alt="프로필 이미지" />
+                {isLogin ? (<HS.LoginButton onClick={handleOnClick}>로그인</HS.LoginButton>):
+                (<HS.ProfileImg src={ProfileImg} alt="프로필 이미지" />)}
             </HS.HeaderContainer>
         </HS.Header>
     );