Part-4-1 · huuitae · Nov 28, 2025 · Nov 26, 2025 · Nov 26, 2025 · Nov 26, 2025
diff --git a/README.md b/README.md
@@ -1 +1,191 @@
-Coworkers
+# 💎 Coworkers 💎  
+
+
+랜딩페이지 이미지 (추가 예정)
+
+
+<p align="left">
+  <a href="https://coworkers-pied.vercel.app/"><strong>🚀 서비스 바로가기</strong></a>
+</p>
+
+ <br>
+
+## 📝 소개
+
+>Coworkers는 여러 명이 하나의 그룹을 만들어
+할 일(Task)을 함께 공유하고 관리할 수 있는 협업용 To-do 플랫폼입니다.
+
+<br>
+
+## 🎯 목적
+
+>팀 단위로 할 일을 정리하고 진행 상황을 투명하게 공유하여,
+협업 효율을 높이는 것이 Coworkers의 핵심 목적입니다.
+
+<br>
+
+
+## ✨주요 기능
+
+|팀 페이지|
+|:---:|
+|<img src="https://github.com/user-attachments/assets/772899fe-b186-4bf8-b12f-0e7701f03d0f" width="450"/>|
+|팀의 전체적인 진행 현황과 멤버 정보를 확인할 수 있는 팀 요약 화면|
+
+
+|할 일 관리|
+|:---:|
+|<img src="https://github.com/user-attachments/assets/78bb57db-ee85-4620-af44-92a97b23c62b" width="450"/>|
+|날짜별 할 일을 확인하고, 상세 보기 및 완료 체크를 할 수 있는 화면|
+
+
+|자유게시판|
+|:---:|
+|<img src="https://github.com/user-attachments/assets/11132fdd-b519-40b5-9a6a-22c66af7bc9a" width="450"/>|
+|자유롭게 소통하고 정보를 공유할 수 있는 커뮤니티 공간|
+
+<br />
+
+<br>
+
+## 🧰 기술 스택
+
+### 🧩 프론트엔드
+<img src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=Next.js&logoColor=white"> <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=white"> <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=TypeScript&logoColor=white"> <img src="https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white"> <img src="https://img.shields.io/badge/React_Query-FF4154?style=for-the-badge&logo=ReactQuery&logoColor=white"> <img src="https://img.shields.io/badge/React_Hook_Form-EC5990?style=for-the-badge&logo=reacthookform&logoColor=white"> <img src="https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white" /> <img src="https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white">
+### 🛠 코드 포매터 및 검사 도구
+<img src="https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white"> <img src="https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=white">
+### 🤝 협업 도구
+<img src="https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=GitHub&logoColor=white" /> <img src="https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=Figma&logoColor=white"> <img src="https://img.shields.io/badge/Discord-5B61EE?style=for-the-badge&logo=Discord&logoColor=white" /> <img src="https://img.shields.io/badge/Notion-000000?style=for-the-badge&logo=Notion&logoColor=white">
+### 🚀 배포 플랫폼
+<img src="https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white" />
+
+<br>
+
+## 📁 폴더 구조
+```
+src/
+├── app/              # Next.js App Router 기반 페이지
+├── api/              # 서버 API 요청 모듈 (도메인별 CRUD)
+├── components/       # 재사용 가능한 공통 UI 컴포넌트
+├── hooks/            # 커스텀 훅 (API 훅 포함)
+├── assets/           # 아이콘 및 이미지 리소스
+├── constants/        # 상수 값 및 공통 설정
+├── types/            # TypeScript 타입 정의
+└── utils/            # 공통 유틸 함수
+```
+
+<br>
+
+## 🚀 실행 방법
+```
+# 1. 저장소 클론
+git clone https://github.com/Part-4-1/coworkers.git
+
+# 2. 폴더 이동
+cd coworkers
+
+# 3. 패키지 설치
+npm install
+
+# 4. 개발 서버 실행
+npm run dev
+```
+
+<br>
+
+## 🔐 환경 변수
+```
+NEXT_PUBLIC_API_URL=서버_API_베이스_URL
+NEXT_PUBLIC_KAKAO_REST_API_KEY=카카오_REST_API_키
+NEXT_PUBLIC_REDIRECT_URI=카카오_OAuth_리다이렉트_URL(로컬)
+NEXT_PUBLIC_KAKAO_REDIRECT_URI=카카오_OAuth_리다이렉트_URL
+```
+
+<br>
+
+<br>
+
+## 📌 데일리 팀 스크럼
+> 효과적인 협업을 위해 매일 스크럼을 진행하며, 공유된 내용은 노션 문서로 체계적으로 기록합니다.
+
+#### 🗓️ 시간표
+
+|      요일       |   시간    |
+| :-------------: | :-------: |
+|     화요일      | **13:00** |
+| 월·수·목·금·토 | **13:30** |
+
+<br>
+
+## 👥 팀원 소개
+
+<table align="center">
+  <tbody>
+    <tr>
+      <!-- 팀원 1 -->
+      <td align="center" width="200">
+        <a href="https://github.com/huuitae">
+          <img src="https://avatars.githubusercontent.com/GITHUB_USERNAME_1" width="100" height="100"/><br/>
+          <strong>황휘태 (팀장)</strong>
+        </a>
+        <ul style="list-style: none; padding: 0; margin-top: 8px;">
+          <li>담당 작업 1</li>
+          <li>담당 작업 2</li>
+          <li>담당 작업 3</li>
+        </ul>
+      </td>
+      <!-- 팀원 2 -->
+      <td align="center" width="200">
+        <a href="https://github.com/junye0l">
+          <img src="https://avatars.githubusercontent.com/GITHUB_USERNAME_2" width="100" height="100"/><br/>
+          <strong>김준열</strong>
+        </a>
+        <ul style="list-style: none; padding: 0; margin-top: 8px;">
+          <li>담당 작업 1</li>
+          <li>담당 작업 2</li>
+          <li>담당 작업 3</li>
+        </ul>
+      </td>
+      <!-- 팀원 3 -->
+      <td align="center" width="200">
+        <a href="https://github.com/JinHyuk-Kim66">
+          <img src="https://avatars.githubusercontent.com/GITHUB_USERNAME_3" width="100" height="100"/><br/>
+          <strong>김진혁</strong>
+        </a>
+        <ul style="list-style: none; padding: 0; margin-top: 8px;">
+          <li>담당 작업 1</li>
+          <li>담당 작업 2</li>
+          <li>담당 작업 3</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <!-- 팀원 4 -->
+      <td align="center" width="200">
+        <a href="https://github.com/onesiin">
+          <img src="https://avatars.githubusercontent.com/GITHUB_USERNAME_4" width="100" height="100"/><br/>
+          <strong>정철종</strong>
+        </a>
+        <ul style="list-style: none; padding: 0; margin-top: 8px;">
+          <li>담당 작업 1</li>
+          <li>담당 작업 2</li>
+         <li>담당 작업 3</li>
+        </ul>
+      </td>
+      <!-- 팀원 5 -->
+      <td align="center" width="200">
+        <a href="https://github.com/leohan6540">
+          <img src="https://avatars.githubusercontent.com/GITHUB_USERNAME_5" width="100" height="100"/><br/>
+          <strong>한장희</strong>
+        </a>
+        <ul style="list-style: none; padding: 0; margin-top: 8px;">
+          <li>담당 작업 1</li>
+          <li>담당 작업 2</li>
+         <li>담당 작업 3</li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<br>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",
+    "@emotion/is-prop-valid": "^1.4.0",
     "@storybook/addon-a11y": "^10.0.2",
     "@storybook/addon-docs": "^10.0.2",
     "@storybook/addon-onboarding": "^10.0.2",

diff --git a/src/api/articles/get-article-detail.ts b/src/api/articles/get-article-detail.ts
@@ -0,0 +1,31 @@
+import axios from "axios";
+import { Article } from "@/types/article";
+
+const getArticleDetail = async (
+  articleId: number,
+  accessToken?: string
+): Promise<Article | null> => {
+  try {
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+    };
+
+    if (accessToken) {
+      headers.Authorization = `Bearer ${accessToken}`;
+    }
+
+    const response = await axios.get(
+      `${process.env.NEXT_PUBLIC_API_URL}/articles/${articleId}`,
+      { headers }
+    );
+
+    if (!response) throw new Error("데이터를 불러오지 못했습니다.");
+
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
+
+export default getArticleDetail;
diff --git a/src/api/task/get-task-detail.ts b/src/api/task/get-task-detail.ts
@@ -1,11 +1,38 @@
 import instance from "@/utils/axios";
+import { notFound } from "next/navigation";
+
+export const fetchTaskDetail = async (
+  groupId: number,
+  taskListId: number,
+  taskId: number,
+  token: string
+) => {
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/groups/${groupId}/task-lists/${taskListId}/tasks/${taskId}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    if (response.status === 404) notFound();
+
+    return response.json();
+  } catch (error) {
+    throw error;
+  }
+};
 
 /**
  * @author hwitae
  * @description 할 일 상세 정보를 조회합니다.
  * @param taskId 할 일 ID
  */
-const getTaskDetail = async (
+export const getTaskDetail = async (
   groupId: number,
   taskListId: number,
   taskId: number
@@ -15,12 +42,8 @@ const getTaskDetail = async (
       `/groups/${groupId}/task-lists/${taskListId}/tasks/${taskId}`
     );
 
-    if (!response) throw new Error("데이터를 불러오지 못했습니다.");
-
     return response.data;
   } catch (error) {
-    console.error(error);
+    throw error;
   }
 };
-
-export default getTaskDetail;
diff --git a/src/api/task/get-task-list.ts b/src/api/task/get-task-list.ts
@@ -1,7 +1,31 @@
 import { TaskList } from "@/types/taskList";
 import instance from "@/utils/axios";
 
-const getTaskList = async (
+export const fetchTaskList = async (
+  groupId: number,
+  taskListId: number,
+  token: string
+) => {
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/groups/${groupId}/task-lists/${taskListId}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    return response.json();
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export const getTaskList = async (
   groupId: number,
   taskListId: number,
   date?: string
@@ -15,5 +39,3 @@ const getTaskList = async (
     throw error;
   }
 };
-
-export default getTaskList;