[풀스텍 미니 프로젝트] Linkle Linkle S.A

Linkle Linkle S.A

1. 프로젝트명

Linkle Linkle - 링클 링클

2. 소개

많은 개발자 분들께서 에러, 모르는 부분, 알게된 점 등등을 구글링을 통해서 알아갑니다. 이때, 문제를 해결하고 나서 다시 검색하는 경우가 많다. 다시 검색하는 것을 방지하기위해 발생한 문제와 참고했던 사이트를 카테고리별로 정리할 수 있게 해줍니다.

3. 기술 스택

4. 와이어 프레임

1-1) 홈페이지 / 로그인 & 회원가입 페이지

• 홈페이지 바로시작하기 버튼 클릭 ➜ 애니메이션과 함께 로그인 form 등장
• 로그인 유지 : JWT 토큰 방식 사용
• 로그인 정보가 없다면 회원 가입 버튼 클릭 ➜ 중복확인, 비밀번호 확인
• 로그인 버튼 클릭 ➜ 홈 카테고리 이동

1-2) 카테고리 페이지

• 카테고리가 존재하지 않다면 ➜ 카테고리 생성 유도 텍스트 표출
• 카테고리 생성 버튼 클릭 ➜ 카테고리와 이미지를 등록할 수 있는 input form창 팝업
• 카테고리명이 입력되면 카테고리명과 넣어준 이미지가 카테고리 페이지로 뿌려짐

1-3) 홈 포스트 페이지

• 카테고리별 홈포스트에 포스팅 버튼 클릭 ➜ 포스팅 링크 URL / 포스팅 제목 / 간단한 설명글 input form창 팝업
• 포스팅이 완료되면 카테고리별 홈 포스트 페이지에 anchor이 포함된 meta tag 이미지 / 포스팅 제목 / 간단한 설명글 / 좋아요 버튼 / 댓글 / 작성자명이 카테고리별 홈포스트로 뿌려짐
• 포스팅 카드 선택 ➜ 링크로 이동
• 좋아요 클릭 ➜ 클릭된 좋아요 수에 따라 카드가 상단으로 이동됨
• 댓글 클릭 ➜ 링크의 메타 이미지와 사용자가 작성한 코멘트, 댓글과 댓글 textarea가 팝업됨

• 사이드바 클릭 ➜ 오른쪽에서 사이드바 등장
• 사이드바: 유저 정보 / 카테고리 리스트(이동 가능)

5. API 명세

Number	Method	URL	Description	Request	Response
1	POST	/api/login	로그인	{'id' : id, 'pw' : pw}	/token
2	POST	/api/sign_in	회원가입	{'id' : id, 'pw' : pw}
3	POST	/api/comment	댓글 등록	{ post_id : 포스트id, comment: 댓글 내용, }
4	POST	/api/like	좋아요	‘post_id’: 포스트id
5	POST	/api/category	카테고리 등록	{category_name : category_name}
6	POST	/api/posting	게시글 등록	{ post_title : ‘제목’, post_desc : ‘설명’, post_url : ‘url’, post_category : 카테고리의 id값 }
7	GET	/api/posts	게시글 리스트	category_id : 카테고리의 id값	{’posts: post_list} 'id': count,'author': userinfo['id'],'title': title_receive,'desc': desc_receive,'image': image,'category': int(category_receive),'reg_dt': datetime.now(),'link_url': url,'status': 0
8	GET	/api/categories	카테고리 리스트	-	{’categories : category_list} category_list={'id': count,'author': userinfo['id'],'img' : img_receive,'name': category_receive,'status': 0}
9	GET	/api/post?category_id=카테고리 아이디	게시글 1개	post-id(쿼리스트링)

6. Public Github Repo URL

GitHub - Seogun95/Linkle-Linkle: 향해99 12기 5조 풀스택미니프로젝트. 카테고리를 생성하고 그안에 웹사