- -### 4.5. 링크 Link +├── build/ # webpack 설정 파일 +├── config/ # 프로젝트 설정 파일 +├── deplay/ # 배포 설정 파일 +├── src/ # 소스 코드 +│ ├── assets/ # 이미지, 폰트 등의 정적 파일 +│ ├── pages/ # 화면에 나타나는 페이지 +│ │ ├── page1/ # 페이지1 +│ │ ├── page2/ # 페이지2 +│ │ ├── components/ # 여러 페이지에서 공통적으로 사용되는 컴포넌트 +│ ├── router/ # 라우터 +│ ├── store/ # global state store +│ ├── styles/ # 스타일 +│ ├── utils/ # 유틸리티 +├── static/ # 정적 파일 ``` -[Title](link) -[부산대 소프트웨어융합교육원](https://swedu.pusan.ac.kr/swedu/index.do) - - -
-
-### 4.6. 강조 Highlighting -``` -*single asterisks* -_single underscores_ -**double asterisks** -__double underscores__ -~~cancelline~~ -``` -*single asterisks*
-_single underscores_
-**double asterisks**
-__double underscores__
-~~cancelline~~
-
- -### 4.7. 이미지 Image -``` -
-
+### 4. 설치 및 사용 방법
+**필요 패키지**
+- 위의 사용 기술 참고
+
+```bash
+$ git clone https://github.com/test/test.git
+$ cd test/frontend
+$ npm i
+$ export NODE_ENV="development" # windows: set NODE_ENV=development
+$ npm run build:dll
+$ export TARGET="http://localhost:8000" # windows: set NODE_ENV=http://localhost:8000
+$ npm run dev
```
-- -
- - - - - - - - - +### 5. 소개 및 시연영상 +[
+### 6. 팀 소개 +| 김가연 | 김유진 | 최현진 | 신수민 | +|:-------:|:-------:|:-------:|:-------:| +|
백앤드 개발 | DB 설계
백앤드 개발 | DB 설계
백앤드 개발 | +
+### 7. 해커톤 참여 후기 +- 김가연 + > 작성하세요. +- 김유진 + > 작성하세요. +- 최현진 + > 작성하세요. +- 신수민 + > 작성하세요. +
diff --git a/SAMPLE_README1.md b/SAMPLE_README1.md deleted file mode 100644 index 59b11980..00000000 --- a/SAMPLE_README1.md +++ /dev/null @@ -1,177 +0,0 @@ -### 1. 프로젝트 소개 -#### 1.1. 개발배경 및 필요성 -이 프로젝트는 창의융합 해커톤에 참여하는 사람들에게 README 작성의 가이드라인을 제공하기 위해 제작되었습니다. -
- -#### 1.2. 개발목표 및 주요내용 -창의융합 해커톤을 참여하는 사람들의 README 작성방법 이해을 돕는 것입니다. -
- -#### 1.3. 세부내용 -가이드라인은 README에 들어가야 할 목차와 대략적인 내용을 설명합니다. -
- -#### 1.4. 기존 서비스(상품) 대비 차별성 -> 작성하세요. -
- -#### 1.5. 사회적가지 도입 계획 -> 작성하세요. -
- - -### 2.상세설계 -#### 2.1. 시스템 구성도 -
- -#### 2.3. 사용기술 -| 이름 | 버전 | -|:---------------------:|:-------:| -| Python | 3.8.0 | -| Django | 3.2.9 | -| Django Rest Framework | 3.12.0 | -| Node.js | 16.16.0 | -| Vue.js | 2.5.13 | -
- - -### 3. 개발결과 -[코딩역량강화플랫폼 Online Judge](http://10.125.121.115:8080/)를 예시로 작성하였습니다. -#### 3.1. 전체시스템 흐름도 -- 유저 플로우 차트 - > 코딩 역량강화 플랫폼의 회원가입 부분만 작성했습니다.
- > 사용자의 행동 흐름을 도식화하여 보여줍니다. -
- > 주요 테스크의 프로세스를 도식화하여 보여줍니다. -
- > 테스크의 흐름에 따른 데이터 처리를 도식화하여 보여줍니다. -
-
- -#### 3.2. 기능설명 -##### ` 메인 페이지 ` -- 상단 배너 - - 3초에 마다 자동으로 내용이 넘어갑니다.
-  - -- 공지사항 - - 최근 5개의 공지사항을 보여줍니다. - - 발행된지 일주일이 안 된 공지사항은 new라는 mark표시를 해줍니다. - - 공지사항 글을 클릭하면 해당 공지사항 게시글로 이동합니다. - - 상단의 더보기 버튼을 클릭하면 공지사항 페이지로 이동합니다.
-
-
-
- -##### ` 문제 페이지 ` -- 문제 목록 - - 사용자가 설정한 한 번에 보여줄 문제 갯수 만큼 한 화면에 문제를 띄워줍니다. - - 검색창에서 문제의 제목 및 번호로 문제를 검색할 수 있습니다. - - 난이도, 영역, 카테고리 별로 문제를 볼 수 있습니다. - - 상단의 shuffle 이모지를 클릭하면 랜덤으로 선택된 문제 푸는 페이지로 이동합니다. - - 목록에서 문제를 클릭하면 해당 문제를 푸는 페이지로 이동합니다. -  -
- - -#### 3.3. 기능명세서 -
- 중복되는 이메일인지 검증 | -| S2 | 부산대학교 웹메일 인증 코드 전송| - 클릭 시 인증 코드 메일로 전송 | -| S3 | 메일 인증 코드 | - 인증 요청 버튼 클릭 후 활성화
- 유효시간 5분| -| S4 | 메일 인증 코드 확인 | - 인증코드 검증 | -| S5 | 닉네임 | - 4 ~ 12자 영어, 숫자, '_' 가능 | -| S6 | 단과대학 선택 | -부산대학교 단과대학 리스트 보여주기 | -| S7 | 학과 선택 | - 단과대학 안의 학과 리스트 보여주기 | -| S8 | 비밀번호 | - 입력 시 텍스트 보이지 않도록 •로 표현해주기
- 6자 이상 20자 이하, 영어와 숫자 조합 필수 | -| S9 | 비밀번호 확인 | - 입력 시 텍스트 보이지 않도록 •로 표현해주기
- 비밀번호와 동일한 지 검증 | -| S10 | 회원가입 완료 | - 비어 있는 입력 칸이 없는지 검증
-메일 인증 완료했는지 확인
-조건을 만족하면 회원가입 성공| -| S11 | 로그인 | - 클릭 시 로그인 모달로 전환 | - -
- -#### 3.4. 디렉토리 구조 -``` -├── build/ # webpack 설정 파일 -├── config/ # 프로젝트 설정 파일 -├── deplay/ # 배포 설정 파일 -├── src/ # 소스 코드 -│ ├── assets/ # 이미지, 폰트 등의 정적 파일 -│ ├── pages/ # 화면에 나타나는 페이지 -│ │ ├── page1/ # 페이지1 -│ │ ├── page2/ # 페이지2 -│ │ ├── components/ # 여러 페이지에서 공통적으로 사용되는 컴포넌트 -│ ├── router/ # 라우터 -│ ├── store/ # global state store -│ ├── styles/ # 스타일 -│ ├── utils/ # 유틸리티 -├── static/ # 정적 파일 -``` -
- - -### 4. 설치 및 사용 방법 -**필요 패키지** -- 위의 사용 기술 참고 - -```bash -$ git clone https://github.com/test/test.git -$ cd test/frontend -$ npm i -$ export NODE_ENV="development" # windows: set NODE_ENV=development -$ npm run build:dll -$ export TARGET="http://localhost:8000" # windows: set NODE_ENV=http://localhost:8000 -$ npm run dev -``` -
- - -### 5. 소개 및 시연영상 -[
- -### 6. 팀 소개 -| MEMBER1 | MEMBER2 | MEMBER3 | -|:-------:|:-------:|:-------:| -|
백앤드 개발 | DB 설계
백앤드 개발 | - - -
- - -### 7. 해커톤 참여 후기 -- MEMBER1 - > 작성하세요. -- MEMBER2 - > 작성하세요. -- MEMBER3 - > 작성하세요. -
diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 00000000..cee1e2c7 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,29 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import { defineConfig, globalIgnores } from 'eslint/config' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{js,jsx}'], + extends: [ + js.configs.recommended, + reactHooks.configs['recommended-latest'], + reactRefresh.configs.vite, + ], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + parserOptions: { + ecmaVersion: 'latest', + ecmaFeatures: { jsx: true }, + sourceType: 'module', + }, + }, + rules: { + 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], + }, + }, +]) diff --git a/free-icon-location-11081170.png b/free-icon-location-11081170.png new file mode 100644 index 00000000..a73c6f52 Binary files /dev/null and b/free-icon-location-11081170.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..0c589ecc --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + +
+
+
+ )
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/Nav.css b/src/components/Nav.css
new file mode 100644
index 00000000..dcc198fc
--- /dev/null
+++ b/src/components/Nav.css
@@ -0,0 +1,8 @@
+.nav_div{
+ display: flex;
+ justify-content: space-between;
+}
+
+.material-symbols-outlined{
+ color: #E57373;
+}
diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
new file mode 100644
index 00000000..9b6a907b
--- /dev/null
+++ b/src/components/Nav.jsx
@@ -0,0 +1,33 @@
+import './Nav.css'
+
+function Nav(){
+
+ return(
+
+ )
+}
+
+export default Nav;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 00000000..6d5fcf28
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,24 @@
+:root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..b6c6e938
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,12 @@
+// index.js
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css'; // 전역 스타일이 있으면 추가
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+ NaviDate
+ notifications +
+
+ )
+}
+
+export default Login;
\ No newline at end of file
diff --git a/src/pages/Signup/Signup1.css b/src/pages/Signup/Signup1.css
new file mode 100644
index 00000000..e65760a0
--- /dev/null
+++ b/src/pages/Signup/Signup1.css
@@ -0,0 +1,54 @@
+/* App.css */
+html, body {
+ margin: 0;
+ padding: 0;
+ background-color: #FFF6F6;
+ height: 100%;
+}
+
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+ background-color: #FEEFEF;
+ height: 100vh;
+
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 3rem;
+}
+
+h2 {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+}
+
+.button-group {
+ display: flex;
+ gap: 0.75rem;
+ margin-bottom: 0.75rem;
+}
+
+.gender-button {
+ width: 177px;
+ height: 45px;
+ background-color: #F9CACA;
+ border: none;
+ border-radius: 12px;
+ font-size: 1rem;
+ font-weight: 400;
+ color: #000;
+ cursor: pointer;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+ transition: background-color 0.2s;
+}
+
+
+.gender_button:hover {
+ background-color: #eabbbb;
+}
\ No newline at end of file
diff --git a/src/pages/Signup/Signup1.jsx b/src/pages/Signup/Signup1.jsx
new file mode 100644
index 00000000..90354c7e
--- /dev/null
+++ b/src/pages/Signup/Signup1.jsx
@@ -0,0 +1,22 @@
+import './Signup1.css';
+import { useNavigate } from 'react-router-dom';
+
+function Signup1() {
+ const navigate = useNavigate();
+
+ const handleGenderClick = (gender) => {
+ navigate('/signup2', { state: { gender } });
+ };
+
+ return (
+
+ 
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Signup1;
diff --git a/src/pages/Signup/Signup2.css b/src/pages/Signup/Signup2.css
new file mode 100644
index 00000000..de29ab91
--- /dev/null
+++ b/src/pages/Signup/Signup2.css
@@ -0,0 +1,68 @@
+/* App.css */
+html, body {
+ margin: 0;
+ padding: 0;
+ background-color: #FFF6F6;
+ height: 100%;
+}
+
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+ background-color: #FEEFEF;
+ height: 100vh;
+
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 3rem;
+}
+
+h2 {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+}
+
+/* 성별 표시 박스 */
+.selected-gender {
+ background-color: #F9AAAA;
+ width: 170px;
+ height: 32px;
+ line-height: 32px;
+ border-radius: 16px;
+ font-size: 0.9rem;
+ font-weight: 600;
+ margin-bottom: 1.8rem;
+}
+
+/* 버튼 묶음 (2개씩) */
+.button-group {
+ display: flex;
+ gap: 0.75rem;
+ margin-bottom: 0.75rem;
+}
+
+/* 나이 버튼 스타일 */
+.age-button {
+ width: 177px;
+ height: 45px;
+ background-color: #F9CACA;
+ border: none;
+ border-radius: 12px;
+ font-size: 1rem;
+ font-weight: 400;
+ color: #000;
+ cursor: pointer;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+ transition: background-color 0.2s;
+}
+
+/* 호버 효과 */
+.age-button:hover {
+ background-color: #f3b6b6;
+}
\ No newline at end of file
diff --git a/src/pages/Signup/Signup2.jsx b/src/pages/Signup/Signup2.jsx
new file mode 100644
index 00000000..394d82f7
--- /dev/null
+++ b/src/pages/Signup/Signup2.jsx
@@ -0,0 +1,35 @@
+import './Signup2.css'
+import { useNavigate, useLocation } from 'react-router-dom';
+
+function Signup2() {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const gender = location.state?.gender;
+
+ const handleAgeClick = (age) => {
+ navigate('/signup3', { state: { gender, age } });
+ };
+
+ return (
+ 해당하는 항목을 선택해 주세요.
+
+
+
+
+
+
+ );
+}
+
+export default Signup2;
+
diff --git a/src/pages/Signup/Signup3.css b/src/pages/Signup/Signup3.css
new file mode 100644
index 00000000..4fd933e1
--- /dev/null
+++ b/src/pages/Signup/Signup3.css
@@ -0,0 +1,100 @@
+/* App.css */
+html, body {
+ margin: 0;
+ padding: 0;
+ background-color: #FFF6F6;
+ height: 100%;
+}
+
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+ background-color: #FEEFEF;
+ height: 100vh;
+
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 3rem;
+}
+
+h2 {
+ font-size: 1.2rem;
+ margin-bottom: 0.3rem;
+}
+
+.sub-text {
+ margin-top: 0;
+ font-size: 0.8rem;
+ font-weight: 500;
+ margin-bottom: 1.2rem;
+}
+
+.selected-info-group {
+ display: flex;
+ gap: 0.8rem;
+ margin-bottom: 1.5rem;
+}
+
+.selected-info {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #F9AAAA;
+ width: 177px;
+ height: 32px;
+ border-radius: 16px;
+ font-size: 0.9rem;
+ font-weight: 600;
+}
+
+.type {
+ display: grid;
+ grid-template-columns: repeat(3,1fr);
+ gap: 0.8rem;
+ margin-bottom: 2rem;
+}
+
+.type-button {
+ width: 115px;
+ height: 45px;
+ background-color: #F9CACA;
+ border: none;
+ border-radius: 12px;
+ font-size: 1rem;
+ font-weight: 400;
+ color: #000;
+ cursor: pointer;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+ transition: background-color 0.2s;
+}
+
+
+.type-button:hover {
+ background-color: #eabbbb;
+}
+
+.type-button.selected {
+ background-color: #f99a9a;
+ color: white;
+ font-weight: 500;
+}
+.submit-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #F9AAAA;
+ width: 177px;
+ height: 32px;
+ border: none;
+ border-radius: 16px;
+ padding: 0.45rem 2rem;
+ font-size: 0.9rem;
+ cursor: pointer;
+ font-weight: 600;
+}
\ No newline at end of file
diff --git a/src/pages/Signup/Signup3.jsx b/src/pages/Signup/Signup3.jsx
new file mode 100644
index 00000000..8e9a0d2a
--- /dev/null
+++ b/src/pages/Signup/Signup3.jsx
@@ -0,0 +1,64 @@
+import './Signup3.css'
+import { useLocation } from 'react-router-dom';
+import { useState } from 'react';
+
+function Signup3() {
+ const location = useLocation();
+ const gender = location.state?.gender || '성별 미선택';
+ const age = location.state?.age || '나이대 미선택';
+
+ const userTypeList = [
+ '감성적인','차분한','활발한','독립적인','내향적인','액티비티한','판타지',
+ '힐링','모험적인','계획적인','즉흥적인','음악','독서','게임',
+ '요리','영화','만화','수영','빈티지','자연친화','트렌디'
+ ];
+
+ const [selectedTypes, setSelectedTypes] = useState([]);
+
+ const toggleType = (label) => {
+ setSelectedTypes(prev =>
+ prev.includes(label) ? prev.filter(l => l !== label) : [...prev, label]
+ );
+ };
+
+ const isSelected = (label) => selectedTypes.includes(label);
+
+ const handleSubmit = () => {
+ if (selectedTypes.length >= 3) {
+ alert(`성별: ${gender}, 나이대: ${age}, 취향: ${selectedTypes.join(', ')}`);
+ // 여기서 서버 전송 또는 다음 페이지 이동 가능
+ } else {
+ alert("취향을 3개 이상 선택해 주세요!");
+ }
+ };
+
+ return (
+ 해당하는 항목을 선택해 주세요.
+{gender}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Signup3;
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000..8b0f57b9
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})
해당하는 항목을 선택해 주세요.
+3개 이상
+ +
+
+
+ {gender}
+ {age}
+
+ {userTypeList.map((label, index) => (
+
+ ))}
+
+
+
+