-
{calendarOwner || "My Calendar"}
+ {calendarOwner &&
{calendarOwner}
}
= ({
type: "timeGrid",
duration: { days: 3 },
},
+ dayGridMonth: {
+ type: "dayGridMonth",
+ dayHeaderFormat: { weekday: "short" },
+ },
}}
initialView={isMobile ? VIEW_MODES.THREEDAY : VIEW_MODES.WEEK}
initialDate={currentDate}
headerToolbar={{
left: "title",
center: "",
- right: "prev,next,today",
+ right:
+ "prev,next,today dayGridMonth,timeGridWeek,timeGridDay,timeGridThreeDay",
}}
locale={koLocale}
- slotDuration="00:30:00"
+ slotDuration="00:10:00"
slotLabelInterval="01:00:00"
slotLabelFormat={{
hour: "2-digit",
@@ -334,15 +396,15 @@ const CustomCalendar: React.FC = ({
eventResizableFromStart={!isReadOnly}
eventDrop={isReadOnly ? undefined : handleEventChange}
eventResize={handleEventChange}
- eventContent={(eventInfo) =>
- renderEventContent(eventInfo, handleDelete, handleEdit, isReadOnly)
- }
+ eventContent={eventContent}
selectable={false}
selectMirror={false}
dayMaxEvents
weekends
firstDay={1}
+ timeZone="UTC"
events={parsedEvents}
+ viewDidMount={({ view }) => setCurrentView(view.type)}
datesSet={(dateInfo) => setCurrentDate(dateInfo.start)}
dayHeaderFormat={{
weekday: "short",
@@ -352,29 +414,56 @@ const CustomCalendar: React.FC = ({
}}
height={isMobile ? "85%" : "100%"}
/>
- {/* Edit Modal */}
{isEditModalOpen && currentEditPlan && (
setIsEditModalOpen(false)}>
- 플랜 수정
-
- setCurrentEditPlan((prev) =>
- prev ? { ...prev, title: e.target.value } : prev,
- )
- }
- />
-
- setCurrentEditPlan((prev) =>
- prev ? { ...prev, description: e.target.value } : prev,
- )
- }
- />
-
+
+ 플랜 수정
+
+ setCurrentEditPlan((prev) =>
+ prev ? { ...prev, title: e.target.value } : prev,
+ )
+ }
+ />
+
+ setCurrentEditPlan((prev) =>
+ prev ? { ...prev, description: e.target.value } : prev,
+ )
+ }
+ />
+
+ 공개 여부
+
+ setCurrentEditPlan((prev) => ({
+ ...prev,
+ accessibility: e.target.checked,
+ }))
+ }
+ />
+
+
+ 완료 여부
+
+ setCurrentEditPlan((prev) => ({
+ ...prev,
+ complete: e.target.checked,
+ }))
+ }
+ />
+
+
+
)}
diff --git a/src/components/features/CustomCalendar/PlanModal.tsx b/src/components/features/CustomCalendar/PlanModal.tsx
deleted file mode 100644
index f8f7fae..0000000
--- a/src/components/features/CustomCalendar/PlanModal.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { ReactNode } from "react";
-import styled from "@emotion/styled";
-
-interface ModalProps {
- onClose: () => void;
- children: ReactNode;
-}
-
-const Overlay = styled.div`
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.5);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1000;
-`;
-
-const ModalContainer = styled.div`
- background: white;
- padding: 20px;
- border-radius: 8px;
- width: 90%;
- max-width: 500px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-`;
-
-const ModalHeader = styled.div`
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 16px;
-`;
-
-const CloseButton = styled.button`
- background: none;
- border: none;
- font-size: 1.5rem;
- cursor: pointer;
- color: #333;
-`;
-
-const ModalTitle = styled.h2`
- font-size: 1.25rem;
- font-weight: bold;
-`;
-
-const ModalContent = styled.div`
- margin-top: 10px;
- display: flex;
- flex-direction: column;
- gap: 10px;
-`;
-
-const Modal: React.FC
= ({ onClose, children }) => {
- return (
-
- e.stopPropagation()}>
-
- 플랜 수정
- ×
-
- {children}
-
-
- );
-};
-
-export default Modal;
diff --git a/src/components/features/DatePicker/DatePicker.css b/src/components/features/DatePicker/DatePicker.css
new file mode 100644
index 0000000..7711efd
--- /dev/null
+++ b/src/components/features/DatePicker/DatePicker.css
@@ -0,0 +1,43 @@
+.custom-datepicker-wrapper {
+ position: relative;
+ z-index: 100;
+}
+
+.custom-calendar {
+ border: 1px solid #ddd !important;
+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+/* 시간 선택 컨테이너 스타일 */
+.react-datepicker__time-container {
+ border-left: 1px solid #ddd !important;
+ width: 100px !important;
+ display: block !important;
+}
+
+.react-datepicker {
+ display: flex !important;
+}
+
+.react-datepicker__time-box {
+ width: 100px !important;
+ margin: 0 !important;
+}
+
+/* 시간 리스트 스타일 */
+.react-datepicker__time-list {
+ height: 200px !important;
+ overflow-y: scroll !important;
+ width: 100% !important;
+}
+
+.react-datepicker__time-list-item {
+ padding: 5px 10px !important;
+ height: auto !important;
+}
+
+/* 선택된 시간 스타일 */
+.react-datepicker__time-list-item--selected {
+ background-color: #216ba5 !important;
+ color: white !important;
+}
\ No newline at end of file
diff --git a/src/components/features/DatePicker/DatePicker.tsx b/src/components/features/DatePicker/DatePicker.tsx
new file mode 100644
index 0000000..3577c96
--- /dev/null
+++ b/src/components/features/DatePicker/DatePicker.tsx
@@ -0,0 +1,180 @@
+import { forwardRef, InputHTMLAttributes } from "react";
+import styled from "@emotion/styled";
+import DatePicker from "react-datepicker";
+import { Global, css } from "@emotion/react";
+import "react-datepicker/dist/react-datepicker.css";
+
+// StyledInput 스타일 정의
+const StyledInput = styled.input`
+ width: 100%;
+ padding: 12px;
+ margin-bottom: 10px;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ font-size: 1rem;
+ &:focus {
+ outline: none;
+ border-color: #6c63ff;
+ box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.3);
+ }
+`;
+
+// 커스텀 입력 컴포넌트 타입 정의
+interface CustomDateInputProps extends InputHTMLAttributes {
+ onClick?: () => void;
+ value?: string;
+}
+
+// DatePicker의 커스텀 입력 컴포넌트
+const CustomDateInput = forwardRef(
+ ({ value, onClick, placeholder }, ref) => (
+
+ ),
+);
+
+interface ReactDatePickerProps {
+ placeholderText: string;
+ onDateChange: (date: Date | null) => void;
+ selectedDate?: Date | null;
+ showTimeSelect?: boolean; // 시간 선택 기능
+ dateFormat?: string; // 날짜 포맷 설정
+}
+
+const ReactDatePicker = ({
+ placeholderText,
+ onDateChange,
+ selectedDate,
+ showTimeSelect = false,
+ dateFormat = "yyyy/MM/dd",
+}: ReactDatePickerProps) => {
+ const handleDateChange = (date: Date | null) => {
+ if (date) {
+ const utcDate = new Date(
+ date.getTime() - date.getTimezoneOffset() * 60000,
+ );
+ onDateChange(utcDate);
+ } else {
+ onDateChange(null);
+ }
+ };
+
+ return (
+ <>
+
+ }
+ />
+
+ );
+};
+
+export default ReactDatePicker;
diff --git a/src/components/features/Introduce/Introduce.tsx b/src/components/features/Introduce/Introduce.tsx
index 14ff031..60fb2a1 100644
--- a/src/components/features/Introduce/Introduce.tsx
+++ b/src/components/features/Introduce/Introduce.tsx
@@ -6,6 +6,7 @@ import effectSVG from "@/assets/effect.svg";
import Button from "@/components/common/Button/Button";
import breakpoints from "@/variants/breakpoints";
import kakao_symbol from "@/assets/kakao_symbol.svg";
+import RouterPath from "@/router/RouterPath";
const LandingContainer = styled.div`
max-width: 1280px;
@@ -130,11 +131,13 @@ const Introduce = () => {
const navigate = useNavigate();
const handleStartClick = () => {
- navigate("/plan/preview");
+ navigate(RouterPath.PREVIEW_PLAN);
};
+ const loginUrl = import.meta.env.VITE_LOGIN_URL;
+
const handleLoginClick = () => {
- navigate("/login");
+ window.location.href = loginUrl;
};
return (
diff --git a/src/components/features/Layout/Layout.tsx b/src/components/features/Layout/Layout.tsx
index d648a62..d98660e 100644
--- a/src/components/features/Layout/Layout.tsx
+++ b/src/components/features/Layout/Layout.tsx
@@ -4,10 +4,10 @@ import Sidebar from "@/components/common/Sidebar/Sidebar";
import breakpoints from "@/variants/breakpoints";
const Wrapper = styled.div`
- flex-direction: row; /* 모바일 이상에서는 가로 정렬 */
-
+ flex-direction: row;
+ display: flex;
+ width: 100%;
${breakpoints.mobile} {
- /* 기본값은 세로 정렬 (모바일) */
flex-direction: column;
display: flex;
width: 100%;
@@ -17,8 +17,9 @@ const Wrapper = styled.div`
const ContentWrapper = styled.div`
padding-left: 225px;
- padding-top: 60px;
-
+ box-sizing: border-box;
+ width: 100%;
+ overflow-x: hidden;
${breakpoints.mobile} {
flex-grow: 1;
padding: 60px 20px;
diff --git a/src/components/features/MicrophoneButton/MicrophoneButton.styles.ts b/src/components/features/MicrophoneButton/MicrophoneButton.styles.ts
index c14a0bd..263fa5b 100644
--- a/src/components/features/MicrophoneButton/MicrophoneButton.styles.ts
+++ b/src/components/features/MicrophoneButton/MicrophoneButton.styles.ts
@@ -1,63 +1,61 @@
+// src/components/features/MicrophoneButton/MicrophoneButton.styles.ts
import styled from "@emotion/styled";
import { motion } from "framer-motion";
import breakpoints from "@/variants/breakpoints";
-export const ButtonContainer = styled(motion.button)({
- border: "none",
- background: "none",
- cursor: "pointer",
- position: "relative",
- overflow: "visible",
- display: "flex",
- justifyContent: "center",
- alignItems: "center",
- outline: "none",
- padding: 0,
-
- "&:focus": {
- outline: "none",
- },
-
- // 반응형 설정
- width: "58px",
- height: "58px",
-
- [breakpoints.tablet]: {
- width: "50px",
- height: "50px",
- },
-});
-
-export const Circle = styled(motion.ellipse)({
- fill: "#39a7f7",
- filter: "drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2))",
-});
-
-export const MicrophoneIcon = styled(motion.g)({
- fill: "white",
-});
-
-export const WaveContainer = styled(motion.div)({
- position: "absolute",
- top: 0,
- left: 0,
- width: "100%",
- height: "100%",
- display: "flex",
- justifyContent: "space-around",
- alignItems: "center",
-});
-
-export const Wave = styled(motion.div)({
- backgroundColor: "white",
- borderRadius: "5.625px",
-
- // 반응형 설정
- width: "4px",
- height: "4px",
-
- [breakpoints.tablet]: {
- width: "6px",
- height: "6px",
- },
-});
+export const ButtonContainer = styled(motion.button)`
+ border: none;
+ background: none;
+ cursor: pointer;
+ position: relative;
+ overflow: visible;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0;
+ outline: none;
+
+ width: 58px;
+ height: 58px;
+
+ @media (max-width: ${breakpoints.sm}px) {
+ width: 50px;
+ height: 50px;
+ }
+
+ &:focus {
+ outline: none;
+ }
+`;
+
+export const Circle = styled(motion.ellipse)`
+ fill: #39a7f7;
+ filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
+`;
+
+export const MicrophoneIcon = styled(motion.g)`
+ fill: white;
+`;
+
+export const WaveContainer = styled(motion.div)`
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+`;
+
+export const Wave = styled(motion.div)`
+ background-color: white;
+ border-radius: 5px;
+ width: 4px;
+ height: 8px;
+
+ @media (max-width: ${breakpoints.sm}px) {
+ width: 3px;
+ height: 6px;
+ }
+`;
diff --git a/src/components/features/MicrophoneButton/MicrophoneButton.tsx b/src/components/features/MicrophoneButton/MicrophoneButton.tsx
index 932c50a..13a98dc 100644
--- a/src/components/features/MicrophoneButton/MicrophoneButton.tsx
+++ b/src/components/features/MicrophoneButton/MicrophoneButton.tsx
@@ -1,3 +1,5 @@
+// src/components/features/MicrophoneButton/MicrophoneButton.tsx
+import React from "react";
import { AnimatePresence } from "framer-motion";
import {
ButtonContainer,
@@ -8,9 +10,9 @@ import {
} from "./MicrophoneButton.styles";
export interface MicrophoneButtonProps {
- onStartClick?: () => void; // 녹음 시작 콜백
- onStopClick?: () => void; // 녹음 중지 콜백
- isRecording: boolean; // 추가된 부분
+ onStartClick?: () => void;
+ onStopClick?: () => void;
+ isRecording: boolean;
}
const MicrophoneButton: React.FC = ({
@@ -35,6 +37,7 @@ const MicrophoneButton: React.FC = ({
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
>
+ {/* 마이크 아이콘 경로 */}
diff --git a/src/components/features/ProtectedRoute/ProtectedRoute.tsx b/src/components/features/ProtectedRoute/ProtectedRoute.tsx
new file mode 100644
index 0000000..9dbcfba
--- /dev/null
+++ b/src/components/features/ProtectedRoute/ProtectedRoute.tsx
@@ -0,0 +1,9 @@
+import { Outlet } from "react-router-dom";
+import useAuth from "@/hooks/useAuth";
+
+const ProtectedRoute = () => {
+ const { authState } = useAuth();
+ return authState.isAuthenticated ? : null;
+};
+
+export default ProtectedRoute;
diff --git a/src/context/LoginModalContext.tsx b/src/context/LoginModalContext.tsx
new file mode 100644
index 0000000..f7f440d
--- /dev/null
+++ b/src/context/LoginModalContext.tsx
@@ -0,0 +1,34 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+interface ModalContextType {
+ isLoginModalOpen: boolean;
+ openLoginModal: () => void;
+ closeLoginModal: () => void;
+}
+
+const ModalContext = createContext(undefined);
+
+export const ModalProvider: React.FC<{ children: ReactNode }> = ({
+ children,
+}) => {
+ const [isLoginModalOpen, setLoginModalOpen] = useState(false);
+
+ const openLoginModal = () => setLoginModalOpen(true);
+ const closeLoginModal = () => setLoginModalOpen(false);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useModal = () => {
+ const context = useContext(ModalContext);
+ if (!context) {
+ throw new Error("useModal must be used within a ModalProvider");
+ }
+ return context;
+};
diff --git a/src/index.css b/src/index.css
index 01bd549..bc1cb08 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,13 +18,14 @@
html, body {
margin: 0;
padding: 0;
- width: 100vw;
- height: 100vh;
+ width: 100%;
+ height: 100%;
justify-content: center;
align-items: center;
position: relative;
top: 0;
left: 0;
box-sizing: border-box;
-}
-
+ font-family: 'Noto Sans KR', 'Roboto', sans-serif;
+
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index af59181..ad55e7a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -19,13 +19,14 @@ import "./index.css";
// });
if ("serviceWorker" in navigator) {
- navigator.serviceWorker.getRegistrations().then((registrations) => {
- registrations.forEach((registration) => {
- if (registration.active && registration.scope.includes("mock")) {
- registration.unregister(); // 서비스 워커 해제
- }
+ navigator.serviceWorker
+ .register("/firebase-messaging-sw.js")
+ .then((registration) => {
+ console.log("Service Worker 등록 성공:", registration);
+ })
+ .catch((error) => {
+ console.error("Service Worker 등록 실패:", error);
});
- });
}
ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/src/pages/Friend/FriendDetailPage.tsx b/src/pages/Friend/FriendDetailPage.tsx
index fb4989c..3caef98 100644
--- a/src/pages/Friend/FriendDetailPage.tsx
+++ b/src/pages/Friend/FriendDetailPage.tsx
@@ -1,3 +1,4 @@
+// src/pages/Friend/FriendDetailPage.tsx
import { useState } from "react";
import styled from "@emotion/styled";
import { useLocation, useParams } from "react-router-dom";
@@ -13,123 +14,131 @@ import {
import { useGetFriendPlans } from "@/api/hooks/useGetPlans";
const PageContainer = styled.div`
- width: 100%;
- margin: 0 auto;
- padding: 16px;
+ display: flex;
+ min-height: 100vh;
+ background-color: #ffffff;
+`;
+
+const ContentWrapper = styled.main`
+ flex-grow: 1;
+ padding: 32px;
+ overflow: auto;
+ box-sizing: border-box;
+`;
+
+const Heading = styled.h1`
+ font-size: 24px;
+ font-weight: 600;
+ margin-bottom: 24px;
+ color: #2d3748;
+`;
+
+const CalendarWrapper = styled.div`
+ margin-bottom: 32px;
`;
const CommentSection = styled.div`
- display: flex;
- flex-direction: column;
+ padding: 24px;
+ border-radius: 8px;
`;
const CommentInput = styled.div`
display: flex;
align-items: center;
- gap: 24px;
- padding: 8px;
+ margin-bottom: 24px;
+ align-items: flex-start;
+ gap: 10px;
+ background-color: #ffffff;
+ padding: 16px 0px 16px 16px;
`;
const InputWrapper = styled.div`
- flex: 1;
+ flex-grow: 1;
display: flex;
align-items: center;
- padding: 10.4px 14.4px;
- border-radius: 12.8px;
- border: 1px solid black;
+ padding: 10px 14px;
+ border-radius: 12px;
+ border: 1px solid #cbd5e0;
+ background-color: #ffffff;
`;
const Input = styled.input`
flex: 1;
border: none;
outline: none;
- font-size: 15.3px;
- font-family: "Inter", sans-serif;
- font-weight: 700;
+ font-size: 15px;
color: #464646;
&::placeholder {
color: rgba(70, 70, 70, 0.5);
}
`;
-const Divider = styled.hr`
+const IconButton = styled.button`
+ background: none;
border: none;
- height: 1.6px;
- background-color: #eeeeee;
- margin: 8px 0;
+ cursor: pointer;
+ color: #39a7f7;
+ display: flex;
+ align-items: center;
+ padding: 4px;
+ margin-left: 2px;
+ &:disabled {
+ cursor: not-allowed;
+ opacity: 0.6;
+ }
`;
-const CommentItem = styled.div`
+const CommentList = styled.div`
display: flex;
flex-direction: column;
- padding: 8px;
+ gap: 16px;
`;
-const CommentContent = styled.div`
+const CommentItem = styled.div`
display: flex;
align-items: flex-start;
- gap: 24px;
-`;
-
-const CommentBubble = styled.div`
- background-color: #d9d9d9;
- border-radius: 12.8px;
- padding: 8px 16.8px;
- display: flex;
- flex-direction: column;
- gap: 8px;
+ gap: 16px;
+ background-color: #ffffff;
+ padding: 16px;
+ border-radius: 8px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
`;
-const CommentBox = styled.div`
- border-radius: 12.8px;
+const CommentContent = styled.div`
+ flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
`;
const CommentAuthor = styled.div`
- color: black;
- font-size: 15.3px;
- font-family: "Inter", sans-serif;
- font-weight: 700;
+ font-size: 16px;
+ font-weight: 600;
+ color: #2d3748;
`;
const CommentText = styled.div`
+ font-size: 15px;
color: #464646;
- font-size: 15.3px;
- font-family: "Inter", sans-serif;
- font-weight: 700;
+ margin-top: 4px;
`;
const CommentDate = styled.div`
- display: flex;
- align-items: center;
- color: rgba(55.95, 55.95, 55.95, 0.7);
- font-size: 15.3px;
- font-family: "Inter", sans-serif;
- font-weight: 700;
- margin-top: 4px;
- padding-left: 12px;
+ font-size: 14px;
+ color: #718096;
`;
-const ActionButtons = styled.div`
+const CommentDateWrapper = styled.div`
display: flex;
align-items: center;
- margin-left: 3px;
+ justify-content: space-between;
+ margin-top: 8px;
`;
-const IconButton = styled.button`
- background: none;
- border: none;
- cursor: pointer;
- padding: 4px;
- color: rgba(55.95, 55.95, 55.95, 0.7);
- font-size: 10px;
+const ActionButtons = styled.div`
display: flex;
- align-items: center;
- &:hover {
- color: #000;
- }
+ margin-right: auto;
+ font-size: 9px;
`;
export default function FriendDetailPage() {
@@ -176,7 +185,7 @@ export default function FriendDetailPage() {
{
onSuccess: () => {
alert("수정이 완료되었습니다.");
- setEditingCommentId(null); // 수정 후 수정 모드 종료
+ setEditingCommentId(null);
setEditContent("");
},
},
@@ -201,98 +210,101 @@ export default function FriendDetailPage() {
return (
-
-
-
-
-
- setNewComment(e.target.value)}
- placeholder="댓글을 입력하세요."
- aria-label="댓글 입력"
- onKeyPress={(e) => {
- if (e.key === "Enter") handleSubmitComment();
- }}
- disabled={createCommentMutation.isPending}
- />
-
-
-
-
-
-
- {comments.map((comment) => (
-
-
-
-
- {editingCommentId === comment.id ? (
-
- setEditContent(e.target.value)}
- onKeyPress={(e) => {
- if (e.key === "Enter") handleUpdateComment(comment.id);
- }}
- disabled={updateCommentMutation.isPending}
- />
- handleUpdateComment(comment.id)}
- disabled={updateCommentMutation.isPending}
- >
-
-
-
- ) : (
- <>
-
- {comment.writerNickname}
+
+ {friendName ? `${friendName}님의 계획표` : "계획표"}
+
+
+
+ 댓글
+
+
+
+
+ setNewComment(e.target.value)}
+ placeholder="댓글을 입력하세요."
+ aria-label="댓글 입력"
+ onKeyPress={(e) => {
+ if (e.key === "Enter") handleSubmitComment();
+ }}
+ disabled={createCommentMutation.isPending}
+ />
+
+
+
+
+
+
+ {comments.map((comment) => (
+
+
+
+ {comment.writerNickname}
+ {editingCommentId === comment.id ? (
+
+ setEditContent(e.target.value)}
+ onKeyPress={(e) => {
+ if (e.key === "Enter")
+ handleUpdateComment(comment.id);
+ }}
+ disabled={updateCommentMutation.isPending}
+ />
+ handleUpdateComment(comment.id)}
+ disabled={updateCommentMutation.isPending}
+ >
+
+
+
+ ) : (
+ <>
{comment.content}
-
-
- {formatDate(comment.createdAt)}
- {comment.writerId === userId && (
-
- {
- setEditingCommentId(comment.id);
- setEditContent(comment.content);
- }}
- disabled={
- updateCommentMutation.isPending ||
- deleteCommentMutation.isPending
- }
- >
-
-
- handleDeleteComment(comment.id)}
- disabled={
- updateCommentMutation.isPending ||
- deleteCommentMutation.isPending
- }
- >
-
-
-
- )}
-
-
- )}
-
-
-
- ))}
-
+
+
+ {formatDate(comment.createdAt)}
+
+ {comment.writerId === userId && (
+
+ {
+ setEditingCommentId(comment.id);
+ setEditContent(comment.content);
+ }}
+ disabled={
+ updateCommentMutation.isPending ||
+ deleteCommentMutation.isPending
+ }
+ >
+
+
+ handleDeleteComment(comment.id)}
+ disabled={
+ updateCommentMutation.isPending ||
+ deleteCommentMutation.isPending
+ }
+ >
+
+
+
+ )}
+
+
+ )}
+
+
+ ))}
+
+
+
);
}
diff --git a/src/pages/Friend/FriendPage.tsx b/src/pages/Friend/FriendPage.tsx
index 51fd87a..0037e7e 100644
--- a/src/pages/Friend/FriendPage.tsx
+++ b/src/pages/Friend/FriendPage.tsx
@@ -1,9 +1,9 @@
-/** @jsxImportSource @emotion/react */
import { useState, useMemo } from "react";
-import { css } from "@emotion/react";
+import styled from "@emotion/styled";
import { useNavigate } from "react-router-dom";
import { Search } from "@mui/icons-material";
-import List from "@/components/common/List/List";
+import ProfileImage from "@/components/common/ProfileImage/ProfileImage";
+import UserInfo from "@/components/common/UserInfo/UserInfo";
import {
useGetFriends,
useGetReceivedRequests,
@@ -17,7 +17,6 @@ import {
useCancelFriendRequest,
} from "@/api/hooks/useFriendRequest";
import useDeleteFriend from "@/api/hooks/useDeleteFriend";
-import breakpoints from "@/variants/breakpoints";
import {
Friend,
SentRequest,
@@ -26,121 +25,341 @@ import {
} from "@/types/types";
import Button from "@/components/common/Button/Button";
import useUserData from "@/api/hooks/useUserData";
+import breakpoints from "@/variants/breakpoints";
-// Styles
-const pageStyles = css`
+// Styled Components
+const PageContainer = styled.div`
width: 100%;
max-width: 1200px;
- height: 100vh;
- padding: 10px 45px;
+ padding: 32px;
display: flex;
flex-direction: column;
align-items: center;
- font-family: "Inter", sans-serif;
box-sizing: border-box;
- @media (max-width: ${breakpoints.sm}px) {
- padding-top: 80px;
- }
+ overflow-x: hidden;
+ background-color: #ffffff;
`;
-const searchBarStyles = css`
+const Heading = styled.h1`
+ font-size: 24px;
+ font-weight: 600;
+ margin-bottom: 24px;
+ color: #2d3748;
+ margin-right: auto;
+`;
+
+const TabsContainer = styled.div`
display: flex;
+ justify-content: flex-end;
+ gap: 28px;
+ width: 100%;
+ margin-bottom: 20px;
+ box-sizing: border-box;
+ flex-wrap: wrap;
+`;
+
+const Tab = styled.div<{ active: boolean }>`
+ font-size: 15px;
+ font-weight: ${(props) => (props.active ? 600 : 400)};
+ color: ${(props) => (props.active ? "#39a7f7" : "#9b9b9b")};
+ cursor: pointer;
+ transition: color 0.3s ease;
+`;
+
+const SearchBarWrapper = styled.div`
+ width: 100%;
+`;
+const SearchBar = styled.div`
+ display: flex;
+ flex: 1;
align-items: center;
padding: 10px;
- background: #f4f4f4;
- border-radius: 16px;
+ border-radius: 8px;
margin-bottom: 20px;
width: 100%;
box-sizing: border-box;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ background-color: #ffffff;
`;
-const searchIconStyles = css`
+const SearchIconStyled = styled(Search)`
color: #aab2c8;
font-size: 20px;
margin-right: 10px;
`;
-const searchInputStyles = css`
+const SearchInput = styled.input`
flex: 1;
border: none;
background: transparent;
font-size: 15.28px;
font-weight: 700;
- color: #aab2c8;
+ color: #4a5568;
outline: none;
&::placeholder {
color: #aab2c8;
}
`;
-const searchButtonStyles = css`
- color: #aab2c8;
+const SearchButton = styled.span`
+ color: #39a7f7;
cursor: pointer;
font-weight: bold;
margin-left: 10px;
`;
-const tabsStyles = css`
- display: flex;
- justify-content: flex-end;
- gap: 28px;
+const FriendListContainer = styled.div`
width: 100%;
- margin-bottom: 20px;
+ display: grid;
+ gap: 16px;
box-sizing: border-box;
-`;
-
-const tabStyles = css`
- font-size: 15px;
- font-weight: 400;
- color: #9b9b9b;
- cursor: pointer;
- transition: color 0.3s ease;
+ grid-template-columns: 1fr;
- &.active {
- color: black;
- font-weight: 600;
+ @media (min-width: ${breakpoints.lg}px) {
+ grid-template-columns: 1fr 1fr;
}
`;
-const friendListStyles = css`
- width: 100%;
+const FriendItemContainer = styled.div`
display: flex;
- flex-direction: column;
- gap: 10px;
+ align-items: center;
+ background-color: #ffffff;
+ border-radius: 8px;
box-sizing: border-box;
+ padding: 16px;
+ gap: 16px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ transition: box-shadow 0.2s;
+ &:hover {
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+ }
`;
-const friendItemStyles = css`
- display: flex;
- align-items: center;
- padding: 10px;
- background: #f4f4f4;
- border-radius: 16px;
- box-sizing: border-box;
- width: 100%;
- flex-wrap: nowrap;
- min-width: 394px;
+const ProfileImageWrapper = styled.div`
+ margin-right: 16px;
`;
-const buttonContainerStyles = css`
+const ButtonContainer = styled.div`
display: flex;
gap: 10px;
margin-left: auto;
- margin-right: 20px;
`;
-// 검색 결과 아이템 컴포넌트
-const SearchResultItem = ({ friend }: { friend: SearchResult }) => {
+const EmptyMessage = styled.p`
+ text-align: center;
+ color: #999;
+ font-size: 16px;
+ margin-top: 20px;
+`;
+
+const FriendPage = () => {
+ const [activeTab, setActiveTab] = useState("friendList");
+ const [searchQuery, setSearchQuery] = useState("");
+ const [searchResults, setSearchResults] = useState(null);
+ const [searched, setSearched] = useState(false);
+
+ // React Query hooks
+ const {
+ data: friendList = [],
+ isLoading: isLoadingFriends,
+ refetch: refetchFriends,
+ } = useGetFriends();
+
+ const {
+ data: receivedRequests = [],
+ isLoading: isLoadingReceived,
+ refetch: refetchReceivedRequests,
+ } = useGetReceivedRequests();
+
+ const {
+ data: sentRequests = [],
+ isLoading: isLoadingSent,
+ refetch: refetchSentRequests,
+ } = useGetSentRequests();
+
+ const { refetch: fetchFriendByNickname } =
+ useGetFriendByNickname(searchQuery);
+
+ const handleSearch = async () => {
+ setSearched(true);
+ if (searchQuery.trim()) {
+ const { data } = await fetchFriendByNickname();
+ if (data) {
+ setSearchResults({
+ id: data.id,
+ nickname: data.nickname,
+ profileImage: data.profileImage,
+ });
+ } else {
+ setSearchResults(null);
+ }
+ } else {
+ alert("검색어를 입력해주세요.");
+ }
+ };
+
+ const handleSearchInputChange = (e: React.ChangeEvent) => {
+ setSearchQuery(e.target.value);
+ setSearched(false);
+ };
+
+ const renderedFriendList = useMemo(() => {
+ if (friendList.length === 0) {
+ return 친구가 없습니다.;
+ }
+ return friendList.map((friend) => (
+
+ ));
+ }, [friendList, refetchFriends]);
+
+ const renderedSentRequests = useMemo(() => {
+ if (sentRequests.length === 0) {
+ return 보낸 요청이 없습니다.;
+ }
+ return sentRequests.map((request) => (
+
+ ));
+ }, [
+ sentRequests,
+ refetchFriends,
+ refetchReceivedRequests,
+ refetchSentRequests,
+ ]);
+
+ const renderedReceivedRequests = useMemo(() => {
+ if (receivedRequests.length === 0) {
+ return 받은 요청이 없습니다.;
+ }
+ return receivedRequests.map((request) => (
+
+ ));
+ }, [
+ receivedRequests,
+ refetchFriends,
+ refetchReceivedRequests,
+ refetchSentRequests,
+ ]);
+
+ return (
+
+ 친구
+
+ setActiveTab("friendSearch")}
+ >
+ 친구 검색
+
+ setActiveTab("friendList")}
+ >
+ 친구 목록
+
+ setActiveTab("receivedRequests")}
+ >
+ 받은 요청
+
+ setActiveTab("sentRequests")}
+ >
+ 보낸 요청
+
+
+
+ {activeTab === "friendSearch" && (
+
+
+
+
+ {
+ if (e.key === "Enter") handleSearch();
+ }}
+ >
+ 검색
+
+
+ {searched && !searchResults && (
+ 검색 결과가 없습니다.
+ )}
+ {searchResults && (
+
+ )}
+
+ )}
+
+ {activeTab !== "friendSearch" && (
+
+ {activeTab === "friendList" &&
+ !isLoadingFriends &&
+ renderedFriendList}
+ {activeTab === "sentRequests" &&
+ !isLoadingSent &&
+ renderedSentRequests}
+ {activeTab === "receivedRequests" &&
+ !isLoadingReceived &&
+ renderedReceivedRequests}
+
+ )}
+
+ );
+};
+
+// Components
+
+const SearchResultItem = ({
+ friend,
+ refetchSentRequests,
+}: {
+ friend: SearchResult;
+ refetchSentRequests: () => void;
+}) => {
const { sendFriendRequest, isLoading } = useFriendRequest();
- const handleFriendRequest = () => {
- sendFriendRequest(friend.id);
+ const handleFriendRequest = async () => {
+ await sendFriendRequest(friend.id);
+ refetchSentRequests();
};
return (
-
+
+
);
};
-// List 아이템을 렌더링하는 컴포넌트
-const FriendItem = ({ friend }: { friend: Friend }) => {
+const FriendItem = ({
+ friend,
+ refetchFriends,
+}: {
+ friend: Friend;
+ refetchFriends: () => void;
+}) => {
const navigate = useNavigate();
const deleteFriendMutation = useDeleteFriend(friend.userId);
const { userData } = useUserData();
+
const handleVisitClick = () => {
navigate(`/friend/${friend.userId}`, {
state: { friendName: friend.nickname, userId: userData.id },
@@ -167,22 +392,30 @@ const FriendItem = ({ friend }: { friend: Friend }) => {
const handleDeleteClick = () => {
if (window.confirm("정말로 삭제하시겠습니까?")) {
- deleteFriendMutation.mutate();
+ deleteFriendMutation.mutate(undefined, {
+ onSuccess: () => {
+ refetchFriends();
+ alert("친구를 삭제했습니다.");
+ },
+ });
}
};
return (
-
+
+
);
};
@@ -190,14 +423,20 @@ function isSentRequest(
request: SentRequest | ReceivedRequest,
): request is SentRequest {
return (request as SentRequest).receiverName !== undefined;
-} // 타입가드
+}
const RequestItem = ({
request,
type,
+ refetchFriends,
+ refetchReceivedRequests,
+ refetchSentRequests,
}: {
request: SentRequest | ReceivedRequest;
type: "sent" | "received";
+ refetchFriends: () => void;
+ refetchReceivedRequests: () => void;
+ refetchSentRequests: () => void;
}) => {
const acceptFriendRequestMutation = useAcceptFriendRequest(request.id);
const rejectFriendRequestMutation = useRejectFriendRequest(request.id);
@@ -205,38 +444,57 @@ const RequestItem = ({
const handleAcceptClick = () => {
if (window.confirm("이 친구 요청을 수락하시겠습니까?")) {
- acceptFriendRequestMutation.mutate();
+ acceptFriendRequestMutation.mutate(undefined, {
+ onSuccess: () => {
+ refetchFriends();
+ refetchReceivedRequests();
+ alert("친구 요청을 수락했습니다.");
+ },
+ });
}
};
const handleRejectClick = () => {
if (window.confirm("이 친구 요청을 거절하시겠습니까?")) {
- rejectFriendRequestMutation.mutate();
+ rejectFriendRequestMutation.mutate(undefined, {
+ onSuccess: () => {
+ refetchReceivedRequests();
+ alert("친구 요청을 거절했습니다.");
+ },
+ });
}
};
const handleCancelClick = () => {
if (window.confirm("이 친구 요청을 취소하시겠습니까?")) {
- cancelFriendRequestMutation.mutate();
+ cancelFriendRequestMutation.mutate(undefined, {
+ onSuccess: () => {
+ refetchSentRequests();
+ },
+ });
}
};
return (
-
-
+
+
+
+
-
+
{type === "sent" ? (
-
)}
-
-
-
-
setActiveTab("friendSearch")}
- role="button"
- tabIndex={0}
- >
- 친구 검색
-
-
setActiveTab("friendList")}
- role="button"
- tabIndex={0}
- >
- 친구 목록
-
-
setActiveTab("receivedRequests")}
- role="button"
- tabIndex={0}
- >
- 받은 요청
-
-
setActiveTab("sentRequests")}
- role="button"
- tabIndex={0}
- >
- 보낸 요청
-
-
-
- {activeTab === "friendSearch" && (
-
-
-
-
- {
- if (e.key === "Enter") handleSearch();
- }}
- >
- 검색
-
-
- {searched && !searchResults &&
검색 결과가 없습니다.
}
- {searchResults &&
}
-
- )}
- {activeTab === "friendList" && !isLoadingFriends && renderedFriendList}
- {activeTab === "sentRequests" && !isLoadingSent && renderedSentRequests}
- {activeTab === "receivedRequests" &&
- !isLoadingReceived &&
- renderedReceivedRequests}
-
-
로그인 처리 중...
;
+ return 리다이렉트 처리 중...
;
};
export default OAuthRedirectHandler;
diff --git a/src/pages/Main/MainPage.tsx b/src/pages/Main/MainPage.tsx
index 54a3845..d34cb5a 100644
--- a/src/pages/Main/MainPage.tsx
+++ b/src/pages/Main/MainPage.tsx
@@ -1,266 +1,119 @@
+import { useEffect, useRef } from "react";
import styled from "@emotion/styled";
-import { useState, useEffect } from "react";
-import CustomCalendar from "@/components/features/CustomCalendar/CustomCalendar";
+import { useNavigate, useLocation } from "react-router-dom";
+import CustomCalendar, {
+ CalendarEvent,
+} from "@/components/features/CustomCalendar/CustomCalendar";
import { useGetPlans } from "@/api/hooks/useGetPlans";
-import useCreatePlan from "@/api/hooks/useCreatePlans";
-import CircleButton from "@/components/common/CircleButton/CircleButton";
-import breakpoints from "@/variants/breakpoints";
-
-// 캘린더와 버튼을 포함하는 반응형 컨테이너
-const CalendarContainer = styled.div`
- position: relative;
- width: 100%;
- max-width: 1200px; // 최대 너비를 설정해 버튼이 중앙을 유지하도록 합니다.
- margin: 0 auto;
+import useCreatePlan from "@/api/hooks/useCreatePlan";
+import Button from "@/components/common/Button/Button";
+import RouterPath from "@/router/RouterPath";
+import { requestForToken, setupOnMessageListener } from "@/api/firebaseConfig"; // Import Firebase functions
+import { apiClient } from "@/api/instance";
+
+const PageContainer = styled.div`
+ background-color: #ffffff;
padding: 20px;
`;
-// 버튼을 캘린더 컨테이너 내의 상대적인 위치에 두도록 설정
-const ButtonWrapper = styled.div`
- position: absolute;
- top: 10%;
- display: flex;
- justify-content: flex-start;
- margin-top: 20px;
- left: calc(10% + 10px);
- z-index: 1;
-
- ${breakpoints.tablet} {
- top: 10%;
- left: 20px;
- }
-
- ${breakpoints.mobile} {
- top: 10%;
- left: 20px;
- }
-`;
-
-// 모달 스타일
-const ModalOverlay = styled.div`
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.5);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 2;
-`;
-
-const ModalContent = styled.div`
- background: white;
- padding: 20px 30px 20;
- width: 500px; // 가로폭 설정
- max-width: 95%;
- border-radius: 8px;
- box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
- display: flex;
- flex-direction: column;
- gap: 15px; /* 각 입력 필드 사이에 간격 추가 */
-`;
-
-const Input = styled.input`
- width: 100%;
- padding: 8px;
- margin-top: 10px;
- margin-bottom: 10px;
- border: 1px solid #ccc;
- border-radius: 4px;
-`;
-
-const Textarea = styled.textarea`
- width: 99%;
- padding: 10px;
- margin-top: 5px;
- border: 1px solid #ccc;
- border-radius: 4px;
- resize: vertical;
-`;
-
-const CloseButton = styled.button`
- margin-top: 10px;
- background-color: #39a7f7;
- color: white;
- border: none;
- padding: 10px 15px;
- border-radius: 4px;
- cursor: pointer;
-`;
-
-const ToggleWrapper = styled.label`
- display: flex;
- flex-direction: column;
- cursor: pointer;
- gap: 10px;
-`;
-
-const ToggleInput = styled.input`
- appearance: none;
- width: 40px;
- height: 20px;
- background: #ccc;
- border-radius: 20px;
- position: relative;
- outline: none;
- transition: background 0.3s;
-
- &:checked {
- background: #39a7f7;
- }
-
- &:before {
- content: "";
- position: absolute;
- width: 18px;
- height: 18px;
- border-radius: 50%;
- background: white;
- top: 1px;
- left: 1px;
- transition: transform 0.3s;
- }
-
- &:checked:before {
- transform: translateX(20px);
- }
-`;
-
-const ToggleLabel = styled.span`
- font-size: 16px;
- color: #333;
-`;
-
-const MainPage: React.FC = () => {
- const { data: plans, isLoading, error } = useGetPlans();
- const [modalOpen, setIsModalOpen] = useState(false);
- const [title, setTitle] = useState("");
- const [description, setDescription] = useState("");
- const [startDate, setStartDate] = useState("");
- const [endDate, setEndDate] = useState("");
- const [isAccessible, setIsAccessible] = useState(false);
- const [isCompleted, setIsCompleted] = useState(false);
+export default function MainPage() {
+ const location = useLocation();
+ const { data: Plans, isLoading, error, refetch } = useGetPlans();
+ const savePlanMutation = useCreatePlan();
+ const isPlanSaved = useRef(false);
+ const hasMounted = useRef(false);
+ const navigate = useNavigate();
- // useCreatePlan 훅 사용
- const createPlanMutation = useCreatePlan();
+ useEffect(() => {
+ if (location.state?.refetchNeeded) {
+ refetch();
+ }
+ }, [location, refetch]);
- const handleToggleChange =
- (setter: React.Dispatch>) => () => {
- setter((prev) => !prev);
+ useEffect(() => {
+ if (hasMounted.current) return;
+ hasMounted.current = true;
+
+ const savePlans = async () => {
+ const storedPlans = sessionStorage.getItem("plans");
+ if (storedPlans && !isPlanSaved.current) {
+ const parsedPlans: CalendarEvent[] = JSON.parse(storedPlans).map(
+ (plan: CalendarEvent) => ({
+ ...plan,
+ start: new Date(plan.start),
+ end: new Date(plan.end),
+ }),
+ );
+
+ try {
+ await Promise.all(
+ parsedPlans.map((plan) =>
+ savePlanMutation.mutateAsync({
+ plan: {
+ title: plan.title,
+ description: plan.description,
+ startDate: plan.start.toISOString(),
+ endDate: plan.end.toISOString(),
+ accessibility: plan.accessibility ?? true,
+ isCompleted: plan.complete ?? false,
+ },
+ }),
+ ),
+ );
+ sessionStorage.removeItem("plans");
+ console.log("세션의 플랜이 저장되었습니다.");
+ isPlanSaved.current = true;
+ refetch();
+ } catch (err) {
+ console.error("세션의 플랜 저장 실패:", err);
+ }
+ }
};
- const handleButtonClick = () => {
- setIsModalOpen(true);
- };
-
- // 폼 제출 핸들러
- const handleSubmit = (e: React.FormEvent) => {
- e.preventDefault();
- createPlanMutation.mutate({
- title,
- description,
- startDate,
- endDate,
- accessibility: isAccessible,
- isCompleted,
- });
- setIsModalOpen(false); // 폼 제출 후 모달 닫기
- };
+ savePlans();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+ // Notification functionality
useEffect(() => {
- // 로컬 스토리지 정리 (필요한 경우)
- const savedPreviewData = localStorage.getItem("previewPlanData");
- if (savedPreviewData) {
- localStorage.removeItem("previewPlanData");
- }
+ const registerFcmToken = async () => {
+ const permission = await Notification.requestPermission();
+ if (permission === "granted") {
+ try {
+ const fcmToken = await requestForToken();
+ if (fcmToken) {
+ await apiClient.post("/api/fcm/register", { token: fcmToken });
+ console.log("FCM 토큰이 성공적으로 등록되었습니다.");
+ }
+ } catch (err) {
+ console.error("FCM 토큰 등록 중 오류 발생:", err);
+ }
+ } else {
+ console.log("알림 권한이 거부되었습니다.");
+ }
+ };
+
+ registerFcmToken();
+ setupOnMessageListener(); // Set up the listener for foreground messages
}, []);
- if (isLoading) {
- return Loading...
; // 로딩 상태 처리
- }
+ const handleModifyClick = () => {
+ navigate(RouterPath.MAIN_MODIFY, { state: { plans: Plans } });
+ };
- if (error) {
- return Error: {error.message}
; // 에러 처리
- }
+ if (isLoading) return 로딩 중...
;
+ if (error) return 데이터를 불러오지 못했습니다. 오류: {error.message}
;
return (
-
-
- +
-
-
-
- {modalOpen && (
-
-
- 새 일정 추가
-