refactor: CSS를 공통/PC/모바일로 분리
- index.css: 공통 스타일 (tailwind, 스크롤바, 트랜지션) - pc.css: PC 전용 (min-width, 스크롤바 공간) - mobile.css: 모바일 전용 (레이아웃, 달력 스타일) - 각 Layout 컴포넌트에서 해당 CSS import
This commit is contained in:
parent
494c2a9d6d
commit
4cbfeb5168
5 changed files with 169 additions and 168 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import { NavLink, useLocation } from 'react-router-dom';
|
||||
import { Home, Users, Disc3, Calendar } from 'lucide-react';
|
||||
import { useEffect } from 'react';
|
||||
import '../../mobile.css';
|
||||
|
||||
// 모바일 헤더 컴포넌트
|
||||
function MobileHeader({ title }) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
import '../../pc.css';
|
||||
|
||||
function Layout({ children }) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -3,82 +3,11 @@
|
|||
@tailwind utilities;
|
||||
|
||||
/* 기본 스타일 */
|
||||
html {
|
||||
overflow-y: scroll; /* 항상 스크롤바 공간 확보 - 화면 밀림 방지 */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fafafa;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* 최소 너비 설정 - PC에서만 적용 */
|
||||
@media (min-width: 1024px) {
|
||||
#root {
|
||||
min-width: 1440px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 모바일 레이아웃 시스템 */
|
||||
@media (max-width: 1023px) {
|
||||
/* 모바일에서 html,body 스크롤 방지 */
|
||||
html.mobile-layout,
|
||||
html.mobile-layout body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* 모바일 레이아웃 컨테이너 */
|
||||
.mobile-layout-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 모바일 툴바 (기본 56px) */
|
||||
.mobile-toolbar {
|
||||
flex-shrink: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* 일정 페이지 툴바 (헤더 + 날짜 선택기) */
|
||||
.mobile-toolbar-schedule {
|
||||
flex-shrink: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* 하단 네비게이션 */
|
||||
.mobile-bottom-nav {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 컨텐츠 영역 - 스크롤 가능, 스크롤바 숨김 */
|
||||
.mobile-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
}
|
||||
|
||||
.mobile-content::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
||||
/* 모바일 safe-area 지원 (노치, 홈 인디케이터) */
|
||||
.safe-area-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
}
|
||||
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 0);
|
||||
}
|
||||
|
||||
/* 스크롤바 스타일 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
|
|
@ -154,100 +83,3 @@ body {
|
|||
.swiper-slide {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__navigation button:hover {
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__navigation__label {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__month-view__weekdays {
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__month-view__weekdays__weekday {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__month-view__weekdays__weekday abbr {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 일요일 (빨간색) */
|
||||
.mobile-calendar-wrapper
|
||||
.react-calendar__month-view__weekdays__weekday:first-child {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* 토요일 (파란색) */
|
||||
.mobile-calendar-wrapper
|
||||
.react-calendar__month-view__weekdays__weekday:last-child {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.25rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 0.75rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__tile:hover {
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__tile abbr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
/* 이웃 달 날짜 (흐리게) */
|
||||
.mobile-calendar-wrapper
|
||||
.react-calendar__month-view__days__day--neighboringMonth {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
/* 일요일 */
|
||||
.mobile-calendar-wrapper .react-calendar__tile.sunday abbr {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* 토요일 */
|
||||
.mobile-calendar-wrapper .react-calendar__tile.saturday abbr {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
/* 오늘 */
|
||||
.mobile-calendar-wrapper .react-calendar__tile--now abbr {
|
||||
background-color: #548360;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 선택된 날짜 */
|
||||
.mobile-calendar-wrapper .react-calendar__tile--active abbr {
|
||||
background-color: #548360;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__tile--active:enabled:hover abbr,
|
||||
.mobile-calendar-wrapper .react-calendar__tile--active:enabled:focus abbr {
|
||||
background-color: #456e50;
|
||||
}
|
||||
|
|
|
|||
156
frontend/src/mobile.css
Normal file
156
frontend/src/mobile.css
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
/* 모바일 전용 스타일 */
|
||||
|
||||
/* 모바일 html,body 스크롤 방지 */
|
||||
html.mobile-layout,
|
||||
html.mobile-layout body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 모바일 레이아웃 컨테이너 */
|
||||
.mobile-layout-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 모바일 툴바 (기본 56px) */
|
||||
.mobile-toolbar {
|
||||
flex-shrink: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* 일정 페이지 툴바 (헤더 + 날짜 선택기) */
|
||||
.mobile-toolbar-schedule {
|
||||
flex-shrink: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* 하단 네비게이션 */
|
||||
.mobile-bottom-nav {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 컨텐츠 영역 - 스크롤 가능, 스크롤바 숨김 */
|
||||
.mobile-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
}
|
||||
|
||||
.mobile-content::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
||||
/* 모바일 safe-area 지원 (노치, 홈 인디케이터) */
|
||||
.safe-area-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
}
|
||||
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 0);
|
||||
}
|
||||
|
||||
/* 모바일 달력 스타일 */
|
||||
.mobile-calendar-wrapper .react-calendar__navigation button:hover {
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__navigation__label {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__month-view__weekdays {
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__month-view__weekdays__weekday {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__month-view__weekdays__weekday abbr {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 일요일 (빨간색) */
|
||||
.mobile-calendar-wrapper
|
||||
.react-calendar__month-view__weekdays__weekday:first-child {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* 토요일 (파란색) */
|
||||
.mobile-calendar-wrapper
|
||||
.react-calendar__month-view__weekdays__weekday:last-child {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.25rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 0.75rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__tile:hover {
|
||||
background-color: #f3f4f6;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__tile abbr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
/* 이웃 달 날짜 (흐리게) */
|
||||
.mobile-calendar-wrapper
|
||||
.react-calendar__month-view__days__day--neighboringMonth {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
/* 일요일 */
|
||||
.mobile-calendar-wrapper .react-calendar__tile.sunday abbr {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* 토요일 */
|
||||
.mobile-calendar-wrapper .react-calendar__tile.saturday abbr {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
/* 오늘 */
|
||||
.mobile-calendar-wrapper .react-calendar__tile--now abbr {
|
||||
background-color: #548360;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 선택된 날짜 */
|
||||
.mobile-calendar-wrapper .react-calendar__tile--active abbr {
|
||||
background-color: #548360;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mobile-calendar-wrapper .react-calendar__tile--active:enabled:hover abbr,
|
||||
.mobile-calendar-wrapper .react-calendar__tile--active:enabled:focus abbr {
|
||||
background-color: #456e50;
|
||||
}
|
||||
11
frontend/src/pc.css
Normal file
11
frontend/src/pc.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* PC 전용 스타일 */
|
||||
|
||||
/* PC 항상 스크롤바 공간 확보 - 화면 밀림 방지 */
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* PC 최소 너비 설정 */
|
||||
#root {
|
||||
min-width: 1440px;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue