[9] 개발 - 프로젝트 입장하기(like 마이페이지)&공지구현&Redis추가

안녕하세요.

 

오늘은 마이페이지 아시죠?

마이페이지 클릭하면 자기 정보를 가진 마이페이지 UI가 출력 되잖아요

 

그것처럼 프로젝트 대시보드에서 프로젝트 하나를 클릭하면

'프로젝트 탭'으로 로딩되는 걸 만들거예요

 

< 로직 생각해보기 >

우선 감도 안 잡혀서 생각을 좀 해봤는데,

1. 초기에는 정보가 없을테니 정보가 없는 화면을 출력

2. 프로젝트 고유 ID를 넘겨준다.-> 고유 ID를 가진 모델 정보들 모두 출력!

 

인데 아무리 생각해도 저게 맞나싶어서

gpt햄 불러왔습니다.

📌 구현 계획

1. Frontend (React)
   • 대시보드에서 프로젝트 카드 클릭 시 projectId를 URL Parameter로 전달합니다.
   • react-router를 통해 /project/:id 경로로 이동합니다.
   • 해당 페이지에서 useEffect를 사용해 백엔드로부터 데이터를 가져옵니다.
2. Backend (FastAPI)
   • /projects/{id} 엔드포인트를 생성합니다.
   • 해당 ID에 맞는 프로젝트 데이터를 DB에서 조회합니다.
   • 필요한 연관 데이터(todo, uploaded_file, calendar, chat)를 조인하여 함께 반환합니다.
3. Database Query
   • PostgreSQL에서 연관 관계에 맞게 조인 쿼리 작성
   • 필요한 경우 ORM(예: SQLAlchemy)을 통해 최적화

음......

비슷한데?

ㅎㅎa

 

 

 

 

개발 고.

 

 

< 개발 >

 

1.라우팅해주고

2.백엔드 데이터 API만들고

3. jsx에 라우팅해주면 끝입니다.

 

먼제 /project/id 형태로 url이 들어가기때문에, APP.js에

라우팅 추가해줍니다.

 

여기서문제발생이요

 

제가 Project.js에 사이드바만들고 rightcontent에 url에 맞는 대시보드,채팅,캘린더 나오게 했는데

라우팅이 /project만 먹어서  /project/id에는 사이드바가 안나옵니다.

말을 개떡같이했는데 다시 말하자면,

현재 /project URL에선 project.js가 잘 나오지만 ( 사이드바가 포함 된 컨텐츠 )

/project/id는 project.js는 연결 안되고 projectContent.js만 연결되기 때문에...사이드바가 안 나오는 issue 발생입니다.

 

그래서 해결하기위해

/project/:id/에도 project url을 감싸줍니다.

 

왜되느냐?

 

영역침범을 안 하기 때문입니다....

project.js는어차피 사이드바만 출력하고 rightContent자체는 projectConten로 들어가기 때문이죠.

 

 

 

 

그리고 이제 api만들어줍니다

projectInfo를 불러오는 라우팅이요

 

이후에 이제 ProjectContent에서 정보 불러오면 됩니다.

( 라우팅으로 url은 id가 붙지만 ui자체는 pC이기 때문 )

 

 

 

그러면~?

id가 잘 붙어있는모습.

 

 

 

이제 컨텐츠에 데이터 적용해주면 돼요(지금은 dummy data)

 

< 데이터 연결 하나하나 해보기 >

 

1. 공지 구현

 

오마이갓비상사태큰일났다

model에 공지 피쳐를 따로 안 넣었어요

 

 

근데 또 뭔가 db에 저장하기엔 좀 아깝고 그렇잖아요?;;

 

그래서 redis에 넣는 건 어떤가 물어봤어요

 

아싸... 바로 레디스 구현 갈겨요

compose.yml에 레디스 블락 넣어줍니다.

네트워크는 itda_default로 자동으로 들어가게끔 합니다.

 

requirements.txt에 redis추가하고 새로 빌드합니다..

 

클래스하나만들어주면 끝!

 

공지 설정 api 하나 만들어주고

 

 

수정 불러오기 로직하나 짜주면?

 

 

 

 

짜잔~

 

 

 

할 일 구현은 좀 많을 거 같아서 글 새로 작성하겠삼