+
+ );
+}
```
-### 3. 최종 세팅 결과물
-
-- `.eslintrc.json`
-
-```json
-{
- "root": true,
- "env": { "browser": true, "es2022": true, "node": true },
- "parser": "@typescript-eslint/parser",
- "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
- "settings": { "react": { "version": "detect" } },
- "plugins": ["react", "react-hooks", "@typescript-eslint", "jsx-a11y", "import", "prettier"],
- "extends": [
- "eslint:recommended",
- "plugin:react/recommended",
- "plugin:react-hooks/recommended",
- "plugin:@typescript-eslint/recommended",
- "plugin:jsx-a11y/recommended",
- "plugin:import/recommended",
- "plugin:import/typescript",
- "prettier"
- ],
- "rules": {
- "react/react-in-jsx-scope": "off",
- "@typescript-eslint/no-unused-vars": "off",
- "no-unused-vars": "off",
- "prettier/prettier": "warn"
- }
+```tsx
+function Right_4() {
+ const dispatch = useDispatch();
+
+ return (
+ Left_4 : {num}
+
+
+ );
}
```
-- `tsconfig.app.json`
-
-```json
-{
- "compilerOptions": {
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
- "target": "ES2022",
- "useDefineForClassFields": true,
- "lib": ["ES2022", "DOM", "DOM.Iterable"],
- "module": "ESNext",
- "skipLibCheck": true,
-
- /* Bundler mode */
- "moduleResolution": "bundler",
- "allowImportingTsExtensions": true,
- "verbatimModuleSyntax": true,
- "moduleDetection": "force",
- "noEmit": true,
- "jsx": "react-jsx",
-
- /* Linting */
- "strict": true,
- "noUnusedLocals": false,
- "noUnusedParameters": false,
- "erasableSyntaxOnly": true,
- "noFallthroughCasesInSwitch": true,
- "noUncheckedSideEffectImports": true
+## 4. 예제 2 (좋아요)
+
+### 4.1. Slice 만들기
+
+- `/src/redux/slices/likeSlice.ts 파일` 생성
+
+```ts
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+ count: 0,
+};
+
+const likeSlice = createSlice({
+ name: 'likeSlice',
+ initialState,
+ reducers: {
+ addLike: state => {
+ state.count += 1;
+ },
+ removeLike: state => {
+ state.count -= 1;
+ },
},
- "include": ["src"]
-}
+});
+
+export const { addLike, removeLike } = likeSlice.actions;
+
+export default likeSlice.reducer;
```
-- App.tsx 테스트 코드
+### 4.2. Store 등록하기
+
+- `/src/redux/slice/store.ts` 업데이트 (추가)
+
+```ts
+import { configureStore } from '@reduxjs/toolkit';
+
+// Redux 는 Store 를 조각조각 내서 사용함
+// Store 를 조각내서 활용하는 것을 Slice 라고 함
+import numReducer from './slices/numSlice';
+import likeReducer from './slices/likeSlice';
+
+export const store = configureStore({
+ reducer: { num: numReducer, like: likeReducer },
+});
+
+// 값을 읽을 때의 타입
+export type RootState = ReturnType
+
+
+ App
;
+import { Provider, useDispatch, useSelector } from 'react-redux';
+import { store, type RootState } from './redux/store';
+import { onIncrease } from './redux/slices/numSlice';
+import { addLike, removeLike } from './redux/slices/likeSlice';
+
+export default function App() {
+ // state 값 읽기
+ const num = useSelector((state: RootState) => state.num.num);
+
+ // state 값 변경
+ const dispatch = useDispatch();
+
+ return (
+
+
+ );
+}
+// 각각이 컴포넌트로 되어 있음.
+function Left_1() {
+ return (
+ Root : {num}
+
+
+
+
+
+
+
+
+
+ );
}
-export default App;
-```
+function Left_2() {
+ const like = useSelector((state: RootState) => state.like.count);
+
+ return (
+ Left_1 :
+
+
+
+
+ );
+}
-# Git 설정
+function Left_3() {
+ return (
+ Left_2 좋아요 : {like}
+
+
+
+
+ );
+}
-```bash
-git init
-git remote add origin https://github.com/devyubi/til_vite_ts.git
-git add .
-git commit -m "[docs] 프로젝트 세팅"
-git push origin main
-```
+function Left_4() {
+ // state 값 읽기
+ const num = useSelector((state: RootState) => state.num.num);
+ return (
+ Left_3 :
+
+
+
+
+ );
+}
+
+// 각각이 컴포넌트로 되어 있음.
+function Right_1() {
+ return (
+ Left_4 : {num}
+
+
+ );
+}
+
+function Right_2() {
+ const dispatch = useDispatch();
+ return (
+
+
+
+
+ );
+}
+
+function Right_3() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+function Right_4() {
+ const dispatch = useDispatch();
+
+ return (
+
+
+
+
+ );
+}
+
+// css 객체
+const container_root: React.CSSProperties = {
+ display: 'flex',
+ flexDirection: 'column',
+ border: '5px solid black',
+ padding: 10,
+ gap: 10,
+};
+const container: React.CSSProperties = {
+ border: '5px solid red',
+ display: 'flex',
+ gap: '10px',
+};
+const container_title: React.CSSProperties = {
+ fontSize: '40px',
+ color: 'blue',
+ border: '5px solid orange',
+};
+const container_div: React.CSSProperties = {
+ border: '5px solid hotpink',
+ margin: 10,
+};
+const container_div_2: React.CSSProperties = {
+ border: '5px solid yellowgreen',
+ margin: 10,
+};
+const btn: React.CSSProperties = {
+ border: '5px solid #000',
+ padding: 10,
+ margin: 20,
+};
+```
diff --git a/index.html b/index.html
index e4b78ea..22bbc9a 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,10 @@
-
+
-
+
+
+ App
;
+import { Provider, useDispatch, useSelector } from 'react-redux';
+import { store, type RootState } from './redux/store';
+import { onIncrease } from './redux/slices/numSlice';
+import { addLike, removeLike } from './redux/slices/likeSlice';
+
+export default function App() {
+ // state 값 읽기
+ const num = useSelector((state: RootState) => state.num.num);
+
+ // state 값 변경
+ const dispatch = useDispatch();
+
+ return (
+
+
+ );
+}
+// 각각이 컴포넌트로 되어 있음.
+function Left_1() {
+ return (
+ Root : {num}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function Left_2() {
+ const like = useSelector((state: RootState) => state.like.count);
+
+ return (
+ Left_1 :
+
+
+
+
+ );
+}
+
+function Left_3() {
+ return (
+ Left_2 좋아요 : {like}
+
+
+
+
+ );
+}
+
+function Left_4() {
+ // state 값 읽기
+ const num = useSelector((state: RootState) => state.num.num);
+
+ return (
+ Left_3 :
+
+
+
+
+ );
+}
+
+// 각각이 컴포넌트로 되어 있음.
+function Right_1() {
+ return (
+ Left_4 : {num}
+
+
+ );
+}
+
+function Right_2() {
+ const dispatch = useDispatch();
+ return (
+
+
+
+
+ );
+}
+
+function Right_3() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+function Right_4() {
+ const dispatch = useDispatch();
+
+ return (
+
+
+
+
+ );
}
-export default App;
+// css 객체
+const container_root: React.CSSProperties = {
+ display: 'flex',
+ flexDirection: 'column',
+ border: '5px solid black',
+ padding: 10,
+ gap: 10,
+};
+const container: React.CSSProperties = {
+ border: '5px solid red',
+ display: 'flex',
+ gap: '10px',
+};
+const container_title: React.CSSProperties = {
+ fontSize: '40px',
+ color: 'blue',
+ border: '5px solid orange',
+};
+const container_div: React.CSSProperties = {
+ border: '5px solid hotpink',
+ margin: 10,
+};
+const container_div_2: React.CSSProperties = {
+ border: '5px solid yellowgreen',
+ margin: 10,
+};
+const btn: React.CSSProperties = {
+ border: '5px solid #000',
+ padding: 10,
+ margin: 20,
+};
diff --git a/src/components/Counter.tsx b/src/components/Counter.tsx
new file mode 100644
index 0000000..471ad91
--- /dev/null
+++ b/src/components/Counter.tsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+type CounterProps = {};
+type VoidFun = () => void;
+
+const Counter = ({}: CounterProps): JSX.Element => {
+ const [count, setCount] = useState
+
+
+
+
+ );
+};
+
+export default Counter;
diff --git a/src/components/Couter.tsx b/src/components/Couter.tsx
new file mode 100644
index 0000000..8c6cc3a
--- /dev/null
+++ b/src/components/Couter.tsx
@@ -0,0 +1,26 @@
+import { useState } from 'react';
+type CounterProps = {};
+type VoidFun = () => void;
+
+const Couter = ({}: CounterProps): JSX.Element => {
+ const [count, setCount] = useStateCounter: {count}
+
+
+
+
+
+
+
+ );
+};
+
+export default Couter;
diff --git a/src/components/GoogleLoginButton.tsx b/src/components/GoogleLoginButton.tsx
new file mode 100644
index 0000000..87297ef
--- /dev/null
+++ b/src/components/GoogleLoginButton.tsx
@@ -0,0 +1,87 @@
+import { useAuth } from '../contexts/AuthContext';
+
+interface GoogleLoginButtonProps {
+ children?: React.ReactNode;
+ onError?: (error: string) => void;
+ onSuccess?: (message: string) => void;
+}
+const GoogleLoginButton = ({ onError, onSuccess }: GoogleLoginButtonProps) => {
+ // 구글 로그인 사용
+ const { signInWithGoogle } = useAuth();
+ // 구글 로그인 실행
+ const handleGoogleLogin = async () => {
+ try {
+ const { error } = await signInWithGoogle();
+ if (error) {
+ console.log('구글 로그인 에러 메시지 : ', error);
+ if (onError) {
+ onError(error);
+ }
+ } else {
+ console.log('구글 로그인 성공');
+ if (onSuccess) {
+ onSuccess('구글 로그인이 성공했습니다.');
+ }
+ }
+ } catch (err) {
+ console.log('구글 로그인 오류 : ', err);
+ }
+ };
+ return (
+
+ );
+};
+
+export default GoogleLoginButton;
diff --git a/src/components/KakaoLoginButton.tsx b/src/components/KakaoLoginButton.tsx
new file mode 100644
index 0000000..05441e9
--- /dev/null
+++ b/src/components/KakaoLoginButton.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { useAuth } from '../contexts/AuthContext';
+
+// 오류 메시지를 사용한 화면에 보여줄 함수
+interface KakaoLoginButtonProps {
+ children?: React.ReactNode;
+ onError?: (error: string) => void;
+ onSuccess?: (message: string) => void;
+}
+const KakaoLoginButton = ({ onError, onSuccess }: KakaoLoginButtonProps) => {
+ // 카카오 로그인 사용
+ const { signInWithKakao } = useAuth();
+ // 카카오 로그인 실행
+ const handleKakaoLogin = async () => {
+ try {
+ const { error } = await signInWithKakao();
+
+ if (error) {
+ console.log('카카오로그인 에러 메시지 : ', error);
+ if (onError) {
+ onError(error);
+ }
+ } else {
+ console.log('카카오 로그인 성공');
+ if (onSuccess) {
+ onSuccess('카카오 로그인이 성공했습니다.');
+ }
+ }
+ } catch (err) {
+ console.log('카카오 로그인 오류 : ', err);
+ }
+ };
+ return (
+
+ );
+};
+
+export default KakaoLoginButton;
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
new file mode 100644
index 0000000..242f919
--- /dev/null
+++ b/src/components/Loading.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+type LoadingProps = {
+ size?: 'sm' | 'md' | 'lg';
+ message?: string;
+ overlay?: boolean;
+ className?: string;
+};
+
+const Loading: React.FCCouter : {count}
+ + + +
+
+
+ );
+
+ const content = (
+
+ {spinner}
+ {message && {message}}
+
+ );
+
+ if (overlay) {
+ return {content}
;
+ }
+
+ return {content}
;
+};
+
+export default Loading;
diff --git a/src/components/NameEditor.tsx b/src/components/NameEditor.tsx
new file mode 100644
index 0000000..ef231f3
--- /dev/null
+++ b/src/components/NameEditor.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+type NameEditorProps = {
+ children?: React.ReactNode;
+};
+
+function NameEditor({ children }: NameEditorProps): JSX.Element {
+ const [name, setName] = useState
+
+ );
+}
+
+export default NameEditor;
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
new file mode 100644
index 0000000..2e5c9e5
--- /dev/null
+++ b/src/components/Pagination.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+
+interface PaginationProps {
+ totalCount: number;
+ totalPages: number;
+ currentPage: number;
+ itemsPerPage: number;
+ handleChangePage: (page: number) => void;
+}
+const Pagination = ({
+ totalCount,
+ totalPages,
+ currentPage,
+ itemsPerPage,
+ handleChangePage,
+}: PaginationProps): JSX.Element => {
+ // ts 자리
+ // 시작 번호를 생성함.
+ const startItem = (currentPage - 1) * itemsPerPage + 1;
+ // 마지막 번호를 생성함.
+ const endItem = Math.min(currentPage * itemsPerPage, totalCount);
+
+ // 페이지 번호 버튼 배열을 생성함
+ const getPageNumbers = () => {
+ const pages = [];
+ // 한 화면에 몇개의 버튼들을 출력할 것인가?
+ const maxVisiblePages = 5;
+
+ if (totalPages <= maxVisiblePages) {
+ // 현재 5 페이지 보다 적은 경우
+ for (let i = 1; i <= totalPages; i++) {
+ pages.push(i);
+ }
+ } else {
+ // 현재 5 페이지 보다 큰 경우
+ // 시나리오
+ // ... currentpage-2 currentpage-1 currentpage currentpage+1 currentpage+2 ...
+ // 현재 페이지를 중심으로 앞뒤 2개씩 표현
+ const startPage = Math.max(1, currentPage - 2);
+ const endPage = Math.min(totalPages, currentPage + 2);
+
+ // 시작페이지가 1 보다 크면 첫 페이지와 ... 추가
+ if (startPage > 1) {
+ pages.push(1);
+ // [1]
+ if (startPage > 2) {
+ pages.push('...');
+ // [1, "..."]
+ }
+ }
+ // 중간 페이지를 추가
+ for (let i = startPage; i <= endPage; i++) {
+ pages.push(i);
+ }
+
+ // 끝 페이지가 마지막 보다 작으면 ... 과 페이지 추가
+ if (endPage < totalPages) {
+ if (endPage < totalPages - 1) {
+ pages.push('...');
+ }
+ pages.push(totalPages);
+ }
+ }
+
+ return pages;
+ };
+
+ const pageNumbers = getPageNumbers();
+
+ // 페이지네이션이 무조건 나오는 것은 아닙니다.
+ if (totalPages <= 1) {
+ return <>;
+ }
+
+ // tsx 자리
+ return (
+ NameEditor : {name}
+
+ handleChange(e)}
+ onKeyDown={e => handleKeyDown(e)}
+ />
+
+
+
+ {/* 페이지 정보 */}
+
+ );
+};
+
+export default Pagination;
diff --git a/src/components/Protected.tsx b/src/components/Protected.tsx
new file mode 100644
index 0000000..68a7098
--- /dev/null
+++ b/src/components/Protected.tsx
@@ -0,0 +1,44 @@
+import type { PropsWithChildren } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { Navigate } from 'react-router-dom';
+
+/**
+ * 로그인 한 사용자가 접근할 수 있는 페이지
+ * - 사용자 프로필 페이지
+ * - 관리자 대시보드 페이지
+ * - 개인 설정 페이지
+ * - 구매 내역 페이지 등등
+ */
+const Protected: React.FC
+ 총 {totalCount}개 중{' '}
+
+ {startItem} ~ {endItem}
+
+ 개 표시
+
+
+ {/* 페이지 번호들 */}
+
+
+
+ {/* 버튼들 출력 */}
+
+
+ {pageNumbers.map((item, index) => (
+
+ {item === '...' ? (
+ ...
+ ) : (
+
+ )}
+
+ ))}
+
+
+
+
+
+ );
+ }
+
+ // 로그인이 안되어서 user 정보가 없으면 로그인 페이지로 이동
+ if (!user) {
+ return 로딩중...
+ {children}
;
+};
+
+export default Protected;
diff --git a/src/components/RichTextEditor.tsx b/src/components/RichTextEditor.tsx
new file mode 100644
index 0000000..c474ba4
--- /dev/null
+++ b/src/components/RichTextEditor.tsx
@@ -0,0 +1,301 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import ReactQuill, { type Value } from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+
+// 임시 미리보기 이미지의 데이터 형태
+interface TempImageFile {
+ file: File; // 사용자가 실제로 선택한 이미지 파일
+ tempUrl: string; // URL.createObjectURL 로 만든 blob 임시 URL (본문 보여줌)
+ id: string; // 관리를 위한 ID 를 할당
+}
+
+// 컴포넌트가 외부에서 전달받을 데이터 형태
+interface RichTextEditorProps {
+ value: string; // 에디터에 초기로 보여줄 내용
+ onChange: (value: string) => void; // 내용이 변결될때 실행할 함수
+ placeholder?: string; // 안내 텍스트 (선택사항)
+ disabled?: boolean; // 에디터를 비활성화할지 여부 (선택사항)
+ // 추가됨.
+ onImagesChange?: (images: File[]) => void; // 파일을 외부에 보관하는 용도
+}
+
+const RichTextEditor = ({
+ value,
+ onChange,
+ placeholder = '내용을 입력하세요.',
+ disabled = false,
+ onImagesChange, // 외부로 이미지를 전달하는 함수
+}: RichTextEditorProps) => {
+ // ref 변수들을 저장해둠.
+ // ReactQuill 을 보관둡니다.
+ const quilRef = useRef
+
+ );
+};
+
+export default RichTextEditor;
diff --git a/src/components/User.tsx b/src/components/User.tsx
new file mode 100644
index 0000000..bfa586e
--- /dev/null
+++ b/src/components/User.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+type UserProps = {
+ children?: React.ReactNode;
+ name: string;
+ age: number;
+};
+export type UserType = {
+ name: string;
+ age: number;
+};
+
+const User = ({ name, age }: UserProps): JSX.Element => {
+ const [user, setUser] = useState
+
+ );
+};
+
+export default User;
diff --git a/src/components/chat/chat.css b/src/components/chat/chat.css
new file mode 100644
index 0000000..103bf57
--- /dev/null
+++ b/src/components/chat/chat.css
@@ -0,0 +1,663 @@
+/* 채팅 페이지 전체 컨테이너 : 헤더 높이를 제외한 전체 화면 높이 사용 */
+.chat-page {
+ height: calc(100vh - 120px);
+ display: flex;
+ flex-direction: column;
+}
+
+/* 숨김 클래스 */
+.hidden {
+ display: none !important;
+}
+
+/* 시스템 메시지 스타일 */
+.system-message {
+ display: flex;
+ justify-content: center;
+ margin: 10px 0;
+}
+
+.system-message-content {
+ background-color: #f0f0f0;
+ color: #666;
+ padding: 8px 16px;
+ border-radius: 16px;
+ font-size: 12px;
+ font-style: italic;
+ max-width: 80%;
+ text-align: center;
+}
+/* 메인 채팅 컨테이너 - 사이드바와 채팅방을 나누는 레이아웃 */
+.chat-container {
+ display: flex;
+ height: 100%;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ overflow: hidden;
+}
+/* 왼쪽 사이드바 - 채팅 목록과 사용자 검색 영역 */
+.chat-sidebar {
+ width: 300px;
+ border-right: 1px solid #e0e0e0;
+ background-color: #f8f9fa;
+ display: flex;
+ flex-direction: column;
+}
+/* 오른쪽 메인 영역 - 채팅방 내용 표시 */
+.chat-main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ background-color: #ffffff;
+}
+
+/* ==== 채팅 리스트 영역 ==== */
+
+/* 채팅 목록 컨테이너 - 세로 방향으로 채팅 목록 표시 */
+.chat-list {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ background-color: #f8f9fa;
+ border-right: 1px solid #e0e0e0;
+}
+/* 채팅 목록 헤더 - 제목과 새 채팅 버튼 */
+.chat-list-header {
+ padding: 20px;
+ border-bottom: 1px solid #e0e0e0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #ffffff;
+}
+/* 채팅 목록 제목 스타일 */
+.chat-list-header h2 {
+ margin: 0;
+ font-size: 20px;
+ font-weight: 600;
+ color: #333;
+}
+/* 새 채팅 시작 버튼 - 둥근 모서리와 호버 효과 */
+.new-chat-btn {
+ background-color: #007bff;
+ color: #ffffff;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 20px;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+ opacity: 0.8;
+ transition: all 0.2s ease;
+}
+.new-chat-btn:hover {
+ opacity: 1;
+}
+/* ==== 사용자 검색 영역 ==== */
+/* 사용자 검색 컨테이너 - 검색 입력과 결과 표시 */
+.user-search {
+ padding: 16px;
+ border-bottom: 1px solid #e0e0e0;
+ background-color: #ffffff;
+}
+/* 검색 입력 필드 */
+.search-input {
+ width: 100%;
+ padding: 8px 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 14px;
+}
+/* 검색 결과 컨테이너 - 스크롤 가능한 최대 높이 설정 */
+.search-result {
+ margin-top: 8px;
+ max-height: 200px;
+ overflow-y: auto;
+}
+/* 검색된 사용자 아이템 - 아바타와 닉네임 표시 */
+.user-item {
+ display: flex;
+ align-items: center;
+ padding: 8px;
+ cursor: pointer;
+ border-radius: 4px;
+ transition: all 0.2s ease;
+}
+/* 사용자 아이템 호버효과 */
+.user-item:hover {
+ background-color: #f0f0f0;
+}
+
+/* 사용자 아바타 컨테이너 */
+.user-avatar {
+ margin-right: 12px;
+}
+/* 사용자 아바타 이미지 - 원형으로 표시 */
+.user-avatar img {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ object-fit: cover;
+}
+/* 아바타 플레이스홀더 - 이미지가 없을 때 이니셜 표시 */
+.avatar-placeholder {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background-color: #007bff;
+ color: #ffffff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ font-size: 14px;
+}
+
+/* 사용자 정보 컨테이너 */
+.user-info {
+ display: block;
+}
+/* 사용자 닉네임 스타일 */
+.user-nickname {
+ font-weight: 500;
+ color: #333;
+}
+/* 검색 결과 없음 메시지 */
+.no-results {
+ padding: 16px;
+ text-align: center;
+ color: #666;
+ font-size: 14px;
+}
+
+/* ==== 채팅 아이템 목록 ==== */
+/* 채팅 아이템 컨테이너 - 스크롤 가능한 목록 */
+.chat-items {
+ flex: 1;
+ overflow-y: auto;
+}
+/* 채팅방이 없을 떄 표시 */
+.no-chats {
+ padding: 32px 16px;
+ text-align: center;
+ color: #666;
+}
+
+/* 개별 채팅 아이템 - 아바타, 이름, 미리보기, 시간 표시 */
+.chat-item {
+ display: flex;
+ align-items: center;
+ padding: 18px 20px;
+ cursor: pointer;
+ border-bottom: 1px solid #f5f5f5;
+ transition: all 0.2s ease;
+ background-color: #ffffff;
+}
+/* 선택된 채팅 아이템 - 파란색 테두리, 오른쪽 테두리 */
+.chat-item.selected {
+ background-color: #e3f2fd;
+ border-right: 3px solid #007bff;
+}
+/* 채팅 상대방 아바타 컨테이너 - 읽지 않은 메시지 배치 위치 기준*/
+.chat-avatar {
+ position: relative;
+ margin-right: 16px;
+}
+.chat-avatar img {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 2px solid #f0f0f0;
+}
+.chat-avatar .avatar-placeholder {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #007bff, #0056b3);
+ color: #ffffff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ font-size: 19px;
+ border: 2px solid #f0f0f0;
+}
+/* 읽지 않은 메시지 개수 배지 - 아바타에 우상단에 표시 */
+.unread-badge {
+ position: absolute;
+ top: -2px;
+ right: -2px;
+ background-color: #ff4444;
+ color: #ffffff;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ font-weight: 600;
+}
+
+/* 채팅 정보 컨테이너 - 이름, 시간, 미리보기*/
+.chat-info {
+ flex: 1;
+ min-width: 0;
+}
+/* 채팅 헤더 - 이름과 시간 양쪽 끝에 배치 */
+.chat-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 4px;
+}
+
+/* 채팅 상대방 이름 */
+.chat-name {
+ font-weight: 600;
+ color: #333;
+ font-size: 14px;
+}
+
+/* 마지막 메시지 시간 */
+.chat-time {
+ font-size: 12px;
+ color: #666;
+}
+
+/* 마지막 메시지 미리보기 - 긴 텍스트는 말줄임표 처리 */
+.chat-preview {
+ font-size: 13px;
+ color: #666;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* 읽지 않은 메시지 미리보기 - 굵은 글씨 */
+.chat-preview .unread {
+ font-weight: 600;
+ color: #333;
+}
+
+/* 메시지가 없는 경우 표시 */
+.chat-preview .no-message {
+ font-style: italic;
+ color: #999;
+}
+
+/* ==== 환영 화면 및 상태 메시지 ==== */
+/* 환영 화면 - 채팅방이 선택되지 않았을 때 표시 */
+.chat-welcome {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ background-color: #f8f9fa;
+}
+/* 환영 화면 내용 */
+.welcome-content {
+ text-align: center;
+ color: #666;
+ max-width: 400px;
+ padding: 32px;
+}
+/* 환영 화면 제목 */
+.welcome-content h2 {
+ margin-bottom: 16px;
+ color: #333;
+ font-size: 24px;
+}
+/* 환영 화면 설명 텍스트 */
+.welcome-content p {
+ margin: 8px 0;
+ font-size: 14px;
+ line-height: 1.5;
+}
+
+/* 기능 안내 박스 */
+.feature-info {
+ margin-top: 24px;
+ padding: 16px;
+ background-color: #ffffff;
+ border-radius: 8px;
+ border: 1px solid #e0e0e0;
+}
+
+/* 기능 안내 텍스트 */
+.feature-info p {
+ margin: 6px 0;
+ font-size: 13px;
+ color: #555;
+}
+
+/* ==== 채팅방 영역 ==== */
+
+/* 채팅방 컨테이너 - 헤더, 메시지, 입력 영역으로 구성 */
+.chat-room {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+/* 채팅방 헤더 - 상대방 정보와 채팅 종료 버튼 */
+.chat-room-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 20px;
+ border-bottom: 1px solid #e0e0e0;
+ background-color: #f8f9fa;
+}
+
+/* 채팅방 정보 컨테이너 */
+.chat-room-info {
+ display: block;
+}
+/* 채팅방 정보 제목 - 상대방 닉네임 표시 */
+.chat-room-info h3 {
+ margin: 0;
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+}
+/* 채팅방 액션 버튼들 컨테이너 */
+.chat-room-actions {
+ display: flex;
+ gap: 8px;
+}
+/* 채팅 종료 버튼 */
+.exit-chat-btn {
+ padding: 8px 16px;
+ background-color: #dc3545;
+ color: #ffffff;
+ border: none;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ opacity: 0.8px;
+ transition: all 0.2s ease;
+}
+.exit-chat-btn:hover {
+ opacity: 1;
+}
+
+/* ==== 채팅방 메시지 영역 ==== */
+
+/* 메시지 컨테이너 - 스크롤 가능한 메시지 목록 */
+.chat-room-message {
+ flex: 1;
+ overflow-y: auto;
+ padding: 16px;
+}
+
+/* 메시지가 없을 때 표시 */
+.no-message {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: #666;
+ text-align: center;
+}
+.no-message p {
+ margin: 8px 0;
+ font-size: 14px;
+}
+
+/* 메시지 그룹 - 같은 날짜의 메시지들은 묶음 */
+.message-group {
+ margin-bottom: 24px;
+}
+
+/* 날짜 구분선 - 메시지 그룹 사이에 날짜 표시 */
+.date-divider {
+ text-align: center;
+ margin: 16px 0;
+ position: relative;
+}
+/* 날짜 내용 앞쪽과 뒤쪽에 라인 배치*/
+.date-divider::before {
+ content: '';
+ position: absolute;
+ display: block;
+ top: 50%;
+ left: 0;
+ width: 50%;
+ height: 1px;
+ background-color: #e0e0e0;
+ z-index: 1;
+}
+.date-divider::after {
+ content: '';
+ position: absolute;
+ display: block;
+ top: 50%;
+ right: 0;
+ width: 50%;
+ height: 1px;
+ background-color: #e0e0e0;
+ z-index: 1;
+}
+.date-divider span {
+ background-color: #fff;
+ padding: 4px 12px;
+ border-radius: 12px;
+ font-size: 12px;
+ color: #666;
+ border: 1px solid #e0e0e0;
+ position: relative;
+ z-index: 2;
+}
+
+/* 메시지들 묶음 컨테이너 */
+.message-group-container {
+ position: relative;
+ width: 100%;
+ padding: 0 20px;
+}
+
+/* ==== 개별 메시지 스타일 ==== */
+
+/* 메시지 아이템 기본 레이아웃 */
+.message-item {
+ display: flex;
+ margin-bottom: 12px;
+ gap: 8px;
+}
+
+/* 메시지 말풍선 컨테이너 */
+.message-bubble {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+}
+
+/* 메시지 호버시 시간 표시 - 불투명하게 */
+.message-bubble:hover .message-time {
+ opacity: 1;
+}
+
+/* 메시지 텍스트 - 말풍선 스타일 */
+.message-text {
+ padding: 8px 12px;
+ border-radius: 18px;
+ font-size: 14px;
+ line-height: 1.4;
+ word-wrap: break-word;
+ position: relative;
+}
+/* 메시지 시간 - 기본적을 반투명 */
+.message-time {
+ font-size: 14px;
+ color: #999;
+ margin-top: 4px;
+ opacity: 0.7;
+}
+
+/* 나의 메시지 (오른쪽 정렬) - 파란색 말풍선 */
+.message-item.my-message {
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ max-width: 100%;
+ gap: 8px;
+}
+
+/* 나의 메시지 말풍선 - 파란색 배경 */
+.my-message .message-text {
+ background-color: #007bff;
+ color: #ffffff;
+ border-bottom-right-radius: 4px;
+}
+
+/* 나의 메시지 시간 - 왼쪽 정렬 */
+.my-message .message-time {
+ text-align: right;
+}
+
+/* 상대 방의 메시지 (왼쪽 정렬) - 회색 말풍선 */
+.message-item.other-message {
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-end;
+ margin-right: auto;
+ max-width: 100%;
+ gap: 8px;
+}
+
+/* 상대방의 메시지 말풍선 - 회색 배경 */
+.other-message .message-text {
+ background-color: #f1f3f4;
+ color: #333;
+ border-bottom-left-radius: 4px;
+}
+/* 나의 메시지 시간 - 왼쪽 정렬 */
+.other-message .message-time {
+ text-align: left;
+}
+
+/* 채팅룸의 아바타 */
+.message-avatar {
+ /* flex 에서 내용이 너비 보다 큰 경우 줄여주는 비율 */
+ flex-shrink: 0;
+ margin: 0 4px;
+}
+/* 메시지 아바타 이미지 - 작은 원형 */
+.message-avatar img {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ object-fit: cover;
+}
+/* 아바타 닉네임을 별도 설정 가능하도록 */
+.message-avatar .avatar-placeholder {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ font-size: 12px;
+ color: #ffffff;
+}
+
+/* ==== 메시지 입력 영역 ==== */
+
+/* 메시지 입력 컨테이너 - 하단 고정 */
+.message-input {
+ border-top: 1px solid #e0e0e0;
+ background-color: #ffffff;
+ padding: 16px;
+}
+/* 메시지 입력 폼 */
+.message-form {
+ width: 100%;
+}
+
+/* 입력 컨테이너 - 텍스트, 전송 버튼 */
+.input-container {
+ display: flex;
+ gap: 8px;
+}
+
+/* 메시지 입력 텍스트 영역 - 자동 높이 조절 */
+.message-textarea {
+ flex: 1;
+ min-height: 40px;
+ max-height: 120px;
+ border: 1px solid #ddd;
+ border-radius: 20px;
+ /* 너비, 높이 제어함 */
+ resize: none;
+ font-size: 14px;
+ line-height: 1.4;
+}
+
+/* 텍스트 영역 포커스 시 파란색 테두리 */
+.message-textarea:focus {
+ outline: none;
+ border-color: #007bff;
+}
+
+/* 전송 버튼 - 원형 버튼 */
+.send-button {
+ width: 40px;
+ height: 40px;
+ border: none;
+ border-radius: 50%;
+ background-color: #007bff;
+ color: #ffffff;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+}
+/* 전송 버튼 호버 효과 - 비활성화 아니라면 */
+.send-button:hover:not(:disabled) {
+ background-color: #0056b3;
+}
+/* 전송 버튼 비활성화 상태 */
+.send-button:disabled {
+ background-color: #cccccc;
+ cursor: not-allowed;
+}
+
+/* 로딩 스피너 - 전송 중 표시 */
+.loading-spinner {
+ width: 16px;
+ height: 16px;
+ border: 2px solid #ffffff;
+ border-top: 2px solid transparent;
+ border-radius: 50%;
+
+ animation: spin 1s linear infinite;
+}
+/* 스피너 회전 애니메이션 */
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+/* 에러 메시지 표시 */
+.error-message {
+ padding: 16px;
+ text-align: center;
+ color: #dc3545;
+}
+/* 에러 메시지 재시도 버튼 */
+.error-message button {
+ margin-top: 8px;
+ padding: 8px 16px;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
diff --git a/src/components/chat/chat/MessageInput.tsx b/src/components/chat/chat/MessageInput.tsx
new file mode 100644
index 0000000..78ee6b6
--- /dev/null
+++ b/src/components/chat/chat/MessageInput.tsx
@@ -0,0 +1,132 @@
+/**
+ * 1:1 채팅에서 메시지를 입력하고 전송하는 컴포넌트
+ * - 자동 높이 조절되는 텍스트 영역
+ * - Enter 키로 메시지 전송, Shift + Enter 로 줄바꿈
+ * - 전송 중 로딩 상태 표시
+ * - 빈 메시지 전송 방지
+ * - 전송 후 입력 필드 자동 초기화
+ */
+
+import { useRef, useState } from 'react';
+import { useDirectChat } from '../../../contexts/DirectChatContext';
+
+interface MessageInputProps {
+ chatId: string;
+}
+
+const MessageInput = ({ chatId }: MessageInputProps) => {
+ // DirectChatContext 에서 메세지 전송 함수 가져오기
+ const { sendMessage } = useDirectChat();
+ // 메세지 입력 상태관리
+ const [message, setMessage] = useState(''); // 현재 입력 중인 메세지 내용
+ const [sending, setSending] = useState(false); // 메세지 전송 중 상태
+
+ // textarea 영역 DOM 참조 (자동 높이 조절 활용)
+ const textareaRef = useRef+ User :{' '} + {user ? ( + + {user.name}님의 나이는 {user.age}살 입니다. + + ) : ( + '사용자 정보가 없습니다.' + )} +
+
+
+
+
+
+
+ );
+};
+
+export default MessageInput;
diff --git a/src/components/chat/common/MessageInput.tsx b/src/components/chat/common/MessageInput.tsx
new file mode 100644
index 0000000..36b22c9
--- /dev/null
+++ b/src/components/chat/common/MessageInput.tsx
@@ -0,0 +1,136 @@
+/**
+ * 1:1 채팅에서 메시지를 입력하고 전송하는 컴포넌트
+ * - 자동 높이 조절되는 텍스트 영역
+ * - Enter 키로 메시지 전송, Shift + Enter 로 줄바꿈
+ * - 전송 중 로딩 상태 표시
+ * - 빈 메시지 전송 방지
+ * - 전송 후 입력 필드 자동 초기화
+ */
+
+import { useRef, useState } from 'react';
+import { useDirectChat } from '../../../contexts/DirectChatContext';
+
+interface MessageInputProps {
+ chatId: string;
+}
+
+const MessageInput = ({ chatId }: MessageInputProps) => {
+ // DirectChatContext 에서 메시지 전송 함수 가져오기
+ const { sendMessage } = useDirectChat();
+
+ // 메시지 입력 상태 관리
+ const [message, setMessage] = useState(''); // 현재 입력 중인 메시지 내용
+ const [sending, setSending] = useState(false); // 메시지 전송 중 상태
+
+ // textarea 영역 DOM 참조 (자동 높이 조절 활용)
+ const textareaRef = useRef
+
+
+ );
+};
+
+export default MessageInput;
diff --git a/src/components/chat/direct/DirectChatList.tsx b/src/components/chat/direct/DirectChatList.tsx
new file mode 100644
index 0000000..fcd64d2
--- /dev/null
+++ b/src/components/chat/direct/DirectChatList.tsx
@@ -0,0 +1,239 @@
+/**
+ * - 채팅 네비게이션 : 사용자가 참여 중인 채팅방 목록 제공
+ * - 상태 표시 : 읽지 않은 메시지와 최신 활동 표시
+ * - 새 채팅 시작 : 사용자 검색을 통한 새 채팅방 생성
+ */
+
+import { useEffect, useState } from 'react';
+import { useDirectChat } from '../../../contexts/DirectChatContext';
+import type { ChatUser } from '../../../types/ChatType';
+import { supabase } from '../../../lib/supabase';
+
+// Props 정의
+interface DirectChatListProps {
+ onChatSelect: (chatId: string) => void; // 채팅방 선택 시 호출되는 콜백 함수
+ onCreateChat: () => void; // 새 채팅방 생성시 호출되는 콜백 함수
+ selectedChatId?: string; // 현재 선택된 채팅방의 ID
+}
+
+const DirectChatList = ({ onChatSelect, onCreateChat, selectedChatId }: DirectChatListProps) => {
+ // Context 활용
+ const { loadChats, createDirectChat, error, users, searchUsers, loading, chats } =
+ useDirectChat();
+
+ // 사용자 검색 상태 관리
+ const [searchTerm, setSearchTerm] = useState
+
+ );
+ }
+
+ return (
+
+
+ 오류 : {error}
+ +
+ {/* 채팅 목록 헤더 - 제목과 새 채팅 버튼 */}
+
+ );
+};
+
+export default DirectChatList;
diff --git a/src/components/chat/direct/DirectChatRoom.tsx b/src/components/chat/direct/DirectChatRoom.tsx
new file mode 100644
index 0000000..17b8d90
--- /dev/null
+++ b/src/components/chat/direct/DirectChatRoom.tsx
@@ -0,0 +1,465 @@
+import { useEffect, useRef, useState } from 'react';
+import { useDirectChat } from '../../../contexts/DirectChatContext';
+import type { DirectMessage, MessageDetail } from '../../../types/ChatType';
+import MessageInput from '../common/MessageInput';
+import { supabase } from '../../../lib/supabase';
+
+// 날짜별 메시지 그룹 타입 정의 - 같은 날짜의 메시들을 그룹핑
+// 원본데이터를 가공하고 마무리 별도의 파일에 type 으로 정의안함.
+interface MessageGroup {
+ [date: string]: DirectMessage[]; // 날짜 문자열을 키로 하고 해당 날짜의 메시지 배열을 값으로 담음.
+}
+
+// DirectChatRoom 컴포넌트이 Props 타입 정의
+interface DirectChatRoomProps {
+ chatId: string;
+}
+
+const DirectChatRoom = ({ chatId }: DirectChatRoomProps) => {
+ // DirectChatContext 에서 필요한 상태와 함수를 가져오기
+ const { messages, loading, error, loadMessages, currentChat, exitDirectChat, getUserProfile } =
+ useDirectChat();
+
+ // 메시지가 개수가 많으면 하단으로 스크롤을 해야 함.
+ // 새메시지가 추가될 때 마다 최신 메시지를 볼 수 있도록 해야 함.
+ const messageEndRef = useRef
+
+
+ {/* 사용자 검색 UI - 새 채팅 버튼 클릭 시 표시 */}
+ {showUserSearch && (
+ 1 : 1 채팅
+ {/* 사용자가 새채팅 생성시 showUserSearch 를 true 로 변경 */} + +
+ {/* 사용자 검색 필드 */}
+ setSearchTerm(e.target.value)} // 사용자 검색어 변경 진행
+ placeholder="사용자 검색..."
+ className="search-input"
+ />
+
+ {/* 검색 결과 목록 */}
+
+ )}
+
+ {/* 채팅 목록 컨테이너 */}
+
+ {/* 검색된 사용자 출력 */}
+ {users.map(user => (
+ // 사용자 중 대화상대를 선택할 수 있음. : handleUserSelect
+
+
+ {/* 검색 결과가 없을 때 표시 */}
+ {/* 사용자 검색어는 있는데 사용자 목록이 없다면 */}
+ {searchTerm && users.length === 0 && (
+ handleUserSelect(user)}>
+ {/* 사용자 아바타 */}
+
+ ))}
+
+ {user.avatar_url ? (
+ // 사용자 아바타 이미지 출력
+ 
+ ) : (
+ // 사용자 아바타 닉네임 출력 : 첫 글자만 보여줌
+
+ {/* 사용자 정보 */}
+ {user.nickname.charAt(0)}
+ )}
+
+
+ {user.nickname}
+ 검색 결과가 없습니다.
+ )}
+
+ {loading ? (
+ // 로딩표시
+
+ 로딩 중...
+ ) : chats.length === 0 ? (
+ // 채팅방이 없을 때 안내 메시지
+
+
+ ) : (
+ // 채팅 목록 렌더링
+ chats.map(chat => (
+ // 개별 채팅 아이템
+ 아직 채팅방이 없습니다.
+새 채팅 버튼을 눌러 대화를 시작하세요!
+ onChatSelect(chat.id)}
+ >
+ {/* 채팅 상대방 아바타 */}
+
+ ))
+ )}
+
+ {chat.other_user.avatar_url ? (
+ // 상대방 아바타 이미지 있는 경우
+ 
+ ) : (
+ // 상대방 아바타 이미지 없는 경운
+
+ {/* 채팅 정보 */}
+ {chat.other_user.nickname.charAt(0)}
+ )}
+ {/* 읽지 않은 메시지 개수 배지 */}
+ {chat.unread_count > 0 && {chat.unread_count}
}
+
+ {/* 채팅 헤더 - 이름과 시간 */}
+
+
+
+ {/* 마지막 메시지 미리보기 */}
+ {chat.other_user.nickname}
+
+ {chat.last_message ? formatTime(chat.last_message.created_at) : ''}
+
+
+ {chat.last_message ? (
+ 0 ? 'unread' : ''}>
+ {/* 마지막 채팅 작성자 닉네임 : 마지막 채팅 메세지 내용을 출력합니다. */}
+ {chat.last_message.sender_nickname} : {chat.last_message.content}
+
+ ) : (
+ 메시지가 없습니다.
+ )}
+
+
+
+ );
+ }
+
+ // 로딩 상태일 떄 로딩 메세지 표현
+ if (loading) {
+ return (
+
+
+ 오류 : {error}
+ +
+
+ );
+ }
+
+ // 메시지들을 날짜별로 그룹화 (리랜더링 자동으로 됨)
+ const messageGroups = groupMessagesByDate(messages);
+
+ return (
+ 메시지를 불러오는 중...
+
+ {/* 채팅방 헤더 - 제목과 나가기 */}
+
+ );
+};
+
+export default DirectChatRoom;
diff --git a/src/components/chat/direct/DrirectChatList.tsx b/src/components/chat/direct/DrirectChatList.tsx
new file mode 100644
index 0000000..bfc2ea6
--- /dev/null
+++ b/src/components/chat/direct/DrirectChatList.tsx
@@ -0,0 +1,241 @@
+/**
+ * 채팅 네비게이션 : 사용자가 참여 중인 채팅방 목록 제공
+ * - 상태 표시 : 읽지 않은 메세지와 최신 활동 표시
+ * - 새 채팅 시작 : 사용자 검색을 통한 새 채팅방 생성
+ * -
+ */
+
+import { useEffect, useState } from 'react';
+import { useDirectChat } from '../../../contexts/DirectChatContext';
+import type { ChatUser } from '../../../types/ChatType';
+import { supabase } from '../../../lib/supabase';
+
+// props 정의
+interface DirectChatListProps {
+ onChatSelect: (chatId: string) => void; // 채팅 방 선택 시 호출되는 콜백 함수
+ onCreateChat: () => void; // 새 채팅방 생성 시 호출되는 콜백 함수
+ selectedChatId?: string; // 현재 선택된 채팅방의 ID
+}
+
+const DrirectChatList = ({ onChatSelect, onCreateChat, selectedChatId }: DirectChatListProps) => {
+ // context 활용
+ const { loadChats, createDirectChat, error, users, searchUsers, loading, chats } =
+ useDirectChat();
+
+ // 사용자 검색 상태 관리
+ const [searchTerm, setSearchTerm] = useState
+ {/* 채팅방 정보 */}
+
+
+ {/* 메시지 목록 영역 */}
+
+
+ {/* 채팅방 액션 버튼들 */}
+ 1:1 채팅 ({currentChat?.other_user.nickname || '로딩 중...'})
+
+ {/* 채팅 나가기 버튼 */}
+
+
+
+ {Object.keys(messageGroups).length === 0 ? (
+ // 메시지가 없을 때 안내 메시지
+
+
+ {/* 메시지 입력 컴포넌트 */}
+
+
+ ) : (
+ // 날짜 별로 그룹화된 메시지 목록 렌더링
+ Object.entries(messageGroups).map(([date, dateMessages]: [string, DirectMessage[]]) => (
+ 아직 메시지가 없습니다.
+첫 번째 메시지를 보내세요!
+
+ {/* 날짜 구분선 */}
+
+ ))
+ )}
+ {/* 자동 스크롤을 위한 참조 */}
+
+
+ {/* 날짜 출력 */}
+ {formatDate(dateMessages[0].created_at)}
+
+
+ {/* 메시지들 묶음 컨테이너 */}
+
+ {dateMessages.map((message: DirectMessage) => {
+ const isMyMessage = message.sender_id === currentUserId;
+ const isSystemMessage =
+ message.is_system_message ||
+ (message.content && message.content.includes('님이 채팅방을 나갔습니다'));
+
+ // 모든 메시지에 대한 디버깅 로그
+ console.log('메시지 렌더링:', {
+ messageId: message.id,
+ content: message.content,
+ isSystemMessage: message.is_system_message,
+ detectedSystemMessage: isSystemMessage,
+ senderId: message.sender_id,
+ currentUserId: currentUserId,
+ });
+
+ // 시스템 메시지인 경우 별도 처리
+ if (isSystemMessage) {
+ console.log('시스템 메시지 렌더링:', {
+ messageId: message.id,
+ content: message.content,
+ isSystemMessage: message.is_system_message,
+ });
+ return (
+
+
+
+ );
+ }
+
+ return (
+ {message.content}
+
+ {isMyMessage ? (
+ <>
+ {/* 나의 메시지 - 오른쪽 정렬 */}
+ {/* 내 메시지 : 말풍선, 시간, 아바타 (오른쪽 정렬) */}
+
+ );
+ })}
+
+
+ {message.content}
+ {formatTime(message.created_at)}
+
+ {(() => {
+ // 디버깅용 로그 (필요시에만 활성화)
+ // console.log('나의 메시지 아바타 렌더링:', {
+ // sender: message.sender,
+ // avatar_url: message.sender?.avatar_url,
+ // nickname: message.sender?.nickname,
+ // sender_id: message.sender_id,
+ // isMyMessage: isMyMessage,
+ // });
+
+ return message.sender?.avatar_url ? (
+ <>
+ {/* 나의 아바타 이미지가 있는 경우 */}
+ 
{
+ console.log(
+ '나의 아바타 이미지 로드 실패:',
+ message.sender.avatar_url,
+ );
+ console.log('나의 이미지 로드 실패 상세:', {
+ src: e.currentTarget.src,
+ naturalWidth: e.currentTarget.naturalWidth,
+ naturalHeight: e.currentTarget.naturalHeight,
+ complete: e.currentTarget.complete,
+ });
+ e.currentTarget.style.display = 'none';
+ e.currentTarget.nextElementSibling?.classList.remove(
+ 'hidden',
+ );
+ }}
+ onLoad={() => {
+ console.log(
+ '나의 아바타 이미지 로드 성공:',
+ message.sender.avatar_url,
+ );
+ }}
+ />
+
+
+ ) : (
+ <>
+ {/* 대상의 메시지 - 왼쪽 정렬 */}
+
+ {message.sender?.nickname.charAt(0)}
+
+
+ ) : (
+ <>
+ {/* 나의 아바타 이미지가 없는 경우 - 첫글자만 */}
+
+ {message.sender?.nickname.charAt(0)}
+
+
+ );
+ })()}
+
+ {(() => {
+ // 디버깅용 로그 (필요시에만 활성화)
+ // console.log('메시지 아바타 렌더링:', {
+ // sender: message.sender,
+ // avatar_url: message.sender?.avatar_url,
+ // nickname: message.sender?.nickname,
+ // sender_id: message.sender_id,
+ // isMyMessage: isMyMessage,
+ // });
+
+ return message.sender?.avatar_url ? (
+ <>
+ {/* 대화상대 아바타 이미지가 있는 경우 */}
+ {
+ console.log(
+ '아바타 이미지 로드 실패:',
+ message.sender.avatar_url,
+ );
+ console.log('이미지 로드 실패 상세:', {
+ src: e.currentTarget.src,
+ naturalWidth: e.currentTarget.naturalWidth,
+ naturalHeight: e.currentTarget.naturalHeight,
+ complete: e.currentTarget.complete,
+ });
+ e.currentTarget.style.display = 'none';
+ e.currentTarget.nextElementSibling?.classList.remove(
+ 'hidden',
+ );
+ }}
+ onLoad={() => {
+ console.log(
+ '아바타 이미지 로드 성공:',
+ message.sender.avatar_url,
+ );
+ }}
+ />
+
+ {/* 대화상대 메시지 : 말풍선, 시간, 아바타 (왼쪽 정렬) */}
+
+ {message.sender?.nickname.charAt(0)}
+
+
+ ) : (
+ <>
+ {/* 대화상대 아바타 이미지가 없는 경우 - 첫글자만*/}
+
+ {message.sender?.nickname.charAt(0)}
+
+
+ );
+ })()}
+
+
+
+ )}
+ {message.content}
+ {formatTime(message.created_at)}
+
+
+ );
+ }
+
+ return (
+
+
+ 오류 : {error}
+ +
+ {/* 채팅 목록 헤더 -제목과 새 채팅 버튼 */}
+
+ );
+};
+
+export default DrirectChatList;
diff --git a/src/components/shop/Cart.tsx b/src/components/shop/Cart.tsx
new file mode 100644
index 0000000..6a1f414
--- /dev/null
+++ b/src/components/shop/Cart.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { useShop, useShopSelectors } from '../../features/shop';
+
+const Cart = () => {
+ // ts 자리
+ const { balance, addCart, cart, removeCartOne, resetCart, clearCart, buyAll } = useShop();
+ const { getGood, total } = useShopSelectors();
+
+ const box: React.CSSProperties = {
+ border: '2px solid #eee',
+ borderRadius: 12,
+ padding: 16,
+ marginBottom: 16,
+ background: '#fff',
+ };
+ const boxrow: React.CSSProperties = {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ padding: '8px 0',
+ borderBottom: '1px dashed #eee',
+ };
+ // tsx 자리
+ return (
+
+
+ {/* 사용자 검색 UI - 새 채팅 버튼 클릭 시 표시 */}
+ {showUserSearch && (
+ 1 : 1 채팅
+ {/* 사용자가 새로운 채팅을 생성시 showUserSearch 를 true 로 변경 */} + +
+ {/* 사용자 검색 필드 */}
+ setSearchTerm(e.target.value)}
+ placeholder="사용자 검색..."
+ className="search-input"
+ />
+ {/* 검색 결과 목록 */}
+
+ )}
+
+ {/* 채팅 목록 컨테이너 */}
+
+ {/* 검색된 사용자 출력 */}
+ {users.map(user => (
+ // 대화 상대 선택
+
+ {/* 검색 결과가 없을 때 표시 */}
+ {/* 사용자 검색어는 있는데 사용자 목록이 없다면 */}
+ {searchTerm && users.length === 0 && (
+ handleUserSelect(user)}>
+ {/* 사용자 아바타 */}
+
+ ))}
+
+ {user.avatar_url ? (
+ // 사용자 아바타 이미지 출력
+
+ ) : (
+ // 사용자 아바타 닉네임 출력 (이미지가 없을 경우 - 닉네임의 첫 글자만 보여줌)
+
+ {/* 사용자 정보 */}
+ {user.nickname.charAt(0)}
+ )}
+
+
+ {user.nickname}
+ 검색 결과가 없습니다.
+ )}
+
+ {loading ? (
+ // 로딩 표시
+
+ 로딩 중...
+ ) : chats.length === 0 ? (
+ // 채팅방이 없을 때 안내 메세지
+
+
+ ) : (
+ // 채팅 목록 렌더링
+ chats.map(chat => (
+ // 개별 채팅 아이템
+ 아직 채팅방이 개설되지 않았습니다.
+새 채팅 버튼을 눌러 대화를 시작하세요!
+ onChatSelect(chat.id)}
+ >
+ {/* 채팅 상대방 아바타 */}
+
+ ))
+ )}
+
+ {chat.other_user.avatar_url ? (
+ // 상대방 아바타 이미지가 있는 경우
+
+ ) : (
+ // 상대방 아바타 이미지가 없는 경우
+
+
+ {/* 채팅 정보 */}
+ {chat.other_user.nickname.charAt(0)}
+ )}
+
+ {/* 읽지 않은 메세지 개수 뱃지 */}
+ {chat.unread_count > 0 && {chat.unread_count}
}
+
+ {/* 채팅 헤더 - 이름과 시간 출력 */}
+
+
+
+
+ {/* 마지막 메세지 미리보기 */}
+ {chat.other_user.nickname}
+
+ {chat.last_message ? formatTime(chat.last_message.created_at) : ''}
+
+
+ {chat.last_message ? (
+ 0 ? 'unread' : ''}>
+ {/* 마지막 채팅 작성자 닉네임 : 마지막 채팅 메세지 내용을 출력합니다. */}
+ {chat.last_message.sender_nickname} : {chat.last_message.content}
+
+ ) : (
+ 메세지가 없습니다.
+ )}
+
+
+
+
+ );
+};
+
+export default Cart;
diff --git a/src/components/shop/GoodList.tsx b/src/components/shop/GoodList.tsx
new file mode 100644
index 0000000..7eaef42
--- /dev/null
+++ b/src/components/shop/GoodList.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useShop } from '../../features/shop';
+
+const GoodList = () => {
+ // ts 자리
+ const { goods, addCart } = useShop();
+
+ const box: React.CSSProperties = {
+ border: '2px solid #eee',
+ borderRadius: 12,
+ padding: 16,
+ marginBottom: 20,
+ background: '#fff',
+ };
+ const boxrow: React.CSSProperties = {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ padding: '8px 0',
+ borderBottom: '1px solid #eee',
+ };
+ // tsx 자리
+ return (
+ 🚚 장바구니
+ {cart.length === 0 ? ( +장바구니가 비었습니다.
+ ) : ( +-
+ {cart.map(item => {
+ // 제품 찾기
+ const good = getGood(item.id);
+
+ // tsx 출력
+ return (
+
-
+ + {good?.name} x {item.qty} +++ {good?.price.toLocaleString()} x {item.qty} ={' '} + {(good!.price * item.qty).toLocaleString()} 원 +++ + + ++
+ );
+ })}
+
+
+ 총액 :
+ {total.toLocaleString()} 원
+
+
+
+
+
+
+
+ );
+};
+
+export default GoodList;
diff --git a/src/components/shop/ShopContext.tsx b/src/components/shop/ShopContext.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/shop/Wallet.tsx b/src/components/shop/Wallet.tsx
new file mode 100644
index 0000000..4703819
--- /dev/null
+++ b/src/components/shop/Wallet.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { useShop } from '../../features/shop';
+export const Wallet = () => {
+ // ts 자리
+ const { balance } = useShop();
+ const box: React.CSSProperties = {
+ border: '2px solid #eee',
+ borderRadius: 12,
+ padding: 16,
+ marginBottom: 16,
+ background: '#fff',
+ };
+ // tsx 자리
+ return (
+ 🎉 GoodList
+-
+ {goods.map(item => (
+
- + + {item.name} {item.price.toLocaleString()} 원 + + + + ))} +
+
+ );
+};
diff --git a/src/components/todos/TodoItem.tsx b/src/components/todos/TodoItem.tsx
new file mode 100644
index 0000000..458a706
--- /dev/null
+++ b/src/components/todos/TodoItem.tsx
@@ -0,0 +1,194 @@
+import { useState } from 'react';
+import { useTodos } from '../../contexts/TodoContext';
+import type { Todo } from '../../types/TodoType';
+import {
+ updateTodo as updateTodoService,
+ toggleTodo as toggleTodoService,
+ deleteTodo as deleteTodoService,
+} from '../../services/todoService';
+
+type TodoItemProps = {
+ todo: Todo;
+ index: number;
+};
+
+const TodoItem = ({ todo, index }: TodoItemProps): JSX.Element => {
+ const { toggleTodo, editTodo, deleteTodo, currentPage, itemsPerPage, totalCount } = useTodos();
+
+ // 순서번호 매기기
+ const globalIndex = totalCount - ((currentPage - 1) * itemsPerPage + index);
+
+ // 작성 날짜 포맷팅
+ const formatDate = (dateString: string | null): string => {
+ if (!dateString) return '날짜 없음';
+ const date = new Date(dateString);
+ return date.toLocaleDateString('ko-KR', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ });
+ };
+
+ // 수정중인지
+ const [isEdit, setIsEdit] = useState🎁 내 지갑
+
+ {balance.toLocaleString()}원
+
+ 장바구니에 담긴 제품을 구매하면 여기서 빠져요!
+
+ handleChangeTitle(e)}
+ onKeyDown={e => handleKeyDown(e)}
+ className="form-input"
+ style={{ fontSize: '14px', padding: 'var(--space-2)', width: '100%' }}
+ />
+ 작성일: {formatDate(todo.created_at)}
+
+
+
+
+
+
+
+ ) : (
+ <>
+
+
+
+ {todo.title}
+ 작성일: {formatDate(todo.created_at)}
+
+
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default TodoList;
diff --git a/src/components/todos/TodoWrite.tsx b/src/components/todos/TodoWrite.tsx
new file mode 100644
index 0000000..56c3a47
--- /dev/null
+++ b/src/components/todos/TodoWrite.tsx
@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import type { Todo, TodoInsert } from '../../types/TodoType';
+import { useTodos } from '../../contexts/TodoContext';
+import { createTodo } from '../../services/todoService';
+
+type TodoWriteProps = {
+ children?: React.ReactNode;
+ handleChangePage: (page: number) => void;
+};
+const TodoWrite = ({ handleChangePage }: TodoWriteProps): JSX.Element => {
+ // Context 를 사용함.
+ const { addTodo } = useTodos();
+ const [title, setTitle] = useState📋 할 일 목록
+-
+ {todos.map((item: Todo, index: number) => (
+
+
+ );
+};
+
+export default TodoWrite;
diff --git a/src/components/todos/TodoWriteBox.tsx b/src/components/todos/TodoWriteBox.tsx
new file mode 100644
index 0000000..bc8e974
--- /dev/null
+++ b/src/components/todos/TodoWriteBox.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import type { Profile } from '../../types/TodoType';
+
+interface TodoWriteBoxProps {
+ profile: Profile | null;
+}
+const TodoWriteBox = ({ profile }: TodoWriteBoxProps) => {
+ return (
+ ✏️ 할일 작성
+
+ handleChange(e)}
+ onKeyDown={e => handleKeyDown(e)}
+ className="form-input"
+ style={{ flex: 1 }}
+ placeholder="새로운 할일을 추가해주세요."
+ />
+
+
+
+
+ );
+};
+
+export default TodoWriteBox;
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
new file mode 100644
index 0000000..bf1fed8
--- /dev/null
+++ b/src/contexts/AuthContext.tsx
@@ -0,0 +1,369 @@
+/**
+ * 주요기능
+ * - 사용자 세션관리
+ * - 로그인/회원가입/로그아웃
+ * - 사용자 인증 정보 상태 변경 감시
+ * - 전역 인증 상태를 컴포넌트에 반영
+ */
+
+import type { Session, User } from '@supabase/supabase-js';
+import { createContext, useContext, useEffect, useState, type PropsWithChildren } from 'react';
+import { supabase } from '../lib/supabase';
+import type { DeleteRequestInsert } from '../types/TodoType';
+
+// 1. 인증 컨텍스트 타입
+type AuthContextType = {
+ // 현재 사용자의 세션정보 (로그인 상태, 토큰)
+ session: Session | null;
+ // 현재 로그인 된 사용자 정보
+ user: User | null;
+ // 회원 가입 함수(이메일, 비밀번호) : 비동기라서
+ signUp: (email: string, password: string) => Promise<{ error?: string }>;
+ // 회원 로그인 함수(이메일, 비밀번호) : 비동기라서
+ signIn: (email: string, password: string) => Promise<{ error?: string }>;
+ // 이메일 중복 확인 함수
+ checkEmailExists: (email: string) => Promise<{ exists: boolean; error?: string }>;
+ // 닉네임 중복 확인 함수
+ checkNicknameExists: (nickname: string) => Promise<{ exists: boolean; error?: string }>;
+ // 카카오 로그인 함수
+ signInWithKakao: () => Promise<{ error?: string }>;
+ // 구글 로그인 함수
+ signInWithGoogle: () => Promise<{ error?: string }>;
+ // 카카오 계정 연동 해제 함수
+ unlinkKakaoAccount: () => Promise<{ error?: string; success?: boolean; message?: string }>;
+ // 구글 계정 연동 해제 함수
+ unlinkGoogleAccount: () => Promise<{ error?: string; success?: boolean; message?: string }>;
+ // 비밀번호 변경 함수
+ changePassword: (
+ newPassword: string,
+ ) => Promise<{ error?: string; success?: boolean; message?: string }>;
+
+ // 회원 로그아웃
+ signOut: () => Promise
+
+ + ✏️ 새 할 일 작성 + {profile?.nickname && ( + + - {profile.nickname} + + )} +
+ + 작성하기 + +{children}
;
+ if (!user) {
+ return {children}
;
+};
+
+export default Protected;
diff --git a/src/contexts/TodoContext.tsx b/src/contexts/TodoContext.tsx
new file mode 100644
index 0000000..ba1c2de
--- /dev/null
+++ b/src/contexts/TodoContext.tsx
@@ -0,0 +1,201 @@
+import React, {
+ createContext,
+ useContext,
+ useEffect,
+ useReducer,
+ type PropsWithChildren,
+} from 'react';
+
+import type { Todo } from '../types/TodoType';
+// 전체 DB 가져오기
+import { getTodos, getTodosPaginated } from '../services/todoService';
+
+// 1. 초기값 형태가 페이지 객체 형태로 추가
+type TodosState = { todos: Todo[]; totalCount: number; totalPages: number; currentPage: number };
+const initialState: TodosState = {
+ todos: [],
+ totalCount: 0,
+ totalPages: 0,
+ currentPage: 1,
+};
+// 2. 리듀서
+// action 은 {type:"문자열", payload: 재료 } 형태
+enum TodoActionType {
+ ADD = 'ADD',
+ DELETE = 'DELETE',
+ TOGGLE = 'TOGGLE',
+ EDIT = 'EDIT',
+ // Supabase todos 의 목록읽기
+ SET_TODOS = 'SET_TODOS',
+}
+
+type AddAction = { type: TodoActionType.ADD; payload: { todo: Todo } };
+type DeleteAction = { type: TodoActionType.DELETE; payload: { id: number } };
+type ToggleAction = { type: TodoActionType.TOGGLE; payload: { id: number } };
+type EditAction = { type: TodoActionType.EDIT; payload: { id: number; title: string } };
+// Supabase 목록으로 state.todos 배열을 채워라.
+type SetTodosAction = {
+ type: TodoActionType.SET_TODOS;
+ payload: { todos: Todo[]; totalCount: number; totalPages: number; currentPage: number };
+};
+
+function reducer(
+ state: TodosState,
+ action: AddAction | DeleteAction | ToggleAction | EditAction | SetTodosAction,
+) {
+ switch (action.type) {
+ case TodoActionType.ADD: {
+ const { todo } = action.payload;
+ return {
+ ...state,
+ todos: [todo, ...state.todos],
+ totalCount: state.totalCount + 1, // 새 항목 추가 시 전체 개수 증가
+ };
+ }
+ case TodoActionType.TOGGLE: {
+ const { id } = action.payload;
+ const arr = state.todos.map(item =>
+ item.id === id ? { ...item, completed: !item.completed } : item,
+ );
+ return { ...state, todos: arr };
+ }
+ case TodoActionType.DELETE: {
+ const { id } = action.payload;
+ const arr = state.todos.filter(item => item.id !== id);
+ return {
+ ...state,
+ todos: arr,
+ totalCount: Math.max(0, state.totalCount - 1), // 항목 삭제 시 전체 개수 감소 (0 이하로는 내려가지 않음)
+ };
+ }
+ case TodoActionType.EDIT: {
+ const { id, title } = action.payload;
+ const arr = state.todos.map(item => (item.id === id ? { ...item, title } : item));
+ return { ...state, todos: arr };
+ }
+ // Supabase 에 목록 읽기
+ case TodoActionType.SET_TODOS: {
+ const { todos, totalCount, totalPages, currentPage } = action.payload;
+ return { ...state, todos, totalCount, totalPages, currentPage };
+ }
+ default:
+ return state;
+ }
+}
+// 3. context 생성
+// 만들어진 Context 가 관리하는 Value 의 모양
+type TodoContextValue = {
+ todos: Todo[];
+ totalCount: number;
+ totalPages: number;
+ currentPage: number;
+ itemsPerPage: number;
+ addTodo: (todo: Todo) => void;
+ toggleTodo: (id: number) => void;
+ deleteTodo: (id: number) => void;
+ editTodo: (id: number, editTitle: string) => void;
+ loadTodos: (page: number, limit: number) => Promise
+
+ );
+ }
+ // 2. 로딩중 이라면
+ if (loading) {
+ return 접근 권한이 없습니다.
+관리자만이 이 페이지에 접근할 수 있습니다.
+
+
+ + 현재 로그인 된 계정 : {user?.email} +
+
+
+ );
+}
+
+export default AdminPage;
diff --git a/src/pages/AuthCallback.tsx b/src/pages/AuthCallback.tsx
new file mode 100644
index 0000000..a57da35
--- /dev/null
+++ b/src/pages/AuthCallback.tsx
@@ -0,0 +1,315 @@
+import React, { useEffect, useState } from 'react';
+import { supabase } from '../lib/supabase';
+import type { ProfileInsert } from '../types/TodoType';
+import { createProfile } from '../lib/profile';
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * - 인증 콜백 URL 처리
+ * - 사용자에게 인증 진행 상태 안내
+ * - 자동 인증 처리 완료 안내
+ */
+function AuthCallback() {
+ const [msg, setMsg] = useState
+
+ {/* 삭제 요청 관리 */}
+ 👨💼 관리자 페이지
+계정 삭제 요청 관리
+
+
+ + 📋 삭제 요청 목록 +
+ + {deleteRequests.length === 0 ? ( +
+
+ ) : (
+ ✅
+ + 대기 중인 삭제 요청이 없습니다. +
+
+ {deleteRequests.map(item => (
+
+ )}
+
+
+ ))}
+
+
+ {/* 상세정보 */}
+ 👤 {item.user_email}
+ 대기 중 +
+
+ {/* 액션들 */}
+
+ 사용자 ID:
+ {item.user_id}
+
+
+ 요청시간:
+
+ {item.requested_at && new Date(item.requested_at).toLocaleString('ko-KR')}
+
+
+
+ 삭제 사유:
+ {item.reason}
+
+
+
+
+
+
+
+ );
+}
+
+export default AuthCallback;
diff --git a/src/pages/Calendar.tsx b/src/pages/Calendar.tsx
new file mode 100644
index 0000000..256bd2b
--- /dev/null
+++ b/src/pages/Calendar.tsx
@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+// full screen 관련
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import listPlugin from '@fullcalendar/list';
+import interactionPlugin from '@fullcalendar/interaction';
+import type { DateSelectArg, EventClickArg } from '@fullcalendar/core/index.js';
+// 한국어
+import koLocale from '@fullcalendar/core/locales/ko';
+// full calendar 에 입력시 들어오는 데이터 모양
+import type { EventInput } from '@fullcalendar/core/index.js';
+
+function Calendar() {
+ const [events, setEvents] = useState
+
+ + 인증 페이지 +
+{msg}
+ {/* 카운트다운 표시 */}
+ {countDown && (
+
+
+ )}
+ + {countDown}초 후 todos 페이지로 이동합니다... +
+
+
+
+
+
+
+
+ );
+}
+
+export default Calendar;
diff --git a/src/pages/CartPage.tsx b/src/pages/CartPage.tsx
new file mode 100644
index 0000000..379afda
--- /dev/null
+++ b/src/pages/CartPage.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Cart from '../components/shop/Cart';
+
+function CartPage() {
+ const box: React.CSSProperties = {
+ padding: 16,
+ border: '1px solid #e5e7eb',
+ borderRadius: 12,
+ background: '#fafafa',
+ marginTop: 12,
+ textAlign: 'center',
+ };
+ return (
+ Full Calendar
+
+ {/* dayGridPlugin : 월 달력 플러그 인, initialView : `월`로 보기 */}
+ {/* interactionPlugin : 클릭 및 드래그 관련 플러그인 */}
+ {/* timeGridPlugin : 시간순 출력 관련 플러그인 */}
+ {/* listPlugin : 목록 출력 관련 플러그인 */}
+ handleClick(e)} // 날짜선택 내용 출력
+ selectable={true} // 날짜를 선택할 수 있게 활성화
+ selectMirror={true}
+ select={e => handleSelect(e)}
+ editable={true} // 드래그로 수정
+ height={'auto'}
+ eventColor="#90ee90" // 기본 이벤트 배경색상
+ eventTextColor="#000" // 기본 글자색상
+ eventBorderColor="#008000" // 기본 테두리색상
+ // JSX 출력하기
+ eventContent={e => {
+ return (
+ <>
+
+
+ 😍 {e.event.title}
+
+
+ );
+ }}
+ />
+
+
+ );
+}
+
+export default CartPage;
diff --git a/src/pages/GoodsPage.tsx b/src/pages/GoodsPage.tsx
new file mode 100644
index 0000000..128cca4
--- /dev/null
+++ b/src/pages/GoodsPage.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import GoodList from '../components/shop/GoodList';
+import Cart from '../components/shop/Cart';
+
+function GoodsPage() {
+ const box: React.CSSProperties = {
+ padding: 16,
+ border: '1px solid #e5e7eb',
+ borderRadius: 12,
+ background: '#fafafa',
+ marginTop: 12,
+ textAlign: 'center',
+ };
+ return (
+ 장바구니
+
+
+
+
+ );
+}
+
+export default GoodsPage;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..9dde888
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,153 @@
+import React from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { Link } from 'react-router-dom';
+
+function HomePage() {
+ const { user } = useAuth();
+
+ return (
+ 😎 판매 제품 리스트
+
+
+
+
+ );
+}
+
+export default HomePage;
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
new file mode 100644
index 0000000..b50972f
--- /dev/null
+++ b/src/pages/NotFound.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function NotFound() {
+ return
+
+ {user ? (
+ 😜 홈
++ {user ? `${user.email}님, 환영합니다.` : 'Todo 서비스에 오신 것을 환영합니다.'} +
+
+
+ ) : (
+ 📒 할일 관리
++ ✒️ 효율적으로 할 일을 관리하고 생산성을 높여보세요. +
+
+
+ 할 일 관리하기
+
+
+ 무한 스크롤로 보기
+
+
+
+
+ )}
+ {/* 기능 소개 섹션 */}
+ 🚀 시작하기
++ ✍️ 계정을 만들고 할 일 관리를 시작해보세요. +
+
+
+ 😘 로그인
+
+
+ 💑 회원가입
+
+
+
+
+ {/* 추가 기능 섹션 */}
+ {user && (
+ 🏷️ 주요 기능
+
+
+
+
+
+ 📃
+ 할 일 관리
++ 할 일을 추가, 수정, 삭제하고 완료 상태를 관리할 수 있습니다. +
+
+
+
+ 💎
+ + 무한 스크롤 +
++ 많은 할 일을 효율적으로 탐색할 수 있는 무한 스크롤 기능을 제공합니다. +
+
+
+ 🥻
+ + 프로필 관리 +
++ 개인 정보와 아바타를 관리하고 계정을 안전하게 관리할 수 있습니다. +
+
+
+ )}
+ 🔍 추가 기능
+
+
+ 🔑 프로필 관리
+
+
+ 📆 캘린더
+
+
+ NotFound
;
+}
+
+export default NotFound;
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
new file mode 100644
index 0000000..f69afa5
--- /dev/null
+++ b/src/pages/ProfilePage.tsx
@@ -0,0 +1,832 @@
+import { useEffect, useRef, useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { getProfile, removeAvatar, updateProfile, uploadAvatar } from '../lib/profile';
+import type { Profile, ProfileUpdate } from '../types/TodoType';
+import Loading from '../components/Loading';
+
+/**
+ * 사용자 프로필 페이지
+ * - 기본 정보 표시
+ * - 정보 수정
+ * - 회원탈퇴 기능 : 확인을 거치고 진행하도록
+ */
+function ProfilePage() {
+ // 회원 기본 정보 (카카오, 구글 회원 탈퇴 추가)
+ const { user, deleteAccount, unlinkKakaoAccount, unlinkGoogleAccount, changePassword } =
+ useAuth();
+ // 데이터 가져오는 동안의 로딩
+ const [loading, setLoading] = useState
+
+ );
+ }
+
+ return (
+ ⚠️ 프로필 오류
+{error}
+
+
+
+ );
+}
+
+export default ProfilePage;
diff --git a/src/pages/SignInPage.tsx b/src/pages/SignInPage.tsx
new file mode 100644
index 0000000..50d88a9
--- /dev/null
+++ b/src/pages/SignInPage.tsx
@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import KakaoLoginButton from '../components/KakaoLoginButton';
+import GoogleLoginButton from '../components/GoogleLoginButton';
+
+function SignInPage() {
+ const navigate = useNavigate();
+ const { signIn } = useAuth();
+ const [email, setEmail] = useState
+
+ {/* 사용자 기본 정보 섹션 */}
+ 👤 회원정보
+개인 정보를 확인하고 수정하세요.
+
+
+ {/* 사용자 추가정보 */}
+ 📧 기본 정보
+ {/* 로그인 방식 표시 */} +
+
+
+
+
+ {user?.app_metadata?.provider === 'kakao' ? (
+ <>
+
+ 카카오 로그인
+
+ ) : user?.app_metadata?.provider === 'google' ? (
+ <>
+
+ 구글 로그인
+
+ ) : (
+ <>
+
+ 이메일 로그인
+
+ )}
+
+
+
+
+
+ {user?.email}
+
+
+
+
+
+ {user?.created_at && new Date(user.created_at).toLocaleString()}
+
+
+
+
+ + 👤 사용자 추가 정보 +
+
+
+
+ {edit ? (
+ <>
+
+ {profileData?.id}
+
+
+
+ setNickName(e.target.value)}
+ className="form-input"
+ placeholder="닉네임을 입력하세요."
+ />
+
+ {/* 이메일 로그인 사용자에게만 비밀번호 변경 섹션 표시 */}
+ {(!user?.app_metadata.provider || user?.app_metadata.provider === 'email') && (
+
+
+
+ )}
+
+ setNewPassword(e.target.value)}
+ placeholder="새 비밀번호(최소 6자)"
+ className="form-input"
+ style={{ flex: 1 }}
+ />
+ setConfirmPassword(e.target.value)}
+ placeholder="비밀번호 확인"
+ className="form-input"
+ style={{ flex: 1 }}
+ />
+
+
+ {/* 비밀번호 변경 메시지 */}
+ {passwordMessage && (
+
+ {passwordMessage}
+
+ )}
+
+
+
+
+ ) : (
+ <>
+
+ {previewImage ? (
+
+
+ 
+
+ ) : imageRemovalRequest ? (
+ + 새로운 이미지 미리보기 +
+
+
+ ) : originalAvatarUrl ? (
+
+
+
+ 이미지 제거됨
+
+ + 이미지가 제거되었습니다 +
+
+ 
+
+ ) : (
+ + 현재 아바타 +
+
+
+ )}
+
+
+
+ 이미지 없음
+
+ + 아바타 이미지를 설정해보세요 +
+
+
+
+
+
+
+
+
+ {previewImage && (
+
+ )}
+
+ {!previewImage && !imageRemovalRequest && originalAvatarUrl && (
+
+ )}
+
+ {imageRemovalRequest && (
+
+ )}
+
+ + 지원 형식 : JPEG, PNG, GIF (최대 5MB) +
+
+
+
+
+
+ {profileData?.nickname || '닉네임이 설정되지 않았습니다'}
+
+
+
+
+
+ )}
+
+
+ {profileData?.avatar_url ? (
+ 
+ ) : (
+
+
+
+ )}
+
+ 이미지 없음
+
+
+
+
+
+ {profileData?.created_at && new Date(profileData.created_at).toLocaleString()}
+
+
+ {edit ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+ {/* 카카오 사용자에게만 연동 해제 버튼 표시 */}
+ {user?.app_metadata?.provider === 'kakao' && (
+
+ )}
+
+ {/* 구글 사용자에게만 연동 해제 버튼 표시 */}
+ {user?.app_metadata?.provider === 'google' && (
+
+ )}
+
+
+
+ )}
+
+
+
+ );
+}
+
+export default SignInPage;
diff --git a/src/pages/SignUpPage.tsx b/src/pages/SignUpPage.tsx
new file mode 100644
index 0000000..27a9770
--- /dev/null
+++ b/src/pages/SignUpPage.tsx
@@ -0,0 +1,395 @@
+import React, { useState } from 'react';
+import KakaoLoginButton from '../components/KakaoLoginButton';
+import { useAuth } from '../contexts/AuthContext';
+import { supabase } from '../lib/supabase';
+import GoogleLoginButton from '../components/GoogleLoginButton';
+
+function SignUpPage() {
+ const { signUp, checkEmailExists, checkNicknameExists } = useAuth();
+
+ const [email, setEmail] = useState
+
+
+ 🗝️ 로그인페이지
+계정에 로그인하시오.
+
+
+
+ {/* SNS 로그인 영역 */}
+ setMsg(`카카오 로그인 오류 : ${error}`)} />
+ {/* 구글 로그인 버튼 : 오류 메시지는 사용자도 볼 수 있어야 함. */}
+
+
+
+ 또는
+
+
+
+ {/* 카카오 로그인 버튼 : 오류 메시지는 사용자도 볼 수 있어야 함.*/}
+
+ setMsg(`구글 로그인 오류 : ${error}`)} />
+
+ {/* 메시지 출력 */}
+ {msg && (
+ + {msg} +
+ )} +
+
+ );
+}
+
+export default SignUpPage;
diff --git a/src/pages/TodoDetailPage.tsx b/src/pages/TodoDetailPage.tsx
new file mode 100644
index 0000000..01b289b
--- /dev/null
+++ b/src/pages/TodoDetailPage.tsx
@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { useNavigate, useParams } from 'react-router-dom';
+import type { Profile, Todo } from '../types/TodoType';
+import { getProfile } from '../lib/profile';
+import { deleteTodo, getTodoById, getTodos } from '../services/todoService';
+import Loading from '../components/Loading';
+import DOMPurify from 'dompurify';
+
+function TodoDetailPage() {
+ const navigate = useNavigate();
+ const { user } = useAuth();
+ // 사용자 정보
+ const [profile, setProfile] = useState
+
+ 📚 회원가입
+새 계정을 만들어 보세요.
+
+
+
+ {/* SNS 로그인 영역 */}
+ setMsg(`카카오 로그인 오류 : ${error}`)}
+ onSuccess={message => setMsg(message)}
+ />
+ {/* 구글 로그인 버튼 : 오류 메시지는 사용자도 볼 수 있어야 함. */}
+
+
+
+ 또는
+
+
+
+ {/* 카카오 로그인 버튼 : 오류 메시지는 사용자도 볼 수 있어야 함.*/}
+
+ setMsg(`구글 로그인 오류 : ${error}`)}
+ onSuccess={message => setMsg(message)}
+ />
+
+ {/* 메시지 출력 */}
+ {msg && (
+ + {msg} +
+ )} +
+
+ );
+ }
+
+ return (
+ 할 일을 찾을 수 없습니다.
+ +
+
+ );
+}
+
+export default TodoDetailPage;
diff --git a/src/pages/TodoEditPage.tsx b/src/pages/TodoEditPage.tsx
new file mode 100644
index 0000000..ea84a3e
--- /dev/null
+++ b/src/pages/TodoEditPage.tsx
@@ -0,0 +1,361 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { useNavigate, useParams } from 'react-router-dom';
+import type { Profile, Todo } from '../types/TodoType';
+import { getProfile } from '../lib/profile';
+import { getTodoById, toggleTodo, updateTodo } from '../services/todoService';
+import Loading from '../components/Loading';
+import RichTextEditor from '../components/RichTextEditor';
+import { supabase } from '../lib/supabase';
+
+function TodoEditPage() {
+ const { user } = useAuth();
+ const navigate = useNavigate();
+ const { id } = useParams<{ id: string }>();
+ const [profile, setProfile] = useState
+
+ {/* 실제내용 */}
+ 할 일 상세보기
+ {profile?.nickname &&{profile.nickname}님의 할 일
} +
+
+
+
+
+
+ + {todo.title} +
+
+
+ {todo.completed ? '✅ 완료' : '⏳ 진행 중'}
+
+
+
+
+
+
+ {/* 상세내용 */}
+ {todo.content && (
+
+
+ )}
+ {/* 추가정보 출력 */}
+ 상세 내용
+ + +
+
+
+ 할일 정보
+
+
+
+ 작성일 :
+
+
+ {todo.created_at ? new Date(todo.created_at).toLocaleString('ko-KR') : '정보 없음'}
+
+
+ 수정일 :
+
+
+ {todo.updated_at ? new Date(todo.updated_at).toLocaleString('ko-KR') : '정보 없음'}
+
+
+ 작성자 :
+
+
+ {profile?.nickname || user?.email}
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ 할 일을 찾을 수 없습니다.
+ +
+
+ );
+}
+
+export default TodoEditPage;
diff --git a/src/pages/TodoListPage.tsx b/src/pages/TodoListPage.tsx
new file mode 100644
index 0000000..ab10b8b
--- /dev/null
+++ b/src/pages/TodoListPage.tsx
@@ -0,0 +1,151 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import Pagination from '../components/Pagination';
+import TodoWriteBox from '../components/todos/TodoWriteBox';
+import { useAuth } from '../contexts/AuthContext';
+import { TodoProvider, useTodos } from '../contexts/TodoContext';
+import { getProfile } from '../lib/profile';
+import type { Profile, Todo } from '../types/TodoType';
+
+// 용서하세요. 나중에 추출하세요. ^^
+type TodoItemProps = {
+ todo: Todo;
+ index: number;
+};
+const TodoItemBox = ({ todo, index }: TodoItemProps) => {
+ const { toggleTodo, editTodo, deleteTodo, currentPage, itemsPerPage, totalCount } = useTodos();
+
+ // 순서번호 매기기
+ const globalIndex = totalCount - ((currentPage - 1) * itemsPerPage + index);
+
+ // 작성 날짜 포맷팅
+ const formatDate = (dateString: string | null): string => {
+ if (!dateString) return '날짜 없음';
+ const date = new Date(dateString);
+ return date.toLocaleDateString('ko-KR', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ });
+ };
+
+ return (
+
+
+ {/* 상세 내용 */}
+ 할 일 수정
+ {profile?.nickname &&{profile.nickname}님의 할 일
} +
+
+
+
+
+
+
+ {todo.completed ? '✅ 완료됨' : '⏳ 진행 중'}
+ {toggleLoading && (
+ 처리 중...
+ )}
+
+
+
+
+
+
+
+ {/* */}
+
+ {/* 추가정보 출력 */}
+
+
+ {/* 버튼들 */}
+ 할일 정보
+
+
+
+ 작성일 :
+
+
+ {todo.created_at ? new Date(todo.created_at).toLocaleString('ko-KR') : '정보 없음'}
+
+
+ 수정일 :
+
+
+ {todo.updated_at ? new Date(todo.updated_at).toLocaleString('ko-KR') : '정보 없음'}
+
+
+ 작성자 :
+
+
+ {profile?.nickname || user?.email}
+
+
+
+
+
+
+
+ {todo.title}
+
+ 작성일: {formatDate(todo.created_at)}
+
+ -
+ {todos.map((item, index) => (
+
+
+ );
+};
+
+function TodoListPage() {
+ const { user } = useAuth();
+
+ // 페이지네이션 관련
+ const [currentPage, setCurrentPage] = useState(1);
+ const [itemsPerPage, setItemsPerPage] = useState(10);
+ // 페이지 변경 핸들러
+ const handleChangePage = (page: number) => {
+ setCurrentPage(page);
+ };
+
+ // 프로필 가져오기
+ const [profile, setProfile] = useState
+ {/* 새글 등록시 1페이지로 이동후 목록새로고침 */}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default TodoListPage;
diff --git a/src/pages/TodoWritePage.tsx b/src/pages/TodoWritePage.tsx
new file mode 100644
index 0000000..2b6150d
--- /dev/null
+++ b/src/pages/TodoWritePage.tsx
@@ -0,0 +1,217 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import type { Profile, TodoInsert } from '../types/TodoType';
+import { getProfile } from '../lib/profile';
+import { useNavigate } from 'react-router-dom';
+import { createTodo } from '../services/todoService';
+import RichTextEditor from '../components/RichTextEditor';
+import { supabase } from '../lib/supabase';
+
+function TodoWritePage() {
+ const { user } = useAuth();
+ const navigate = useNavigate();
+
+ // 사용자 입력 내용
+ const [title, setTitle] = useState('');
+ const [content, setContent] = useState('');
+ // 데이터가 추가 되고 있는지의 상태
+ const [saving, setSaving] = useState(false);
+
+ // 이전에는 글자만 state 로 관리했는데, 이제는 파일도 state로 관리해야 한다.
+ const [imageFiles, setImageFiles] = useState
+
+
+ 🍈 할 일 관리
+ {profile?.nickname &&{profile.nickname}님의 Todo 관리
} +
+
+
+ {/* 입력창 */}
+ ✏️ 새 할 일 작성
+ {profile?.nickname &&{profile.nickname}님의 새로운 할 일
} +
+
+
+ handleTitleChange(e)}
+ placeholder="할 일을 입력해주세요."
+ disabled={saving}
+ />
+
+
+
+ {/*