Feature/8 create union section

[karpitony]

#️⃣연관된 이슈

• [Feat] 메인 페이지 유니온 섹션 만들기 #8

📝작업 내용

• 랜딩 페이지 Union 섹션 만들기
• 미디어 쿼리 조금 추가해서 모바일에서 깨지진 않게

✅ 체크리스트

• 기능이 정상적으로 동작하는지 확인
• 코드 리뷰 반영
• UI/UX 디자인 적용 확인

스크린샷

피그마	데스크탑

데스크탑	모바일

리뷰 요청사항

스타일드 컴포넌트를 처음 써봐서 잘 썼는지 확인과 다른 분들 화면에서도 잘 보이는지 체크해주시면 좋을거 같습니다! 감사합니다.

[dewbeeny]

반응형 구현은 useMediaQuery를 써서 커스텀 훅 만들어 저희 공통으로 사용하면 좋을 것 같아요! (아무래도 하나씩 하다보면 사이즈가 달라질 수 있기에...)

src/hooks/useMediaQueries.ts를 만들어서 브레이크 포인트를 설정하고, 컴포넌트에서 활용하는 방식이 더 깔끔할 듯합니다! 반응형 구현을 목요일부터 주형이가 담당해도 될 것 같아서 미리 제안을 못했는데... 먼저 해주셔서 빠르게 코멘트 남깁니당!! 아래와 비슷하게 하면 좋을 것 같아요!!

🔹 커스텀 훅 예시 (useMediaQueries.ts)

import { useMediaQuery } from "react-responsive";

const useMediaQueries = () => {
  const isMobile = useMediaQuery({ query: "(max-width: 767px)" });
  const isTablet = useMediaQuery({
    query: "(min-width: 768px) and (max-width: 1023px)",
  });
  const isDesktop = useMediaQuery({
    query: "(min-width: 1024px)" 
  });

  return { isMobile, isTablet, isDesktop };
};

export default useMediaQueries;

나머지는 너무 좋아요! 제가 도움드릴게 없네요... 뭔가 모바일뷰에서 유니온 뒤에 주황색, 초록색 블러도 유지하면 어떨까요?!

[karpitony]

반응형 구현은 useMediaQuery를 써서 커스텀 훅 만들어 저희 공통으로 사용하면 좋을 것 같아요! (아무래도 하나씩 하다보면 사이즈가 달라질 수 있기에...)

src/hooks/useMediaQueries.ts를 만들어서 브레이크 포인트를 설정하고, 컴포넌트에서 활용하는 방식이 더 깔끔할 듯합니다! 반응형 구현을 목요일부터 주형이가 담당해도 될 것 같아서 미리 제안을 못했는데... 먼저 해주셔서 빠르게 코멘트 남깁니당!! 아래와 비슷하게 하면 좋을 것 같아요!!

🔹 커스텀 훅 예시 (useMediaQueries.ts)

import { useMediaQuery } from "react-responsive";

const useMediaQueries = () => {
  const isMobile = useMediaQuery({ query: "(max-width: 767px)" });
  const isTablet = useMediaQuery({
    query: "(min-width: 768px) and (max-width: 1023px)",
  });
  const isDesktop = useMediaQuery({
    query: "(min-width: 1024px)" 
  });

  return { isMobile, isTablet, isDesktop };
};

export default useMediaQueries;

나머지는 너무 좋아요! 제가 도움드릴게 없네요... 뭔가 모바일뷰에서 유니온 뒤에 주황색, 초록색 블러도 유지하면 어떨까요?!

미디어쿼리 훅 추가해서 수정해봤습니다!
확실히 CSS 미디어쿼리보다 코드도 짧아지고 좋은것 같습니다!
모바일에서 배경 블러 살리는건 조금 해보니 레이아웃이 깨지는 것 같아 일단은 안보이게 했습니다...
피그마 모바일 디자인 나오는거 보고 다시 보면 좋을 것 같습니다!
코드 리뷰 감사합니다 👍👍👍👍