Merge pull request #143 from nori-dongsan/view_product/#142

[ ViewProduct ] 드롭다운 섹션 순서 변경

components/common/Header.tsx

@@ -43,7 +43,9 @@ export default function Header() {
               onChange={handleInputValue}
             />
             <Link href="/viewProduct">
-              <IcSearchIcon onClick={handleClick} />
+              <a>
+                <IcSearchIcon onClick={handleClick} />
+              </a>
             </Link>
           </StSearchBar>
           <StMenu>

components/common/WriteHeader.tsx

@@ -2,14 +2,17 @@ import styled from '@emotion/styled';
 import { IcWriteHeaderLogo } from '../../public/assets/icons';
 import Link from 'next/link';
 import { useRecoilState } from 'recoil';
-import { newPostInfoState } from '../../core/atom';
-import { postCommunity } from '../../core/api/community';
+import { isChangeInfoState, newPostInfoState } from '../../core/atom';
+import { postCommunity, putCommunity } from '../../core/api/community';
 import { useRouter } from 'next/router';
+import { PutCommunityBody } from '../../types/community';
 
 export default function WriteHeader() {
   const [newPostInfo, setNewPostInfo] = useRecoilState(newPostInfoState);
+  const [isChangeCommunity, setIsChangeCommunity] =
+    useRecoilState(isChangeInfoState);
   const router = useRouter();
-  const { pathname } = useRouter();
+  const { pathname, query } = useRouter();
 
   const handleRegister = async () => {
     const { title, content } = newPostInfo;
@@ -27,20 +30,71 @@ export default function WriteHeader() {
     router.push(`/community/${data.id}`);
   };
 
+  const handleCancel = () => {
+    const val = confirm(
+      '수정을 취소하시겠습니까? 작성하던 내용은 모두 삭제됩니다.',
+    );
+
+    if (val) {
+      router.push(`/community/${query.cid}`);
+    }
+  };
+
+  const handleUpdate = async () => {
+    const { category, title, content, imageList } = newPostInfo;
+    const {
+      isChangeCategory,
+      isChangeTitle,
+      isChangeContent,
+      isChangeImageList,
+    } = isChangeCommunity;
+    const updatePostInfo: PutCommunityBody = {};
+
+    if (isChangeCategory) updatePostInfo.category = category;
+    if (isChangeTitle) updatePostInfo.title = title;
+    if (isChangeContent) updatePostInfo.content = content;
+    if (isChangeImageList) updatePostInfo.imageList = imageList;
+
+    if (updatePostInfo.title === '' || updatePostInfo.content === '') {
+      alert('내용을 입력해주세요.');
+      return;
+    }
+
+    const data = await putCommunity(String(query.cid), updatePostInfo);
+    setNewPostInfo({
+      category: '후기',
+      title: '',
+      content: '',
+    });
+    setIsChangeCommunity({
+      isChangeCategory: false,
+      isChangeTitle: false,
+      isChangeContent: false,
+      isChangeImageList: false,
+    });
+    router.push(`/community/${data.id}`);
+  };
+
   return (
     <StWriteHeaderWrapper>
       <Link href="/community">
         <a>
           <IcWriteHeaderLogo />
         </a>
       </Link>
-      {pathname === '/community' ? (
+      {pathname === '/write/[cid]' ? (
         <StModifyBlock>
-          <StCancleBtn>취소</StCancleBtn>
-          <StWriteBtn>수정완료</StWriteBtn>
+          <StCancleBtn isMargin={false} onClick={handleCancel}>
+            취소
+          </StCancleBtn>
+          <StWriteBtn isMargin={false} onClick={handleUpdate}>
+            수정완료
+          </StWriteBtn>
         </StModifyBlock>
       ) : (
-        <StWriteBtn>등록하기</StWriteBtn>
+        <StWriteBtn isMargin={true} onClick={handleRegister}>
+          등록하기
+        </StWriteBtn>
       )}
     </StWriteHeaderWrapper>
   );
@@ -53,7 +107,7 @@ const StWriteHeaderWrapper = styled.section`
   position: sticky;
   top: -3.2em;
 
-  width: 192rem;
+  width: 100%;
   height: 11.4rem;
   padding-top: 4.2rem;
 
@@ -63,12 +117,12 @@ const StWriteHeaderWrapper = styled.section`
 
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
 `;
-const StWriteBtn = styled.a`
+const StWriteBtn = styled.a<{ isMargin: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
 
-  margin-left: 11.4rem;
+  margin-left: ${({ isMargin }) => (isMargin ? '11.4rem' : '0rem')};
 
   width: 10rem;
   height: 4.2rem;

components/community/CommunityFloatingBtn.tsx

@@ -1,4 +1,3 @@
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import Link from 'next/link';
 import { IcWriteBtn, IcTopBtn } from '../../public/assets/icons';

components/main/ToyPreview.tsx

@@ -10,7 +10,6 @@ import { MainToyData } from '../../types/toy';
 export default function ToyPreview(props: MainToyData) {
   const { image, month, price, siteName, siteUrl, title } = props;
   const [isMark, setIsMark] = useState(false);
-  console.log(image);
   const handleToySite = (e: React.MouseEvent<HTMLElement>) => {
     if (!(e.target instanceof SVGElement)) window.open(siteUrl);
   };

components/viewProduct/FilterDropdown.tsx

@@ -64,7 +64,7 @@ export default function FilterDropdown(props: FilterDropdownProps) {
         isDrop ? 'slide-fade-in-dropdown' : 'slide-fade-out-dropdown'
       }`}
     >
-      {categoryKey === '장난감 종류' && toyKindList.length !== 0
+      {categoryKey === '종류' && toyKindList.length !== 0
         ? toyKindList.map((tagText: string, elementIdx: number) => {
             return (
               <StLabel

components/viewProduct/ProductFilter.tsx

@@ -74,7 +74,7 @@ export default function ProductFilter() {
               categoryInfo={filterListData[idx]}
               categoryIdx={idx}
               isExcept={
-                idx == 3 || (idx == 4 && toyKindList.length !== 0)
+                idx == 3 || (idx == 0 && toyKindList.length !== 0)
                   ? true
                   : false
               }

core/api/community.ts

@@ -1,12 +1,17 @@
 import useSWR from 'swr';
-import { PostCommentBody, PostCommunityBody } from '../../types/community';
+import {
+  PostCommunityBody,
+  PutCommunityBody,
+  PostCommentBody,
+} from '../../types/community';
 import { baseInstance } from '../axios';
 
 export const useGetCollectionProduct = (key: string) => {
   const { data } = useSWR(`/collection?sort=${key}`, baseInstance.get);
   console.log(data);
   return data;
 };
+
 export const getCollectionProduct = (key: string) => {
   return baseInstance.get(`/collection?sort=${key}`);
 };
@@ -27,6 +32,7 @@ export const postCommunity = async (body: PostCommunityBody) => {
     console.log(e);
   }
 };
+
 export const getCommunityDetail = async (id: string) => {
   try {
     // const { data } = await axios.get(
@@ -38,6 +44,7 @@ export const getCommunityDetail = async (id: string) => {
     console.log(e);
   }
 };
+
 export const deleteCommunity = async (id: string) => {
   try {
     const { status } = await baseInstance.delete(`/board/${id}`);
@@ -47,6 +54,15 @@ export const deleteCommunity = async (id: string) => {
   }
 };
 
+export const putCommunity = async (id: string, body: PutCommunityBody) => {
+  try {
+    const { data } = await baseInstance.put(`/board/${id}`, body);
+    return data;
+  } catch (e) {
+    console.log(e);
+  }
+};
+
 export const postReply = async (body: PostCommentBody) => {
   try {
     const { data } = await baseInstance.post('/board/comment', body);

core/api/user.ts

@@ -1,26 +1,27 @@
 import LocalStorage from '../localStorage';
 import { baseInstance } from '../axios';
-import {
-  PostLoginBody,
-  PostSignUpBody,
-  ResponseLoginDto,
-} from '../../types/user';
+import { PostLoginBody, SignUpBody, ResponseLoginDto } from '../../types/user';
 
 export const loginUser = async (userLoginData: PostLoginBody) => {
   const data = (await baseInstance.post(
     '/auth/login',
     userLoginData,
   )) as ResponseLoginDto;
 
-  console.log(userLoginData);
-  if (data) {
-    LocalStorage.setUserSession(data.data.accessToken, data.data.refreshToken);
+  if (data.status === 200) {
+    LocalStorage.setUserSession(
+      data.data.data.accessToken,
+      data.data.data.refreshToken,
+    );
+    return data.data.data.isSignup;
   }
-  return data.data.isSignup;
 };
 export const getRefreshToken = () => {
   return baseInstance.get('/auth/refresh');
 };
-export const putSignup = (signUpBody: PostSignUpBody) => {
+export const postNickname = (nicknameBody: SignUpBody) => {
+  return baseInstance.post('/auth/nickname', nicknameBody);
+};
+export const putSignup = (signUpBody: SignUpBody) => {
   return baseInstance.put('/auth/signup', signUpBody);
 };

core/atom.ts

@@ -1,9 +1,8 @@
-import { atom, selector, selectorFamily } from 'recoil';
+import { atom } from 'recoil';
 import { recoilPersist } from 'recoil-persist'; //페이지가 변경되더라도 상태관리를 유지
-import { PostCommunityBody } from '../types/community';
-import { PostLoginBody, UserData } from '../types/user';
-import { FilterDropdownProps, FilterTagProps } from '../types/viewProduct';
-
+import { PostCommunityBody, IsChangeCommunity } from '../types/community';
+import { PostLoginBody } from '../types/user';
+import { FilterTagProps } from '../types/viewProduct';
 
 const { persistAtom } = recoilPersist();
 
@@ -18,7 +17,6 @@ export const userInfoState = atom<PostLoginBody>({
   effects_UNSTABLE: [persistAtom],
 });
 
-
 export const newPostInfoState = atom<PostCommunityBody>({
   key: 'newPostInfo',
   default: {
@@ -29,34 +27,22 @@ export const newPostInfoState = atom<PostCommunityBody>({
   effects_UNSTABLE: [persistAtom],
 });
 
+export const isChangeInfoState = atom<IsChangeCommunity>({
+  key: 'isChangeInfo',
+  default: {
+    isChangeCategory: false,
+    isChangeTitle: false,
+    isChangeContent: false,
+    isChangeImageList: false,
+  },
+  effects_UNSTABLE: [persistAtom],
+});
+
 export const filterListState = atom({
   key: 'filterListState',
   default: {
     filterList: {
-      스토어: [
-        '국민장난감',
-        '그린키드',
-        '러브로',
-        '리틀베이비',
-        '빌리바바',
-        '어텐션홈이벤트',
-        '장난감점빵',
-        '젤리바운스',
-        '해피장난감',
-      ],
-      '사용 연령': [
-        '0~5개월',
-        '6~11개월',
-        '12~17개월',
-        '18~23개월',
-        '24~35개월',
-        '36~47개월',
-        '48~60개월',
-        '기타',
-      ],
-      가격: ['1만원 미만', '1-3만원', '3-5만원', '5-8만원', '8만원이상'],
-      특성: ['타고 노는', '만지고 노는', '기타'],
-      '장난감 종류': [
+      종류: [
         '아기체육관',
         '모빌',
         '바운서',
@@ -78,9 +64,33 @@ export const filterListState = atom({
         '역할놀이',
         '기타',
       ],
+      '사용 연령': [
+        '0~5개월',
+        '6~11개월',
+        '12~17개월',
+        '18~23개월',
+        '24~35개월',
+        '36~47개월',
+        '48~60개월',
+        '기타',
+      ],
+      가격: ['1만원 미만', '1-3만원', '3-5만원', '5-8만원', '8만원이상'],
+      특성: ['타고 노는', '만지고 노는', '기타'],
+      스토어: [
+        '국민장난감',
+        '그린키드',
+        '러브로',
+        '리틀베이비',
+        '빌리바바',
+        '어텐션홈이벤트',
+        '장난감점빵',
+        '젤리바운스',
+        '해피장난감',
+      ],
     },
   },
 });
+
 export const filterTagState = atom<FilterTagProps[]>({
   key: 'filterTagState',
   default: [],
@@ -96,6 +106,7 @@ export const checkedItemsState = atom<Set<number>[]>({
     new Set<number>(),
   ],
 });
+
 export const toyKindState = atom<string[]>({
   key: 'toyKindState',
   default: [],

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 };