From a0247b552472148737d16263e7b476e86b085540 Mon Sep 17 00:00:00 2001 From: SeungWoo Date: Mon, 27 May 2024 19:51:02 +0900 Subject: [PATCH 01/12] ADD :: Profile Page --- .prettierrc.json | 8 +- src/app/profile/page.tsx | 155 ++++++++++++++++++++++++++++++ src/components/ApplicationBox.tsx | 108 ++++++++++++--------- src/components/Header.tsx | 23 +++-- src/components/TipBox.tsx | 65 +++++++------ 5 files changed, 272 insertions(+), 87 deletions(-) create mode 100644 src/app/profile/page.tsx diff --git a/.prettierrc.json b/.prettierrc.json index 99fcc78..ea15e31 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -3,5 +3,11 @@ "singleQuote": true, "trailingComma": "all", "useTabs": false, - "tabWidth": 2 + "tabWidth": 2, + "bracketSpacing": true, + "jsxSingleQuote": false, + "printWidth": 80, + "proseWrap": "preserve", + "quoteProps": "as-needed", + "endOfLine": "lf" } diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx new file mode 100644 index 0000000..b3d4af6 --- /dev/null +++ b/src/app/profile/page.tsx @@ -0,0 +1,155 @@ +import { Arrow, Bag, DecorationImg_1, GradientImg, User } from '@/assets' +import { ApplicationBox, Button, TipBox } from '@/components' +import { ApplicationPreviewType } from '@/types' +import Image from 'next/image' +import Link from 'next/link' + +const applicationData: ApplicationPreviewType[] = [ + { + post_id: 0, + post_title: '개인적으로 완벽한 포트폴리오', + post_post_type: 'Portfolio', + user_oauth_id: '이강혁', + post_major: 'Backend', + post_created_at: '2024-05-16 01:00:01+00', + }, + { + post_id: 1, + post_title: '완벽에 가까운 포트폴리오', + post_post_type: 'Portfolio', + user_oauth_id: '이강혁', + post_major: 'Backend', + post_created_at: '2024-05-16 01:00:01+00', + }, + { + post_id: 2, + post_title: '자기소개의 완벽한 예', + post_post_type: 'PersonalStatement', + user_oauth_id: '강진현', + post_major: 'Frontend', + post_created_at: '2024-05-16 01:00:01+00', + }, + { + post_id: 3, + post_title: '자기소개의 완벽한 예', + post_post_type: 'PersonalStatement', + user_oauth_id: '강진현', + post_major: 'Frontend', + post_created_at: '2024-05-16 01:00:01+00', + }, +] + +const tipData = [ + { + title: '지원서 작성 팁 3가지', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim', + name: '이강혁', + date: '2024-05-16 01:00:01+00', + }, + { + title: '지원서 작성 팁 3가지', + content: 'eiusmod tembna aliqua. Ut enim', + name: '이강혁', + date: '2024-05-16 01:00:01+00', + }, + { + title: '지원서 작성 팁 3가지', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim', + name: '이강혁', + date: '2024-05-16 01:00:01+00', + }, +] + +export default function ProfilePage() { + return ( +
+
+ Profile Banner + User Profile +
+
+
+

마이클

+

팔로잉 24 | 팔로워 40

+
+
+ + +
+
+
기본 정보
+
+
+
+ +
+
+

기수

+

8기

+
+
+
+
+ +
+
+

전공

+

Frontend

+
+
+
+
+
+
+
+
공유한 지원서 자료
+ +

더보기

+ + +
+
+ {applicationData.map((value, index) => ( + + ))} +
+
+
+
+
+
공유한 지원서 팁
+ +

더보기

+ + +
+
+ {tipData.map((value, index) => ( + + ))} +
+
+
+
+ ) +} diff --git a/src/components/ApplicationBox.tsx b/src/components/ApplicationBox.tsx index c74b1c1..a69e35b 100644 --- a/src/components/ApplicationBox.tsx +++ b/src/components/ApplicationBox.tsx @@ -1,28 +1,28 @@ 'use client' -import { ApplicationFileType, ApplicationPreviewType } from "@/types" -import { dateToString } from "@/utils" -import { useRouter } from "next/navigation" +import { ApplicationFileType, ApplicationPreviewType } from '@/types' +import { dateToString } from '@/utils' +import Link from 'next/link' interface ApplicationBoxProps { - tag: keyof typeof tagColor - title: string - name: string - date: string - mainMajor?: string - subMajor?: string + tag: keyof typeof tagColor + title: string + name: string + date: string + mainMajor?: string + subMajor?: string } const tagToKorean: Record = { - Portfolio: '포트폴리오', - PersonalStatement: '자기소개서', - Resume: '이력서', + Portfolio: '포트폴리오', + PersonalStatement: '자기소개서', + Resume: '이력서', } const tagColor: Record = { - Portfolio: 'bg-attentionBackground text-attention', - PersonalStatement: 'bg-coutionBackground text-coution', - Resume: 'bg-gray100 text-gray500', + Portfolio: 'bg-attentionBackground text-attention', + PersonalStatement: 'bg-coutionBackground text-coution', + Resume: 'bg-gray100 text-gray500', } /** @@ -35,38 +35,50 @@ const tagColor: Record = { ``` */ -export const ApplicationBox = ({ post_id, post_title, post_post_type, user_oauth_id, post_major, post_created_at }: ApplicationPreviewType) => { - const router = useRouter() - - return ( -
router.push(`/application/${post_id}`)} className="flex flex-col w-full p-8 gap-3 border border-gray100 bg-white rounded-3xl cursor-pointer"> -
{tagToKorean[post_post_type]}
-
- {post_title} -
-
- {user_oauth_id} -
- {dateToString(post_created_at)} -
- { - post_post_type !== 'Resume' && - {post_major} - } - {/* {tag !== '이력서' && ( -
- {mainMajor} - { - subMajor && - <> - | - {subMajor} - - } -
- )} */} -
+export const ApplicationBox = ({ + post_id, + post_title, + post_post_type, + user_oauth_id, + post_major, + post_created_at, +}: ApplicationPreviewType) => { + return ( + +
+ {tagToKorean[post_post_type]} +
+
+ + {post_title} + +
+
+ {user_oauth_id} +
+ {dateToString(post_created_at)} +
+ {post_post_type !== 'Resume' && ( + {post_major} + )} + {/* {tag !== '이력서' && ( +
+ {mainMajor} + {subMajor && ( + <> + | + {subMajor} + + )}
-
- ) + )} */} +
+
+ + ) } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 331d015..847975e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -81,16 +81,23 @@ export const Header = () => { {hasToken ? (
- - 유저 프로필 이미지 + + 유저 프로필 이미지 +
) : ( +
+

공유한 지원서 자료

+

8개 내 지원서 자료

+
+
+
+ {applicationData.map((value, index) => ( + + ))} +
+ + + ) +} diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx index 569c8c0..690cfd1 100644 --- a/src/app/profile/page.tsx +++ b/src/app/profile/page.tsx @@ -4,7 +4,7 @@ import { ApplicationPreviewType } from '@/types' import Image from 'next/image' import Link from 'next/link' -const applicationData: ApplicationPreviewType[] = [ +export const applicationData: ApplicationPreviewType[] = [ { post_id: 0, post_title: '개인적으로 완벽한 포트폴리오', @@ -39,7 +39,7 @@ const applicationData: ApplicationPreviewType[] = [ }, ] -const tipData = [ +export const tipData = [ { title: '지원서 작성 팁 3가지', content: @@ -123,7 +123,10 @@ export default function ProfilePage() {
공유한 지원서 자료
- +

더보기

공유한 지원서 팁
- +

더보기

+
+
+ +
+

공유한 지원서 팁

+

8개 내 지원서 팁

+
+
+
+ {tipData.map((value, index) => ( + + ))} +
+
+ + ) +} From a1027749cb2326d11ddb87ab3b241a015a87109e Mon Sep 17 00:00:00 2001 From: SeungWoo Date: Mon, 27 May 2024 22:24:53 +0900 Subject: [PATCH 04/12] ADD :: Profile Edit Page --- src/app/profile/edit/page.tsx | 52 +++++++++++++++++++++++++++++++++++ src/app/profile/page.tsx | 8 ++++-- 2 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 src/app/profile/edit/page.tsx diff --git a/src/app/profile/edit/page.tsx b/src/app/profile/edit/page.tsx new file mode 100644 index 0000000..157dd1b --- /dev/null +++ b/src/app/profile/edit/page.tsx @@ -0,0 +1,52 @@ +'use client' + +import { Add, Arrow, DecorationImg_1 } from '@/assets' +import { Button, Input, Select } from '@/components' +import Image from 'next/image' +import { useRouter } from 'next/navigation' + +export default function ProfileEditPage() { + const router = useRouter() + + return ( +
+
+
+ +

프로필 수정

+
+
+ Profile Image + +
+
+ + + uploadFile( + e, + (file) => setImgData((data) => ({ ...data, img: file })), + (str) => setImgData((data) => ({ ...data, imgString: str })), + ) + } + /> + +
+
+ setGeneration(e.target.value.slice(0, 2))} + /> + - diff --git a/src/constants/index.ts b/src/constants/index.ts index 1e9de72..c61d79b 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1 +1,2 @@ export { applicationData, tipData } from './dummy' +export { majorOption } from './major' diff --git a/src/constants/major.ts b/src/constants/major.ts new file mode 100644 index 0000000..b68ab52 --- /dev/null +++ b/src/constants/major.ts @@ -0,0 +1,11 @@ +export const majorOption = [ + { value: '1', name: 'Backend' }, + { value: '2', name: 'Frontend' }, + { value: '3', name: 'iOS' }, + { value: '4', name: 'Android' }, + { value: '5', name: 'DevOps' }, + { value: '6', name: 'Design' }, + { value: '7', name: 'AI' }, + { value: '8', name: 'CrossPlatform' }, + { value: '9', name: 'Blockchain' }, +] diff --git a/src/utils/index.ts b/src/utils/index.ts index 12bcd7c..f1b4fed 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -2,3 +2,4 @@ export * from './dateToString' export { toast } from './toast/toast' export * from './loginRedirect' export * from './cookie' +export { uploadFile } from './uploadFile' diff --git a/src/utils/uploadFile.ts b/src/utils/uploadFile.ts new file mode 100644 index 0000000..b7dc32b --- /dev/null +++ b/src/utils/uploadFile.ts @@ -0,0 +1,14 @@ +export const uploadFile = ( + e: React.ChangeEvent, + setFile: (e: File) => void, + setString: (e: string) => void, +) => { + const selectedFile = (e.target.files as FileList)[0] + + if (selectedFile !== null) { + if (selectedFile?.name.match(/^.*\.(jpg|jpeg|png|heic|webp)$/)) { + setFile(selectedFile) + setString(URL.createObjectURL(selectedFile)) + } + } +}