2023.01.26 TIL

Today's list.

1. 배포전 마무리 작업
2. 추가 페이지 구성

---

헤더 부분도 작업이 끝났습니다. 특히

const Navigation = styled.nav`

ul {
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
}

li {
margin-right: 60px;

@media (max-width: 768px) {
  margin-right: 20px;
}

}

a {
text-decoration: none;
font-size: 21px;
font-family: GmarketSansMedium;
gap: 20px;
color: #312b2b;

@media (max-width: 768px) {
  font-size: 18px;
}

&:hover {
  transform: scale(1.05);
}

}

`;



이렇게 반응형 페이질를 위해 @media 를 사용하였습니다.


그리고 메인 페이지의
 <CategoriesContainer>
        {categories.map((category, index) => (
          <MainCategory
            key={index}
            title={category.title}
            imageSrc={category.imageSrc}
            description={category.description} // 추가된 부분
            buttonText={category.buttonText}   // 추가된 부분
            onClick={() => handleCategoryClick(category.url)}
          />
        ))}
      </CategoriesContainer>

      <ContentSection>
        <ImageContainer>
          <img src={perpet} alt="설명" />
        </ImageContainer>
        <TextContainer>
          <Title>For Pet: Pet들을 위한 Perfect한 정보</Title>
          <Description></Description>
          For Pet에서는 반려동물과 그들의 가족에게 꼭 필요한 정보와 지식을 공유합니다.<br/><br/>
          우리는 반려동물의 건강, 행복, 그리고 장수를 위한 실용적인 조언과 전문적인 인사이트를 나눕니다.<br/><br/>
          여러분의 소중한 친구들이 더욱 건강하고 행복한 삶을 누릴 수 있도록, 더욱 함께하는 서비스를 제공합니다.<br/><br/>
          함께 성장하고, 배우고, 사랑을 나누세요. 여러분과 여러분의 반려동물이 행복한 순간을 만들어 가는 데에 For Pet가 도움이 되기를 바랍니다.<br/><br/>
        </TextContainer>
      </ContentSection>
    </MainContainer>
  );
};

를 사용해서 하단부분을 만들어 줬습니다.

최종적으로 만들어진 메인 페이지 입니다.
각 카테고리별로 마우스 호버시 이미지가 블러처리 되며 각 카테고리별 설명이 나오게 됩니다.

2. 추가 페이지 작업

추가 페이지는 '로그인한 모든 사람들'이 한 곳에서 채팅을 즐길 수 있는 공간을 만드려고 합니다.
웹 소켓중 하나인 socket.io를 사용할 예정이며, 채팅으로 긴급 상황시 정보를 받을 수도 있고,
즉각적인 여러 팁을 받을 수 있을겁니다.