Home AboutMe Blog Guest

© 2025 Sejin Cha. All rights reserved.

Built with Next.js, deployed on Vercel

프로그래머스 프론트엔드 데브코스 2기/

프로젝트 기획/

화면기획

화면기획

[1] Main Page

사용자 폴더 리스트

Header(Text)

ImageSlider

Card Component
Prev, Next Button
BookMark Edit Button

다른 사용자의 폴더 리스트

Header(Text)

Button

타입에 따라 정렬된 북마크 리스트 렌더링

More Button

List Page로 이동

안내 페이지

Header, Content

Link Button

이용방법 페이지로 이동

기능명세

번호

기능명

기능 설명

예외처리

사용자 폴더 리스트 - 이미지 슬라이더

사용자의 폴더 리스트를 캐러셀을 이용해서 보여준다.

사용자 폴더 리스트 - 북마크 이미지 카드

북마크 확인하기를 누르면?

사용자 폴더 리스트 - 북마크 편집

북마크 편집을 누르면 유저 페이지로 이동한다.

다른 사용자의 폴더 리스트 - 정렬 버튼

선택된 버튼의 정렬 기준으로 리스트를 렌더링 한다.

다른 사용자의 폴더 리스트 - 카드

북마크 카드를 클릭하면 디테일 페이지로 이동한다.

다른 사용자의 폴더 리스트 - 더보기 버튼

폴더 리스트 페이지로 이동한다.

안내 페이지

활용법 버튼을 클릭하면 이용방법 페이지로 이동한다.

[2] Login & SignUp Modal

Modal

Input

React-Hook-Form을 이용해 validation 체크

로그인 상태 유지 체크 버튼

쿠키 이용해 로그인 상태 유지

Button

일반 로그인
소셜 로그인
회원가입
다음

Selector

관심사 선택

Image Uploader

기능명세

번호

기능명

기능 설명

예외처리

사용자 폴더 리스트 - 이미지 슬라이더

사용자의 폴더 리스트를 캐러셀을 이용해서 보여준다.

[3] Folder List Page

검색어 입력

Input

Icon

HashTag(Box)

폴더 리스트

Text

Card(Grid, infinite scroll)

Image
Avatar
Text
Button

[4] Folder Detail Page

Header

Title

UserInfo(Avatar, Username)

CreatedAt

관심사(HashTag)

Content

Image

Content

BookmarkList

Box
Avatar
Text

Profile

Avatar

Text

Scrap Button

Comments

Textarea

SubmitButton

Comment

More Button

[5] Folder Create/Update

생성/수정 페이지

Input

ImageUploader

Box
ImageUploader
Text

Detail

Textarea

Temp, Submit(Button)

[6] User Page

유저 페이지

Profile

Avatar
Text
EditButton

폴더 리스트

Text
Card(Grid)

Image
Avatar
Text
Button

공통 컴포넌트

NavBar

Logo(image)
Text(Link)
Divider
Button(Login, Sign Up, Logout)

Footer

Text
Icon(or Image)