$$config title: instaKG 기술 설명서 keywords: - IT - ... $$ # 기능 현황 | 기능| 구현 | | --- | -- | | 회원가입창 | ✔️ | | 로그인 | ✔️ | | 프로필 | ✔️ | | 사진 업로드 | ✔️ | | 동영상 업로드 | ✔️ | | 프로필 편집 | ✔️ | | 링크 공유 | ✔️ | | 글 작성 | ✔️ | | 비밀번호 변경 | | | 아이디 찾기 | | | 댓글 작성 | ✔️ | | 좋아요 기능 | ✔️ | | 검색기능 | | | 이미지 스와이프 | ✔️ | | 썸네일 | | | 메시지 기능 | | # 요구사항 분석표 | RQ-ID | 화면명 | 요구사항명| 요구사항내용 | 날짜 | 작성자 | 진행사항 | 버전명 | | --- | -- | --- | --- | --- | -- | --- | --- | | RQ-001 | 공통 | 상단 메뉴 구성 | 네비게이션 관련 메뉴를 구성한다. 게시판과 홈 화면으로 이동할 수 있다.| 8/1 | 허은재 | 반영 | v0.1 | | RQ-002 | 공통 | 하단 영역 | 제작자 이름과 로고가 푸터로 있다. | 8/1 | 허은재| 미반영 | v0.1 | | RQ-003 | 공통 | 상단 영역 | 검색바가 있다. | 8/1 | 허은재 | 반영 | v0.1 | | RQ-004 | 공통 | 가운데 영역 | 게시물리스트가 있다. | 8/1 | 박선호, 윤이령 | 반영 | v0.1 | | RQ-005 | 게시판 | 가운데 영역 | 글 작성 버튼, 홈 버튼, 다이렉트 메세지 버튼, 알림 확인 버튼 이 있다. - 네비게이션바 | 8/2 | 허은재, 박선호 | 반영 | v0.1 | | RQ-006 | 게시판 | 가운데 영역 | 친구목록 - 게시글 바로 위 | 8/2 | 허은재 | 미반영 | v0.1 | | RQ-007 | 게시글 | 가운데 영역 | 게시글, 프로필, 설정창 | 8/2 | 허은재 | 반영 | v0.1 | | RQ-008 | 게시글 | 하단 | 좋아요, 댓글, 다이렉트메시지, 댓글표시, 수정시간 | 8/3 | 허은재, 박선호, 윤이령, 이민영 | 반영 | v0.1 | | RQ-011 | 로그인 화면 | 전체 영역 | 왼쪽에 로고, 오른쪽에 로그인폼 | 8/5 | 허은재, 이민영 | 반영 | v0.1 | | RQ-012 | 로그인 화면 | 가운데 영역 | 아이디, 비밀번호 찾기, 회원가입이 가능하다. - 로그인 폼 아래| 8/5 | 이민영 | 반영 | v0.1 | | RQ-013 | 로그인 화면 | 가운데 영역 | 아이디*비번찾기 밑에 페이스북 로그인 버튼이 있다. | 8/6 | 이민영 | 반영 | v0.1 | | RQ-014 | 프로필 화면 | 가운데 영역 | 사용자, 프로필 편집, 게시물리스트가 있다. | - | 허은재 | 미반영 | v0.1 | # 요구사항 ## 회원 - 회원가입 가능 - 회원가입 시 환영메일 발송 - 페북 로그인 가능 - 아아디 찾기와 비밀번호 리셋이 가능 - 팔로우 팔로잉기능 가능 ## 글쓰기 - 로그인한 회원이 글 쓰기가 가능 - 본인이 작성한 글은 수정과 삭제가 가능 - 내용 및 파일(이미지, 동영상) 다중 업로드가 가능 ## 설정 - 게시글 공유 가능 - 게시글 링크 복사 기능 가능 - 게시글 삭제 기능 가능 - 게시글 수정 기능 가능 - 팔로우 기능 가능 ## 검색 - 게시물, 프로필 검색이 가능 ## 댓글 - 게시글에 댓글 작성이 가능 - 본인이 작성한 댓글은 삭제가 가능 - 좋아요 가능 ## 프로필 - 게시글 대표 사진 하나만 표시하여 리스트 정렬 가능 - 사용지 개인정보(이메일 주소, 본인번호, 성별, 생년월일) 수정 가능 ## 수정 - 내용 수정 가능 - 댓글막기 기능 가능 - 수정 날짜 갱신 가능 # 화면 구현 및 소스코드 ## 로그인 ### ?‍ 동작화면 ![](https://ifh.cc/g/MVNosk.jpg) ### ? 주요소스코드 #### [ 반응형코드 (반응형 넓이 고정) ] /* 미디어의 넓이가 435px 이상이면 body태그에 상단여백이 200px 설정됩니다. */ @media ( min-width : 435px) { body { margin-top: 200px; } } /* 미디어의 넓이가 860xp이하이면 id="hidden" 사라집니다.*/ /* id="860px의 최대 넓이가 400px로 변경됩니다."*/ @media ( max-width : 860px) { #hidden { display: none; } #860px{ max-width:400px; } } ## 회원가입 ### ?‍ 동작화면 ![](https://ifh.cc/g/TpwrtH.png) 이미지 이미지 ### ? 주요소스코드 #### [ 회원가입 소스 ] ```html

친구들의 사진과 동영상을 보려면 가입하세요.

또는

서비스를 이용하는 사람이 회원님의 연락처 정보를 Instakg에 업로드했을 수도 있습니다.

휴대폰 번호 또는 이메일이 다르거나 사용자 이름이 불가능합니다. 다른 이름을 사용하세요.

계정이 있으신가요? 로그인

``` ## 메인화면 게시물 ### ?‍ 동작화면 ![](https://ifh.cc/g/HLasyx.jpg) ### ? 주요소스코드 #### [ 게시물 프로필 설정 ] ```html

사용자1

사용자1님 외 123,456명이 좋아합니다.

사용자2 이 댓글은 1번입니다

사용자3 이 댓글은 2번입니다

사용자4 이 댓글은 3번입니다

1시간 전...

```

게시글 상세