diff --git a/package.json b/package.json
index 69caf29..08c103a 100644
--- a/package.json
+++ b/package.json
@@ -5,31 +5,25 @@
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
- "@reduxjs/toolkit": "^2.3.0",
"@tanstack/react-query": "^5.59.20",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
- "antd": "^5.21.5",
"axios": "^1.7.7",
- "highlight.js": "^11.10.0",
"jwt-decode": "^4.0.0",
"lucide-react": "^0.454.0",
"markdown-it": "^14.1.0",
"markdown-it-anchor": "^9.2.0",
- "markdown-it-mermaid": "^0.2.5",
- "markdown-it-toc-done-right": "^4.2.0",
"mermaid": "^11.4.1",
"normalize.css": "^8.0.1",
+ "prismjs": "^1.29.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
- "react-markdown": "^9.0.1",
"react-modal": "^3.16.1",
"react-query": "^3.39.3",
"react-redux": "^9.1.2",
"react-router-dom": "^6.27.0",
"react-scripts": "5.0.1",
- "remark-html": "^16.0.1",
"styled-components": "^6.1.13",
"styled-reset": "^4.5.2",
"web-vitals": "^2.1.0",
@@ -60,6 +54,7 @@
]
},
"devDependencies": {
- "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+ "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+ "source-map-explorer": "^2.5.3"
}
}
diff --git a/public/favicon.ico b/public/favicon.ico
index a11777c..d8bc06b 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index 6923a20..6cd29ba 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,8 +4,21 @@
+
-
+
+
+
+
+
+
+
OAuthProvider
- OAuthProvider --> OAuthClient
- OAuthProvider --> OAuthUriProvider
- OAuthClient --> OAuthMember
-\`\`\`
-`;
-
-
-
-
-const DocsContent = () => {
-
- return (
- <>
-
-
-
-
- 왼쪽 패널
-
-
- {Array.from({ length: 25 }).map((_, i) => (
- -
- 항목 {i + 1}
-
- ))}
-
-
-
-
-
- 오른쪽 패널
-
-
- {/* {Array.from({ length: 25 }).map((_, i) => (
-
- 콘텐츠 {i + 1}
-
- ))} */}
-
- {markdownText}
-
-
-
-
-
-
-
- {/* 오른쪽 splitter */}
-
-
- 왼쪽 패널
-
-
- {Array.from({ length: 25 }).map((_, i) => (
- -
- 항목 {i + 1}
-
- ))}
-
-
-
-
-
- 오른쪽 패널
-
-
- {Array.from({ length: 25 }).map((_, i) => (
-
- 콘텐츠 {i + 1}
-
- ))}
-
-
-
-
-
-
- >
- )
-}
-
-export default DocsContent;
diff --git a/src/components/organisms/DocsContent/DocsContent.styles.js b/src/components/organisms/DocsContent/DocsContent.styles.js
deleted file mode 100644
index 3301595..0000000
--- a/src/components/organisms/DocsContent/DocsContent.styles.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import styled from 'styled-components';
-import _ from '../../../config/index.js';
-export const ContentStyle = styled.div`
- padding-top: ${_.HEADER.TOTAL_DVH}dvh;
- width: 100dvw;
- height: 100dvh;
- display: flex;
- justify-content: center;
-`;
-
-export const PanelContent = styled.div`
- max-height: 100dvh;
- display: flex;
- flex-direction: column;
- height: 100%;
-`;
-
-export const LeftPanelContent = styled(PanelContent)`
- background-color: transparent;
-`;
-
-export const RightPanelContent = styled(PanelContent)`
- background-color: rgb(39 39 42);
- border-radius: 0.75rem;
-`;
-
-export const RightTitle = styled.div`
- height: 4dvh;
- display: flex;
- padding: 1rem;
- border-bottom: 1px solid #3f3f46;
- gap: 0.5rem;
- align-items: center;
- justify-content: space-between;
- font-size: 1.2rem;
-`;
-
-export const RightContentWrapper = styled.div`
- padding: 0 1rem;
- overflow: hidden;
- max-height: 100dvh;
-`;
-
-export const RightContent = styled.div`
- padding: 0.75rem 1rem;
- width: 100%;
- outline: none;
- /* Firefox */
- scrollbar-width: thin;
- scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
- position: relative;
- overflow: hidden;
- overflow-y: scroll;
- height: 100%;
- /* Chrome, Safari, Edge */
- &::-webkit-scrollbar {
- width: 6px;
- }
-
- &::-webkit-scrollbar-track {
- background: transparent;
- }
-
- &::-webkit-scrollbar-thumb {
- background-color: rgba(255, 255, 255, 0.3);
- border-radius: 3px;
-
- &:hover {
- background-color: rgba(255, 255, 255, 0.5);
- }
- }
-`;
-
-export const Title = styled.h2`
- font-size: 1.125rem;
- font-weight: 600;
- margin-bottom: 1rem;
-`;
-
-export const Item = styled.div`
- padding: 0.75rem;
- background-color: white;
- border-radius: 0.375rem;
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
- margin-bottom: 0.5rem;
-`;
-
-export const Content = styled.div`
- padding: 1rem;
- background-color: #f9fafb38;
- border-radius: 0.375rem;
- margin-bottom: 1rem;
-`;
diff --git a/src/components/organisms/DocsContent/FlexSplitter.jsx b/src/components/organisms/DocsContent/FlexSplitter.jsx
deleted file mode 100644
index 95563d4..0000000
--- a/src/components/organisms/DocsContent/FlexSplitter.jsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import {
- Container, LeftPanel,
- Divider, DividerLine,
- RightPanel,
- NarrowPanel, WidePanel
-} from './FlexSplitter.styles.js'
-
-
-const FlexSplitter = ({
- splitterWidth = '100%',
- initialLeftWidth = 250,
- minWidth = 150,
- maxWidth = 800,
- position = 'left',
- children
-}) => {
- const [isDragging, setIsDragging] = useState(false);
- const [leftWidth, setLeftWidth] = useState(initialLeftWidth);
- const [startX, setStartX] = useState(0);
- const [startWidth, setStartWidth] = useState(0);
-
- const handleMouseDown = useCallback((e) => {
- setIsDragging(true);
- setStartX(e.clientX);
- setStartWidth(leftWidth);
- e.preventDefault();
- }, [leftWidth]);
-
- const handleMouseMove = useCallback((e) => {
- if (!isDragging) return;
-
- const deltaX = e.clientX - startX;
- // position에 따라 deltaX의 부호를 반대로 적용
- const adjustedDelta = position === 'left' ? deltaX : -deltaX;
- const newWidth = Math.min(Math.max(startWidth + adjustedDelta, minWidth), maxWidth);
- setLeftWidth(newWidth);
- }, [isDragging, startX, startWidth, minWidth, maxWidth, position]);
-
- const handleMouseUp = useCallback(() => {
- setIsDragging(false);
- }, []);
-
- useEffect(() => {
- if (isDragging) {
- window.addEventListener('mousemove', handleMouseMove);
- window.addEventListener('mouseup', handleMouseUp);
-
- return () => {
- window.removeEventListener('mousemove', handleMouseMove);
- window.removeEventListener('mouseup', handleMouseUp);
- };
- }
- }, [isDragging, handleMouseMove, handleMouseUp]);
-
- return (
-
- {
- position === 'left' ?
- <>
-
- {children[0]}
-
-
-
-
-
- {children[1]}
-
- >
- :
- <>
-
- {children[0]}
-
-
-
-
-
- {children[1]}
-
- >
- }
-
-
-
- );
-};
-
-export default FlexSplitter;
\ No newline at end of file
diff --git a/src/components/organisms/DocsContent/FlexSplitter.styles.js b/src/components/organisms/DocsContent/FlexSplitter.styles.js
deleted file mode 100644
index f701c4e..0000000
--- a/src/components/organisms/DocsContent/FlexSplitter.styles.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import styled from 'styled-components';
-// Divider에서 Container 참조
-
-export const Container = styled.div`
- display: flex;
- height: 100%;
- width: ${(props) => props.splitterWidth};
- /* width: 50%; */
- background-color: rgb(39 39 42);
- border-radius: 0.75rem;
- transition: background-color 0.2s ease;
-`;
-
-export const Panel = styled.div`
- height: 100%;
- overflow: hidden;
- background-color: rgb(39 39 42);
- border-radius: 0.75rem;
-`;
-
-export const NarrowPanel = styled(Panel)`
- flex: 0 0 ${(props) => props.width}px;
- width: ${(props) => props.width}px;
- transition: ${(props) => (props.isDragging ? 'none' : 'all 0.1s ease')};
-`;
-
-export const WidePanel = styled(Panel)`
- flex: 1;
-`;
-
-export const Divider = styled.div`
- flex: 0 0 clamp(10px, auto, 1rem);
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: col-resize;
- user-select: none;
- background-color: rgb(39 39 42);
- transition: background-color 0.2s ease;
-
- border-left: 1px solid rgb(63 63 70 / 70%);
- border-right: 1px solid rgb(63 63 70 / 70%);
-
- &:hover {
- color: white;
- background-color: #0e0c15;
- }
-`;
-
-export const DividerLine = styled.div`
- /* width: 2px;
- height: 32px;
- background-color: #3f3f46;
- border-radius: 9999px; */
- width: 10px;
- height: 100%;
- background: transparent;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: col-resize;
-
- &::after {
- content: '︙';
- color: ${(props) => (props.isDragging ? '#fff' : '#adb5bd')};
- font-size: 12px;
- font-weight: bold;
- }
- &:hover {
- &::after {
- color: #fff;
- }
- }
-`;
diff --git a/src/components/organisms/DocsContent/test.md b/src/components/organisms/DocsContent/test.md
deleted file mode 100644
index ca4ed89..0000000
--- a/src/components/organisms/DocsContent/test.md
+++ /dev/null
@@ -1,252 +0,0 @@
-# Comprehensive Documentation for the Auth Service Code
-
-## 1. Overall Structure
-
-### High-Level Overview
-
-The `AuthService` codebase is part of an authentication module that integrates with various OAuth providers to manage user authentication and token generation. It interacts with member services to create or retrieve user accounts based on OAuth member information.
-
-### Purpose and Function
-
-The primary purpose of the `AuthService` is to handle authentication processes, including:
-
-- Generating tokens using OAuth codes.
-- Creating or retrieving members based on OAuth member data.
-- Generating OAuth URIs for login.
-- Renewing access tokens and managing refresh tokens.
-
-### Interaction Between Components
-
-- **OAuthProvider**: Provides the necessary OAuth client and URI provider based on the provider name.
-- **MemberService**: Manages member-related operations, such as saving new members and checking for existing members.
-- **TokenManager**: Handles the creation and management of access and refresh tokens.
-
-### Mermaid Diagram
-
-```mermaid
-classDiagram
- class AuthService {
- +generateTokenWithCode(code: String, providerName: String): MemberToken
- +generateUri(providerName: String): String
- +generateRenewalAccessToken(renewalAccessTokenRequest: RenewalAccessTokenRequest): RenewalAccessTokenResponse
- +removeRefreshToken(logoutRequest: LogoutRequest): void
- +extractMemberId(accessToken: String): Long
- }
-
- class OAuthProvider {
- +getOauthClient(providerName: String): OAuthClient
- +getOAuthUriProvider(providerName: String): OAuthUriProvider
- +getSocialType(provider: String): SocialType
- }
-
- class MemberService {
- +existsByEmail(email: String): boolean
- +save(member: Member): void
- +findByEmail(email: String): Member
- }
-
- class TokenManager {
- +createMemberToken(memberId: Long): MemberToken
- +generateRenewalAccessToken(refreshToken: String): RenewalToken
- +getMemberId(accessToken: String): Long
- +removeRefreshToken(refreshToken: String): void
- }
-
- AuthService --> OAuthProvider
- AuthService --> MemberService
- AuthService --> TokenManager
-```
-
-## 2. Strategy Pattern Implementation
-
-### Strategy Pattern Overview
-
-The strategy pattern is implemented through the use of interfaces for OAuth clients and URI providers, allowing for different implementations based on the OAuth provider.
-
-### Strategy Interface and Concrete Classes
-
-- **OAuthClient**: Interface for OAuth clients that defines methods for retrieving OAuth member information.
-- **OAuthMember**: Interface representing an OAuth member with methods to get social login ID, email, and profile image URL.
-- **OAuthProvider**: Interface that provides methods to get specific OAuth clients and URI providers based on the provider name.
-- **OAuthUriProvider**: Interface for generating OAuth URIs.
-
-### Context Class
-
-- **AuthService**: Acts as the context that uses the strategy interfaces to perform authentication tasks.
-
-### Class Diagram
-
-```mermaid
-classDiagram
- class OAuthClient {
- +getOAuthMember(code: String): OAuthMember
- +isSame(oAuthProviderName: String): boolean
- }
-
- class OAuthMember {
- +getSocialLoginId(): String
- +getEmail(): String
- +getProfileImageUrl(): String
- }
-
- class OAuthProvider {
- +getOauthClient(providerName: String): OAuthClient
- +getOAuthUriProvider(providerName: String): OAuthUriProvider
- +getSocialType(provider: String): SocialType
- }
-
- class OAuthUriProvider {
- +generateUri(): String
- +isSame(provider: String): boolean
- }
-
- class AuthService {
- +generateTokenWithCode(code: String, providerName: String): MemberToken
- +generateUri(providerName: String): String
- }
-
- AuthService --> OAuthProvider
- OAuthProvider --> OAuthClient
- OAuthProvider --> OAuthUriProvider
- OAuthClient --> OAuthMember
-```
-
-## 3. Detailed Component Documentation
-
-### a. Classes
-
-#### 1. `AuthService`
-
-- **Purpose**: Manages authentication processes using OAuth providers.
-- **Attributes**:
- - `OAuthProvider oAuthProvider`: Interface for obtaining OAuth clients and URIs.
- - `MemberService memberService`: Service for managing member data.
- - `TokenManager tokenManager`: Service for managing tokens.
-- **Role**: Acts as the main service for authentication, coordinating between OAuth providers and member services.
-
-#### 2. `OAuthClient`
-
-- **Purpose**: Interface for OAuth clients.
-- **Methods**:
- - `OAuthMember getOAuthMember(final String code)`: Retrieves an OAuth member based on the provided code.
- - `boolean isSame(final String oAuthProviderName)`: Checks if the client is the same as the given provider name.
-
-#### 3. `OAuthMember`
-
-- **Purpose**: Represents an OAuth member.
-- **Methods**:
- - `String getSocialLoginId()`: Returns the social login ID.
- - `String getEmail()`: Returns the email of the member.
- - `String getProfileImageUrl()`: Returns the profile image URL.
-
-#### 4. `OAuthProvider`
-
-- **Purpose**: Provides OAuth clients and URI providers.
-- **Methods**:
- - `OAuthClient getOauthClient(final String providerName)`: Returns the OAuth client for the specified provider.
- - `OAuthUriProvider getOAuthUriProvider(final String providerName)`: Returns the URI provider for the specified provider.
- - `SocialType getSocialType(final String provider)`: Returns the social type for the specified provider.
-
-#### 5. `OAuthUriProvider`
-
-- **Purpose**: Generates OAuth URIs.
-- **Methods**:
- - `String generateUri()`: Generates the OAuth URI.
- - `boolean isSame(final String provider)`: Checks if the provider matches.
-
-### b. Methods and Functions
-
-#### 1. `generateTokenWithCode`
-
-- **Purpose**: Generates a member token using an OAuth code.
-- **Parameters**:
- - `String code`: The OAuth code received from the provider.
- - `String providerName`: The name of the OAuth provider.
-- **Return Value**: `MemberToken`: The generated member token.
-- **Code Example**:
-
-```java
-MemberToken token = authService.generateTokenWithCode("oauth_code", "google");
-```
-
-#### 2. `generateUri`
-
-- **Purpose**: Generates an OAuth URI for login.
-- **Parameters**:
- - `String providerName`: The name of the OAuth provider.
-- **Return Value**: `String`: The generated OAuth URI.
-- **Code Example**:
-
-```java
-String uri = authService.generateUri("google");
-```
-
-#### 3. `generateRenewalAccessToken`
-
-- **Purpose**: Generates a new access token using a refresh token.
-- **Parameters**:
- - `RenewalAccessTokenRequest renewalAccessTokenRequest`: The request containing the refresh token.
-- **Return Value**: `RenewalAccessTokenResponse`: The response containing the new access token.
-- **Code Example**:
-
-```java
-RenewalAccessTokenResponse response = authService.generateRenewalAccessToken(new RenewalAccessTokenRequest("refresh_token"));
-```
-
-#### 4. `removeRefreshToken`
-
-- **Purpose**: Removes a refresh token.
-- **Parameters**:
- - `LogoutRequest logoutRequest`: The request containing the refresh token to be removed.
-- **Return Value**: `void`
-- **Code Example**:
-
-```java
-authService.removeRefreshToken(new LogoutRequest("refresh_token"));
-```
-
-#### 5. `extractMemberId`
-
-- **Purpose**: Extracts the member ID from an access token.
-- **Parameters**:
- - `String accessToken`: The access token from which to extract the member ID.
-- **Return Value**: `Long`: The extracted member ID.
-- **Code Example**:
-
-```java
-Long memberId = authService.extractMemberId("access_token");
-```
-
-## 4. Implementation Flow
-
-### Sequence Diagram
-
-```mermaid
-sequenceDiagram
- participant Client
- participant AuthService
- participant OAuthProvider
- participant MemberService
- participant TokenManager
-
- Client->>AuthService: generateTokenWithCode(code, providerName)
- AuthService->>OAuthProvider: getOauthClient(providerName)
- OAuthProvider->>AuthService: OAuthClient
- AuthService->>OAuthClient: getOAuthMember(code)
- OAuthClient->>AuthService: OAuthMember
- AuthService->>MemberService: findOrCreateMember(oAuthMember, providerName)
- MemberService->>AuthService: Member
- AuthService->>TokenManager: createMemberToken(memberId)
- TokenManager->>AuthService: MemberToken
- AuthService->>Client: MemberToken
-```
-
-### Explanation of Flow
-
-1. The client requests a token by calling `generateTokenWithCode` on the `AuthService`.
-2. The `AuthService` retrieves the appropriate `OAuthClient` from the `OAuthProvider`.
-3. The `AuthService` uses the `OAuthClient` to get the `OAuthMember` using the provided code.
-4. The `AuthService` checks if the member exists or creates a new member using the `MemberService`.
-5. Finally, the `AuthService` generates a member token using the `TokenManager` and returns it to the client.
-
-This documentation provides a comprehensive overview of the `AuthService` codebase, detailing its structure, strategy pattern implementation, component documentation, and implementation flow. It serves as a guide for both new and experienced developers to understand and work with the code effectively.
diff --git a/src/components/organisms/HomeContent/HomeContent.jsx b/src/components/organisms/HomeContent/HomeContent.jsx
index 4bf5f71..3162b32 100644
--- a/src/components/organisms/HomeContent/HomeContent.jsx
+++ b/src/components/organisms/HomeContent/HomeContent.jsx
@@ -1,5 +1,5 @@
// src/components/organisms/HomeContent/HomeContent.jsx
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
import { Image, RotateTypo, Button, Typo } from "../../index.js"
import { useNavigate } from 'react-router-dom';
@@ -8,6 +8,9 @@ import styled from 'styled-components';
import mainBannerImg from "../../../assets/images/landing-hero-min.png";
import bgShapeFive from "../../../assets/images/bg-shape-five.png";
import bgShapeFour from "../../../assets/images/bg-shape-four.png";
+import chattingLanding from "../../../assets/images/chatting-landing.png";
+import docuLanding from "../../../assets/images/docu-landing.png";
+import readmeLanding from "../../../assets/images/readme-landing.png";
import { Check } from "lucide-react"
import {
HomeWrapper, MainSectionWrapper, HomeLayout,
@@ -22,6 +25,13 @@ import useAuthStore from '../../../store/authStore.js';
const DocsContent = () => {
const navigate = useNavigate();
+ useEffect(() => {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ });
+ }, []);
+
//Zustand store에서 현재 사용자 정보를 가져옵니다.
const {
isAuthenticated
@@ -98,20 +108,22 @@ const DocsContent = () => {
-
- Automated AI-powered tools to generate Code & Api documentation from your source code files
+ AI가 Java 프로젝트를 분석하여 깔끔한 문서를 자동으로 생성합니다.
-
- Conditional Generative Models
+ 더 이상 수동으로 문서를 작성하지 마세요.
-