story에 userId부여 (#197)

* feat(schema): getStoryNames response에 storyId추가

* feat(server): story schema에 userId추가

* feat(core/server): story 생성 시 userId삽입

* feat(client): 스토리의 주인에게만 삭제/수정 아이콘이 보이도록 수정

* feat(client): StoryNameList의 렌더링 조건 수정

* docs: api 문서 업데이트

* chore: test action 환경변수 직접 추가

Author: qkrdmstlr3

.github/workflows/test.yml

@@ -15,7 +15,7 @@ jobs:
 
       - name: set env var
         run: |
-          echo "POCKET_TOKEN=${{ secrets.POCKET_TOKEN }}" >> $GITHUB_ENV
+          echo "POCKET_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyTmFtZSI6InFrcmRtc3RscjMiLCJzZXJ2ZXJVcmwiOiJodHRwOi8vbG9jYWxob3N0OjgwODAiLCJpYXQiOjE2NjE2OTQxMjV9.mZxJhIEcjtr-weC3Dmqjq5IWAt49DTONBLf2s-wr8K4" >> $GITHUB_ENV
           echo $POCKET_TOKEN
 
       - name: test all

client/src/detail/components/StoryNameList/index.tsx

@@ -1,5 +1,6 @@
 import * as Sandpack from '@codesandbox/sandpack-react';
 import { Icon, IconButton, Modal } from '@shared/components';
+import { localStorage } from '@shared/utils/localStorage';
 import Transition from '@shared/utils/Transition';
 import React, { useState } from 'react';
 
@@ -11,7 +12,7 @@ import * as style from './style.css';
 interface StoryNameListProps {
   codeId: string;
   codeName: string;
-  pocketCodes: { storyName: string; storyId: string }[];
+  pocketCodes: { storyName: string; storyId: string; userId: string }[];
   selectedStoryId?: string;
   selectStory: (storyName: string) => void;
 }
@@ -38,6 +39,14 @@ const StoryNameList: React.FC<StoryNameListProps> = (props) => {
     setStoryWantedDelete({ modal: 'update', storyId });
   };
 
+  const isValidUserId = (userId: string) => localStorage.getUserId() === userId;
+
+  const getModalMessage = () => {
+    if (storyWantedDelete.modal === 'delete') return '정말로 스토리를 삭제하시겠어요?';
+    if (storyWantedDelete.modal === 'update') return '정말로 스토리를 수정하시겠어요?';
+    return '';
+  };
+
   const closeModal = () => setStoryWantedDelete({ modal: 'none' });
   const onCancel = () => closeModal();
   const onConfirm = () => {
@@ -55,33 +64,35 @@ const StoryNameList: React.FC<StoryNameListProps> = (props) => {
   return (
     <>
       <Modal isOpen={storyWantedDelete.modal !== 'none'} closeModal={closeModal}>
-        <p className={style.modalParagraph}>정말로 스토리를 삭제하시겠어요?</p>
+        <p className={style.modalParagraph}>{getModalMessage()}</p>
         <div className={style.buttonWrapper}>
           <Modal.CancelButton onCancel={onCancel} />
           <Modal.ConfirmButton onConfirm={onConfirm} />
         </div>
       </Modal>
       <ul className={style.list}>
-        {props.pocketCodes.map(({ storyId, storyName }) => (
+        {props.pocketCodes.map(({ storyId, storyName, userId }) => (
           <li key={storyId} className={style.item} onClick={() => props.selectStory(storyId)}>
-            <Transition isOn={props.selectedStoryId === storyId} timeout={100}>
-              {() => (
-                <div
-                  className={style.controlButtonsWrapper({
-                    selected: props.selectedStoryId === storyId,
-                  })}
-                >
-                  <IconButton
-                    icon={<Icon icon="edit" />}
-                    onClick={(event) => onClickUpdateBtn(event, storyId)}
-                  />
-                  <IconButton
-                    icon={<Icon icon="delete" />}
-                    onClick={(event) => onClickDeleteBtn(event, storyId)}
-                  />
-                </div>
-              )}
-            </Transition>
+            {isValidUserId(userId) && (
+              <Transition isOn={props.selectedStoryId === storyId} timeout={100}>
+                {() => (
+                  <div
+                    className={style.controlButtonsWrapper({
+                      selected: props.selectedStoryId === storyId,
+                    })}
+                  >
+                    <IconButton
+                      icon={<Icon icon="edit" />}
+                      onClick={(event) => onClickUpdateBtn(event, storyId)}
+                    />
+                    <IconButton
+                      icon={<Icon icon="delete" />}
+                      onClick={(event) => onClickDeleteBtn(event, storyId)}
+                    />
+                  </div>
+                )}
+              </Transition>
+            )}
             <button
               className={style.storyButton({
                 selected: props.selectedStoryId === storyId,

core/server/src/createStory.ts

@@ -21,11 +21,11 @@ export default async <T, Response>(request: T, modules: CreateStoryType<Response
   if (!createStoryRequestValidate(request)) throw modules.validateError;
   const { pocketToken, codeId, storyName, codes } = request.body;
 
-  const { userName: storyAuthor } = await modules.getUserInfo({ pocketToken });
+  const { userName: storyAuthor, userId } = await modules.getUserInfo({ pocketToken });
 
   const isStoryExist = await modules.isStoryExist({ codeId, storyAuthor, storyName });
   if (isStoryExist) throw modules.existStoryErrorFunc;
-  const storyId = await modules.createStory({ codeId, storyAuthor, storyName, codes });
+  const storyId = await modules.createStory({ codeId, storyAuthor, storyName, userId, codes });
 
   return modules.successResponseFunc({ message: '', storyId });
 };

core/server/src/getStoryNames.ts

@@ -6,6 +6,7 @@ export interface GetStoryNamesType<Response> {
   validateError?: Response;
   /* 성공했을 경우 */
   successResponseFunc: (body: GetStoryNamesResponse) => Response;
+
   /* 스토리 이름들을 가져오는 함수 */
   getStoryNames: (params: CodeId) => Promise<StoryNamesWithCodeId[]>;
 }

core/server/src/types/index.ts

@@ -52,10 +52,12 @@ export interface StoryIdWithCode {
 export interface StoryNamesWithCodeId {
   storyName: string;
   storyId: string;
+  userId: string;
 }
 
 export interface StoryInfoWithCode {
   codeId: string;
+  userId: string;
   storyName: string;
   storyAuthor: string;
   codes: { [x: string]: string };

schema/json/getStoryNamesResponse.json

@@ -15,12 +15,16 @@
           },
           "storyId": {
             "type": "string"
+          },
+          "userId": {
+            "type": "string"
           }
         },
         "additionalProperties": false,
         "required": [
           "storyName",
-          "storyId"
+          "storyId",
+          "userId"
         ]
       }
     }

server/API.md

@@ -447,7 +447,8 @@
     "message": "string",
     "storyNames": {
       "storyName": "string",
-      "storyId": "string"
+      "storyId": "string",
+      "userId": "string",
     }[]
   }
   ```

server/src/dbModule/story.ts

@@ -68,7 +68,8 @@ export const getStoryFullNames =
     const { codeAuthor, codeName } = await getCodeInfoById(server)({ codeId });
     const stories = await getStories(server)({ codeAuthor, codeName });
 
-    const storyNames = stories.map(({ storyAuthor, storyName, _id }) => ({
+    const storyNames = stories.map(({ storyAuthor, storyName, userId, _id }) => ({
+      userId,
       storyName: `${storyAuthor}-${storyName}`,
       storyId: String(_id),
     }));
@@ -89,12 +90,13 @@ export const getStoryCode =
 
 export const createStory =
   (server: FastifyInstance) =>
-  async ({ codeId, storyAuthor, storyName, codes }: Types.StoryInfoWithCode) => {
+  async ({ codeId, storyAuthor, storyName, userId, codes }: Types.StoryInfoWithCode) => {
     const { codeAuthor, codeName } = await getCodeInfoById(server)({ codeId });
     const [createError, story] = await to(
       (async () =>
         await server.store.Story.create({
           codeId,
+          userId,
           codeName,
           codeAuthor,
           storyName,

server/src/schema.ts

@@ -23,6 +23,7 @@ export interface Code {
 export interface Story {
   codes: string;
   codeId: string;
+  userId: string;
   codeName: string;
   codeAuthor: string;
   storyName: string;
@@ -68,6 +69,7 @@ export const StorySchema = new Schema<Story>({
   codeId: String,
   codeName: String,
   codeAuthor: String,
+  userId: String,
   storyName: String,
   storyAuthor: String,
   createdAt: Date,