웹개발/솔루션개발_포트폴리오입니다.

1. 2009 ~ 2014
동국대학교
엔지니어가 되려고 공대에 입학
14번의 팀 프로젝트를 수행
전공이 어려워서 울면서 공부하고
총 평점 3.90의 학점으로 졸업
학과 축구 소모임 CHEMEER 활동
해외봉사활동 – 캄보디아.UCV
페스티벌 운영지원 봉사활동 - SICAF
화공생물공학과
2013 ~ 2016
코리아써키트
공정 기술 엔지니어(2013.12~2014.11)
약품 공정이 아닌 NC 제어 공정에 배치되며 비전이 흔들림
PCB로 비전을 찾다가 프로그래밍을 접하면서
CNC 엔지니어로 일하는 것을 극복
사양 기술 엔지니어(2014.11~2016.12)
기술 엔지니어 중에 프로그램을 가장 많이 쓰는
사양기술팀으로 팀 변경
신 공법 도입을 위한 전사적 프로젝트 참여
ERP 개선 작업 중 프로그래밍으로 전직을 결심
고객사 기술 응대, 신규 data 분석 및 투입,
제품 이력 관리 업무(삼성전자)
2017.08 ~ 2018.02
KH 정보교육원
응용SW엔지니어 및
DB엔지니어 양성과정
솔루션 분야에 대한 관심
매일 3시간씩 복습에 임함
Semi project, Final project 를 수행
Semi project의 팀장
Java, jsp, Struts2, Spring
Oracle11g, iBatis, myBatis,
HTML, css, javascript, jQuery
2009 2012 201820172016201520142013
[0] 신입 개발자 김혜리입니다.
E-mail : m3rri@naver.com
Blog : blog.naver.com/m3rri

2. [*] 포트폴리오 목차.
Fun-iture : 가구를 판매하는 쇼핑몰
기성 가구 + 주문제작, 원데이 클래스를 추가
수행기간 : 2017.12.26 ~ 2018.02.19
맡아서 구현한 부분 :
주문제작 상품 페이지, 견적 문의 페이지 구현
1
iCase : 핸드폰 케이스를 판매하는 쇼핑몰
선착순 댓글로 참여하는 이벤트 게시판이 있음
수행기간 : 2017.11.01 ~ 2018.11.24
맡아서 구현한 부분 :
이벤트 게시판 구현
2

3. [1] Fun-iture
1. 프로젝트 개요
주제 :
기성 가구 + 주문제작, 원데이 클래스를
추가한 소핑몰 구현
개발환경 :
Language / java, Servlet, javascript, jQuery
Ajax, HTML, css
Framework / MVC Spring 4.0, maven
DBMS / Oracle 11g, SQL developer,
jdbc, myBatis
WAS / Tomcat 6.0
IDE Tool / Eclipse
맡은역할 :
관리자 페이지 Bootstrap 테마 tiles 설정
AOP 작업
3. 구현기능 중 Order Made part
화면흐름도, 자료사전 문서 작업
2. ERD

4. [1] Fun-iture
3. 구현기능
회원
회원가입, 로그인/로그아웃, 아이디/비밀번호 찾기
회원 정보 수정, 일반회원 목록(관리자)
마이페이지(일반/주문제작 주문내역, 원데이클래스 예약내역,
취소/교환/반품내역)
Ready
Made
상품 목록, 상품 상세보기, 상품 검색
리뷰 등록/수정/삭제, 장바구니, 좋아요
카테고리 관리, 신규 상품 등록/수정/삭제(관리자)
Order
Made
상품 목록, 상품 상세보기
신규 상품 등록/수정/삭제(관리자)
리뷰 등록/수정/삭제, 리뷰의 댓글(관리자)
원하는 상품의 견적문의 글 등록/수정/삭제
견적문의 글 댓글, 견적상품 구매
Oneday
Class
수업 목록, 수업 상세보기, 예약 결제하기
신규 수업 등록/수정/삭제(관리자)
고객센터
공지사항 목록, 상세보기
Q&A 목록, 상세보기
공지사항 등록/수정/삭제, Q&A의 댓글(관리자)
비회원
Contact, News letter
News letter 발신(관리자)

5. [1] Fun-iture
4. 핵심 구현 내용 (1) - Project에 AOP 적용하기
프로젝트의 구현 내용 중 로그 기능을 공통 관심 사항으로 선정하여 Spring frame work의 특장점인 AOP를 적용.
클라이언트의 요청을 처리하는 Controller의 메소드를 pointcut으로 지정하고 around Advice로 동작
<aop:pointcut id="ctrl“ expression="execution(public * com.my.*.*Controller.*(..))"/>
Controller에 있는 메소드 중 요청에 간접적으로 관여하는 메소드에도 pointcut이 설정된 것을 제외하고자
아래와 같이 리턴 타입을 * 에서 특정 타입을 명시하여 해결
<aop:pointcut id="ctrl"
expression="execution(public org.springframework.web.servlet.ModelAndView com.my.*.*Controller.*(..))
or execution(public String com.my.*.*Controller.*(..))"/>

6. [1] Fun-iture
4. 핵심 구현 내용 (2) - 주문제작 상품/견적문의 TABLE : custom(상품 관련 정보), custom_board(견적문의 게시글 정보)
주문제작 상품의 특성
기성제품과는 달리 소비자가 크기, 색상, 옵션 등을 변경할 수 있음
But, 상품마다 변경 가능한 옵션의 가지 수는 모두 다를 수 있음
주문제작 / 견적문의 구현
Option 정보를 담을 column을 여러 개로 만드는 것 보다는
하나의 column에 option 정보를 넣을 수 있는 형태로 data를 가공
View에서는
관리자는 변경해 줄 수 있는 옵션의 개수 만큼 default 값을 입력
고객은 default 값을 참조하여 원하는 size 및 개수만큼 옵션을 수정
+추가로 원하는 내용에 대헤 textarea & file form을 이용
Client Server DataBase
Varchar type
값 1개
String 객체
form에 입력된
option 정보들
List 객체(3개)
option 정보를
form에 입력
☞ 관리자 상품등록/수정, 고객 견적문의등록
☜ 관리자 수정 폼, 고객 견적문의등록 폼
옵션 정보의 처리 내용▼

7. [1] Fun-iture
Select box에서 원하는 숫자를 선택하고 v 버튼을
클릭하면 Detail of options란의 form이 선택된
수량과 같게 변경되도록 jQuery로 구현했다.
관리자 주문제작 수정 폼▼
4. 핵심 구현 내용 (2) - 주문제작 상품/견적문의 화면
회원 견적문의 등록 폼▼
TABLE : custom(상품 관련 정보), custom_board(견적문의 게시글 정보)

8. TABLE : custom(상품 관련 정보) ,custom_board(견적문의 게시글 정보)
cuboard_com(견적문의 댓글 정보)
[1] Fun-iture
회원 견적문의 상세보기▲
①
②
4. 핵심 구현 내용 (3) - 견적문의 상세보기 화면
modal
modal
견적문의 게시판의 특성
자신이 등록한 게시글에서 주문 제작 상품에 대해 관리자와 옵션을 협의
관리자가 등록한 최종 옵션&가격에 동의하면
별도의 페이지 이동 없이 곧 바로 결제 할 수 있음
최종옵션 / 결제 구현
최종 옵션 : 고객 입장에서 일반 답변이 아닌 최종 옵션 고지임을
알 수 있어야 하며 구매 폼에 접근할 수 있는 요소를 구현
class에서 가격과 옵션 form의 값이 넘어오면 data를 가공
결제 : 바로 결제 창에 접근하기 위해 modal 기능 구현
①결제 폼▼
②
댓글 폼▼
(관리자 로그인 시
일반답변/최종견적 선택)
최종 견적 답변의 처리 내용▼
Client Server DataBase
Varchar type
값 1개
구매에 필요한
button, hidden form 추가하여
String 객체생성
최종견적 체크,
가격/옵션 form 입력

9. [1] Fun-iture
SELECT * FROM(
SELECT c.CU_NO, c.NAME, c.OPTIONS, c.REG_DATE, c.STATUS,
count(m.NO) AS REVIEW, count(m.REPLY) AS REPLY
FROM CUSTOM c LEFT OUTER JOIN CUSTOM_COM m
ON c.CU_NO = m.CU_NO
GROUP BY c.CU_NO, c.NAME, c.OPTIONS, c.REG_DATE, c.STATUS
ORDER BY c.CU_NO DESC
) WHERE STATUS='Y'
SQL→
관리자 주문제작 리스트▼
관리자가 추가한 상품 정보와 함께
회원이 등록한 리뷰의 개수와 관리자가 아직 답변하지 않은 리뷰
를 함께 보여줌으로써, 상품 관리와 리뷰 관리를 동시에 할 수 있음
5. 구현 내용- 주문제작(관리자), 견적문의의 리스트
TABLE : custom(상품 관련 정보), custom_com(상품 리뷰 정보)
custom_board(견적문의 게시글 정보), cuboard_com(견적문의 댓글 정보)
고객/관리자 견적문의 리스트▼
견적문의 글 정보와 함께 문의글의 현재 상태도 확인할 수 있음
관리자 메뉴에서는 현재 상태를 선택하여 조회 가능
회원▼
비밀글
SELECT b.CUB_NO, b.CU_NO, c.NAME, b.ID, b.SUBJECT, COUNT(d.COM) as COM, b.PRICE, b.REG_DATE, b.STATUS
FROM CUSTOM_BOARD b LEFT OUTER JOIN CUSTOM c ON b.CU_NO = c.CU_NO
LEFT OUTER JOIN CUBOARD_COM d ON b.CUB_NO = d.CUB_NO
GROUP BY b.CUB_NO, b.CU_NO, c.NAME, b.ID, b.SUBJECT, b.PRICE, b.REG_DATE, b.STATUS
ORDER BY b.CUB_NO DESC
<if test="searchCate!='status' and searchCate!=null">AND ${searchCate} LIKE '%'||#{keyword}||'%'</if>
<if test="searchCate=='status'">
<if test="keyword=='견적완료'">AND PRICE>=0</if>
<if test="keyword=='협의중'">AND COM>0 AND PRICE IS NULL</if>
<if test="keyword=='미답변'">AND COM=0</if>
</if>
관리자▼
SQL↘

10. [1] Fun-iture
회원 주문제작 리스트▲ 회원 주문제작 상세 화면▶
① 로그인 한 상태에서 이 버튼을
르면 견적 문의 등록 폼으로 이동
( 핵심 구현 내용 (2) )
SlideToggle 등 jQuery를 이용하여
리뷰의 리스트를 구현
①
회원 주문제작 후기 수정 폼▲
이미지는 선택적으로 업로드
창이 닫히고 부모창을 reload 하기 위해
Modify reques는 javascript에서 처리
상품 리스트 및
모든 상품의 개수 확인
5. 구현 내용 - 주문제작 상품 상세보기 TABLE : custom(상품 관련 정보), custom_com(상품 리뷰 정보)

11. [2] iCase
1. 프로젝트 개요
주제 :
휴대폰 폰케이스를 판매하는 쇼핑몰
선착순 이벤트, 주문 현황을 표시하는 그래프 기능
개발환경 :
Language / java, Servlet, javascript, jQuery
Ajax, HTML, css
Framework / Struts2
DBMS / Oracle 11g, SQL developer,
jdbc, iBatis
WAS / Tomcat 6.0
IDE Tool / Eclipse
맡은역할 :
팀장, DB설계, 문서작성, PPT
이벤트 게시판 회원/관리자 기능 구현
팀원들의 code 하나로 합치기
2. TABLE
환불
주문
주문제작
장바구니
반품
쪽지
예약판매 댓글
event_com_reserve
장바구니 주문
교환
주문 상태
회원
Q&A
예약판매
event_reserve
상품
공지사항
상품 카테고리

12. [2] iCase
3. 구현기능
회원
회원가입, 로그인/로그아웃, 아이디/비밀번호 찾기
회원 정보 수정, 일반회원 목록
상품
상품 목록, 상품 상세보기, 상품 검색
카테고리 관리, 신규 상품 등록/수정/삭제
장바구니 장바구니 추가, 리스트, 상품 수량 변경/삭제
주문
주문하기, 주문내역 확인, 예약 확인
회원 주문상태 관리, 정보 수정
주문 최소/변경/반품
게시판
공지사항 목록, 상세보기, 등록/수정/삭제
Q&A 목록, 상세보기, 등록/수정/삭제, 댓글
이벤트
예약판매
목록, 상세보기, 신청, 등록/수정/삭제
주문제작
목록, 등록/수정/삭제
쪽지 관리자->회원 쪽지 발신/수신

13. [2] iCase
TABLE : event_reserve(예약판매 상품 정보)
(참조 : 관리자 상품 등록 폼)▼
4. 핵심 구현 내용 (1) – 이벤트 등록/수정
관리자 예약판매 등록/수정 폼▲
이벤트 등록/수정의 특성
① 이벤트 대상 상품을 검색하여 선택 입력할 수 있음
② 시작 날짜와 마감 날짜를 설정할 수 있음
이벤트 등록/수정 구현
① 상품을 등록 시 상품의 이름을 기억해서 직접 입력하기 보다
카테고리로만 구분해서 검색하는 것이 편리하므로
*예약판매 상품 제품만 카테고리에서 검색되도록 구현
② date picker form을 통해서 입력된 날짜는 String 객체
- String -> Date 메소드 구현하여 data를 가공
- 시작 날짜보다 마감 날짜가 앞서지 않도록 유효성 검증
＊예약판매 상품
일반 상품을 등록할 때 예약 판매 여부를 체크한 후
이벤트를 등록할 때 정한 마감날짜가 지나면
일반판매 제품으로 상태가 변경되도록 구현
상품 검색▲

14. [2] iCase
TABLE : event_reserve(예약판매 상품 정보)
event_com_reserve(예약판매 댓글 정보)
회원 예약판매 상세보기+댓글▼
5. 핵심 구현 내용 (2) – 이벤트 참여하기
이벤트 참여 특성
① 휴대폰 번호만 입력하면 자동으로 주문 table에 ‘예약’ 상태로 등록
② 중복 참여를 방지해야 함
이벤트 참여 구현
① 주문 table에 필요한 회원 정보를 session에 등록된 id로 조회
주문 table에 필요한 상품 정보를 이벤트 게시글의 상품 no로 조회
상기 2가지 정보와 휴대폰 번호를 주문 table 에 추가
② 댓글 목록에서 참여하려는 id가 있다면 action의 result name으로 exist를 리턴
+ 전화번호 형식이 아닐 경우 error를 리턴
+ 이벤트 참여 처리 중 이벤트 참여 인원수가 초과될 경우 over를 리턴
각각의 형식에 맞는 에러페이지와 매핑

15. [2] iCase
5. 구현 내용(예약판매 관리자 화면)
회원 예약판매 리스트▼
5. 구현 내용 – 리스트
관리자 주문 리스트▼
▲예약 판매 게시판의 게시글에 댓글을 남기면 ‘예약’이라는 상태로 주문이 완료된다.
별도 공지를 하는 기간 안에 무통장 입금을 하면 먼저 제품을 발송하는 방식
회원 상품 리스트▼
▲예약 판매 글을 작성할 때 선택된 상품은 상품 리스트에서 ‘예약판매’라는 리본이 달린다.
예약판매 끝나는 날짜가 지나면 리본이 제거된다.

16. [*] Finish
감사합니다!