-
+
Point. 01
누구나 손쉽게, 온라인 롤링페이퍼를 만들 수 있어요
@@ -141,7 +139,7 @@ function MainPage() {
-
+
Point. 02
서로에게 이모지로 감정을 표현해보세요
@@ -153,10 +151,10 @@ function MainPage() {
diff --git a/src/styles/style.css b/src/styles/style.css
deleted file mode 100644
index f42223d..0000000
--- a/src/styles/style.css
+++ /dev/null
@@ -1,530 +0,0 @@
-* {
- margin: 20px opx;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
- Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-}
-
-body {
- background-color: #ffffff;
- color: #333;
-}
-
-.container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 40px 20px;
- transition: all 0.3s ease;
- background-color: #f6f8ff;
-}
-
-.container:first-of-type {
- padding-top: 100px; /* 헤더 높이 + 추가 여백 */
-}
-
-.container .empty-space {
- height: 30px; /* 헤더 높이 */
- background-color: #ffffff;
- width: 100%;
- margin: 0 auto;
-}
-
-/* Header Styles */
-.header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 62px;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- background-color: #fff;
- z-index: 1000;
- padding: 0 20px;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-}
-
-.container .header {
- position: fixed;
- width: 100%;
- max-width: none;
- left: 0;
- transform: none;
- padding: 0 20px;
-}
-
-.nav {
- width: 100%;
-}
-
-.nav ul {
- display: flex;
- list-style: none;
- width: 100%;
-}
-
-.nav ul li {
- margin-right: 20px;
-}
-
-.nav ul li a {
- text-decoration: none;
- color: #333;
- font-weight: 500;
- transition: color 0.3s ease;
-}
-
-.nav ul li a:hover {
- color: #8c4ff8;
-}
-
-.create-paper-btn {
- background-color: #8c4ff8;
- color: white;
- border: none;
- border-radius: 8px;
- padding: 10px 20px;
- font-size: 14px;
- font-weight: 600;
- cursor: pointer;
- transition: background-color 0.3s ease;
- width: 180px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- text-align: center;
-}
-
-.create-paper-btn:hover {
- background-color: #7a3dd6;
-}
-
-/* Point Sections */
-.point-section {
- margin-bottom: 80px;
-}
-
-.point-badge {
- display: inline-block;
- background-color: #8c4ff8;
- color: white;
- font-weight: 600;
- padding: 8px 16px;
- border-radius: 20px;
- margin-bottom: 20px;
-}
-
-.point-content h2 {
- font-size: 28px;
- font-weight: 700;
- margin-bottom: 12px;
- color: #333;
-}
-
-.point-content p {
- font-size: 16px;
- color: #666;
- margin-bottom: 30px;
-}
-
-/* Cards Wrapper & Container */
-.cards-wrapper {
- width: 100%;
- overflow: hidden;
- position: relative;
-}
-
-.cards-container {
- display: flex;
- gap: 20px;
- overflow-x: auto;
- padding: 10px 0;
- position: relative;
- scrollbar-width: none; /* Firefox */
- -ms-overflow-style: none; /* IE and Edge */
-}
-
-.cards-container::-webkit-scrollbar {
- display: none; /* Chrome, Safari, Opera */
-}
-
-.cards-container::-webkit-scrollbar-track {
- background: transparent;
-}
-
-.cards-container::-webkit-scrollbar-thumb {
- background-color: transparent;
- border-radius: 6px;
-}
-
-.scroll-hint {
- text-align: center;
- font-size: 12px;
- color: #999;
- margin-top: 10px;
- opacity: 0.7;
- transition: opacity 0.5s ease;
-}
-
-/* Card Styles */
-.card {
- background: white;
- border-radius: 16px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
- width: 300px;
- min-width: 300px;
- padding: 20px;
- display: flex;
- flex-direction: column;
- transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.card:hover {
- transform: translateY(-5px);
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-}
-
-.card-header {
- display: flex;
- align-items: center;
- margin-bottom: 15px;
-}
-
-.profile-img {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- object-fit: cover;
- margin-right: 12px;
-}
-
-.card-author {
- display: flex;
- flex-direction: column;
-}
-
-.card-author span:first-child {
- font-weight: 600;
- font-size: 14px;
-}
-
-.tag {
- display: inline-block;
- font-size: 12px;
- padding: 2px 8px;
- border-radius: 12px;
- background-color: #e9f3ff;
- color: #4a90e2;
-}
-
-.tag-purple {
- background-color: #f0e7ff;
- color: #8c4ff8;
-}
-
-.card-body {
- flex-grow: 1;
- margin-bottom: 15px;
- font-size: 14px;
- line-height: 1.5;
-}
-
-.card-footer {
- font-size: 12px;
- color: #999;
-}
-
-/* Add Card Button */
-.add-card {
- background: white;
- border-radius: 16px;
- border: 2px dashed #ddd;
- width: 300px;
- min-width: 300px;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
-}
-
-.add-icon {
- font-size: 32px;
- color: #999;
-}
-
-/* Reactions Section */
-.reactions-section {
- margin-bottom: 80px;
-}
-
-.reactions-container {
- position: relative;
- width: fit-content;
-}
-
-.reaction-row {
- display: flex;
- gap: 10px;
- margin-bottom: 10px;
-}
-
-.reaction-count {
- display: flex;
- align-items: center;
- background: #f0f0f0;
- border-radius: 20px;
- padding: 6px 12px;
- font-size: 14px;
- font-weight: 500;
-}
-
-.emoji {
- margin-right: 5px;
-}
-
-.reactions-dropdown {
- position: absolute;
- top: 100%;
- left: 0;
- background: white;
- border-radius: 12px;
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
- padding: 15px;
- z-index: 10;
- margin-top: 10px;
- width: 300px;
-}
-
-/* Media Queries */
-/* 태블릿 디바이스 */
-@media (max-width: 1024px) {
- .container {
- max-width: 90%;
- padding: 30px 15px;
- }
-
- .point-section {
- margin-bottom: 60px;
- }
-
- .point-content h2 {
- font-size: 26px;
- }
-
- .cards-wrapper {
- width: 100%;
- max-width: 100%;
- overflow-x: auto;
- padding-bottom: 15px;
- margin: 0 auto;
- }
-
- .cards-container {
- width: 100%;
- padding: 10px 15px 5px;
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
- gap: 20px;
- overflow-x: visible;
- justify-content: center;
- }
-
- .card,
- .add-card {
- width: 100%;
- min-width: auto;
- max-width: 100%;
- transition: transform 0.3s ease, box-shadow 0.3s ease;
- }
-}
-
-/* 모바일 디바이스 */
-@media (max-width: 768px) {
- .container {
- padding: 20px 15px;
- }
-
- .container:first-of-type {
- padding-top: 80px;
- }
-
- .header {
- padding: 0 15px;
- height: 60px;
- }
-
- .create-paper-btn {
- font-size: 12px;
- padding: 8px 15px;
- width: 150px;
- }
-
- .point-badge {
- padding: 6px 12px;
- font-size: 14px;
- }
-
- .point-content h2 {
- font-size: 22px;
- margin-bottom: 10px;
- }
-
- .point-content p {
- font-size: 14px;
- margin-bottom: 20px;
- }
-
- .cards-wrapper {
- margin: 0 auto;
- width: 100%;
- overflow-x: hidden;
- overflow-y: visible;
- padding-bottom: 10px;
- scrollbar-width: none; /* Firefox */
- -ms-overflow-style: none; /* IE and Edge */
- }
-
- .cards-wrapper::-webkit-scrollbar {
- display: none; /* Chrome, Safari, Opera */
- }
-
- .cards-container {
- display: flex;
- flex-direction: column;
- overflow-x: hidden;
- padding: 0 15px 10px;
- width: 100%;
- max-width: 100%;
- gap: 20px;
- }
-
- .card,
- .add-card {
- width: 100%;
- min-width: auto;
- max-width: 100%;
- margin: 0 auto;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
- }
-
- .reaction-row {
- flex-wrap: wrap;
- }
-
- .reactions-dropdown {
- width: 100%;
- max-width: 280px;
- }
-
- /* 스크롤 인디케이터 스타일 */
- .scroll-indicator {
- margin: 15px auto 0;
- width: 80%;
- height: 4px;
- background: #eee;
- border-radius: 2px;
- overflow: hidden;
- }
-
- .scroll-indicator span {
- display: block;
- height: 100%;
- width: 33.33%;
- background: #8c4ff8;
- border-radius: 2px;
- transition: transform 0.3s ease;
- }
-
- .cta-button {
- padding: 12px 25px;
- font-size: 14px;
- width: 80%;
- max-width: 300px;
- }
-}
-
-/* CTA Section Styles */
-.cta-section {
- text-align: center;
- margin-bottom: 60px;
-}
-
-.cta-button {
- background-color: #8c4ff8;
- color: white;
- border: none;
- border-radius: 8px;
- padding: 15px 30px;
- font-size: 16px;
- font-weight: 600;
- cursor: pointer;
- transition: all 0.3s ease;
- box-shadow: 0 4px 12px rgba(140, 79, 248, 0.2);
-}
-
-.cta-button:hover {
- background-color: #7a3dd6;
- transform: translateY(-2px);
- box-shadow: 0 6px 16px rgba(140, 79, 248, 0.3);
-}
-
-/* 작은 모바일 디바이스 */
-@media (max-width: 480px) {
- .point-section {
- margin-bottom: 40px;
- }
-
- .point-content h2 {
- font-size: 20px;
- }
-
- .card,
- .add-card {
- width: 100%;
- min-width: auto;
- max-width: 100%;
- padding: 15px;
- margin: 0 auto;
- border-radius: 14px;
- }
-
- .cards-wrapper {
- padding: 0;
- margin: 0 auto;
- width: 100%;
- scrollbar-width: none; /* Firefox */
- -ms-overflow-style: none; /* IE and Edge */
- }
-
- .cards-wrapper::-webkit-scrollbar {
- display: none; /* Chrome, Safari, Opera */
- }
-
- .cards-container {
- width: 100%;
- padding: 0 15px 10px;
- gap: 15px;
- }
-
- .card-body {
- font-size: 13px;
- }
-
- .reaction-count {
- padding: 4px 10px;
- font-size: 13px;
- }
-
- .scroll-indicator {
- width: 90%;
- margin: 10px auto 0;
- }
-
- .cta-button {
- padding: 10px 20px;
- font-size: 13px;
- width: 90%;
- }
-}
diff --git a/src/utils/script.js b/src/utils/script.js
deleted file mode 100644
index 8d05dd0..0000000
--- a/src/utils/script.js
+++ /dev/null
@@ -1,170 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
- // 모바일 메뉴 토글 기능
- const mobileMenuBtn = document.querySelector(".mobile-menu-btn");
- const navMenu = document.querySelector(".nav ul");
- const createPaperBtnMobile = document.querySelector(".create-paper-btn");
-
- if (mobileMenuBtn && navMenu) {
- mobileMenuBtn.addEventListener("click", function () {
- if (navMenu.style.display === "flex") {
- navMenu.style.display = "none";
- mobileMenuBtn.classList.remove("active");
- } else {
- navMenu.style.display = "flex";
- navMenu.style.flexDirection = "column";
- navMenu.style.position = "absolute";
- navMenu.style.top = "60px";
- navMenu.style.right = "20px";
- navMenu.style.backgroundColor = "white";
- navMenu.style.padding = "15px";
- navMenu.style.borderRadius = "8px";
- navMenu.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.1)";
- navMenu.style.zIndex = "100";
- mobileMenuBtn.classList.add("active");
- }
- });
- }
-
- // 이모지 반응 토글 기능
- const reactionsContainer = document.querySelector(".reactions-container");
- const reactionsDropdown = document.querySelector(".reactions-dropdown");
- const reactionAdd = document.querySelector(".reaction-add");
-
- // 초기에는 드롭다운 숨기기
- if (reactionsDropdown) {
- reactionsDropdown.style.display = "none";
- }
-
- // 이모지 추가 버튼 클릭 시 드롭다운 토글
- if (reactionAdd) {
- reactionAdd.addEventListener("click", function (e) {
- e.stopPropagation();
- if (reactionsDropdown.style.display === "none") {
- reactionsDropdown.style.display = "block";
- } else {
- reactionsDropdown.style.display = "none";
- }
- });
- }
-
- // 드롭다운 외부 클릭 시 닫기
- document.addEventListener("click", function (event) {
- if (reactionsContainer && !reactionsContainer.contains(event.target)) {
- if (reactionsDropdown) {
- reactionsDropdown.style.display = "none";
- }
- }
- });
-
- // 새 카드 추가 버튼 기능
- const addCardButton = document.querySelector(".add-card");
- if (addCardButton) {
- addCardButton.addEventListener("click", function () {
- alert("새 메시지를 작성할 수 있는 폼이 열립니다.");
- // 실제 구현에서는 모달 폼을 열거나 페이지 이동 등의 기능 구현
- });
- }
-
- // 이모지 반응 클릭 시 카운트 증가 (예시 기능)
- const reactionCounts = document.querySelectorAll(".reaction-count");
- reactionCounts.forEach(function (reaction) {
- reaction.addEventListener("click", function (e) {
- e.stopPropagation(); // 상위 이벤트 전파 방지
- const countElement = this.querySelector("span:last-child");
- if (countElement) {
- let count = parseInt(countElement.textContent);
- countElement.textContent = count + 1;
- }
- });
- });
-
- // CTA 버튼 클릭 이벤트
- const ctaButton = document.querySelector(".cta-button");
- if (ctaButton) {
- ctaButton.addEventListener("click", function () {
- window.location.href = "#"; // 실제 구현에서는 롤링페이퍼 목록 페이지로 이동
- });
- }
-
- // 롤링페이퍼 만들기 버튼 클릭 이벤트
- const createPaperBtn = document.querySelector(".create-paper-btn");
- if (createPaperBtn) {
- createPaperBtn.addEventListener("click", function () {
- window.location.href = "#"; // 실제 구현에서는 롤링페이퍼 생성 페이지로 이동
- });
- }
-
- // 반응형 디자인을 위한 추가 기능
- function handleResize() {
- // 화면 크기에 따라 동적으로 조정이 필요한 요소들 처리
- const windowWidth = window.innerWidth;
- const cardsContainer = document.querySelector(".cards-container");
- const cardsWrapper = document.querySelector(".cards-wrapper");
-
- // 모바일 메뉴 처리
- if (windowWidth > 768) {
- const navMenu = document.querySelector(".nav ul");
- if (navMenu) {
- navMenu.removeAttribute("style");
- }
- }
-
- // 카드 컨테이너 스크롤 처리
- if (cardsContainer && cardsWrapper) {
- // 스크롤 인디케이터 추가 (모바일에서만)
- if (windowWidth <= 768) {
- if (!document.querySelector(".scroll-indicator")) {
- const scrollIndicator = document.createElement("div");
- scrollIndicator.className = "scroll-indicator";
- const scrollIndicatorSpan = document.createElement("span");
- scrollIndicator.appendChild(scrollIndicatorSpan);
- cardsWrapper.after(scrollIndicator);
- }
- } else {
- // 태블릿/데스크톱에서는 스크롤 표시기 제거
- const scrollIndicator = document.querySelector(".scroll-indicator");
- if (scrollIndicator) {
- scrollIndicator.remove();
- }
- }
- }
- }
-
- // 초기 로드 및 리사이즈 시 실행
- handleResize();
- window.addEventListener("resize", handleResize);
-
- // 화면 방향 변경 감지
- window.addEventListener("orientationchange", () => {
- setTimeout(handleResize, 300); // 방향 변경 후 약간의 지연 시간을 두고 실행
- });
-
- // 카드 컨테이너 스크롤 이벤트
- const cardsContainer = document.querySelector(".cards-container");
- if (cardsContainer) {
- cardsContainer.addEventListener("scroll", function () {
- const scrollIndicator = document.querySelector(".scroll-indicator span");
- if (scrollIndicator) {
- const scrollPercentage =
- (this.scrollLeft / (this.scrollWidth - this.clientWidth)) * 100;
- scrollIndicator.style.width = scrollPercentage + "%";
- }
- });
- }
- // 카드 컨테이너 가로 스크롤 감추기이벤트
- const cardsContainer = document.querySelector(".cards-container");
- if (cardsContainer) {
- // 모바일 환경에서 가로 스크롤 기능 비활성화
- if (window.innerWidth <= 768) {
- cardsContainer.style.overflowX = "hidden";
- cardsContainer.style.overflowY = "auto";
-
- // 스크롤 인디케이터 제거
- const scrollIndicator = document.querySelector(".scroll-indicator");
- if (scrollIndicator) {
- scrollIndicator.style.display = "none";
- }
- } else {
- }
- }
-});