Merge branch 'develop' into JeongAnJang

src/apis/member/getMember.ts

@@ -0,0 +1,10 @@
+import instance from '../index';
+
+export const getMeber = async (id: number) => {
+  const response = await instance.get('/member', {
+    headers: {
+      'insta-id': id,
+    },
+  });
+  return response;
+};

src/apis/member/index.ts

@@ -0,0 +1 @@
+export { getMeber } from './getMember';

src/pages/home/Home.tsx

@@ -1,12 +1,45 @@
 import styled from '@emotion/styled';
+import StartButton from './components/StartButton/StartButton';
+import { Generators } from '@styles/generator';
+import { getMeber } from '@apis/member';
 
 const Home = () => {
-  return <HomeWrapper>Home</HomeWrapper>;
+  return (
+    <HomeWrapper>
+      <WelcomeH1>투제로에 온 것을 환영해요!</WelcomeH1>
+      <MainImage src="https://via.placeholder.com/200" alt="메인 페이지 소개" />
+      <MainButtons>
+        <StartButton descriptionLabel="처음 왔나요?" buttonLabel="투제로 시작하기" onClick={() => getMeber(1)} />
+        <StartButton descriptionLabel="이미 계정이 있나요?" buttonLabel="투제로 계속하기" />
+      </MainButtons>
+    </HomeWrapper>
+  );
 };
 
 export default Home;
 
 const HomeWrapper = styled.div`
   width: 100%;
+  height: 100%;
   background-color: ${({ theme }) => theme.color.gray02};
+  ${Generators.flexGenerator('column', 'center', 'center')};
+  padding: 2.4rem 1.6rem 3.2rem;
+`;
+
+const WelcomeH1 = styled.h1`
+  margin-top: 2.8rem;
+
+  font-size: 24px;
+  font-weight: 700;
+`;
+
+const MainImage = styled.img`
+  margin-top: 6.7rem;
+  margin-bottom: 5.2rem;
+`;
+
+const MainButtons = styled.section`
+  width: 100%;
+  ${Generators.flexGenerator('column')};
+  gap: 1.6rem;
 `;

src/pages/home/components/StartButton/StartButton.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import { Generators } from '@styles/generator';
+
+export interface StartButtonProps {
+  descriptionLabel: string;
+  buttonLabel: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const StartButton = ({ descriptionLabel, buttonLabel, onClick = () => {} }: StartButtonProps) => {
+  return (
+    <StartButtonContainer className={`start-button`} onClick={onClick}>
+      <DescriptionSpan>{descriptionLabel}</DescriptionSpan>
+      <ButtonSpan>{buttonLabel}</ButtonSpan>
+    </StartButtonContainer>
+  );
+};
+
+export default StartButton;
+
+const StartButtonContainer = styled.button`
+  width: 100%;
+  height: 8rem;
+  ${Generators.flexGenerator('column', 'center', 'center')};
+  gap: 1rem;
+  padding: 1.2rem 0;
+`;
+
+const DescriptionSpan = styled.span`
+  font-size: 1.6rem;
+  font-weight: 400;
+`;
+
+const ButtonSpan = styled.span`
+  font-size: 1.6rem;
+  font-weight: 700;
+`;