my room 메모 CRUD 기능

.eslintrc.json

@@ -45,6 +45,7 @@
     "no-shadow": 0,
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "react/function-component-definition": 0,
-    "@typescript-eslint/no-non-null-assertion": 0
+    "@typescript-eslint/no-non-null-assertion": 0,
+    "require-await": "error"
   }
 }

src/DesignSystem/BackgroundMain/index.tsx

@@ -45,9 +45,7 @@ const BackgroundBox = styled.div`
   justify-content: center;
   margin: 0 auto;
   box-shadow: none;
-
-  /* s3에 이미지 업로드 필요 */
-  background-image: url('image/backgoundNoCloud.png');
+  background-image: url('../../image/backgoundNoCloud.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 1440px 1024px;

src/api/memo.ts

@@ -0,0 +1,67 @@
+import axios from 'axios';
+import { NextRouter } from 'next/router';
+import Axios from '~lib/axios';
+
+type Form = {
+  routerId?: string;
+  id?: number;
+  title: string;
+  content: string;
+};
+
+export const fetchRoomById = async (id: string, showError: () => void, router: NextRouter) => {
+  try {
+    const res = await Axios.get(`/api/rooms/${id}`, { withCredentials: true });
+    return res.data;
+  } catch (e) {
+    if (e instanceof Error) {
+      if (axios.isAxiosError(e)) {
+        if (e.response?.status === 401) {
+          showError();
+          router.push('/sign-in');
+        }
+      }
+      throw new Error('fetchRoomById Error');
+    }
+  }
+};
+
+export const fetchAllMemos = async (id: string, showError: () => void) => {
+  try {
+    const res = await Axios.get(`/api/rooms/${id}/memos`, { withCredentials: true });
+    return res.data;
+  } catch (e) {
+    if (e instanceof Error) {
+      showError();
+      throw new Error('fetchAllMemos Error');
+    }
+  }
+};
+
+export const registMemo = async (form: Form) => {
+  try {
+    await Axios.post(
+      `/api/rooms/${form.routerId}/memos`,
+      { title: form.title, content: form.content },
+      { withCredentials: true },
+    );
+  } catch (e) {
+    if (e instanceof Error) {
+      throw new Error('registMemo Error', e);
+    }
+  }
+};
+
+export const updateMemo = async (form: Form) => {
+  try {
+    await Axios.put(
+      `/api/memos/${form.id}`,
+      { title: form.title, content: form.content },
+      { withCredentials: true },
+    );
+  } catch (e) {
+    if (e instanceof Error) {
+      throw new Error('updateMemo Error', e);
+    }
+  }
+};

src/pages/my-room/Avatar.tsx → src/components/Rooms/Avatar.tsx

@@ -1,11 +1,15 @@
 import styled from 'styled-components';
 import Image from 'next/image';
 
-const Avatar = () => {
+type Props = {
+  roomOwner: string;
+};
+
+const Avatar = ({ roomOwner }: Props) => {
   return (
     <AvatarBox>
       {/* 사용자 이름 패치 필요 */}
-      <p>사용자이름</p>
+      <p>{roomOwner}</p>
       <Image src="/image/human.png" alt="아바타" width="312" height="398" />
     </AvatarBox>
   );

src/pages/my-room/Board.tsx → src/components/Rooms/Board.tsx

@@ -9,54 +9,66 @@ type PostShape = 'circle' | 'rectangle';
 
 type Props = {
   handleModalClick: () => void;
-  handleSecondModalClick: (id: number) => void;
+  handleMemoModalClick: (id: number) => void;
   comments: Array<Comment>;
 };
 
 // comments는 최신 5개? 처음 5개? 만약 5개 미만이면?
-const Board = ({ handleModalClick, handleSecondModalClick, comments }: Props) => {
+const Board = ({ handleModalClick, handleMemoModalClick, comments }: Props) => {
   return (
     <BoardContainer>
       <BoardRack />
       <BoardBody>
-        <MoreButton type="button" onClick={handleModalClick}>
-          <LionDoll />
-        </MoreButton>
-        <Post top="10%" left="8%">
-          <PostBody shape="circle" onClick={() => handleSecondModalClick(0)}>
-            <p>{comments && comments[0].title}</p>
-          </PostBody>
-          <Tape position="center" />
-        </Post>
-        <Post top="10%" left="65%" rotate="right">
-          <PostBody shape="rectangle" onClick={() => handleSecondModalClick(1)}>
-            <p>{comments && comments[1].title}</p>
-          </PostBody>
-          <Tape fill="#3efff3" opacity="0.52" position="leftTop" />
-          <Tape fill="#3efff3" opacity="0.52" position="rightBottom" />
-        </Post>
-        <Post top="30%" left="35%" rotate="left">
-          <PostBody shape="rectangle" onClick={() => handleSecondModalClick(2)}>
-            <p>{comments && comments[2].title}</p>
-          </PostBody>
-          <Tape fill="#fff844" opacity="0.63" position="leftTop" />
-          <Tape fill="#fff844" opacity="0.63" position="rightTop" />
-          <Tape fill="#fff844" opacity="0.63" position="leftBottom" />
-          <Tape fill="#fff844" opacity="0.63" position="rightBottom" />
-        </Post>
-        <Post top="50%" left="10%" rotate="right">
-          <PostBody shape="rectangle" onClick={() => handleSecondModalClick(3)}>
-            <p>{comments && comments[3].title}</p>
-          </PostBody>
-          <Tape fill="#caa5E8" opacity="0.52" position="leftTop" />
-          <Tape fill="#caa5E8" opacity="0.52" position="rightBottom" />
-        </Post>
-        <Post top="55%" left="65%">
-          <PostBody shape="circle" onClick={() => handleSecondModalClick(4)}>
-            <p>{comments && comments[4].title}</p>
-          </PostBody>
-          <Tape fill="#b3ec9f" opacity="0.59" position="center" />
-        </Post>
+        <>
+          <MoreButton type="button" onClick={handleModalClick}>
+            <LionDoll />
+          </MoreButton>
+          {comments[0] && (
+            <Post top="10%" left="8%">
+              <PostBody shape="circle" onClick={() => handleMemoModalClick(comments[0].id)}>
+                <p>{comments && comments[0].title}</p>
+              </PostBody>
+              <Tape position="center" />
+            </Post>
+          )}
+          {comments[1] && (
+            <Post top="10%" left="65%" rotate="right">
+              <PostBody shape="rectangle" onClick={() => handleMemoModalClick(comments[1].id)}>
+                <p>{comments && comments[1].title}</p>
+              </PostBody>
+              <Tape fill="#3efff3" opacity="0.52" position="leftTop" />
+              <Tape fill="#3efff3" opacity="0.52" position="rightBottom" />
+            </Post>
+          )}
+          {comments[2] && (
+            <Post top="30%" left="35%" rotate="left">
+              <PostBody shape="rectangle" onClick={() => handleMemoModalClick(comments[2].id)}>
+                <p>{comments && comments[2].title}</p>
+              </PostBody>
+              <Tape fill="#fff844" opacity="0.63" position="leftTop" />
+              <Tape fill="#fff844" opacity="0.63" position="rightTop" />
+              <Tape fill="#fff844" opacity="0.63" position="leftBottom" />
+              <Tape fill="#fff844" opacity="0.63" position="rightBottom" />
+            </Post>
+          )}
+          {comments[3] && (
+            <Post top="50%" left="10%" rotate="right">
+              <PostBody shape="rectangle" onClick={() => handleMemoModalClick(comments[3].id)}>
+                <p>{comments && comments[3].title}</p>
+              </PostBody>
+              <Tape fill="#caa5E8" opacity="0.52" position="leftTop" />
+              <Tape fill="#caa5E8" opacity="0.52" position="rightBottom" />
+            </Post>
+          )}
+          {comments[4] && (
+            <Post top="55%" left="65%">
+              <PostBody shape="circle" onClick={() => handleMemoModalClick(comments[4].id)}>
+                <p>{comments && comments[4].title}</p>
+              </PostBody>
+              <Tape fill="#b3ec9f" opacity="0.59" position="center" />
+            </Post>
+          )}
+        </>
       </BoardBody>
     </BoardContainer>
   );

src/pages/my-room/GuestBook.tsx → src/components/Rooms/GuestBook.tsx

@@ -13,44 +13,38 @@ import useModalOutsideClick from '~/hooks/useModalOutsideClick';
 
 type Props = {
   onClose: () => void;
-  handleSecondModalClick: (id: number | null) => void;
+  handleMemoModalClick: (id: number | null) => void;
   comments: Array<Comment>;
 };
 
-const GuestBook = ({ onClose, handleSecondModalClick, comments }: Props) => {
+const GuestBook = ({ onClose, handleMemoModalClick, comments }: Props) => {
   // 모달창 크기에 최대 메모장 10개 보임 => 즉, 10개당 1슬라이드를 의미 나머지 발생 시 + 1
   const slideRef = useRef<HTMLDivElement>(null);
   const slideTotal = useRef<number>(Math.ceil(comments?.length / 10) - 1);
 
   const [currentSlide, setCurrentSlide] = useState<number>(0);
 
   // prev 클릭 시 현재 슬라이드를 -1, next 클릭은 +1, 각각 처음 혹은 끝이면 반대 방향으로 이동
-  const onClickPrev = () => {
+  const onClickNext = () => {
     if (currentSlide === 0) {
       setCurrentSlide(slideTotal.current);
     } else {
       setCurrentSlide(currentSlide - 1);
     }
   };
 
-  const onClickNext = () => {
+  const onClickPrev = () => {
     if (currentSlide >= slideTotal.current) {
       setCurrentSlide(0);
     } else {
       setCurrentSlide(currentSlide + 1);
     }
   };
 
-  // DOM 직접 제어 방식
-  // useEffect(() => {
-  //   if (slideRef.current !== null) {
-  //     slideRef.current.style.transform = `translateX(-${currentSlide}00%)`;
-  //   }
-  // }, [currentSlide]);
-
   useEffect(() => {
     if (slideRef.current !== null) {
-      scrollTo(slideRef.current, { left: currentSlide * 920, behavior: 'smooth' });
+      // wrap-reverse로 인해 스크롤 반전
+      scrollTo(slideRef.current, { left: currentSlide * -960, behavior: 'smooth' });
     }
   }, [currentSlide]);
 
@@ -79,19 +73,19 @@ const GuestBook = ({ onClose, handleSecondModalClick, comments }: Props) => {
             </InputGroup>
             <MemoButtonWrap>
               <Button size="small">삭제</Button>
-              <Button size="small" onClick={() => handleSecondModalClick(null)}>
+              <Button size="small" onClick={() => handleMemoModalClick(null)}>
                 +추가
               </Button>
             </MemoButtonWrap>
           </MidBox>
 
           <CommentWrap ref={slideRef}>
-            {comments?.map((memo: { id: number; title: string; nickname: string }) => (
+            {comments?.map((memo: { id: number; title: string }) => (
               <MemoBox key={memo.id}>
                 <Tape fill="#62fade" opacity="0.7" />
-                <button type="button" onClick={() => handleSecondModalClick(memo.id)}>
+                <button type="button" onClick={() => handleMemoModalClick(memo.id)}>
                   <p>{memo.title}</p>
-                  <p>{memo.nickname}</p>
+                  {/* <p>{memo.nickname}</p> */}
                 </button>
               </MemoBox>
             ))}
@@ -173,7 +167,7 @@ const MemoButtonWrap = styled.div`
 
 const CommentWrap = styled.div`
   display: flex;
-  flex-flow: column wrap;
+  flex-flow: column wrap-reverse;
   gap: 30px 50px;
   justify-content: center;
   transition: 0.3s ease-out;