swimminginthecode

모각 프로젝트 - #3. 배포 및 회고

dazz6 — Thu, 7 Aug 2025 18:00:52 +0900

Next.js 를 사용하여 작업하였으므로 자연스럽게 vercel 을 통해 배포했다.

vercel 내에서 도메인을 연결했으며 github repository 와 연결하여 자동 배포 CI/CD 를 구축했다.

이번 프로젝트를 통해서... 정말 많은 것들을 배울 수 있었다... (ㅋㅋ ㅠ)

일단 백엔드와 프론트엔드를 완전 분리하여 프론트엔드만 작업하려고 하니 적응하는 데 시간이 걸렸다.

평소에는 백엔드까지 함께 작업했으므로 문제 원인을 찾기 쉬웠는데 스웨거를 통해서 엔드포인트를 파악하고...

spring security 같은 권한 문제는 어떻게 찾아야 할지 정말 막막하기도 했다.

내가 프론트엔드만을 지망하는 것이 아니고 풀스택을 지망하고 있기 때문에

이 다음에는 전처럼 백엔드, 프론트엔드를 모두 직접 구현하는 프로젝트를 진행해야겠다는 결론이 내려졌다.

이전 프로젝트보다 훨씬 발전했다고 느껴지는 부분은 TypeScript 에 대한 이해.

그리고 Component 분리에 좀 익숙해졌다. (아무래도 Next.js 에서 server / client 분리를 component 단위로 할 일이 많아서 그런 듯)

전보다 피그마 툴도 조금 더 손에 익었고, Next.js 로 프로젝트 하나를 해낼 수 있었다는 것도 나름 발전한 부분인 것 같다.

당연히! 아직도 배울 게 너무너무 많다 (참 재미잇는 부분)

프로젝트 끝났다고 바로 다른 거 해 보겠다고 뛰어드는 것보다...

리팩토링 하면서 조금 더 Next.js 를 이해하는 것이 먼저인 것 같다.

아무튼 좋은 경험이었고 또 더 나은 개발을 하기 위해 노력해야지 (_ _)>

모각 프로젝트 - #2-6. 관리자 페이지

dazz6 — Wed, 6 Aug 2025 18:00:11 +0900

관리자 페이지에서는 모각존, 모각챌, 뱃지, 고민 상담 게시판을 관리할 수 있다.

관리자 페이지는 크게 복잡한 것 없이 반환된 리스트 출력, 그리고 일부 추가 기능만 구현했다.

챌린지의 경우 '공식 챌린지' 기능을 위해 관리자가 챌린지를 생성할 수 있다.

그리고 뱃지 관리에서는 뱃지를 추가할 수 있는데, 여기서 뱃지의 조건을 설정하면 유저가 조건을 충족할 경우 자동으로 부여된다.

예를 들어 성공 횟수 3으로 생성할 경우, 유저가 챌린지를 세 번 정상적으로 완수할 경우 해당 유저에게 해당 뱃지가 부여되는 식이다.

관리자 페이지는 이벤트가 많고 유저 페이지처럼 성능이 크게 중요하지 않을 것이라고 판단되어 전부 client component 로 작성했다.

그리고 모든 페이지에 표가 필요하므로, 공통 component 로 분리하여 import 하여 사용했다.

import { AdminTableProps } from "@/types/admin.type";
import Link from "next/link";

export default function AdminTable<T extends object>({
  columns,
  data,
}: AdminTableProps<T>) {
  return (
    <table className="w-full border text-sm">
      <thead>
        <tr className="bg-borders text-text dark:bg-border-dark dark:text-text-dark">
          {columns.map((col) => (
            <th key={String(col.key)} className="px-4 py-2 border">
              {col.label}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, i) => (
          <tr key={i} className="border-t">
            {columns.map((col) => {
              const isCustomKey =
                typeof col.key === "string" && !(col.key in row);
              const cellValue = isCustomKey
                ? undefined
                : row[col.key as keyof T];

              return (
                <td key={String(col.key)} className="px-4 py-2 text-center">
                  {col.render ? (
                    col.render(cellValue, row)
                  ) : col.linkTo && !isCustomKey ? (
                    <Link
                      href={col.linkTo(row)}
                      className="text-primary dark:text-primary-dark hover:underline"
                    >
                      {String(cellValue)}
                    </Link>
                  ) : (
                    String(cellValue ?? "")
                  )}
                </td>
              );
            })}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

그리고 사용할 때는 아래처럼 사용하였다. (모각존 관리 페이지)

"use client";

import { useEffect, useState } from "react";
import AdminTable from "@/app/components/admin/admin-table";
import ConfirmModal from "@/app/components/confirm-modal";
import { ZoneSearch } from "@/lib/shared/zone.api";
import { ZoneDelete } from "@/lib/client/zone.client.api";
import Loading from "@/app/loading";
import { ZoneMainProps } from "@/types/zone.type";
import { Column } from "@/types/admin.type";
import Pagination from "@/app/components/shared/paginaiton";

export default function AdminZonePage() {
  const [zones, setZones] = useState<ZoneMainProps[]>([]);
  const [loading, setLoading] = useState(true);

  const [page, setPage] = useState(0);
  const [totalPages, setTotalPages] = useState(1);

  const [showModal, setShowModal] = useState(false);
  const [targetId, setTargetId] = useState<number | null>(null);
  const [targetName, setTargetName] = useState<string | null>(null);

  const fetchZones = async (pageNumber = 0) => {
    setLoading(true);
    try {
      const res = await ZoneSearch({
        sort: "recent",
        page: pageNumber,
        size: 10,
      });

      setZones(res.data);
      setPage(pageNumber);
      setTotalPages(res.totalPages);
    } catch (e) {
      console.error("에러:", e);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchZones();
  }, []);

  const openModal = (id: number, name: string) => {
    setTargetId(id);
    setTargetName(name);
    setShowModal(true);
  };

  const confirmDelete = async () => {
    if (targetId !== null) {
      await ZoneDelete(targetId);
      await fetchZones(page);
    }
    setShowModal(false);
    setTargetId(null);
    setTargetName(null);
  };

  const columns: Column<ZoneMainProps>[] = [
    { key: "mogakZoneId", label: "ID" },
    {
      key: "title",
      label: "이름",
      linkTo: (row: ZoneMainProps) => `/zone/${row.mogakZoneId}`,
    },
    { key: "tag", label: "태그" },
    {
      key: "hasPwd",
      label: "공개 여부",
      render: (value) => (value ? " " : ""),
    },
    {
      key: "actions",
      label: "관리",
      render: (_, row: ZoneMainProps) => (
        <button
          className="text-sm px-2 py-1 bg-error dark:bg-error-dark text-white rounded"
          onClick={() => openModal(row.mogakZoneId, row.title)}
        >
          삭제
        </button>
      ),
    },
  ];

  if (loading) {
    return <Loading />;
  }

  return (
    <div className="flex flex-col gap-4">
      <h1 className="text-lg font-bold text-primary dark:text-primary-dark">
        모각존 관리
      </h1>
      <AdminTable columns={columns} data={zones} />

      {totalPages > 1 && (
        <Pagination
          page={page}
          totalPages={totalPages}
          onPageChange={fetchZones}
        />
      )}

      {showModal && (
        <ConfirmModal
          message={`정말 '${targetName}' 존을 삭제하시겠습니까?`}
          onConfirm={confirmDelete}
          onCancel={() => setShowModal(false)}
        />
      )}
    </div>
  );
}

모각 프로젝트 - #2-5. 로그인/로그아웃

dazz6 — Tue, 5 Aug 2025 18:00:52 +0900

모각 프로젝트에서는 카카오 소셜 로그인과 네이버 소셜 로그인을 지원한다.

관리자 및 테스트 로그인을 제외하고는 소셜 로그인으로만 회원가입 및 로그인이 가능하다.

이전 프로젝트에서 구현했던 로그인과 가장 다른 점은 next 의 서버사이드에서 처리했다는 것!

"use client";

import SubTitle from "@/app/components/shared/sub-title";
import kakaoLogin from "./kakao_login.png";
import naverLogin from "./naver_login.png";
import Link from "next/link";
import { useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { getClientUser } from "@/utils/client/user.client.util";

export default function LoginPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const nextPath = searchParams.get("next") || "/";

  useEffect(() => {
    if (getClientUser()) {
      router.push("/");
    }
  }, []);

  const handleKakaoLogin = () => {
    window.location.href = `/api/internal/auth/kakao/login?next=${encodeURIComponent(
      nextPath
    )}`;
  };

  const handleNaverLogin = () => {
    window.location.href = `/api/internal/auth/naver/login?next=${encodeURIComponent(
      nextPath
    )}`;
  };

  return (
    <div>
      <SubTitle contents="로그인" />
      <span className="flex justify-center items-center mt-4 text-center">
        소셜 로그인을 통해 간편하게 로그인 / 회원가입 해 보세요!
      </span>
      <div className="flex flex-col items-center m-10 justify-center gap-y-5">
        <img
          className="w-60 cursor-pointer"
          src={kakaoLogin.src}
          alt="카카오 로그인"
          onClick={handleKakaoLogin}
        />
        <img
          className="w-60 cursor-pointer"
          src={naverLogin.src}
          alt="네이버 로그인"
          onClick={handleNaverLogin}
        />
      </div>
      <hr className="w-80 mx-auto dark:border-border-dark border-borders" />
      <div className="flex text-sm text-borders dark:text-border-dark justify-center items-center mt-4 text-center">
        관리자 페이지는
        <Link
          className="mx-2 underline italic text-secondary dark:text-secondary-dark"
          href="/login/admin"
        >
          여기
        </Link>
        를 클릭해 주세요.
      </div>
    </div>
  );
}

기존 react+typescript 환경에서 로그인 후 로그인 이전 페이지로 돌아가는 기능 구현을 위해 쿠키를 사용했었는데,

SSR 이 섞인 Next 환경에서는 쿠키가 아닌 url 쿼리스트링을 사용하여 구현했다.

import { NextResponse } from "next/server";

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const next = searchParams.get("next") || "/";

  const clientId = process.env.KAKAO_REST_API_KEY!;
  const redirectUri = process.env.KAKAO_REDIRECT_URI!;

  const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&state=${encodeURIComponent(
    next
  )}`;

  return NextResponse.redirect(kakaoUrl);
}

import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
  try {
    const url = new URL(req.url);
    const code = url.searchParams.get("code");
    const state = url.searchParams.get("state");
    const next = state || "/";

    if (!code) {
      return NextResponse.json({ error: "No code provided" }, { status: 400 });
    }

    const tokenRes = await fetch("https://kauth.kakao.com/oauth/token", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: new URLSearchParams({
        grant_type: "authorization_code",
        client_id: process.env.KAKAO_REST_API_KEY!,
        redirect_uri: process.env.KAKAO_REDIRECT_URI!,
        code,
        client_secret: process.env.KAKAO_CLIENT_SECRET!,
      }),
    });

    const tokenData = await tokenRes.json();
    if (!tokenData.access_token) {
      return NextResponse.json(
        { error: "Token fetch failed", tokenData },
        { status: 500 }
      );
    }

    const accessToken = tokenData.access_token;

    const userRes = await fetch("https://kapi.kakao.com/v2/user/me", {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });

    const userData = await userRes.json();

    const userInfo = {
      provider: "kakao",
      providerId: userData.id,
    };

    const res = await fetch(
      `${process.env.BACKEND_API_URL}/auth/social-login`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(userInfo),
      }
    );

    const { token, memberId } = await res.json();

    const redirectUrl = `${
      process.env.FRONTEND_API_URL
    }/login/callback?memberId=${memberId}&token=${token}&next=${encodeURIComponent(
      next
    )}`;

    const response = NextResponse.redirect(redirectUrl);
    response.cookies.set("jwt", token, { path: "/", httpOnly: false });
    response.cookies.set("provider", "kakao");

    return response;
  } catch (err) {
    console.error("카카오 로그인 처리 오류:", err);
    return NextResponse.json(
      { error: "Internal server error" },
      { status: 500 }
    );
  }
}

이렇게 /api (서버 사이드) 경로에서 외부 통신을 마친 다음, 지정한 callback 페이지로 redirect 한다.

"use client";

import { useEffect } from "react";
import { useSearchParams, useRouter } from "next/navigation";

import Loading from "@/app/loading";
import { useAuthStore } from "@/store/authStore";

export default function AuthCallbackPage() {
  const params = useSearchParams();
  const router = useRouter();
  const { login } = useAuthStore();

  useEffect(() => {
    const memberId = params.get("memberId");
    const token = params.get("token");
    const next = params.get("next") || "/";

    if (memberId) {
      localStorage.setItem("memberId", memberId);
    }

    if (token) {
      localStorage.setItem("jwt", token);
      login(token);
    }

    window.dispatchEvent(new Event("member:changed"));
    router.replace(next);
  }, [params, router, login]);

  return <Loading />;
}

그러면 해당 callback 페이지에서 localStorage 에 memberId 와 jwt 를 저장하고,

쿼리스트링으로 계속 가지고 다닌 url 로 replace 한다.

위 예시는 카카오 로그인이며, 네이버 로그인도 크게 다르지 않으므로 줄이겠다.

모각 프로젝트 - #2-4. 비밀 고민 상담

dazz6 — Mon, 4 Aug 2025 18:00:37 +0900

말 못할 고민을 익명으로 털어놓을 수 있는 게시판으로, 글을 작성할 때 시간을 지정하여 해당 시간이 경과하면 자동으로 삭제된다.

친구들에게 말 못할 고민을 털어놓자는 콘셉트로 추가된 페이지다.

비밀일기장 같은 느낌을 위한 일러스트 이미지를 메인에 삽입했다.

일러스트디자인은 디자이너 지인이 도와주었습니다 https://www.youtube.com/@티거-r9c

고민을 작성하는 시점에 시간을 지정할 수 있으며, 기본 시간은 24시간이다.

작성을 완료하면 해당 작성글로 바로 redirect 되고, 삭제까지 남은 시간이 실시간으로 줄어들게 설정했다.

첫 번째 댓글은 서버가 반환한 '모각봇' 의 AI 위로 답변이다.

"use client";

import { useEffect, useState } from "react";
import { AiFillHeart, AiOutlineHeart } from "react-icons/ai";
import {
  timeArrayToSeconds,
  secondsToTimeArray,
  formatTimeArray,
} from "@/utils/shared/time.util";
import { AdviceDetailResponse } from "@/types/advice.type";
import AdviceCommentsCard from "./advice-comments-card";
import { AdviceEmpathyPost } from "@/lib/client/advice.client.api";

import AlertModal from "@/app/components/custom-modal";
import { useRouter } from "next/navigation";
import { useAuthStore } from "@/store/authStore";

export default function AdviceContents({
  id,
  data,
}: {
  id: string;
  data: AdviceDetailResponse;
}) {
  const [showModal, setShowModal] = useState(false);
  const [empathyCount, setEmpathyCount] = useState(data.empathyCount);
  const [hasEmpathized, setHasEmpathized] = useState(data.hasEmpathized);

  const [restSeconds, setRestSeconds] = useState(
    timeArrayToSeconds(data.restTime)
  );

  const jwt = useAuthStore((state) => state.jwt);

  useEffect(() => {
    const timer = setInterval(() => {
      setRestSeconds((prev) => (prev > 0 ? prev - 1 : 0));
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  const handleEmpathy = async () => {
    if (!jwt) {
      setShowModal(true);
      return;
    }

    try {
      const res = await AdviceEmpathyPost(id);
      const { empathyCount, hasEmpathized } = res;
      setEmpathyCount(empathyCount);
      setHasEmpathized(hasEmpathized);
    } catch (err) {
      console.log("공감 실패 : " + err);
    }
  };

  const router = useRouter();

  const toLogin = () => {
    router.push(`/login`);
  };

  return (
    <div className="flex flex-col lg:flex-row gap-4 max-w-screen-xl mx-auto px-4 sm:px-6 py-10">
      <div className="lg:w-[65%] w-full flex flex-col gap-6">
        <div className="flex items-center justify-between border-borders dark:border-border-dark border-b pb-2">
          <div>
            <h2 className="text-lg font-bold text-primary dark:text-primary-dark">
              {data.title}
            </h2>
            <p className="text-sm text-border-dark dark:text-borders">
              {formatTimeArray(secondsToTimeArray(restSeconds))} 남음
            </p>
          </div>
        </div>

        <p className="text-sm text-text dark:text-text-dark whitespace-pre-line">
          {data.body}
        </p>

        <button
          className="flex items-center gap-1 text-error dark:text-error-dark text-sm"
          onClick={handleEmpathy}
        >
          {hasEmpathized ? (
            <AiFillHeart size={18} />
          ) : (
            <AiOutlineHeart size={18} />
          )}
          공감 {empathyCount}개
        </button>
      </div>

      <div className="w-full lg:w-[35%]">
        <AdviceCommentsCard worryId={id} />
      </div>
      {showModal && (
        <AlertModal
          message="로그인 후 이용해 주세요."
          moveMsg="로그인하기"
          onMove={toLogin}
          confirmMsg="닫기"
          onConfirm={() => setShowModal(false)}
        />
      )}
    </div>
  );
}

advice 도 동일하게 page.tsx 는 server component 로 유지하며 wrapper(contents) 를 작성하여 import 하는 방식을 사용했다.

사실 여러 번 구현해 보았던 게시판과 크게 다른 부분은 '삭제까지의 시간 출력' 부분밖에 없었고

남은 시간 출력 후 클라이언트단에서 1초씩 감소하는 방식을 사용하여 크게 어렵지 않았다.

모각 프로젝트 - #2-3. 모각챌

dazz6 — Sun, 3 Aug 2025 18:00:54 +0900

모각챌은 여러 명이 하나의 미션을 인증하는 공간이다.

챌린지 기간 동안 탈락하지 않고 완수하게 되면, 성공 뱃지를 부여받는다.

모각챌 메인은 challenge-search-card.tsx 로 별개 작성하였고, 챌린지 상태 (진행 전, 진행 중, 종료) 및 공식 챌린지 여부로 필터링 가능하며

최신순과 참가자순으로 정렬할 수 있다.

"use client";

import { useEffect, useState } from "react";
import SearchCardView from "@/app/components/shared/search-card-view";
import {
  ChallengeMainProps,
  ChallengeSearchCardProps,
  ChallengeStatusType,
} from "@/types/challenge.type";
import ChallengeMainCard from "./challenge-main-card";
import { ChallengeSearch } from "@/lib/shared/challenge.api";
import ChallengeMainCardSkeleton from "../../../components/skeleton/challenge/challenge-main-card-skeleton";
import Pagination from "@/app/components/shared/paginaiton";
import { mapSort } from "@/utils/shared/sort.util";

export default function ChallengeSearchCard({
  title,
  description,
  sort,
  section,
}: ChallengeSearchCardProps) {
  const [search, setSearch] = useState("");
  const [official, setOfficial] = useState<boolean>(false);
  const [finalSort, setFinalSort] = useState(sort);
  const [data, setData] = useState<ChallengeMainProps[]>([]);
  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState<string | null>(null);

  const [page, setPage] = useState(0);
  const [totalPages, setTotalPages] = useState(1);

  const fetchData = async (pageNumber = 0) => {
    setLoading(true);
    try {
      const res = await ChallengeSearch({
        search,
        official,
        sort: mapSort(finalSort),
        status: status as ChallengeStatusType,
        page: pageNumber,
        size: 12,
      });

      setData(res.data || []);
      setTotalPages(res.totalPages || 1);
      setPage(pageNumber);
    } catch (err) {
      console.error("챌린지 검색 실패", err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData(0);
  }, []);

  useEffect(() => {
    fetchData(0);
  }, [official, finalSort, status]);

  const toggleOfficial = () => {
    setOfficial((prev) => !prev);
  };

  return (
    <>
      <div className="w-full flex justify-center">
        <SearchCardView
          title={title}
          description={description}
          section={section}
          official={official}
          onOfficialToggle={toggleOfficial}
          sort={finalSort}
          onSortChange={setFinalSort}
          search={search}
          onSearchChange={setSearch}
          onSearch={() => fetchData(0)}
          status={status}
          onStatusChange={setStatus}
        />
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
        {loading ? (
          Array.from({ length: 6 }).map((_, i) => (
            <ChallengeMainCardSkeleton key={`challenge-skeleton-${i}`} />
          ))
        ) : data.length > 0 ? (
          data.map((item) => (
            <ChallengeMainCard
              key={item.challengeId}
              challengeId={item.challengeId}
              title={item.title}
              description={item.description}
              participants={item.participants}
              official={item.official}
              status={item.status}
            />
          ))
        ) : (
          <div className="col-span-full text-center text-gray-500 py-10">
            검색 결과가 없습니다.
          </div>
        )}
      </div>

      <Pagination
        page={page}
        totalPages={totalPages}
        onPageChange={(next) => fetchData(next)}
      />
    </>
  );
}

모각존과 모각챌 모두 검색 기능이 필요하기 때문에 search-card-view.tsx 를 작성하여 import 해서 사용했다

"use client";

import Link from "next/link";
import Button from "../ui/button";
import Input from "../ui/input";
import { AiOutlineSearch } from "react-icons/ai";
import { TagsProps } from "@/types/shared.type";
import SubTitle from "./sub-title";

type Props = {
  title: string;
  description: string;
  section: string;
  sort: string;
  onSortChange: (val: string) => void;
  search: string;
  onSearchChange: (val: string) => void;
  onSearch: () => void;

  tags?: TagsProps[];
  selectedTag?: string | null;
  onTagClick?: (tag: string) => void;

  official?: boolean;
  onOfficialToggle?: () => void;

  status?: string | null;
  onStatusChange?: (val: string | null) => void;
};

export default function SearchCardView({
  title,
  description,
  section,
  sort,
  onSortChange,
  search,
  onSearchChange,
  onSearch,
  tags,
  selectedTag,
  onTagClick,
  official,
  onOfficialToggle,
  status,
  onStatusChange,
}: Props) {
  return (
    <div className="flex flex-col w-fit items-center gap-2">
      <SubTitle contents={title} />
      <span className="text-sm text-border-dark dark:text-borders">
        {description}
      </span>

      <div className="mt-2 flex items-center gap-2">
        <Input
          value={search}
          onInput={(e) => onSearchChange(e.currentTarget.value)}
        />
        {onStatusChange && (
          <select
            value={status ?? ""}
            onChange={(e) =>
              onStatusChange(e.target.value === "" ? null : e.target.value)
            }
            className="bg-white dark:bg-border-dark dark:text-text-dark rounded-md px-5 py-2"
          >
            <option value="">전체</option>
            <option value="BEFORE">진행 전</option>
            <option value="ONGOING">진행 중</option>
            <option value="COMPLETED">종료</option>
          </select>
        )}
        <div className="flex items-center h-10">
          <AiOutlineSearch
            onClick={onSearch}
            className="text-primary w-7 h-7 cursor-pointer"
          />
        </div>
      </div>

      <div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-10 mt-4 w-full">
        <div className="flex flex-wrap gap-2">
          {tags &&
            tags.map((tag, index) => (
              <div
                key={`${tag.name}-${index}`}
                onClick={() => onTagClick?.(tag.name)}
                className={`border cursor-pointer rounded-md px-5 py-1 ${
                  selectedTag === tag.name
                    ? "bg-secondary text-white"
                    : "border-borders dark:border-border-dark"
                }`}
              >
                #{tag.name}
              </div>
            ))}

          {onOfficialToggle && (
            <div
              onClick={onOfficialToggle}
              className={`border cursor-pointer rounded-md px-5 py-1 ${
                official
                  ? "bg-secondary text-white"
                  : "border-borders dark:border-border-dark"
              }`}
            >
              #공식 챌린지
            </div>
          )}
        </div>

        <select
          value={sort}
          onChange={(e) => onSortChange(e.target.value)}
          className="bg-white dark:bg-border-dark dark:text-text-dark rounded-md px-5 py-2"
        >
          <option value="최신순">최신순</option>
          <option value="참여순">참가자 순</option>
        </select>
      </div>

      <Link href={section === "모각존" ? `/zone/create` : `/challenge/create`}>
        <Button>{section} 만들기</Button>
      </Link>
    </div>
  );
}

또한 페이지네이션은 Pagination Component 를 통해 여러 페이지에서 활용하였다.

"use client";

interface PaginationProps {
  page: number;
  totalPages: number;
  onPageChange: (nextPage: number) => void;
}

function createPageRange(current: number, total: number, delta = 2): number[] {
  const range = [];

  const start = Math.max(0, current - delta);
  const end = Math.min(total - 1, current + delta);

  for (let i = start; i <= end; i++) {
    range.push(i);
  }

  return range;
}

function classNames(...classes: (string | boolean | undefined | null)[]) {
  return classes.filter(Boolean).join(" ");
}

export default function Pagination({
  page,
  totalPages,
  onPageChange,
}: PaginationProps) {
  const pages = createPageRange(page, totalPages);

  return (
    <div className="flex items-center justify-center mt-10 gap-2 text-sm select-none">
      <button
        className="px-3 py-1 border rounded hover:bg-gray-100 dark:hover:bg-border-dark disabled:opacity-40"
        onClick={() => onPageChange(page - 1)}
        disabled={page <= 0}
      >
        이전
      </button>

      {pages.map((p) => (
        <button
          key={p}
          onClick={() => onPageChange(p)}
          className={classNames(
            "px-3 py-1 border rounded hover:bg-primary/10",
            page === p
              ? "bg-primary text-white font-bold border-primary"
              : "text-gray-600 dark:text-gray-300"
          )}
        >
          {p + 1}
        </button>
      ))}

      <button
        className="px-3 py-1 border rounded hover:bg-gray-100 dark:hover:bg-border-dark disabled:opacity-40"
        onClick={() => onPageChange(page + 1)}
        disabled={page >= totalPages - 1}
      >
        다음
      </button>
    </div>
  );
}

모각챌 하나에 접근하게 되면, 상세 페이지가 출력된다.

참가자 section을 클릭하면 참가자 목록 페이지로 redirect 되며, 탈락자의 경우 프로필 사진이 흑백으로 렌더링된다.

전체 기간 대비 진행률과 생존자 비율이 간략하게 포함되어 있으며, 사진과 문구를 함께 인증할 수 있다.

인증을 완료한 모습이다.

인증은 하루에 한 번 가능하므로 인증이 완료되었을 경우 '오늘 인증이 완료되었어요!' 문구와 함께 인증 관련 section 이 비렌더링된다.

인증 게시글은 최신순으로 인증 section 에 렌더링되며 pagination 도 적용되어 있다.

challenge 페이지도 page.tsx 는 Server component 로 유지하되, wrapper 를 만들어 client component 로 만들어 주었다.

"use client";

import { convertDate } from "@/utils/shared/date.util";
import ChallengeHeader from "./challenge-header";
import ChallengeSurvivors from "./challenge-survivors";
import ChallengeProofGrid from "./challenge-proof-grid";
import ChallengeSummary from "./challenge-summary";
import { ChallengeDetileResponse } from "@/types/challenge.type";
import { ChallengeDetail } from "@/lib/client/challenge.client.api";
import { useEffect, useState } from "react";
import { useAuthStore } from "@/store/authStore";

export default function ChallengeWrapper({
  id,
  initial,
}: {
  id: string;
  initial: ChallengeDetileResponse;
}) {
  const { jwt } = useAuthStore();
  const [data, setData] = useState<ChallengeDetileResponse>(initial);
  const [refreshKey, setRefreshKey] = useState<number>(Date.now());

  useEffect(() => {
    if (!jwt) {
      return;
    }
    refetch();
  }, []);

  const refetch = async () => {
    const reload = await ChallengeDetail(id);
    setData(reload);
    setRefreshKey(Date.now());
  };

  return (
    <div className="flex flex-col lg:flex-row gap-10">
      <div className="flex-1 flex flex-col gap-6">
        <ChallengeHeader
          challengeId={id}
          status={data.status}
          title={data.title}
          description="챌린지에 참여하고 인증샷을 올려보세요!"
          challengeOwnerId={data.challengeOwnerId}
          startDate={convertDate(data.startDate)}
          endDate={convertDate(data.endDate)}
          official={data.official}
          totalParticipants={data.totalParticipants}
        />

        <ChallengeSurvivors
          avatars={data.memberImageList}
          extraCount={Math.max(
            data.totalParticipants - data.memberImageList.length,
            0
          )}
        />
        {data.joined && data.status !== "BEFORE" && (
          <ChallengeProofGrid challengeId={id} refreshTrigger={refreshKey} />
        )}
      </div>

      <div className="w-full lg:w-[280px] shrink-0">
        <ChallengeSummary challengeId={id} {...data} onRefetch={refetch} />
      </div>
    </div>
  );
}

ChallengeSummary Component 에 포함된 통계 component 는 아래처럼 작성하였다.

type ProgressBarProps = {
  label: string;
  value: number;
};

export function ChallengeSummaryChart({ label, value }: ProgressBarProps) {
  return (
    <div className="w-full">
      <div className="flex justify-between text-xs mb-1 text-border-dark dark:text-borders">
        <span>{label}</span>
        <span>{value}%</span>
      </div>
      <div className="w-full h-3 bg-gray-200 dark:bg-zinc-700 rounded-full overflow-hidden">
        <div
          className="h-full bg-primary dark:bg-primary-dark transition-all duration-300"
          style={{ width: `${value}%` }}
        />
      </div>
    </div>
  );
}

간단한 차트라서 tailwind css 선에서 끝낼 수 있었는데, 다음에는 더 다양한 통계를 다룰 수 있는 라이브러리를 적용해 보고 싶다.

모각 프로젝트 - #2-2. 모각존

dazz6 — Sat, 2 Aug 2025 18:00:20 +0900

모각존은 여러 명이 함께 공부할 수 있는 공간으로, 상태 변경을 통해 해당 유저의 공부 여부를 알 수 있다.

입/퇴장과 상태 변경, 채팅까지 모두 실시간으로 반영되어야 하므로 웹소켓을 사용했다.

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const jwt = await getJwtFromServerCookie();

  const data = await ZoneDetail(id, jwt);

  return {
    title: `모각 | ${data.name}`,
    description: `${data.name} 모각존에서 함께 공부해요.`,
  };
}

MetaData title 을 모각존 이름으로 설정하기 위해 generateMetadata 를 사용했다.

또한 웹소켓 연결 전 입장 혹은 상태 변경을 시도할 수 없도록, 연결 중일 때는 skeleton UI 가 출력되도록 설정했다.

모각존 이미지는 방장이 설정 및 변경 가능하다.

제일 애먹었던 부분은 아무래도 웹 소켓 연결 및 브로드캐스팅인데... 먼저 소켓과 관련된 함수는 이렇게 작성해 두었다.

import SockJS from "sockjs-client";
import { Client, IMessage } from "@stomp/stompjs";
import { getJwtFromCookie } from "@/utils/client/auth.client.util";

let stompClient: Client | null = null;
let isConnecting = false;

type TopicHandler<T = unknown> = {
  mogakZoneId: string;
  onMessage: (msg: T) => void;
};

const subscribedTopics = new Map<string, TopicHandler>();

export async function connectAndSubscribeSocket<T>({
  topic,
  mogakZoneId,
  onMessage,
}: {
  topic: string;
  mogakZoneId: string;
  onMessage: (msg: T) => void;
}) {  
  const token = getJwtFromCookie();
  if (!token) {
    console.log("[socket] JWT 없음. 구독 중단");
    return;
  }

  if (isConnecting) { 
    await waitUntilConnected();
  } else if (!stompClient || !stompClient.connected) { 
    await ensureConnected(mogakZoneId);
  } 

  subscribe(topic, mogakZoneId, onMessage);
}

export function subscribe<T>(
  topic: string,
  mogakZoneId: string,
  onMessage: (msg: T) => void
) {
  if (!stompClient || !stompClient.connected) {
    return;
  }

  if (subscribedTopics.has(topic)) { 
    return;
  }

  const jwt = getJwtFromCookie();
  if (!jwt) {
    return;
  }

  console.log("[socket] 토픽 구독 시작:", topic);
  stompClient.subscribe(
    topic,
    (message: IMessage) => {
      try {
        const payload = JSON.parse(message.body);

        const isSystemBroadcast =
          typeof payload === "object" &&
          "sessionId" in payload &&
          "memberId" in payload &&
          "mogakZoneId" in payload &&
          "name" in payload &&
          Object.keys(payload).length === 4;

        if (isSystemBroadcast) { 
          return;
        }

        console.log("[socket] 수신된 메시지:", payload, topic);
        onMessage(payload);
      } catch (err) {
        console.error("[socket] 메시지 파싱 오류:", err);
      }
    },
    { Authorization: jwt, mogakZoneId }
  );

  subscribedTopics.set(topic, {
    mogakZoneId,
    onMessage: (msg) => onMessage(msg as T),
  });
}

let onConnectedCallback: (() => void) | null = null;

export function setOnConnectedCallback(cb: () => void) {
  onConnectedCallback = cb;
}

export async function ensureConnected(mogakZoneId: string): Promise<void> {
  const token = getJwtFromCookie();
  if (!token) {
    throw new Error("JWT 없음");
  }

  if (!stompClient || !stompClient.active) {
    stompClient = new Client({
      webSocketFactory: () =>
        new SockJS(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/mogak/ws`),
      connectHeaders: {
        Authorization: token,
        mogakZoneId,
      },
      reconnectDelay: 5000,
      onConnect: () => {
        console.log("[socket] 웹소켓 연결 성공");
        if (onConnectedCallback) {
          onConnectedCallback();
        }
        subscribedTopics.forEach((sub, topic) =>
          subscribe(topic, sub.mogakZoneId, sub.onMessage)
        );
      },
      onStompError: (frame) => {
        console.error("[socket] STOMP 에러:", frame);
      },
    });
  }

  if (!stompClient.connected && !isConnecting) {
    isConnecting = true;
    stompClient.activate();
    await waitUntilConnected();
    isConnecting = false;
  } else {
    await waitUntilConnected();
  }
}

function waitUntilConnected(timeout = 10000): Promise<void> {
  return new Promise((resolve, reject) => {
    const start = Date.now();
    const check = () => {
      if (stompClient && stompClient.connected) {
        resolve();
      } else if (Date.now() - start > timeout) {
        reject("[socket] 소켓 연결 타임아웃");
      } else {
        setTimeout(check, 100);
      }
    };
    check();
  });
}

export async function sendStatus(
  zoneId: string,
  status: string,
  memberId: string
) { 
  const jwt = getJwtFromCookie();
  if (!jwt) {
    return;
  }

  try {
    await ensureConnected(zoneId);
    stompClient!.publish({
      destination: `/app/api/mogak/zone/${zoneId}/status`,
      headers: { Authorization: jwt, mogakZoneId: String(zoneId) },
      body: JSON.stringify({ memberId, status }),
    }); 
  } catch (err) {
    console.error("[socket] status 전송 실패", err);
  }
}

export async function sendChat(
  zoneId: string,
  memberId: string,
  message: string
) { 
  const jwt = getJwtFromCookie();
  if (!jwt) {
    return;
  }

  try {
    await ensureConnected(zoneId);
    stompClient!.publish({
      destination: `/app/api/mogak/zone/${zoneId}/message`,
      headers: { Authorization: jwt, mogakZoneId: String(zoneId) },
      body: JSON.stringify({ memberId, message }),
    }); 
  } catch (err) {
    console.error("[socket] chat 전송 실패", err);
  }
}

export async function sendDetail(zoneId: string) { 
  const jwt = getJwtFromCookie();
  if (!jwt) {
    return;
  }

  try {
    await ensureConnected(zoneId);
    stompClient!.publish({
      destination: `/app/api/mogak/zone/${zoneId}`,
      headers: { Authorization: jwt, mogakZoneId: String(zoneId) },
    }); 
  } catch (err) {
    console.error("[socket] detail 전송 실패", err);
  }
}

export function disconnectSocket() {
  if (stompClient) {
    console.log("[socket] 웹소켓 연결 종료 및 구독 초기화");
    stompClient.deactivate();
    stompClient = null;
    subscribedTopics.clear();
    isConnecting = false;
  }
}

웹 소켓 연결 / 구독 / 각 기능별 브로드캐스팅 / 연결 끊기 가 가능하며 let 으로 선언한 stompClient 와 isConneting 으로 연결 여부를 판단한다.

이를 기능이 필요한 곳에서 연결 시도 및 구독, 그리고 이벤트가 발생했을 때 브로드캐스팅만 해 주면 된다.

모각존 detail 의 page.tsx 는 server component 로 유지하고 싶었으므로 zone-wrapper.tsx 파일을 생성하여 page.tsx 에서는 import 하는 방식으로 사용하였다.

 useEffect(() => {
    setOnConnectedCallback(() => {
      console.log("소켓 연결 완료");
      setConnected(true);
    });

    const timeout = setTimeout(() => {
      if (!connected && id === data.hostMemberId) {
        console.warn("소켓 연결 실패: 재참가 필요");
        setJoined(false);
        setShowReconnectModal(true);
      }
    }, 3000);

    connectAndSubscribeSocket<ZoneDetailResponse>({
      topic: `/topic/api/mogak/zone/${id}`,
      mogakZoneId: id,
      onMessage: (parsedRes) => {
        setLoadData((prev) => {
          const base = prev ?? data;
          return {
            ...base!,
            zoneMemberInfoList: parsedRes.zoneMemberInfoList,
            joinedUserCount: parsedRes.joinedUserCount,
          };
        });
      },
    }).then(() => {
      const userId = localStorage.getItem("memberId");

      if (joined) {
        sendStatus(id, "RESTING", String(userId));
      }
    });

    return () => {
      clearTimeout(timeout);
      setConnected(false);
      disconnectSocket();
    };
  }, []);

위는 참여 멤버의 입/퇴장 이벤트를 위한 구독 및 브로드캐스팅이다.

.then()을 사용하여 입장 후 자동으로 '휴식 중' status 설정되도록 하였다.

같은 방식으로 상태 변경을 위한 user-card 와 chatting-ui 에도 웹소켓 코드를 삽입하였는데,

처음에 user-card 에 connectAndSubscribeSocket 함수를 작성했더니 유저 component 별로 구독을 시도하고 memberId 등이 꼬여 에러가 발생했다.

그래서 page.tsx - zone-wrapper.tsx - user-card-wrapper.tsx - user-card 의 구조로 리팩토링하고, user-card-wrapper 에서 한 번만 연결 시도 및 구독하도록 하여 해결했다.

모각 프로젝트 - #2-1. 홈 화면

dazz6 — Fri, 1 Aug 2025 18:00:36 +0900

첫 진입시 출력되는 홈 화면으로, 모바일 대응 반응형도 구현했다.

"모여서 각자 공부하기" 라는 콘셉트를 보여 줄 수 있는 이미지를 위해 다양한 공부 및 작업하는 캐릭터를 삽입했다.

캐릭터 디자인은 디자이너 지인이 도와주었습니다 https://www.youtube.com/@티거-r9c

Next.js 의 장점, 서버 사이드 렌더링을 최대한 살리기 위해 메인은 당연히 server component 여야 한다고 생각했다.

그렇지만 모각존과 모각챌은 참여자가 많은 순으로 소개하는 기능이므로

실시간까지는 아니더라도 길지 않은 텀으로 업데이트되어야 할 것 같아 revalidate 를 10분으로 설정했다.

export async function MainZoneChallenge() {
  const res = await fetch(`${process.env.BACKEND_API_URL}`, {
    next: { revalidate: 60 * 10 },
  });

  if (!res.ok) {
    const err = await res.text();
    console.error("서버 응답:", err);
    throw new Error(`메인 불러오기 실패: ${res.status}`);
  }

  const data: MainResponse = await res.json();

  return data;
}

또한 이전 프로젝트에서 느꼈던 큰 문제점 중 하나인, "react 의 가장 큰 장점인 component 화를 살리지 못하고 있어 가독성 및 효율이 떨어짐" 을 개선하기 위해 메인에서 사용하는 ImageCard section 도 component 로 분리하여 props 로 값을 넘기는 방식을 사용했다.

 <ImageCard
          type="home"
          title="모여서 각자, 모각"
          description1="모각에 처음 오셨나요?"
          description2="간단한 챌린지로 시작해 보세요!"
          button="챌린지 시작하기"
          buttonUrl="/challenge"
          img1={student.src}
          img2={coding.src}
          img3={designer.src}
          bgImageLight={MainBgLight.src}
          bgImageDark={MainBgDark.src}
        />

"use client";

import Link from "next/link";
import Button from "../ui/button";
import { ImageCardProps } from "@/types/shared.type";

export default function ImageCard({
  title,
  description1,
  description2,
  button,
  buttonUrl,
  img1,
  img2,
  img3,
  bgImageLight,
  bgImageDark,
}: ImageCardProps) {
  return (
    <div className="flex justify-center w-full px-4">
      <div className="relative w-full max-w-7xl flex flex-col lg:flex-row items-center gap-6">
        <div
          className="relative w-full lg:w-4/5 aspect-[5/4] sm:aspect-[5/3] md:aspect-[5/2] bg-cover bg-left rounded-lg overflow-hidden"
          style={{ backgroundImage: `url(${bgImageLight})` }}
        >
          <div
            className="hidden dark:block absolute inset-0 z-0"
            style={{
              backgroundImage: `url(${bgImageDark})`,
              backgroundSize: "cover",
              backgroundPosition: "left",
            }}
          />

          {img1 && (
            <img
              src={img1}
              alt="img1"
              className="absolute top-10 right-6 w-20 sm:w-40 lg:w-52 z-10"
            />
          )}
          {img2 && (
            <img
              src={img2}
              alt="img2"
              className="absolute top-10 left-6 w-20 sm:w-40 lg:w-52 z-10"
            />
          )}
          {img3 && (
            <img
              src={img3}
              alt="img3"
              className="absolute bottom-6 left-1/2 transform -translate-x-1/2 w-20 sm:w-40 lg:w-56 z-10"
            />
          )}

          <div className="absolute inset-0 flex items-center justify-center lg:hidden z-10">
            <div className="backdrop-blur-md border border-borders text-gray-900 text-center p-6 rounded-lg max-w-md">
              <h2 className="text-2xl sm:text-3xl text-primary dark:text-primary-dark font-bold">
                {title}
              </h2>
              <div className="text-base text-text dark:text-borders sm:text-lg mt-2">
                <p>{description1}</p>
                {description2 && <p>{description2}</p>}
              </div>
              <Link href={buttonUrl}>
                <Button variant="secondary" className="mt-4">
                  {button}
                </Button>
              </Link>
            </div>
          </div>
        </div>

        <div className="hidden lg:flex flex-col justify-center gap-4 lg:w-1/5">
          <h2 className="text-3xl font-bold text-primary">{title}</h2>
          <div className="text-base text-gray-700 dark:text-gray-300">
            <p>{description1}</p>
            {description2 && <p>{description2}</p>}
          </div>
          <Link href={buttonUrl}>
            <Button variant="secondary">{button}</Button>
          </Link>
        </div>
      </div>
    </div>
  );
}

모각 프로젝트 - #1. 소개

dazz6 — Thu, 31 Jul 2025 18:00:38 +0900

프로젝트 주제

"모여서 각자 공부하기" 라는 주제로, 함께 공부하거나 챌린지를 통해 서로 교류할 수 있는 서비스입니다.

비밀 게시판에 작성한 고민은 설정한 시간이 지나면 자동으로 삭제되어, 부담없이 고민을 나눌 수 있습니다.

프로젝트 기간

2025년 4월 6일 ~ 7월 28일

프로젝트 인원 및 역할

2인 (백엔드 1명, 프론트엔드 1명)

프론트엔드 사용 기술

React, TypeScript, Next.js, Vercel, Zustand, Tailwind CSS, Figma

와이어프레임

2025년 7월 31일 기준, 아래 링크로 접속 가능합니다.

www.mogak.kr

Next.js에서 Recoil 사용 에러

dazz6 — Tue, 13 May 2025 18:00:13 +0900

세 줄 요약!

1. 클라이언트 컴포넌트인데 인식을 못 하는 것 같은 오류가 뜸

2. Recoil 과 Next.js 의 충돌

3. Recoil 대신 Zustand 사용

상황

평소에 사용했던 것처럼 recoil 라이브러리를 Install 하고 useRecoilState 사용했는데,

서버 컴포넌트에서 hook을 사용했을 때 뜨는 오류가 출력됨

환경: Next.js 15 + React 19

시도

use client 지시자를 빼먹었는가?

-> 첫 줄에 잘 넣어 둠

Root Layout에 Provider를 추가하지 않았는가?

-> 추가함

결론

Recoil 사용을 중단하고 Zustand를 사용함

이유

일단 Next.js로 프로젝트를 진행하는 것 자체가 처음이었으므로 아무 생각 없이 install 하고 적용했는데, Next.js의 가장 큰 특징인 서버 컴포넌트에서는 당연히 Recoil context 사용 불가능함. 그래서 SSR, CSR 모두 대응 가능한 Zustand로 변경함.

검색해 봐도 Next.js에서 Recoil이 아예 사용 불가능한 것은 아니라는데, wrapper 로 한 번 더 감싸 주거나 use client 지시자를 사용해서 클라이언트 컴포넌트로 지정하고 로직을 아무리 되짚어도 해결되지 않아서 Zustand 로 사용! (컴포넌트 구성이나 렌더링 순서 문제로 인해 오류가 발생할 수 있다고 한다 ㅠㅠ)

사실 오류를 해결한 게 아니라 recoil을 포기한 게 맞긴 하지만, Next.js 환경에서는 recoil 보다 zustand가 더 안정적이라는 걸 깨달아서 기록해 둔다.

작업할 때 전에 했었으니까~ 라는 이유로 스택 / 기술을 적용하지 말고 다른 스택이나 구현 기술을 고려하는 버릇이 필요!

React 09 - 커스텀 훅과 HOC (고차 컴포넌트)

dazz6 — Wed, 7 May 2025 18:00:20 +0900

1. 커스텀 훅 (Custom Hook)

React의 Hook을 조합해서 만든 함수

useState, useEffect 같은 기존 hook을 활용해 공통 로직을 재사용할 수 있게 도와준다.

단순한 함수처럼 사용되어 JSX를 리턴하지 않는다.

2. HOC (Higher-Order Component, 고차 컴포넌트)

컴포넌트를 인자로 받아서 새로운 컴포넌트를 리턴하는 함수

컴포넌트를 감싸서 기능을 추가하는 데 쓰인다.

클래스형 컴포넌트에서 주로 사용되었으며, 최근에는 커스텀 훅이 더 많이 사용되는 추세다.

그럼 상황에 따라서 어떤 걸 선택해야 할까?

API 데이터 패칭

매번 useEffect, fetch 코드를 복사/붙여넣기 하는 건 비효율적이므로 커스텀 훅으로 로직을 분리하는 것이 유리하다.

로딩과 같은 공통 UI

컴포넌트를 렌더링하기 전에 공통 UI 처리가 필요하므로 HOC를 사용하는 것이 유리하다.

잘못 이해하고 있었던 점

기존에는 react-query나 react-toast 같은 외부 라이브러리에서 제공하는 훅만 커스텀 훅인 줄 알았는데 아니었다...

내가 로직을 분리하기 위해 작성한 함수도 커스텀 훅이라는 것... ^_ㅠ

이런 기술, 라이브러리에 대해서는 대충 이해하고 넘어가는 게 아니라 확실하게 짚고 넘어가야 된다는 걸 느꼈다

실무뿐만 아니라 이론적인 부분도 공부하기... 아자자