Merge branch 'RollingPaper42:main' into main

Arkingco · Nov 29, 2023 · ee46522 · ee46522
2 parents 8848f02 + fcadd22
commit ee46522
Show file tree

Hide file tree

Showing 22 changed files with 330 additions and 217 deletions.
diff --git a/public/Delete.svg b/public/Delete.svg
diff --git a/public/Picture.svg b/public/Picture.svg
diff --git a/src/app/api/group/data.json b/src/app/api/group/data.json
@@ -3,7 +3,7 @@
   "title": "hello~~",
   "boards": [
     {
-      "id": 1,
+      "id": "1",
       "title": "소중한 인연을 지켜줘",
       "theme": "calm",
       "contents": [
@@ -28,7 +28,7 @@
       ]
     },
     {
-      "id": 2,
+      "id": "2",
       "title": "감사의 마음을 전해줘",
       "theme": "green",
       "contents": [
@@ -45,6 +45,44 @@
           "photo": "/vercel.svg"
         }
       ]
+    },
+    {
+      "id": "3",
+      "title": "행복해질 수 있을거야!",
+      "theme": "strcat",
+      "contents": [
+        {
+          "id": 4,
+          "text": "친애하는 친구, 오랜만에 소식을 전해봅니다. 요즘은 날씨가 좋아서 야외 활동이 즐겁고, 새로운 친구들과의 만남도 있어 기분이 좋아졌어요. 너도 주변에서 좋은 일이 있었으면 좋겠어. 함께 나눌 수 있는 소중한 순간들이 많아지길 바래!",
+          "writer": "친구4",
+          "photo": "/strcatImg.png"
+        },
+        {
+          "id": 5,
+          "text": "안녕하세요! 이번 달은 바쁜 달이었어요. 업무가 많아져서 힘들기도 했지만, 동시에 새로운 도전을 할 기회가 있어서 기대가 돼요. 당신은 어떤 도전을 하고 있나요? 서로의 이야기를 공유하면 더 격려받을 것 같아서 이렇게 편지를 씁니다.",
+          "writer": "친구5",
+          "photo": "/vercel.svg"
+        }
+      ]
+    },
+    {
+      "id": "4",
+      "title": "strcat화이팅!",
+      "theme": "cyan",
+      "contents": [
+        {
+          "id": 4,
+          "text": "친애하는 친구, 오랜만에 소식을 전해봅니다. 요즘은 날씨가 좋아서 야외 활동이 즐겁고, 새로운 친구들과의 만남도 있어 기분이 좋아졌어요. 너도 주변에서 좋은 일이 있었으면 좋겠어. 함께 나눌 수 있는 소중한 순간들이 많아지길 바래!",
+          "writer": "친구4",
+          "photo": "/strcatImg.png"
+        },
+        {
+          "id": 5,
+          "text": "안녕하세요! 이번 달은 바쁜 달이었어요. 업무가 많아져서 힘들기도 했지만, 동시에 새로운 도전을 할 기회가 있어서 기대가 돼요. 당신은 어떤 도전을 하고 있나요? 서로의 이야기를 공유하면 더 격려받을 것 같아서 이렇게 편지를 씁니다.",
+          "writer": "친구5",
+          "photo": "/vercel.svg"
+        }
+      ]
     }
   ]
 }
diff --git a/src/app/api/personal/data.json b/src/app/api/personal/data.json
@@ -1,5 +1,5 @@
 {
-  "isOwner": true,
+  "isOwner": false,
   "board": {
     "id": 1,
     "title": "Sample Board",
@@ -8,26 +8,26 @@
       {
         "id": 1,
         "text": "즐거운 순간을 함께하며 행복한 기억 만들기를 기대해요.n",
-        "writer": "영일이삼사오육칠팔구",
-        "photo": "/Google.png"
+        "writer": "",
+        "photoUrl": "/Google.png"
       },
       {
         "id": 2,
         "text": "봄바람 속에 햇살이 미소 짓도록. 따뜻한 날 되세요.",
-        "writer": "User2",
-        "photo": "/kakao.png"
+        "writer": "",
+        "photoUrl": "/kakao.png"
       },
       {
         "id": 3,
         "text": "마음 가는 대로 꿈 펼쳐보세요. 가능성은 무한합니다.",
         "writer": "User3",
-        "photo": "/strcatImage.png"
+        "photoUrl": "/strcatImage.png"
       },
       {
         "id": 4,
         "text": "지친 하루 뒤에 찾아오는 평화로운 밤 되길 바랍니다.",
         "writer": "User4",
-        "photo": "/mario.png"
+        "photoUrl": "/mario.png"
       },
       {
         "id": 5,
@@ -39,7 +39,7 @@
         "id": 6,
         "text": "작은 기쁨이 큰 행복을 만들어냅니다. 즐거운 순간들!",
         "writer": "User6",
-        "photo": "/Google.png"
+        "photoUrl": "/Google.png"
       },
       {
         "id": 7,

diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
@@ -37,7 +37,7 @@ export default function Create() {
   const handleClick = () => {
     const data = {
       groupId: groupId,
-      backgroundColor: Theme,
+      theme: Theme.name,
       title: `\/\/${title}`,
     };
     axiosInstance

diff --git a/src/app/group/[id]/page.tsx b/src/app/group/[id]/page.tsx
@@ -28,7 +28,7 @@ export default function Group({ params }: { params: { id: string } }) {
   const scrollToId = (itemId: string) => {
     const map = itemsRef.current;
     const node = map.get(itemId);
-    const offset = node.offsetTop;
+    const offset = node.offsetTop - 56; //헤더 높이만큼 빼준다.
     window.scrollTo({ top: offset, behavior: 'smooth' });
   };
   const scrollToTop = () => {
@@ -39,6 +39,7 @@ export default function Group({ params }: { params: { id: string } }) {
     scrollToAdd(observe.boardId, itemsRef);
   };
   useEffect(() => {
+    //axios
     axiosInstance
       //.get(`/api/group`)
       .get(`/board-groups/${params.id}`)
@@ -47,16 +48,18 @@ export default function Group({ params }: { params: { id: string } }) {
         setTitle(data.data.title);
         setIsOwner(data.data.isOwner);
       })
-      .catch((error) => {});
+      .catch((err) => {});
   }, [params.id]);
   return (
-    <>
+    <div className={`h-[100vh] ${theme.background}`}>
       <Drawer />
       <StrcatHeader />
-      <div className={`relative w-full py-[24px] ${theme.background}`}>
+      <div
+        className={`relative w-full py-[24px] pt-[56px] ${theme.background}`}
+      >
         <div className="mb-[20px]">
           <h1 className={`${theme.defaultText} mx-[24px] text-[26px]`}>
-            {`// ${title}`}
+            {`${title}`}
           </h1>
         </div>
         <div>
@@ -111,7 +114,7 @@ export default function Group({ params }: { params: { id: string } }) {
                 />
                 <BottomButton
                   height="h-[42px]"
-                  color={`bg-strcat-green`}
+                  color={`${theme.leftCTA}`}
                   name="만들기"
                   width="basis-1/4"
                   onClickHandler={() =>
@@ -121,7 +124,7 @@ export default function Group({ params }: { params: { id: string } }) {
                 />
                 <BottomButton
                   height="h-[42px]"
-                  color={`bg-strcat-cyan`}
+                  color={`${theme.rightCTA}`}
                   name="글 작성"
                   width="basis-1/4"
                   onClickHandler={handleClick}
@@ -132,15 +135,15 @@ export default function Group({ params }: { params: { id: string } }) {
               <div className="flex w-full max-w-md">
                 <BottomButton
                   height="h-[42px]"
-                  color={`bg-white`}
+                  color={`${theme.leftCTA}`}
                   name="스트링캣 만들기"
                   width="basis-1/2"
                   onClickHandler={() => router.push(`/create`)}
                   disabled={false}
                 />
                 <BottomButton
                   height="h-[42px]"
-                  color={`bg-strcat-cyan`}
+                  color={`${theme.rightCTA}`}
                   name="이어서 글쓰기"
                   width="basis-1/2"
                   onClickHandler={handleClick}
@@ -151,6 +154,6 @@ export default function Group({ params }: { params: { id: string } }) {
         </div>
         {!isAdd && <ContentPhoto />}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/src/app/personal/[id]/page.tsx b/src/app/personal/[id]/page.tsx
@@ -35,7 +35,7 @@ export default function Personal({ params }: { params: { id: string } }) {
         setBoard([data.data.board]);
         setIsOwner(data.data.isOwner);
       })
-      .catch((error) => {});
+      .catch((err) => {});
   }, [params.id]);
 
   const handleClick = () => {
@@ -49,84 +49,86 @@ export default function Personal({ params }: { params: { id: string } }) {
 
   return (
     <>
-      <Drawer />
-      <StrcatHeader />
-      <CatAnimation />
-      <div
-        className={`relative w-full  py-[24px] text-justify ${theme.background} pb-[500px]`}
-      >
-        {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 h-full w-full max-w-md items-center justify-center px-[24px] "
-                id="strcatCreate"
-              >
-                <BottomButton
-                  height="h-[42px]"
-                  name="저장"
-                  width="basis-1/5"
-                  onClickHandler={() => router.push(`./${params.id}/export`)}
-                  disabled={false}
-                  color={`bg-white`}
-                />
-                <BottomButton
-                  name="공유"
-                  height="h-[42px]"
-                  width="basis-1/5"
-                  onClickHandler={() => router.push(`./${params.id}/summary`)}
-                  disabled={false}
-                  color={`bg-strcat-green`}
-                />
-                <BottomButton
-                  name="이어서 글쓰기"
-                  height="h-[42px]"
-                  width="basis-3/5"
-                  onClickHandler={handleClick}
-                  disabled={!observe.boardId}
-                  color={`bg-strcat-cyan`}
-                />
-              </div>
-            </div>
-          ) : (
-            <>
-              <div className=" fixed bottom-0 left-0 z-50 flex w-full items-center justify-center">
+      <div className={`h-[100vh] ${theme.background}`}>
+        <Drawer />
+        <StrcatHeader />
+        <CatAnimation />
+        <div
+          className={`relative w-full  py-[24px] text-justify ${theme.background} pb-[500px]`}
+        >
+          {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-20 flex w-full items-center justify-center">
                 <div
-                  className="flex w-full max-w-md items-center justify-center px-[24px] "
+                  className="flex w-full max-w-md items-center justify-center px-[24px]"
                   id="strcatCreate"
                 >
                   <BottomButton
-                    name="스트링캣 만들기"
                     height="h-[42px]"
-                    width="basis-1/2"
-                    onClickHandler={() => router.push(`/create`)}
+                    name="저장"
+                    width="basis-1/5"
+                    onClickHandler={() => router.push(`./${params.id}/export`)}
                     disabled={false}
                     color={`bg-white`}
                   />
+                  <BottomButton
+                    name="공유"
+                    height="h-[42px]"
+                    width="basis-1/5"
+                    onClickHandler={() => router.push(`./${params.id}/summary`)}
+                    disabled={false}
+                    color={`${theme.leftCTA}`}
+                  />
                   <BottomButton
                     name="이어서 글쓰기"
-                    width="basis-1/2"
                     height="h-[42px]"
+                    width="basis-3/5"
                     onClickHandler={handleClick}
                     disabled={!observe.boardId}
-                    color={`bg-strcat-cyan`}
+                    color={`${theme.rightCTA}`}
                   />
                 </div>
               </div>
-            </>
-          ))}
-        {board.length && !board[0].contents.length && !isAdd && (
-          <ShareButton params={params.id} />
-        )}
-        {!isAdd && <ContentPhoto />}
+            ) : (
+              <>
+                <div className=" fixed bottom-5 left-0 z-20 flex w-full items-center justify-center">
+                  <div
+                    className="flex w-full max-w-md items-center justify-center px-[24px] "
+                    id="strcatCreate"
+                  >
+                    <BottomButton
+                      name="스트링캣 만들기"
+                      height="h-[42px]"
+                      width="basis-1/2"
+                      onClickHandler={() => router.push(`/create`)}
+                      disabled={false}
+                      color={`${theme.leftCTA}`}
+                    />
+                    <BottomButton
+                      name="이어서 글쓰기"
+                      width="basis-1/2"
+                      height="h-[42px]"
+                      onClickHandler={handleClick}
+                      disabled={!observe.boardId}
+                      color={`${theme.rightCTA}`}
+                    />
+                  </div>
+                </div>
+              </>
+            ))}
+          {board.length && !board[0].contents.length && !isAdd && (
+            <ShareButton params={params.id} />
+          )}
+          {!isAdd && <ContentPhoto />}
+        </div>
       </div>
     </>
   );