지금 바로 시작해보세요
diff --git a/src/app/(route)/_landing/_components/CooperationSection/CooperationSection.tsx b/src/app/(route)/_landing/_components/CooperationSection/CooperationSection.tsx
index d87c5298..5213bafa 100644
--- a/src/app/(route)/_landing/_components/CooperationSection/CooperationSection.tsx
+++ b/src/app/(route)/_landing/_components/CooperationSection/CooperationSection.tsx
@@ -1,20 +1,63 @@
+"use client";
+
+import { useRef } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import ScrollTrigger from "gsap/ScrollTrigger";
import { DeviceImage, FeatureBlock } from "../_internal";
import { COOPERATION_SECTION } from "../../_constants";
+if (typeof window !== "undefined") {
+ gsap.registerPlugin(ScrollTrigger);
+}
+
const CooperationSection = () => {
+ const container = useRef(null);
+
+ useGSAP(
+ () => {
+ gsap.from(".feature-block", {
+ scrollTrigger: {
+ trigger: ".feature-block",
+ start: "top 95%",
+ toggleActions: "play none none reverse",
+ },
+ y: 50,
+ opacity: 0,
+ duration: 0.8,
+ });
+
+ gsap.from(".feature-image", {
+ scrollTrigger: {
+ trigger: ".feature-image",
+ start: "top 95%",
+ toggleActions: "play none none reverse",
+ },
+ y: 30,
+ opacity: 0,
+ duration: 1,
+ delay: 0.2,
+ ease: "power3.out",
+ });
+ },
+ { scope: container },
+ );
+
return (
-
+
-
-
+
+
+
+
{
+ const container = useRef(null);
+
+ useGSAP(
+ () => {
+ gsap.from(".feature-block", {
+ scrollTrigger: {
+ trigger: ".feature-block",
+ start: "top 85%",
+ toggleActions: "play none none reverse",
+ },
+ y: 50,
+ opacity: 0,
+ duration: 0.8,
+ });
+
+ gsap.from(".feature-image", {
+ scrollTrigger: {
+ trigger: ".feature-image",
+ start: "top 85%",
+ toggleActions: "play none none reverse",
+ },
+ y: 30,
+ opacity: 0,
+ duration: 1,
+ delay: 0.2,
+ ease: "power3.out",
+ });
+ },
+ { scope: container },
+ );
+
return (
-
+
-
-
+
+
+
+
{
+ const container = useRef(null);
+
+ useGSAP(
+ () => {
+ const tl = gsap.timeline();
+
+ tl.from(".hero-text-item", {
+ x: -50,
+ opacity: 0,
+ duration: 0.8,
+ stagger: 0.2,
+ ease: "power2.out",
+ })
+
+ .from(
+ ".hero-image",
+ {
+ x: 50,
+ opacity: 0,
+ duration: 1,
+ ease: "power2.out",
+ },
+ "-=0.4",
+ );
+ },
+ { scope: container },
+ );
+
return (
-
-
-
-
+
+
+
+
{
className="size-9 pc:size-12"
draggable={false}
/>
-
+
- 함께 만들어가는 To Do list
+ 함께 만들어가는 투두 리스트
Coworkers
-
+
{
tabletSrc: "/landing/img-1-1.png",
desktopSrc: "/landing/img-1.png",
}}
- ImageClassName="object-fill object-left w-full h-full tablet:object-cover"
+ ImageClassName="object-contain object-left w-full h-full"
/>
지금 시작하기
diff --git a/src/app/(route)/_landing/_components/KanbanSection/KanbanSection.tsx b/src/app/(route)/_landing/_components/KanbanSection/KanbanSection.tsx
index 415274df..bb1eb402 100644
--- a/src/app/(route)/_landing/_components/KanbanSection/KanbanSection.tsx
+++ b/src/app/(route)/_landing/_components/KanbanSection/KanbanSection.tsx
@@ -1,21 +1,64 @@
+"use client";
+
+import { useRef } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import ScrollTrigger from "gsap/ScrollTrigger";
import { DeviceImage, FeatureBlock } from "../_internal";
import { KANBAN_SECTION } from "../../_constants";
+if (typeof window !== "undefined") {
+ gsap.registerPlugin(ScrollTrigger);
+}
+
const KanbanSection = () => {
+ const container = useRef
(null);
+
+ useGSAP(
+ () => {
+ gsap.from(".feature-block", {
+ scrollTrigger: {
+ trigger: ".feature-block",
+ start: "top 85%",
+ toggleActions: "play none none reverse",
+ },
+ y: 0,
+ opacity: 0,
+ duration: 0.8,
+ });
+
+ gsap.from(".feature-image", {
+ scrollTrigger: {
+ trigger: ".feature-image",
+ start: "top 85%",
+ toggleActions: "play none none reverse",
+ },
+ y: 0,
+ opacity: 0,
+ duration: 1,
+ delay: 0.2,
+ ease: "back.out(1.7)",
+ });
+ },
+ { scope: container },
+ );
+
return (
-
+
-
-
+
+
+
+
-
+
diff --git a/src/app/(route)/dashboard/[id]/_components/ArticleDetail.tsx b/src/app/(route)/dashboard/[id]/_components/ArticleDetail.tsx
index ef3eb80b..d3076906 100644
--- a/src/app/(route)/dashboard/[id]/_components/ArticleDetail.tsx
+++ b/src/app/(route)/dashboard/[id]/_components/ArticleDetail.tsx
@@ -1,11 +1,17 @@
import ArticleBody from "./_internal/ArticleBody";
import ArticleComments from "./_internal/ArticleComments";
+import { LinkButton } from "@/common";
const ArticleDetail = () => {
return (
);
};
diff --git a/src/app/(route)/dashboard/[id]/_components/Modal/ArticleEditModal.tsx b/src/app/(route)/dashboard/[id]/_components/Modal/ArticleEditModal.tsx
new file mode 100644
index 00000000..bb14eb87
--- /dev/null
+++ b/src/app/(route)/dashboard/[id]/_components/Modal/ArticleEditModal.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { usePatchArticle } from "@/api/hooks";
+import { BaseButton, Input, InputBox, Modal, Icon, FloatingButton } from "@/common";
+import { ArticleDetail } from "@/types/ArticleType";
+import { ChangeEvent, useState } from "react";
+import Image from "next/image";
+import useImageUpload from "@/hooks/useImageUpload";
+
+interface ArticleEditModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ article: ArticleDetail;
+}
+
+interface FormStateType {
+ title: string;
+ content: string;
+ image: string | null;
+}
+
+const ArticleEditModal = ({ isOpen, onClose, article }: ArticleEditModalProps) => {
+ const { mutate: patchArticle, isPending } = usePatchArticle();
+
+ const [formState, setFormState] = useState({
+ title: article.title,
+ content: article.content,
+ image: article.image,
+ });
+
+ const { preview, file, handleImageChange, uploadImage, isUploading, clear } = useImageUpload(
+ article.image ?? undefined,
+ );
+
+ const isDisabledEditButton = isPending || isUploading || !formState.title.trim() || !formState.content.trim();
+
+ const handleTextChange = (e: ChangeEvent) => {
+ const { name, value } = e.target;
+ setFormState((prev) => ({ ...prev, [name]: value }));
+ };
+
+ const handleRemoveImage = () => {
+ clear();
+ setFormState((prev) => ({
+ ...prev,
+ image: null,
+ }));
+ };
+
+ const handleEditClick = async () => {
+ const { title, content } = formState;
+
+ let imageUrl: string | null = null;
+
+ if (file) {
+ imageUrl = await uploadImage();
+ }
+ const newForm = {
+ title,
+ content,
+ image: imageUrl !== null ? imageUrl : formState.image === null ? null : formState.image,
+ };
+ patchArticle(
+ {
+ articleId: article.id,
+ body: newForm,
+ },
+ {
+ onSuccess: () => {
+ onClose();
+ },
+ },
+ );
+ };
+
+ return (
+
+
+ 게시글 수정하기
+
+
+
+
+
+
+ 닫기
+
+
+
+ {isPending || isUploading ? "수정 중..." : "수정하기"}
+
+
+
+ );
+};
+
+export default ArticleEditModal;
diff --git a/src/app/(route)/dashboard/[id]/_components/_internal/ArticleBody.tsx b/src/app/(route)/dashboard/[id]/_components/_internal/ArticleBody.tsx
index bd5e22fd..5d18ee31 100644
--- a/src/app/(route)/dashboard/[id]/_components/_internal/ArticleBody.tsx
+++ b/src/app/(route)/dashboard/[id]/_components/_internal/ArticleBody.tsx
@@ -8,7 +8,7 @@ import ArticleTitle from "../../../_components/Article/_internal/ArticleTitle";
import ArticleWriter from "../../../_components/Article/_internal/ArticleWriter";
import ArticleContent from "../../../_components/Article/_internal/ArticleContent";
import ArticleLikeButton from "./ArticleLikeButton";
-import ArticleEditModal from "./ArticleEditModal";
+import ArticleEditModal from "../Modal/ArticleEditModal";
import { useState } from "react";
const ArticleBody = () => {
@@ -46,12 +46,19 @@ const ArticleBody = () => {
-
setIsOpenEditModal(false)} />
+ {isOpenEditModal && (
+ setIsOpenEditModal(false)}
+ article={article}
+ />
+ )}
);
};
diff --git a/src/app/(route)/dashboard/[id]/_components/_internal/ArticleEditModal.tsx b/src/app/(route)/dashboard/[id]/_components/_internal/ArticleEditModal.tsx
deleted file mode 100644
index 29ef4832..00000000
--- a/src/app/(route)/dashboard/[id]/_components/_internal/ArticleEditModal.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Modal } from "@/common";
-
-interface ArticleEditModalProps {
- isOpen: boolean;
- onClose: () => void;
-}
-
-const ArticleEditModal = ({ isOpen, onClose }: ArticleEditModalProps) => {
- return (
-
-
- 게시글 수정하기
-
-
- );
-};
-
-export default ArticleEditModal;
diff --git a/src/app/(route)/dashboard/[id]/page.tsx b/src/app/(route)/dashboard/[id]/page.tsx
index 93232390..2f6d81ff 100644
--- a/src/app/(route)/dashboard/[id]/page.tsx
+++ b/src/app/(route)/dashboard/[id]/page.tsx
@@ -1,5 +1,11 @@
import { PageLayout } from "@/common";
import { ArticleDetail } from "./_components";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: "Coworkers | 자유게시판",
+ description: "게시글을 통해 팀원들과 소통해보세요.",
+};
const DashBoardDetail = () => {
return (
diff --git a/src/app/(route)/dashboard/_components/Article/BestArticleCard.tsx b/src/app/(route)/dashboard/_components/Article/BestArticleCard.tsx
index 9ceff105..8208028b 100644
--- a/src/app/(route)/dashboard/_components/Article/BestArticleCard.tsx
+++ b/src/app/(route)/dashboard/_components/Article/BestArticleCard.tsx
@@ -1,5 +1,4 @@
import Link from "next/link";
-import Image from "next/image";
import { useGetArticle } from "@/api/hooks";
import { Icon } from "@/common";
import ArticleBestBadge from "./_internal/ArticleBestBadge";
@@ -17,14 +16,12 @@ const BestArticleCard = ({ articleId }: { articleId: number }) => {
return (
-
+
-
-
- {/* {article.image &&
} */}
+
+
+
# Coworkers
-> 업무 배정·현황 공유 + 익명 롤링페이퍼 기능을 갖춘 협업 서비스
+### 팀원
+
+| [@SanginJeong](https://github.com/SanginJeong) | [@KimWonSeon](https://github.com/KimWonSeon) | [@wlrnjs](https://github.com/wlrnjs) |
+| :----------------------------------------------------------: | :---------------------------------------------------------: | :-----------------------------------------------------: |
+| 
| 
| 
|
+| **정상인 / PL** | **김원선 / FE** | **서지권 / FE** |
+
+## 기술 스택
+
+### Core
+
+- **Framework**: Next.js 16.0.1 (App Router)
+- **Language**: TypeScript 5.x
+- **Styling**: Tailwind CSS 3.4.18
+- **State Management**:
+ - React Query 5.x (TanStack Query)
+ - Zustand 5.x
+- **API**: Axios 1.13.1
+- **Animation**:
+ - Framer Motion 12.x
+ - GSAP 3.13.0
+- **UI Components**:
+ - React Calendar 6.x
+ - React Hot Toast 2.x
+
+### Development
+
+- **Documentation**: Storybook 10.x
+- **Linting**:
+ - ESLint 9.x
+ - Prettier 3.6.2
+- **Husky**:
+ - Husky 9.x
+ - lint-staged 16.x
+- **UI Testing**:
+ - Chromatic
+ - Storybook Test Runner
+
+## 주요 기능
+
+### 인증
+
+- JWT 기반 인증
+- 카카오 소셜 로그인 연동
+- 이메일/비밀번호 로그인
+- 자동 로그인 유지
+
+### 상태 관리
+
+- **서버 상태 관리**: React Query (TanStack Query)
+- **클라이언트 상태 관리**: Zustand
+
+### 성능 최적화
+
+- **이미지 최적화**:
+ - Next.js Image 컴포넌트를 활용한 자동 최적화
+ - WebP 포맷 지원을 통한 용량 감소
+ - Lazy Loading 적용
+
+- **번들 최적화**:
+ - 코드 스플리팅 (Code Splitting)
+ - 동적 임포트(dynamic import)를 활용한 지연 로딩
+ - Tree Shaking을 통한 미사용 코드 제거
+ - Webpack 설정 최적화 (--webpack 플래그 사용)
+
+- **애니메이션**:
+ - GSAP: 스크롤 기반 애니메이션 구현
+ - Framer Motion: 인터랙티브한 UI 컴포넌트 구현
+
+### 테스트
+
+- **시각적 테스팅**: Chromatic을 활용한 UI 컴포넌트 시각적 테스트
+- **컴포넌트 문서화**: Storybook을 활용한 컴포넌트 문서화 및 개발
+- **접근성 검사**: Storybook a11y 애드온을 활용한 접근성 점검
-## 🔗 참고 자료
+## 개발 환경 설정
-- 디자인(Figma): https://www.figma.com/design/d5ogtLVSv1m7e8kx1Lfamy/%5BCCC%5DCowokers?node-id=52-1213
-- API(Swagger): https://fe-project-cowokers.vercel.app/docs/#/
-- 노션(프로젝트 계획): 추가 예정
+```bash
+# 저장소 클론
+git clone https://github.com/sprint18-4-4/Coworkers.git
+cd Coworkers
-## 👥 팀
+# 의존성 설치
+npm install
-- 김원선 · 박신천 · 서지권 · 정상인
+# 환경 변수 설정
+cp .env.local.example .env.local
+# .env.local 파일 수정
-## 🧰 기술 스택
+# 개발 서버 실행
+npm run dev
+```
-- Framework: **Next.js (App Router)**, React, TypeScript
-- 스타일: **Tailwind CSS**
-- 상태/데이터: **React Query**
-- 배포/스토리지: Vercel, AWS S3
-- 협업: Git & GitHub
-- (선택) Storybook, 테스트 코드
+## 스크립트
-## 🎯 프로젝트 목표
+```json
+{
+ "dev": "next dev --webpack",
+ "build": "next build --webpack",
+ "start": "next start",
+ "lint": "eslint",
+ "storybook": "storybook dev -p 6006",
+ "build-storybook": "storybook build",
+ "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
+ "build-all": "npm run build && npm run build-storybook"
+}
+```
-1. 익명 롤링페이퍼 작성/조회/댓글/좋아요
-2. React Query 기반 상태 처리/데이터 관리
-3. 사용자 편의 중심의 직관적 UI/UX
-4. Next.js를 활용한 SPA 구현 및 UI 통일성 유지
+## 컨벤션
-## ✨ 주요 기능
+### Git 커밋 메시지
-- 상단 네비게이션/팀 참여 메뉴
-- 랜딩 분기(로그인 여부에 따라 팀 페이지 또는 로그인)
-- 회원가입/로그인/비밀번호 재설정/간편가입(카카오)
-- 팀 생성/수정/삭제/초대 링크/멤버 리스트
-- 할 일(Task) 목록/추가(한 번·매일·주·월)/상세/수정/삭제/완료
-- 마이 히스토리(일자별 완료 목록)
-- 계정 설정(프로필 이미지/이름/비밀번호/탈퇴)
-- 자유게시판(목록/베스트/검색/CRUD)
+```plaintext
+- feat: 새로운 기능 추가
+- fix: 버그 수정
+- design: UI/UX 및 스타일 변경
+- docs: 문서 작성 또는 수정
+- refactor: 코드 리팩토링 (기능 변화 없음)
+- chore: 설정, 빌드, 패키지 등 유지보수
+- test: 테스트 코드 및 주석 추가/수정
+- hotfix: 긴급 버그 수정
+- review: 코드 리뷰 요청
+- performance: 성능 최적화
+- main: 메인 브랜치 관련 변경 (배포 등)
+```
-## ✅ 요구사항(요약 체크리스트)
+### 코드 스타일
-- 공통: 폰트/컬러 시스템 설정, 공용 컴포넌트, 반응형, React Query, Next.js, TS, (선택) Storybook/테스트
-- 네비게이션/프로필 메뉴: 팀 참여하기·마이 히스토리·계정 설정·로그아웃
-- 랜딩: ‘지금 시작하기’ → 로그인 상태 분기
-- 회원가입/로그인: 입력 검증 메시지/에러 처리/간편가입 플로우
-- 팀: 중복 검사·생성 후 이동·수정/삭제·초대 모달(링크 복사)
-- 할 일: 목록/추가 모달·반복 옵션·유효성·상세 CRUD/완료
-- 마이 히스토리: 일자별 완료 목록
-- 계정 설정: 프로필 이미지/이름/비번 변경·회원 탈퇴 모달
-- 자유게시판: 전체/베스트(좋아요순)/검색(제목 부분일치)/CRUD
+- 컴포넌트: PascalCase (예: `UserProfile.tsx`)
+- util 함수: camelCase (예: `formatDate.ts`)
+- 상수: UPPER_SNAKE_CASE (예: `API_ENDPOINT.ts`)
-## 🗂️ 폴더 구조
+### 폴더 구조
-> 폴더 구조는 **추후 결정(TBD)**. App Router 기준으로 세팅 예정.
+```plaintext
+├── src
+│ ├── api
+│ │ ├── axios.ts
+│ │ └── hooks.ts
+│ ├── app
+│ │ └── login
+│ │ ├── _components
+│ │ ├── _hooks
+│ │ ├── _types
+│ │ ├── _constants
+│ │ └── page.tsx
+│ ├── constants
+│ │ └── 공통 상수
+│ ├── common
+│ │ └── 공통 컴포넌트
+│ ├── hooks
+│ │ └── 공통 훅
+│ ├── types
+│ │ └── 공통 타입
+│ └── utils
+│ └── 공통 유틸
+├── public
+└── package.json
+```
diff --git a/package-lock.json b/package-lock.json
index 597fe670..9778992b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "coworkers",
"version": "0.1.0",
"dependencies": {
+ "@gsap/react": "^2.1.2",
"@react-pdf/renderer": "^4.3.1",
"@tanstack/react-query": "^5.90.5",
"@tanstack/react-query-devtools": "^5.90.2",
@@ -15,6 +16,8 @@
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"dayjs": "^1.11.19",
+ "framer-motion": "^12.23.24",
+ "gsap": "^3.13.0",
"next": "16.0.1",
"react": "19.2.0",
"react-calendar": "^6.0.0",
@@ -2542,6 +2545,16 @@
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
}
},
+ "node_modules/@gsap/react": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.2.tgz",
+ "integrity": "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw==",
+ "license": "SEE LICENSE AT https://gsap.com/standard-license",
+ "peerDependencies": {
+ "gsap": "^3.12.5",
+ "react": ">=17"
+ }
+ },
"node_modules/@humanfs/core": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -9155,6 +9168,33 @@
"url": "https://github.com/sponsors/rawify"
}
},
+ "node_modules/framer-motion": {
+ "version": "12.23.24",
+ "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+ "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+ "license": "MIT",
+ "dependencies": {
+ "motion-dom": "^12.23.23",
+ "motion-utils": "^12.23.6",
+ "tslib": "^2.4.0"
+ },
+ "peerDependencies": {
+ "@emotion/is-prop-valid": "*",
+ "react": "^18.0.0 || ^19.0.0",
+ "react-dom": "^18.0.0 || ^19.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/is-prop-valid": {
+ "optional": true
+ },
+ "react": {
+ "optional": true
+ },
+ "react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/fs-extra": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -9459,6 +9499,12 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/gsap": {
+ "version": "3.13.0",
+ "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz",
+ "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==",
+ "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+ },
"node_modules/has-bigints": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -11072,6 +11118,21 @@
"node": ">=16 || 14 >=14.17"
}
},
+ "node_modules/motion-dom": {
+ "version": "12.23.23",
+ "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+ "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+ "license": "MIT",
+ "dependencies": {
+ "motion-utils": "^12.23.6"
+ }
+ },
+ "node_modules/motion-utils": {
+ "version": "12.23.6",
+ "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+ "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+ "license": "MIT"
+ },
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index f5276c2d..6b2d2417 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"build-all": "npm run build && npm run build-storybook"
},
"dependencies": {
+ "@gsap/react": "^2.1.2",
"@react-pdf/renderer": "^4.3.1",
"@tanstack/react-query": "^5.90.5",
"@tanstack/react-query-devtools": "^5.90.2",
@@ -21,6 +22,8 @@
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"dayjs": "^1.11.19",
+ "framer-motion": "^12.23.24",
+ "gsap": "^3.13.0",
"next": "16.0.1",
"react": "19.2.0",
"react-calendar": "^6.0.0",
diff --git a/src/MOCK_DATA.ts b/src/MOCK_DATA.ts
deleted file mode 100644
index 572350f4..00000000
--- a/src/MOCK_DATA.ts
+++ /dev/null
@@ -1,355 +0,0 @@
-import { DateNumber, Day, TaskListItemType } from "./types";
-import { GetTaskDetailResponse } from "./api/axios/task/_types";
-import { TaskGroupItem } from "./api/axios/task/_types";
-
-export const USER_MOCK_DATA = {
- teamId: "1",
- image: "/TEST_IMG/image-1.jpg",
- nickname: "안해나",
- updatedAt: "2025-11-07T03:00:00Z",
- createdAt: "2025-05-01T10:00:00Z",
- email: "asdf@example.com",
- id: 1,
- memberships: [
- {
- group: {
- teamId: "1",
- updatedAt: "2025-11-01T12:00:00Z",
- createdAt: "2025-05-01T09:30:00Z",
- image: "/TEST_IMG/image-1.jpg",
- name: "CodeIt",
- id: 101,
- },
- role: "admin",
- userImage: "/TEST_IMG/image-1.jpg",
- userEmail: "asdf@example.com",
- userName: "안해나",
- groupId: 101,
- userId: 1,
- },
- {
- group: {
- teamId: "1",
- updatedAt: "2025-10-28T08:00:00Z",
- createdAt: "2025-04-15T09:00:00Z",
- image: "/TEST_IMG/image-1.jpg",
- name: "CodeIt",
- id: 102,
- },
- role: "member",
- userImage: "/TEST_IMG/image-1.jpg",
- userEmail: "asdf@example.com",
- userName: "안해나",
- groupId: 102,
- userId: 1,
- },
- ],
-};
-
-export const SIDEBAR_MOCK_DATA = [
- {
- title: "경영관리팀",
- },
- {
- title: "프로덕트팀",
- },
- {
- title: "마케팅팀",
- },
- {
- title: "콘텐츠팀",
- },
-];
-
-export const MOBILE_SIDEBAR_MENU_MOCK_DATA = [
- {
- menu: "경영관리팀",
- href: "/",
- },
- {
- menu: "프로덕트팀",
- href: "/test",
- },
- {
- menu: "마케팅팀",
- href: "/test2",
- },
- {
- menu: "콘텐츠팀",
- href: "/test3",
- },
-];
-
-export const MY_HISTORY_ITEM_MOCK_DATA: TaskListItemType[] = [
- {
- id: 1,
- name: "아침 운동하기",
- description: "30분 러닝 또는 스트레칭",
- date: "2025-11-14T09:00:00.000Z",
- doneAt: "2025-11-14T09:30:00.000Z",
- updatedAt: "2025-11-14T09:30:00.000Z",
- deletedAt: null,
- displayIndex: 0,
- commentCount: 2,
- recurringId: 101,
- frequency: "DAILY",
- writer: {
- image: "/images/user1.png",
- nickname: "지권",
- id: 11,
- },
- doneBy: {
- user: {
- image: "/images/user1.png",
- nickname: "지권",
- id: 11,
- },
- },
- },
- {
- id: 2,
- name: "주간 회고 작성",
- description: "이번 주 목표 대비 진행 상황 점검",
- date: "2025-11-15T20:00:00.000Z",
- doneAt: "2025-11-15T20:15:00.000Z",
- updatedAt: "2025-11-15T20:15:00.000Z",
- deletedAt: null,
- displayIndex: 1,
- commentCount: 0,
- recurringId: 202,
- frequency: "WEEKLY",
- writer: {
- image: "/images/user2.png",
- nickname: "홍길동",
- id: 12,
- },
- doneBy: {
- user: {
- image: "/images/user2.png",
- nickname: "홍길동",
- id: 12,
- },
- },
- },
-];
-
-export const LIST_DATE_MOCK_DATA: { day: Day; date: DateNumber }[] = [
- { day: "월", date: 1 },
- { day: "화", date: 2 },
- { day: "수", date: 3 },
- { day: "목", date: 4 },
- { day: "금", date: 5 },
- { day: "토", date: 6 },
- { day: "일", date: 7 },
-];
-
-export const COMMENT_MOCK_DATA = {
- id: 1,
- content: "lorem ipsum dolor sit amet consectetur adipisicing elit",
- createdAt: "2024-07-29",
- updatedAt: "2024-07-29",
- user: { id: 1, nickname: "안해나", image: "" },
-};
-
-export const TASK_DETAIL_MOCK_DATA: GetTaskDetailResponse = {
- id: 0,
- name: "회의록 정리하기",
- description: "팀 회의에서 나온 내용을 정리하는 작업입니다.",
- displayIndex: 0,
- commentCount: 2,
-
- frequency: "DAILY",
- recurringId: 0,
-
- date: "2025-11-21T20:27:10.529Z",
- doneAt: "2025-11-21T20:27:10.529Z",
- updatedAt: "2025-11-21T20:27:10.529Z",
- deletedAt: null,
-
- doneBy: {
- user: {
- id: 1,
- nickname: "짱구",
- image: "/TEST_IMG/image-1.jpg",
- },
- },
-
- writer: {
- id: 2,
- nickname: "철수",
- image: "/TEST_IMG/image-1.jpg",
- },
-
- recurring: {
- id: 0,
- name: "회의록 정리하기",
- description: "팀 회의에서 나온 내용을 정리하는 작업입니다.",
- createdAt: "2025-11-21T20:27:10.529Z",
- updatedAt: "2025-11-21T20:27:10.529Z",
- startDate: "2025-11-21T20:27:10.529Z",
- frequencyType: "DAILY",
- weekDays: [],
- monthDay: null,
- taskListId: 0,
- groupId: 0,
- writerId: 0,
- },
-};
-
-export const TASK_DETAIL_COMMENT_MOCK_DATA = [
- {
- user: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "짱구",
- id: 1,
- },
- userId: 1,
- taskId: 101,
- updatedAt: "2025-11-21T21:26:31.011Z",
- createdAt: "2025-11-21T21:26:31.011Z",
- content: "오늘 해야 할 작업 메모입니다.",
- id: 1,
- },
- {
- user: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "철수",
- id: 2,
- },
- userId: 2,
- taskId: 102,
- updatedAt: "2025-11-21T21:28:10.011Z",
- createdAt: "2025-11-21T21:28:10.011Z",
- content: "API 연결 테스트 완료했습니다.",
- id: 2,
- },
- {
- user: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "유리",
- id: 3,
- },
- userId: 3,
- taskId: 103,
- updatedAt: "2025-11-21T21:30:02.011Z",
- createdAt: "2025-11-21T21:30:02.011Z",
- content: "UI 최종 수정했습니다.",
- id: 3,
- },
- {
- user: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "맹구",
- id: 4,
- },
- userId: 4,
- taskId: 104,
- updatedAt: "2025-11-21T21:32:44.011Z",
- createdAt: "2025-11-21T21:32:44.011Z",
- content: "버그 리포트 정리했습니다.",
- id: 4,
- },
-];
-
-export const TASK_GROUP_MOCK_DATA: TaskGroupItem[] = [
- {
- doneBy: {
- user: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "string",
- id: 1,
- },
- },
- writer: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "짱구",
- id: 1,
- },
- displayIndex: 0,
- commentCount: 0,
- deletedAt: "2025-11-21T22:50:39.165Z",
- recurringId: 0,
- frequency: "DAILY",
- updatedAt: "2025-11-21T22:50:39.165Z",
- doneAt: "2025-11-21T22:50:39.165Z",
- date: "2025-11-21T22:50:39.165Z",
- description: "법인 설립 비용 안내 드리기",
- name: "법인 설립 비용 안내 드리기",
- id: 1,
- },
- {
- doneBy: {
- user: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "string",
- id: 2,
- },
- },
- writer: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "맹구",
- id: 2,
- },
- displayIndex: 1,
- commentCount: 1,
- deletedAt: "2025-11-21T22:50:39.165Z",
- recurringId: 0,
- frequency: "WEEKLY",
- updatedAt: "2025-11-21T22:50:39.165Z",
- doneAt: "2025-11-21T22:50:39.165Z",
- date: "2025-11-22T22:50:39.165Z",
- description: "법인 설립 비용 혹은 등기 비용 안내 드리기",
- name: "법인 설립 비용 혹은 등기 비용 안내 드리기",
- id: 2,
- },
- {
- doneBy: {
- user: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "string",
- id: 3,
- },
- },
- writer: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "철수",
- id: 3,
- },
- displayIndex: 2,
- commentCount: 2,
- deletedAt: "2025-11-21T22:50:39.165Z",
- recurringId: 0,
- frequency: "MONTHLY",
- updatedAt: "2025-11-21T22:50:39.165Z",
- doneAt: "2025-11-21T22:50:39.165Z",
- date: "2025-11-23T22:50:39.165Z",
- description: "법인 설립 비용 혹은 등기 비용 혹은 기타 비용 안내 드리기",
- name: "법인 설립 비용 혹은 등기 비용 혹은 기타 비용 안내 드리기법인 설립 비용 혹은 등기 비용 혹은 기타 비용 안내 드리기법인 설립 비용 혹은 등기 비용 혹은 기타 비용 안내 드리기법인 설립 비용 혹은 등기 비용 혹은 기타 비용 안내 드리기",
- id: 3,
- },
- {
- doneBy: {
- user: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "string",
- id: 4,
- },
- },
- writer: {
- image: "/TEST_IMG/image-1.jpg",
- nickname: "유리",
- id: 4,
- },
- displayIndex: 3,
- commentCount: 2,
- deletedAt: "2025-11-21T22:50:39.165Z",
- recurringId: 0,
- frequency: "ONCE",
- updatedAt: "2025-11-21T22:50:39.165Z",
- doneAt: "2025-11-21T22:50:39.165Z",
- date: "2025-11-24T22:50:39.165Z",
- description: "법인 설립 비용 혹은 등기 비용 혹은 기타 비용 혹은 기타 비용 안내 드리기",
- name: "법인 설립 비용 혹은 등기 비용 혹은 기타 비용 혹은 기타 비용 안내 드리기",
- id: 4,
- },
-];
diff --git a/src/api/axios/article/_type.ts b/src/api/axios/article/_type.ts
index 6de0f63d..f37e2141 100644
--- a/src/api/axios/article/_type.ts
+++ b/src/api/axios/article/_type.ts
@@ -51,3 +51,22 @@ export interface DeleteArticleResponse {
id?: number;
message?: string;
}
+
+export interface PostArticleRequest {
+ image?: string;
+ content: string;
+ title: string;
+}
+
+export type PostArticleResponse = ArticleListItem;
+
+export interface PatchArticleRequest {
+ articleId: number;
+ body: {
+ image?: string | null;
+ content?: string;
+ title?: string;
+ };
+}
+
+export type PatchArticleResponse = ArticleDetail;
diff --git a/src/api/axios/article/patchArticle.ts b/src/api/axios/article/patchArticle.ts
new file mode 100644
index 00000000..63c7fed8
--- /dev/null
+++ b/src/api/axios/article/patchArticle.ts
@@ -0,0 +1,9 @@
+import { instance } from "@/lib";
+import { PatchArticleRequest, PatchArticleResponse } from "./_type";
+
+const patchArticle = async ({ articleId, body }: PatchArticleRequest) => {
+ const { data } = await instance.patch