Merge branch 'RollingPaper42:main' into main

src/app/create/group/page.tsx

@@ -27,7 +27,9 @@ export default function Create() {
     );
     if (isConfirmed) {
       try {
-        const res = await axiosInstance.post(`/board-groups`, { title: title });
+        const res = await axiosInstance.post(`/board-groups`, {
+          title: `\/\/${title}`,
+        });
         router.push(`/group/${res.data}`);
       } catch (err) {
         const error = err as AxiosError;

src/app/create/page.tsx

@@ -38,7 +38,7 @@ export default function Create() {
     const data = {
       groupId: groupId,
       backgroundColor: Theme,
-      title: title,
+      title: `\/\/${title}`,
     };
     axiosInstance
       .post(`/boards`, data)
@@ -83,7 +83,7 @@ export default function Create() {
   return (
     <div className={`${Theme.background} h-full w-full`}>
       <div className="flex h-full w-full flex-col">
-        <div className="basis-1/1">
+        <div className="basis-1/12">
           <div className="flex h-full w-full flex-row">
             <div
               className=" basis-1/6 items-center justify-center pl-[24px] pt-[16px]"
@@ -102,21 +102,19 @@ export default function Create() {
           </div>
         </div>
         <div className="basis-2/12">
-          <div className="mt-10 flex flex-col items-center justify-center">
-            <div className="w-80">
-              <textarea
-                id="titleMessage"
-                rows={1}
-                value={title}
-                className={` w-full resize-none ${Theme.background} text-[22px] ${Theme.defaultText} outline-none placeholder:${Theme.defaultText}`}
-                placeholder="제목을 입력해주세요."
-                maxLength={30}
-                onChange={(e) => handleChangeTitle(e)}
-                onKeyDown={(e) => handleKeyDownTitle(e, title)}
-              />
-              <div className={`text-right ${ErrorFontColor}`}>
-                {title.length}/30
-              </div>
+          <div className="mt-10 flex w-full basis-3/12 flex-col items-center justify-center px-[24px]">
+            <textarea
+              id="titleMessage"
+              rows={1}
+              value={title}
+              className={` w-full resize-none ${Theme.background} text-[22px] ${Theme.defaultText} outline-none placeholder:${Theme.defaultText}`}
+              placeholder="제목을 입력해주세요."
+              maxLength={30}
+              onChange={(e) => handleChangeTitle(e)}
+              onKeyDown={(e) => handleKeyDownTitle(e, title)}
+            />
+            <div className={`w-full text-right text-[14px] ${ErrorFontColor}`}>
+              {title.length}/30
             </div>
           </div>
         </div>
@@ -132,11 +130,11 @@ export default function Create() {
           <ThemeChange />
         </div>
         <div className="basis-2/12">
-          <div className="mt-10 flex flex-row items-center justify-center">
+          <div className="mx-[24px] mt-10 flex flex-row items-center justify-center">
             <BottomButton
               height="h-[42px]"
               name="완료"
-              width="w-[312px]"
+              width="w-full"
               onClickHandler={() => handleConfirm()}
               disabled={buttonState}
               color={`${Theme.rightCTA}`}

src/app/group/[id]/page.tsx

@@ -25,7 +25,7 @@ export default function Group({ params }: { params: { id: string } }) {
   const [observe] = useRecoilState(observeState);
   const [isOwner, setIsOwner] = useState<boolean>(false);
   const router = useRouter();
-  const scrollToId = (itemId: number) => {
+  const scrollToId = (itemId: string) => {
     const map = itemsRef.current;
     const node = map.get(itemId);
     const offset = node.offsetTop;
@@ -48,7 +48,7 @@ export default function Group({ params }: { params: { id: string } }) {
         setIsOwner(data.data.isOwner);
       })
       .catch((error) => {});
-  }, []);
+  }, [params.id]);
   return (
     <>
       <Drawer />

src/app/login/page.tsx

@@ -29,42 +29,36 @@ export default function Login() {
             <div>로그인하고 스트링캣을 생성해보세요.</div>
           </div>
         </div>
-        <div className="basis-8/12"></div>
+        <div className="basis-9/12"></div>
         <div className="mx-[24px] basis-3/12">
-          <button
-            className="mt-3 flex h-12 w-full flex-row justify-center rounded-lg bg-yellow-300  "
+          <div
+            className="h-[45px] w-full rounded-lg bg-yellow-300  "
             onClick={onClickOAuthKakao}
           >
-            <div className=" basis-3/12"></div>
-            <div className="flex basis-52 flex-row items-center justify-center">
-              <Image
-                src="/kakao.png"
-                width={48}
-                height={48}
-                alt="kakao"
-                className="h-12"
-              />
-              <div className="h-full basis-32 text-left">카카오로 시작하기</div>
+            <div className="flex h-full w-full flex-row">
+              <div className="basis-2/12">
+                <Image src="/kakao.svg" width={48} height={48} alt="kakao" />
+              </div>
+              <div className="mt-[12px] basis-8/12 text-center text-[16px]">
+                카카오 시작하기
+              </div>
+              <div className="basis-2/12"></div>
             </div>
-            <div className="basis-3/12"></div>
-          </button>
-          <button
-            className="mt-3 flex h-12 w-full flex-row justify-center rounded-lg bg-neutral-200 "
+          </div>
+          <div
+            className="mt-[22px] h-[45px] w-full rounded-lg bg-neutral-200  "
             onClick={onClickOAuthGoogle}
           >
-            <div className=" basis-3/12"></div>
-            <div className="flex basis-52 flex-row items-center justify-center">
-              <Image
-                src="/google.png"
-                width={48}
-                height={48}
-                alt="google"
-                className="h-12"
-              />
-              <div className="h-full basis-32 text-left">구글로 시작하기</div>
+            <div className="flex h-full w-full flex-row">
+              <div className="basis-2/12">
+                <Image src="/google.svg" width={48} height={48} alt="google" />
+              </div>
+              <div className="mt-[12px] basis-8/12 text-center text-[16px]">
+                구글 시작하기
+              </div>
+              <div className="basis-2/12"></div>
             </div>
-            <div className="basis-3/12"></div>
-          </button>
+          </div>
         </div>
       </div>
     </div>

src/app/modal/page.tsx

@@ -3,15 +3,15 @@
 import CatAnimation from '@/component/CatAnimation';
 import Error from '@/component/Modal/Error';
 import useModal from '@/hooks/useModal';
-import { catState } from '@/recoil/cat';
-import { catAction } from '@/types/cat';
+import { catAnimationState } from '@/recoil/catAnimation';
+import { catAction } from '@/types/animation';
 import { axiosInstance } from '@/utils/axios';
 import { confirm } from '@/utils/confirm';
 import { useRecoilState } from 'recoil';
 
 export default function Modal() {
   const [openModal, closeModal] = useModal();
-  const [, setCat] = useRecoilState(catState);
+  const [, setCat] = useRecoilState(catAnimationState);
 
   const handleConfirm = async () => {
     const result = await confirm('컨펌 메시지 글', openModal, closeModal);
@@ -29,7 +29,8 @@ export default function Modal() {
     const divLeft = div.getBoundingClientRect().left;
     const divTop = div.getBoundingClientRect().top;
     setCat({
-      catAction: catAction.exit,
+      src: '/cats/in.gif',
+      catAction: catAction.out,
       width: 50,
       height: 50,
       top: divTop,
@@ -43,7 +44,8 @@ export default function Modal() {
     const divBottom = div.getBoundingClientRect().bottom;
     const divRight = div.getBoundingClientRect().right;
     setCat({
-      catAction: catAction.exit,
+      src: '/cats/strcat/in.gif',
+      catAction: catAction.out,
       width: 50,
       height: 50,
       top: divBottom,
@@ -57,7 +59,8 @@ export default function Modal() {
     const divLeft = div.getBoundingClientRect().left;
     const divBottom = div.getBoundingClientRect().bottom;
     setCat({
-      catAction: catAction.scroll,
+      src: '/cats/strcat/in.gif',
+      catAction: catAction.out,
       width: 50,
       height: 50,
       top: divBottom + 50,

src/app/page.tsx

@@ -41,7 +41,7 @@ export default function Home() {
             className={`mx-[24px] mt-[46px] text-[20px] ${Theme.defaultText}`}
           >
             <p>
-              {`// 스트링캣은 문자열을 끝없이 늘려 스크롤을 만들 수 있는 신개념
+              {`\/\/ 스트링캣은 문자열을 끝없이 늘려 스크롤을 만들 수 있는 신개념
               롤링페이퍼 서비스 입니다.`}
             </p>
             <p>소중한 사람에게 스트링캣을 남겨보세요!</p>

src/app/personal/[id]/page.tsx

@@ -1,19 +1,22 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import { axiosInstance } from '@/utils/axios';
 import StrcatBoard from '@/component/StrcatBoard';
 import BottomButton from '@/component/BottomButton';
 import ContentPhoto from '@/component/ContentPhoto';
 import { useRecoilState } from 'recoil';
 import { themeState } from '@/recoil/theme';
 import Drawer from '@/component/Drawer';
-import StrcatHeader from '@/component/StrcatHeader';
 import { observeState } from '@/recoil/observe';
 import { useRouter } from 'next/navigation';
 import { board } from '@/types/boards';
 import { scrollToAdd, setMap } from '@/utils/scrollTo';
-import { handleShare } from '@/utils/handleShare';
+import CatAnimation from '@/component/CatAnimation';
+import { catAction } from '@/types/animation';
+import { useCat } from '@/hooks/useCat';
+import ShareButton from '@/component/ShareButton';
+import { axiosInstance } from '@/utils/axios';
+import StrcatHeader from '@/component/StrcatHeader';
 
 export default function Personal({ params }: { params: { id: string } }) {
   const [board, setBoard] = useState<board[]>([]);
@@ -23,40 +26,50 @@ export default function Personal({ params }: { params: { id: string } }) {
   const [observe] = useRecoilState(observeState);
   const [theme] = useRecoilState(themeState);
   const router = useRouter();
+  const [runCatAnimati] = useCat();
   useEffect(() => {
-    //axios
     axiosInstance
       .get(`/boards/${params.id}`)
-      //.get(`/api/personal`)
+      // .get(`/api/personal`)
       .then((data) => {
         setBoard([data.data.board]);
         setIsOwner(data.data.isOwner);
       })
       .catch((error) => {});
-  }, []);
+  }, [params.id]);
 
   const handleClick = () => {
     setIsAdd(true);
     scrollToAdd(board[0].id, itemsRef);
   };
-  if (!board.length) return null;
+
+  useEffect(() => {
+    if (board) runCatAnimati('strcatCreate', catAction.sit, 10000);
+  }, [board]);
+
   return (
     <>
       <Drawer />
       <StrcatHeader />
+      <CatAnimation />
       <div
         className={`relative w-full  py-[24px] text-justify ${theme.background} pb-[500px]`}
       >
-        <StrcatBoard
-          board={board[0]}
-          ref={(node) => setMap(node, board[0], itemsRef)}
-          isAdd={isAdd}
-          setIsAdd={setIsAdd}
-        />
+        {board.length && (
+          <StrcatBoard
+            board={board[0]}
+            ref={(node) => setMap(node, board[0], itemsRef)}
+            isAdd={isAdd}
+            setIsAdd={setIsAdd}
+          />
+        )}
         {!isAdd &&
           (isOwner ? (
             <div className="fixed bottom-5 left-0 z-50 flex w-full items-center justify-center">
-              <div className="flex w-full max-w-md items-center justify-center px-[24px]">
+              <div
+                className="flex h-full w-full max-w-md items-center justify-center px-[24px] "
+                id="strcatCreate"
+              >
                 <BottomButton
                   height="h-[42px]"
                   name="저장"
@@ -86,7 +99,10 @@ export default function Personal({ params }: { params: { id: string } }) {
           ) : (
             <>
               <div className=" fixed bottom-0 left-0 z-50 flex w-full items-center justify-center">
-                <div className="flex w-full max-w-md items-center justify-center px-[24px] ">
+                <div
+                  className="flex w-full max-w-md items-center justify-center px-[24px] "
+                  id="strcatCreate"
+                >
                   <BottomButton
                     name="스트링캣 만들기"
                     height="h-[42px]"
@@ -107,13 +123,8 @@ export default function Personal({ params }: { params: { id: string } }) {
               </div>
             </>
           ))}
-        {!board[0].contents.length && !isAdd && (
-          <div
-            className="  h-32 w-32 bg-slate-200"
-            onClick={() => handleShare(`/personal/${params.id}`)}
-          >
-            공유하기
-          </div>
+        {board.length && !board[0].contents.length && !isAdd && (
+          <ShareButton params={params.id} />
         )}
         {!isAdd && <ContentPhoto />}
       </div>

src/component/CatAnimation.tsx

@@ -1,27 +1,25 @@
-import { catState } from '@/recoil/cat';
-import { catAction } from '@/types/cat';
+import { catAnimationState } from '@/recoil/catAnimation';
 import Image from 'next/image';
 import { useRecoilState } from 'recoil';
 
 export default function CatAnimation() {
-  const [cat] = useRecoilState(catState);
+  const [catAnimation] = useRecoilState(catAnimationState);
 
   return (
     <div
-      className="fixed"
+      className="fixed z-[55]"
       style={{
-        width: `${cat.width}px`,
-        height: `${cat.height}px`,
-        top: `${cat.top - cat.width}px`,
-        left: `${cat.left}px`,
+        width: `${catAnimation.width}px`,
+        height: `${catAnimation.height}px`,
+        top: `${catAnimation.top}px`,
+        left: `${catAnimation.left}px`,
       }}
     >
-      {cat.catAction === catAction.exit && (
-        <Image alt="exit" src="/cats/strcat_basic_default.gif" fill />
-      )}
-      {cat.catAction === catAction.scroll && (
-        <Image alt="exit" src="/cats/strcat_scroll_default.gif" fill />
-      )}
+      <Image
+        alt={`${catAnimation.catAction}`}
+        src={`${catAnimation.src}`}
+        fill
+      />
     </div>
   );
 }