[nextjs]SNS Server-51(myapp61+)[like] 

👉🏻 이번에는 좋아요부분의 구조 부분을 살펴 봅니다.
Next, we will examine the structure of the “like” section.

👉🏻 좋아요 부분의 대략적인 데이터 흐름은 이전의 페이지네이션이나 액티브 테마 부분과 거의 같습니다.
The general data flow for the “likes” section is nearly identical to that of the pagination or active theme sections mentioned earlier.

📁 “좋아요”부분의 데이터 흐름
Data flow for the “Like” section

1) ClientPage.tsx

A.ClientPage.tsx에서 handleLike함수를 테마디렉토리의 MainTheme.tsx의 MainTheme함수에 파라메터로 전달 됩니다.
In ClientPage.tsx, the handleLike function is passed as a parameter to the MainTheme function, which is located in MainTheme.tsx within the theme directory.

B.액티브테마의 작동에 관련된부분은 [nextjs]SNS Server-51(myapp61+)[Active theme]  포스트를 참조하세요
For details regarding the operation of the active theme, please refer to the post: [nextjs]SNS Server-51(myapp61+)[Active theme].

 ... ... 
  const timelineRef = useRef<any[]>([]);
  useEffect(() => { timelineRef.current = timeline; }, [timeline]);
... ...
 const handleLike = async (post: any) => {

    // ✅ 항상 최신 timeline에서 찾기 / Always find from the latest timeline
    const latest = timelineRef.current.find((p: any) => p.id === post.id) || post;
    let target = latest.original_id || latest.id;

    if (!target.startsWith('http')) {
      if (latest.actor && latest.actor.startsWith('http')) {
        try {
          const actorUrl = new URL(latest.actor);
          const parts = actorUrl.pathname.split('/');
          const usersIdx = parts.indexOf('users');
          const actorUsername = usersIdx!== -1? parts[usersIdx + 1] : latest.username;
          target = `${actorUrl.origin}/users/${actorUsername}/statuses/${target}`;
        } catch {
          target = `https://${process.env.NEXT_PUBLIC_DOMAIN || 'aloy-horizon.duckdns.org'}/users/${latest.username}/statuses/${target}`;
        }
      } else {
        target = `https://${process.env.NEXT_PUBLIC_DOMAIN || 'aloy-horizon.duckdns.org'}/users/${latest.username}/statuses/${target}`;
      }
    }

    const currentlyLiked = latest.isMyLike;
    console.log('⭐ like click', { target, isMyLike: currentlyLiked, shortId: target.split('/').pop() });

    // Optimistic + 서버값으로 덮어쓰기
    // Overwrite with Optimistic + Server values
    setTimeline(prev => prev.map((p: any) =>
      p.id === latest.id
       ? {...p, isMyLike:!currentlyLiked, likeCount: (p.likeCount || 0) + (currentlyLiked? -1 : 1) }
        : p
    ));

    try {
      const res = await fetch(`/api/like`, {
        method: currentlyLiked? 'DELETE' : 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, target }),
        cache: 'no-store'
      });
      const data = await res.json();
      console.log('⭐ like 응답 / Like response', data);

      // 서버가 준 값 활용하기
      // Using the value provided by the server
      setTimeline(prev => prev.map((p: any) =>
        p.id === latest.id
         ? {...p, isMyLike: data.isMyLike, likeCount: data.likeCount }
          : p
      ));

      // 혹시 모르니 한번 더 동기화
      // Synchronize one more time just in case
      if (data.alreadyLiked || data.alreadyUnliked) {
        await refreshTimeline();
      }

    } catch (e) {
      console.error('❌ like 실패', e);
      await refreshTimeline();
    }
  };

... ...
 const props = { timeline, username, initialView, onBoost: handleBoost, onLike: handleLike, onShare: handleShare };
... ...
  return <ActiveTheme {...props} />;

2)MainTheme.tsx

A.테마디렉토리의 MainThem.tsx파일의 MainTheme함수에 파라메터로 좋아요(onLike: handleLike)가 전달 됩니다.
The onLike prop (with the value handleLike) is passed as a parameter to the MainTheme function within the MainTheme.tsx file located in the theme directory.

B.onLike함수는 다시 handleLikeClick함수 내에서 호출 됩니다.
The onLike function is called within the handleLikeClick function.

C. 이때 이 handleLikeClick함수는 로그인하지 않은경우 로그인 페이지로 이동하는 기능을 수행합니다.
In this case, the handleLikeClick function performs the action of redirecting the user to the login page if they are not logged in.

D.handleLikeClick함수를 TimelineList 컴포넌트의 파라메터(onLIke)로 전달합니다.
Pass the handleLikeClick function as a parameter (onLike) to the TimelineList component.

... ...
export function MainTheme({ timeline : initialTimeline, username, initialView, onBoost, onLike, onShare }: any) {
... ...
  const handleLikeClick = (p: any) => {
    if (!currentUser) return window.location.href = `/auth/login?next=/@${username}`;
    onLike(p);
  };
... ...

  return (
    <> ... ...
               {view === 'timeline' && (
            <>
            {/* ✅ myapp56 - ADD Dropdown(Home/Local/Federated Tabs ) */}

              <TimelineList
                timeline={timeline}
                tab={tab}
                onTabChange={setTab}
                currentUser={currentUser}
                onDelete={handleDelete}
                onBoost={handleBoostClick}
                onLike={handleLikeClick}
                onShare={onShare}
              />
            </>
          )} {/* end view === 'timeline' */}
 ... ...
    </>
  )
}

3)TimelineList.tsx

A.파라메터로 받은 onLike는 return()구문 안의 버튼 이벤트인 onClick에 적용됩니다.
The onLike parameter is applied to the onClick event of the button within the return() statement.

B.좋아요 버튼을 클릭하면 결국 ClientPage.tsx의 handleClick함수 실행됩니다.
Clicking the “like” button ultimately triggers the handleClick function in ClientPage.tsx.

... ...
export default function TimelineList({ 
  timeline: initialTimeline, currentUser, tab, onTabChange, onDelete, onBoost, onLike, onShare }: Props) { 
... ...
  const flat = (flatData || []).flat().filter(Boolean) as any[];
  const data = flat.length > 0 ? flat : initialTimeline.filter((p:any) => p && p.id);
... ...
  return(
      <>
... ...
{data.filter((p:any) => p && p.id).map((p: any, idx: number) => {
... ...
              {/** boost,like,share */}
              <div className="flex gap-4 mt-2">
                <button onClick={() => onBoost(p)} className={`bg-none border-none cursor-pointer text-[#999] px-2 py-1 rounded-xl text-sm hover:bg-[#f3f4f6] hover:text-[#333] ${p.isMyBoost? '!text-[#1b9c59] font-bold bg-[#dcfce7]' : ''}`}>🔁 {p.boostCount || ''}</button>
                <button onClick={() => onLike(p)} className={`bg-none border-none cursor-pointer text-[#999] px-2 py-1 rounded-xl text-sm hover:bg-[#f3f4f6] hover:text-[#333] ${p.isMyLike? '!text-[#e0245e] bg-[#ffe4e6]' : ''}`}>⭐ {p.likeCount || ''}</button>

                <button onClick={() => onShare(p)} className="bg-none border-none cursor-pointer text-[#999] px-2 py-1 rounded-xl text-sm hover:bg-[#f3f4f6] hover:text-[#333]">✈</button>
                <button className="bg-none border-none cursor-pointer text-[#999] px-2 py-1 rounded-xl text-sm hover:bg-[#f3f4f6] hover:text-[#333]">💬</button>
              </div>
... ...
      })}
... ...
     </>
  )
... ...
}

📁 API

✔️ API의 경로는 다음과 같습니다.
The API path is as follows:

A.app/api/like/route.ts

✔️ 좋아요 저장 / Like Save

A. 내가 작성한 글인 경우
In the case of content I have written

... ...
export async function POST(req: NextRequest) {
... ...
  const { target } = await req.json();
  const username = authUser;
... ...

  const existing = db.prepare(`SELECT id FROM likes WHERE actor =? AND object LIKE '%' ||? || '%'`).get(myActor, shortId) as any;
  if (existing) {
    const likeCount = (db.prepare(`SELECT COUNT(*) as c FROM likes WHERE object LIKE '%' ||? || '%'`).get(shortId) as any).c;
    return NextResponse.json({ ok: true, alreadyLiked: true, isMyLike: true, likeCount });
  }
... ...
  db.prepare('INSERT OR IGNORE INTO likes (id, actor, object, username) VALUES (?,?,?,?)')
   .run(likeDoc.id, myActor, likeDoc.object.replace('/posts/', '/statuses/'), username);

  const likeCount = (db.prepare(`SELECT COUNT(*) as c FROM likes WHERE object LIKE '%' ||? || '%'`).get(shortId) as any).c;
  return NextResponse.json({ ok: true, isMyLike: true, likeCount });
}
... ...

a) 좋아요를 실행했는지 확인(existing)하고 존재하면 리턴
Check if a ‘like’ has already been cast (existing), and return if it already exists.

b)existing이 없으면 db에 좋아요를 저장하고 { ok: true, isMyLike: true, likeCount } 리턴
If existing does not exist, save the “like” to the DB and return { ok: true, isMyLike: true, likeCount }.

B. 다른 서버의 글인경우
In the case of a post from another server

... ...
export async function POST(req: NextRequest) {
... ...
  const { target } = await req.json();
  const username = authUser;
... ...
  if (!isOwnPost) {
    try {
      const pr = await signedFetch(target, username);
      if (pr.ok) {
        const d = await pr.json();
        apObjectId = (d.id || target).replace('/posts/', '/statuses/');
        const info = await getActorData((d.attributedTo || d.actor) as any, username);
        inbox = info.inbox;
      }
    } catch {}
  }
... ...
const likeDoc = isOwnPost
   ? { id: `${myActor}/likes/${crypto.randomUUID()}`, actor: myActor, object: apObjectId }
    : (await sendLike(inbox!, apObjectId, username)).likeDoc;

  db.prepare('INSERT OR IGNORE INTO likes (id, actor, object, username) VALUES (?,?,?,?)')
   .run(likeDoc.id, myActor, likeDoc.object.replace('/posts/', '/statuses/'), username);

  const likeCount = (db.prepare(`SELECT COUNT(*) as c FROM likes WHERE object LIKE '%' ||? || '%'`).get(shortId) as any).c;

  return NextResponse.json({ ok: true, isMyLike: true, likeCount });
}

a)내가 작성한 글이 아니면(!isOwnPost) 원본 글의 서버에서 글을 찾기
If I did not write the post (!isOwnPost), I will find the post on the original post’s server.

b)target은 상대방서버에 원본글이 존재하는지 확인하는 용도로 사용함
Target is used to check if the original post exists on the counterpart server.

c)signedFetch함수와 getActorData함수를 통해서 실제로 원본의 글의 정보를 가져옴
The signedFetch and getActorData functions are used to actually retrieve information about the original post.

d)내 서버의 글이 아니면 sendLike함수로 원본글이 위치한 서버에 좋아요를 저장
If the post is not on my server, use the sendLike function to save the like to the server where the original post is located.

e)내 서버에 좋아요를 저장하고 { ok: true, isMyLike: true, likeCount }를 리턴
Save the ‘like’ to my server and return { ok: true, isMyLike: true, likeCount }

✔️ 좋아요 삭제 / Delete Like

A. app/api/like/route.ts

 const myActor = `https://${DOMAIN}/users/${username}`;
  const shortId = target.replace('/posts/', '/statuses/').split('/').pop()!.split('?')[0];

  const likeRow = db.prepare(`SELECT id, object FROM likes WHERE actor =? AND object LIKE '%' ||? || '%'`).get(myActor, shortId) as any;

  if (!likeRow) {
    const likeCount = (db.prepare(`SELECT COUNT(*) as c FROM likes WHERE object LIKE '%' ||? || '%'`).get(shortId) as any).c;
    return NextResponse.json({ ok: true, alreadyUnliked: true, isMyLike: false, likeCount });
  }

a)내가 내 서버의 글에 좋아요를 누른적이 있는지 확인 하기(likeRow)
Check whether I have already ‘liked’ a post on my server (likeRow)

b)좋아요를 누른적이 없으면{ ok: true, alreadyUnliked: true, isMyLike: false, likeCount } 이 값을 리턴
If you haven’t liked it before, return this value { ok: true, alreadyUnliked: true, isMyLike: false, likeCount }.

  if (!isOwnPost) {
    try {
      const u = new URL(objectForCheck);
      const parts = u.pathname.split('/').filter(Boolean);
      const idx = parts.indexOf('users');
      const inbox = idx!== -1? `${u.origin}/users/${parts[idx+1]}/inbox` : null;
      if (inbox) {
        await sendUndoLike(inbox, likeRow.id, objectForCheck, username);
      }
    } catch (e) {
      console.error('Undo Like 배달 실패', e);
    }
  }

a)내 서버의 글이 아니면 원본 글의 주소에 좋아요 취소 배달
If the post is not from my server, forward the “cancel like” action to the original post’s URL.

  db.prepare('DELETE FROM likes WHERE id =?').run(likeRow.id);
  const likeCount = (db.prepare(`SELECT COUNT(*) as c FROM likes WHERE object LIKE '%' ||? || '%'`).get(shortId) as any).c;
  return NextResponse.json({ ok: true, isMyLike: false, likeCount });

a) 내서버에서도 좋아요를 삭제하고 { ok: true, isMyLike: false, likeCount } 이 값을 리턴
Delete the “like” on my server as well, and return the following value: { ok: true, isMyLike: false, likeCount }.

마태복음 21장 22절 / Matthew 21: 22

“너희가 기도할 때에 무엇이든지 믿고 구하는 것은 다 받으리라 하시니라”

“And everything you ask in prayer, believing, you will receive.”