wafflestudio
diff --git a/‎src/components/auth/LoginCard.tsx‎
Lines changed: 2 additions & 0 deletions b/‎src/components/auth/LoginCard.tsx‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎src/components/post/AccountInfoModal.tsx‎
Lines changed: 63 additions & 0 deletions b/‎src/components/post/AccountInfoModal.tsx‎
Lines changed: 63 additions & 0 deletions
diff --git a/‎src/components/post/CommentItem.tsx‎
Lines changed: 24 additions & 11 deletions b/‎src/components/post/CommentItem.tsx‎
Lines changed: 24 additions & 11 deletions
diff --git a/‎src/components/post/EmbedModal.tsx‎
Lines changed: 81 additions & 0 deletions b/‎src/components/post/EmbedModal.tsx‎
Lines changed: 81 additions & 0 deletions
@@ -20,6 +20,7 @@ interface LoginResponse {
   message: string
   data: {
     accessToken: string
+    refreshToken: string
   } | null
 }
 
@@ -92,6 +93,7 @@ const LoginCard = () => {
 
       if (res.isSuccess && res.data) {
         localStorage.setItem('accessToken', res.data.accessToken)
+        localStorage.setItem('refreshToken', res.data.refreshToken)
         await invalidateCurrentUser()
         navigate({ to: '/' })
       } else {
 
@@ -0,0 +1,63 @@
+interface AccountInfoModalProps {
+  onClose: () => void
+  nickname: string
+  profileImageUrl: string | null
+}
+
+export default function AccountInfoModal({
+  onClose,
+  nickname,
+  profileImageUrl,
+}: AccountInfoModalProps) {
+  return (
+    <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/60 p-4">
+      <div
+        className="w-full max-w-[400px] overflow-hidden rounded-[12px] bg-white"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="border-b border-gray-200 py-3 text-center font-bold">
+          이 계정 정보
+        </div>
+
+        <div className="flex flex-col items-center p-8">
+          <div className="mb-4 h-20 w-20 overflow-hidden rounded-full bg-gray-100">
+            {profileImageUrl ? (
+              <img
+                src={profileImageUrl}
+                alt={nickname}
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <img
+                src="/default-profile.png"
+                alt="기본 프로필"
+                className="h-full w-full object-cover"
+              />
+            )}
+          </div>
+          <h2 className="text-[16px] font-bold">{nickname}</h2>
+          <p className="mt-4 px-4 text-center text-[12px] leading-normal text-gray-500">
+            신뢰할 수 있는 커뮤니티를 유지하기 위해 Instagram 계정에 대한 정보가
+            표시됩니다.{' '}
+            <a
+              href="https://help.instagram.com/697961817256175"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-semibold text-[#00376B] hover:underline"
+            >
+              이 정보가 중요한 이유를 확인해보세요.
+            </a>
+          </p>
+        </div>
+
+        <button
+          onClick={onClose}
+          className="w-full border-t border-gray-200 py-4 font-semibold active:bg-gray-100"
+        >
+          닫기
+        </button>
+      </div>
+      <div className="absolute inset-0 -z-10" onClick={onClose} />
+    </div>
+  )
+}
@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react'
 import { Heart, MoreHorizontal } from 'lucide-react'
+import { Link } from '@tanstack/react-router'
 import { formatRelativeTime } from '../../utils/date.ts'
 import CommentMenuModal from './CommentMenuModal'
 import { Avatar, AvatarFallback, AvatarImage } from '@/shared/ui/avatar.tsx'
@@ -84,18 +85,30 @@ export default function CommentItem({
         onDoubleClick={() => onDoubleClick(comment.id)}
       >
         <div className="flex flex-1 items-start gap-3">
-          <Avatar className="mt-0.5 h-8 w-8 shrink-0">
-            <AvatarImage
-              src={comment.profileImageUrl}
-              alt={comment.nickname}
-              className="object-cover"
-            />
-            <AvatarFallback>{comment.nickname[0]}</AvatarFallback>
-          </Avatar>
+          <Link
+            to="/$userId"
+            params={{ userId: String(comment.userId) }}
+            className="mt-0.5 shrink-0"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Avatar className="h-8 w-8">
+              <AvatarImage
+                src={comment.profileImageUrl}
+                alt={comment.nickname}
+                className="object-cover"
+              />
+              <AvatarFallback>{comment.nickname[0]}</AvatarFallback>
+            </Avatar>
+          </Link>
           <div className="text-sm leading-tight">
-            <span className="mr-2 font-semibold text-black">
+            <Link
+              to="/$userId"
+              params={{ userId: String(comment.userId) }}
+              className="mr-2 font-semibold text-black transition-opacity hover:opacity-60"
+              onClick={(e) => e.stopPropagation()}
+            >
               {comment.nickname}
-            </span>
+            </Link>
             <span className="break-all text-black">{comment.content}</span>
 
             <div className="mt-[7px] flex h-4 items-center gap-3 text-xs font-semibold text-gray-500">
@@ -112,7 +125,7 @@ export default function CommentItem({
                 className="p-1 opacity-0 transition-opacity group-hover:opacity-100"
                 onClick={handleMenuClick}
               >
-                <MoreHorizontal className="h-4 w-4 text-gray-500" />
+                <MoreHorizontal className="h-4 w-4 scale-x-[-1] text-gray-500" />
               </button>
             </div>
           </div>
 
@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import { X } from 'lucide-react'
+
+interface EmbedModalProps {
+  onClose: () => void
+  postId: number
+  nickname: string
+}
+
+export default function EmbedModal({
+  onClose,
+  postId,
+  nickname,
+}: EmbedModalProps) {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const postUrl = `${window.location.origin}/posts/${postId}`
+
+  const embedCode =
+    `<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="${postUrl}" style="background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"><a href="${postUrl}" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><div style=" display: flex; flex-direction: row; align-items: center;"><div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div><div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"><div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div><div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div><div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g transform="translate(512.000000, 21.000000)"><path d="M30,0 C13.458,0 0,13.458 0,30 C0,46.542 13.458,60 30,60 C46.542,60 60,46.542 60,30 C60,13.458 46.542,0 30,0 Z M30,55 C16.215,55 5,43.785 5,30 C5,16.215 16.215,5 30,5 C43.785,5 55,16.215 55,30 C55,43.785 43.785,55 30,55 Z"></path></g></g></g></svg></div><div style="padding-top: 8px;"><div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-weight:550; line-height:18px;">이 게시물 보기</div></div></a><p style=" margin:8px 0 0 0; padding:0 4px;"><a href="${postUrl}" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">${nickname}님의 공유 게시물</a></p></div></blockquote>`.trim()
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(embedCode)
+      setIsCopied(true)
+      setTimeout(() => {
+        onClose()
+      }, 2000)
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/60 p-4">
+      <div
+        className="relative w-full max-w-[500px] overflow-hidden rounded-[24px] bg-white p-6 shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 p-1 hover:opacity-60"
+        >
+          <X className="h-6 w-6 text-black" />
+        </button>
+
+        <div className="mt-6 mb-4">
+          <div className="scrollbar-hide h-[72px] overflow-y-auto rounded border border-gray-200 bg-white p-3 font-mono text-[14px] leading-normal break-all text-black">
+            {embedCode}
+          </div>
+        </div>
+
+        <button
+          onClick={handleCopy}
+          disabled={isCopied}
+          className={`w-full rounded-[12px] py-3 text-[16px] font-bold text-white transition-all ${
+            isCopied
+              ? 'bg-[#4a5df9]'
+              : 'bg-[#4a5df9] hover:opacity-90 active:opacity-80'
+          }`}
+        >
+          {isCopied ? '퍼가기 코드가 복사되었습니다' : 'Embed 태그 복사'}
+        </button>
+
+        <p className="mt-4 text-[13px] leading-tight text-gray-500">
+          이 embed 태그를 사용하면 Instagram의{' '}
+          <a
+            href="https://help.instagram.com/581066165581870"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[#00376B]"
+          >
+            API 이용 약관
+          </a>
+          에 동의하게 됩니다.
+        </p>
+      </div>
+      <div className="absolute inset-0 -z-10" onClick={onClose} />
+    </div>
+  )
+}