Merge pull request #106 from Team-Lecue/feature/Home

[ Home ] dev 머지용 PR입니다!

src/Home/components/LecueBookList/LecueBookList.style.ts

@@ -0,0 +1,61 @@
+import styled from '@emotion/styled';
+
+export const LecueBookListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+`;
+
+export const Title = styled.header`
+  width: 100%;
+  padding: 1.5rem 0;
+
+  border-color: ${({ theme }) => theme.colors.BG};
+  border-width: 0.1rem 0;
+  border-style: solid;
+  color: ${({ theme }) => theme.colors.BG};
+  ${({ theme }) => theme.fonts.Title1_SB_16};
+
+  text-align: center;
+`;
+
+export const LecueBookList = styled.section`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2.2rem;
+
+  width: 100%;
+  padding: 3rem 1.6rem 2.2rem;
+
+  background-color: ${({ theme }) => theme.colors.key};
+`;
+
+export const LecueBook = styled.li`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  width: 10rem;
+  height: 14rem;
+  gap: 1rem;
+
+  cursor: pointer;
+`;
+
+export const BookImage = styled.img`
+  width: 9.8rem;
+  height: 9.8rem;
+
+  border-radius: 50%;
+`;
+
+export const BookTitle = styled.p`
+  width: 100%;
+
+  ${({ theme }) => theme.fonts.E_Body1_SB_14};
+
+  text-align: center;
+  word-wrap: normal;
+  word-break: break-all;
+`;

src/Home/components/LecueBookList/index.tsx

@@ -0,0 +1,104 @@
+import * as S from './LecueBookList.style';
+
+function LecueBookList() {
+  const handleClickLecueBook = (bookName: string) => {
+    alert(`${bookName} 선택되었습니다.`);
+  };
+
+  return (
+    <S.LecueBookListWrapper>
+      <S.Title>인기 레큐북 구경하기</S.Title>
+      <S.LecueBookList>
+        {BOOK_LIST.map((book) => (
+          <S.LecueBook
+            key={book.bookId}
+            onClick={() => handleClickLecueBook(book.favoriteName)}
+          >
+            <S.BookImage src={book.favoriteImage} alt="레큐북-이미지" />
+            <S.BookTitle>{book.favoriteName}</S.BookTitle>
+          </S.LecueBook>
+        ))}
+      </S.LecueBookList>
+    </S.LecueBookListWrapper>
+  );
+}
+
+export default LecueBookList;
+
+const BOOK_LIST = [
+  {
+    bookId: 0,
+    favoriteName: 'SOPT',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=1',
+  },
+  {
+    bookId: 1,
+    favoriteName: '환승연애 출연진',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=2',
+  },
+  {
+    bookId: 2,
+    favoriteName: 'Vanner',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=3',
+  },
+  {
+    bookId: 3,
+    favoriteName: '침착맨 생카 데이쥬',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=4',
+  },
+  {
+    bookId: 4,
+    favoriteName: '빠니보틀',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=5',
+  },
+  {
+    bookId: 5,
+    favoriteName: '레오제이',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=6',
+  },
+  {
+    bookId: 6,
+    favoriteName: '곽튜브',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=7',
+  },
+  {
+    bookId: 7,
+    favoriteName: '재롱잔치',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=8',
+  },
+  {
+    bookId: 8,
+    favoriteName: '주호다',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=9',
+  },
+  {
+    bookId: 9,
+    favoriteName: '1분요리 뚝딱이형',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=10',
+  },
+  {
+    bookId: 10,
+    favoriteName: '송이송이',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=11',
+  },
+  {
+    bookId: 11,
+    favoriteName: '상윤쓰',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=12',
+  },
+  {
+    bookId: 12,
+    favoriteName: '1분요리 뚝딱이형',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=13',
+  },
+  {
+    bookId: 13,
+    favoriteName: '송이송이',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=14',
+  },
+  {
+    bookId: 14,
+    favoriteName: '상윤쓰',
+    favoriteImage: 'https://source.unsplash.com/random/98x98?sig=15',
+  },
+];

src/Home/components/NavigateLecueBook/NavigateLecueBook.style.ts

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+
+export const MainWrapper = styled.div`
+  width: 100%;
+
+  background-color: ${({ theme }) => theme.colors.background};
+`;
+
+export const IconWrapper = styled.section`
+  display: flex;
+  align-items: baseline;
+
+  width: 100%;
+  padding: 6rem 1.6rem 5rem;
+  gap: 15.7rem;
+`;
+
+export const ButtonWrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+
+  padding: 0 9.5rem 4.9rem 0;
+
+  gap: 1rem;
+`;
+
+export const Button = styled.button<{ variant?: boolean }>`
+  width: 28rem;
+  height: 6.4rem;
+
+  border: 0.1rem solid ${({ theme }) => theme.colors.BG};
+  border-radius: 0 0.2rem 0.2rem 0;
+  border-left: none;
+  background-color: ${({ theme, variant }) =>
+    variant ? theme.colors.white : theme.colors.BG};
+  color: ${({ theme, variant }) =>
+    variant ? theme.colors.BG : theme.colors.white};
+  ${({ theme }) => theme.fonts.Title1_SB_16}
+`;

src/Home/components/NavigateLecueBook/index.tsx

@@ -0,0 +1,40 @@
+import { IcNotice, ImgLogoLecue } from '../../../assets';
+import * as S from './NavigateLecueBook.style';
+
+function NavigateLecueBook() {
+  const handleClickMakingBtn = () => {
+    // 로그인 여부 판별 후 레큐북 생성으로 이동
+    alert('레큐북 만들기 버튼 클릭');
+  };
+
+  const handleClickMypageBtn = () => {
+    // 로그인 여부 판별 후 마이페이지로 이동
+    alert('내 기록 보러가기 버튼 클릭');
+  };
+
+  return (
+    <S.MainWrapper>
+      <S.IconWrapper>
+        <ImgLogoLecue />
+        <a
+          href="https://rileybyeon.notion.site/TEAM-LECUE-b7801fe345544442938d3e54980032e4?pvs=4"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <IcNotice />
+        </a>
+      </S.IconWrapper>
+
+      <S.ButtonWrapper>
+        <S.Button type="button" variant onClick={handleClickMakingBtn}>
+          레큐북 만들기
+        </S.Button>
+        <S.Button type="button" onClick={handleClickMypageBtn}>
+          내 기록 보러가기
+        </S.Button>
+      </S.ButtonWrapper>
+    </S.MainWrapper>
+  );
+}
+
+export default NavigateLecueBook;

src/Home/page/Home.style.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100vw;
+  height: 100dvh;
+`;

src/Home/page/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import LecueBookList from '../components/LecueBookList';
+import NavigateLecueBook from '../components/NavigateLecueBook';
+
+function Home() {
+  return (
+    <React.Fragment>
+      <NavigateLecueBook />
+      <LecueBookList />
+    </React.Fragment>
+  );
+}
+
+export default Home;

src/styles/theme.ts

@@ -139,7 +139,7 @@ const fonts = {
     fontStyle: 'normal',
     fontWeight: 600,
     fontSize: '1.4rem',
-    lineHeight: 'auto',
+    lineHeight: '120%',
     letterSpacing: '0',
   },
   E_Body2_R_14: {