0515 CLANBE 개발일지

dowon kim·2024년 5월 15일

clanbe 개발일지

CLANBE

목록 보기

11/12

꽤 오랜 시간 블로그 작성을 하지 못했습니다.

물론 개발은 근면하게 진행하며 많은 진척이 있었으나,

항상 그렇듯 어느부분에서 끊고 정리를 할지 고민이 되고

고민이 길어질 즈음에 이럴 시간에 조금이라도 더 개발을 해서

한 파트를 마무리 짓고 한번에 작성하자! 라는 생각을 하지만

점점 프로젝트의 볼륨이 커지는 상황에서 한 파트를 개발하면서

다른 파트에 대한 사이드 이펙트가 생기고 이런 것들이 반복되면서

쉽게 블로그에 발을 들이기 힘들어지네요..

열심히 하겠습니다.

도메인 주소 이전

5월 11일에 기존 배포방식에 문제가 발생했습니다.

vercel.app 주소를 한국에서 정식으로 막아 사용이 불가능해졌기에

clanbe.site라는 도메인을 가비아에서 구매 후

vercel에서 새 도메인을 지정하여 해결하였습니다.

통신 리팩토링

기존 코드는 이전에 진행했던 블로그 프로젝트의 메서드를 일부

그대로 이전하여 사용하면서

ssr단계에서 api를 통하지 않고 몽고db를 통해 접근하거나

fetch를 사용하지 않아 서버액션 적용이 불가하거나

ssr단계에서 fetch하지 않고 csr로 넘어와서 fetch를 하는 등

프로젝트 컨벤션이 컴포넌트 및 페이지 단계에서 단일화 되지 않아

성능감소 및 개발과 유지보수에 비효율적인 구조였기에

전체적으로 fetch를 사용하고 서버액션을 적용하며 ssr단계에서

초기 데이터를 로드하도록 변경하였습니다.

api 라우팅 주소 리팩토링

기존의 라우팅 주소들이 직관적이지 못하거나 컨벤션이 일치하지 않아

프로젝트 덩어리가 점점 커지는 와중에 개발과 유지보수에 어려움을

주기 시작하여 api들을 카테고리 별로 다시한번 정리하여 묶어주었습니다.

클랜 후원기능

클랜내 후원게시판 및 후원레이아웃 보드를 개발했습니다.

후원관련 게시물 등록시 후원/지출 의 type을 지정하고

모든 유저들의 닉네임을 받아 오토컴플리트 기능을 통해

db내 존재하는 유저의 닉네임을 지정 및 금액을 선택 할 수있게 했습니다.

기존 클랜홈페이지는 단순히 글의 제목을 받아 렌더하는 방식이었기에

db에서 후원금액을 관리하고 렌더할 수가 없었기 때문에

import mongoose, { Model } from "mongoose";
import { Match, SupportAmount } from "../../types/types";

const supportSchema = new mongoose.Schema(
  {
    type: Number,
    amount: Number,
    email: String,
    postid: String,
  },
  {
    timestamps: true, // createdAt 및 updatedAt 타임스탬프 자동 생성
  }
);

let SupportModel: Model<SupportAmount>;

if (mongoose.modelNames().includes("support")) {
  // 모델이 이미 존재하는 경우, 해당 모델을 가져옵니다.
  SupportModel = mongoose.model<SupportAmount>("support");
} else {
  // 모델이 존재하지 않는 경우, 새로운 모델을 생성합니다.
  SupportModel = mongoose.model<SupportAmount>(
    "support",
    supportSchema,
    "support"
  );
}

export default SupportModel;

후원금에 대한 스키마를 작성하고

import { NextApiRequest, NextApiResponse } from "next";
import { uploadPostData } from "@/service/posts";
import { MongoClient } from "mongodb";
import { NextResponse } from "next/server";
import mongoose from "mongoose";
import PostModel from "@/models/post";
import SupportModel from "@/models/support";

export async function POST(req: Request, res: Response) {
  const body = await req.json();

  let {
    htmlContent,
    noticed,
    title,
    description,
    category,
    thumbnail,
    featured,
    author,
    view,
    supporter,
    type,
    amount,
  } = body.postData;

  try {
    const fileUrl = await uploadPostData(htmlContent);

    // MongoDB에 데이터 저장

    await mongoose.connect(process.env.NEXT_PUBLIC_MONGODB_URI as string);
    if (thumbnail === "")
      thumbnail =
        "https://theon2blog.s3.ap-northeast-2.amazonaws.com/KakaoTalk_20230607_124653702_02.png";
    const post = new PostModel({
      title,
      description,
      category,
      thumbnail,
      featured,
      fileUrl,
      author,
      noticed,
      view,
    });

    
    const savedPost = await post.save();
    
    if (category === "support") {
      try {
        const supportData = new SupportModel({
          type,
          email:supporter,
          amount,
          postid:savedPost._id,
        });
        supportData.save();
      } catch (error: unknown) {
        console.error("후원내역 저장 실패:", error);
      }
    }

    console.log("게시글 저장 성공");
    return new Response(
      JSON.stringify({
        message: savedPost._id.toString(),
      }),
      {
        status: 200,
        statusText: savedPost._id.toString(),
      }
    );
  } catch (error: unknown) {
    if (error instanceof Error) {
      new Response(JSON.stringify({ error: error.message }), {
        status: 500,
      });
    } else {
      new Response(JSON.stringify({ error: "An unknown error occurred" }), {
        status: 500,
      });
    }
  }
}