페이지 리스트 목업

리액트 현재 문제점 -> (타입스크립트와 테일윈드를 사용중임)

컴포넌트 문제

1. 사이드바를 컴포넌트로 빼다 보니 isActive가 사이드바에 직접 연결된 주소에만 연결되어 세부내용으로 들어갈 시 활성화가 사라짐

현재 생각하는 해결법 : Outlet으로 내려가는 주소말고 베이스 주소에 URL을 달자, 대신 베이스 주소로 들어가게 되면 리다이렉트로 디폴트 페이지로 이동하게

<Route index element={<Navigate to="reservedMeeting" />} /> reservedMeeting를 기본 주소로 설정 /base 밑에 라우터에 저것을 쓰면 /base 접속 시 /base/하위기본주소 로 자동 연결

• 해결

1. 글 목록 보는 것 등을 컴포넌트로 빼다 보니, 현재는 [[] [] []]이런식의 리스트 안에 리스트로 들어오게 된다 JSON 파일 -> [{} {} {}] 의 꼴로 들어올 것이고 해당 주소 매칭을 어떻게 진행할지 문제 => 특히 공동으로 사용하는 틀이다 보니 게시판 별로 들어가는 요소가 달라서 문제다
2. 현재 투표 생성했을 때 투표 내부에서 엔터를 넣으면 투표가 지워짐(해당 투표가 지워지는 것이 아닌 가장 앞에서부터 지워짐)

=> Submit이라기에는 내용 초기화는 안되는데?

useState 값이 변하지 않는다

import React, { useState, useEffect } from 'react';

interface Options { id: number; option_text: string; }

interface VoteQuestionForm { question_id: number; question_text: string; options: Options[]; }

interface VoteFormProps { question: VoteQuestionForm; voteSelection: (questionId: number, optionId: number) => void; }

const VoteForm: React.FC<VoteFormProps> = ({ question, voteSelection }) => { const [selectedItem, setSelectedItem] = useState<number>(0);

useEffect(() => { console.log('렌더링') console.log(selectedItem) },[selectedItem]) const handleOptionChange = (optionId: number) => { voteSelection(question.question_id, optionId); setSelectedItem(optionId) };

return ( <div className="mb-4"> <h2 className="text-xl font-bold mb-2">{question.question_text}</h2> {question.options.map((option) => ( <div key={option.id} className="mb-2"> <label className="flex items-center"> <input type="radio" name={vote-${question.question_id}} value={option.id} onChange={() => handleOptionChange(option.id)} onClick={() => setSelectedItem(option.id)} className="mr-2" checked={selectedItem == option.id} /> {option.option_text} </label> </div> ))} </div> ); };

export default VoteForm;