Merge pull request #136 from nori-dongsan/community_form/#131

[ CommunityForm ] 커뮤니티 상세 글 api 연결
nori-dongsan · Jul 21, 2022 · 9a3f668 · 9a3f668
2 parents 2f23b70 + 3751c08
commit 9a3f668
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 125 deletions.
diff --git a/components/community/ReplyList.tsx b/components/community/ReplyList.tsx
@@ -68,7 +68,7 @@ export default function ReplyList(props: ReplyListProps) {
     <>
       <StReplyTitle>
         <h1>댓글</h1>
-        <p>23</p>
+        <p>{replyList.length}</p>
       </StReplyTitle>
       <StInputForm>
         <StInputContent inputColor={inputColor}>

diff --git a/core/api/community.ts b/core/api/community.ts
@@ -20,10 +20,6 @@ export const getCommunity = () => {
   return baseInstance.get(`/board`);
 };
 
-// export const getCommunity = () => {
-//   return baseInstance.get(`/board`);
-// };
-
 export const postCommunity = async (body: PostCommunityBody) => {
   try {
     const { data } = await baseInstance.post('/board', body);
@@ -33,16 +29,8 @@ export const postCommunity = async (body: PostCommunityBody) => {
   }
 };
 
-export const getCommunityDetail = async (id: string) => {
-  try {
-    // const { data } = await axios.get(
-    //   `https://jsonplaceholder.typicode.com/posts/${id}`,
-    // );
-    const { data } = await baseInstance.get(`/board/${id}`);
-    return data;
-  } catch (e) {
-    console.log(e);
-  }
+export const getCommunityDetail = (id: string) => {
+  return baseInstance.get(`/board/${id}`);
 };
 
 export const deleteCommunity = async (id: string) => {

diff --git a/core/api/user.ts b/core/api/user.ts
@@ -12,7 +12,6 @@ export const loginUser = async (userLoginData: PostLoginBody) => {
     userLoginData,
   )) as ResponseLoginDto;
 
-  console.log(userLoginData);
   if (data) {
     LocalStorage.setUserSession(data.data.accessToken, data.data.refreshToken);
   }

diff --git a/core/axios.ts b/core/axios.ts
@@ -12,8 +12,10 @@ const baseInstance = axios.create({
 baseInstance.interceptors.request.use((config) => {
   const headers = {
     ...config.headers,
-    accessToken: LocalStorage.getItem('accessToken'),
-    refreshToken: LocalStorage.getItem('refreshToken'),
+    accessToken:
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MzAsImlhdCI6MTY1ODM4NDEwMCwiZXhwIjoxNjU4MzkxMzAwLCJpc3MiOiJub3JpIn0.ZNRxtGPFJpVCHJzlK0HdcgPcZWvkkCt3FZ_VHu8sz7M',
+    refreshToken:
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MzAsImlhdCI6MTY1ODM4NDEwMCwiZXhwIjoxNjU5NTkzNzAwLCJpc3MiOiJub3JpIn0.AeuhSmM1ZqItojeM3O0SwrELog-Qfq91r_ii0EMgPig',
   };
 
   return { ...config, headers };

diff --git a/pages/community/[cid].tsx b/pages/community/[cid].tsx
@@ -67,7 +67,7 @@ export default function CommunityDetail({
                   {author && <IcWriter />}
                   <span>{userNickname}</span>
                 </StNickNameInfo>
-                <span>{createdAt}</span>
+                <span>{createdAt.split('T')[0]}</span>
               </StCommunityInfo>
               <StCommunityMenu>
                 <IcMenu
@@ -100,7 +100,13 @@ export default function CommunityDetail({
               <StImgWrapper>
                 {imageList.map((item, idx) => (
                   <StPreviewImgWrapper key={idx}>
-                    <StPreviewImg src={item} alt={item} />
+                    <StPreviewImg
+                      src={
+                        'https://nori-image.s3.ap-northeast-2.amazonaws.com/' +
+                        item
+                      }
+                      alt={item}
+                    />
                     <StExpandImgIcon onClick={() => handleExpanded(item)} />
                   </StPreviewImgWrapper>
                 ))}
@@ -127,105 +133,14 @@ type Props = {
 interface Params extends ParsedUrlQuery {
   cid: string;
 }
-// 해당 페이지 렌더링 시 항상 실행
+
 export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
   params,
 }) => {
-  // api를 통해 받은 data 정보
-  const data = await getCommunityDetail(params!.cid);
+  const res = await getCommunityDetail(params!.cid);
   return {
-    //	page component의 Props로 전달되는 객체
     props: {
-      data: {
-        id: '2',
-        author: true,
-        category: '후기',
-        title: '그린키드 미끄럼틀 아이가 좋아하네요',
-        content:
-          '군인 또는 군무원이 아닌 국민은 대한민국의 영역안에서는 중대한 군사상 기밀·초병·초소·유독음식물공급·포로·군용물에 관한 죄중 법률이 정한 경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다.\n 선거에 관한 경비는 법률이 정하는 경우....경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다.\n 선거에 관한 경비는 법률이 정하는 경우....\n',
-        userNickname: '예현맘',
-        replyCount: 12,
-        createdAt: '2022.06.23',
-        imageList: [
-          'https://shop-phinf.pstatic.net/20220517_138/1652797518851PNyB4_JPEG/53933353675306804_1875513620.jpg?type=f295_381',
-          'https://img.huffingtonpost.com/asset/5d703563250000ad0003e5bd.jpeg?ops=scalefit_630_noupscale',
-          'http://image.auction.co.kr/itemimage/24/af/15/24af15b716.jpg',
-        ],
-        replyList: [
-          {
-            userNickname: '희지맘',
-            content: '와 정말 좋은 글 입니다.',
-            createdAt: '2022.06.23',
-            author: true,
-          },
-          {
-            userNickname: '희지맘',
-            content: '와 정말 공감가는 글 입니다.',
-            createdAt: '2022.06.23',
-            author: false,
-          },
-          {
-            userNickname: '희지맘',
-            content: '와 정말 좋은 글 입니다.',
-            createdAt: '2022.06.23',
-            author: false,
-          },
-          {
-            userNickname: '희지맘',
-            content: '와 정말 공감가는 글 입니다.',
-            createdAt: '2022.06.23',
-            author: true,
-          },
-          {
-            userNickname: '희지맘',
-            content: '와 정말 좋은 글 입니다.',
-            createdAt: '2022.06.23',
-            author: true,
-          },
-          {
-            userNickname: '희지맘',
-            content: '와 정말 공감가는 글 입니다.',
-            createdAt: '2022.06.23',
-            author: false,
-          },
-          {
-            userNickname: '희지맘',
-            content: '와 정말 좋은 글 입니다.',
-            createdAt: '2022.06.23',
-            author: true,
-          },
-          {
-            userNickname: '희지맘',
-            content: '와 정말 공감가는 글 입니다.',
-            createdAt: '2022.06.23',
-            author: false,
-          },
-          {
-            userNickname: '희지맘',
-            content: '와 정말 좋은 글 입니다.',
-            createdAt: '2022.06.23',
-            author: true,
-          },
-          {
-            userNickname: '희지맘',
-            content: '와 정말 공감가는 글 입니다.',
-            createdAt: '2022.06.23',
-            author: false,
-          },
-          {
-            userNickname: '희지맘',
-            content: '와 정말 좋은 글 입니다.',
-            createdAt: '2022.06.23',
-            author: true,
-          },
-          {
-            userNickname: '희지맘',
-            content: '와 정말 공감가는 글 입니다.',
-            createdAt: '2022.06.23',
-            author: false,
-          },
-        ],
-      },
+      data: res.data.data,
     },
   };
 };

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -3,7 +3,7 @@ import { signIn, getSession } from 'next-auth/react';
 import Link from 'next/link';
 import { loginUser } from '../core/api/user';
 import { PostLoginBody } from '../types/user';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import LocalStorage from '../core/localStorage';
 import Router from 'next/router';
 import { useRecoilState } from 'recoil';
@@ -21,19 +21,22 @@ export default function login({
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const [userInfo, setUserInfo] = useRecoilState(userInfoState);
 
-  const handleLogin = async (social: string) => {
-    if (data.session.user) {
+  useEffect(() => {
+    const handleLogin = async () => {
       const userLoginData = {
         snsId: data.session?.user.email,
-        provider: social,
+        provider: userInfo.provider,
         email: data.session?.user.email,
       } as PostLoginBody;
+
       const login = await loginUser(userLoginData);
       if (login) {
         setUserInfo(userLoginData);
       }
-    }
-  };
+    };
+    if (userInfo.provider !== '') handleLogin();
+  }, [data.session]);
+
   useEffect(() => {
     if (!userInfo.isSignup && LocalStorage.getItem('accessToken'))
       Router.push('/signup');
@@ -59,23 +62,23 @@ export default function login({
         <IcKakaoBtn
           style={{ marginTop: '1.1rem' }}
           onClick={() => {
-            handleLogin('kakao');
             signIn('kakao');
+            setUserInfo({ provider: 'kakao' });
           }}
         />
 
         <IcGoogleBtn
           style={{ marginTop: '1.1rem' }}
           onClick={() => {
             signIn('google');
-            handleLogin('google');
+            setUserInfo({ provider: 'google' });
           }}
         />
         <IcNaverBtn
           style={{ marginTop: '1.1rem' }}
           onClick={() => {
             signIn('naver');
-            handleLogin('naver');
+            setUserInfo({ provider: 'naver' });
           }}
         />
       </StContentWrapper>

diff --git a/pages/signup.tsx b/pages/signup.tsx
@@ -2,7 +2,9 @@ import styled from '@emotion/styled';
 import Router from 'next/router';
 
 import { useState, useEffect, useRef } from 'react';
+import { useRecoilState } from 'recoil';
 import { putSignup } from '../core/api/user';
+import { userInfoState } from '../core/atom';
 import {
   IcSignupCheckboxSelected,
   IcSignupCheckboxUnselected,
@@ -18,6 +20,8 @@ export default function signup() {
   );
   const [isNickname, setIsNickname] = useState<boolean>(true);
   const signupBtnRef = useRef<HTMLButtonElement>(null);
+  const [userInfo, setUserInfo] = useRecoilState(userInfoState);
+  console.log(userInfo);
 
   useEffect(() => {
     if (signupBtnRef.current)

diff --git a/types/user.ts b/types/user.ts
@@ -11,9 +11,9 @@ export interface PostSignUpBody {
 }
 
 export interface PostLoginBody {
-  snsId: string;
+  snsId?: string;
   provider: string;
-  email: string;
+  email?: string;
   isSignup?: boolean;
 }
 export interface ResponseLoginDto {