[13] 개발 - 코멘트 팝업진짜 끝

안냐쎄요

머지데이 ( 5/24 ) 전 야심한 새벽...

피드백을 종결지으러 왔읍니다.

 

 

이제는 

코멘트 부분 확장자별로 미리보기 지원, 파일크기 지원, 게시자 지원, 작업물 재업로드 구현, 삭제 구현, 전송 연필 이미지 수정 , 피드백 내용 저장

.....

을 해볼게요........

아 할 거 욜라많아

 

 

 

0. 폴더 트리 이슈

이미친것 자꾸

데이터가 이런데 26폴더(최상위폴더)에선 본인 files만 가져와야지 자꾸 children files까지 다가져오길래

하....6시간동안싸움했더니 이유는

null필터링 하나 안 했다고 그냥 싹다가져오는거였음아진짜개짱나내시간!!!!!!!!!!!

 

이제진짜 폴더 트리가 재귀적으로 완성됨 ㅅㅂ ㅠㅠㅠ

1. 파일크기 지원

 

아진짜개빡치네또 db를수정해야하네아니이렇게될지나도몰랐지

 

이게 걍 s3설정에서 외부에서 s3파일을 접근할 수 있는 ACL설정을 허용해주면되거든요?

근데그러면 url만 알면 다 접근 가능하다길래 보안적인 이슈가.... 생겨서 ... 하

그래서 걍 db에 올릴때부터 사이즈 재서 저장하기로 했어요

아니이미친또 디비를바꿔야한다고진짜질린다질려

하결국ㅅ;;; size추가했어요

 

2. 미리보기지원

 

이것도 방법이 세가지인데

acl설정을 해서 모두가 볼 수 있게하든가

일시적인 키를 발급해서 요청에대해서만 몇분동안볼수있게하덩가 

더비싸고 어려운 aws기능을 쓰든가인데

 

저는 돈이없고 시간도없어서 두번째 방법 채택했어요

접근키 발급 api만들고요

 

    };

    // 파일 상세 페이지 보기 (더블 클릭 시)

    const handleFileDoubleClick = async (file) => {

        try {

            setViewingFile(null);

   

            const res = await fetch(`}`);

            const data = await res.json();

   

            if (!res.ok) throw new Error(data.detail || "Presigned URL fetch 실패");

   

            const updatedFile = { ...file, s3Url: data.url };

            setViewingFile(updatedFile);

        } catch (error) {

            console.error("Presigned URL 가져오기 실패:", error);

            alert("파일 미리보기를 불러올 수 없습니다.");

        }

    };

   

 

프론트에서 요청만하면

돼요!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

너무신기하고

막...감격스럽고....

 

 

 

하...저장도되고..............빨리감기도되고.....막그래요............

감격

 

너무 신기하지않나요???????????????

3. 게시자 지원

 

아씨바!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

db또수정해야해!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

미친거아냐???????????????????????????????????????????????????????

진짜바보임?멍청이임?앞일을 얼마나생각안한거임????????????????????????????

나db그만수정할래!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

...

 

게시자 정보 저장하는곳이 그 어디에도 없어요

하실화냐?

아tlqkf.....진짜............개눈물쳐나옴

 

ㅠㅠㅠㅠㅠ

그만울고 할 일을 하자

 

결국....uploader까지 추가됐네요...^^

api저장에 uploader도 추가해요

 

 

    const handleFileDoubleClick = async (file) => {

        try {

            setViewingFile(null);

            const res = await fetch(`}`);

            const data = await res.json();

            if (!res.ok) throw new Error(data.detail || "Presigned URL fetch 실패");

            const tempRes = await fetch(``);

            const fileList = await tempRes.json();

   

            // id로 해당 파일 찾기

            const matched = fileList.find((f) => f.id === file.id);

            const uploaderId = matched?.uploader?.id ?? "정보없음";

            const updatedFile = { ...file, s3Url: data.url, uploader: { id: uploaderId },

        };console.log(uploaderId)

            setViewingFile(updatedFile);

            console.log(updatedFile)

        } catch (error) {

            alert("파일 미리보기를 불러올 수 없습니다.");

        }

    };

   

   

그리고 프론트에서 데이터도 들고오면 ?

 

 

 

탸란~

3시간이 지났ㅓ요....^^;;

 

4. 작업물 재업로드 구현

네 별 거 없어요 이건 그녀석들 중 최약체야

post했던거 똑같이 get으로바꿔주기만 하면 돼요

  //재업로드

    const handleReupload = async () => {

        const input = document.createElement("input");

        input.type = "file";

        input.accept = "*";

        input.onchange = async (e) => {

            const selectedFile = e.target.files[0];

            if (!selectedFile) return;

   

            const formData = new FormData();

            formData.append("file", selectedFile);

   

            try {

                const res = await fetch(`h`, {

                    method: "PUT",

                    body: formData

                });

                if (!res.ok) throw new Error(" 실패");

   

                const data = await res.json();

                const updatedFile = {

                    ...viewingFile,

                    name: data.name,

                    createdAt: new Date(data.uploaded_at).toLocaleString('ko-KR'),

                    s3Url: data.s3_url

                };

   

                setViewingFile(updatedFile);

                alert("정상적으로 재업로드 되었습니다.");

                onClose();

            } catch (err) {

                console.error(err);

                alert("재업로드에 실패하였습니다. 오류가 계속되면 관리자에게 문의하세요");

            }

        };

        input.click();

    };

네 대충 s3연결된것도바꿔주고

혹시나 실패하면 문의하라는 밑밥깔고

put으로 바꾸기만하면대용...

 

문제점이하나 있다면 

들낙(팝업껐다켜기)해야 반영되는데

이게 팝업이라 새로고침으로 하기도 애매해서 걍

새로고침하고 팝업꺼져버리게 햇어요

쩔수임 이건 시간적한계에도달했ㅇ

 

 

다시 들어오면 일케 댐

 

5. 삭제 구현

네어찌저찌만들었어요

캡쳐 귀찮아요

문제점은 삭제하고나서 메인으로 나가지는건ㅁ자는데

폴더 만들고 또 새로고침안되서

걍 뭔짓을하던 피드백 적는 거 빼곤 다 루트폴더로 나가지게 했어요

ㄱㅃㅊ

 

 

 

6. 이미지 경로 수정

 

 

간단한 경로 issue라 간단히 해결 이런문제너무좋고요

 

7. 피드백 내용 저장

 

두둥탁

이제마지막!!

 

레디스로 클래스만들고 

api만들고

프론트적용

해주면대용

 

 

 

 

 

 

 

후기 너무뿌듯하고 내가다한건아니지만 김지피티의도움이많았지만그래도너무뿌듯하고신기하고이게되네싶고으아아가강ㄱ악