api 요청은 모두 /api 경로를 거치도록 리버스 프록시가 설정되었기 때문에
라우팅 주소가 변경되었음

api 주소를 constants.ts 로 넣어놨고
배포용 api 서버 주소는 보안을 위해 .env 파일에서 관리함

thumbnailUrl, originUrl을 optional 로 수정함.

이미지 데이터의 creator가 특정 유저의 oid 값을 갖도록 수정함

메인에 보여줄 카드뷰에 creator를 표시해주기위해 populate 기능 추가함

object storage의 원본이미지가 아닌 image optimizer로 압축된 이미지 Url을 가져오도록 설정

서버에서 보내는 response를 일관된 형식으로 사용할 수 있도록 utils/response.ts 작성
response(res, {data}) 형태로 사용 가능

에러가 난 경우는 exporess error handler에서 처리함
에러 메시지는 utils/messages.ts 에 넣어두고 import 해서 사용

error handler에서 response 함수를 리턴하면 마지막에는 status code를 200으로 바꾸어 응답을 내려준다.
대신 브라우저에서는 status code 200을 받기 때문에 try-catch로 처리가 불가능 함.

American palette - https://flatuicolors.com/palette/us

전역에서 사용가능하도록 box-shadow 갑 세팅

useFetch가 다루는 데이터에 대한 의존성을 없애기 위해 Generic Type 사용하도록 변경

삼항연산자 사용으로 코드 가독성 높임

구조분해 할당사용

/src/upload --> /src/UploadMain 으로 변경
/UploadMain/index.tsx
/UploadMain/style.tsx
식으로 모든 업로드 관련 컴포넌트를 위와같은
형식으로 분리함

스타일 컴포넌트를 사용하면 className으로 판별해서 스타일을 먹일필요
없음

#83

Feature/jmj/review feedback

…feature/ljh/main-page

api 주소관리 관련

style 파일을 분리함

 theme에 칼라 추가 및 theme 파일 활용

useState 활용 ( https://velog.io/@velopert/use-typescript-and-redux-like-a-pro) 참고

리덕스의 상태값 state.login의 userOid 값을 확인해서
있으면 홈으로 리다이렉트,,
로그인 페이지 자체에서 이 값을 확인해서 리다이렉트하도록함
로그인되어있을 경우 로그인 페이지로 못들어오게 됨

라우팅 구조를 이렇게 하는거 어떠신가요??
작동하는듯 보입니다

images, workImgeas, User 참조를 건 상태로 seed 데이터를 줄 수 있도록 변경함

jwt토큰값을 통해 유저의 정보를 얻는 함수,
jwt토큰값을 검증하는 함수를 분리하고 이를 API로 만듬

사용자의 정보가 자주 오가지 않도록, 단순 검증하는 함수를
분리함

이미지는 image이고 배경화면은 wallpaper
2개의 코드는 비슷한 부분이 많음

각각 같은 버킷의 다른 폴더로 들어감
image -> (.../bucketName/image)
wallpaper -> (.../bucketName/wallpaper)
uuid()로 파일 이름을 생성하는 로직을 백엔드로 이동
-> uuid는 백과 object storage사이에서만 필요한 정보,
  프론트가 굳이 신경쓸 필요는 없다고 판단함.

getUrl controller 가 files.originalname 을 리턴하는데
이값은 "image.png" 임 object storage의 key값이 아님
내가 리턴 받아야 하는 값은 uuid 로 생성한 고유한 key값
이므로 file.key를 return 해주는걸로 변경함

우선work_image 컬렉션에 add 한 뒤
해당 documnet 의 Object Id 값을 return 받아
image와 wallpaper 각각의 컬렉션에 add 함

이미지 , 배경화면, 글쓰기 를 Box 컴포넌트로 관리

로그인 페이지 밑에 링크 컴포넌트로 회원가입 페이지로 이동 가능

윤곽 잡기

로그인 상태를 컨택스트로 전달함

컨텍스트 코드 리펙터링 필요

Feature/jmj/uploadimage update

…feature/ljh/works-detail

Feature/ljh/works detail

setuser 와 unsetuser로 액션을 변경

기존에 선언된 리듀서를 useSelector를 통해 활용함
로그인 페이지 들어가기전에 로그인 여부 체크

리듀서 활용의 일관성을 위해, 다른 방식으로 리듀서를
적용한 코드 제거, 헤더는 추후에 준호님이 하기로 함

로그인 회원가입 페이지에서 헤더가 안나오기
홈 및 피트 컨테이너에서의 라우팅, 뎁스가 파일별로
동일하도록 하기

로그인 관련 작업중, 엉망으로 다시 짠 리듀서
삭제함 .. 기존 리듀서의 상태 사용방법을 알지 못해서
만들어진  리듀서임

Feature/sch/login real

이미지를  object storage 에 push 하기 위해 key형태를
endpoint/bucketName/images/12341234.png
위와 같이 지정했음 db에 url 를 저장하는 format을

images/12341234.png --> 12341234.png 로 변경
--> type 인자를 통해 images를 쉽게 유추할 수 있어서

… into develop

object strage의 key값이 /파일경로/파일명.png형태인데
파일경로를 제외한걸 return 보내기로 함

images 콜렉션에서 creator, owner 를 populate 해서 좋아요수, 댓글 수 등을 가져옴

업로드 버튼 클릭시 보이는 이미지, 음악 선택할 수 있는
선택 화면 만듦

get /api/feed/images/:id
id 로 workImage를 하나 찾아 준다.

app.tsx에서 쿠키를 활용함

typescript조건을 맞춘 껍데기

/
/home
    /detail/:id
    /works
    /wallpaper
    /music
/login
/join

match props 으로 주소 변경에 능동적으로 대처 가능

home/detail/:id --> home/detail-image/:id

서버로부터 쿠키에 저장된 토큰을 검증받고, 사용자 정보를
반환받아, 사용자 정보를 리듀스의 state타입에 맞는 객체로 만들어
준다

글쓴이, 제목, 조회수, 날짜 나타내 주었음.
추후에 데이터 저장할 떄 timestamp 같이 저장해서 불러와야함

LoginUser의 객체를 바꿔줌

로그인 버튼을 클릭한 후, 로그인 성공시 상태변화를 일으켜
메인부터 다시 로드 되도록 할 필요가 있음

로그인 성공시 반환되는 값은 oid값 뿐이므로,login 액션은
상태에서 isLogin값만 변화시킴

생김

Chrome browsers are disabling support for it (URL.createObjectURL)
그래서 FileRead()함수로 대체

아직 더미데이터가 완벽하지 않아 댓글 표시를 제대로 하지 못
댓글에 owner oid 넣어야
로그인 했을때 안했을떄 렌더링 되는 정보 분리해줘야함 ex) 댓글은 로그인 후 작성 가능합니다.

로그인이 되어있는데 이름값이 없는 경우만 유저
상태정보를 패칭하도록 바꿈

한번만 패칭

util의 response를 반환해서 일관성을 맞춤
변경된 반환값에 맞춰 로그인 기능 수정

일관성!!

일관성!

커밋 실수 ㅠㅠ

성공시 로그인 페이지로
실패시 회원가입 페이지 그대로 있음

제목을 입력하지 않았을때 제목을 입력하라는 경고창을 띄움
경고창은 /commons/Popup_wanr 으로 분리
보라색 버튼로 basics/PURPLE_Button으로 분리

댓글 추가 -> 데이터베이스 업데이트 -> 업데이트된 결과 바로 확인가능

useRef로 input을 비워주었음

useFetch에서 setData 함수를 리턴하도록 수정함 -> 댓글이 추가됐을 때 페이지를 리렌더링 하여 추가된 댓글을 렌더링 해주기 위함임

jwt 토큰을 검증하고 디코드 하는 미들웨어를 만들고
다른 api들이 이 미들웨어를 활용하도록 구조를 개선함

토큰을 검증하고 디코드하는 과정을 공유하기 쉬움

서버에서 oauth 버튼을 불러오는 API 삭제
oauth 적용

useEffect 안쪽에서 비동기적으로 일이 질행되도록 변경함
메인 화면 로딩 속도가 개선됨

없어진 함수를 import 하는 문제

반환받은 객체가 빈 객체일때 빈객체를
false값으로 간주하고 코딩해서 생긴 에러

시간변환, axios 요청등을 다양하게 활용가능하기 때문에 utils 폴더에서 따로 관리한다.

점점 비대해지는 WorkDetail 을 유지보수하기 힘들 것 같아서
WorksDetailContainer를 만듬 -> 로직
WorkDetail -> 뷰만 담당

추후 WorkDetail을 분리하여 리렌더링되는 범위또한 조절 가능

업로드 상세 페이지는 팝업 창을 띄워 옵션을 선택하게함
tag와 user oid를 추가해햐함

업로드 선택 화면 하단에 경고 메시지란을 추가함

댓글을 5자 미만으로 썼을 때 alert 를 띄워줌

로그인 되면 헤더가 변경됨

theme.PALE_TEXT,
theme.WARN_GRAY

index.tsx의 코드수가 훨씬 줄어들었다. handler 함수도 뺄수 있다는데
좀 더 고민해봐야함

Feature/jmj/upload front page

… into feature/ljh/works-detail

[Feat] 작품 디테일 페이지 디자인, 댓글