const [state, setState] = useState(initialValue);

const [projectsState, setProjectsState] = useState({
  selectedProjectId: undefined, 
  projects: [] 
});

function handleStartAddProject() {
  setProjectsState(prevState => {
    return {
      ...prevState, // 기존의 projects 배열 등 이전 상태 복사
      selectedProjectId: null, // 새 프로젝트 작성 모드로 전환
    };
  });
}

// App.jsx 내부
<ProjectSidebar onStartAddProject={handleStartAddProject} />
<NoProjectSelected onStartAddProject={handleStartAddProject} />

let content;

if (projectsState.selectedProjectId === null) {
  content = <NewProject />;
} else if (projectsState.selectedProjectId === undefined) {
  content = <NoProjectSelected onStartAddProject={handleStartAddProject} />;
}

return (
  <main className="h-screen my-8 flex gap-8">
    <ProjectSidebar onStartAddProject={handleStartAddProject} />
    {content}
  </main>
);

import { useState } from "react";
import NewProject from "./component/NewProject";
import ProjectSidebar from "./component/ProjectSidebar";
import NoProjectSelected from "./component/NoProjectSelected.jsx";
function App() {
  const [projectsState, setProjectsState] = useState({
    selectedProjectId: undefined, // neither adding a new project nor have a project selected
    project: [],
  });

  function handleStartAddProject() {
    setProjectsState((prevState) => {
      return {
        ...prevState,
        selectedProjectId: null,
      };
    });
  }

  let content;

  if (projectsState.selectedProjectId === null) {
    content = <NewProject />;
  } else if (projectsState.selectedProjectId === undefined) {
    content = <NoProjectSelected onStartAddProject={handleStartAddProject} />;
  }

  return (
    <main className="flex flex-row h-screen gap-8 my-8">
      {/* <h1 className="my-8 text-5xl font-bold text-center">Hello World</h1>
       */}
      <ProjectSidebar onStartAddProject={handleStartAddProject} />
      {/* <NoProjectSelected onStartAddProject={handleStartAddProject} /> */}
      {content}
    </main>
  );
}

export default App;