Merge pull request #60 from prgrms-aibe-devcourse/refactor/59-nav-footer-reconstruct

jean2077 · web-flow · commit 057903885221 · 2026-06-01T17:03:22.000+09:00
[Refactor] 공통 네비게이션 및 푸터 정보 구조 정리
diff --git a/.claude/launch.json b/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "codedock-dev",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 5173
+    }
+  ]
+}
diff --git a/README.md b/README.md
@@ -1,11 +1,111 @@
+# CodeDock
 
-  # 안씨네 머슴들 - 수정본
+> 코드가 안전하게 출항하는 곳, CodeDock
 
-  This is a code bundle for 안씨네 머슴들 - 수정본. The original project is available at https://www.figma.com/design/UjIbte4ow5gEtST62Zn5gx/%EC%95%88%EC%94%A8%EB%84%A4-%EB%A8%B8%EC%8A%B4%EB%93%A4---%EC%88%98%EC%A0%95%EB%B3%B8.
+CodeDock은 PR 리뷰, 보안 점검, API 문서화, ERD 관리, 팀 채팅을 하나의 흐름으로 연결하는 AI 개발 워크플로우 플랫폼입니다.
+팀원이 코드 변경의 맥락을 빠르게 파악하고, 리뷰와 문서 작업을 같은 워크스페이스 안에서 이어갈 수 있도록 돕습니다.
 
-  ## Running the code
+<p>
+  <img alt="React" src="https://img.shields.io/badge/React-18.3.1-61DAFB?style=flat-square&logo=react&logoColor=061015" />
+  <img alt="Vite" src="https://img.shields.io/badge/Vite-6.3.5-646CFF?style=flat-square&logo=vite&logoColor=white" />
+  <img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-TSX-3178C6?style=flat-square&logo=typescript&logoColor=white" />
+  <img alt="Tailwind CSS" src="https://img.shields.io/badge/Tailwind_CSS-4.x-38BDF8?style=flat-square&logo=tailwindcss&logoColor=061015" />
+</p>
 
-  Run `npm i` to install the dependencies.
+## 주요 기능
+
+| 영역 | 설명 |
+| --- | --- |
+| 랜딩 / 인증 | CodeDock 브랜딩, 채팅형 로그인/회원가입, 테마/언어 전환 |
+| 대시보드 | 팀과 리포지토리 기준의 리뷰 현황, 위험 신호, 최근 활동 확인 |
+| 워크스페이스 | 채널 기반 협업, 팀 채팅, 리포지토리별 작업 공간 |
+| PR 리뷰 | PR 목록, AI 리뷰 요약, Diff 확인, 라인 코멘트와 스레드 |
+| API 명세 | Swagger UI 기반 API 명세 확인 |
+| ERD | Mermaid 기반 ERD 작성, 미리보기, 확대/축소, 다운로드 |
+| 문서 | PR 리뷰 요약, API 변경 명세, ERD 변경 기록 등 템플릿 기반 문서 작성 |
+| 프로필 / 설정 | 사용자 프로필, GitHub 연동 관리, 테마 설정 |
+
+## 기술 스택
+
+| 분류 | 사용 기술 |
+| --- | --- |
+| Core | React, TypeScript, Vite |
+| Routing | React Router |
+| UI | Tailwind CSS, Radix UI, lucide-react |
+| Animation | motion |
+| Diagram / Docs | Mermaid, Swagger UI |
+| Interaction | react-dnd, resizable panels |
+
+## 시작하기
+
+### 요구 환경
+
+- Node.js 18 이상 권장
+- npm
+
+### 설치
+
+```bash
+npm install
+```
+
+### 개발 서버 실행
+
+```bash
+npm run dev
+```
+
+또는:
+
+```bash
+npm start
+```
+
+기본 Vite 주소는 `http://localhost:5173` 입니다.
+
+### 빌드
+
+```bash
+npm run build
+```
+
+## 주요 라우트
+
+| Route | 화면 |
+| --- | --- |
+| `/` | 랜딩 페이지 |
+| `/login` | 로그인 |
+| `/signup` | 회원가입 |
+| `/workspace` | 대시보드 |
+| `/chat` | 워크스페이스 / 팀 채팅 |
+| `/prs` | PR 목록 |
+| `/pr/:id` | PR 리뷰 룸 |
+| `/api-spec` | API 명세 |
+| `/erd` | ERD |
+| `/docs` | 문서 |
+| `/profile` | 프로필 |
+| `/settings` | 설정 |
+
+## 프로젝트 구조
+
+```text
+src/
+  app/
+    components/      # 공통 UI, 레이아웃, 채팅/리뷰 패널
+    contexts/        # 테마, 언어 컨텍스트
+    pages/           # 라우트 단위 페이지
+    i18n/            # 다국어 번역 데이터
+  styles/            # 전역 스타일, 테마, 폰트
+```
+
+## 협업 규칙
+
+- 이슈 단위로 브랜치를 생성합니다.
+- 커밋 메시지는 `feat:`, `fix:`, `refactor:`, `docs:`, `chore:` 등의 prefix를 사용합니다.
+- PR은 최소 1명 이상의 리뷰 승인을 받은 뒤 병합합니다.
+- 로컬 설정 파일, 빌드 결과물, 로그 파일은 커밋하지 않습니다.
+
+## 팀
+
+AIBE5 Final Project Team 1 Frontend
 
-  Run `npm run dev` to start the development server.
-  
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
@@ -1,74 +1,56 @@
-import { Github, Heart, Linkedin, Mail, Twitter } from "lucide-react";
+import { Github, Heart, Mail } from "lucide-react";
 import { Link } from "react-router";
 import { CodeDockWordmark } from "./CodeDockWordmark";
 import { CoffeeLogo } from "./CoffeeLogo";
 import { useLanguage } from "../contexts/LanguageContext";
 import { useTheme } from "../contexts/ThemeContext";
 
 const footerLinks = {
-  product: [
-    { ko: "기능", en: "Features", path: "/#features" },
-    { ko: "대시보드", en: "Dashboard", path: "/workspace" },
-    { ko: "PR 리뷰", en: "PR Review", path: "/prs" },
+  navigation: [
+    { ko: "팀 대시보드", en: "Team Dashboard", path: "/workspace" },
+    { ko: "협업 워크스페이스", en: "Collaboration Workspace", path: "/chat" },
     { ko: "API 명세", en: "API Spec", path: "/api-spec" },
     { ko: "ERD", en: "ERD", path: "/erd" },
     { ko: "문서", en: "Docs", path: "/docs" }
   ],
-  company: [
-    { ko: "소개", en: "About", path: "/about" },
-    { ko: "소식", en: "Blog", path: "/blog" },
-    { ko: "채용", en: "Careers", path: "/careers" },
-    { ko: "문의", en: "Contact", path: "/contact" }
-  ],
-  resources: [
-    { ko: "문서", en: "Documentation", path: "/docs" },
-    { ko: "API 참조", en: "API Reference", path: "/api-spec" },
-    { ko: "튜토리얼", en: "Tutorials", path: "/tutorials" },
-    { ko: "커뮤니티", en: "Community", path: "/community" }
-  ],
-  legal: [
-    { ko: "개인정보", en: "Privacy", path: "/privacy" },
-    { ko: "이용약관", en: "Terms", path: "/terms" },
-    { ko: "보안", en: "Security", path: "/security" },
-    { ko: "쿠키", en: "Cookies", path: "/cookies" }
+  account: [
+    { ko: "프로필", en: "Profile", path: "/profile" },
+    { ko: "설정", en: "Settings", path: "/settings" }
   ]
 };
 
 const socialLinks = [
-  { icon: Github, href: "https://github.com", label: "GitHub" },
-  { icon: Twitter, href: "https://twitter.com", label: "Twitter" },
-  { icon: Linkedin, href: "https://linkedin.com", label: "LinkedIn" },
-  { icon: Mail, href: "mailto:contact@coffeeting.dev", label: "Email" }
+  { icon: Github, href: "https://github.com/prgrms-aibe-devcourse/AIBE5_FinalProject_Team1_FE", label: "GitHub" },
+  { icon: Mail, href: "mailto:contact@codedock.dev", label: "Email" }
 ];
 
 export function Footer() {
   const currentYear = new Date().getFullYear();
   const { colors } = useTheme();
   const { language } = useLanguage();
   const isKorean = language === "ko";
+  const tone = (alpha: number) => `${colors.primary}, ${alpha})`;
   const copy = {
-    product: isKorean ? "제품" : "Product",
-    company: isKorean ? "회사" : "Company",
-    resources: isKorean ? "자료" : "Resources",
-    legal: isKorean ? "정책" : "Legal",
+    navigation: isKorean ? "메뉴" : "Menu",
+    account: isKorean ? "계정" : "Account",
     description: isKorean
-      ? "AI 기반 개발 협업 플랫폼. 코딩은 개발자가, 리뷰와 문서는 AI가 돕습니다."
+      ? "PR 리뷰, 보안 점검, 문서화를 한 흐름으로 연결하는 AI 개발 워크스페이스입니다."
       : "An AI development workflow platform for reviews, docs, and team collaboration.",
-    madeBy: isKorean ? "DevFlow Team 제작" : "by DevFlow Team",
+    madeBy: "CodeDock Team",
     rights: isKorean ? "모든 권리 보유." : "All rights reserved.",
-    madeWith: isKorean ? "제작" : "Made with"
+    madeWith: "Made with"
   };
 
-  const renderLinks = (links: typeof footerLinks.product) => (
-    <ul className="m-0 grid list-none gap-3 p-0">
+  const renderLinks = (links: typeof footerLinks.navigation) => (
+    <ul className="m-0 grid list-none gap-2 p-0">
       {links.map((link) => (
         <li key={link.path}>
           <Link
             to={link.path}
-            className="no-underline tracking-tight transition-colors"
+            className="no-underline tracking-tight transition-colors hover:text-white"
             style={{
-              fontSize: "14px",
-              fontWeight: 700,
+              fontSize: "13px",
+              fontWeight: 750,
               color: "var(--muted)"
             }}
           >
@@ -81,43 +63,46 @@ export function Footer() {
 
   return (
     <footer
-      className="relative mt-20"
+      className="relative mt-12"
       style={{
         background: `
-          radial-gradient(circle at 20% 50%, ${colors.primary}, 0.08), transparent 40%),
-          radial-gradient(circle at 80% 50%, ${colors.primary}, 0.06), transparent 40%),
-          rgba(5, 11, 20, 0.95)
+          radial-gradient(circle at 18% 40%, ${tone(0.07)}, transparent 34%),
+          radial-gradient(circle at 84% 54%, ${tone(0.05)}, transparent 36%),
+          rgba(5, 11, 20, 0.94)
         `,
-        borderTop: `1px solid ${colors.primary}, 0.15)`
+        borderTop: `1px solid ${tone(0.14)}`
       }}
     >
-      <div className="relative mx-auto w-[min(1400px,calc(100vw-36px))] px-6 py-16">
-        <div className="mb-12 grid gap-12 md:grid-cols-2 lg:grid-cols-6">
-          <div className="lg:col-span-2">
+      <div className="relative mx-auto w-[min(1180px,calc(100vw-32px))] px-4 py-8 sm:px-6 sm:py-10">
+        <div className="mb-7 grid gap-7 md:grid-cols-[minmax(0,1.5fr)_minmax(150px,0.5fr)_minmax(130px,0.45fr)]">
+          <div>
             <Link
               to="/"
-              className="mb-6 flex items-center gap-3 no-underline tracking-[-0.07em]"
+              className="mb-3 flex items-center gap-3 no-underline tracking-[-0.07em]"
               style={{
                 fontWeight: 950,
-                fontSize: "30px",
+                fontSize: "24px",
                 color: "var(--white)"
               }}
             >
               <CoffeeLogo
-                className="h-16 w-16 flex-shrink-0"
-                style={{ filter: `drop-shadow(0 0 14px ${colors.primary}, 0.3))` }}
+                className="h-12 w-12 flex-shrink-0"
+                style={{ filter: `drop-shadow(0 0 14px ${tone(0.3)})` }}
               />
               <CodeDockWordmark accentColor={colors.primaryHex} />
             </Link>
-            <p className="m-0 mb-6 leading-[1.7] tracking-tight" style={{
-              fontSize: "15px",
-              fontWeight: 700,
-              color: "var(--muted)",
-              maxWidth: "320px"
-            }}>
+            <p
+              className="m-0 mb-4 leading-[1.55] tracking-tight"
+              style={{
+                fontSize: "13px",
+                fontWeight: 700,
+                color: "var(--muted)",
+                maxWidth: "420px"
+              }}
+            >
               {copy.description}
             </p>
-            <div className="flex gap-3">
+            <div className="flex gap-2">
               {socialLinks.map((social) => {
                 const Icon = social.icon;
                 return (
@@ -127,60 +112,49 @@ export function Footer() {
                     target="_blank"
                     rel="noopener noreferrer"
                     aria-label={social.label === "Email" && isKorean ? "이메일" : social.label}
-                    className="flex h-10 w-10 items-center justify-center rounded-lg transition-all hover:scale-110"
+                    className="flex h-9 w-9 items-center justify-center rounded-lg transition-all hover:scale-110"
                     style={{
-                      background: `${colors.primary}, 0.08)`,
-                      border: `1px solid ${colors.primary}, 0.22)`,
+                      background: tone(0.08),
+                      border: `1px solid ${tone(0.22)}`,
                       color: colors.primaryHex
                     }}
                   >
-                    <Icon size={20} strokeWidth={2} />
+                    <Icon size={18} strokeWidth={2} />
                   </a>
                 );
               })}
             </div>
           </div>
 
           <div>
-            <h3 className="m-0 mb-4 tracking-tight" style={{ fontSize: "14px", fontWeight: 950, color: "var(--white)" }}>
-              {copy.product}
-            </h3>
-            {renderLinks(footerLinks.product)}
-          </div>
-
-          <div>
-            <h3 className="m-0 mb-4 tracking-tight" style={{ fontSize: "14px", fontWeight: 950, color: "var(--white)" }}>
-              {copy.company}
-            </h3>
-            {renderLinks(footerLinks.company)}
-          </div>
-
-          <div>
-            <h3 className="m-0 mb-4 tracking-tight" style={{ fontSize: "14px", fontWeight: 950, color: "var(--white)" }}>
-              {copy.resources}
+            <h3 className="m-0 mb-3 tracking-tight" style={{ fontSize: "13px", fontWeight: 950, color: "var(--white)" }}>
+              {copy.navigation}
             </h3>
-            {renderLinks(footerLinks.resources)}
+            {renderLinks(footerLinks.navigation)}
           </div>
 
           <div>
-            <h3 className="m-0 mb-4 tracking-tight" style={{ fontSize: "14px", fontWeight: 950, color: "var(--white)" }}>
-              {copy.legal}
+            <h3 className="m-0 mb-3 tracking-tight" style={{ fontSize: "13px", fontWeight: 950, color: "var(--white)" }}>
+              {copy.account}
             </h3>
-            {renderLinks(footerLinks.legal)}
+            {renderLinks(footerLinks.account)}
           </div>
         </div>
 
-        <div className="pt-8" style={{ borderTop: `1px solid ${colors.primary}, 0.15)` }}>
-          <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
-            <p className="m-0 tracking-tight" style={{ fontSize: "13px", fontWeight: 700, color: "var(--muted)" }}>
+        <div className="pt-5" style={{ borderTop: `1px solid ${tone(0.14)}` }}>
+          <div className="flex flex-col items-center justify-between gap-3 md:flex-row">
+            <p className="m-0 tracking-tight" style={{ fontSize: "12px", fontWeight: 700, color: "var(--muted)" }}>
               © {currentYear} CodeDock. {copy.rights}
             </p>
-            <p className="m-0 flex items-center gap-2 tracking-tight" style={{
-              fontSize: "13px",
-              fontWeight: 700,
-              color: "var(--muted)"
-            }}>
-              {copy.madeWith} <Heart size={16} strokeWidth={2} style={{ color: "#FF6B6B" }} fill="#FF6B6B" /> {copy.madeBy}
+            <p
+              className="m-0 flex items-center gap-2 tracking-tight"
+              style={{
+                fontSize: "12px",
+                fontWeight: 700,
+                color: "var(--muted)"
+              }}
+            >
+              {copy.madeWith} <Heart size={14} strokeWidth={2} style={{ color: "#FF6B6B" }} fill="#FF6B6B" /> {copy.madeBy}
             </p>
           </div>
         </div>
diff --git a/src/app/components/Layout.tsx b/src/app/components/Layout.tsx
