Fix/notice like 2

.env.example

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_API=xxxx.poapper.com
 NEXT_PUBLIC_ENV={local, dev, prod}
 
-
+# only for local development
+NODE_TLS_REJECT_UNAUTHORIZED=0

certificates/README.md

@@ -22,3 +22,17 @@ Sudo password:
 ```
 
 가이드 대로 본인의 root password를 입력하면, 루트 경로에 `certificates/`란 폴더에 `localhost-key.pem`과 `localhost.pem`이 생성되고, NextJS app을 https로 실행할 수 있다.
+
+## NODE_TLS_REJECT_UNAUTHORIZED
+
+ENV에 요 값을 아래와 같이 세팅해야 한다.
+
+```
+NODE_TLS_REJECT_UNAUTHORIZED=0
+```
+
+그래야 self-signed cert를 사용해도 SSR과 API 요청을 할 수 있다.
+
+## Chrome Allow Insecure Localhost
+
+또, 크롬에서도 insecure localhost에 대한 접속을 허용해줘야 한다. `chrome://flags/#allow-insecure-localhost` 경로로 이동해서 해당 옵션을 Enabled로 바꾸자.

components/calendar/calendar.panel.tsx

@@ -11,7 +11,7 @@ const CalendarPanel = ({ nextEvent }: { nextEvent: ICalendar }) => {
   );
   return (
     <div style={{ marginBottom: 12 }}>
-      <NoticeCard>
+      <CalendarCard>
         <div
           style={{
             fontWeight: 700,
@@ -26,14 +26,14 @@ const CalendarPanel = ({ nextEvent }: { nextEvent: ICalendar }) => {
           {nextEvent.title}
           <br />({`${moment(nextEvent.event_date).format('MM월 DD일 dddd')}`})
         </div>
-      </NoticeCard>
+      </CalendarCard>
     </div>
   );
 };
 
 export default CalendarPanel;
 
-const NoticeCard = styled.div`
+const CalendarCard = styled.div`
   background: #eeeeee;
   border-radius: 0.4em;
   padding: 18px;

components/notice/notice.card.tsx

@@ -17,21 +17,24 @@ const NoticeCard: React.FC<NoticeCardProps> = ({ notice, user }) => {
   const [isLike, setIsLike] = useState<boolean>(false);
   const [likeCount, setLikeCount] = useState<number>(0);
 
+  const user_id = user ? user.uuid : null;
+  const notice_id = notice.id;
+
   useEffect(() => {
     const fetchLikeStatus = async () => {
       if (!user) return;
 
-      const status = await PoPoAxios.get('/noticeLike/status', {
-        params: { user: user.uuid, notice: notice.id },
-        withCredentials: true,
-      });
+      const status = await PoPoAxios.get(
+        `/noticeLike/status/${user_id}/${notice_id}`,
+        {
+          withCredentials: true,
+        },
+      );
       setIsLike(status.data);
     };
 
     const fetchLikeCount = async () => {
-      const count = await PoPoAxios.get('/noticeLike/count', {
-        params: { notice: notice.id },
-      });
+      const count = await PoPoAxios.get(`/noticeLike/count/${notice_id}`);
       setLikeCount(count.data);
     };
 
@@ -46,27 +49,26 @@ const NoticeCard: React.FC<NoticeCardProps> = ({ notice, user }) => {
       return;
     }
 
-    const data = { user_id: user.uuid, notice_id: notice.id };
-
     if (isLike) {
-      await PoPoAxios.delete('/noticeLike', {
-        data,
+      await PoPoAxios.delete(`/noticeLike/${user_id}/${notice_id}`, {
         withCredentials: true,
       })
         .then(() => setLikeCount(likeCount - 1))
         .catch((err) => {
           const errMsg = err.response.data.message;
           alert(`공지 좋아요 취소에 실패했습니다.\n${errMsg}`);
-          console.log(data);
           console.log(err);
         });
     } else {
-      await PoPoAxios.post('/noticeLike', data, { withCredentials: true })
+      await PoPoAxios.post(
+        '/noticeLike',
+        { user_id: user_id, notice_id: notice_id },
+        { withCredentials: true },
+      )
         .then(() => setLikeCount(likeCount + 1))
         .catch((err) => {
           const errMsg = err.response.data.message;
           alert(`공지 좋아요에 실패했습니다.\n${errMsg}`);
-          console.log(data);
           console.log(err);
         });
     }