☑️ 관리자 패널 상태 변경하기
- 페이지 들어갔을 때 처음 들어갔을 때 관리자 패널이 자동으로 열림
-> 닫혀져 있는 상태가 디폴트 값이 되도록 관련코드 찾아 수정
export default function AdminLayout({ children }) {
// isOpen 상태의 기본값을 false로 변경하여 사이드바가 닫힌 상태로 시작하도록 수정
const [isOpen, setIsOpen] = useState(false);
const [isAdmin, setIsAdmin] = useState(false);
const router = useRouter();
- false로 설정하면 사이드바가 닫힌 상태로 변경된다. 이 상태에서는 사이드바의 너비가 줄어들고, 사이드바의 메뉴이름이 숨겨진다. 대신 아이콘만 표시되어 화면 공간을 더 효율적으로 사용할 수 있다.
<h1 className={`text-xl font-bold ${isOpen ? "block" : "hidden"}`}>
관리자 패널
</h1>isOpen이 true일 때 block 클래스가 적용되고, false일 때 hidden 클래스가 적용된다.
✔️block과 hidden의 차이점
-
block: 요소를 블록 레벨 요소로 표시한다.
요소가 화면에 보이며, 기본적으로 부모 컨테이너의 전체 너비를 차지한다.
예를 들어, div와 같은 블록 요소처럼 동작한다. -
hidden: 요소를 화면에서 완전히 숨긴다.
요소가 DOM에는 존재하지만, 화면에 렌더링되지 않는다.
숨겨진 상태에서는 요소가 차지하는 공간도 없어지며, 다른 요소들이 그 자리를 차지한다.
✔️TailwindCSS 적용하기
- 사이드바가 닫힌 상태에서는 메인 콘텐츠 영역(main)이 더 넓게 표시된다.
- transition-all과 duration-300 클래스가 적용되어 사이드바가 부드럽게 닫히는 애니메이션이 실행된다.
-> 자연스러운 전환 효과 제공
⛵Tailwind CSS에서 요소의 표시 여부를 제어
isOpen === true: //이라면
block 클래스가 적용되어 h1 요소가 화면에 표시된다.
"관리자 패널" 텍스트가 보인다.
isOpen === false: //이라면
hidden 클래스가 적용되어 h1 요소가 화면에서 완전히 숨겨진다.
"관리자 패널" 텍스트가 보이지 않는다.
☑️ 관리자 페이지 수정하기
- admin 페이지를 들어갔을 때 현재는 공지사항이 보임 -> 공지대신 통계 보기로 바꾸기 완료
- 공지사항은 메뉴로 따로 등록하기
admin/statistics 페이지를 announcement 로 수정함
그리고 announcement 페이지는 공지사항으로 따로 메뉴를 생성해주었음
/admin 으로 접속하면, annoucement대신 statistics의 내용이 보이도록 폴더명 수정해줌
React의 url은 폴더명-page.js 구조에서 폴더명을 페이지명으로 씀
✔️AdminLayout.js 에서 nav바 내용을 수정해줌
const navItems = [
{ name: "대시보드", href: "/admin", icon: "dashboard" },
{ name: "매장 관리", href: "/admin/shops", icon: "store" },
{ name: "예약 관리", href: "/admin/reservations", icon: "calendar" },
{ name: "이벤트 관리", href: "/admin/events", icon: "event" },
{ name: "리뷰 관리", href: "/admin/reviews", icon: "star" },
{ name: "공지사항", href: "/admin/announcement", icon: "📊" },
];
1. 고객 후기 영역 개선 기획 – 매장 정보 연동
목표: 메인 페이지 내 고객 후기 하단에 해당 매장 정보를 연동하여, 유저가 후기를 보고 곧바로 매장으로 연결될 수 있는 구조 설계.
-매장명, 위치(지번/도로명 주소), 전화번호, [예약하기] 버튼 추가.
-후기와 매장 정보를 카드 형태로 통합 구성하고, 클릭 시 매장 상세페이지로 이동.
-지도 미리보기(썸네일) 연동 고려: Kakao Map API 또는 Naver Map Static Image 활용 검토.
✔️참고 사례
-마메드네: 후기 클릭 시 매장 이동 유도는 없으나, 매장 페이지에 리뷰 통합.
-오늘의집: 포토 후기 하단에 상품 정보 및 바로 구매 링크 삽입 → 이 UX 패턴을 응용 가능.
- 화면 슬라이드 구성 방식 조사 및 동작 원리 학습
슬라이드 구성은 swiper.js, slick-carousel 등 라이브러리 중심으로 리서치 진행.
✔️기능별 비교:
Swiper.js는 슬라이드 우선순위 설정 가능 (객체별 initialSlide 속성으로 초기 위치 지정 가능)
Slick은 커스터마이징에 유연하지만 모바일 반응형 설정이 다소 복잡
슬라이드 내 각 카드에 매장 정보 포함 시 슬라이드 높이 변화 대응 방식도 함께 학습함 (autoHeight: true)
슬라이드 로딩 시 lazy loading 적용 여부도 검토 중 (초기 로딩 속도 개선 목적)
💡 React/Next.js에서 슬라이드를 구현할 때 자주 쓰는 라이브러리 2가지:
-
Swiper.js (추천)
패키지명: swiper + swiper/react
매우 강력한 커스터마이징, 모바일 반응형, lazy load, initialSlide 등 잘 지원됨
Next.js에서도 잘 작동하며 SSR 문제도 거의 없음 -
React Slick (slick-carousel 기반)
패키지명: react-slick, slick-carousel
사용이 쉽지만 Swiper보다는 약간 제한적
✨ 특히 Swiper.js는 커스터마이징 범위가 넓고, initialSlide, lazy, loop 등 기능이 잘 지원되어 뷰티허브처럼 이미지 중심 서비스에 적합할것 같다.
