Team-Project-blogSite

Go!교복

팀플 블로그 사이트 만들기

직장인 커뮤니티, 대학생 커뮤니티
"왜 청소년을 위한 커뮤니티는 없을까?" 라는 생각에서 진행하게 된 프로젝트입니다!
학교에서 얻을 수 없는 독특한 정보를 제공하고자,
전국 고등학교의 교복을 소개하는 커뮤니티 사이트를 제작하였습니다.

전국의 교복을 구경하며 투표를 할 수 있고,
그에 대한 평가는 댓글로도 자유롭게 논할 수 있습니다.

투표가 진행된 해당 학교의 교복은 인기순위로 매겨지고
각 조회수, 좋아요, 싫어요 순으로 순위를 확인할 수 있습니다.

또, "수다방" 커뮤니티에서 학생들만의 이야기로
수다의 꽃을 피울 수 있습니다!

Use Stack

Design Map

1. 사이트 명(Logo) 선정 : Go!교복
   • 해석1. Go를 그대로 해석하여 "교복을 보러가다"
   • 해석2. Go를 한글 '고'로 소리나는대로 읽어 "고교복" (고등학교 교복)
2. 페이지 구성
   • HOME (메인페이지)
   • SUB (교복소개, 인기순위, 수다방, LOGIN/JOIN)
3. 페이지별 기능 구성
   • 기본 기능 : 게시판 글쓰기, 리스트, 수정, 삭제, 회원가입, 로그인, 게시글 댓글
   • 새로 추가한 기능 : 게시글 좋아요, 게시글 싫어요, 댓글 좋아요, 교복 좋아요, 교복 싫어요, 교복 댓글

Figma

피그마 디자인 보러가기 : 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)

2. MAIN
   

   • Main Visual
     
     1. 애니메이션 교실 배경 이미지
        
     2. 메인 문구 폰트 : Londrina Solid 구글 폰트
        
     3. 서브 폰트 : 샌드박스 어그로체
        
   • Main Section
     
     1. 메인 폰트 : 샌드박스 어그로체
        
     2. 서브 폰트 : 롯데리아 딱붙어체(LotteriaDdag)
        

3. SUB
   

   • 상단 배너 이미지 : 애니메니션 학교 배경, 실사 교복 착용 화보 이미지
     
     1. 전체 폰트 : 샌드박스 어그로체
        
     2. 교복 상세페이지 : 인스타그램 레이아웃 참고
        

4. FOOTER
   

   • Black 색상 배경
     
   • 전체 폰트 : 샌드박스 어그로체
     

Page-list

1. HEADER
   
   • logo 제작
     
   • nav - menu 구성 (교복소개, 인기순위, 수다방, 로그인, 회원가입)
     
2. . 메인페이지
   
   • Main Visual : gsap를 이용한 애니메이션
     
   • section01 : 이미지 슬라이드, 배경 고정 효과
     
   • section02 : 마우스 Hover 효과, 링크 바로가기
     
   • section03 : php를 이용하여 게시판 리스트 정보 가져오기
     
   • section04 : css animation 효과, 유튜브 영상 탭메뉴 구현
     
3. 교복소개
   
   • json을 이용하여 전국 학교 정보 출력 (http://dbwls8751.dothome.co.kr/blog_php/blog_phpJSON/gobok.json)
     
   • 지역별 필터 검색
     
   • 키워드 검색
     
   • 교복 목록 조회수, 댓글수 표시
     
4. 교복소개 상세
   
   • 교복 이미지 swiper를 이용한 슬라이드
     
   • 좋아요, 싫어요 투표 기능 : 클릭 시, 배경 색상 변경 효과
     
   • 댓글 : 댓글작성, 댓글 좋아요/좋아요 취소, 이모티콘 작성
     
5. 인기순위
   
   • 조회수, 좋아요, 싫어요 순으로 리스트 정렬
     
   • 각 조회수, 좋아요, 싫어요 수 노출
     
6. 수다방
   
   • 게시판 목록 : NO, Title, Name, Date, View, Like
     
   • 게시판 상세 : 게시글 좋아요 기능, 댓글 기능(댓글 작성, 랜덤 프로필, 댓글 좋아요 기능)
     
7. 마이페이지
   
   • 내 정보 변경 : 회원가입 정보 불러오기/정보 수정 기능
     
   • 내가 쓴 글 : 각 회원별 게시판 작성글 불러오기
     
   • 내가 좋아한 교복 : 교복소개 페이지에서 좋아요 누른 교복 정보 불러오기
     
   • 비밀번호 변경 : 비밀번호 변경 기능
     
   • 회원 탈퇴하기 : 회원 정보 삭제
     
8. 로그인
   
   • 아이디, 비밀번호 입력 시 일치하는 정보 가져오기
     
   • 아이디 찾기 : 연락처, 이름 일치 정보
     
   • 비밀번호 찾기 기능 : 아이디, 연락처 일치 정보
     
9. 회원가입
   
   • 아이디 : 중복 검사 기능
     
   • 이름
     
   • 이메일 : 중복 검사 기능
     
   • 비밀번호, 비밀번호 확인
     
   • 주소 : 주소 검색 기능
     
   • 연락처
     
   • 약관 동의
     
   • 가입 완료 시, 회원 정보 저장
     
10. FOOTER
    
    • Copyright 2023 Gogyobok

CODE VIEW - JSON파일과 MYSQL정보 가져오기

<?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("../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); // 필터링된 정보로 교복 정보 업데이트
            
        });
}

After project...

1. 디자인 측면
   • 교복 착용 이미지 자료 획득의 어려움으로 메인페이지가 매력적이지 못했던 점을 인식했습니다.
   • 교복 이미지 부족으로 인한 디자인 부족을 경험하였습니다.
2. 기능적 구현
   • JSON과 PHP 연결로 정보를 가져오는 부분에서 어려움을 겪었습니다.
   • 이 부분에 많은 시간을 투자하였고, 문법과 구문 오류 혹은 데이터 포맷 불일치의 문제라고 분석하였습니다.
3. 협업과 문제 해결
   • 문제 해결에 필요한 지식이 부족한 부분을 발견하자, 팀원들끼리 서로의 지식을 공유하고 온라인 포럼이나 문서화된 자료를 참고하여 정보를 확보했습니다.
4. 아쉬웠던 점
   • 학교 수에 비해 교복 착용 이미지를 찾는게 매우 힘들었고, 더 많은 교복 정보를 제공하지 못하는 것이 아쉬웠습니다.