2024.01.23 TIL

Today's list

1. 맵 페이지 구성 수정
2. 메인페이지 작업

---

1. 디자이너님의 의견에 따라 맵 페이지가 바뀌었습니다.
   기존의 버튼을 통해 새로운 마커를 보여줬지만, 카테고리 버튼의 공간이 애매해서 조금 더
   시각적으로 좋은 플로팅 버튼을 사용하기로 했습니다.

찾아보니 npm 내에서도 있길래 한번 테스트용으로 설치를 해봅니다.

npm i --save react-floating-action-button

그리고 기본코드가 주어집니다.

export default const YourAwesomeComponent = () => {
    return (
        <Container>
            <Link href="#"
                tooltip="Create note link"
                icon="far fa-sticky-note" />
            <Link href="#"
                tooltip="Add user link"
                icon="fas fa-user-plus" />
                className="fab-item btn btn-link btn-lg text-white"
            <Button
                tooltip="The big plus button!"
                icon="fas fa-plus"
                rotate={true}
                onClick={() => alert('FAB Rocks!')} />
        </Container>
    )

아직 구현은 완전히 하지 못했지만, 조금씩 테스트를 해가며 띄워봅니다.

2. 메인페이지

메인페이지 디자인 작업이 거의 완료되었습니다.
추가로 배너를 어떻게 넣을것인지, 카테고리 카드엔 어떤 내용을 담을 것인지 정해졌고, 그대로 작업하면 됩니다.

import React from 'react';
import styled from 'styled-components';
import Category from './MainCategory';
import maintest from '../../assets/images/testmain.png'


const categories = [
  { title: '커뮤니티', imageSrc: '/1.jpg' },
  { title: '쇼핑', imageSrc: '/2.jpg' },
  { title: '맵', imageSrc: '/3.jpg' },
  { title: '가족찾기', imageSrc: '/4.jpg' },
];

const Main: React.FC = () => {
  return (
    <MainContainer>
        <Image src={maintest} alt={'main image'} />
        <>
        <Title>카테고리</Title>
        </>
      <CategoriesContainer>
        {categories.map((category, index) => (
          <Category key={index} title={category.title} imageSrc={category.imageSrc} onClick={function (): void {
            throw new Error('Function not implemented.');
          } } />
        ))}
      </CategoriesContainer>
    </MainContainer>
  );
};

const MainContainer = styled.main`
  padding: 2rem;
  text-align: center;
  font-family: GmarketSansMedium;
`;

const Image = styled.img`
  max-width: 100%;
  height: auto;
  margin-bottom: 100px;
`;

const Title = styled.p`
  font-size: 30px;
  margin: 20px auto;
  color: 312B2B;
`;

const CategoriesContainer = styled.main`
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
`;

export default Main;

배너 부분은 공간과 사진만 만들어 두었고, 캐러셀 형식까지 염두에 두고 있습니다.

---

Tomorrow's list

1. 맵 마무리
2. 메인페이지 작업