From f319d12ae7c93fa68ea6454a541cf90bd949078c Mon Sep 17 00:00:00 2001 From: gaoooon Date: Tue, 21 Nov 2023 23:48:33 +0900 Subject: [PATCH 001/130] Update index.ts --- src/components/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/index.ts b/src/components/index.ts index 7a0bcbcb..93b925eb 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -3,6 +3,7 @@ export * from './FormItem'; export * from './Modal'; export { default as CareerCard } from './CareerCard'; export { default as CareerRegistrationBox } from './CareerRegistrationBox'; +export { default as ChattingListCard } from './ChattingListCard'; export { default as DropDown } from './DropDown'; export { default as FilterButton } from './Buttons/Filter'; export { default as Header } from './Header'; From e313dfa1de6b6198f10e4e915da085e38d1ab67f Mon Sep 17 00:00:00 2001 From: gaoooon Date: Tue, 21 Nov 2023 23:48:47 +0900 Subject: [PATCH 002/130] Add BlueCircleIcon.tsx --- src/assets/BlueCircleIcon.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/assets/BlueCircleIcon.tsx diff --git a/src/assets/BlueCircleIcon.tsx b/src/assets/BlueCircleIcon.tsx new file mode 100644 index 00000000..a4ae9cc7 --- /dev/null +++ b/src/assets/BlueCircleIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +const BlueCircleIcon = () => ( + + + +); + +export default BlueCircleIcon; From 7701b7a244f20bf3e9628e962407dcba42c91d56 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Tue, 21 Nov 2023 23:48:57 +0900 Subject: [PATCH 003/130] Update index.ts --- src/assets/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/index.ts b/src/assets/index.ts index 988e810a..74d32b71 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -1,4 +1,5 @@ export { default as BlueCheckIcon } from './BlueCheckIcon'; +export { default as BlueCircleIcon } from './BlueCircleIcon'; export { default as CheckBoxIcon } from './CheckBoxIcon'; export { default as CloseIcon } from './CloseIcon'; export { default as DeleteIcon } from './DeleteIcon'; From 1275142cff59f6573aad2657565b9689b48c54ac Mon Sep 17 00:00:00 2001 From: gaoooon Date: Tue, 21 Nov 2023 23:49:38 +0900 Subject: [PATCH 004/130] Add index.stories.tsx --- .../ChattingListCard/index.stories.tsx | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/components/ChattingListCard/index.stories.tsx diff --git a/src/components/ChattingListCard/index.stories.tsx b/src/components/ChattingListCard/index.stories.tsx new file mode 100644 index 00000000..9d14fddd --- /dev/null +++ b/src/components/ChattingListCard/index.stories.tsx @@ -0,0 +1,39 @@ +import type { Opponent } from '@/types/opponent'; + +import ChattingListCard from '.'; + +import type { Meta, StoryObj } from '@storybook/react'; + +const opponent: Opponent = { + id: 1, + name: '방가온', + generation: 7, +}; + +const meta: Meta = { + component: ChattingListCard, + parameters: { + layout: 'padded', + }, + args: { + opponent, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + opponent: { ...opponent }, + isCheck: true, + }, +}; + +export const isCheck: Story = { + args: { + opponent: { ...opponent }, + isCheck: false, + }, +}; From 42938649f9ac4502bb3a62d9a46850c9217c12ff Mon Sep 17 00:00:00 2001 From: gaoooon Date: Tue, 21 Nov 2023 23:49:46 +0900 Subject: [PATCH 005/130] Add index.tsx --- src/components/ChattingListCard/index.tsx | 32 +++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/components/ChattingListCard/index.tsx diff --git a/src/components/ChattingListCard/index.tsx b/src/components/ChattingListCard/index.tsx new file mode 100644 index 00000000..28abaac0 --- /dev/null +++ b/src/components/ChattingListCard/index.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import * as S from './style'; + +import { PersonImg4, BlueCircleIcon } from '@/assets'; +import type { Opponent } from '@/types/opponent'; + +interface Props { + opponent: Opponent; + isCheck: boolean; +} + +const ChattingListCard: React.FC = ({ opponent, isCheck }) => ( + + + + + + + + + {opponent.generation}기 {opponent.name} + + 1시간 전 채팅 + + + + {!isCheck && } + +); + +export default ChattingListCard; From e6b92a32418ee3ff240a06eddde5f2614772d6ed Mon Sep 17 00:00:00 2001 From: gaoooon Date: Tue, 21 Nov 2023 23:49:55 +0900 Subject: [PATCH 006/130] Add style.ts --- src/components/ChattingListCard/style.ts | 51 ++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/components/ChattingListCard/style.ts diff --git a/src/components/ChattingListCard/style.ts b/src/components/ChattingListCard/style.ts new file mode 100644 index 00000000..e6a48506 --- /dev/null +++ b/src/components/ChattingListCard/style.ts @@ -0,0 +1,51 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + padding: 0.75rem 1.25rem 0.75rem 0rem; + width: 37.5rem; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; +`; + +export const OpponentProfile = styled.div` + display: flex; + column-gap: 1rem; +`; + +export const ProfileImg = styled.div` + background-color: ${({ theme }) => theme.color.grey[50]}; + border-radius: 3.125rem; + overflow: hidden; + width: 2.25rem; + height: 2.25rem; + + & > svg { + width: 2.1875rem; + height: 2rem; + position: relative; + top: 0.44rem; + left: 0.13rem; + } +`; + +export const ProfileBox = styled.div` + display: flex; + flex-direction: column; + row-gap: 0.25rem; +`; + +export const ProfileInfo = styled.p` + ${({ theme }) => theme.typo.body1} + color: ${({ theme }) => theme.color.grey[900]} +`; + +export const ChattingTime = styled.p` + ${({ theme }) => theme.typo.caption} + color: ${({ theme }) => theme.color.grey[500]}; +`; + +export const SpaceBlock = styled.div` + width: 0.5rem; +`; From d9d09bf42741ba7eb9587ef1a18638da28b0b285 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Tue, 21 Nov 2023 23:50:05 +0900 Subject: [PATCH 007/130] Add opponent.ts --- src/types/opponent.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/types/opponent.ts diff --git a/src/types/opponent.ts b/src/types/opponent.ts new file mode 100644 index 00000000..a441a66c --- /dev/null +++ b/src/types/opponent.ts @@ -0,0 +1,5 @@ +export interface Opponent { + id: number; + name: string; + generation: number; +} From 8ed97938843b74fe38da9c93c980299d7d40f169 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 22 Nov 2023 08:16:44 +0900 Subject: [PATCH 008/130] Update BlueCircleIcon.tsx --- src/assets/BlueCircleIcon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/BlueCircleIcon.tsx b/src/assets/BlueCircleIcon.tsx index a4ae9cc7..25dc9f11 100644 --- a/src/assets/BlueCircleIcon.tsx +++ b/src/assets/BlueCircleIcon.tsx @@ -3,8 +3,8 @@ import React from 'react'; const BlueCircleIcon = () => ( From fe73ff61ff350e33ea1e3c02884289308b36cab5 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 22 Nov 2023 23:05:54 +0900 Subject: [PATCH 009/130] Delete BlueCircleIcon.tsx --- src/assets/BlueCircleIcon.tsx | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 src/assets/BlueCircleIcon.tsx diff --git a/src/assets/BlueCircleIcon.tsx b/src/assets/BlueCircleIcon.tsx deleted file mode 100644 index 25dc9f11..00000000 --- a/src/assets/BlueCircleIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -const BlueCircleIcon = () => ( - - - -); - -export default BlueCircleIcon; From 7a2113fc9bc965cafa26c5858adb4ba6b67efbdf Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 22 Nov 2023 23:06:02 +0900 Subject: [PATCH 010/130] Update index.ts --- src/assets/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/assets/index.ts b/src/assets/index.ts index 74d32b71..988e810a 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -1,5 +1,4 @@ export { default as BlueCheckIcon } from './BlueCheckIcon'; -export { default as BlueCircleIcon } from './BlueCircleIcon'; export { default as CheckBoxIcon } from './CheckBoxIcon'; export { default as CloseIcon } from './CloseIcon'; export { default as DeleteIcon } from './DeleteIcon'; From ee2c978e6d6714bc3376e26658ae2d46ab70ed41 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 22 Nov 2023 23:06:15 +0900 Subject: [PATCH 011/130] Update index.stories.tsx --- src/components/ChattingListCard/index.stories.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/ChattingListCard/index.stories.tsx b/src/components/ChattingListCard/index.stories.tsx index 9d14fddd..30f90af6 100644 --- a/src/components/ChattingListCard/index.stories.tsx +++ b/src/components/ChattingListCard/index.stories.tsx @@ -1,10 +1,10 @@ -import type { Opponent } from '@/types/opponent'; +import type { OpponentInfo } from '@/types/opponentInfo'; import ChattingListCard from '.'; import type { Meta, StoryObj } from '@storybook/react'; -const opponent: Opponent = { +const opponent: OpponentInfo = { id: 1, name: '방가온', generation: 7, @@ -12,9 +12,6 @@ const opponent: Opponent = { const meta: Meta = { component: ChattingListCard, - parameters: { - layout: 'padded', - }, args: { opponent, }, @@ -27,13 +24,13 @@ type Story = StoryObj; export const Primary: Story = { args: { opponent: { ...opponent }, - isCheck: true, + isNewMessage: false, }, }; -export const isCheck: Story = { +export const isNewMessage: Story = { args: { opponent: { ...opponent }, - isCheck: false, + isNewMessage: true, }, }; From 91b781127e7927f83e104199cdca96efb81e2739 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 22 Nov 2023 23:06:27 +0900 Subject: [PATCH 012/130] Update index.tsx --- src/components/ChattingListCard/index.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/ChattingListCard/index.tsx b/src/components/ChattingListCard/index.tsx index 28abaac0..9b93571a 100644 --- a/src/components/ChattingListCard/index.tsx +++ b/src/components/ChattingListCard/index.tsx @@ -2,15 +2,15 @@ import React from 'react'; import * as S from './style'; -import { PersonImg4, BlueCircleIcon } from '@/assets'; -import type { Opponent } from '@/types/opponent'; +import { PersonImg4 } from '@/assets'; +import type { OpponentInfo } from '@/types/opponentInfo'; interface Props { - opponent: Opponent; - isCheck: boolean; + opponent: OpponentInfo; + isNewMessage: boolean; } -const ChattingListCard: React.FC = ({ opponent, isCheck }) => ( +const ChattingListCard: React.FC = ({ opponent, isNewMessage }) => ( @@ -24,8 +24,7 @@ const ChattingListCard: React.FC = ({ opponent, isCheck }) => ( 1시간 전 채팅 - - {!isCheck && } + {isNewMessage && } ); From abc2c5bd3f0f821339c8cadbe8698e306dd4a9e6 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 22 Nov 2023 23:06:47 +0900 Subject: [PATCH 013/130] Updae opponentInfo.ts --- src/types/{opponent.ts => opponentInfo.ts} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/types/{opponent.ts => opponentInfo.ts} (62%) diff --git a/src/types/opponent.ts b/src/types/opponentInfo.ts similarity index 62% rename from src/types/opponent.ts rename to src/types/opponentInfo.ts index a441a66c..bfe4e686 100644 --- a/src/types/opponent.ts +++ b/src/types/opponentInfo.ts @@ -1,4 +1,4 @@ -export interface Opponent { +export interface OpponentInfo { id: number; name: string; generation: number; From 1c51ae9a291fc949b4808e9e3dcfc267b224f177 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 22 Nov 2023 23:06:57 +0900 Subject: [PATCH 014/130] Update style.ts --- src/components/ChattingListCard/style.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/ChattingListCard/style.ts b/src/components/ChattingListCard/style.ts index e6a48506..c35dc95d 100644 --- a/src/components/ChattingListCard/style.ts +++ b/src/components/ChattingListCard/style.ts @@ -38,7 +38,7 @@ export const ProfileBox = styled.div` export const ProfileInfo = styled.p` ${({ theme }) => theme.typo.body1} - color: ${({ theme }) => theme.color.grey[900]} + color: ${({ theme }) => theme.color.grey[900]}; `; export const ChattingTime = styled.p` @@ -49,3 +49,10 @@ export const ChattingTime = styled.p` export const SpaceBlock = styled.div` width: 0.5rem; `; + +export const BlueCircleIcon = styled.div` + width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + background-color: ${({ theme }) => theme.color.skyBlue[400]}; +`; From bb2c7c8e861d79e9cd89a6f5c1db01a4df293856 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Thu, 23 Nov 2023 20:26:13 +0900 Subject: [PATCH 015/130] Update style.ts --- src/components/ChattingListCard/style.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ChattingListCard/style.ts b/src/components/ChattingListCard/style.ts index c35dc95d..b3f668d4 100644 --- a/src/components/ChattingListCard/style.ts +++ b/src/components/ChattingListCard/style.ts @@ -37,12 +37,12 @@ export const ProfileBox = styled.div` `; export const ProfileInfo = styled.p` - ${({ theme }) => theme.typo.body1} + ${({ theme }) => theme.typo.body1}; color: ${({ theme }) => theme.color.grey[900]}; `; export const ChattingTime = styled.p` - ${({ theme }) => theme.typo.caption} + ${({ theme }) => theme.typo.caption}; color: ${({ theme }) => theme.color.grey[500]}; `; From 62a420828efdcdf1147e2898d55a97dbeb3a5f19 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Thu, 23 Nov 2023 23:13:32 +0900 Subject: [PATCH 016/130] Update style.ts --- src/components/ChattingListCard/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChattingListCard/style.ts b/src/components/ChattingListCard/style.ts index b3f668d4..08743357 100644 --- a/src/components/ChattingListCard/style.ts +++ b/src/components/ChattingListCard/style.ts @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; export const Container = styled.div` - padding: 0.75rem 1.25rem 0.75rem 0rem; + padding: 0.75rem 1rem; width: 37.5rem; display: flex; justify-content: space-between; From 64ea7044dc017cf67d8f9f2717637502c2c7e556 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Sun, 26 Nov 2023 00:01:58 +0900 Subject: [PATCH 017/130] Add index.stories.tsx --- src/components/MessageCard/index.stories.tsx | 32 ++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/components/MessageCard/index.stories.tsx diff --git a/src/components/MessageCard/index.stories.tsx b/src/components/MessageCard/index.stories.tsx new file mode 100644 index 00000000..63d6e6b8 --- /dev/null +++ b/src/components/MessageCard/index.stories.tsx @@ -0,0 +1,32 @@ +import MessageCard from '.'; + +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + component: MessageCard, + parameters: { + layout: 'padded', + }, + args: { + children: '안녕하세요', + isMine: true, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + children: '안녕하세요', + isMine: true, + }, +}; + +export const isMine: Story = { + args: { + children: '안녕하세요', + isMine: false, + }, +}; From 06d406b0348900096610214caf81f7536622c371 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Sun, 26 Nov 2023 00:02:09 +0900 Subject: [PATCH 018/130] Add index.tsx --- src/components/MessageCard/index.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/components/MessageCard/index.tsx diff --git a/src/components/MessageCard/index.tsx b/src/components/MessageCard/index.tsx new file mode 100644 index 00000000..6ce69744 --- /dev/null +++ b/src/components/MessageCard/index.tsx @@ -0,0 +1,18 @@ +'use client'; + +import React from 'react'; + +import * as S from './style'; + +interface Props { + children: string; + isMine: boolean; +} + +const MessageCard: React.FC = ({ children, isMine }) => ( + + {children} + +); + +export default MessageCard; From 23743932cd764932156190876c9d615004e8e052 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Sun, 26 Nov 2023 00:02:19 +0900 Subject: [PATCH 019/130] Add style.ts --- src/components/MessageCard/style.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/components/MessageCard/style.ts diff --git a/src/components/MessageCard/style.ts b/src/components/MessageCard/style.ts new file mode 100644 index 00000000..7e9e278a --- /dev/null +++ b/src/components/MessageCard/style.ts @@ -0,0 +1,21 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div<{ isMine: boolean }>` + ${({ theme }) => theme.typo.body1}; + padding: 0.5rem 1.25rem; + display: inline-block; + ${({ theme, isMine }) => + isMine + ? { + borderRadius: '1.25rem 1.25rem 0rem 1.25rem', + color: theme.color.white, + backgroundColor: theme.color.skyBlue[400], + } + : { + borderRadius: '0rem 1.25rem 1.25rem 1.25rem', + color: theme.color.grey[800], + backgroundColor: theme.color.grey[100], + }}; +`; + +export const Content = styled.p``; From c6223d21ae9a04457414abe58a6aadb4439df3ff Mon Sep 17 00:00:00 2001 From: gaoooon Date: Sun, 26 Nov 2023 15:03:50 +0900 Subject: [PATCH 020/130] Update index.tsx --- src/components/ChattingListCard/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/ChattingListCard/index.tsx b/src/components/ChattingListCard/index.tsx index 9b93571a..48fefcec 100644 --- a/src/components/ChattingListCard/index.tsx +++ b/src/components/ChattingListCard/index.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import * as S from './style'; From a60c94b8f5f66c0594b39d094297dd53a6d386f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=A9=EA=B0=80=EC=98=A8?= <128475660+gaoooon@users.noreply.github.com> Date: Sun, 26 Nov 2023 15:06:45 +0900 Subject: [PATCH 021/130] Update index.tsx --- src/components/ChattingListCard/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/ChattingListCard/index.tsx b/src/components/ChattingListCard/index.tsx index 9b93571a..48fefcec 100644 --- a/src/components/ChattingListCard/index.tsx +++ b/src/components/ChattingListCard/index.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import * as S from './style'; From e7e814ab9580986904a1d01eef8f0a5a28058ef3 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Sun, 26 Nov 2023 15:22:23 +0900 Subject: [PATCH 022/130] Update style.ts --- src/components/MessageCard/style.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/MessageCard/style.ts b/src/components/MessageCard/style.ts index 7e9e278a..2163b6f6 100644 --- a/src/components/MessageCard/style.ts +++ b/src/components/MessageCard/style.ts @@ -6,16 +6,16 @@ export const Container = styled.div<{ isMine: boolean }>` display: inline-block; ${({ theme, isMine }) => isMine - ? { - borderRadius: '1.25rem 1.25rem 0rem 1.25rem', - color: theme.color.white, - backgroundColor: theme.color.skyBlue[400], - } - : { - borderRadius: '0rem 1.25rem 1.25rem 1.25rem', - color: theme.color.grey[800], - backgroundColor: theme.color.grey[100], - }}; + ? ` + border-radius: 1.25rem 1.25rem 0rem 1.25rem; + color: ${theme.color.white}; + background-color: ${theme.color.skyBlue[400]}; + ` + : ` + border-radius: 0rem 1.25rem 1.25rem 1.25rem; + color: ${theme.color.grey[800]}; + background-color: ${theme.color.grey[100]}; + `}; `; export const Content = styled.p``; From a466b7e0028c4a1a2e5e06cb98b805aa3c4fc7f2 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 27 Nov 2023 19:45:32 +0900 Subject: [PATCH 023/130] Add sendIcon --- src/assets/SendIcon.tsx | 17 +++++++++++++++++ src/assets/index.ts | 1 + 2 files changed, 18 insertions(+) create mode 100644 src/assets/SendIcon.tsx diff --git a/src/assets/SendIcon.tsx b/src/assets/SendIcon.tsx new file mode 100644 index 00000000..d3a436f7 --- /dev/null +++ b/src/assets/SendIcon.tsx @@ -0,0 +1,17 @@ +const SendIcon = () => ( + + + + +); + +export default SendIcon; diff --git a/src/assets/index.ts b/src/assets/index.ts index d576115f..5936c29d 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -28,5 +28,6 @@ export { default as RemovePositionIcon } from './RemovePositionIcon'; export { default as SNSIcon } from './SNSIcon'; export { default as SearchIcon } from './SearchIcon'; export { default as SearchNotFoundIcon } from './SearchNotFoundIcon'; +export { default as SendIcon } from './SendIcon'; export { default as TriangleIcon } from './TriangleIcon'; export { default as UploadIcon } from './UploadIcon'; From f63f031654dbb7914723dc3816b2bc82b22813bc Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 27 Nov 2023 19:59:24 +0900 Subject: [PATCH 024/130] Add textAreaElements --- src/components/TextArea/index.tsx | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index c5e2f21b..ba33d6e4 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -4,10 +4,28 @@ import { useState, useRef, useEffect } from 'react'; import * as S from './style'; -import { UploadIcon } from '@/assets'; +import { SendIcon, UploadIcon } from '@/assets'; import { useAutosizeTextArea } from '@/hooks'; -const TextArea = () => { +interface Props { + textAreaType: 'gwangya' | 'chatting'; +} + +const textAreaElements = { + gwangya: { + placeholder: + '비방 및 성적 발언, 욕설 등이 포함된 글은 삭제 조치를 받을 수 있습니다.', + icon: , + onClick: () => {}, + }, + chatting: { + placeholder: '메시지 보내기', + icon: , + onClick: () => {}, + }, +} as const; + +const TextArea: React.FC = ({ textAreaType }) => { const [inputValue, setInputValue] = useState(''); const textAreaRef = useRef(null); const [isFocused, setIsFocused] = useState(false); @@ -38,7 +56,7 @@ const TextArea = () => { return ( setInputValue(e.target.value)} @@ -49,8 +67,8 @@ const TextArea = () => { {isMultiLine && ( {200 - inputValue.length} )} - - + + {textAreaElements[textAreaType].icon} )} From b1ab56264a0517fd77f081d4ab490f8fde108a6d Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 27 Nov 2023 20:00:30 +0900 Subject: [PATCH 025/130] Update story --- src/components/TextArea/index.stories.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/TextArea/index.stories.tsx b/src/components/TextArea/index.stories.tsx index 2e66146f..5333b890 100644 --- a/src/components/TextArea/index.stories.tsx +++ b/src/components/TextArea/index.stories.tsx @@ -10,4 +10,14 @@ export default meta; type Story = StoryObj; -export const Primary: Story = {}; +export const Gwangya: Story = { + args: { + textAreaType: 'gwangya', + }, +}; + +export const Chatting: Story = { + args: { + textAreaType: 'chatting', + }, +}; From c69eeec09127073fb1b2e8c9edd7a66e8993db2f Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 28 Nov 2023 08:47:21 +0900 Subject: [PATCH 026/130] Update onClick --- src/components/TextArea/index.tsx | 8 +++++--- src/pageContainer/gwangya/index.tsx | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index 583e2d3e..425ca391 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -17,12 +17,12 @@ const TextArea: React.FC = ({ textAreaType }) => { placeholder: '비방 및 성적 발언, 욕설 등이 포함된 글은 삭제 조치를 받을 수 있습니다.', icon: , - onClick: () => handleSubmit(), + onClick: () => uploadContent(), }, chatting: { placeholder: '메시지 보내기', icon: , - onClick: () => {}, + onClick: () => sendMessage(), }, } as const; @@ -55,10 +55,12 @@ const TextArea: React.FC = ({ textAreaType }) => { }; }, []); - const handleSubmit = () => { + const uploadContent = () => { mutateUploadContent(inputValue); }; + const sendMessage = () => {}; + return ( ( - + ); From 11a3cc9f65e8c832d76c1540bbf10ec3a5a5786f Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 28 Nov 2023 08:56:52 +0900 Subject: [PATCH 027/130] Update storybook preview --- .storybook/preview.tsx | 8 ++++---- src/utils/getGwangyaTokenCookie.ts | 6 ++++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 4307a43a..5d78d49a 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { GlobalStyle, theme } from '../src/styles'; +import { GlobalStyle } from '../src/styles'; import type { Preview } from '@storybook/react'; -import { ThemeProvider } from '@emotion/react'; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; +import Providers from '../src/app/providers'; const customViewports = { width600: { @@ -52,10 +52,10 @@ const preview: Preview = { }, decorators: [ (Story) => ( - + - + ), ], }; diff --git a/src/utils/getGwangyaTokenCookie.ts b/src/utils/getGwangyaTokenCookie.ts index 32e1dfb4..c7382e3b 100644 --- a/src/utils/getGwangyaTokenCookie.ts +++ b/src/utils/getGwangyaTokenCookie.ts @@ -2,8 +2,10 @@ const getGwangyaTokenCookie = () => { if (typeof document === 'undefined') return ''; const cookies = document.cookie; - const gwangyaToken = cookies.split('gwangyaToken=')[1].slice(0, 20); - return gwangyaToken; + if (cookies.split('gwangyaToken=')[1]) { + const gwangyaToken = cookies.split('gwangyaToken=')[1].slice(0, 20); + return gwangyaToken; + } }; export default getGwangyaTokenCookie; From 0020dab89ad0097f0e47167e292b4bf377da4728 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 28 Nov 2023 09:00:32 +0900 Subject: [PATCH 028/130] Update max length --- src/components/TextArea/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index 425ca391..faab1dfc 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -72,7 +72,7 @@ const TextArea: React.FC = ({ textAreaType }) => { /> {inputValue.length > 0 && ( - {isMultiLine && ( + {isMultiLine && textAreaType === 'gwangya' && ( {200 - inputValue.length} )} From 38f8da8d2d427a64874b59229eb388f02c60e053 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 28 Nov 2023 09:03:05 +0900 Subject: [PATCH 029/130] Update unit --- src/assets/SendIcon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/SendIcon.tsx b/src/assets/SendIcon.tsx index d3a436f7..55c4e55b 100644 --- a/src/assets/SendIcon.tsx +++ b/src/assets/SendIcon.tsx @@ -1,8 +1,8 @@ const SendIcon = () => ( From 61b4b2713662abeb0f37e90d5de02b3bba46d7ce Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Wed, 29 Nov 2023 09:05:30 +0900 Subject: [PATCH 030/130] Resolve build error --- src/pageContainer/gwangya/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pageContainer/gwangya/index.tsx b/src/pageContainer/gwangya/index.tsx index 600f7628..efa261ea 100644 --- a/src/pageContainer/gwangya/index.tsx +++ b/src/pageContainer/gwangya/index.tsx @@ -3,6 +3,7 @@ import { useEffect, useRef } from 'react'; import * as S from './style'; + import { Header, CommunityCard, TextArea } from '@/components'; import { useGetGwangyaPostList } from '@/hooks'; @@ -31,7 +32,7 @@ const Gwangya = () => { {data?.map((post) => )} - + From baf8599496f0dc3740ba0c98858cf96e715c71e5 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Wed, 6 Dec 2023 10:10:03 +0900 Subject: [PATCH 031/130] Update business logic location --- src/components/TextArea/index.tsx | 33 ++++++----------------------- src/pageContainer/gwangya/index.tsx | 25 ++++++++++++++++++++-- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index 000a43fa..4e8617ab 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -3,31 +3,29 @@ import { useState, useRef, useEffect } from 'react'; import type { ChangeEvent } from 'react'; -import { toast } from 'react-toastify'; - import * as S from './style'; import { SendIcon, UploadIcon } from '@/assets'; -import { useAutosizeTextArea, usePostGwangyaContent } from '@/hooks'; +import { useAutosizeTextArea } from '@/hooks'; const MAX_LENGTH = 200; interface Props { textAreaType: 'gwangya' | 'chatting'; + onClick: (content: string) => void; + disabled: boolean; } -const TextArea: React.FC = ({ textAreaType }) => { +const TextArea: React.FC = ({ textAreaType, onClick, disabled }) => { const textAreaElements = { gwangya: { placeholder: '비방 및 성적 발언, 욕설 등이 포함된 글은 삭제 조치를 받을 수 있습니다.', icon: , - onClick: () => uploadContent(), }, chatting: { placeholder: '메시지 보내기', icon: , - onClick: () => sendMessage(), }, } as const; @@ -36,17 +34,6 @@ const TextArea: React.FC = ({ textAreaType }) => { const [isFocused, setIsFocused] = useState(false); const [isMultiLine, setIsMultiLine] = useState(false); - const { - mutate: mutateUploadContent, - isPending, - isSuccess, - } = usePostGwangyaContent({ - onSuccess: () => { - document.cookie = 'isSuccess=true; max-age=5'; - window.location.reload(); - }, - }); - useAutosizeTextArea(textAreaRef.current, inputValue, setIsMultiLine); // textArea의 focus를 컨트롤합니다. -> focus 시 border 변경. @@ -69,20 +56,12 @@ const TextArea: React.FC = ({ textAreaType }) => { }; }, []); - const uploadContent = () => { - if (inputValue.replaceAll('\n', '').replaceAll('\u0020', '').length !== 0) - mutateUploadContent(inputValue); - else toast.error('게시물 내용을 입력해주세요.'); - }; - const handleInputChange = (e: ChangeEvent) => { const inputValue = e.target.value.slice(0, MAX_LENGTH); setInputValue(inputValue); }; - const sendMessage = () => {}; - return ( = ({ textAreaType }) => { )} onClick(inputValue)} + disabled={disabled} > {textAreaElements[textAreaType].icon} diff --git a/src/pageContainer/gwangya/index.tsx b/src/pageContainer/gwangya/index.tsx index 8a862b77..f6c5c93a 100644 --- a/src/pageContainer/gwangya/index.tsx +++ b/src/pageContainer/gwangya/index.tsx @@ -7,7 +7,7 @@ import { toast } from 'react-toastify'; import * as S from './style'; import { Header, CommunityCard, TextArea } from '@/components'; -import { useGetGwangyaPostList } from '@/hooks'; +import { useGetGwangyaPostList, usePostGwangyaContent } from '@/hooks'; import type { GwangyaPostType } from '@/types'; import { isExistCookie } from '@/utils'; @@ -71,6 +71,23 @@ const Gwangya: React.FC = ({ initialData }) => { return () => observer.disconnect(); }, [handleObserver]); + const { + mutate: mutateUploadContent, + isPending, + isSuccess, + } = usePostGwangyaContent({ + onSuccess: () => { + document.cookie = 'isSuccess=true; max-age=5'; + window.location.reload(); + }, + }); + + const uploadContent = (inputValue: string) => { + if (inputValue.replaceAll('\n', '').replaceAll('\u0020', '').length !== 0) + mutateUploadContent(inputValue); + else toast.error('게시물 내용을 입력해주세요.'); + }; + return ( <>
@@ -96,7 +113,11 @@ const Gwangya: React.FC = ({ initialData }) => { )) )} - + From ce21b68c9f35357473761c98fe048583a522f0f8 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Wed, 6 Dec 2023 10:11:23 +0900 Subject: [PATCH 032/130] Rename useAutoRexizeTextArea --- src/components/TextArea/index.tsx | 4 ++-- src/hooks/index.ts | 2 +- .../{useAutoSizeTextArea.ts => useAutoResizeTextArea.ts} | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) rename src/hooks/{useAutoSizeTextArea.ts => useAutoResizeTextArea.ts} (92%) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index 4e8617ab..1a2b159f 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -6,7 +6,7 @@ import type { ChangeEvent } from 'react'; import * as S from './style'; import { SendIcon, UploadIcon } from '@/assets'; -import { useAutosizeTextArea } from '@/hooks'; +import { useAutoResizeTextArea } from '@/hooks'; const MAX_LENGTH = 200; @@ -34,7 +34,7 @@ const TextArea: React.FC = ({ textAreaType, onClick, disabled }) => { const [isFocused, setIsFocused] = useState(false); const [isMultiLine, setIsMultiLine] = useState(false); - useAutosizeTextArea(textAreaRef.current, inputValue, setIsMultiLine); + useAutoResizeTextArea(textAreaRef.current, inputValue, setIsMultiLine); // textArea의 focus를 컨트롤합니다. -> focus 시 border 변경. useEffect(() => { diff --git a/src/hooks/index.ts b/src/hooks/index.ts index bd952ed9..339b9bc0 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,4 +1,4 @@ export * from './api'; -export * from './useAutoSizeTextArea'; +export * from './useAutoReSizeTextArea'; export * from './useForwardRef'; export * from './useGetRem'; diff --git a/src/hooks/useAutoSizeTextArea.ts b/src/hooks/useAutoResizeTextArea.ts similarity index 92% rename from src/hooks/useAutoSizeTextArea.ts rename to src/hooks/useAutoResizeTextArea.ts index dbfd6fb4..f31a9e18 100644 --- a/src/hooks/useAutoSizeTextArea.ts +++ b/src/hooks/useAutoResizeTextArea.ts @@ -1,7 +1,7 @@ import type { Dispatch, SetStateAction } from 'react'; import { useEffect } from 'react'; -export const useAutosizeTextArea = ( +export const useAutoResizeTextArea = ( textAreaRef: HTMLTextAreaElement | null, value: string, setIsMultiLine: Dispatch> From 872d58e69e8e496ccae12a6d62c5840a0591d1a5 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Wed, 6 Dec 2023 10:14:22 +0900 Subject: [PATCH 033/130] Resolve build error --- src/hooks/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 339b9bc0..69dd66ca 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,4 +1,4 @@ export * from './api'; -export * from './useAutoReSizeTextArea'; +export * from './useAutoResizeTextArea'; export * from './useForwardRef'; export * from './useGetRem'; From 62469167a2b94c87f8119757f62db7f83b718c0d Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 6 Dec 2023 14:18:51 +0900 Subject: [PATCH 034/130] Add GoBackIcon --- src/assets/GoBackIcon.tsx | 30 ++++++++++++++++++++++++++++++ src/assets/index.ts | 1 + 2 files changed, 31 insertions(+) create mode 100644 src/assets/GoBackIcon.tsx diff --git a/src/assets/GoBackIcon.tsx b/src/assets/GoBackIcon.tsx new file mode 100644 index 00000000..81a832d7 --- /dev/null +++ b/src/assets/GoBackIcon.tsx @@ -0,0 +1,30 @@ +const GoBackIcon = () => ( + + + + + + + + + + +); + +export default GoBackIcon; diff --git a/src/assets/index.ts b/src/assets/index.ts index d576115f..cb8d3d1e 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -6,6 +6,7 @@ export { default as EmailIcon } from './EmailIcon'; export { default as ExitIcon } from './ExitIcon'; export { default as FilterIcon } from './FilterIcon'; export { default as FoldIcon } from './FoldIcon'; +export { default as GoBackIcon } from './GoBackIcon'; export { default as GoogleIcon } from './GoogleIcon'; export { default as GsmNetworkingIcon } from './GsmNetworkingIcon'; export { default as ImageRegisterIcon } from './ImageRegisterIcon'; From fe920da7eddde03b0701fd92fb7f73263a35f07b Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 6 Dec 2023 14:24:48 +0900 Subject: [PATCH 035/130] Update px to rem --- src/assets/GoBackIcon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/GoBackIcon.tsx b/src/assets/GoBackIcon.tsx index 81a832d7..610be17c 100644 --- a/src/assets/GoBackIcon.tsx +++ b/src/assets/GoBackIcon.tsx @@ -1,8 +1,8 @@ const GoBackIcon = () => ( From 75ca927ae925b08aa86dd61a55235a445ffb037b Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 6 Dec 2023 14:56:04 +0900 Subject: [PATCH 036/130] Add index.stories.tsx --- .../ChattingHeader/index.stories.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/components/ChattingHeader/index.stories.tsx diff --git a/src/components/ChattingHeader/index.stories.tsx b/src/components/ChattingHeader/index.stories.tsx new file mode 100644 index 00000000..9440da01 --- /dev/null +++ b/src/components/ChattingHeader/index.stories.tsx @@ -0,0 +1,21 @@ +import ChattingHeader from '.'; + +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + component: ChattingHeader, + parameters: { + layout: 'padded', + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + name: '방가온', + generation: 7, + }, +}; From 6c11c47d6eef18c3391cd0e07f133b5f0b430eb3 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 6 Dec 2023 14:56:10 +0900 Subject: [PATCH 037/130] Add index.tsx --- src/components/ChattingHeader/index.tsx | 36 +++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/components/ChattingHeader/index.tsx diff --git a/src/components/ChattingHeader/index.tsx b/src/components/ChattingHeader/index.tsx new file mode 100644 index 00000000..0d194ce1 --- /dev/null +++ b/src/components/ChattingHeader/index.tsx @@ -0,0 +1,36 @@ +'use client'; + +import React from 'react'; + +import { useRouter } from 'next/navigation'; + +import * as S from './style'; + +import { GoBackIcon } from '@/assets'; + +interface Props { + name: string; + generation: number; +} + +const ChattingHeader: React.FC = ({ name, generation }) => { + const { push } = useRouter(); + + // 어디로 이동해야 할지 정해지지 않아 /로 이동하게 해두었습니다! + const handleGoBackIconClick = () => push('/'); + + return ( + + + + + + {generation}기 + {name} + + + + ); +}; + +export default ChattingHeader; From 816bfb836759c4be05da309d0d8785a034c95a3d Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 6 Dec 2023 14:56:17 +0900 Subject: [PATCH 038/130] Add style.ts --- src/components/ChattingHeader/style.ts | 30 ++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/components/ChattingHeader/style.ts diff --git a/src/components/ChattingHeader/style.ts b/src/components/ChattingHeader/style.ts new file mode 100644 index 00000000..2a04ceae --- /dev/null +++ b/src/components/ChattingHeader/style.ts @@ -0,0 +1,30 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + width: 100%; + padding: 1rem 1.25rem; + display: flex; + align-items: center; + justify-content: space-between; +`; + +export const IconBox = styled.div` + margin: 0.25rem 0.4375rem; + display: flex; + align-items: center; + cursor: pointer; +`; + +export const OpponentInfo = styled.div``; + +export const Generation = styled.span` + ${({ theme }) => theme.typo.subtitle}; + color: ${({ theme }) => theme.color.grey[500]}; +`; + +export const Name = styled(Generation)``; + +export const SpaceBox = styled.div` + width: 1.5rem; + height: 1.5rem; +`; From 4d60be233e9e13befea8149a3f51b7de248afda4 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 6 Dec 2023 17:38:24 +0900 Subject: [PATCH 039/130] Delete Import React, styled-components --- src/components/ChattingHeader/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/ChattingHeader/index.tsx b/src/components/ChattingHeader/index.tsx index 0d194ce1..ae93fabe 100644 --- a/src/components/ChattingHeader/index.tsx +++ b/src/components/ChattingHeader/index.tsx @@ -1,7 +1,5 @@ 'use client'; -import React from 'react'; - import { useRouter } from 'next/navigation'; import * as S from './style'; @@ -25,8 +23,7 @@ const ChattingHeader: React.FC = ({ name, generation }) => { - {generation}기 - {name} + {generation}기 {name} From 1b519016bcee7bc77c717962781114e3f2753b02 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 6 Dec 2023 17:39:03 +0900 Subject: [PATCH 040/130] Delete Name, Generation Components --- src/components/ChattingHeader/style.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/ChattingHeader/style.ts b/src/components/ChattingHeader/style.ts index 2a04ceae..dc7e20e3 100644 --- a/src/components/ChattingHeader/style.ts +++ b/src/components/ChattingHeader/style.ts @@ -15,15 +15,11 @@ export const IconBox = styled.div` cursor: pointer; `; -export const OpponentInfo = styled.div``; - -export const Generation = styled.span` +export const OpponentInfo = styled.div` ${({ theme }) => theme.typo.subtitle}; color: ${({ theme }) => theme.color.grey[500]}; `; -export const Name = styled(Generation)``; - export const SpaceBox = styled.div` width: 1.5rem; height: 1.5rem; From 17cbcca13bf86189c1c0e1826b065ea72a874451 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Fri, 8 Dec 2023 14:20:31 +0900 Subject: [PATCH 041/130] Add updatePageContainer --- src/pageContainer/mypage/update/index.tsx | 58 +++++++++++++++++++++++ src/pageContainer/mypage/update/style.ts | 23 +++++++++ 2 files changed, 81 insertions(+) create mode 100644 src/pageContainer/mypage/update/index.tsx create mode 100644 src/pageContainer/mypage/update/style.ts diff --git a/src/pageContainer/mypage/update/index.tsx b/src/pageContainer/mypage/update/index.tsx new file mode 100644 index 00000000..d9aaa98e --- /dev/null +++ b/src/pageContainer/mypage/update/index.tsx @@ -0,0 +1,58 @@ +'use client'; + +import { useEffect, useState } from 'react'; + +import { useRouter } from 'next/navigation'; + +import { toast } from 'react-toastify'; + +import * as S from './style'; + +import { Profile, Header, ProfileImgRegisterModal } from '@/components'; +import { useGetMyInfo } from '@/hooks'; + +const MyPage: React.FC = () => { + const [openModalCase, setOpenModalCase] = useState< + 'close' | 'profileImgRegister' | 'signOut' | 'withdraw' + >('close'); + + const { push } = useRouter(); + + const { data, isError } = useGetMyInfo(); + + useEffect(() => { + if (isError) { + toast.info('멘티인 사용자에게는 지원되지 않는 기능입니다.'); + push('/'); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isError]); + + return ( + <> + {openModalCase === 'profileImgRegister' && ( + setOpenModalCase('close')} /> + )} +
+ + {data && ( + <> + + + setOpenModalCase('profileImgRegister') + } + /> + + + + )} + + + ); +}; + +export default MyPage; diff --git a/src/pageContainer/mypage/update/style.ts b/src/pageContainer/mypage/update/style.ts new file mode 100644 index 00000000..6f9bf12e --- /dev/null +++ b/src/pageContainer/mypage/update/style.ts @@ -0,0 +1,23 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + padding-top: 4.375rem; + position: relative; + + @media (max-width: 600px) { + padding: 7.5rem 1rem 0 1rem; + } +`; + +export const ProfileContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + padding: 3.5rem 0; +`; + +export const Line = styled.div` + height: 0.75rem; + border-radius: 0.0625rem; + background: ${({ theme }) => theme.color.grey[50]}; +`; From 8fed316c37e36ea9e382c9cf8b3289061d3f7a72 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Fri, 8 Dec 2023 14:21:47 +0900 Subject: [PATCH 042/130] Add myInfoUpdatePage --- src/app/mypage/update/page.tsx | 11 +++++++++++ src/pageContainer/index.ts | 1 + 2 files changed, 12 insertions(+) create mode 100644 src/app/mypage/update/page.tsx diff --git a/src/app/mypage/update/page.tsx b/src/app/mypage/update/page.tsx new file mode 100644 index 00000000..f696ce61 --- /dev/null +++ b/src/app/mypage/update/page.tsx @@ -0,0 +1,11 @@ +import { MyInfoUpdate } from '@/pageContainer'; + +import type { Metadata } from 'next'; + +export const metadata: Metadata = { + title: '내 정보 수정', +}; + +const MyInfoUpdatePage = () => ; + +export default MyInfoUpdatePage; diff --git a/src/pageContainer/index.ts b/src/pageContainer/index.ts index fbc5379e..2557d22a 100644 --- a/src/pageContainer/index.ts +++ b/src/pageContainer/index.ts @@ -1,5 +1,6 @@ export { default as Gwangya } from './gwangya'; export { default as MentorRegister } from './register/mentor'; export { default as MyInfoPage } from './mypage'; +export { default as MyInfoUpdate } from './mypage/update'; export { default as SignIn } from './signin'; export { default as SignUp } from './signup'; From 5b7e0ea8f0552ddfb8e54c963cb2823568a1a3ed Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Fri, 8 Dec 2023 14:29:02 +0900 Subject: [PATCH 043/130] Update profileButton click --- .../Buttons/ProfileUpdate/index.tsx | 19 ++++++++++++------- src/components/Profile/index.tsx | 13 +++++++++++-- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/components/Buttons/ProfileUpdate/index.tsx b/src/components/Buttons/ProfileUpdate/index.tsx index 42928c63..bf23c153 100644 --- a/src/components/Buttons/ProfileUpdate/index.tsx +++ b/src/components/Buttons/ProfileUpdate/index.tsx @@ -1,5 +1,7 @@ 'use client'; +import { usePathname } from 'next/navigation'; + import * as S from './style'; import { PenIcon } from '@/assets'; @@ -8,12 +10,15 @@ interface Props { onClick?: () => void; } -const ProfileUpdateButton: React.FC = ({ onClick }) => ( - - - 이미지 등록 - {/* 프로필 수정 // 임시로 이미지 등록으로 내용 변경해두겠습니다. */} - -); +const ProfileUpdateButton: React.FC = ({ onClick }) => { + const pathName = usePathname(); + + return ( + + + {pathName === '/mypage' ? '프로필 수정' : '이미지 수정'} + + ); +}; export default ProfileUpdateButton; diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx index ada2366b..8ad694cb 100644 --- a/src/components/Profile/index.tsx +++ b/src/components/Profile/index.tsx @@ -1,6 +1,7 @@ 'use client'; import Image from 'next/image'; +import { usePathname, useRouter } from 'next/navigation'; import * as S from './style'; @@ -25,7 +26,15 @@ const Profile: React.FC = ({ // TODO : server side 와 마크업을 일치시키기 위한 로직 변경 필요. const randomValue = Math.floor(Math.random() * 5); //0부터 4까지 중의 랜덤값 생성 - // const handleClick = () => {}; + const pathName = usePathname(); + + const { push } = useRouter(); + + const handleClick = () => { + if (pathName === '/mypage') push('/mypage/update'); + else if (pathName === '/mypage/update' && profileRegisterModalOpen) + profileRegisterModalOpen(); + }; return ( @@ -40,7 +49,7 @@ const Profile: React.FC = ({ {generation}기 {name} - + ); From 7e10d50476aa04d13430587eaba3b7c866747c9e Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Fri, 8 Dec 2023 14:42:01 +0900 Subject: [PATCH 044/130] Update profileUpdate --- .../Buttons/ProfileUpdate/index.tsx | 4 +++- src/components/Profile/index.tsx | 7 +++++-- src/pageContainer/mypage/update/index.tsx | 20 ++++++++++++++++++- src/pageContainer/mypage/update/style.ts | 3 ++- 4 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/components/Buttons/ProfileUpdate/index.tsx b/src/components/Buttons/ProfileUpdate/index.tsx index bf23c153..94eca4e7 100644 --- a/src/components/Buttons/ProfileUpdate/index.tsx +++ b/src/components/Buttons/ProfileUpdate/index.tsx @@ -10,13 +10,15 @@ interface Props { onClick?: () => void; } +const MY_PAGE_PATh = '/mypage' as const; + const ProfileUpdateButton: React.FC = ({ onClick }) => { const pathName = usePathname(); return ( - {pathName === '/mypage' ? '프로필 수정' : '이미지 수정'} + {pathName === MY_PAGE_PATh ? '프로필 수정' : '이미지 수정'} ); }; diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx index 8ad694cb..441e0bfd 100644 --- a/src/components/Profile/index.tsx +++ b/src/components/Profile/index.tsx @@ -17,6 +17,9 @@ interface Props { profileRegisterModalOpen?: () => void; } +const MY_PAGE_PATh = '/mypage' as const; +const MY_INFO_UPDATE_PAGE_PATh = '/mypage/update' as const; + const Profile: React.FC = ({ name, generation, @@ -31,8 +34,8 @@ const Profile: React.FC = ({ const { push } = useRouter(); const handleClick = () => { - if (pathName === '/mypage') push('/mypage/update'); - else if (pathName === '/mypage/update' && profileRegisterModalOpen) + if (pathName === MY_PAGE_PATh) push(MY_INFO_UPDATE_PAGE_PATh); + else if (pathName === MY_INFO_UPDATE_PAGE_PATh && profileRegisterModalOpen) profileRegisterModalOpen(); }; diff --git a/src/pageContainer/mypage/update/index.tsx b/src/pageContainer/mypage/update/index.tsx index d9aaa98e..d6a4cd3e 100644 --- a/src/pageContainer/mypage/update/index.tsx +++ b/src/pageContainer/mypage/update/index.tsx @@ -8,8 +8,15 @@ import { toast } from 'react-toastify'; import * as S from './style'; -import { Profile, Header, ProfileImgRegisterModal } from '@/components'; +import { + Profile, + Header, + ProfileImgRegisterModal, + CareerRegistrationBox, +} from '@/components'; import { useGetMyInfo } from '@/hooks'; +import type { CareerFormType } from '@/types'; +import { extractCareer } from '@/utils'; const MyPage: React.FC = () => { const [openModalCase, setOpenModalCase] = useState< @@ -28,6 +35,10 @@ const MyPage: React.FC = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [isError]); + const [careerArray, setCareerArray] = useState([ + extractCareer(null), + ]); + return ( <> {openModalCase === 'profileImgRegister' && ( @@ -48,6 +59,13 @@ const MyPage: React.FC = () => { /> + {careerArray.map((career) => ( + + ))} )} diff --git a/src/pageContainer/mypage/update/style.ts b/src/pageContainer/mypage/update/style.ts index 6f9bf12e..6a4639fc 100644 --- a/src/pageContainer/mypage/update/style.ts +++ b/src/pageContainer/mypage/update/style.ts @@ -3,9 +3,10 @@ import styled from '@emotion/styled'; export const Container = styled.div` padding-top: 4.375rem; position: relative; + padding-bottom: 3.75rem; @media (max-width: 600px) { - padding: 7.5rem 1rem 0 1rem; + padding: 7.5rem 1rem 3.75rem 1rem; } `; From f305f0494d9ae01c1256d08f26f6aebc7005b3b0 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Fri, 8 Dec 2023 15:03:25 +0900 Subject: [PATCH 045/130] Update get careerList --- src/pageContainer/mypage/update/index.tsx | 38 +++++++++++++++++++++-- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/src/pageContainer/mypage/update/index.tsx b/src/pageContainer/mypage/update/index.tsx index d6a4cd3e..0644067e 100644 --- a/src/pageContainer/mypage/update/index.tsx +++ b/src/pageContainer/mypage/update/index.tsx @@ -23,6 +23,10 @@ const MyPage: React.FC = () => { 'close' | 'profileImgRegister' | 'signOut' | 'withdraw' >('close'); + const [careerArray, setCareerArray] = useState([ + extractCareer(null), + ]); + const { push } = useRouter(); const { data, isError } = useGetMyInfo(); @@ -35,9 +39,37 @@ const MyPage: React.FC = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [isError]); - const [careerArray, setCareerArray] = useState([ - extractCareer(null), - ]); + useEffect(() => { + if (data?.career) { + const career = data.career; + const newCareerList: CareerFormType[] = career.map((career) => { + const startDate = new Date(career.startDate); + const endDate = career.endDate ? new Date(career.endDate) : null; + + const newCareer: CareerFormType = { + id: career.id, + companyName: { value: career.companyName, errorMessage: null }, + companyUrl: { value: career.companyUrl ?? '', errorMessage: null }, + position: { value: career.position, errorMessage: null }, + startYear: { value: startDate.getFullYear(), errorMessage: null }, + startMonth: { value: startDate.getMonth(), errorMessage: null }, + endYear: { + value: endDate ? endDate.getFullYear() : '년', + errorMessage: null, + }, + endMonth: { + value: endDate ? endDate.getMonth() : '월', + errorMessage: null, + }, + isWorking: { value: career.isWorking, errorMessage: null }, + }; + + return newCareer; + }); + + setCareerArray(newCareerList); + } + }, [data?.career]); return ( <> From 2d41140bd752912ee73642180899dd001a7a4c5e Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Fri, 8 Dec 2023 15:13:37 +0900 Subject: [PATCH 046/130] Rename myInfoUpdatePage --- src/pageContainer/mypage/update/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pageContainer/mypage/update/index.tsx b/src/pageContainer/mypage/update/index.tsx index 0644067e..68bd1a87 100644 --- a/src/pageContainer/mypage/update/index.tsx +++ b/src/pageContainer/mypage/update/index.tsx @@ -18,7 +18,7 @@ import { useGetMyInfo } from '@/hooks'; import type { CareerFormType } from '@/types'; import { extractCareer } from '@/utils'; -const MyPage: React.FC = () => { +const MyInfoUpdatePage: React.FC = () => { const [openModalCase, setOpenModalCase] = useState< 'close' | 'profileImgRegister' | 'signOut' | 'withdraw' >('close'); @@ -105,4 +105,4 @@ const MyPage: React.FC = () => { ); }; -export default MyPage; +export default MyInfoUpdatePage; From 6226f4d831f5e513945c324df5ab30df95474d02 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Fri, 8 Dec 2023 15:22:45 +0900 Subject: [PATCH 047/130] Delete uselessCode --- src/pageContainer/mypage/update/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pageContainer/mypage/update/index.tsx b/src/pageContainer/mypage/update/index.tsx index 68bd1a87..df8474e6 100644 --- a/src/pageContainer/mypage/update/index.tsx +++ b/src/pageContainer/mypage/update/index.tsx @@ -16,16 +16,13 @@ import { } from '@/components'; import { useGetMyInfo } from '@/hooks'; import type { CareerFormType } from '@/types'; -import { extractCareer } from '@/utils'; const MyInfoUpdatePage: React.FC = () => { const [openModalCase, setOpenModalCase] = useState< 'close' | 'profileImgRegister' | 'signOut' | 'withdraw' >('close'); - const [careerArray, setCareerArray] = useState([ - extractCareer(null), - ]); + const [careerArray, setCareerArray] = useState([]); const { push } = useRouter(); From 149812238269293695d2da97eb1526bc47e89002 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 11 Dec 2023 19:42:00 +0900 Subject: [PATCH 048/130] Delete dynamic button text --- .../Buttons/ProfileUpdate/index.tsx | 20 ++++++------------- src/components/Profile/index.tsx | 16 +-------------- 2 files changed, 7 insertions(+), 29 deletions(-) diff --git a/src/components/Buttons/ProfileUpdate/index.tsx b/src/components/Buttons/ProfileUpdate/index.tsx index 94eca4e7..edef34e3 100644 --- a/src/components/Buttons/ProfileUpdate/index.tsx +++ b/src/components/Buttons/ProfileUpdate/index.tsx @@ -1,7 +1,5 @@ 'use client'; -import { usePathname } from 'next/navigation'; - import * as S from './style'; import { PenIcon } from '@/assets'; @@ -10,17 +8,11 @@ interface Props { onClick?: () => void; } -const MY_PAGE_PATh = '/mypage' as const; - -const ProfileUpdateButton: React.FC = ({ onClick }) => { - const pathName = usePathname(); - - return ( - - - {pathName === MY_PAGE_PATh ? '프로필 수정' : '이미지 수정'} - - ); -}; +const ProfileUpdateButton: React.FC = ({ onClick }) => ( + + + 이미지 수정 + +); export default ProfileUpdateButton; diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx index 441e0bfd..8a9188f8 100644 --- a/src/components/Profile/index.tsx +++ b/src/components/Profile/index.tsx @@ -1,7 +1,6 @@ 'use client'; import Image from 'next/image'; -import { usePathname, useRouter } from 'next/navigation'; import * as S from './style'; @@ -17,9 +16,6 @@ interface Props { profileRegisterModalOpen?: () => void; } -const MY_PAGE_PATh = '/mypage' as const; -const MY_INFO_UPDATE_PAGE_PATh = '/mypage/update' as const; - const Profile: React.FC = ({ name, generation, @@ -29,16 +25,6 @@ const Profile: React.FC = ({ // TODO : server side 와 마크업을 일치시키기 위한 로직 변경 필요. const randomValue = Math.floor(Math.random() * 5); //0부터 4까지 중의 랜덤값 생성 - const pathName = usePathname(); - - const { push } = useRouter(); - - const handleClick = () => { - if (pathName === MY_PAGE_PATh) push(MY_INFO_UPDATE_PAGE_PATh); - else if (pathName === MY_INFO_UPDATE_PAGE_PATh && profileRegisterModalOpen) - profileRegisterModalOpen(); - }; - return ( @@ -52,7 +38,7 @@ const Profile: React.FC = ({ {generation}기 {name} - + ); From 12d71ac2bda8b0da63afa30c5731480c9beaee79 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 11 Dec 2023 20:00:02 +0900 Subject: [PATCH 049/130] Add privacyCard --- src/components/PrivacyCard/index.stories.tsx | 32 ++++++++++++++++++++ src/components/PrivacyCard/index.tsx | 25 +++++++++++++++ src/components/PrivacyCard/style.ts | 30 ++++++++++++++++++ 3 files changed, 87 insertions(+) create mode 100644 src/components/PrivacyCard/index.stories.tsx create mode 100644 src/components/PrivacyCard/index.tsx create mode 100644 src/components/PrivacyCard/style.ts diff --git a/src/components/PrivacyCard/index.stories.tsx b/src/components/PrivacyCard/index.stories.tsx new file mode 100644 index 00000000..a1b8686f --- /dev/null +++ b/src/components/PrivacyCard/index.stories.tsx @@ -0,0 +1,32 @@ +import PrivacyCard from '.'; + +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + component: PrivacyCard, + parameters: { + layout: 'padded', + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + privacy: { + privacyKey: '전화번호', + privacyValue: '010 9999 9999️', + }, + }, +}; + +export const Secondary: Story = { + args: { + privacy: { + privacyKey: 'SNS', + privacyValue: 'https://www.instagram.com/', + }, + }, +}; diff --git a/src/components/PrivacyCard/index.tsx b/src/components/PrivacyCard/index.tsx new file mode 100644 index 00000000..0ea75053 --- /dev/null +++ b/src/components/PrivacyCard/index.tsx @@ -0,0 +1,25 @@ +'use client'; + +import React from 'react'; + +import * as S from './style'; + +interface PrivacyType { + privacyKey: string; + privacyValue: string; +} + +interface Props { + privacy: PrivacyType; +} + +const PrivacyCard: React.FC = ({ privacy }) => ( + + + {privacy.privacyKey} + {privacy.privacyValue} + + +); + +export default PrivacyCard; diff --git a/src/components/PrivacyCard/style.ts b/src/components/PrivacyCard/style.ts new file mode 100644 index 00000000..88248dfa --- /dev/null +++ b/src/components/PrivacyCard/style.ts @@ -0,0 +1,30 @@ +import styled from '@emotion/styled'; + +export const PrivacyCardContainer = styled.div` + max-width: 18.25rem; + padding: 1rem; + border: 0.0625rem solid ${({ theme }) => theme.color.grey[100]}; + border-radius: 0.625rem; +`; + +export const PrivacyInfoBox = styled.div` + display: flex; + flex-direction: column; + row-gap: 0.5rem; +`; + +export const PrivacyKey = styled.p` + ${({ theme }) => theme.typo.caption}; + color: ${({ theme }) => theme.color.grey[900]}; +`; + +export const PrivacyValue = styled.p` + ${({ theme }) => theme.typo.body1}; + color: ${({ theme }) => theme.color.black}; +`; + +export const PrivacyPeriod = styled.p<{ isWorking: boolean }>` + ${({ theme }) => theme.typo.body2}; + color: ${({ theme, isWorking }) => + isWorking ? theme.color.skyBlue[400] : theme.color.grey[500]}; +`; From a075596f87ef8a9b894fd906302dc319f4ece825 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 11 Dec 2023 20:46:59 +0900 Subject: [PATCH 050/130] Update myProfile --- src/components/index.ts | 1 + src/pageContainer/mypage/index.tsx | 38 +++++++++++++++++++++++------- src/pageContainer/mypage/style.ts | 14 +++++++---- src/types/mentorInfo.ts | 1 + 4 files changed, 42 insertions(+), 12 deletions(-) diff --git a/src/components/index.ts b/src/components/index.ts index e09dc583..b8ce8591 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -13,6 +13,7 @@ export { default as MainPage } from './MainPage'; export { default as MentorCard } from './MentorCard'; export { default as MentorList } from './MentorList'; export { default as NavigationEvents } from './NavigationEvents'; +export { default as PrivacyCard } from './PrivacyCard'; export { default as Profile } from './Profile'; export { default as RandomMentorImg } from './MentorCard/RandomMentorImg'; export { default as SearchBar } from './SearchBar'; diff --git a/src/pageContainer/mypage/index.tsx b/src/pageContainer/mypage/index.tsx index 09e9a98a..571df0cd 100644 --- a/src/pageContainer/mypage/index.tsx +++ b/src/pageContainer/mypage/index.tsx @@ -13,6 +13,7 @@ import { CareerCard, Header, ProfileImgRegisterModal, + PrivacyCard, } from '@/components'; import { useGetMyInfo } from '@/hooks'; @@ -53,14 +54,35 @@ const MyPage: React.FC = () => { /> - - 재직 정보 - - {data.career.map((career) => ( - - ))} - - + + + 개인정보 + + + {data.SNS && ( + + )} + + + + 재직 정보 + + {data.career.map((career) => ( + + ))} + + + )} {/* 추후 기능 구현 시 사용 diff --git a/src/pageContainer/mypage/style.ts b/src/pageContainer/mypage/style.ts index fd32fa0f..aec65cf7 100644 --- a/src/pageContainer/mypage/style.ts +++ b/src/pageContainer/mypage/style.ts @@ -22,14 +22,20 @@ export const Line = styled.div` background: ${({ theme }) => theme.color.grey[50]}; `; -export const CareerContainer = styled.div` +export const InfoContainer = styled.div` + display: flex; + flex-direction: column; + gap: 3rem; + margin-top: 3.5rem; +`; + +export const InfoWrapper = styled.div` display: flex; flex-direction: column; gap: 1rem; - margin: 3.5rem 0 2.5rem; `; -export const CareerInfoText = styled.span` +export const InfoText = styled.span` color: ${({ theme }) => theme.color.grey[900]}; font-size: 1.125rem; @@ -37,7 +43,7 @@ export const CareerInfoText = styled.span` line-height: 150%; `; -export const CareerBox = styled.div` +export const InfoBox = styled.div` display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1rem; diff --git a/src/types/mentorInfo.ts b/src/types/mentorInfo.ts index 2a0b375e..a98bdb4e 100644 --- a/src/types/mentorInfo.ts +++ b/src/types/mentorInfo.ts @@ -6,6 +6,7 @@ export interface MentorInfoType { email: string; generation: number; SNS?: string; + phoneNumber: string; profileUrl?: string; registered: boolean; career: CareerType[]; From 5fca1e65aeea29916202cc9acb53d261f172f238 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 11 Dec 2023 20:53:10 +0900 Subject: [PATCH 051/130] Add updateButton --- src/pageContainer/mypage/index.tsx | 13 +++++++++---- src/pageContainer/mypage/style.ts | 15 ++++++++++++++- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/pageContainer/mypage/index.tsx b/src/pageContainer/mypage/index.tsx index 571df0cd..23aa900c 100644 --- a/src/pageContainer/mypage/index.tsx +++ b/src/pageContainer/mypage/index.tsx @@ -34,6 +34,8 @@ const MyPage: React.FC = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [isError]); + const onUpdateButtonClick = () => push('/mypage/update'); + return ( <> {openModalCase === 'profileImgRegister' && ( @@ -55,7 +57,7 @@ const MyPage: React.FC = () => { - + 개인정보 { /> )} - - + + 재직 정보 {data.career.map((career) => ( ))} - + )} @@ -95,6 +97,9 @@ const MyPage: React.FC = () => { 회원탈퇴 */} + + 개인정보 및 재직정보 수정 + ); diff --git a/src/pageContainer/mypage/style.ts b/src/pageContainer/mypage/style.ts index aec65cf7..a322c546 100644 --- a/src/pageContainer/mypage/style.ts +++ b/src/pageContainer/mypage/style.ts @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; export const Container = styled.div` - padding-top: 4.375rem; + padding: 4.375rem 0 2.5rem; position: relative; @media (max-width: 600px) { @@ -78,3 +78,16 @@ export const WithdrawText = styled.span` ${({ theme }) => theme.typo.body1}; color: ${({ theme }) => theme.color.grey[500]}; `; + +export const UpdateButton = styled.button` + ${({ theme }) => theme.typo.button}; + width: 100%; + height: 2.75rem; + border-radius: 0.625rem; + background: ${({ theme }) => theme.color.skyBlue[400]}; + display: flex; + justify-content: center; + align-items: center; + color: ${({ theme }) => theme.color.white}; + margin-top: 5.75rem; +`; From 9d81117e47bfa482c10461552b738ac07cd4ac33 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 11 Dec 2023 21:12:15 +0900 Subject: [PATCH 052/130] Update mentorRegisterPage --- src/pageContainer/mypage/update/index.tsx | 12 ----- src/pageContainer/register/mentor/index.tsx | 52 +++++++++++++++++++-- 2 files changed, 49 insertions(+), 15 deletions(-) diff --git a/src/pageContainer/mypage/update/index.tsx b/src/pageContainer/mypage/update/index.tsx index df8474e6..b71bef31 100644 --- a/src/pageContainer/mypage/update/index.tsx +++ b/src/pageContainer/mypage/update/index.tsx @@ -9,7 +9,6 @@ import { toast } from 'react-toastify'; import * as S from './style'; import { - Profile, Header, ProfileImgRegisterModal, CareerRegistrationBox, @@ -77,17 +76,6 @@ const MyInfoUpdatePage: React.FC = () => { {data && ( <> - - - setOpenModalCase('profileImgRegister') - } - /> - - {careerArray.map((career) => ( = ({ tempMentorId, mentorInfo }) => { const [careerArray, setCareerArray] = useState([ extractCareer(mentorInfo?.company ?? null), ]); + const [isUpdate, setIsUpdate] = useState(false); const { push } = useRouter(); + const { data, isError } = useGetMyInfo(); + const { mutate: mutateDeleteTempMentor } = useDeleteTempMentor({ onSettled: () => push('/'), }); @@ -56,6 +63,11 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { onSuccess: () => handleMentorRegisterSuccess(), }); + useEffect(() => { + if (!data || isError) setIsUpdate(false); + else setIsUpdate(true); + }, [data, isError]); + const handleMentorRegisterSuccess = () => { toast.success('멘토 등록에 성공하였습니다.'); if (tempMentorId) { @@ -132,6 +144,38 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { toast.error('입력 정보를 다시 확인해주세요.'); }; + useEffect(() => { + if (data?.career) { + const career = data.career; + const newCareerList: CareerFormType[] = career.map((career) => { + const startDate = new Date(career.startDate); + const endDate = career.endDate ? new Date(career.endDate) : null; + + const newCareer: CareerFormType = { + id: career.id, + companyName: { value: career.companyName, errorMessage: null }, + companyUrl: { value: career.companyUrl ?? '', errorMessage: null }, + position: { value: career.position, errorMessage: null }, + startYear: { value: startDate.getFullYear(), errorMessage: null }, + startMonth: { value: startDate.getMonth(), errorMessage: null }, + endYear: { + value: endDate ? endDate.getFullYear() : '년', + errorMessage: null, + }, + endMonth: { + value: endDate ? endDate.getMonth() : '월', + errorMessage: null, + }, + isWorking: { value: career.isWorking, errorMessage: null }, + }; + + return newCareer; + }); + + setCareerArray(newCareerList); + } + }, [data?.career]); + return ( <>
@@ -183,7 +227,9 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { key={career.id} /> ))} - 등록 + + {isUpdate ? '수정완료' : '등록'} + ); From 04db59ba4a389017dff704c20d3c97c3efbd9fc0 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 11 Dec 2023 22:15:25 +0900 Subject: [PATCH 053/130] Update default value --- src/pageContainer/register/mentor/index.tsx | 79 +++++++++++---------- 1 file changed, 42 insertions(+), 37 deletions(-) diff --git a/src/pageContainer/register/mentor/index.tsx b/src/pageContainer/register/mentor/index.tsx index 7859890b..42d9abc5 100644 --- a/src/pageContainer/register/mentor/index.tsx +++ b/src/pageContainer/register/mentor/index.tsx @@ -63,11 +63,6 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { onSuccess: () => handleMentorRegisterSuccess(), }); - useEffect(() => { - if (!data || isError) setIsUpdate(false); - else setIsUpdate(true); - }, [data, isError]); - const handleMentorRegisterSuccess = () => { toast.success('멘토 등록에 성공하였습니다.'); if (tempMentorId) { @@ -80,6 +75,7 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { register, handleSubmit, formState: { errors }, + setValue, } = useForm({ resolver: zodResolver(mentorInfoFormSchema), defaultValues: { @@ -91,6 +87,47 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { }, }); + useEffect(() => { + if (!data || isError) setIsUpdate(false); + else { + const career = data.career; + const newCareerList: CareerFormType[] = career.map((career) => { + const startDate = new Date(career.startDate); + const endDate = career.endDate ? new Date(career.endDate) : null; + + const newCareer: CareerFormType = { + id: career.id, + companyName: { value: career.companyName, errorMessage: null }, + companyUrl: { value: career.companyUrl ?? '', errorMessage: null }, + position: { value: career.position, errorMessage: null }, + startYear: { value: startDate.getFullYear(), errorMessage: null }, + startMonth: { value: startDate.getMonth(), errorMessage: null }, + endYear: { + value: endDate ? endDate.getFullYear() : '년', + errorMessage: null, + }, + endMonth: { + value: endDate ? endDate.getMonth() : '월', + errorMessage: null, + }, + isWorking: { value: career.isWorking, errorMessage: null }, + }; + + return newCareer; + }); + + setCareerArray(newCareerList); + + setValue('name', data.name); + setValue('phoneNumber', data.phoneNumber); + setValue('email', data.email); + setValue('snsUrl', data.SNS); + setValue('generation', data.generation.toString()); + + setIsUpdate(true); + } + }, [data, isError, setValue]); + const onSubmit: SubmitHandler = (data) => { const validatedArray = careerValidation(careerArray, setCareerArray); @@ -144,38 +181,6 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { toast.error('입력 정보를 다시 확인해주세요.'); }; - useEffect(() => { - if (data?.career) { - const career = data.career; - const newCareerList: CareerFormType[] = career.map((career) => { - const startDate = new Date(career.startDate); - const endDate = career.endDate ? new Date(career.endDate) : null; - - const newCareer: CareerFormType = { - id: career.id, - companyName: { value: career.companyName, errorMessage: null }, - companyUrl: { value: career.companyUrl ?? '', errorMessage: null }, - position: { value: career.position, errorMessage: null }, - startYear: { value: startDate.getFullYear(), errorMessage: null }, - startMonth: { value: startDate.getMonth(), errorMessage: null }, - endYear: { - value: endDate ? endDate.getFullYear() : '년', - errorMessage: null, - }, - endMonth: { - value: endDate ? endDate.getMonth() : '월', - errorMessage: null, - }, - isWorking: { value: career.isWorking, errorMessage: null }, - }; - - return newCareer; - }); - - setCareerArray(newCareerList); - } - }, [data?.career]); - return ( <>
From b5db876761551a816b2df502239c005b7ebcee1e Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 11 Dec 2023 22:16:53 +0900 Subject: [PATCH 054/130] Add annotate --- src/pageContainer/register/mentor/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pageContainer/register/mentor/index.tsx b/src/pageContainer/register/mentor/index.tsx index 42d9abc5..6dbed6cd 100644 --- a/src/pageContainer/register/mentor/index.tsx +++ b/src/pageContainer/register/mentor/index.tsx @@ -173,7 +173,8 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { body.career.push(careerData); }); - mutateMentorRegister(body); + if (!isUpdate) mutateMentorRegister(body); + // else 내 정보 수정 hook }; const onError: SubmitErrorHandler = () => { From a57801cbb19ee29092fdd850afc80455741dc138 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 11 Dec 2023 22:19:50 +0900 Subject: [PATCH 055/130] Delete mypage/update --- src/app/mypage/update/page.tsx | 11 --- src/pageContainer/index.ts | 1 - src/pageContainer/mypage/index.tsx | 2 +- src/pageContainer/mypage/update/index.tsx | 93 ----------------------- src/pageContainer/mypage/update/style.ts | 24 ------ 5 files changed, 1 insertion(+), 130 deletions(-) delete mode 100644 src/app/mypage/update/page.tsx delete mode 100644 src/pageContainer/mypage/update/index.tsx delete mode 100644 src/pageContainer/mypage/update/style.ts diff --git a/src/app/mypage/update/page.tsx b/src/app/mypage/update/page.tsx deleted file mode 100644 index f696ce61..00000000 --- a/src/app/mypage/update/page.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { MyInfoUpdate } from '@/pageContainer'; - -import type { Metadata } from 'next'; - -export const metadata: Metadata = { - title: '내 정보 수정', -}; - -const MyInfoUpdatePage = () => ; - -export default MyInfoUpdatePage; diff --git a/src/pageContainer/index.ts b/src/pageContainer/index.ts index 2557d22a..fbc5379e 100644 --- a/src/pageContainer/index.ts +++ b/src/pageContainer/index.ts @@ -1,6 +1,5 @@ export { default as Gwangya } from './gwangya'; export { default as MentorRegister } from './register/mentor'; export { default as MyInfoPage } from './mypage'; -export { default as MyInfoUpdate } from './mypage/update'; export { default as SignIn } from './signin'; export { default as SignUp } from './signup'; diff --git a/src/pageContainer/mypage/index.tsx b/src/pageContainer/mypage/index.tsx index 23aa900c..6f1f5dd4 100644 --- a/src/pageContainer/mypage/index.tsx +++ b/src/pageContainer/mypage/index.tsx @@ -34,7 +34,7 @@ const MyPage: React.FC = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [isError]); - const onUpdateButtonClick = () => push('/mypage/update'); + const onUpdateButtonClick = () => push('/register/mentor'); return ( <> diff --git a/src/pageContainer/mypage/update/index.tsx b/src/pageContainer/mypage/update/index.tsx deleted file mode 100644 index b71bef31..00000000 --- a/src/pageContainer/mypage/update/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -'use client'; - -import { useEffect, useState } from 'react'; - -import { useRouter } from 'next/navigation'; - -import { toast } from 'react-toastify'; - -import * as S from './style'; - -import { - Header, - ProfileImgRegisterModal, - CareerRegistrationBox, -} from '@/components'; -import { useGetMyInfo } from '@/hooks'; -import type { CareerFormType } from '@/types'; - -const MyInfoUpdatePage: React.FC = () => { - const [openModalCase, setOpenModalCase] = useState< - 'close' | 'profileImgRegister' | 'signOut' | 'withdraw' - >('close'); - - const [careerArray, setCareerArray] = useState([]); - - const { push } = useRouter(); - - const { data, isError } = useGetMyInfo(); - - useEffect(() => { - if (isError) { - toast.info('멘티인 사용자에게는 지원되지 않는 기능입니다.'); - push('/'); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isError]); - - useEffect(() => { - if (data?.career) { - const career = data.career; - const newCareerList: CareerFormType[] = career.map((career) => { - const startDate = new Date(career.startDate); - const endDate = career.endDate ? new Date(career.endDate) : null; - - const newCareer: CareerFormType = { - id: career.id, - companyName: { value: career.companyName, errorMessage: null }, - companyUrl: { value: career.companyUrl ?? '', errorMessage: null }, - position: { value: career.position, errorMessage: null }, - startYear: { value: startDate.getFullYear(), errorMessage: null }, - startMonth: { value: startDate.getMonth(), errorMessage: null }, - endYear: { - value: endDate ? endDate.getFullYear() : '년', - errorMessage: null, - }, - endMonth: { - value: endDate ? endDate.getMonth() : '월', - errorMessage: null, - }, - isWorking: { value: career.isWorking, errorMessage: null }, - }; - - return newCareer; - }); - - setCareerArray(newCareerList); - } - }, [data?.career]); - - return ( - <> - {openModalCase === 'profileImgRegister' && ( - setOpenModalCase('close')} /> - )} -
- - {data && ( - <> - {careerArray.map((career) => ( - - ))} - - )} - - - ); -}; - -export default MyInfoUpdatePage; diff --git a/src/pageContainer/mypage/update/style.ts b/src/pageContainer/mypage/update/style.ts deleted file mode 100644 index 6a4639fc..00000000 --- a/src/pageContainer/mypage/update/style.ts +++ /dev/null @@ -1,24 +0,0 @@ -import styled from '@emotion/styled'; - -export const Container = styled.div` - padding-top: 4.375rem; - position: relative; - padding-bottom: 3.75rem; - - @media (max-width: 600px) { - padding: 7.5rem 1rem 3.75rem 1rem; - } -`; - -export const ProfileContainer = styled.div` - display: flex; - align-items: center; - justify-content: center; - padding: 3.5rem 0; -`; - -export const Line = styled.div` - height: 0.75rem; - border-radius: 0.0625rem; - background: ${({ theme }) => theme.color.grey[50]}; -`; From c96b343d6440817f4fd93cec6fc295084f3d6409 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=A9=EA=B0=80=EC=98=A8?= <128475660+gaoooon@users.noreply.github.com> Date: Wed, 13 Dec 2023 15:14:47 +0900 Subject: [PATCH 056/130] Update src/components/ChattingListCard/style.ts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 김형록 --- src/components/ChattingListCard/style.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ChattingListCard/style.ts b/src/components/ChattingListCard/style.ts index 08743357..0dc436bc 100644 --- a/src/components/ChattingListCard/style.ts +++ b/src/components/ChattingListCard/style.ts @@ -2,7 +2,6 @@ import styled from '@emotion/styled'; export const Container = styled.div` padding: 0.75rem 1rem; - width: 37.5rem; display: flex; justify-content: space-between; align-items: center; From df63a2d78639c0141de748e2b570970218003203 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=A9=EA=B0=80=EC=98=A8?= <128475660+gaoooon@users.noreply.github.com> Date: Wed, 13 Dec 2023 15:24:56 +0900 Subject: [PATCH 057/130] Update src/components/ChattingListCard/index.stories.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 김형록 --- src/components/ChattingListCard/index.stories.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/ChattingListCard/index.stories.tsx b/src/components/ChattingListCard/index.stories.tsx index 30f90af6..5b21786a 100644 --- a/src/components/ChattingListCard/index.stories.tsx +++ b/src/components/ChattingListCard/index.stories.tsx @@ -23,14 +23,12 @@ type Story = StoryObj; export const Primary: Story = { args: { - opponent: { ...opponent }, isNewMessage: false, }, }; export const isNewMessage: Story = { args: { - opponent: { ...opponent }, isNewMessage: true, }, }; From 405132bbae3c0419e3f073679b7aa44d55598395 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 13 Dec 2023 15:29:31 +0900 Subject: [PATCH 058/130] Add opponentInfo --- src/types/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/types/index.ts b/src/types/index.ts index d3972e30..b551ebeb 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -4,5 +4,6 @@ export * from './generation'; export * from './mentor'; export * from './mentorInfo'; export * from './mentorInfoForm'; +export * from './opponentInfo'; export * from './position'; export * from './worker'; From 8d85c6a1d5c565a74bbf63bf87a6d99a7bee1bea Mon Sep 17 00:00:00 2001 From: gaoooon Date: Wed, 13 Dec 2023 15:29:44 +0900 Subject: [PATCH 059/130] Update type import --- src/components/ChattingListCard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChattingListCard/index.tsx b/src/components/ChattingListCard/index.tsx index 48fefcec..5146aff0 100644 --- a/src/components/ChattingListCard/index.tsx +++ b/src/components/ChattingListCard/index.tsx @@ -5,7 +5,7 @@ import React from 'react'; import * as S from './style'; import { PersonImg4 } from '@/assets'; -import type { OpponentInfo } from '@/types/opponentInfo'; +import type { OpponentInfo } from '@/types'; interface Props { opponent: OpponentInfo; From 1f0ee71ea85466bbc1a8c8e5032264d24ff906a7 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Thu, 14 Dec 2023 17:45:01 +0900 Subject: [PATCH 060/130] Update case --- src/assets/GoBackIcon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/GoBackIcon.tsx b/src/assets/GoBackIcon.tsx index 610be17c..7b350845 100644 --- a/src/assets/GoBackIcon.tsx +++ b/src/assets/GoBackIcon.tsx @@ -10,8 +10,8 @@ const GoBackIcon = () => ( From 8d48edfef80fdad7855e464ff1606b5d3ea49eb2 Mon Sep 17 00:00:00 2001 From: gaoooon Date: Thu, 14 Dec 2023 17:47:44 +0900 Subject: [PATCH 061/130] Update function name --- src/components/ChattingHeader/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ChattingHeader/index.tsx b/src/components/ChattingHeader/index.tsx index ae93fabe..c928eea3 100644 --- a/src/components/ChattingHeader/index.tsx +++ b/src/components/ChattingHeader/index.tsx @@ -15,11 +15,11 @@ const ChattingHeader: React.FC = ({ name, generation }) => { const { push } = useRouter(); // 어디로 이동해야 할지 정해지지 않아 /로 이동하게 해두었습니다! - const handleGoBackIconClick = () => push('/'); + const handleGoBackClick = () => push('/'); return ( - + From d21e03bdfcefef341f07783b30ba5b7cf2535c25 Mon Sep 17 00:00:00 2001 From: gjaegyun Date: Thu, 14 Dec 2023 22:39:44 +0900 Subject: [PATCH 062/130] Fix padding --- .vscode/settings.json | 2 +- src/components/CommunityCard/style.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 246e9c6e..58aaa72d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" } } diff --git a/src/components/CommunityCard/style.ts b/src/components/CommunityCard/style.ts index 4de76447..d4949d81 100644 --- a/src/components/CommunityCard/style.ts +++ b/src/components/CommunityCard/style.ts @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; export const CardWrapper = styled.div` - padding: 0.75rem 1rem; + padding: 0rem 1rem; display: flex; flex-direction: column; gap: 0.37rem; From 4728da03fafd66dc0fd9aaf9dfbc7f44b2a24cda Mon Sep 17 00:00:00 2001 From: gjaegyun Date: Thu, 14 Dec 2023 22:51:44 +0900 Subject: [PATCH 063/130] Fix setting --- .vscode/settings.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 58aaa72d..246e9c6e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit" + "source.fixAll.eslint": true } } From 7951f78efa52cfc7724c32206150a64863346b11 Mon Sep 17 00:00:00 2001 From: gjaegyun Date: Thu, 14 Dec 2023 23:19:30 +0900 Subject: [PATCH 064/130] Fix rem --- src/components/CommunityCard/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CommunityCard/style.ts b/src/components/CommunityCard/style.ts index d4949d81..e8b12398 100644 --- a/src/components/CommunityCard/style.ts +++ b/src/components/CommunityCard/style.ts @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; export const CardWrapper = styled.div` - padding: 0rem 1rem; + padding: 0 1rem; display: flex; flex-direction: column; gap: 0.37rem; From dc5f521e4953bfedbbd891d677e11beaf10ba500 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=A9=EA=B0=80=EC=98=A8?= <128475660+gaoooon@users.noreply.github.com> Date: Tue, 19 Dec 2023 14:42:57 +0900 Subject: [PATCH 065/130] Update src/components/ChattingListCard/index.stories.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 김형록 --- src/components/ChattingListCard/index.stories.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/ChattingListCard/index.stories.tsx b/src/components/ChattingListCard/index.stories.tsx index 30f90af6..5b21786a 100644 --- a/src/components/ChattingListCard/index.stories.tsx +++ b/src/components/ChattingListCard/index.stories.tsx @@ -23,14 +23,12 @@ type Story = StoryObj; export const Primary: Story = { args: { - opponent: { ...opponent }, isNewMessage: false, }, }; export const isNewMessage: Story = { args: { - opponent: { ...opponent }, isNewMessage: true, }, }; From 76943332b8aa29f510ecabd5d149efdde8ce721c Mon Sep 17 00:00:00 2001 From: gaoooon Date: Tue, 19 Dec 2023 15:50:59 +0900 Subject: [PATCH 066/130] Update MessageCard --- src/components/MessageCard/index.tsx | 14 +++++++++++--- src/components/MessageCard/style.ts | 26 +++++++++++++------------- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/components/MessageCard/index.tsx b/src/components/MessageCard/index.tsx index 6ce69744..f0d1dd59 100644 --- a/src/components/MessageCard/index.tsx +++ b/src/components/MessageCard/index.tsx @@ -10,9 +10,17 @@ interface Props { } const MessageCard: React.FC = ({ children, isMine }) => ( - - {children} - + <> + {isMine ? ( + + {children} + + ) : ( + + {children} + + )} + ); export default MessageCard; diff --git a/src/components/MessageCard/style.ts b/src/components/MessageCard/style.ts index 2163b6f6..73c3cf70 100644 --- a/src/components/MessageCard/style.ts +++ b/src/components/MessageCard/style.ts @@ -1,21 +1,21 @@ import styled from '@emotion/styled'; -export const Container = styled.div<{ isMine: boolean }>` +export const Container = styled.div` ${({ theme }) => theme.typo.body1}; padding: 0.5rem 1.25rem; display: inline-block; - ${({ theme, isMine }) => - isMine - ? ` - border-radius: 1.25rem 1.25rem 0rem 1.25rem; - color: ${theme.color.white}; - background-color: ${theme.color.skyBlue[400]}; - ` - : ` - border-radius: 0rem 1.25rem 1.25rem 1.25rem; - color: ${theme.color.grey[800]}; - background-color: ${theme.color.grey[100]}; - `}; +`; + +export const MineContainer = styled(Container)` + border-radius: 1.25rem 1.25rem 0rem 1.25rem; + color: ${({ theme }) => theme.color.white}; + background-color: ${({ theme }) => theme.color.skyBlue[400]}; +`; + +export const OpponentContainer = styled(Container)` + border-radius: 0rem 1.25rem 1.25rem 1.25rem; + color: ${({ theme }) => theme.color.grey[800]}; + background-color: ${({ theme }) => theme.color.grey[100]}; `; export const Content = styled.p``; From 65568b8aed167a21f2acabd262c8945a94a6063e Mon Sep 17 00:00:00 2001 From: gaoooon Date: Thu, 21 Dec 2023 17:13:51 +0900 Subject: [PATCH 067/130] Update index.tsx --- src/components/MessageCard/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MessageCard/index.tsx b/src/components/MessageCard/index.tsx index f0d1dd59..baa1ce49 100644 --- a/src/components/MessageCard/index.tsx +++ b/src/components/MessageCard/index.tsx @@ -13,11 +13,11 @@ const MessageCard: React.FC = ({ children, isMine }) => ( <> {isMine ? ( - {children} + {children} ) : ( - {children} + {children} )} From 29d410f059e25bf56bf19e80054b5fbd8f181dd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=8A=B9=EC=A0=9C?= <106712562+frorong@users.noreply.github.com> Date: Thu, 21 Dec 2023 17:17:28 +0900 Subject: [PATCH 068/130] Update src/components/PrivacyCard/index.stories.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 김형록 --- src/components/PrivacyCard/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PrivacyCard/index.stories.tsx b/src/components/PrivacyCard/index.stories.tsx index a1b8686f..ff32454f 100644 --- a/src/components/PrivacyCard/index.stories.tsx +++ b/src/components/PrivacyCard/index.stories.tsx @@ -13,7 +13,7 @@ export default meta; type Story = StoryObj; -export const Primary: Story = { +export const PhoneNumber: Story = { args: { privacy: { privacyKey: '전화번호', From c5ca942618a7842fcfd664e04e2ec98bf73297cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=8A=B9=EC=A0=9C?= <106712562+frorong@users.noreply.github.com> Date: Thu, 21 Dec 2023 17:17:51 +0900 Subject: [PATCH 069/130] Update src/components/PrivacyCard/index.stories.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 김형록 --- src/components/PrivacyCard/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PrivacyCard/index.stories.tsx b/src/components/PrivacyCard/index.stories.tsx index ff32454f..d310bbd9 100644 --- a/src/components/PrivacyCard/index.stories.tsx +++ b/src/components/PrivacyCard/index.stories.tsx @@ -22,7 +22,7 @@ export const PhoneNumber: Story = { }, }; -export const Secondary: Story = { +export const SNS: Story = { args: { privacy: { privacyKey: 'SNS', From 2c7caca16eea206fe462e8e03b5f30b1e572054c Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 21 Dec 2023 18:03:49 +0900 Subject: [PATCH 070/130] Add formatTelNum --- src/pageContainer/mypage/index.tsx | 3 ++- src/utils/formatTelNum.ts | 4 ++++ src/utils/index.ts | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/utils/formatTelNum.ts diff --git a/src/pageContainer/mypage/index.tsx b/src/pageContainer/mypage/index.tsx index 6f1f5dd4..cbd5a183 100644 --- a/src/pageContainer/mypage/index.tsx +++ b/src/pageContainer/mypage/index.tsx @@ -16,6 +16,7 @@ import { PrivacyCard, } from '@/components'; import { useGetMyInfo } from '@/hooks'; +import { formatTelNum } from '@/utils'; const MyPage: React.FC = () => { const [openModalCase, setOpenModalCase] = useState< @@ -63,7 +64,7 @@ const MyPage: React.FC = () => { {data.SNS && ( diff --git a/src/utils/formatTelNum.ts b/src/utils/formatTelNum.ts new file mode 100644 index 00000000..d078b610 --- /dev/null +++ b/src/utils/formatTelNum.ts @@ -0,0 +1,4 @@ +const formatTelNum = (telNum: string) => + `${telNum.slice(0, 3)} ${telNum.slice(3, 7)} ${telNum.slice(7, 11)}`; + +export default formatTelNum; diff --git a/src/utils/index.ts b/src/utils/index.ts index 406c3a18..c6e56c44 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -3,6 +3,7 @@ export { default as careerValidation } from './careerValidation'; export { default as deepCopy } from './deepCopy'; export { default as extractCareer } from './extractCareer'; export { default as extractSubstring } from './extractSubstring'; +export { default as formatTelNum } from './formatTelNum'; export { default as getGwangyaToken } from './getGwangyaToken'; export { default as hasErrorInCareerArray } from './hasErrorInCareerArray'; export { default as isExistCookie } from './isExistCookie'; From 89336db3416cecb4cc9ca6d38311e12c3f0e5456 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=A9=EA=B0=80=EC=98=A8?= <128475660+gaoooon@users.noreply.github.com> Date: Fri, 22 Dec 2023 22:54:48 +0900 Subject: [PATCH 071/130] Update style.ts --- src/components/ChattingListCard/style.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ChattingListCard/style.ts b/src/components/ChattingListCard/style.ts index 08743357..0dc436bc 100644 --- a/src/components/ChattingListCard/style.ts +++ b/src/components/ChattingListCard/style.ts @@ -2,7 +2,6 @@ import styled from '@emotion/styled'; export const Container = styled.div` padding: 0.75rem 1rem; - width: 37.5rem; display: flex; justify-content: space-between; align-items: center; From 45f46042864140c8243d4c2f432fbb6331d5c0ed Mon Sep 17 00:00:00 2001 From: gaoooon Date: Sat, 23 Dec 2023 00:10:50 +0900 Subject: [PATCH 072/130] Delete spaceBox --- src/components/ChattingHeader/index.tsx | 1 - src/components/ChattingHeader/style.ts | 10 ++++------ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/ChattingHeader/index.tsx b/src/components/ChattingHeader/index.tsx index c928eea3..482ae2ce 100644 --- a/src/components/ChattingHeader/index.tsx +++ b/src/components/ChattingHeader/index.tsx @@ -25,7 +25,6 @@ const ChattingHeader: React.FC = ({ name, generation }) => { {generation}기 {name} - ); }; diff --git a/src/components/ChattingHeader/style.ts b/src/components/ChattingHeader/style.ts index dc7e20e3..c481c9d6 100644 --- a/src/components/ChattingHeader/style.ts +++ b/src/components/ChattingHeader/style.ts @@ -1,11 +1,12 @@ import styled from '@emotion/styled'; export const Container = styled.div` + position: relative; width: 100%; padding: 1rem 1.25rem; display: flex; align-items: center; - justify-content: space-between; + justify-content: center; `; export const IconBox = styled.div` @@ -13,14 +14,11 @@ export const IconBox = styled.div` display: flex; align-items: center; cursor: pointer; + position: absolute; + left: 1.69rem; `; export const OpponentInfo = styled.div` ${({ theme }) => theme.typo.subtitle}; color: ${({ theme }) => theme.color.grey[500]}; `; - -export const SpaceBox = styled.div` - width: 1.5rem; - height: 1.5rem; -`; From 6e12c31db5b482ba531a2e8a91db9060a6817a2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=A9=EA=B0=80=EC=98=A8?= <128475660+gaoooon@users.noreply.github.com> Date: Tue, 26 Dec 2023 14:22:16 +0900 Subject: [PATCH 073/130] Update GoBackIcon.tsx --- src/assets/GoBackIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/GoBackIcon.tsx b/src/assets/GoBackIcon.tsx index 7b350845..4770e445 100644 --- a/src/assets/GoBackIcon.tsx +++ b/src/assets/GoBackIcon.tsx @@ -6,7 +6,7 @@ const GoBackIcon = () => ( viewBox='0 0 10 17' fill='none' > - + Date: Tue, 26 Dec 2023 22:12:06 +0900 Subject: [PATCH 074/130] Update data => myInfoData --- src/pageContainer/register/mentor/index.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pageContainer/register/mentor/index.tsx b/src/pageContainer/register/mentor/index.tsx index 6dbed6cd..fb751d13 100644 --- a/src/pageContainer/register/mentor/index.tsx +++ b/src/pageContainer/register/mentor/index.tsx @@ -25,12 +25,12 @@ import { usePostMentorRegister, } from '@/hooks'; import { mentorInfoFormSchema } from '@/schemas'; -import type { RequestCareerType } from '@/types'; import type { CareerFormType, MentorInfoFormType, MentorType, TempMentorType, + RequestCareerType, } from '@/types'; import { careerValidation, @@ -52,7 +52,7 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { const { push } = useRouter(); - const { data, isError } = useGetMyInfo(); + const { data: myInfoData, isError } = useGetMyInfo(); const { mutate: mutateDeleteTempMentor } = useDeleteTempMentor({ onSettled: () => push('/'), @@ -88,9 +88,9 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { }); useEffect(() => { - if (!data || isError) setIsUpdate(false); + if (!myInfoData || isError) setIsUpdate(false); else { - const career = data.career; + const career = myInfoData.career; const newCareerList: CareerFormType[] = career.map((career) => { const startDate = new Date(career.startDate); const endDate = career.endDate ? new Date(career.endDate) : null; @@ -118,15 +118,15 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { setCareerArray(newCareerList); - setValue('name', data.name); - setValue('phoneNumber', data.phoneNumber); - setValue('email', data.email); - setValue('snsUrl', data.SNS); - setValue('generation', data.generation.toString()); + setValue('name', myInfoData.name); + setValue('phoneNumber', myInfoData.phoneNumber); + setValue('email', myInfoData.email); + setValue('snsUrl', myInfoData.SNS); + setValue('generation', myInfoData.generation.toString()); setIsUpdate(true); } - }, [data, isError, setValue]); + }, [myInfoData, isError, setValue]); const onSubmit: SubmitHandler = (data) => { const validatedArray = careerValidation(careerArray, setCareerArray); From 1be13e8a98d7b927fdc3e16f7ad2a28492707797 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 26 Dec 2023 22:20:23 +0900 Subject: [PATCH 075/130] Add usePutMentorRegister --- src/hooks/api/mentor/index.ts | 2 +- ...ister.ts => usePostMentorRegister copy.ts} | 0 src/hooks/api/mentor/usePutMentorRegister.ts | 26 +++++++++++++++++++ src/libs/api/http.ts | 3 +++ src/libs/api/queryKeys.ts | 1 + src/libs/api/requestUrlController.ts | 1 + 6 files changed, 32 insertions(+), 1 deletion(-) rename src/hooks/api/mentor/{usePostMentorRegister.ts => usePostMentorRegister copy.ts} (100%) create mode 100644 src/hooks/api/mentor/usePutMentorRegister.ts diff --git a/src/hooks/api/mentor/index.ts b/src/hooks/api/mentor/index.ts index 129d69e8..3a1045f8 100644 --- a/src/hooks/api/mentor/index.ts +++ b/src/hooks/api/mentor/index.ts @@ -1,4 +1,4 @@ export * from './useDeleteMyMentorData'; export * from './useGetMentorList'; export * from './useGetMyInfo'; -export * from './usePostMentorRegister'; +export * from './usePutMentorRegister'; diff --git a/src/hooks/api/mentor/usePostMentorRegister.ts b/src/hooks/api/mentor/usePostMentorRegister copy.ts similarity index 100% rename from src/hooks/api/mentor/usePostMentorRegister.ts rename to src/hooks/api/mentor/usePostMentorRegister copy.ts diff --git a/src/hooks/api/mentor/usePutMentorRegister.ts b/src/hooks/api/mentor/usePutMentorRegister.ts new file mode 100644 index 00000000..bc80ad2e --- /dev/null +++ b/src/hooks/api/mentor/usePutMentorRegister.ts @@ -0,0 +1,26 @@ +import { useMutation } from '@tanstack/react-query'; + +import { mentorQueryKeys, mentorUrl, put } from '@/libs'; +import type { MentorType, RequestCareerType } from '@/types'; + +import type { UseMutationOptions } from '@tanstack/react-query'; +import type { AxiosError } from 'axios'; + +interface CareerType extends RequestCareerType { + id: string; +} + +interface RequestType extends MentorType { + id?: string; + career: CareerType[]; +} + +export const usePutMentorRegister = ( + options?: UseMutationOptions +) => + useMutation({ + mutationKey: mentorQueryKeys.putMentorRegister(), + mutationFn: (mentorInfo: RequestType) => + put(mentorUrl.putMentorRegister(), mentorInfo), + ...options, + }); diff --git a/src/libs/api/http.ts b/src/libs/api/http.ts index 64547ca3..1ce5ad79 100644 --- a/src/libs/api/http.ts +++ b/src/libs/api/http.ts @@ -13,3 +13,6 @@ export const patch = async ( export const post = async (...args: Parameters) => await axiosInstance.post(...args); + +export const put = async (...args: Parameters) => + await axiosInstance.put(...args); diff --git a/src/libs/api/queryKeys.ts b/src/libs/api/queryKeys.ts index d0e20312..cbd3bfd7 100644 --- a/src/libs/api/queryKeys.ts +++ b/src/libs/api/queryKeys.ts @@ -13,6 +13,7 @@ export const menteeQueryKeys = { export const mentorQueryKeys = { postMentorRegister: () => ['mentor'], + putMentorRegister: () => ['mentor', 'update'], getMentorList: () => ['mentor', 'list'], deleteMyMentorData: () => ['mentor', 'my'], getMyInfo: () => ['mentor', 'my', 'info'], diff --git a/src/libs/api/requestUrlController.ts b/src/libs/api/requestUrlController.ts index a6e41e2c..86216cd7 100644 --- a/src/libs/api/requestUrlController.ts +++ b/src/libs/api/requestUrlController.ts @@ -21,6 +21,7 @@ export const menteeUrl = { export const mentorUrl = { postMentorRegister: () => '/mentor', + putMentorRegister: () => '/mentor', getMentorList: () => '/mentor', deleteMyMentorData: () => '/mentor/my', getMyInfo: () => '/mentor/my', From f338815e70d58b6a47d01f36ea9c80562a3797c8 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 26 Dec 2023 22:21:50 +0900 Subject: [PATCH 076/130] Update usePostMentorRegister --- src/hooks/api/mentor/index.ts | 1 + .../{usePostMentorRegister copy.ts => usePostMentorRegister.ts} | 0 2 files changed, 1 insertion(+) rename src/hooks/api/mentor/{usePostMentorRegister copy.ts => usePostMentorRegister.ts} (100%) diff --git a/src/hooks/api/mentor/index.ts b/src/hooks/api/mentor/index.ts index 3a1045f8..bc7e9326 100644 --- a/src/hooks/api/mentor/index.ts +++ b/src/hooks/api/mentor/index.ts @@ -1,4 +1,5 @@ export * from './useDeleteMyMentorData'; export * from './useGetMentorList'; export * from './useGetMyInfo'; +export * from './usePostMentorRegister'; export * from './usePutMentorRegister'; diff --git a/src/hooks/api/mentor/usePostMentorRegister copy.ts b/src/hooks/api/mentor/usePostMentorRegister.ts similarity index 100% rename from src/hooks/api/mentor/usePostMentorRegister copy.ts rename to src/hooks/api/mentor/usePostMentorRegister.ts From e45b1162c4adde73c0cb53cb234edd49639c0f7c Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 26 Dec 2023 22:29:05 +0900 Subject: [PATCH 077/130] Rename usePutMentorUpdate --- src/hooks/api/mentor/index.ts | 2 +- .../{usePutMentorRegister.ts => usePutMentorUpdate.ts} | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) rename src/hooks/api/mentor/{usePutMentorRegister.ts => usePutMentorUpdate.ts} (80%) diff --git a/src/hooks/api/mentor/index.ts b/src/hooks/api/mentor/index.ts index bc7e9326..9a089834 100644 --- a/src/hooks/api/mentor/index.ts +++ b/src/hooks/api/mentor/index.ts @@ -2,4 +2,4 @@ export * from './useDeleteMyMentorData'; export * from './useGetMentorList'; export * from './useGetMyInfo'; export * from './usePostMentorRegister'; -export * from './usePutMentorRegister'; +export * from './usePutMentorUpdate'; diff --git a/src/hooks/api/mentor/usePutMentorRegister.ts b/src/hooks/api/mentor/usePutMentorUpdate.ts similarity index 80% rename from src/hooks/api/mentor/usePutMentorRegister.ts rename to src/hooks/api/mentor/usePutMentorUpdate.ts index bc80ad2e..8d049538 100644 --- a/src/hooks/api/mentor/usePutMentorRegister.ts +++ b/src/hooks/api/mentor/usePutMentorUpdate.ts @@ -15,12 +15,12 @@ interface RequestType extends MentorType { career: CareerType[]; } -export const usePutMentorRegister = ( +export const usePutMentorUpdate = ( options?: UseMutationOptions ) => useMutation({ - mutationKey: mentorQueryKeys.putMentorRegister(), + mutationKey: mentorQueryKeys.putMentorUpdate(), mutationFn: (mentorInfo: RequestType) => - put(mentorUrl.putMentorRegister(), mentorInfo), + put(mentorUrl.putMentorUpdate(), mentorInfo), ...options, }); From 28e57ce26cbc65485a5b4283b5d66af97e7bb087 Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Tue, 26 Dec 2023 22:52:08 +0900 Subject: [PATCH 078/130] Update SNS allow '' empty string --- src/pageContainer/register/mentor/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pageContainer/register/mentor/index.tsx b/src/pageContainer/register/mentor/index.tsx index fb751d13..6b728b5e 100644 --- a/src/pageContainer/register/mentor/index.tsx +++ b/src/pageContainer/register/mentor/index.tsx @@ -121,7 +121,7 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { setValue('name', myInfoData.name); setValue('phoneNumber', myInfoData.phoneNumber); setValue('email', myInfoData.email); - setValue('snsUrl', myInfoData.SNS); + setValue('snsUrl', myInfoData.SNS ?? ''); setValue('generation', myInfoData.generation.toString()); setIsUpdate(true); From 1b6bd2b20a9aa25e2b32947069d7fe4236828563 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 26 Dec 2023 23:15:19 +0900 Subject: [PATCH 079/130] Update mentorUpdate --- src/hooks/api/mentor/usePutMentorUpdate.ts | 4 +- src/libs/api/queryKeys.ts | 2 +- src/libs/api/requestUrlController.ts | 2 +- src/pageContainer/register/mentor/index.tsx | 53 ++++++++++++++++----- 4 files changed, 45 insertions(+), 16 deletions(-) diff --git a/src/hooks/api/mentor/usePutMentorUpdate.ts b/src/hooks/api/mentor/usePutMentorUpdate.ts index 8d049538..97e8e3f5 100644 --- a/src/hooks/api/mentor/usePutMentorUpdate.ts +++ b/src/hooks/api/mentor/usePutMentorUpdate.ts @@ -7,11 +7,11 @@ import type { UseMutationOptions } from '@tanstack/react-query'; import type { AxiosError } from 'axios'; interface CareerType extends RequestCareerType { - id: string; + id?: number; } interface RequestType extends MentorType { - id?: string; + id?: number; career: CareerType[]; } diff --git a/src/libs/api/queryKeys.ts b/src/libs/api/queryKeys.ts index cbd3bfd7..d6e70bcf 100644 --- a/src/libs/api/queryKeys.ts +++ b/src/libs/api/queryKeys.ts @@ -13,7 +13,7 @@ export const menteeQueryKeys = { export const mentorQueryKeys = { postMentorRegister: () => ['mentor'], - putMentorRegister: () => ['mentor', 'update'], + putMentorUpdate: () => ['mentor', 'update'], getMentorList: () => ['mentor', 'list'], deleteMyMentorData: () => ['mentor', 'my'], getMyInfo: () => ['mentor', 'my', 'info'], diff --git a/src/libs/api/requestUrlController.ts b/src/libs/api/requestUrlController.ts index 86216cd7..c9e838f1 100644 --- a/src/libs/api/requestUrlController.ts +++ b/src/libs/api/requestUrlController.ts @@ -21,8 +21,8 @@ export const menteeUrl = { export const mentorUrl = { postMentorRegister: () => '/mentor', - putMentorRegister: () => '/mentor', getMentorList: () => '/mentor', + putMentorUpdate: () => '/mentor/my', deleteMyMentorData: () => '/mentor/my', getMyInfo: () => '/mentor/my', }; diff --git a/src/pageContainer/register/mentor/index.tsx b/src/pageContainer/register/mentor/index.tsx index 6dbed6cd..7e16a661 100644 --- a/src/pageContainer/register/mentor/index.tsx +++ b/src/pageContainer/register/mentor/index.tsx @@ -23,6 +23,7 @@ import { useDeleteTempMentor, useGetMyInfo, usePostMentorRegister, + usePutMentorUpdate, } from '@/hooks'; import { mentorInfoFormSchema } from '@/schemas'; import type { RequestCareerType } from '@/types'; @@ -44,15 +45,25 @@ interface Props { mentorInfo: TempMentorType | null; } +interface CareerType extends RequestCareerType { + id?: number; +} + +interface RequestType extends MentorType { + id?: number; + career: CareerType[]; +} + const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { const [careerArray, setCareerArray] = useState([ extractCareer(mentorInfo?.company ?? null), ]); + const [careerId, setCareerId] = useState([]); const [isUpdate, setIsUpdate] = useState(false); const { push } = useRouter(); - const { data, isError } = useGetMyInfo(); + const { data: myInfo, isError } = useGetMyInfo(); const { mutate: mutateDeleteTempMentor } = useDeleteTempMentor({ onSettled: () => push('/'), @@ -63,6 +74,11 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { onSuccess: () => handleMentorRegisterSuccess(), }); + const { mutate: mutateMentorUpdate } = usePutMentorUpdate({ + onError: () => toast.error('멘토 수정에 실패하였습니다.'), + onSuccess: () => handleMentorUpdateSuccess(), + }); + const handleMentorRegisterSuccess = () => { toast.success('멘토 등록에 성공하였습니다.'); if (tempMentorId) { @@ -71,6 +87,14 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { return push('/'); }; + const handleMentorUpdateSuccess = () => { + toast.success('멘토 등록에 성공하였습니다.'); + if (tempMentorId) { + return mutateDeleteTempMentor(tempMentorId); + } + return push('/mypage'); + }; + const { register, handleSubmit, @@ -88,9 +112,9 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { }); useEffect(() => { - if (!data || isError) setIsUpdate(false); + if (!myInfo || isError) setIsUpdate(false); else { - const career = data.career; + const career = myInfo.career; const newCareerList: CareerFormType[] = career.map((career) => { const startDate = new Date(career.startDate); const endDate = career.endDate ? new Date(career.endDate) : null; @@ -117,16 +141,17 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { }); setCareerArray(newCareerList); + setCareerId(newCareerList.map((career) => career.id)); - setValue('name', data.name); - setValue('phoneNumber', data.phoneNumber); - setValue('email', data.email); - setValue('snsUrl', data.SNS); - setValue('generation', data.generation.toString()); + setValue('name', myInfo.name); + setValue('phoneNumber', myInfo.phoneNumber); + setValue('email', myInfo.email); + setValue('snsUrl', myInfo.SNS); + setValue('generation', myInfo.generation.toString()); setIsUpdate(true); } - }, [data, isError, setValue]); + }, [myInfo, isError, setValue]); const onSubmit: SubmitHandler = (data) => { const validatedArray = careerValidation(careerArray, setCareerArray); @@ -135,7 +160,7 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { return toast.error('재직 회사 정보를 다시 확인해주세요.'); } - const body: MentorType = { + const body: RequestType = { name: data.name, email: data.email, generation: Number(data.generation), @@ -144,6 +169,8 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { career: [], }; + if (isUpdate && myInfo) body.id = myInfo.id; + careerArray.forEach((career) => { const startYear = career.startYear.value !== '년' ? career.startYear.value : 0; @@ -161,7 +188,7 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { ? null : UTCDate(endYear, endMonth); - const careerData: RequestCareerType = { + const careerData: CareerType = { companyName: career.companyName.value, companyUrl: career.companyUrl.value || null, position: career.position.value, @@ -170,11 +197,13 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { isWorking: career.isWorking.value, }; + if (careerId.includes(career.id)) careerData.id = career.id; + body.career.push(careerData); }); if (!isUpdate) mutateMentorRegister(body); - // else 내 정보 수정 hook + else mutateMentorUpdate(body); }; const onError: SubmitErrorHandler = () => { From d114437a4b280741cb9f4f80ddb3e764f5ab9ad7 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 26 Dec 2023 23:33:44 +0900 Subject: [PATCH 080/130] Update profileUrl --- src/pageContainer/register/mentor/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pageContainer/register/mentor/index.tsx b/src/pageContainer/register/mentor/index.tsx index 7e16a661..2b1486dd 100644 --- a/src/pageContainer/register/mentor/index.tsx +++ b/src/pageContainer/register/mentor/index.tsx @@ -169,7 +169,10 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { career: [], }; - if (isUpdate && myInfo) body.id = myInfo.id; + if (isUpdate && myInfo) { + body.profileUrl = myInfo.profileUrl; + body.id = myInfo.id; + } careerArray.forEach((career) => { const startYear = From 06fd27a2b74a935b3e6b5d29f93055b0a8f97a53 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Wed, 27 Dec 2023 00:26:09 +0900 Subject: [PATCH 081/130] Update toast --- src/pageContainer/register/mentor/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pageContainer/register/mentor/index.tsx b/src/pageContainer/register/mentor/index.tsx index 2b1486dd..40f2e595 100644 --- a/src/pageContainer/register/mentor/index.tsx +++ b/src/pageContainer/register/mentor/index.tsx @@ -88,7 +88,7 @@ const MentorRegister: React.FC = ({ tempMentorId, mentorInfo }) => { }; const handleMentorUpdateSuccess = () => { - toast.success('멘토 등록에 성공하였습니다.'); + toast.success('멘토 수정에 성공하였습니다.'); if (tempMentorId) { return mutateDeleteTempMentor(tempMentorId); } From 1c38828b6d36b9749dae3f5c7914ada7236b4374 Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Wed, 27 Dec 2023 16:56:57 +0900 Subject: [PATCH 082/130] Update Select style --- src/components/Select/style.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Select/style.ts b/src/components/Select/style.ts index f682fb42..d64a5fc4 100644 --- a/src/components/Select/style.ts +++ b/src/components/Select/style.ts @@ -19,13 +19,10 @@ export const CustomSelect = styled.select<{ :disabled { background-color: ${({ theme }) => theme.color.grey[50]}; + color: ${({ theme }) => theme.color.grey[200]}; cursor: default; } - ::placeholder { - color: ${({ theme }) => theme.color.grey[400]}; - } - :focus { outline: none; border: 0.0625rem solid From e747b54acdf050e2e6a2ef00950cbe03a3130cdc Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Wed, 27 Dec 2023 16:59:04 +0900 Subject: [PATCH 083/130] Remove useForwardRef in SelectFormItem --- src/components/FormItem/Select/index.tsx | 31 ++++++++++-------------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/src/components/FormItem/Select/index.tsx b/src/components/FormItem/Select/index.tsx index 2e511d03..52d91d19 100644 --- a/src/components/FormItem/Select/index.tsx +++ b/src/components/FormItem/Select/index.tsx @@ -3,7 +3,6 @@ import { forwardRef } from 'react'; import { FormItemWrapper, Select } from '@/components'; -import { useForwardRef } from '@/hooks'; interface Props extends React.SelectHTMLAttributes { selectTitle: string; @@ -14,24 +13,20 @@ interface Props extends React.SelectHTMLAttributes { } const SelectFormItem = forwardRef( - ({ selectTitle, errorMessage, options, required, ...attributes }, ref) => { - const selectRef = useForwardRef(ref); - - return ( - ( + + - ); - } + ref={ref} + {...attributes} + /> + + ) ); SelectFormItem.displayName = 'Input'; From b74708f9fdc695064931b2c295b6975b92b8b99b Mon Sep 17 00:00:00 2001 From: hyeongrok7874 Date: Wed, 27 Dec 2023 17:08:01 +0900 Subject: [PATCH 084/130] Update uncontrolled select => controlled select in CareerRegistrationBox --- src/components/CareerRegistrationBox/index.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/CareerRegistrationBox/index.tsx b/src/components/CareerRegistrationBox/index.tsx index acefd042..8d1c0e9e 100644 --- a/src/components/CareerRegistrationBox/index.tsx +++ b/src/components/CareerRegistrationBox/index.tsx @@ -116,8 +116,6 @@ const CareerRegistrationBox: React.FC = ({ newCareer.isWorking.value = isChecked; if (isChecked) { - if (endYearRef.current) endYearRef.current.value = ''; - if (endMonthRef.current) endMonthRef.current.value = ''; newCareer.endYear.value = '년'; newCareer.endYear.errorMessage = null; newCareer.endMonth.value = '월'; @@ -163,11 +161,12 @@ const CareerRegistrationBox: React.FC = ({ errorMessage={companyUrl.errorMessage} /> @@ -183,31 +182,35 @@ const CareerRegistrationBox: React.FC = ({ >