feature/비밀번호 찾기 폼 UI 개선 및 명언편집 페이지 기본 이미지 추가

src/app/(quotes)/quotes/[category]/[name]/[id]/page.tsx

@@ -25,7 +25,7 @@ export default async function DetailPage({
         `
       const result = await db.query(query, [id, decodeURIComponent(name)])
       const item = result.rows[0]
-      
+
       return item
     } catch (error) {
       console.error(
@@ -39,7 +39,7 @@ export default async function DetailPage({
   const item = await getQuoteDetail(id)
   if (!item) return <ReplaceMessageCard childern="데이터를 조회중 입니다.." />
 
-  
+
   return (
     <article className="sm:p-[4em] p-[1em]  min-h-[100vh] h-full  mx-auto my-[3em]  perspective-500 flex flex-col max-w-[1300px] bg-[#0000001b]">
       <h2 className="sm:text-[1.5em] text-[1.2em]  flex justify-center items-center p-[10px]  text-center text-white">
@@ -48,15 +48,18 @@ export default async function DetailPage({
         </span>
         가라사대
       </h2>
+      <QuoteLikeBox id={id} />
       {/* 명언 텍스트 영역 */}
       <blockquote
         className="
-         flex items-center justify-center sm:text-[1.4em] text-[1.2em] sm:px-[3em] px-[3.5em] min-h-[280px]  text-center  bg-[#ffffffdb] text-centermax-w-[900px] w-full mx-auto rounded-[10px] mt-[2em]
-            shadow-[inset_0_5px_5px_0_rgba(0,0,0,0.5)] 
+         sm:text-[1.2em]
+         md:text-[1.4em] text-[1em] sm:px-[3em] p-[3.5em] min-h-[280px]  text-center  bg-[#ffffffdb] text-centermax-w-[900px] w-full mx-auto rounded-[10px] mt-[2em]
+         shadow-[inset_0_5px_5px_0_rgba(0,0,0,0.5)] 
+         flex items-center justify-center
             "
       >
         <p className="">{item.quote}</p>
-        <QuoteLikeBox id={id} />
+
       </blockquote>
 
       <div className="flex">

src/app/(user)/reset-pass/page.tsx

@@ -34,7 +34,7 @@ export default function ResetPage() {
 
     const { success, meg } = await defaultFetch(url, config)
     if (success) {
-      toast.success('meg')
+      toast.success(meg)
       router.push('/login')
     }
 
@@ -46,7 +46,7 @@ export default function ResetPage() {
   return (
     <form
       ref={formRef}
-      className="shadow-[inset_-3px_-3px_5px_0_rgba(0,0,0,0.5)] bg-[#d8644f] max-w-[400px] w-full h-[370px] p-[10px] rounded-[10px] absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]"
+      className="shadow-[inset_-3px_-3px_5px_0_rgba(0,0,0,0.5)] bg-[#d8644f] max-w-[600px] w-full h-[370px] p-[10px] rounded-[5px] absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]"
       action={postResetPassAction}
     >
       <h2 className=" text-[1.5em] text-center my-[0.6em] mb-[0.8em] font-bold text-white">
@@ -57,7 +57,8 @@ export default function ResetPage() {
           새 비밀번호
         </label>
         <input
-          className="placeholder:text-[0.85em] text-[1.05em] shadow-[inset_-3px_-3px_5px_0_rgba(0,0,0,0.5)] bg-white  rounded-[20px] p-[8px] px-[10px] focus:outline-none text-[tomato] font-semibold "
+
+          className="placeholder:text-[0.85em] text-[1.05em] bg-white  rounded-[5px] p-[8px] px-[10px] focus:outline-none font-semibold "
           type="password"
           id="password"
           name="password"
@@ -67,10 +68,10 @@ export default function ResetPage() {
       <br />
       <div className="flex flex-col">
         <label htmlFor="confirm-password" className="text-white  p-[5px]">
-          재확인
+          새 비밀번호 확인
         </label>
         <input
-          className="placeholder:text-[0.85em] text-[1.05em] shadow-[inset_-3px_-3px_5px_0_rgba(0,0,0,0.5)] bg-white  rounded-[20px] p-[8px] px-[10px] focus:outline-none text-[tomato] font-semibold "
+          className="placeholder:text-[0.85em] text-[1.05em] bg-white  rounded-[5px] p-[8px] px-[10px] focus:outline-none font-semibold "
           type="password"
           id="confirm-password"
           name="confirm-password"
@@ -87,7 +88,6 @@ export default function ResetPage() {
   function valiToken(token: string) {
     const regex = /^[A-Za-z0-9-_=]+\.[A-Za-z0-9-_=]+\.[A-Za-z0-9-_.+/=]+$/
     const isValid = regex.test(token)
-
     return isValid
   }
 
@@ -106,7 +106,10 @@ export default function ResetPage() {
 
   // 비밀번호 검증 함수 래퍼
   function validator(pass: string, confirm: string) {
-    if (!tempToken) return alert('접근 권한이 없습니다.')
+    if (!tempToken) {
+      toast.error('접근 권한이 없습니다.')
+      return false
+    }
 
     const isValid = validPass(pass)
     if (!isValid) {

src/components/UI/comment/CommentContent.tsx

@@ -3,12 +3,12 @@ import { CommentType } from '@/types/items.types'
 interface PropsType extends CommentType { }
 export default function CommentContent({ comment }: PropsType) {
   const { nickname, email, created_at, comment: content } = comment
-
+  const id = email.split('@')[0]
   return (
     <div className="ml-[2.15em] break-words w-[87%] font-sans">
       <p className="sm:text-[13px] text-[12px] mt-[0.2em]">
         {nickname || '익명'}(
-        {email.replace(comment.email.slice(2, 5), '***')}){' '}
+        {id.replace(id.slice(2,4 ), '**').replace(id.slice(6,7),'*')}){' '}
         {created_at.substring(0, 10)}
       </p>
       <p className="sm:text-[14px] sm:pt-[5px] text-[12.5px] pt-[3px]  ">

src/components/UI/detail-quote/QuoteLikeBox.tsx

@@ -52,7 +52,7 @@ export default function QuoteLikeBox({ id }: PropsType) {
     <button
       aria-label="해당 명언에 대한 좋아요 클릭"
       onClick={onClickHandleLikeClick}
-      className={`bg-[white] right-2 sm:top-[15%] top-[13%]  transition-shadow  text-[1.2em] flex items-center px-[15px] shadow-[inset_0_0_2px_0_black] rounded-r-[5px] absolute `}
+      className={`bg-[white] left-0 top-[6em]  transition-shadow  text-[1.35em] flex items-center px-[15px] shadow-[inset_0_0_2px_0_black] rounded-r-[5px] absolute `}
     >
       <HiHandThumbUp color="rgba(255,0,0,0.7)" />
       <span className="mx-[2px]">

src/components/UI/quote/QuoteList.tsx

@@ -27,7 +27,9 @@ export default function QuoteList({ items }: PropsType) {
     <>
       <ul
         ref={ulRef}
-        className="mt-[1em] pt-[2em] grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 place-content-center w-full perspective-500 transform-style-3d"
+        className={`
+        ${items.length < 2 ? 'lg:grid-cols-1' : 'lg:grid-cols-3'}
+        mt-[1em] pt-[2em] grid  md:grid-cols-2 grid-cols-1 place-content-center w-full perspective-500 transform-style-3d`}
       >
         {items.map((item, i) => {
           return <QuoteCard key={item.id} index={i} item={item} items={items} />

src/components/UI/reply/ReplyContent.tsx

@@ -1,13 +1,15 @@
 import { ReplyType } from '@/types/items.types'
 
-interface PropsType extends ReplyType {}
+interface PropsType extends ReplyType { }
 export default function ReplyContent({ reply }: PropsType) {
+  const { nickname, email } = reply
+  const id = email.split('@')[0]
   return (
     <>
       <div className="relative left-[-2em] rounded-full bg-[#edc6c0] min-w-[40px] h-[35px] shadow-lg"></div>
       <div className="relative left-[-1em] font-sans">
         <span className="sm:text-[13px] sm:mt-[0.2em] text-[12px] inline-block pb-[3px]  ">
-          {reply.nickname}({reply.email.replace(reply.email.slice(2, 5), '***')}
+          {nickname}(  {id.replace(id.slice(2, 4), '**').replace(id.slice(6, 7), '*')}
           ) {reply.created_at.split('T')[0]}
         </span>
         <p className="sm:text-[13px] text-[12px] font-sans">{reply.content}</p>

src/components/UI/styler/StylerCarosel.tsx

@@ -27,6 +27,14 @@ export default function StylerCarosel() {
     '/images/image13.png',
     '/images/image14.png',
     '/images/image15.png',
+    '/images/image16.png',
+    '/images/image17.png',
+    '/images/image18.png',
+    '/images/image19.png',
+    '/images/image20.png',
+    '/images/image21.png',
+    '/images/image22.png',
+    '/images/image23.png',
   ])
   const setImageSrc = useImageElementStore((state) => state.setImageSrc)
 
@@ -39,7 +47,7 @@ export default function StylerCarosel() {
         {images.map((image, i) => {
           return (
             <Image
-              onClick={(e) => {
+              onClick={() => {
                 const src = images[i]
                 setImageSrc(src)
               }}

src/components/UI/styler/TextFontStyler.tsx

@@ -11,6 +11,11 @@ export default function TextFontStyler({
   textStyle,
 }: PropsType) {
   const fontFamilies = [
+    '선택',
+    '궁서',
+    '궁서체',
+    '고딕',
+    '고딕체',
     'TTHakgyoansimUndongjangL',
     'TTHakgyoansimMoheomgaB',
     'Dovemayo_gothic',
@@ -23,10 +28,6 @@ export default function TextFontStyler({
     'MS Sans Serif',
     'MS Serif',
     'serif', // 삐침 있는 글자
-    '궁서',
-    '궁서체',
-    '고딕',
-    '고딕체',
     'dotum', // 돋움
     'dotumche', // 돋움체
     'gulim', // 굴림