-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Remove: team url 제거하기 * Rename: GDSC -> GDG로 이름 변경 * Design: CSS 내용 추가 * Feat: TeamList 및 멤버 리스트 API 구현 * Feat: 드롭다운 공용컴포넌트 구현 * Feat: Team Title 반응형 전부 구현 * Feat: TeamData type 설정 * Remove: MetaData 제거 * Feat: Team Member 및 Team Name설정 * Feat: Team Content 최종 설정 * Feat: 새 Core Member 추가하기
- Loading branch information
Showing
36 changed files
with
597 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { fetchInstance } from '@gdsc/apis/instance/Api_JWT'; | ||
|
|
||
| import { useQuery, UseQueryResult } from '@tanstack/react-query'; | ||
|
|
||
| export type TeamList = { | ||
| id: number; | ||
| teamName: string; | ||
| }; | ||
|
|
||
| const getTeamListPath = () => '/api/team'; | ||
|
|
||
| const teamListQueryKey = [getTeamListPath()]; | ||
|
|
||
| const getTeamList = async () => { | ||
| const response = await fetchInstance.get(getTeamListPath()); | ||
| return response.data; | ||
| }; | ||
|
|
||
| export const useGetTeamList = (): UseQueryResult<TeamList[], Error> => { | ||
| const accessToken = sessionStorage.getItem('accessToken'); | ||
|
|
||
| return useQuery<TeamList[], Error>({ | ||
| queryKey: teamListQueryKey, | ||
| queryFn: getTeamList, | ||
| enabled: !!accessToken, | ||
| }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { fetchInstance } from '@gdsc/apis/instance/Api_JWT'; | ||
|
|
||
| import type { TeamData } from '@gdsc/types/TeamData.type'; | ||
| import { useQuery, UseQueryResult } from '@tanstack/react-query'; | ||
|
|
||
| const getTeamMatePath = (teamId: number) => `/api/team/${teamId}/member`; | ||
|
|
||
| const getTeamMate = async (teamId: number) => { | ||
| const response = await fetchInstance.get(getTeamMatePath(teamId)); | ||
| return response.data; | ||
| }; | ||
|
|
||
| export const useGetTeamMate = ( | ||
| teamId: number | ||
| ): UseQueryResult<TeamData[], Error> => { | ||
| const accessToken = sessionStorage.getItem('accessToken'); | ||
|
|
||
| return useQuery<TeamData[], Error>({ | ||
| queryKey: [getTeamMatePath(teamId)], | ||
| queryFn: () => getTeamMate(teamId), | ||
| enabled: !!accessToken, | ||
| }); | ||
| }; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| import HdDropDown from '@gdsc/assets/HdDropDown.svg'; | ||
| import HdDropUp from '@gdsc/assets/HdDropUp.svg'; | ||
|
|
||
| import type { TeamList } from '@gdsc/apis/hooks/team/useGetTeamList'; | ||
|
|
||
| import styled from '@emotion/styled'; | ||
|
|
||
| type DropDownProps = { | ||
| options: TeamList[]; | ||
| onSelect: (option: TeamList) => void; | ||
| }; | ||
|
|
||
| const DropDown = ({ options, onSelect }: DropDownProps) => { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const [selectedOption, setSelectedOption] = useState<TeamList | null>( | ||
| options && options.length > 0 ? options[0] : null | ||
| ); | ||
|
|
||
| const toggleDropDown = () => setIsOpen((prev) => !prev); | ||
| const handleOptionClick = (option: TeamList) => { | ||
| setSelectedOption(option); | ||
| onSelect(option); | ||
| setIsOpen(false); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (options && options.length > 0 && !selectedOption) { | ||
| setSelectedOption(options[0]); | ||
| onSelect(options[0]); | ||
| } | ||
| }, [options, selectedOption, onSelect]); | ||
|
|
||
| return ( | ||
| <DropDownContainer> | ||
| <DropDownBox onClick={toggleDropDown}> | ||
| <DropDownText>{selectedOption?.teamName || 'Select Team'}</DropDownText> | ||
| <img src={isOpen ? HdDropUp : HdDropDown} alt='toggle dropdown' /> | ||
| </DropDownBox> | ||
|
|
||
| <DropDownList isOpen={isOpen}> | ||
| {(options || []).map((option) => ( | ||
| <DropDownItem | ||
| key={option.id} | ||
| onClick={() => handleOptionClick(option)} | ||
| > | ||
| {option.teamName} | ||
| </DropDownItem> | ||
| ))} | ||
| </DropDownList> | ||
| </DropDownContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default DropDown; | ||
|
|
||
| const DropDownContainer = styled.div` | ||
| position: relative; | ||
| width: 100%; | ||
| `; | ||
|
|
||
| const DropDownBox = styled.div` | ||
| background: rgba(255, 255, 255, 0.15); | ||
| border-radius: 16px; | ||
| box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); | ||
| backdrop-filter: blur(0px); | ||
| -webkit-backdrop-filter: blur(0px); | ||
| width: calc(100% - 26px); | ||
| height: 15px; | ||
| padding: 14px 13px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| const DropDownText = styled.span` | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| font-size: var(--font-size-sm); | ||
| `; | ||
|
|
||
| interface DropDownListProps { | ||
| isOpen: boolean; | ||
| } | ||
|
|
||
| const DropDownList = styled.ul<DropDownListProps>` | ||
| background: white; | ||
| border-radius: 12px; | ||
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | ||
| margin-top: 8px; | ||
| position: absolute; | ||
| width: 100%; | ||
| z-index: 10; | ||
| list-style: none; | ||
| padding: 0; | ||
| opacity: ${({ isOpen }) => (isOpen ? '1' : '0')}; | ||
| overflow-y: auto; | ||
| transition: | ||
| max-height 0.3s ease, | ||
| opacity 0.3s ease; | ||
| `; | ||
|
|
||
| const DropDownItem = styled.li` | ||
| padding: 12px; | ||
| cursor: pointer; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| color: var(--color-halti); | ||
| font-size: var(--font-size-sm); | ||
| border-bottom: 1px solid var(--color-santas); | ||
| margin: 0 auto; | ||
| &:hover { | ||
| background-color: rgba(0, 0, 0, 0.05); | ||
| } | ||
| &:last-of-type { | ||
| border-bottom: 0px; | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.