feat : Landing - LinkUI 작성 #261
Conversation
- 외부 링크를 추가할 수 있는 모달을 임시 작성 - 실제 api 연결 시, 해당 모달의 기능을 상세로 추가할 예정
- LandingLink 컴포넌트를 분리하는 리팩토링 진행
- types 파일 구조 변경으로 인한 projectDTO 호출 오류 수정
dongind
force-pushed
the
feat/landing/linkUI
branch
from
7ace44b
to
244ad6b
Compare
| <button | ||
| className="w-full flex justify-start items-center gap-4 p-3 bg-white rounded-lg shadow-box hover:bg-light-gray" | ||
| onClick={handleLinkClick} | ||
| > | ||
| <ProfileImage imageUrl={linkLogoUrl} pxSize={40} /> | ||
| <p className="text-dark-green text-xs font-bold truncate"> | ||
| {description} | ||
| </p> | ||
| </button> |
There was a problem hiding this comment.
링크니까 a태그로 하는 건 어떨까요? 다른 페이지로 이동할 때 실행되어야 할 로직이 없다면 링크의 의미를 살려서 a태그로 하는 것도 괜찮을 것 같습니다.
| export const LINK_URL_TYPE = { | ||
| NAVER: "naver.com", | ||
| GITHUB: "github.com", | ||
| GITLAB: "gitlab.com", | ||
| SLACK: "slack.com", | ||
| FIGMA: "figma.com", | ||
| NOTION: "notion.so", | ||
| GOOGLE: "google.com", | ||
| DISCORD: "discord.com", | ||
| YOUTUBE: "youtube.com", | ||
| }; |
There was a problem hiding this comment.
해당 객체에서 키와 밸류를 반대로 하면 getLinkType 함수에서 switch문을 사용하지 않아도 될 것 같습니다.
There was a problem hiding this comment.
단순히 Map 형식의 데이터를 사용할 경우, 저기에 속하지 않는 데이터의 경우에는 처리하기가 어려울 것 같습니다. 예를 들어, "tistory.com"의 url이 들어갈 경우, 말씀해주신 방식으로는 해당 URL에 대한 return 값을 받아오기 어렵습니다. 이런 예외 처리를 위해 switch 문을 사용하는 것이 더 효율적으로 보입니다.
혹시 이러한 예외 사항들을 처리하는 다른 방법이 있으실까요?
There was a problem hiding this comment.
미리 지정하지 않은 타입의 경우 객체 내에 해당 URL의 정보가 있는지 판별하고 없다면 default값(LINK)을 리턴하도록 하면 될 것이라 생각했습니다.
위처럼 제안한 이유는 서비스에서 지원해주는 자동 아이콘이 많아지면 상수에 타입을 추가하는 것과 더불어 함수 내의 switch문에도 이를 처리해주는 코드를 추가해야 하는 번거로움이 있을 것이라 생각했기 때문입니다. 그런데 고민할거리에 적어주신 대로 url를 통해 페이지 자체 ico를 가져오면 이는 필요하지 않을 것 같기도 하네요.
There was a problem hiding this comment.
한번 위의 방법은 ico를 가져오는 코드를 시도해보고 실패하면 그때 수정해보도록 하겠습니다.
- 태그의 의미를 살리기 위해 button 태그를 a 태그로 변경
🎟️ 태스크
Landing Page - 외부 링크 UI 구현
✅ 작업 내용
+ 버튼을 누르면 모달이 띄워지는 기능 추가🖊️ 구체적인 작업
외부 링크 UI 구현
Landing Page에 외부 링크를 표시하는 컴포넌트를 작성 완료 했습니다.
아이콘 반환 함수 작성
미리 정해진 URL 대표 주소에 따라 자동으로 아이콘을 반환하여 화면에 띄워주는 코드를 작성했습니다.
가장 먼저, getLintType 함수를 통해 받아온 코드의 Url을 분석하고, 해당 아이콘이 준비되어 있다면 해당 주소 아이콘을 띄워주고 아닐 경우 체인 아이콘을 띄워주도록 설계했습니다.
링크 생성 모달 작성
아직 임시로 디자인만 완성한 모달 코드만을 생성했습니다. 자세한 기능은 실제 백과 데이터를 연결할 때 사용할 예정입니다.
🤔 고민 및 의논할 거리(선택)
📸 결과 화면(선택)