Skip to content

Commit 2260e1c

Browse files
Lee-Dong-SeokLee-Dong-Seok
committed
Merge branch 'dev' into feat/markup/landing-page/DEVING-78
2 parents a362414 + 30933f8 commit 2260e1c

File tree

19 files changed

+380
-102
lines changed

19 files changed

+380
-102
lines changed

‎README.md‎

Lines changed: 141 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,154 @@
1-
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
1+
![alt text](image.png)
22

3-
## Getting Started
3+
</br>
44

5-
First, run the development server:
5+
# 목차
66

7-
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
15-
```
7+
## 1. [프로젝트 소개](#-프로젝트-소개)
8+
## 2. [팀원 소개](#-팀원-소개)
9+
## 3. [프로젝트 기획](#-프로젝트-기획)
10+
## 4. [기간 및 협업관리](#️-기간-및-협업관리)
11+
## 5. [기술스택](#-기술스택)
12+
## 6. [주요 기능](#-주요-기능)
1613

17-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14+
</br>
1815

19-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
16+
# 📚 프로젝트 소개
2017

21-
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
18+
DEVING은 개발자와 디자이너를 위한 전문 모임 플랫폼입니다. 사이드 프로젝트, 모각코, 스터디, 취미 등 개발자 및 디자이너 직군들이 자주 이용하는 주제로 모임을 생성하고 참여할 수 있습니다. 함께 성장하고 네트워킹할 수 있는 커뮤니티를 제공합니다.
2219

23-
## Learn More
20+
</br>
2421

25-
To learn more about Next.js, take a look at the following resources:
22+
# 🧑‍💻 팀원 소개
2623

27-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
24+
| 강윤지 | 이윤재 | 이한나 | 이동석 |
25+
|:-----:|:-----:|:-----:|:-----:|
26+
| ![강윤지](https://github.com/dbswl701.png) | ![이윤재](https://github.com/clyde-yoonjae.png) | ![이한나](https://github.com/lee1nna.png) | ![이동석](https://github.com/Lee-Dong-Seok.png) |
27+
| [:octocat: GitHub](https://github.com/dbswl701) | [:octocat: GitHub](https://github.com/clyde-yoonjae) | [:octocat: GitHub](https://github.com/lee1nna) | [:octocat: GitHub](https://github.com/Lee-Dong-Seok) |
2928

30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
29+
</br>
3130

32-
## Deploy on Vercel
31+
# 💡 프로젝트 기획
3332

34-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33+
### 기획의도
3534

36-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
35+
코드잇 스프린트 심화 단기과정에서 주어진 '모임 관련 서비스 개발' 과업을 수행하면서, 저희 팀은 개발자와 디자이너 커뮤니티에 주목했습니다. IT 업계에서 소통과 협업의 중요성을 인식하여, 개발자와 디자이너들이 쉽게 만나고 교류할 수 있는 플랫폼을 구축하고자 했습니다.
36+
37+
### 핵심 아이디어
38+
39+
- 기술 스택 필터링: 사용자가 관심 있는 기술 스택을 기반으로 모임을 검색할 수 있습니다.
40+
41+
- 맞춤형 프로필: 개인 프로필에 기술 스택, 경력, 관심사 등을 설정하여 자신을 표현할 수 있습니다.
42+
43+
- 직관적인 UX/UI: 사용자 경험을 최우선으로 고려한 인터페이스 설계로 누구나 쉽게 이용할 수 있습니다.
44+
45+
</br>
46+
47+
# 🖥️ 기간 및 협업관리
48+
49+
</br>
50+
51+
### [ 기간 ]
52+
53+
<table style="font-size: 20px;">
54+
<tr>
55+
<th>구분</th>
56+
<th> 날짜</th>
57+
</tr>
58+
<tr>
59+
<td>기획 기간</td>
60+
<td>2025.01.24 ~ 02.10</td>
61+
</tr>
62+
<tr>
63+
<td>개발 기간</td>
64+
<td>2025.02.11 ~ 03.14</td>
65+
</tr>
66+
</table>
67+
68+
</br>
69+
70+
### [ 협업 관리 ]
71+
72+
![Notion](https://img.shields.io/badge/Notion-000000?style=for-the-badge&logo=notion&logoColor=white)
73+
![Discord](https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)
74+
![Jira](https://img.shields.io/badge/Jira-0052CC?style=for-the-badge&logo=jira&logoColor=white)
75+
![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)
76+
77+
| 협업 도구 | 활용 내용 |
78+
| -------------- | --------------------------------------------------------------------------------------- |
79+
| 📝 **Notion** | • 데일리 스크럼 기록<br>• 트러블슈팅 문서화<br>• 기술 Wiki 구축<br>• 프로젝트 정보 공유 |
80+
| 🎙️ **Discord** | • 실시간 화상 회의<br>• 팀 커뮤니케이션 |
81+
| 📊 **Jira** | • 브랜치 관리<br>• 스프린트 계획 및 추적<br>• 작업 할당 및 진행상황 모니터링 |
82+
| 📌 **GitHub** | • 코드 버전 관리<br>• PR 및 코드 리뷰<br>• 이슈 트래킹 |
83+
84+
</br>
85+
86+
# 🔧 기술스택
87+
88+
![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)
89+
![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black)
90+
![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)
91+
![TanStack Query](https://img.shields.io/badge/TanStack_Query-FF4154?style=for-the-badge&logo=reactquery&logoColor=white)
92+
![Zustand](https://img.shields.io/badge/Zustand-624DE3?style=for-the-badge&logo=react&logoColor=white)
93+
![shadcn/ui](https://img.shields.io/badge/shadcn/ui-000000?style=for-the-badge&logo=shadcnui&logoColor=white)
94+
![MUI](https://img.shields.io/badge/MUI-007FFF?style=for-the-badge&logo=mui&logoColor=white)
95+
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)
96+
97+
98+
### <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" width="20" height="20"/> Next.js (App Router)
99+
100+
Next.js의 App Router를 활용하여 서버 컴포넌트 기반의 아키텍처를 구현했습니다. 이를 통해 다음과 같은 이점을 얻을 수 있었습니다:
101+
102+
- **서버 사이드 렌더링(SSR)**: 초기 로딩 속도 향상 및 SEO 최적화
103+
- **서버 컴포넌트**: 클라이언트에 JavaScript 번들을 전송하지 않고 서버에서 렌더링하여 성능 개선
104+
- **데이터 프리페칭**: 페이지 렌더링 전에 필요한 데이터를 미리 로드하여 사용자 경험 개선
105+
- **서버 상태 기반 인증**: 보안성이 향상된 사용자 인증 시스템 구현
106+
107+
108+
### <img src="https://cdn.jsdelivr.net/gh/TanStack/query/media/emblem-light.svg" width="20" height="20"/> TanStack Query
109+
110+
서버 상태 관리를 위해 TanStack Query(React Query)를 사용했습니다:
111+
- **효율적인 데이터 페칭**: 자동 캐싱, 백그라운드 업데이트, 재시도 로직 구현
112+
- **서버 상태와 클라이언트 상태 분리**: 상태 관리 로직 단순화
113+
- **데이터 동기화**: 최신 데이터를 항상 유지하면서도 불필요한 네트워크 요청 최소화
114+
- **쿼리키 팩토리패턴**: 프로젝트 내 전략적인 쿼리키 관리
115+
- **무한 스크롤**: 대용량 데이터 효율적 처리
116+
117+
118+
### <img src="https://ui.shadcn.com/favicon.ico" width="20" height="20"/> shadcn/ui & <img src="https://mui.com/favicon.ico" width="20" height="20"/> MUI
119+
120+
디자인 시안 확정 전 신속한 개발 환경 구축을 위해 두 UI 라이브러리를 전략적으로 활용했습니다:
121+
- **프로토타이핑 가속화**: 고품질 컴포넌트로 빠른 MVP 개발
122+
- **일관된 디자인 시스템**: 프로젝트 초기 단계에서 디자인 일관성 유지
123+
- **사용자 경험 향상**: 검증된 UI 패턴 적용으로 직관적인 인터페이스 구현
124+
- **개발 효율성**: 컴포넌트 재사용으로 개발 시간 단축
125+
126+
</br>
127+
128+
# ✨ 주요 기능
129+
130+
131+
| 모임 찾기 | 모임 상세보기 |
132+
|:---:|:---:|
133+
| 여러가지 필터를 통해 모임을 쉽고 빠르게 찾을 수 있습니다. | 모임에 대한 상세 정보를 한눈에 확인할 수 있습니다. |
134+
| <img src="./src/assets/readme-img/list.png" alt="모임 찾기" width="450"> | <img src="./src/assets/readme-img/detail.png" alt="모임 상세보기" width="450"> |
135+
136+
| 모임 신청 | 모임 관리 및 멤버관리 |
137+
|:---:|:---:|
138+
| 간편한 절차를 통해 모임에 참여 신청을 할 수 있습니다. | 주최모임과 참여자들을 관리 및 상태를 변경 할 수 있습니다. |
139+
| <img src="./src/assets/readme-img/join.png" alt="모임 신청" width="450"> | <img src="./src/assets/readme-img/member.png" alt="모임 관리" width="450"> |
140+
141+
| 내 정보 수정 | |
142+
|:---:|:---:|
143+
| 프로필 정보를 간편하게 수정할 수 있습니다. | |
144+
| <img src="./src/assets/readme-img/mypage.png" alt="내정보" width="450"> | |
145+
</br>
146+
147+
148+
## 🎈 프로젝트 산출물
149+
150+
| 문서 종류 | 링크 |
151+
|:---|:---|
152+
| 📝 **와이어 프레임** | [DEVING - 와이어 프레임](https://www.figma.com/files/team/1239829768059524989/recents-and-sharing?fuid=1239829763104263861) |
153+
| 🎨 **디자인 시안** | [DEVING - 디자인 시안](https://www.figma.com/design/whAR7r8MPfWo9Cl93zhKlL/DEVING-%EC%8B%9C%EC%95%88?node-id=0-1&p=f&t=hQ9Sr369FbrTyGqY-0) |
154+
| 📘 **API 문서** | [DEVING - 스웨거](https://deving.shop/swagger-ui/index.html#/auth-controller) |

‎image.png‎

48.3 KB
Loading

‎src/app/(user-page)/mypage/MyPageClient.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
import { useQueryClient } from '@tanstack/react-query';
88
import { useRouter, useSearchParams } from 'next/navigation';
99
import { useCallback, useEffect, useRef, useState } from 'react';
10-
import { getProfile } from 'service/api/mypageProfile';
1110

1211
import { TAB_TYPES } from '../../../constants/mypage/mypageConstant';
1312
// 컴포넌트 임포트

‎src/app/(user-page)/mypage/_features/BasicEdit.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,10 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
158158
<div className="flex flex-col gap-[16px] md:gap-[32px]">
159159
{/* 이름 입력 필드 */}
160160
<div className="flex flex-col gap-[8px]">
161-
<label htmlFor="name-input" className="typo-head3 text-main">
161+
<label
162+
htmlFor="name-input"
163+
className="typo-head3 text-[20px] text-main"
164+
>
162165
사용자 이름
163166
</label>
164167
<input
@@ -203,7 +206,10 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
203206
{/* 자기소개 텍스트 영역 */}
204207
<div className="flex flex-col gap-2">
205208
<div className="flex items-center justify-between">
206-
<label htmlFor="intro-input" className="typo-head3 text-main">
209+
<label
210+
htmlFor="intro-input"
211+
className="typo-head3 text-[20px] text-main"
212+
>
207213
자기소개
208214
</label>
209215
</div>
@@ -230,7 +236,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
230236

231237
{/* 포지션 버튼 */}
232238
<div className="flex flex-col gap-[16px] border-b border-Cgray300 pb-[16px] md:pb-[32px]">
233-
<div className="typo-head3 text-main">포지션</div>
239+
<div className="typo-head3 text-[20px] text-main">포지션</div>
234240
<div className="flex w-full flex-wrap gap-2">
235241
<div className="rounded-4 typo-head3 flex w-full gap-[12px]">
236242
{POSITION_OPTIONS.map((option) => (
@@ -262,7 +268,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
262268

263269
{/* 성별 토글 버튼 */}
264270
<div className="flex flex-col gap-[16px] border-b border-Cgray300 pb-[16px] md:pb-[32px]">
265-
<div className="typo-head3 text-main">성별</div>
271+
<div className="typo-head3 text-[20px] text-main">성별</div>
266272
<div className="typo-head3 flex w-full gap-[16px] rounded-md">
267273
{GENDER_OPTIONS.map((option) => (
268274
<button
@@ -292,7 +298,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
292298

293299
{/* 연령대 드롭다운 */}
294300
<div className="flex flex-col gap-[16px] border-b border-Cgray300 pb-[16px] md:pb-[32px]">
295-
<div className="typo-head3 text-main">연령대</div>
301+
<div className="typo-head3 text-[20px] text-main">연령대</div>
296302
<Controller
297303
name="age"
298304
control={control}
@@ -312,7 +318,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
312318

313319
{/* 지역 드롭다운 */}
314320
<div className="flex flex-col gap-[16px] border-b border-Cgray300 pb-[16px] md:pb-[32px]">
315-
<div className="typo-head3 text-main">지역</div>
321+
<div className="typo-head3 text-[20px] text-main">지역</div>
316322
<Controller
317323
name="location"
318324
control={control}
@@ -335,14 +341,14 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
335341
<Button
336342
type="button"
337343
variant="outline"
338-
className="h-[40px] w-[140px] md:h-[46px]"
344+
className="h-[40px] w-[80px] md:h-[46px] md:w-[180px]"
339345
onClick={handleCancel}
340346
>
341347
취소
342348
</Button>
343349
<Button
344350
type="submit"
345-
className="h-[40px] w-[140px] select-none md:h-[46px]"
351+
className="h-[40px] w-[130px] select-none md:h-[46px] md:w-[200px]"
346352
disabled={
347353
isSubmitting || isUpdating || introLength > MAX_INTRO_LENGTH
348354
}

‎src/app/(user-page)/mypage/_features/BasicInfo.tsx‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,78 +36,96 @@ const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
3636
}
3737

3838
return (
39-
<div className="w-full rounded-[16px] border border-Cgray300 p-[16px] md:p-[32px]">
40-
<div className="flex flex-col gap-[32px]">
39+
<div className="w-full rounded-[16px] border border-Cgray300 p-[24px] md:p-[32px]">
40+
<div className="flex flex-col gap-[24px] md:gap-[32px]">
4141
<div className="flex flex-col gap-[8px]">
42-
<label htmlFor="name-input" className="typo-head3 text-Cgray700">
42+
<label
43+
htmlFor="name-input"
44+
className="typo-head3 text-[20px] text-white"
45+
>
4346
이름
4447
</label>
4548
<input
4649
id="name-input"
4750
type="text"
4851
value={userData.name}
4952
readOnly
50-
className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
53+
className="typo-button1 h-[50px] cursor-default rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
5154
/>
5255
</div>
5356
<div className="flex flex-col gap-[8px]">
54-
<label htmlFor="intro-input" className="typo-head3 text-Cgray700">
57+
<label
58+
htmlFor="intro-input"
59+
className="typo-head3 text-[20px] text-white"
60+
>
5561
소개글
5662
</label>
5763
<textarea
5864
id="intro-input"
5965
rows={3}
6066
value={userData.intro}
6167
readOnly
62-
className="h-[140px] resize-none rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
68+
className="h-[140px] cursor-default resize-none rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
6369
/>
6470
</div>
6571
<div className="flex flex-col gap-[8px]">
66-
<label htmlFor="position-input" className="typo-head3 text-Cgray700">
72+
<label
73+
htmlFor="position-input"
74+
className="typo-head3 text-[20px] text-white"
75+
>
6776
포지션
6877
</label>
6978
<input
7079
id="position-input"
7180
type="text"
7281
value={userData.position}
7382
readOnly
74-
className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
83+
className="typo-button1 h-[50px] cursor-default rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
7584
/>
7685
</div>
7786
<div className="flex flex-col gap-[8px]">
78-
<label htmlFor="gender-input" className="typo-head3 text-Cgray700">
87+
<label
88+
htmlFor="gender-input"
89+
className="typo-head3 text-[20px] text-white"
90+
>
7991
성별
8092
</label>
8193
<input
8294
id="gender-input"
8395
type="text"
8496
value={userData.gender}
8597
readOnly
86-
className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
98+
className="typo-button1 h-[50px] cursor-default rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
8799
/>
88100
</div>
89101
<div className="flex flex-col gap-[8px]">
90-
<label htmlFor="age-input" className="typo-head3 text-Cgray700">
102+
<label
103+
htmlFor="age-input"
104+
className="typo-head3 text-[20px] text-white"
105+
>
91106
연령대
92107
</label>
93108
<input
94109
id="age-input"
95110
type="text"
96111
value={userData.age}
97112
readOnly
98-
className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
113+
className="typo-button1 h-[50px] cursor-default rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
99114
/>
100115
</div>
101116
<div className="flex flex-col gap-[8px]">
102-
<label htmlFor="area-input" className="typo-head3 text-Cgray700">
117+
<label
118+
htmlFor="area-input"
119+
className="typo-head3 text-[20px] text-white"
120+
>
103121
지역
104122
</label>
105123
<input
106124
id="area-input"
107125
type="text"
108126
value={userData.location}
109127
readOnly
110-
className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
128+
className="typo-button1 h-[50px] cursor-default rounded-[8px] border-b border-Cgray300 bg-transparent py-2 pl-[16px] text-Cgray700 focus:outline-none"
111129
/>
112130
</div>
113131
<div className="flex justify-center md:justify-start">

0 commit comments

Comments
 (0)