Merge pull request #25 from raipen/feat/change-user-name

Feat: change user name & refactor wordbook list page

prisma/schema.prisma

@@ -33,6 +33,7 @@ model Wordbook {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
   isHidden  Boolean  @default(false)
+  deletedAt DateTime?
 }
 
 model Voca {

src/DTO/user.dto.ts

@@ -14,6 +14,47 @@ export const signOutSchema = {
   },
 } as const;
 
+export const getUserNameSchema = {
+  tags: ['User'],
+  summary: '닉네임 조회',
+  headers: AuthorizationHeader,
+  response: {
+    200: {
+      type: 'object',
+      description: '닉네임 조회 성공',
+      required: ['name'],
+      properties: {
+        name: { type: 'string' },
+      },
+    },
+    ...errorSchema(
+      E.NoAuthorizationInCookieError,
+      E.UserAuthorizationError,
+    )
+  },
+} as const;
+
+export const changeUserNameSchema = {
+  tags: ['User'],
+  summary: '닉네임 변경',
+  headers: AuthorizationHeader,
+  body: {
+    type: 'object',
+    required: ['name'],
+    properties: {
+      name: { type: 'string' },
+    },
+  },
+  response: {
+    200: {
+    },
+    ...errorSchema(
+      E.NoAuthorizationInCookieError,
+      E.UserAuthorizationError,
+    )
+  },
+} as const;
+
 export const refreshSchema = {
   tags: ['User'],
   summary: '토큰 재발급',
@@ -67,3 +108,5 @@ export const profileSchema = {
 export type signOutInterface = SchemaToInterface<typeof signOutSchema>;
 export type refreshInterface = SchemaToInterface<typeof refreshSchema> & { Body: { userId: string } };
 export type profileInterface = SchemaToInterface<typeof profileSchema> & { Body: { userId: string } };
+export type getUserNameInterface = SchemaToInterface<typeof getUserNameSchema> & { Body: { userId: string } };
+export type changeUserNameInterface = SchemaToInterface<typeof changeUserNameSchema> & { Body: { userId: string } };

src/back/api/routes/user.ts

@@ -36,6 +36,28 @@ const api: FastifyPluginAsync = async (server: FastifyInstance) => {
             reply.status(200).send(profile);
         }
     );
+    server.get<User.getUserNameInterface>(
+        '/name',
+        {
+            schema: User.getUserNameSchema,
+            preValidation: checkUser
+        },
+        async (request, reply) => {
+            const { name } = await userService.getUserName(request.body);
+            reply.status(200).send({ name });
+        }
+    );
+    server.patch<User.changeUserNameInterface>(
+        '/name',
+        {
+            schema: User.changeUserNameSchema,
+            preValidation: checkUser
+        },
+        async (request, reply) => {
+            await userService.changeUserName(request.body);
+            reply.status(200).send();
+        }
+    );
 };
 
 export default api;

src/back/repository/user.repo.ts

@@ -10,6 +10,7 @@ export const createUser = async ({name,socialId,socialType}:{name: string, socia
         }
     });
 }
+
 export const getUser = async (socialType: SocialType, socialId: string) => {
     return prisma.user.findFirst({
         where: {
@@ -26,3 +27,14 @@ export const getUserById = async (uuid: string) => {
         }
     });
 }
+
+export const changeUserName = async (uuid: string, name: string) => {
+    return prisma.user.update({
+        where: {
+            uuid
+        },
+        data: {
+            name
+        }
+    });
+}

src/back/services/user.service.ts

@@ -12,11 +12,26 @@ export default {
         };
     },
 
+    async getUserName({userId}: UserDTO.getUserNameInterface['Body']){
+        const { name } = (await UserRepo.getUserById(userId))!;
+        return { name };
+    },
+
+    async changeUserName({userId, name}: UserDTO.changeUserNameInterface['Body']){
+        await UserRepo.changeUserName(userId, name);
+    },
+
     async getProfile({userId}: UserDTO.profileInterface['Body']): Promise<UserDTO.profileInterface['Reply']['200']> {
         const { name } = (await UserRepo.getUserById(userId))!;
-        const wordbook = await WordbookRepo.getNonHiddenWordbookList(userId);
+        const wordbook = (await WordbookRepo.getNonHiddenWordbookList(userId)).map((wordbook) => {
+            const { _count, createdAt } = wordbook;
+            return {
+                createdAt: new Date(new Date(createdAt).getTime() + 1000 * 60 * 60 * 9),
+                count : _count.voca
+            };
+        });
         const wordbookCount = wordbook.length;
-        const vocaCount = wordbook.reduce((acc, cur) => acc + cur._count.voca, 0);
+        const vocaCount = wordbook.reduce((acc, cur) => acc + cur.count, 0);
         const loginDate = Array.from({ length: 70 },
             (_, i) => new Date(new Date().getTime() + 1000 * 60 * 60 * 9 - 1000 * 60 * 60 * 24 * i).toISOString().slice(0, 10))
                 .map((date) => ({ date: date.slice(0, 10), count: wordbook.filter((wordbook) => wordbook.createdAt.toISOString().slice(0, 10) === date).length }));

src/front/App.tsx

@@ -13,6 +13,7 @@ import Setting from '@pages/Setting';
 import PrivacyPolicy from '@pages/PrivacyPolicy';
 import TermsOfService from '@pages/TermsOfService';
 import Error from '@pages/Error';
+import { MainContainer } from '@components';
 
 function App() {
     const value = useInitLogin();
@@ -29,7 +30,7 @@ function App() {
                     <Route path="/privacy-policy" element={<PrivacyPolicy />} />
                     <Route path="/terms-of-service" element={<TermsOfService />} />
                     <Route path="/error" element={<Error />} />
-                    <Route path="*" element={<div>404 Not Found</div>} />
+                    <Route path="*" element={<MainContainer>잘못된 접근입니다</MainContainer>} />
                 </Routes>
                 <Footer />
         </LoginContext.Provider>

src/front/components/AddWordbook.tsx

@@ -2,19 +2,18 @@ import { WordbookInfo, WordbookMenu, WordbookName, AddWordbookContainer, Input,
 import useFetchUpdate from "@hooks/useFetchUpdate";
 import { addWordbook } from '@utils/apis/wordbook';
 import { useContext,useRef } from 'react';
-import { WordbookListContext } from '@context/WordbookListContext';
+import WordbookListContext from '@context/WordbookListContext';
 import WordbookDetailInfo from './WordbookDetailInfo';
 
 function AddWordbookList({setNewWordbook}: {setNewWordbook: React.Dispatch<React.SetStateAction<boolean>>}) {
   const [loadingWordbook, fetchWordbook] = useFetchUpdate(addWordbook);
-  const { setData } = useContext(WordbookListContext);
+  const { onClickWordbookElement } = useContext(WordbookListContext);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const onClickAdd = async () => {
     const name = inputRef.current?.value;
     if (name) {
-      const wordbookData = await fetchWordbook(name);
-      setData(([profile]) => [profile, wordbookData]);
+      await onClickWordbookElement(fetchWordbook, name)();
       setNewWordbook(false);
     }
   }

src/front/components/HiddenWordbookTitle.tsx

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import WordbookListContext from '@context/WordbookListContext';
+import { Title, Expend } from './index';
+
+function HiddenWordbookTitle() {
+    const {expend, expendOnClick} = useContext(WordbookListContext);
+
+    return (
+        <Title onClick={expendOnClick}>
+            <span>숨긴 단어장</span>
+            <Expend className="material-icons-sharp">
+                {expend ? 'expand_less' : 'expand_more'}
+            </Expend>
+        </Title>
+    );
+}
+
+export default HiddenWordbookTitle;

src/front/components/WordbookList.tsx → src/front/components/MyWordbookTitle.tsx

@@ -1,25 +1,19 @@
 import { useState } from "react";
-import { ButtonContainingIcon, WordbookListContainer, Title } from './index';
+import { ButtonContainingIcon, Title } from './index';
 import AddWordbook from './AddWordbook';
 
-function WordbookList({children}: {children: React.ReactNode}) {
+function MyWordbookTitle() {
   const [newWordbook, setNewWordbook] = useState(false);
-
-  return (
-    <WordbookListContainer>
-      <Title>
+
+  return [<Title key="title">
         <span>내 단어장</span>
         {!newWordbook && <ButtonContainingIcon onClick={() => setNewWordbook(true)}>
           <span className="material-icons-sharp">
             menu_book
           </span>
           <span>New</span>
         </ButtonContainingIcon>}
-      </Title>
-      {newWordbook && <AddWordbook setNewWordbook={setNewWordbook} />}
-      {children}
-    </WordbookListContainer>
-  );
+      </Title>, newWordbook && <AddWordbook key="add" setNewWordbook={setNewWordbook} />]
 }
 
-export default WordbookList;
+export default MyWordbookTitle;

src/front/components/Profile.tsx

@@ -1,4 +1,7 @@
 import { styled } from 'styled-components';
+import WordbookListContext from '@context/WordbookListContext';
+import { useContext } from 'react';
+import { Link } from 'react-router-dom';
 
 const ProfileContainer = styled.div`
   display: flex;
@@ -13,17 +16,23 @@ const ProfileContainer = styled.div`
   &>div:first-child {
     display: flex;
     align-items: center;
+    gap: 5px;
     font-size: 1.5rem;
     font-weight: 300;
     margin-bottom: 10px;
+    >.material-icons-sharp {
+        font-size: 1rem;
+        user-select: none;
+    }
   }
   &>div:nth-child(2) {
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     gap: 3px;
     color: var(--muted-text-color);
     >.material-icons-sharp {
         font-size: 1rem;
+        user-select: none;
     }
     >span:nth-child(3n+2) {
         font-weight: 600;
@@ -114,19 +123,18 @@ function LoginDate({loginDate}: {loginDate: {date: string, count: number}[]}) {
     );
 }
 
-function Profile({profile}: {profile:{
-    name: string;
-    wordbookCount: number;
-    vocaCount: number;
-    loginDate: {
-        date: string;
-        count: number;
-    }[];
-}}) {
+function Profile() {
+  const {profile} = useContext(WordbookListContext);
   return (
     <ProfileContainer>
         <div>
-            {profile.name}
+            <span className="material-icons-sharp">
+                account_circle
+            </span>
+            <span>{profile.name}</span>
+            <Link to="/setting" className="material-icons-sharp" style={{marginLeft: 'auto'}}>
+                settings
+            </Link>
         </div>
         <div>
             <span className="material-icons-sharp">

src/front/components/TestVocaList.tsx

@@ -1,5 +1,5 @@
 import { VocaMode } from "@utils/vocaModeEnum";
-import { VocaListContext } from '@context/VocaListContext';
+import VocaListContext from '@context/VocaListContext';
 import useFetchUpdate from '@hooks/useFetchUpdate';
 import { useContext,useState } from 'react';
 import { 

src/front/components/ViewVocaList.tsx

@@ -1,6 +1,6 @@
 import { VocaMode } from "@utils/vocaModeEnum";
 import { useState, useEffect,useContext } from 'react';
-import { VocaListContext } from '@context/VocaListContext';
+import VocaListContext from '@context/VocaListContext';
 import useFetchUpdate from '@hooks/useFetchUpdate';
 import { getVocaList, increaseCheckCount, decreaseCheckCount } from "@utils/apis/voca";
 import { 

src/front/components/VocaSidebar.tsx

@@ -106,7 +106,7 @@ function VocaSidebar({vocaMode,setVocaMode,wordbook}:{
                 <span className="material-icons-sharp" onClick={() => setVocaMode(VocaMode.EDIT)}>
                     event
                 </span>
-                <span>{ISOStringToDateString(wordbook.createdAt)}</span>
+                {wordbook.createdAt&&<span>{ISOStringToDateString(wordbook.createdAt)}</span>}
             </div>
         </WordbookInfo>
         <DefaultListElement>

src/front/components/WordbookListElement.tsx → src/front/components/WordbookElement.tsx

@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom';
 import useFetchUpdate from "@hooks/useFetchUpdate";
 import { hideWordbook,showWordbook } from '@utils/apis/wordbook';
 import { useContext } from 'react';
-import { WordbookListContext } from '@context/WordbookListContext';
+import WordbookListContext from '@context/WordbookListContext';
 import WordbookDetailInfo from './WordbookDetailInfo';
 
-function WordbookListElement({ wordbook: { uuid, title, isHidden, createdAt, vocaCount } }: {
+function WordbookElement({ wordbook: { uuid, title, isHidden, createdAt, vocaCount } }: {
   wordbook: {
     uuid: string;
     title: string;
@@ -16,12 +16,8 @@ function WordbookListElement({ wordbook: { uuid, title, isHidden, createdAt, voc
   }
 }) {
   const [loadingWordbook, fetchWordbook] = useFetchUpdate(isHidden ? showWordbook : hideWordbook);
-  const { setData } = useContext(WordbookListContext);
+  const { onClickWordbookElement } = useContext(WordbookListContext);
 
-  const onClick = async () => {
-    const data = await fetchWordbook(uuid);
-    setData(([profile])=>[profile, data]);
-  }
   return (
     <WordbookContainer>
       <WordbookInfo>
@@ -34,12 +30,12 @@ function WordbookListElement({ wordbook: { uuid, title, isHidden, createdAt, voc
         <WordbookDetailInfo createdAt={createdAt} vocaCount={vocaCount} />
       </WordbookInfo>
       <WordbookMenu>
-        {!loadingWordbook && <span className="material-icons-sharp" onClick={onClick}>{isHidden ? "visibility" : "visibility_off"}</span>}
+        {!loadingWordbook && <span className="material-icons-sharp" onClick={onClickWordbookElement(fetchWordbook, uuid)}>{isHidden ? "visibility" : "visibility_off"}</span>}
         {loadingWordbook && <span className="material-icons-sharp">hourglass_bottom</span>}
         {loadingWordbook && <span>이동 중</span>}
       </WordbookMenu>
     </WordbookContainer>
   )
 }
 
-export default WordbookListElement;
+export default WordbookElement;