프론트엔드 스터디 대면 7주차: React 입문과 프로젝트 구조

const button = document.querySelector("#submit");
const countEl = document.querySelector("#count");
let n = 0;

button.addEventListener("click", () => {
  n++;
  countEl.textContent = n;
  if (n >= 10) button.disabled = true;
});

// 명령형: 어떻게 바꿀지 직접 지시
countEl.textContent = n;
button.disabled = n >= 10;
badge.classList.toggle("hidden", n === 0);

// 선언형: 상태에 따라 화면이 어떻게 보여야 하는지 작성
function Counter() {
  const [n, setN] = useState(0);

  return (
    <div>
      {n > 0 && <Badge count={n} />}
      <p>{n}</p>
      <button onClick={() => setN(n + 1)} disabled={n >= 10}>
        +1
      </button>
    </div>
  );
}

function Button({ label, onClick, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

<Button label="신청하기" onClick={handleApply} disabled={!canApply} />

function StudyPage() {
  return (
    <Layout>
      <Header title="스터디 목록" />
      <StudyList>
        <StudyCard title="React 스터디" status="OPEN" />
        <StudyCard title="알고리즘 스터디" status="CLOSED" />
      </StudyList>
    </Layout>
  );
}

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

function ApplyButton() {
  // UI도 있고, 서버 요청도 있고, 권한 규칙도 있고, 상태 변경도 있음
  // 버튼 하나를 고치려 했는데 서비스 전체 규칙을 건드리게 됩니다.
}

function StudyApplyButton({ study, user }) {
  const disabled =
    !user ||
    user.role !== "member" ||
    study.status !== "OPEN" ||
    study.appliedUserIds.includes(user.id) ||
    study.currentCount >= study.maxCount;

  return (
    <button
      disabled={disabled}
      className={disabled ? "bg-gray-300" : "bg-blue-500"}
    >
      신청하기
    </button>
  );
}

function StudyApplyButton({ disabled }: { disabled: boolean }) {
  return (
    <button
      disabled={disabled}
      className={disabled ? "bg-gray-300" : "bg-blue-500"}
    >
      신청하기
    </button>
  );
}

const disabled = !canApplyStudy({ study, user });

<StudyApplyButton disabled={disabled} />;

function MemberPage() {
  const [members, setMembers] = useState([]);
  const [selectedId, setSelectedId] = useState(null);

  useEffect(() => {
    fetch("/api/members")
      .then((res) => res.json())
      .then(setMembers);
  }, []);

  const selectedMember = members.find((member) => member.id === selectedId);

  return <MemberProfile member={selectedMember} />;
}

function MemberPage() {
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const { data: members = [] } = useMembersQuery();

  const selectedMember = members.find((member) => member.id === selectedId);

  return <MemberProfile member={selectedMember} onSelect={setSelectedId} />;
}

function NoticeList() {
  const [notices, setNotices] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch("/api/notices")
      .then((res) => res.json())
      .then(setNotices)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);

  // ...
}

function NoticeList() {
  const { data: notices = [], isLoading, error } = useNoticesQuery();

  if (isLoading) return <NoticeSkeleton />;
  if (error) return <ErrorMessage />;

  return <NoticeCards notices={notices} />;
}

function useNoticesQuery() {
  return useQuery({
    queryKey: ["notices"],
    queryFn: () => noticeApi.getNotices(),
  });
}

function RecruitmentCard({ recruitment, user }) {
  return (
    <Card>
      {recruitment.status === "OPEN" &&
        user?.role === "member" &&
        !recruitment.applicants.includes(user.id) && <button>지원하기</button>}
    </Card>
  );
}

export function canApplyRecruitment({ recruitment, user }) {
  if (!user) return false;
  if (user.role !== "member") return false;
  if (recruitment.status !== "OPEN") return false;
  if (recruitment.applicants.includes(user.id)) return false;

  return true;
}

function RecruitmentCard({ recruitment, user }) {
  const canApply = canApplyRecruitment({ recruitment, user });

  return <Card>{canApply && <button>지원하기</button>}</Card>;
}

apps/member/src
├─ api
│  ├─ member
│  ├─ community
│  ├─ recruitment
│  └─ auth
├─ components
│  ├─ home
│  ├─ community
│  ├─ activity
│  ├─ library
│  └─ common
├─ pages
│  ├─ home
│  ├─ community
│  ├─ activity
│  └─ my
├─ app
│  ├─ layout
│  └─ route
├─ hooks
├─ model
├─ types
└─ utils

{
  "dependencies": {
    "@tanstack/react-query": "^5.90.21",
    "jotai": "^2.18.0",
    "ky": "^1.7.3",
    "react": "^19.2.0",
    "react-router": "^7.1.5",
    "tailwindcss": "^4.1.18",
    "zustand": "^5.0.11"
  }
}

function StudyPage() {
  const [studies, setStudies] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState("ALL");

  useEffect(() => {
    fetch("/api/studies")
      .then((res) => res.json())
      .then(setStudies);
  }, []);

  const visibleStudies = studies.filter((study) => {
    if (selectedCategory !== "ALL" && study.category !== selectedCategory)
      return false;
    if (study.status !== "OPEN") return false;
    return true;
  });

  return (
    <div>
      <CategoryTabs value={selectedCategory} onChange={setSelectedCategory} />
      {visibleStudies.map((study) => (
        <StudyCard key={study.id} study={study} />
      ))}
    </div>
  );
}