직장인 커뮤니티, 대학생 커뮤니티
"왜 청소년을 위한 커뮤니티는 없을까?" 라는 생각에서 진행하게 된 프로젝트입니다!
학교에서 얻을 수 없는 독특한 정보를 제공하고자,
전국 고등학교의 교복을 소개하는 커뮤니티 사이트를 제작하였습니다.
전국의 교복을 구경하며 투표를 할 수 있고,
그에 대한 평가는 댓글로도 자유롭게 논할 수 있습니다.
투표가 진행된 해당 학교의 교복은 인기순위로 매겨지고
각 조회수, 좋아요, 싫어요 순으로 순위를 확인할 수 있습니다.
또, "수다방" 커뮤니티에서 학생들만의 이야기로
수다의 꽃을 피울 수 있습니다!
피그마 디자인 보러가기 :
https://www.figma.com/file/dBBlSQ6v4zGpQnMrQ4SQxT/Go!%EA%B5%90%EB%B3%B5?type=design&node-id=30%3A2&mode=design&t=ihJNl8WEa5AFRVs4-1
1. HEADER
- 메인 컬러 : #1976DE, 서브 컬러 : black, white, #D2E7FF
- 로고 : 롯데리아 촵땡겨체(LotteriaChab)
- 메뉴 : 롯데리아 딱붙어체(LotteriaDdag)
-
MAIN
- Main Visual
- 애니메이션 교실 배경 이미지
- 메인 문구 폰트 : Londrina Solid 구글 폰트
- 서브 폰트 : 샌드박스 어그로체
- 애니메이션 교실 배경 이미지
- Main Section
- 메인 폰트 : 샌드박스 어그로체
- 서브 폰트 : 롯데리아 딱붙어체(LotteriaDdag)
- 메인 폰트 : 샌드박스 어그로체
- Main Visual
-
SUB
- 상단 배너 이미지 : 애니메니션 학교 배경, 실사 교복 착용 화보 이미지
- 전체 폰트 : 샌드박스 어그로체
- 교복 상세페이지 : 인스타그램 레이아웃 참고
- 전체 폰트 : 샌드박스 어그로체
- 상단 배너 이미지 : 애니메니션 학교 배경, 실사 교복 착용 화보 이미지
-
FOOTER
- Black 색상 배경
- 전체 폰트 : 샌드박스 어그로체
- Black 색상 배경
- HEADER
- logo 제작
- nav - menu 구성 (교복소개, 인기순위, 수다방, 로그인, 회원가입)
- logo 제작
- . 메인페이지
- Main Visual : gsap를 이용한 애니메이션
- section01 : 이미지 슬라이드, 배경 고정 효과
- section02 : 마우스 Hover 효과, 링크 바로가기
- section03 : php를 이용하여 게시판 리스트 정보 가져오기
- section04 : css animation 효과, 유튜브 영상 탭메뉴 구현
- Main Visual : gsap를 이용한 애니메이션
- 교복소개
- json을 이용하여 전국 학교 정보 출력 (http://answlsgh95.dothome.co.kr/blog_php/json/gobok.json)
- 지역별 필터 검색
- 키워드 검색
- 교복 목록 조회수, 댓글수 표시
- json을 이용하여 전국 학교 정보 출력 (http://answlsgh95.dothome.co.kr/blog_php/json/gobok.json)
- 교복소개 상세
- 교복 이미지 swiper를 이용한 슬라이드
- 좋아요, 싫어요 투표 기능 : 클릭 시, 배경 색상 변경 효과
- 댓글 : 댓글작성, 댓글 좋아요/좋아요 취소, 이모티콘 작성
- 교복 이미지 swiper를 이용한 슬라이드
- 인기순위
- 조회수, 좋아요, 싫어요 순으로 리스트 정렬
- 각 조회수, 좋아요, 싫어요 수 노출
- 조회수, 좋아요, 싫어요 순으로 리스트 정렬
- 수다방
- 게시판 목록 : NO, Title, Name, Date, View, Like
- 게시판 상세 : 게시글 좋아요 기능, 댓글 기능(댓글 작성, 랜덤 프로필, 댓글 좋아요 기능)
- 게시판 목록 : NO, Title, Name, Date, View, Like
- 마이페이지
- 내 정보 변경 : 회원가입 정보 불러오기/정보 수정 기능
- 내가 쓴 글 : 각 회원별 게시판 작성글 불러오기
- 내가 좋아한 교복 : 교복소개 페이지에서 좋아요 누른 교복 정보 불러오기
- 비밀번호 변경 : 비밀번호 변경 기능
- 회원 탈퇴하기 : 회원 정보 삭제
- 내 정보 변경 : 회원가입 정보 불러오기/정보 수정 기능
- 로그인
- 아이디, 비밀번호 입력 시 일치하는 정보 가져오기
- 아이디 찾기 : 연락처, 이름 일치 정보
- 비밀번호 찾기 기능 : 아이디, 연락처 일치 정보
- 아이디, 비밀번호 입력 시 일치하는 정보 가져오기
- 회원가입
- 아이디 : 중복 검사 기능
- 이름
- 이메일 : 중복 검사 기능
- 비밀번호, 비밀번호 확인
- 주소 : 주소 검색 기능
- 연락처
- 약관 동의
- 가입 완료 시, 회원 정보 저장
- 아이디 : 중복 검사 기능
- FOOTER
- Copyright 2023 Gogyobok
<?php
include "../connect/connect.php";
include "../connect/session.php";
// SQL 쿼리 생성
$sql = "SELECT introId, introComment, introView FROM Intro";
// MySQL에서 데이터 가져오기
$result = mysqli_query($connect, $sql);
// introId 및 introComment 값을 저장할 배열 생성
$introData = [];
if ($result) {
while ($row = mysqli_fetch_assoc($result)) {
$introData[] = [
'introId' => $row['introId'],
'introComment' => $row['introComment'],
'introView' => $row['introView']
];
}
} else {
echo "데이터를 가져오는 중에 오류가 발생했습니다.";
}
// PHP 배열을 JavaScript 배열로 출력
echo '<script>let introData = ' . json_encode($introData) . ';</script>';
?> // 정보 가져오기
const fetchgGobok = (selectedRegion = '') => {
fetch("https://raw.githubusercontent.com/jinhomun/webs2024/main/blog_phpJSON/gobok.json")
.then(res => res.json())
.then(items => {
gobokInfo = items.map((item, index) => {
return {
infoRegion: item.region,
infoName: item.school,
infoUniformtypes: item.uniform_types,
infoUniformimg: item.uniform_img
};
});
if (selectedRegion && selectedRegion !== '지역별') {
// 선택된 지역에 해당하는 교복 정보만 필터링
gobokInfo = gobokInfo.filter(gobok => gobok.infoRegion === selectedRegion);
}
updateGobok(gobokInfo); // 필터링된 정보로 교복 정보 업데이트
});
}- 디자인 측면
- 교복 착용 이미지 자료 획득의 어려움으로 메인페이지가 매력적이지 못했던 점을 인식했습니다.
- 교복 이미지 부족으로 인한 디자인 부족을 경험하였습니다.
- 기능적 구현
- JSON과 PHP 연결로 정보를 가져오는 부분에서 어려움을 겪었습니다.
- 이 부분에 많은 시간을 투자하였고, 문법과 구문 오류 혹은 데이터 포맷 불일치의 문제라고 분석하였습니다.
- 협업과 문제 해결
- 문제 해결에 필요한 지식이 부족한 부분을 발견하자, 팀원들끼리 서로의 지식을 공유하고 온라인 포럼이나 문서화된 자료를 참고하여 정보를 확보했습니다.
- 아쉬웠던 점
- 학교 수에 비해 교복 착용 이미지를 찾는게 매우 힘들었고, 더 많은 교복 정보를 제공하지 못하는 것이 아쉬웠습니다.