コーディング自動化基盤

概要¶

レジュメ変換システムのフロントエンドコンポーネント構造を詳細に定義します。各コンポーネントの詳細な責務、props、状態管理、内部構造などを明確に規定します。

作業内容¶

1. ResumeConverterコンポーネント詳細化

   • コンポーネントの詳細構造

   interface ResumeData {
     basicInfo: {
       name: string;
       nameReading: string;
       birthDate: string;
       // ...その他の基本情報フィールド
     };
     education: Array<{
       school: string;
       department: string;
       period: { start: string; end: string };
       status: string;
     }>;
     // ...その他のデータ構造
   }
   
   interface GeneratedDocument {
     type: 'resume' | 'cv';
     htmlContent: string;
   }
   
   const ResumeConverter: React.FC = () => {
     // 状態定義
     const [file, setFile] = useState<File | null>(null);
     const [filePreview, setFilePreview] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [resumeData, setResumeData] = useState<ResumeData | null>(null);
     const [generatedDocuments, setGeneratedDocuments] = useState<GeneratedDocument[]>([]);
     // ...その他の状態
   
     // 関数定義
     const onDrop = useCallback((acceptedFiles: File[]) => {
       // ファイルドロップ処理
     }, []);
   
     const processResume = async () => {
       // レジュメ処理フロー
     };
   
     // レンダリング
     return (
       <div className="resume-converter">
         {/* UI構造 */}
       </div>
     );
   };
   

   • propsとイベントハンドラの詳細
   • 内部状態管理の詳細
   • ライフサイクル管理

2. DocumentEditorコンポーネント詳細化

   • コンポーネントの詳細構造

   interface DocumentEditorProps {
     documentType: 'resume' | 'cv';
     initialContent: string;
     onSave: (content: string) => Promise<boolean>;
     resumeId: string;
   }
   
   const DocumentEditor: React.FC<DocumentEditorProps> = ({
     documentType,
     initialContent,
     onSave,
     resumeId
   }) => {
     // 状態定義
     const [content, setContent] = useState(initialContent);
     const [isSaving, setIsSaving] = useState(false);
     // ...その他の状態
   
     // 関数定義
     const handleContentChange = (newContent: string) => {
       // 内容変更処理
     };
   
     const saveDocument = async () => {
       // 保存処理
     };
   
     // レンダリング
     return (
       <div className="document-editor">
         {/* エディタUI */}
       </div>
     );
   };
   

   • エディタ機能の詳細
   • 保存・自動保存ロジック
   • スタイル適用方法

3. PDFViewerコンポーネント詳細化

   • コンポーネントの詳細構造

   interface PDFViewerProps {
     resumeId: string;
     documentType: 'resume' | 'cv';
   }
   
   const PDFViewer: React.FC<PDFViewerProps> = ({
     resumeId,
     documentType
   }) => {
     // 状態定義
     const [pdfUrl, setPdfUrl] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState(true);
     // ...その他の状態
   
     // 関数定義
     const fetchPDF = async () => {
       // PDF取得処理
     };
   
     const downloadPDF = async () => {
       // ダウンロード処理
     };
   
     // レンダリング
     return (
       <div className="pdf-viewer">
         {/* PDFビューアUI */}
       </div>
     );
   };
   

   • PDF表示機能の詳細
   • ダウンロード機能
   • 印刷機能

4. 共通コンポーネントの詳細化

   • AppLayout, Header, Footer
   • Form関連コンポーネント
   • 通知コンポーネント
   • モーダルコンポーネント
   • その他の共通コンポーネント

5. 状態管理の詳細設計

   • コンテキスト設計

   interface AuthContextType {
     user: User | null;
     isAuthenticated: boolean;
     login: (email: string, password: string) => Promise<boolean>;
     logout: () => void;
   }
   
   const AuthContext = createContext<AuthContextType | undefined>(undefined);
   
   export const AuthProvider: React.FC<{children: React.ReactNode}> = ({ children }) => {
     // 認証状態管理
   };
   
   export const useAuth = () => {
     const context = useContext(AuthContext);
     if (context === undefined) {
       throw new Error('useAuth must be used within an AuthProvider');
     }
     return context;
   };
   

   • カスタムフック定義
   • コンテキスト階層

成果物¶

• 詳細コンポーネント仕様書
• TypeScript型定義ファイル
• コンポーネント階層図
• 状態管理設計書
• コンポーネント間の依存関係図

技術スタック¶

• React
• TypeScript
• Material-UI
• TailwindCSS
• React Context

参照¶

• 親チケット: #471（フロントエンド基盤構築）
• 関連チケット: #488（フロントエンド環境構築）
• 関連チケット: #490（状態管理基盤構築）
• 関連チケット: #492（共通コンポーネント実装）