|

Creative UI · Clean Code · Smooth Interaction

PROJECTS ABOUT

ABOUT ME

Front-end 개발자, 안선영입니다.

call 010-5926-6495
tmxpffk03@naver.com

Github

Velog

동국대학교 멀티미디어공학과 졸업

2020.03 - 2024.02

기웅정보통신 스크래핑팀 아르바이트 근무

2022.01 - 2022.08

SKILLS

Front-end

JavaScript TypeScript React Next.js

Back-end

Firebase MySQL Vercel

Styling

HTML CSS Tailwind Bootstrap

PROJECTS

반려동물과 함께하는 종합 플랫폼

✨ 프로젝트 개요

KcisaApi 데이터를 기반으로 다양한 카테고리(병원, 카페, 음식점, 공원 등)의 장소 정보를 Naver Maps API를 통해 마커를 표시하고, 사이드바 UI를 통해 세부 정보를 확인할 수 있도록 구현한 웹 애플리케이션입니다. 또한 유기동물 데이터(GgAnimalApi) 및 반려동물 관련 뉴스(NewsApi)를 함께 제공하여 반려동물 관련 통합 서비스를 제공합니다.

1️⃣ KcsaApi 데이터를 Naver Maps API에 적용하기

lat, lng 값에서 "N", "E" 문자를 제거하고 숫자만 추출 address2에서 우편번호만
분리하여 사용 category2 기준으로 데이터를 필터링하여 지도에 표시 각 카테고리(hospital, cafe, food, park)별 모달
컴포넌트 생성 → title, address, region, phone, description, charge, url 정보 표시

2️⃣ 사용자가 보는 지도 영역의 마커만 표시

Map.getBounds() 함수를 사용하여 현재 지도의 Boundary(SW, NE)값을 가져온 뒤
lat >= sw.lat() && lat <= ne.lat() && lng >= sw.lng() && lng <= ne.lng() 조건식을 통해 사용자가 보는 지도 영역에만
마커를 렌더링 하고, 지도를 이동하여 새로고침 버튼을 누르면 새로운 영역의 마커가 렌더링 될 수 있도록 처리하였습니다.

3️⃣ 커스텀 훅 useToggleNav, useModalStore, useNaverMaps, useRegion

코드의 중복을 피하고, 분리하여 유지보수성을 높이기 위해 커스텀 훅을 구현하였고,
useToggleNav 커스텀훅을 생성하여 On/Off 토글 기능을 구현하였습니다.
useModalStore 각 카테고리의 마커 버튼을 사용하기 위해 data타입 정의 및 상태관리를 하였습니다.
useNaverMaps 커스텀훅을 생성하여 네이버 지도 초기값 생성하였습니다.
useRegion 지역 선택을 구현하기 위해 지역값 저장을 하였습니다.

4️⃣ 유기동물 데이터 (GgAnimalApi)

GgAnimalApi를 사용하여 유기동물 정보 불러오기 .filter()을 사용하여 data.STATE_NM === “보호중” 보호중인
유기동물 데이터 값만 받아올 수 있도록 하였고, 보호기간이 종료되지 않은 data를 가져오기 위해 오늘날짜 기준으로
종료되지 않은 값을 가져올 수 있도록 하였습니다.

5️⃣ 반려동물 뉴스 (NewsApi)

NewsApi를 사용하여 반려동물 관련 최신 뉴스 제공
검색 키워드: "반려동물" “OR “강아지" 에 조건을 추가하여 url 링크로 원문 기사 연결되도록 하였습니다.

📝 아쉬운 점

로그인 기능을 추가하여 사용자가 자주 가는 곳을 표시하기 위해 북마크/즐겨찾기 기능 구현을 하면 좋을것 같다는
생각이 들었습니다.

⚙️ 사용 기술

Front-End : React, Next.js, CSS (Styled-components, Tailwind)
API : Kcisa API(문화데이터), Naver Maps API(네이버 지도), GgAnimalApi(유기동물 공공데이터),
NewsApi(반려동물 뉴스) 기타 : TanStack Query, Zustand, Custom Hooks, Modal Components, Sidebar Navigation, Swiper, EmblaCarousel
배포 : Vercel, Github

강아지 쇼핑몰 Summer

✨ 프로젝트 개요

강아지 용품을 판매하는 종합 쇼핑몰 웹사이트입니다. 사용자는 상품 조회 기능을 이용할 수 있고,
관리자는 상품 등록 및 관리가 가능합니다. 이미지는 Cloudinary에 업로드하고, 관련 데이터는 Firebase database에
저장됩니다. 또한 Firebase Google Auth Login을 사용하여 인증된 사용자만 이용할 수 있으며,
특정 사용자는 Authentication에 관리자 등록을 하여 새로운 상품을 등록할 수 있습니다.

1️⃣ Authentication (회원 인증)

Firebase Auth Login 사용 (이메일/비밀번호 로그인), Google 아이디 로그인 상태 유지 및 로그아웃 가능
관리자(Admin) 지정 가능 → 관리자만 새 상품 등록 가능

2️⃣ 이미지 업로드 Cloudinary

uploader.js를 통해 Cloudinary에 직접 업로드, 업로드된 이미지 URL Firebase에 저장
관리자 상품 등록 시 이미지 업로드 기능 제공

3️⃣ 쇼핑몰 기능

상품 목록 조회, 카테고리별 필터링 및 Pagination 구현, 상품 상세 페이지, 장바구니 추가/삭제,
Embla Carousel 라이브러리 사용한 이미지 carousel구현
Navbar 사용 → 링크로 페이지 이동

4️⃣ admin 사용자 지정

로그인한 사용자의 UID를 사용 Realtime Database의 admins 노드 조회,
UID가 admins 배열에 있으면 isAdmin: true
UID가 없으면 isAdmin: false 또는 추가하지 않고 사용자 반환

📝 아쉬운 점

결제시스템도 구현하면 좋을 것 같다는 생각이 들었습니다.

⚙️ 사용 기술

Front-End : React, CSS (Styled-components, Tailwind)
기타 : Cloudinary, Firebase, Firebase Google Auth-login, TanStack Query, EmblaCarousel
배포 : Vercel, Github

포트폴리오 웹사이트

유튜브 API를 사용한 유튜브 클론코딩

✨ 프로젝트 개요

1️⃣ React Query를 사용한 YouTuBe API 호출

useQuery를 사용하여 YouTube API에서 데이터 호출, Query key를 설정하여
동일한 요청에 대해 캐싱 활용, YoutubeApiContext를 생성 Provider를 통해
API 관련 함수를 전역으로 공급 각 페이지 컴포넌트에 useContext를 사용하여
동일한 API를 재사용할 수 있었다.

2️⃣ VideoCard에서 상세 페이지 처리

useNavigate훅을 사용, 검색 결과의 영상 카드 클릭 시 상세 페이지로 이동하도록 구현,
이동할 때 video.snippet의 주요 정보(제목, 썸네일, 채널명, 업로드 날짜)를 함께 전달

3️⃣ ChannelPlaylist 페이지 구현

useContext로 전달받은 값을 통해 채널별 영상 목록을 렌더링

4️⃣ 사용 기술

Front-End : React, Bootstrap
API : YouTube Data API v3
배포 : Vercel, Github

매경테스트 기반 학습노트 어플

✨ 프로젝트 개요

매경테스트를 학습하기 위한 경제 개념 학습과 문제풀이 기능을 제공하는 안드로이드 애플리케이션입니다.
각 과목을 문제풀이 모드를 통해 퀴즈 형식으로 학습할 수 있으며, 개념용어 모드를 통해 경제학용어를 이미지 자료와 함께 정리할 수 있습니다.

1️⃣ UI 구성

메인 화면 : 문제풀이 버튼, 개념용어 버튼 제공

Sub Menu : 문제풀이 화면(Radio Button을 활용한 퀴즈 풀이 UI), 개념용어 화면(경제 개념/용어가 포함된 이미지 자료를 통해 학습)

2️⃣ 문제풀이 기능

QuizActivity 파일에서 TextView, RadioButton, 확인 버튼 생성 questionCountTotal 변수에 questionList.size() 메서드를 통해 총 문제 개수 저장 Collections.shuffle(questionList)로 문제 순서를 무작위로 섞어 출제
OnClickListener를 통해 정답을 선택하지 않고 확인 버튼을 누를 경우 Toast 메시지 출력하도록 구현하였습니다.

3️⃣ 문제풀이 데이터베이스(DB) 저장

fillQuestionsTable()을 통해 문제 데이터 컬럼 생성하고 insertQuestion() 메서드로 문제와 정답 데이터를 DB 테이블에 저장
데이터베이스에 정답 칼럼을 지정하여 사용자가 선택한 답안과 비교 가능하도록 처리하였습니다.

4️⃣ 개념 학습 기능

int imgs[] 배열을 통해 학습용 이미지를 저장, onCreate() 메서드에서 버튼과 이미지 뷰를 연결하고
버튼 클릭 이벤트 처리 하여 이전 버튼을 누르면 이미지 인덱스를 감소 → setImageResource()로 해당 이미지 출력
다음 버튼을 누르면 이미지 인덱스를 증가 → ImageView에 새로운 이미지 설정하도록 구현하였습니다.

5️⃣ 사용 기술

Android Studio, JAVA, SQLite, Androd UI 위젯

React를 활용한 CRUD 기본

✨ 프로젝트 개요

React를 활용하여 CRUD기본을 구현하기 위해 TodoList프로젝트를 완성하였습니다.

1️⃣ Header

제목과 {new Date().toDateString()}함수를 사용하여 오늘 날짜를 가져왔습니다.

2️⃣ TodoEditor

TodoEditor는 새로운 Todo를 작성하고 부모 컴포넌트로 전달하는 입력 폼 컴포넌트로 사용자가 입력한 내용을 실시간으로 상태 관리
엔터 키 입력 또는 버튼 클릭으로 Todo 추가 구현, 입력값이 비어있으면 입력창에 포커스 하도록 구현하였습니다.

3️⃣ TodoItem

개별 Todo 항목을 표시하고, 완료 상태 변경과 삭제 기능을 제공하는 컴포넌트입니다.
Todo 완료 여부 체크박스로 표시, 체크박스 클릭 시 완료 상태 토글, 삭제 버튼 클릭 시 해당 Todo 삭제 생성 날짜 표시 하도록 구현하였습니다.

4️⃣ TodoList

TodoList는 Todo 항목들을 리스트 형태로 보여주고, 검색 기능을 제공하는 컴포넌트입니다.
내부적으로 TodoItem 컴포넌트를 사용하여 각 Todo를 렌더링합니다. Todo 항목들을 리스트 형태로 렌더링,
검색어 입력 시 해당 내용이 포함된 Todo만 표시, TodoItem을 통해 완료 상태 변경 및 삭제 기능 제공하도록 하였습니다.

5️⃣ 사용 기술

Front-End : Javascript, React, HTML5, CSS