포트폴리오를 만들기위해

조사를 진행하고

발표를 하기위한 자료를 만들꺼야

1.너가앞으로 진행할 순서를 먼저 정해

2.발표제목을 추천 3개를 해줘

3.핵심키워드를 5개를 정해줘

4.PPT는제목 목차 포함 10장으로 제작해줘

HTML,CSS,Javascript 만 사용해서 초보자도 이해할수 있는

깔끔한 TODOLIST 웹앱을 만들어줘 (목적부여)

아직 코드는 작성하지말고 어떤기능을 만들지

나한테 먼저 물어봐줘(단계별작업)

모든 기록은 구글 스프레드시트에 자동으로 저장및 관리됩니다.

이를 위해 구글 Apps Script로 프론트 엔드와 백엔드 로 구분해서 코드를 작성해 주세요.

앱목적: 로또번호를 랜덤형식으로 알려주는 구조

사용대상: 누구나

사용장소: 모바일용

이 앱을 기획할떄 필요한 내용을 아래 형식으로 정리해줘

1.앱의 이름추천 3개

2.핵심기능 3가지

3.추가하면 좋을기능2가지

4.화면구성( 버튼, 입력창, 결과창 등등...)

5.주의할점 또는 규칙( 예:중복숫자 안됨)

조건에 맞는앱을 제작해줘

- firebase 연동하기

- versel을통한 배포연결하기

- 구글로그인하기 만들기

- Demo 버전이 아닌 실사용 앱으로 설정하기

- 제미나이 API 활용해서 ai 챗봇 설정하기 기능을 포함하고 디자인은 제공한 이미지로 똑같은 UI로 구현해 주세요.

- versel연동방법은 readMe.md 파일로 작성하기 를 포함하여 완벽하게 구현해주세요.

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

① Vercel 항목 찾기

② Configure 클릭

③ Repository access 섹션에서

→ Only select repositories 선택

→ Select repositories 드롭다운

→ petcare-secure 검색 후 선택

④ Save 클릭

VITE_FIREBASE_AUTH_DOMAIN=

VITE_FIREBASE_PROJECT_ID=

VITE_FIREBASE_STORAGE_BUCKET=

VITE_FIREBASE_MESSAGING_SENDER_ID=

VITE_FIREBASE_APP_ID=

날씨앱에 접속하기를 까먹거나, 우산 챙기는 것을 까먹는 사람들을 타켓으로 하는

이 앱을 사용할 만한 대표 유저 페르소나를 [1~2명] 만들어줘.

각 페르소나는 아래 항목을 포함해서 작성해줘:

1. 이름 (가상 인물명)

2. 나이 / 성별 / 직업

3. 라이프스타일 (하루 일과, 관심사)

4. 이 앱을 쓰게 된 계기 (Goal - 이루고 싶은 것)

5. 현재 겪고 있는 불편함 (Pain Point - 기존 방식의 문제점)

6. 앱에 기대하는 것 (이 앱이 어떻게 해결해주길 바라는지)

7. 이 사람이 하루 중 앱을 사용할 것 같은 구체적 순간 (사용 시나리오 한 문장)

말투는 실제 인터뷰 답변처럼 자연스럽게 써줘.

위의 내용을 도표로 정리해서 구글스프레드 시트형식으로 작성해줘

첨부한 이미지 3장은 각각 스플래시, 메인, 습관추가 화면 디자인 시안이야.

이 디자인을 최대한 동일하게 재현해줘.

아래 요구사항에 맞게 먼저 작업계획을 세워줘. 계획 확인 후에 화면별로 순서대로 요청할 거니까,

지금은 코드를 작성하지 말고 계획만 md 파일로 저장해줘.

- 화면 구성 (총 3개, 화면 전환은 페이지 이동 없이 JS로 처리 - SPA 방식)

1. splash.html - 스플래시 (로고 노출 후 자동으로 메인 전환)

2. index.html - 메인 (오늘의 습관 리스트, 진행률 바, 날짜 선택기)

3. add.html - 습관 추가 (입력 폼 → 저장 시 메인 리스트에 반영)

- 디자인 톤 : 그린(#1B7A4C 계열) 포인트 컬러, 미니멀, 카드 기반 UI,

모바일 우선(max-width 480px)

- 파일 구조 : html/css/js 파일 분리해서 저장

- css : common.css(공통 변수, 폰트, 리셋) + 화면별 css 분리

- js : 화면별 js 분리, 공통 로직(데이터 관리)은 별도 파일로 분리

- 데이터 관리 : 습관 목록은 배열(객체) 형태로 관리해줘.

(나중에 리액트로 전환할 예정이라 데이터 구조를 명확하게 잡아줘)

- 작업 순서 :

1) 공통 스타일(변수, 리셋) 먼저 정의

2) 메인 화면(index.html) 우선 작업

3) 스플래시 화면

4) 습관 추가 화면

순서로 단계별 계획을 나눠줘

- 계획서 파일명 : 작업계획_퍼블리싱.md

org 폴더는 퍼블리싱 작업된 html,css,js 파일이 들어있는 디렉토리야.

index.html,commend.html,spash.html 파일이 만들어져 있고

전체소스 분석해서 아래 요구사항에 맞게 작업할 수 있도록 작업계획 작성해줘

작업계획은 md파일로 저장해줘

- 프로젝트 경로 : D:\!김수연\6월개강바이브코딩\project001>(터미널에경로로변경)

- 원본 위치 : org/

- 프레임워크 : react (vite)

- 언어 : typescript

- 라우터 경로 : /

- 컴포넌트 위치 : src/components

- 페이지 위치 : src/pages

- 헤더, 푸터 공통 컴포넌트로 분리

- css : 스타일 컴포넌트

- 작업계획서 파일명 : 작업계획.md

이 저장소 주소는 [여기에 GitHub 저장소 URL 붙여넣기] 야.

지금 이 프로젝트 폴더를 이 저장소와 연동해서 push하고 싶어.

1. 먼저 이 폴더가 이미 git으로 초기화되어 있는지 확인해줘

2. 초기화가 안 되어 있으면 git init 해줘

3. .gitignore 파일이 있는지 확인하고, 없으면

node_modules, .env, dist, build 폴더가 제외되도록 만들어줘

4. 현재 파일들을 전부 add하고 "초기 커밋" 메시지로 커밋해줘

5. 원격 저장소(remote)가 이미 연결되어 있는지 확인하고,

연결이 안 되어 있으면 내가 알려준 저장소 주소로 origin을 연결해줘

6. 브랜치 이름을 main으로 맞춰주고,

원격 저장소에 push해줘 (최초 push라 -u 옵션 필요할 수 있음을 감안해줘)

각 단계마다 뭘 하고 있는지 짧게 설명해주고,

push하기 전에 remote 주소가 맞는지 나한테 확인시켜줘.